/* ============================================================
   TIENDA

   Un escaparate corto: que se vende, cuanto cuesta y como se
   pide. Las superficies y los campos son los componentes
   comunes (`.surface`, `.field`, `.input`); aqui solo lo propio.
   ============================================================ */

.shop {
    max-width: 66rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.shop--narrow {
    max-width: 40rem;
}

/* --- La llamada ---------------------------------------------- */

.shop__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.shop__portrait {
    width: clamp(80px, 14vw, 104px);
    height: auto;
    border-radius: 50%;
}

.shop__title {
    margin: 0;
    font-size: clamp(1.9rem, 6vw, 3.25rem);
    line-height: var(--leading-tight);
}

.shop__lead {
    margin: 0;
    max-width: 52ch;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.shop__hero .gold-rule {
    margin-inline: auto;
}

/* --- El escaparate ------------------------------------------- */

.shop__grid {
    /* Centrado: con dos productos una rejilla de tres dejaba un hueco a la
       derecha que parecia un producto que no cargo. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada producto es una tarjeta con su abanico de cartas arriba. Al pasar
   por encima el abanico se abre y la tarjeta se inclina hacia el puntero
   (`data-tilt`, en flourish.js): se nota que se puede tocar antes de leer
   nada. En el movil no hay puntero, y el abanico ya sale medio abierto. */
.shop__grid > li {
    flex: 0 1 23rem;
}

/* El marco de las cartas: un filete de oro por fuera y otro por dentro,
   separados. El mismo que lleva el retrato de Yuna en la portada. */
.offer {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-celestial);
    border: var(--border-width) solid color-mix(in srgb, var(--gold) 55%, transparent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 6px var(--bg-surface),
                inset 0 0 0 7px color-mix(in srgb, var(--gold) 26%, transparent),
                var(--shadow-md);
    transition: box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.offer:hover,
.offer:focus-within {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 6px var(--bg-surface),
                inset 0 0 0 7px color-mix(in srgb, var(--gold) 45%, transparent),
                var(--shadow-lg);
}

.offer__art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    margin: 7px 7px 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background:
        radial-gradient(circle at 50% 120%, var(--celestial-glint-strong), transparent 65%),
        var(--surface-celestial-strong);
    transition: transform var(--duration-base) var(--ease-out);
}

.offer__art.is-tilting {
    transform: perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg));
    transition: none;
}

.offer__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer__fan {
    position: relative;
    width: 34%;
    aspect-ratio: 500 / 855;
}

/* Las tres cartas una encima de otra, abiertas desde abajo como en la
   mano. `--fan-index` es 0, 1, 2: la del medio queda recta. */
.offer__card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transform-origin: 50% 110%;
    transform: rotate(calc((var(--fan-index) - 1) * 9deg));
    transition: transform var(--duration-slow) var(--ease-out);
}

.offer:hover .offer__card,
.offer:focus-within .offer__card,
.product__media:hover .offer__card {
    transform: translateY(-4%) rotate(calc((var(--fan-index) - 1) * 20deg));
}

.offer__price {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--gold-bright);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.offer__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}

.offer__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--accent-ink);
}

.offer__kind .material-symbols-rounded {
    font-size: 1.1rem;
}

.offer__name {
    margin: 0;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
}

.offer__summary {
    margin: 0;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.offer__more {
    border-top: var(--border-width) solid var(--border-accent);
}

.offer__more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
}

.offer__more summary::-webkit-details-marker {
    display: none;
}

.offer__more summary .material-symbols-rounded {
    transition: transform var(--duration-base) var(--ease-out);
}

.offer__more[open] summary .material-symbols-rounded {
    transform: rotate(180deg);
}

.offer__description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.offer__description p {
    margin: 0 0 var(--space-2);
    text-wrap: pretty;
}

.offer__delivery {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}

.offer__cta {
    justify-content: center;
    margin-top: auto;
}

/* Sin raton el abanico no se abre al pasar por encima: se deja abierto. */
@media (hover: none) {
    .offer__card {
        transform: rotate(calc((var(--fan-index) - 1) * 15deg));
    }
}

.shop__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}

/* --- Como funciona ------------------------------------------- */

.shop__steps {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.shop__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) 0 0;
    border-top: var(--border-width) solid var(--border-accent);
}

.shop__step-icon {
    font-size: 2rem;
    color: var(--accent-ink);
}

.shop__step-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.shop__step-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* --- La ficha ------------------------------------------------ */

.shop__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    font-size: var(--text-sm);
}

.product {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
}

.product__media {
    overflow: hidden;
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
}

.product__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product__name {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 2.75rem);
    line-height: var(--leading-tight);
}

.product__price {
    margin: 0;
    font-size: var(--text-2xl);
}

.product__summary {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.product__description p {
    margin: 0 0 var(--space-3);
    text-wrap: pretty;
}

.product__delivery {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    font-size: var(--text-sm);
    background: var(--gold-soft);
    border-left: 3px solid var(--secondary);
    border-radius: var(--radius-sm);
}

/* --- El formulario ------------------------------------------- */

.order-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
}

.order-form__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.order-form__row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.order-form__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.order-form__submit {
    align-self: flex-start;
}

@media (max-width: 559px) {
    .order-form {
        padding: var(--space-5);
    }

    .order-form__submit {
        align-self: stretch;
        justify-content: center;
    }
}

.order-form__title {
    margin: 0;
    font-size: var(--text-3xl);
}

.order-form__lead {
    margin: 0;
    color: var(--text-secondary);
}

.order-form__methods {
    margin: 0;
    padding: 0;
    border: 0;
}

.order-form__options {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

/* Cada opcion es una tarjeta entera pulsable, no un circulo diminuto:
   en el movil es donde mas se compra y donde menos se acierta. */
.order-form__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-md);
}

.order-form__option:has(:checked) {
    background: var(--gold-soft);
    border-color: var(--secondary);
    box-shadow: var(--ring-gold-strong);
}

.order-form__choice {
    accent-color: var(--secondary);
}

/* --- El acuse ------------------------------------------------ */

.shop-receipt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    text-align: center;
}

.shop-receipt__icon {
    font-size: 3.5rem;
    color: var(--accent-ink);
}

.shop-receipt__title {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 2.25rem);
}

.shop-receipt__text {
    margin: 0;
    max-width: 44ch;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.shop-receipt__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.order-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin: var(--space-2) 0 0;
}

.order-summary dt {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.order-summary dd {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
    .offer,
    .offer__art,
    .offer__card,
    .offer__more summary .material-symbols-rounded {
        transition: none;
    }
}

/* --- El acceso al panel -------------------------------------- */

.shop__staff {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: center;
    min-height: 44px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
}

.shop__staff:hover,
.shop__staff:focus-visible {
    color: var(--accent-ink);
}

.shop__staff .material-symbols-rounded {
    font-size: 1rem;
}