/* ==========================================================================
   Ficha de producto
   --------------------------------------------------------------------------
   Este archivo carga ANTES de theme.css, que es la capa visual del sitio: la
   tarjeta, el precio, los talles, el boton y las miniaturas se definen alla y
   una sola vez. Aca queda lo propio de la ficha que theme.css no toca, mas los
   bloques que solo existen en esta pagina (guia de talles, secciones de datos).
   ========================================================================== */

body.single-product {
    background-color: var(--fedelan-white);
}

/* WooCommerce flota la columna de datos a la izquierda: la grilla se encarga
   del ancho, el float solo la rompe. */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
    float: none !important;
    clear: none !important;
}

/* Precio con descuento por transferencia, en los productos que no pasan por el
   plugin de curva. */
.fedelan-price-info {
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Selector nativo de variaciones (productos fuera del plugin de curva)
   -------------------------------------------------------------------------- */

.fedelan-single-details form.cart {
    text-align: left;
}

.fedelan-single-details form.cart .variations {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
}

/* El link "Limpiar" de WooCommerce: con los talles como botones no hace falta. */
.reset_variations {
    display: none !important;
}

/* El select de WooCommerce sigue existiendo para su JavaScript, pero no se ve:
   el talle se elige con los botones (regla V1). */
.fedelan-hidden-select select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Firefox y Chrome dibujan flechitas dentro del campo de cantidad. */
.fedelan-qty-input::-webkit-inner-spin-button,
.fedelan-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Galeria
   -------------------------------------------------------------------------- */

/* En telefono: de costado cambia la foto, hacia abajo sigue bajando la pagina
   y el pellizco sigue acercando (reglas D5 y D6). Sin esto el navegador se
   queda con el arrastre horizontal y el deslizar no cambia de foto. */
.fedelan-gallery-main {
    touch-action: pan-y pinch-zoom;
}

.fedelan-gallery-main.is-arrastrando {
    cursor: grabbing;
}

/* Si hay mas miniaturas de las que entran, la tira se corta con un degradado
   en vez de terminar en seco (regla D3). La clase la pone single-product.js
   cuando mide que sobra contenido. */
.fedelan-gallery-thumbs.is-desbordado {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}

@media (max-width: 900px) {
    /* En una sola columna la foto se come la pantalla entera y el precio queda
       abajo del pliegue. Con el tope la foto sigue siendo lo primero y el
       nombre con el precio entran en la misma pantalla (reglas A2 y A3). */
    .fedelan-gallery-main {
        max-height: 48vh;
    }

    .fedelan-gallery-thumbs.is-desbordado {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
}

/* --------------------------------------------------------------------------
   Bloque de compra
   -------------------------------------------------------------------------- */

/* Envio y cambios, abajo del boton (reglas C1 y C3). */
.fedelan-single-note p {
    margin: 0 0 6px;
}

.fedelan-single-note p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Guia de talles: el link y la capa
   -------------------------------------------------------------------------- */

/* El disparador es un link cuando la pagina existe y un boton cuando todavia
   no: los dos se ven igual. */
button.fedelan-compra__guia {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--fedelan-ink);
    cursor: pointer;
}

/* El rotulo no se parte en dos renglones al lado de "Talles de la curva", y
   la zona sensible llega a 44 aunque el texto mida 20. */
.fedelan-compra__guia {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
}

.fedelan-compra__guia-linea {
    margin: 10px 0 0;
}

.fedelan-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* display: flex pisa el hidden del navegador: hay que repetirlo. */
.fedelan-modal[hidden] {
    display: none;
}

.fedelan-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.fedelan-modal__caja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: min(86vh, 880px);
    background: var(--fedelan-paper);
    border-radius: 0;
}

.fedelan-modal__caja:focus {
    outline: none;
}

.fedelan-modal__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: none;
    padding: 18px 24px;
    border-bottom: 1px solid var(--fedelan-line);
}

.fedelan-modal__titulo {
    margin: 0;
    font-family: var(--fedelan-font-display);
    font-variation-settings: "opsz" 96;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--fedelan-ink);
}

.fedelan-modal__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--fedelan-ink);
    cursor: pointer;
}

.fedelan-modal__cerrar svg {
    width: 20px;
    height: 20px;
}

.fedelan-modal__cuerpo {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 28px;
}

/* Con la capa abierta el fondo no se mueve. */
body.fedelan-modal-abierto {
    overflow: hidden;
}

.fedelan-guia {
    font-family: var(--fedelan-font-primary);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fedelan-ink);
}

.fedelan-guia h2 {
    margin: 26px 0 10px;
    font-family: var(--fedelan-font-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fedelan-ink);
}

.fedelan-guia > *:first-child {
    margin-top: 0;
}

.fedelan-guia p {
    margin: 0 0 10px;
    max-width: 68ch;
}

