.bz-product {
    display: grid;
    grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.bz-product__media {
    position: sticky;
    top: 120px;
    align-self: start;
}

.bz-product__content {
    position: sticky;
    top: 110px;
    background: rgba(0, 0, 0, .2);
    border-radius: 22px;
    padding: 36px;
    border: 1px solid var(--bazinga-border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .05);
}


/* =========================
   BADGES DE ESTADO
   -------------------------
   bz_product_badges() se imprime desde el hook del resumen (prioridad 9).
   Antes el hook no se disparaba, así que estos badges nunca se vieron y no
   tenían CSS. Se les da el mismo lenguaje que los badges del catálogo:
   pastilla compacta en mayúsculas con color semántico.
========================= */

.bz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}

.bz-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 24px;
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.bz-badge--sale {
    background: var(--bazinga-color-bestseller);
}

.bz-badge--stock {
    background: var(--bazinga-color-new);
    color: #0B2B16;
}

.bz-badge--backorder {
    background: var(--bazinga-color-preventa);
    color: #2B2205;
}

.bz-badge--soldout {
    background: var(--bazinga-color-agotado);
}

.bz-badge--lowstock {
    background: var(--bazinga-color-limited);
}

.product_title {
    font-family: var(--header-font);
    font-size: clamp(38px, 3vw, 48px);
    line-height: 1;
    margin: 0;
}

.bz-product__content .price {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 30px;
}

.bz-product__content .price ins,
.bz-product__content .price bdi,
.bz-product__content .price span,
.bz-product__content .price ins * {
    text-decoration: none;
    font-size: 28px;
    color: var(--bazinga-gold);
    font-weight: 700;
    text-decoration: none;
}

.bz-product__content .price del * {
    opacity: .4;
    color: #fff;
    font-size: 22px;
    text-decoration: line-through;
}

/*
 * Cantidad y botón, en una sola fila y a la misma altura.
 *
 * WooCommerce los imprime como dos bloques sueltos, así que el campo caía
 * encima y el botón ocupaba todo el ancho debajo. Son una sola acción —cuánto
 * y añadir— y separarlos en dos filas hace que la cantidad parezca un ajuste
 * previo que hay que confirmar aparte.
 *
 * El alto va en una variable porque lo comparten los dos y es lo único que
 * tienen que compartir: cambiarlo en un sitio los mantiene alineados, y la
 * versión de móvil solo tiene que redefinirla.
 */
.bz-product__buy,
.woocommerce div.product form.cart {
    --bz-buy-height: 64px;
}

/*
 * Solo el formulario simple se convierte en fila.
 *
 * En un producto variable el formulario lleva además la tabla de opciones y el
 * enlace de «Limpiar», y en uno agrupado la tabla de hijos: convertirlos en
 * una fila los pondría en horizontal junto al botón. Ahí la fila es el
 * contenedor que WooCommerce pone alrededor de cantidad y botón.
 */
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto;
    margin: 0;
}

/*
 * El ancho también se fija aquí. WooCommerce impone `3.631em` con un selector
 * de tres clases que gana al del tema, y eso dejaba el campo en 58px: muy
 * estrecho al lado de un botón de 64 de alto, y encima distinto del que se
 * veía en móvil, donde sí mandaba el tema.
 */
.woocommerce div.product form.cart .quantity input.qty {
    width: 88px;
    height: var(--bz-buy-height);
    /* Sin el line-height, Chrome centra el número arriba en un campo alto. */
    line-height: normal;
    font-size: 16px;
}

.single_add_to_cart_button {
    /*
     * `flex: 1` en lugar del ancho al 100%: ocupa lo que sobre después de la
     * cantidad. Con el 100% se salía de la fila y empujaba el campo fuera.
     */
    flex: 1 1 auto;
    height: var(--bz-buy-height);
    width: auto;
    font-size: 18px;
    border-radius: 14px;
    background: var(--bazinga-purple);
    font-weight: 700;
    transition: .3s;
}

.single_add_to_cart_button:hover {
    background: var(--bazinga-electric-purple);
    transform: translateY(-2px);
}

/*
 * Mientras la petición está en vuelo el botón queda inerte pero legible: no se
 * apaga tanto como para que parezca roto, y se le quita el desplazamiento del
 * hover para que no dé la sensación de que sigue respondiendo a los clics.
 */
.single_add_to_cart_button.is-loading {
    opacity: .7;
    cursor: progress;
}

.single_add_to_cart_button.is-loading:hover {
    transform: none;
    background: var(--bazinga-purple);
}

/* El enlace «Ver carrito» que engancha WooCommerce: el carrito ya se abre. */
.bz-product__buy .added_to_cart {
    display: none;
}

/* =========================
   GALERÍA
   -------------------------
   El marcado va en orden de lectura: imagen y luego miniaturas. En escritorio
   las miniaturas vuelven a la izquierda con colocación explícita en la
   rejilla, no con `order`, para que el orden del DOM no contradiga al visual.
========================= */

.bz-gallery {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.bz-gallery__viewer {
    grid-column: 2;
    grid-row: 1;
}

.bz-gallery__thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 120px;
}

/* Sin miniaturas la imagen ocupa las dos columnas. */
.bz-gallery--single {
    grid-template-columns: minmax(0, 1fr);
}

.bz-gallery--single .bz-gallery__viewer {
    grid-column: 1;
}

.bz-thumb {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    opacity: .6;
    transition: .25s;
}

.bz-thumb.is-active {
    opacity: 1;
    outline: 2px solid var(--bazinga-purple);
}

.bz-gallery__viewer {
    background: var(--bazinga-dark);
    border-radius: 18px;
    overflow: hidden;
}

/*
 * `height: auto` es obligatorio: el `img` lleva width y height reales para
 * reservar sitio, y sin esto el atributo ganaría y aplastaría la portada al
 * cambiar de imagen desde una miniatura de otra proporción.
 */
.bz-gallery__viewer img {
    width: 100%;
    height: auto;
    display: block;
    transition: .25s;
}

.bz-thumb:hover {
    opacity: 1;
}

.bz-benefits {
    display: grid;
    gap: 16px;
    margin: 30px 0;
}


.bz-meta {
    font-size: 13px;
    opacity: .6;
}

/* =========================
   PESTAÑAS DEL PRODUCTO
   -------------------------
   Salen de woocommerce_output_product_data_tabs(). Nunca tuvieron estilos
   del tema: se renderizaban como una lista de enlaces por defecto.
========================= */

.woocommerce-tabs,
.related.products {
    max-width: 1320px;
    margin: 56px auto 0;
}

.woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0 0 12px;
    list-style: none;
    border-bottom: 1px solid var(--bazinga-border-color);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none;
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--bazinga-border-color);
    border-radius: 100px;
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s ease;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: var(--bazinga-light);
    border-color: var(--bazinga-purple);
}

.woocommerce-tabs ul.tabs li.active a {
    background: var(--bazinga-purple);
    border-color: var(--bazinga-purple);
    color: var(--bazinga-light);
}

.woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid var(--bazinga-gold);
    outline-offset: 3px;
}

.woocommerce-Tabs-panel {
    color: rgba(255, 255, 255, .86);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.75;
}

.woocommerce-Tabs-panel h2 {
    margin: 0 0 16px;
    font-family: var(--header-font);
    font-size: var(--h3-size);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--bazinga-light);
}

.woocommerce-Tabs-panel p {
    font-size: 16px;
    line-height: 1.75;
}

.woocommerce-Tabs-panel img,
.woocommerce-Tabs-panel table {
    max-width: 100%;
}

/* =========================
   BARRA DE COMPRA EN MÓVIL
   -------------------------
   En la ficha el precio y el botón viven arriba del todo. Basta con leer la
   sinopsis para perderlos, y desde ahí no hay forma de comprar sin volver a
   subir. La barra devuelve cuánto vale y cómo llevarlo a la zona del pulgar.

   Se revela cuando el botón real sale de pantalla; el atributo `hidden` la
   mantiene fuera hasta entonces, así que sin JavaScript no aparece nunca y no
   estorba: el botón de verdad sigue en su sitio.
========================= */