.fedelan-guia figure {
    margin: 0 0 14px;
    overflow-x: auto;
}

.fedelan-guia table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Los estilos de bloque de WordPress le ponen recuadro a cada celda: la tabla
   va con una sola linea por fila, como el resto del sitio. */
.fedelan-guia table th,
.fedelan-guia table td {
    padding: 9px 10px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--fedelan-line);
    white-space: nowrap;
}

/* El bloque tabla de WordPress subraya la cabecera con 3px. */
.fedelan-guia table thead {
    border-bottom: 0;
}

.fedelan-guia table th {
    font-size: 12px;
    font-weight: 700;
    color: var(--fedelan-muted);
}

.fedelan-guia table tbody td:first-child {
    font-weight: 700;
}

.fedelan-guia__dibujo {
    margin: 0 0 16px;
}

.fedelan-guia__dibujo svg {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    color: var(--fedelan-ink);
}

/* --------------------------------------------------------------------------
   Relacionados
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Descripcion y datos, abajo del bloque de compra
   -------------------------------------------------------------------------- */

.fedelan-secciones {
    margin: 30px 0 0;
}

.fedelan-seccion {
    border-top: 1px solid var(--fedelan-line);
}

.fedelan-seccion:last-child {
    border-bottom: 1px solid var(--fedelan-line);
}

.fedelan-seccion__titulo {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
}

.fedelan-seccion__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--fedelan-font-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fedelan-ink);
    text-align: left;
    cursor: pointer;
}

/* El conteo solo hace falta con la seccion plegada, que es el telefono. */
.fedelan-seccion__conteo {
    display: none;
    font-weight: 500;
    color: var(--fedelan-muted);
}

.fedelan-seccion__icono {
    width: 18px;
    height: 18px;
    flex: none;
    margin-left: auto;
    stroke: var(--fedelan-ink);
    transition: transform var(--fedelan-dur) var(--fedelan-ease);
}

.fedelan-seccion__toggle[aria-expanded="true"] .fedelan-seccion__icono {
    transform: rotate(180deg);
}

.fedelan-seccion__cuerpo {
    padding: 0 0 18px;
    /* Regla N4: la linea de texto no pasa de 70 caracteres. */
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fedelan-muted);
}

.fedelan-seccion__cuerpo p {
    margin: 0 0 10px;
}

.fedelan-seccion__cuerpo > *:last-child {
    margin-bottom: 0;
}

.fedelan-datos {
    margin: 0;
}

.fedelan-datos__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 3px 0;
}

.fedelan-datos dt {
    flex: 0 0 auto;
    min-width: 104px;
    font-weight: 700;
    color: var(--fedelan-ink);
}

.fedelan-datos dd {
    margin: 0;
}

.fedelan-puntos {
    margin: 0;
    padding-left: 18px;
}

.fedelan-puntos li {
    margin: 0 0 6px;
}

.fedelan-puntos li:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Foto a la altura de la pantalla y columnas fijas (reglas A1 y D7)
   --------------------------------------------------------------------------
   theme.css arma la grilla y carga despues: estas reglas le ganan por
   especificidad (llevan la clase del body), no por orden. */

/* A1: a 1366 por 768 tienen que verse sin bajar la foto entera y el boton de
   agregar. La caja de la foto sigue siendo 3:4, pero nunca mas alta que la
   pantalla menos el header y un respiro: la columna de la galeria se achica
   a lo que mide la foto con sus miniaturas y las dos columnas quedan juntas,
   centradas en la pagina. Solo en pantallas bajas: Fran eligio que en las
   grandes no cambie nada, y ahi el boton ya entraba (a 1440 por 900 termina
   en 790); de 820 de alto para arriba manda la columna fija (D7). */
@media (min-width: 901px) and (max-height: 820px) {
    .single-product .fedelan-single-product-grid {
        --fedelan-foto-alto: max(400px, calc(100vh - var(--fedelan-header-total-height) - 48px));
        grid-template-columns: minmax(0, calc(72px + var(--fedelan-gutter) + var(--fedelan-foto-alto) * 3 / 4)) minmax(320px, 440px);
        justify-content: center;
    }
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
    .single-product .fedelan-single-product-grid {
        grid-template-columns: minmax(0, calc(72px + var(--fedelan-gutter) + var(--fedelan-foto-alto) * 3 / 4)) minmax(300px, 380px);
    }
}

/* En pantallas bajas el formulario se aprieta un poco: a 768 de alto el boton
   terminaba en 790. El rotulo de cantidad traia 18 de margen arriba encima
   del espacio de la grilla. */