.bz-buybar {
    display: none;
}

@media (max-width: 1024px) {

    .bz-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: block;
        border-top: 1px solid var(--bazinga-border-color);
        /* Superficie sólida: el precio tiene que leerse sobre lo que pase por debajo. */
        background: var(--bazinga-dark, #120f1a);
        box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);

        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    }

    .bz-buybar[hidden] {
        display: none;
    }

    .bz-buybar.is-visible {
        transform: translateY(0);
    }

    .bz-buybar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 16px;
        /* Por encima del indicador de inicio del iPhone. */
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .bz-buybar__price {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        min-width: 0;
    }

    .bz-buybar__amount,
    .bz-buybar__amount bdi,
    .bz-buybar__amount ins,
    .bz-buybar__amount span {
        color: var(--bazinga-gold);
        font-family: var(--body-font);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
    }

    .bz-buybar__amount del,
    .bz-buybar__amount del * {
        font-size: 14px;
        font-weight: 400;
        color: var(--bazinga-text-secondary);
        text-decoration: line-through;
    }

    /* El estado se lee; el color solo acompaña. */
    .bz-buybar__state {
        color: var(--bazinga-color-agotado, #ff8080);
        font-family: var(--body-font);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .bz-buybar__actions {
        flex: 0 0 auto;
    }

    .bz-buybar__add,
    .bz-buybar__jump {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 20px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
    }

    .bz-buybar__add svg {
        flex: 0 0 auto;
    }

    /*
     * Sitio para la barra al final del documento. Sin esto tapa las últimas
     * líneas del pie y no hay forma de llegar a ellas.
     */
    body.single-product {
        padding-bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bz-buybar {
        transition: none;
    }
}


@media (max-width: 1024px) {

    .bz-product {
        grid-template-columns: minmax(0, 1fr);
    }

    .bz-product__content {
        position: relative;
        top: auto;
    }

    /*
     * La causa del solape que se veía en móvil. La media query desactivaba el
     * `sticky` del contenido pero no el de la imagen, así que la portada
     * quedaba clavada a 120px del borde y el texto —con fondo translúcido— le
     * pasaba por encima: 344px de solape medidos.
     */
    .bz-product__media {
        position: static;
        top: auto;
    }

    .bz-product__content {
        padding: 24px 20px;
    }

    .product_title {
        font-size: clamp(28px, 7vw, 36px);
    }

    /* La imagen a todo el ancho y las miniaturas debajo, en carrusel. */
    .bz-gallery,
    .bz-gallery--single {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bz-gallery__viewer {
        grid-column: 1;
        grid-row: 1;
    }

    .bz-gallery__thumbs {
        grid-column: 1;
        grid-row: 2;
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        /* Sitio para el foco, que si no queda cortado por el desbordamiento. */
        padding: 3px 3px 8px;
        margin: -3px -3px 0;
        scrollbar-width: thin;
        scrollbar-color: var(--bazinga-border-color) transparent;
    }

    .bz-gallery__thumbs::-webkit-scrollbar {
        height: 4px;
    }

    .bz-gallery__thumbs::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: var(--bazinga-border-color);
    }

    .bz-thumb {
        flex: 0 0 auto;
        width: 64px;
        scroll-snap-align: start;
        /* En táctil no hay hover: la activa se distingue sin depender de él. */
        opacity: 1;
        border: 2px solid transparent;
    }

    .bz-thumb img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .bz-thumb:not(.is-active) {
        opacity: .55;
    }

    .bz-thumb.is-active {
        outline: none;
        border-color: var(--bazinga-electric-purple, var(--bazinga-purple));
    }

    /*
     * Solo cambia la altura compartida: el botón y el campo la siguen los dos,
     * así que no hay que tocarlos por separado ni pueden descuadrarse.
     */
    .bz-product__buy,
    .woocommerce div.product form.cart {
        --bz-buy-height: 56px;
    }

    .single_add_to_cart_button {
        font-size: 16px;
    }

    /* A 390px el campo cede unos píxeles para que el botón respire. */
    .woocommerce div.product form.cart .quantity input.qty {
        width: 72px;
    }
}