@media (min-width: 901px) and (max-height: 820px) {
    .single-product .fedelan-single-product-grid {
        padding-top: 16px;
    }

    .single-product .fedelan-single-details .fedelan-compra {
        gap: 16px;
    }

    .single-product .fedelan-single-details .fedelan-compra__cantidad .fedelan-compra__label {
        margin-top: 0;
    }

    .single-product .fedelan-single-details .fedelan-compra__resumen {
        margin-top: 12px;
    }

    /* theme.css lo pone con !important y cuatro clases. */
    .single-product .fedelan-single-details button.button.alt.fedelan-compra__submit {
        margin-top: 12px !important;
    }
}

/* D7: con dos columnas, la mas corta se queda fija mientras pasa la otra. La
   galeria ya era sticky; ahora las dos se pegan a la misma altura, abajo del
   header sin la cinta, que se va al bajar. La columna de compra se pega por
   arriba si entra en la pantalla y por abajo si no entra: el top sale de su
   alto, que lo mide single-product.js, asi nunca queda tapado el final de la
   columna. Sin JavaScript no se fija. La que es mas alta no se mueve, porque
   es la que le da el alto a la fila. */
@media (min-width: 901px) {
    .single-product .fedelan-single-gallery {
        top: calc(var(--fedelan-header-height) + 24px);
    }
}

@media (min-width: 700px) {
    .single-product .fedelan-single-product-grid > .fedelan-columna-fija {
        position: sticky;
        top: min(calc(var(--fedelan-header-height) + 24px), calc(100vh - var(--fedelan-compra-alto, 0px) - 24px));
    }
}

/* --------------------------------------------------------------------------
   Barra de compra del telefono (regla B4)
   --------------------------------------------------------------------------
   La pinta fedelan_single_barra_compra() y la maneja barra-compra.js. Solo
   existe con una columna: con dos, el boton de la ficha ya queda a mano. */

.fedelan-barra-compra {
    display: none;
}

@media (max-width: 699px) {
    .fedelan-barra-compra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--fedelan-line);
        background: var(--fedelan-paper);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform var(--fedelan-dur) var(--fedelan-ease), visibility 0s linear var(--fedelan-dur);
    }

    .fedelan-barra-compra[hidden] {
        display: none;
    }

    .fedelan-barra-compra.is-visible {
        transform: none;
        visibility: visible;
        transition: transform var(--fedelan-dur) var(--fedelan-ease), visibility 0s;
    }

    /* Con un drawer, el menu, el agregado rapido o la guia de talles
       abiertos, la barra no va. */
    body.fedelan-cart-open .fedelan-barra-compra,
    body.fedelan-favorites-open .fedelan-barra-compra,
    body.fedelan-compra-rapida-open .fedelan-barra-compra,
    body.fedelan-menu-open .fedelan-barra-compra,
    body.fedelan-modal-abierto .fedelan-barra-compra {
        visibility: hidden;
        transform: translateY(100%);
        transition: none;
    }

    .fedelan-barra-compra__foto {
        flex: none;
        width: 48px;
        height: 64px;
        background: var(--fedelan-sand);
    }

    .fedelan-barra-compra__foto img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .fedelan-barra-compra__precio {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin: 0;
        font-family: var(--fedelan-font-primary);
        line-height: 1.3;
    }

    .fedelan-barra-compra__valor {
        font-size: 16px;
        font-weight: 700;
        color: var(--fedelan-ink);
    }

    .fedelan-barra-compra__valor--oferta {
        color: var(--fedelan-sale);
    }

    .fedelan-barra-compra__detalle {
        font-size: 13px;
        color: var(--fedelan-muted);
    }

    /* El mismo boton negro de la ficha, mas bajo. */
    .fedelan-barra-compra__boton {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin-left: auto;
        padding: 0 20px;
        border: 0;
        border-radius: 0;
        background: var(--fedelan-ink);
        color: var(--fedelan-paper);
        font-family: var(--fedelan-font-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .fedelan-barra-compra__boton:hover {
        background: var(--fedelan-ink-soft);
    }

    .fedelan-barra-compra__boton:focus-visible {
        outline: 2px solid var(--fedelan-accent);
        outline-offset: 2px;
    }
}

/* En los telefonos mas angostos la foto se va para que entren el precio y
   el boton. */
@media (max-width: 359px) {
    .fedelan-barra-compra__foto {
        display: none;
    }

    .fedelan-barra-compra__boton {
        padding: 0 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fedelan-barra-compra,
    .fedelan-barra-compra.is-visible {
        transition: none;
    }
}

@media (max-width: 768px) {
    .fedelan-single-details {
        width: 100%;
    }

    .fedelan-seccion__conteo {
        display: inline;
    }

    .fedelan-modal {
        padding: 0;
        align-items: flex-end;
    }

    .fedelan-modal__caja {
        width: 100%;
        max-height: 92vh;
    }

    .fedelan-guia table th,
    .fedelan-guia table td {
        padding: 8px;
    }
}