/* =========================================================
   RESET Y TIPOGRAFÍA BASE
   ---------------------------------------------------------
   Antes había un `* { font-family; font-size: var(--body-size) }` que
   imponía 16px a TODOS los elementos, incluidos h1–h6, botones, campos y
   todo el marcado que genera WooCommerce. Consecuencias:

     · Ningún encabezado tenía jerarquía propia: cada componente debía
       redeclarar su tamaño, de ahí la dispersión de valores.
     · Carrito, checkout, Mi cuenta y las pestañas de producto se
       renderizaban en un 16px plano.

   Ahora el reset se limita a caja y márgenes, y la escala se define sobre
   los elementos. Los componentes que ya fijan su tamaño no cambian.
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bazinga-dark);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Escala tipográfica ------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--header-font);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bazinga-light);
}

h1 {
    font-size: clamp(34px, 4.2vw, var(--h1-size));
    line-height: 1.08;
}

h2 {
    font-size: clamp(28px, 3.2vw, var(--h2-size));
}

h3 {
    font-size: clamp(22px, 2.4vw, var(--h3-size));
    line-height: 1.2;
}

h4 {
    font-size: var(--h4-size);
    line-height: 1.25;
}

h5 {
    font-size: 18px;
    line-height: 1.3;
}

h6 {
    font-size: var(--body-size);
    line-height: 1.35;
}

small {
    font-size: var(--small-text);
}

/*
 * Rótulos de navegación.
 *
 * Los títulos de columna del mega menú, del menú móvil y del pie eran h3 y h4.
 * Rotulan navegación, no contenido, y como la cabecera se imprime antes que el
 * artículo el resultado era que el esquema de CUALQUIER página empezaba con 38
 * encabezados —medidos— antes de llegar a su <h1>. Ahora son párrafos con esta
 * clase: se ven exactamente igual y desaparecen del esquema.
 *
 * Recoge lo que antes daba la regla de h1–h6: familia, grosor, interlineado y
 * color. Va aquí arriba a propósito, para que cada sitio pueda afinar lo suyo
 * más abajo con la misma especificidad o mayor.
 */
.nav-heading {
    font-family: var(--header-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bazinga-light);
}

/* Los controles no heredan la tipografía por defecto del navegador. */
button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    padding: 0 var(--padding-x);
    max-width: var(--max-page-width);
    margin: 0 auto;
}

header.bazinga-header {
    width: 100%;
    position: sticky;
    top: 0;

    /*
     * Fondo propio. Antes solo lo tenían los hijos (.announce-bar y
     * .main-nav), así que la franja de .top-header quedaba transparente y el
     * contenido de la página se veía a través de la cabecera al hacer scroll.
     */
    background: var(--bazinga-dark-surface);

    /* Debe quedar por debajo del cart drawer y del menu mobile. Antes era
       999999 y la cabecera tapaba el drawer, que esta en --z-drawer. */
    z-index: var(--z-sticky);

    transition: box-shadow var(--transition-base);
}

/* La barra de administración de WordPress desplaza el punto de anclaje. */
.admin-bar header.bazinga-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar header.bazinga-header {
        top: 46px;
    }
}

/* =========================
   CABECERA COMPACTA AL HACER SCROLL
   -------------------------
   Al pasar el umbral, la cabecera se reduce: se oculta la barra de avisos,
   el logo baja de tamaño y logo, menú, buscador e iconos pasan a convivir en
   una sola línea.

   `display: contents` en .top-header y su .container hace que el logo, el
   buscador y el menú de cuenta se conviertan en hijos directos del flex de
   la cabecera, de modo que pueden ordenarse junto a .main-nav sin tocar el
   marcado.
========================= */

header.bazinga-header.is-stuck {
    display: flex;
    align-items: center;
    gap: var(--space-5);

    /*
     * El fondo va a sangre y es el padding el que centra el contenido al
     * ancho del sitio. Antes se limitaba el propio <header> con max-width y
     * margin auto, así que la barra se leía como una caja flotante en vez de
     * ocupar todo el ancho de la pantalla.
     */
    padding-block: var(--space-2);
    padding-inline: max(var(--padding-x), calc((100% - var(--max-page-width)) / 2));

    box-shadow: var(--shadow-md);
}

header.bazinga-header.is-stuck .announce-bar {
    display: none;
}

header.bazinga-header.is-stuck .top-header,
header.bazinga-header.is-stuck .top-header>.container {
    display: contents;
}

header.bazinga-header.is-stuck .main-logo {
    order: 1;
    flex: 0 0 auto;
}

header.bazinga-header.is-stuck .main-logo img {
    max-height: 52px;
    width: auto;
}

header.bazinga-header.is-stuck .main-nav {
    order: 2;

    /*
     * La navegación no se encoge: es el buscador el que cede ancho. Con
     * `flex: 1 1 auto` la barra se comprimía por debajo del ancho de sus
     * enlaces y el último ítem se montaba sobre el campo de búsqueda a
     * 1280px. El punto de conmutación a menú móvil es 1200px, así que este
     * estado solo tiene que caber de 1201px hacia arriba.
     */
    flex: 0 0 auto;
    background: none;
    border: 0;

    /*
     * En estado normal .main-nav es el bloque de referencia del mega menu,
     * porque ocupa todo el ancho. En compacto pasa a ser una columna estrecha
     * del flex, así que se deja de posicionar: el mega menu se ancla entonces
     * al propio <header>, que es sticky y sí abarca la pantalla completa.
     */
    position: static;
}

header.bazinga-header.is-stuck .main-menu>li>a,
header.bazinga-header.is-stuck .main-menu>li>button {
    padding: var(--space-3);
    font-size: 13px;
    /* «Comic Chileno» partía en dos líneas y desalineaba la fila. */
    white-space: nowrap;
}

/*
 * Anclado al header: de borde a borde y justo debajo de la barra. Antes se
 * forzaba con `width: 100vw` y un margen negativo calculado sobre .main-nav,
 * que en compacto ya no mide lo mismo que la pantalla: de ahí el descuadre.
 */
header.bazinga-header.is-stuck .mega-menu {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
}

/*
 * Puente entre el ítem y el panel.
 *
 * Al anclar el panel al borde inferior de la cabecera queda un hueco: la fila
 * de enlaces es más baja que el logo, así que termina 16px antes de que
 * empiece el panel —60 y 76 medidos—. Ese hueco es cabecera, no navegación, y
 * como el menú se cierra con el `mouseleave` de `.main-nav`, bajar el ratón
 * hacia el panel lo cerraba antes de llegar: al scrollear el mega menú era
 * inservible.
 *
 * La franja cuelga del ítem y no del panel a propósito: `.mega-menu` recorta
 * con `overflow: hidden` —lo necesita para el deslizamiento lateral de los
 * paneles—, así que un pseudo-elemento suyo colocado por encima de su propia
 * caja se descarta al pintar y nunca llega a recibir el puntero. Comprobado:
 * la franja se colocaba en 60..76 y `elementFromPoint` seguía devolviendo la
 * cabecera.
 *
 * Los 32px sobran a propósito. El hueco exacto no es una medida que se pueda
 * escribir aquí: sale de restar el alto de la fila de enlaces al de la
 * cabecera, y cambia con el logo. Pasarse es inofensivo porque el panel tiene
 * `z-index` y el pseudo-elemento no, de modo que en el trozo que se solapan
 * gana el panel; el sobrante solo cubre huecos futuros más altos que este.
 *
 * Solo mientras el panel está abierto. Cerrado, esta franja se comería los
 * clics de lo que haya justo debajo de la cabecera.
 */
header.bazinga-header.is-stuck .main-menu>li.has-mega-menu.active::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 32px;
}

/*
 * Cede ancho antes que la navegación, pero con tope: sin `max-width` la caja
 * se comía todo el hueco sobrante y llegaba a 1018px a 1920px de ancho.
 * El padding también baja: en una barra compacta el buscador no puede ser lo
 * más alto de la fila.
 *
 * El selector repite `.top-header .container` aunque en compacto sean
 * `display: contents`. Siguen siendo antepasados en el DOM, así que la regla
 * base los alcanza igual y sin igualar su especificidad estas medidas nunca
 * llegaban a aplicarse.
 */
header.bazinga-header.is-stuck .top-header .container .site-search {
    order: 3;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 420px;
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
}

header.bazinga-header.is-stuck .account-menu {
    order: 4;
    flex: 0 0 auto;
    gap: var(--space-6);

    /* El sobrante que ya no absorbe el buscador empuja los iconos al borde. */
    margin-left: auto;
}

/* En compacto los iconos van sin etiqueta para ganar altura. */
header.bazinga-header.is-stuck .account-menu a>span:not([data-cart-number]) {
    display: none;
}

header.bazinga-header.is-stuck .account-menu svg {
    width: 22px;
    height: 22px;
}

@media (prefers-reduced-motion: reduce) {
    header.bazinga-header {
        transition: none;
    }
}

/*
 * `width: auto` no es decorativo, sostiene la proporción.
 *
 * El logotipo ahora declara `width` y `height` en el marcado —hacen falta para
 * que el navegador reserve el hueco antes de descargarlo—, y el atributo
 * `width` vale como si fuese `width: 159px`. Con un ancho fijo, `max-height`
 * recorta el alto a 110 y deja el ancho en 159: el logo se aplastaba. Mientras
 * el <img> no llevaba dimensiones el problema no existía porque el navegador
 * escalaba los dos lados a la vez.
 *
 * La regla de la cabecera compacta, unas líneas más arriba, ya lo hacía así.
 */
header.bazinga-header .main-logo img {
    max-height: 110px;
    width: auto;
}

header.bazinga-header .announce-bar {
    width: 100%;
    background-color: var(--bazinga-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header.bazinga-header .announce-bar .follow-us {
    background-color: var(--bazinga-purple);
    padding: 8px 43px 8px 90px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    position: relative;
}

header.bazinga-header .announce-bar .follow-us:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-right: 41px solid transparent;
    border-bottom: 41px solid transparent;
    border-left: 41px solid var(--bazinga-border-color);
    position: absolute;
    left: 0;
    top: 0;
}

header.bazinga-header .announce-bar .follow-us .h4 {
    font-family: var(--header-font);
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    /* Lo traía la regla de h4; el rótulo ya no es un encabezado. */
    line-height: 1.25;
    color: var(--bazinga-light);
}

/* Los perfiles vienen ya envueltos por bazinga_the_social_links(). */
header.bazinga-header .announce-bar .follow-us__links {
    display: flex;
    align-items: center;
    gap: 24px;
}

header.bazinga-header .announce-bar .follow-us a {
    color: #fff;
    line-height: 0;
}

header.bazinga-header .announce-bar .content {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

header.bazinga-header .announce-bar .content {
    flex: 1;
    overflow: hidden;
    padding: 0 24px 0 43px;
}

.announce-slider {
    width: 100%;
}

.announce-slider .swiper-slide {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}

header.bazinga-header .announce-bar .content span {
    font-size: 12px;
    text-align: left;
}

header.bazinga-header .announce-bar .content a {
    color: var(--bazinga-light);
    font-size: 12px;
}

header.bazinga-header .announce-bar .content a:hover {
    color: var(--bazinga-gold);
}

/* Tablet */
@media (max-width: 992px) {
    header.bazinga-header .announce-bar .follow-us {
        padding: 8px 24px 8px 60px;
        gap: 16px;
    }

    header.bazinga-header .announce-bar .follow-us .h4 {
        font-size: 16px;
    }

    header.bazinga-header .announce-bar .content {
        padding: 0 16px;
    }

    .announce-slider .swiper-slide {
        font-size: 14px;
    }
}

/* =========================
   DISPARADOR DEL BUSCADOR
   -------------------------
   Solo existe por debajo del punto de conmutación. En escritorio el campo
   está siempre a la vista y un botón para abrirlo sobraría.
========================= */

.account-menu .search-trigger {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    header.bazinga-header .announce-bar {
        flex-direction: column;
        background-color: var(--bazinga-purple);
    }

    /*
     * La barra de avisos se retira al hacer scroll. Es lo primero que sobra:
     * cuatro mensajes rotativos son útiles al llegar y estorban al leer.
     * El umbral es su propia altura, el mismo que usa la cabecera compacta de
     * escritorio.
     */
    header.bazinga-header.is-scrolled .announce-bar {
        display: none;
    }

    header.bazinga-header .announce-bar .content {
        width: 100%;
        order: 2;
        padding: 10px 16px;
        box-sizing: border-box;
    }

    header.bazinga-header .announce-bar .follow-us {
        width: 100%;
        order: 1;
        padding: 10px 16px;
        justify-content: center;
        display: none;
    }

    header.bazinga-header .announce-bar .follow-us:before {
        display: none;
    }

    header.bazinga-header .announce-bar .follow-us .h4 {
        font-size: 14px;
    }

    .announce-slider .swiper-slide {
        justify-content: center;
        text-align: center;
        white-space: normal;
        font-size: 13px;
        line-height: 1.4;
    }
}

/* Small phones */
@media (max-width: 480px) {
    header.bazinga-header .announce-bar .follow-us {
        gap: 12px;
        flex-wrap: wrap;
    }

    header.bazinga-header .announce-bar .follow-us .h4 {
        text-align: center;
    }

    header.bazinga-header .announce-bar .content {
        padding: 8px 12px;
    }

    .announce-slider .swiper-slide {
        font-size: 12px;
    }
}

header.bazinga-header .top-header {
    padding: 24px 0;
}

header.bazinga-header .top-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*
 * El campo se dimensiona por la caja, no por el input.
 *
 * Antes el input tenía `width: 400px` fijo y `600px` al enfocar, y la caja se
 * ajustaba a él. Eso traía dos problemas: el ancho saltaba 200px al hacer
 * clic, y en la cabecera compacta —donde la caja es un flex que crece— el
 * input se quedaba en sus 400px y dejaba 555px de espacio muerto detrás del
 * botón a 1920px. Ahora la caja manda y el input rellena lo que haya.
 */
header.bazinga-header .top-header .container .site-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    width: 100%;
    max-width: 520px;
    /* El área táctil la garantiza la caja, no el input. */
    min-height: 48px;

    background-color: rgba(139, 92, 246, 0.11);
    /* Antes 8px 24px, que dejaba la caja en 66px de alto. */
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bazinga-electric-purple);
}

header.bazinga-header .top-header .container .site-search input,
header.bazinga-header .top-header .container .site-search button {
    color: #fff;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 0 none;
    /* El foco lo aporta :focus-visible global (base.css). */
}

/*
 * `min-height: 0` es la pieza clave. El sistema de formularios de base.css
 * da 44px de alto mínimo a todo `input[type=search]`, que es lo correcto para
 * un campo suelto pero aquí se suma al relleno de la pastilla: la caja
 * acababa en 72px. El alto lo fija ahora el contenedor, que además garantiza
 * el área táctil con su propio min-height.
 */
header.bazinga-header .top-header .container .site-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: var(--small-text);
    line-height: 1.4;
}

header.bazinga-header .top-header .container .site-search button {
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
}

header.bazinga-header .top-header .container .account-menu {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: nowrap;
}

header.bazinga-header .top-header .container .account-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--bazinga-purple);
}

header.bazinga-header .top-header .container .account-menu a span {
    color: var(--bazinga-text-secondary);
    font-size: var(--body-size);
}

header.bazinga-header .top-header .container .account-menu a .cart-count {
    position: relative;
}

/*
 * Carrito vacío: la burbuja se oculta. Hace falta esta regla porque el
 * `display: flex` de abajo tiene más especificidad que el `[hidden]` de la
 * hoja del navegador y, sin ella, seguiría mostrándose el «0».
 */
header.bazinga-header .top-header .container .account-menu a .cart-count span[hidden] {
    display: none;
}

header.bazinga-header .top-header .container .account-menu a .cart-count span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: var(--bazinga-color-bestseller);
    color: var(--bazinga-light);
    position: absolute;
    top: -10px;
    right: -10px;
}

header.bazinga-header .top-header .container .account-menu .mobile-menu-trigger {
    display: none;

    /* Reinicio del control: antes era un <a> y no heredaba nada del UA. */
    appearance: none;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

/* =========================
   PUNTO DE CONMUTACIÓN DE NAVEGACIÓN
   -------------------------
   Debe coincidir exactamente con el max-width que oculta .main-nav
   (ver "MAIN NAV" más abajo en este archivo). Por encima del breakpoint
   solo se muestra el mega menu desktop; en el breakpoint o por debajo,
   solo el trigger del menú mobile. Nunca ambos a la vez.
========================= */
@media (max-width: 1200px) {
    header.bazinga-header .top-header .container .account-menu .mobile-menu-trigger {
        display: block;
    }
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {
    header.bazinga-header .top-header {
        padding: 16px 0;
    }

    header.bazinga-header .top-header .container {
        gap: 20px;
    }

    header.bazinga-header .top-header .container .site-search {
        max-width: 300px;
        width: 100%;
    }

    header.bazinga-header .top-header .container .account-menu {
        gap: 20px;
    }

    header.bazinga-header .top-header .container .account-menu a span {
        font-size: 14px;
    }

    header.bazinga-header .top-header .container .main-logo {
        width: 25%;
        text-align: center;
    }

    header.bazinga-header .top-header .container .main-logo img {
        max-width: 100px;
        width: 100%;
        height: auto;
    }
}

/* =========================
MOBILE
========================= */
@media (max-width: 768px) {

    /*
     * Alto de la cabecera. Antes eran unos 208px entre avisos, una fila de
     * logo e iconos y otra fila entera para el buscador. El buscador pasa a
     * desplegarse desde su icono y el resto se aprieta.
     */
    header.bazinga-header .top-header {
        padding: 10px 0;
    }

    header.bazinga-header .top-header .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Logo */
    header.bazinga-header .top-header .container .main-logo {
        width: 25%;
        text-align: left;
    }

    header.bazinga-header .top-header .container .main-logo img {
        max-width: 74px;
        width: 100%;
        height: auto;
    }

    /*
     * Buscador plegado. Se oculta con `display` y no con el atributo
     * `hidden`, para que la decisión viva en el CSS: al cruzar a escritorio
     * reaparece sin que el JavaScript tenga que deshacer ningún estado. De
     * paso queda fuera del orden de tabulación mientras está cerrado.
     */
    header.bazinga-header .top-header .container .site-search {
        display: none;
        width: 100%;
        max-width: 100%;
        order: 3;
    }

    header.bazinga-header.search-open .top-header .container .site-search {
        display: flex;
    }

    .account-menu .search-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Mismo área táctil que el resto de iconos de la fila. */
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--bazinga-purple);
        cursor: pointer;
    }

    .account-menu .search-trigger svg {
        width: 22px;
        height: 22px;
    }

    /* Abierto, el icono se marca para que se vea que ese botón lo cierra. */
    .account-menu .search-trigger[aria-expanded="true"] {
        color: var(--bazinga-gold);
    }

    .account-menu .search-trigger:focus-visible {
        outline: 2px solid var(--bazinga-gold);
        outline-offset: 2px;
        border-radius: var(--radius-sm, 6px);
    }

    /* =========================
       FILA DE ICONOS
       -------------------------
       Los cinco elementos comparten línea de centro y área táctil. Antes la
       fila alineaba arriba (`align-items: flex-start`) y convivían alturas de
       22, 30 y 44px, así que los iconos quedaban a distintas alturas: el de
       buscar, 11px por debajo del resto.
    ========================= */
    header.bazinga-header .top-header .container .account-menu {
        width: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 2px;
    }

    /* Mismo cuadro para todos: se alinean solos y todos son pulsables. */
    header.bazinga-header .top-header .container .account-menu>a,
    header.bazinga-header .top-header .container .account-menu>button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        gap: 0;
    }

    header.bazinga-header .top-header .container .account-menu a span {
        font-size: 12px;
        display: none;
    }

    /*
     * El corazón vuelve a verse en móvil.
     *
     * La regla de arriba oculta las etiquetas de texto, pero `.favorites-count`
     * no es una etiqueta: envuelve el icono. El enlace quedaba en 0x0
     * —invisible pero presente—, se comía dos huecos de la fila y era una
     * parada de tabulación vacía.
     *
     * Se restaura con una regla propia y más específica, que es exactamente
     * como ya estaba resuelto `.cart-count` unas líneas más arriba. Intentarlo
     * con `:not(.favorites-count)` en la regla de las etiquetas sube su
     * especificidad y tumba la burbuja del carrito, que depende de ganarle.
     */
    header.bazinga-header .top-header .container .account-menu a .favorites-count {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * Los iconos en bloque. Un `svg` en línea se apoya en la línea base y
     * arrastra el hueco del descendente: el envoltorio del carrito medía 29px
     * en vez de 22 y su icono quedaba 4px más arriba que los demás. En bloque
     * la caja es el icono y el centrado del flex es exacto.
     */
    header.bazinga-header .top-header .container .account-menu svg {
        display: block;
    }

    header.bazinga-header .top-header .container .account-menu .cart-count {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header.bazinga-header .top-header .container .account-menu svg {
        width: 22px;
        height: 22px;
        color: var(--bazinga-purple);
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {

    header.bazinga-header .top-header {
        padding: 12px 0;
    }

    header.bazinga-header .top-header .container {
        gap: 4px;
    }

    header.bazinga-header .top-header .container .main-logo img {
        max-width: 150px;
    }

    /*
     * A 480px caben cinco áreas táctiles de 44px justas. El hueco se cierra
     * del todo: separarlas más sacaría la fila de la pantalla.
     */
    header.bazinga-header .top-header .container .account-menu {
        gap: 0;
    }

    /*
     * El logo cede lo justo para que las cinco áreas táctiles quepan en una
     * línea. Con el 25% anterior la fila de iconos se caía a un segundo
     * renglón a 320px y la cabecera volvía a crecer.
     */
    header.bazinga-header .top-header .container .main-logo {
        width: auto;
        flex: 0 0 auto;
    }

    header.bazinga-header .top-header .container .main-logo img {
        max-width: 58px;
    }

    header.bazinga-header .top-header .container .account-menu a span {
        font-size: 11px;
    }

    header.bazinga-header .top-header .container .account-menu .cart-count span {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/*********************************
CART DRAWER VARIABLES
*********************************/

:root {
    --cart-drawer-width: 560px;
    --cart-radius: 18px;
    --cart-transition: .3s ease;
    --cart-shadow: -20px 0 80px rgba(0, 0, 0, .5);
}

/*********************************
OVERLAY
*********************************/

/* Bloqueo de scroll del fondo mientras hay una capa modal abierta: el drawer
   del carrito o el menú móvil. sidecart.js añadía body.cart-open pero no
   existía ninguna regla; mobile-nav.js usa ahora la misma convención en vez
   de escribir en body.style.overflow. */
body.cart-open,
body.mobile-menu-open {
    overflow: hidden;
}

/*
 * El botón flotante de WhatsApp se retira mientras hay una capa modal abierta.
 *
 * Lo pone el plugin Click to Chat (`ht-ctc`) con `position: fixed` y
 * `z-index: 99999999` en línea, así que se pinta sobre cualquier cosa: en el
 * cajón del carrito tapaba el subtotal, y ahí es donde se comprueba lo que se
 * va a pagar. No se intenta ganarle la partida al z-index —es un valor en
 * línea y la siguiente versión del plugin puede subirlo—; se oculta y punto.
 *
 * `display: none` en vez de un desvanecido porque el propio plugin anima
 * opacidad y transformación con keyframes. Se declara `!important` por lo
 * mismo: las reglas marcadas así son de las pocas que ganan a una animación.
 *
 * La clase genérica `.ht-ctc` cubre también la variante de grupo del plugin,
 * no solo `#ht-ctc-chat`. Si un día se desinstala, esta regla no hace nada.
 */
body.cart-open .ht-ctc,
body.mobile-menu-open .ht-ctc {
    display: none !important;
}

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
    z-index: var(--z-overlay);
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/*********************************
DRAWER
*********************************/

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;

    width: var(--cart-drawer-width);
    max-width: 100%;

    /*
     * `100vh` en móvil no es el alto que se ve.
     *
     * En Safari y Chrome de iOS `vh` mide la ventana con las barras del
     * navegador RETRAÍDAS, que es un estado en el que no se está al abrir el
     * carrito. El cajón se dibujaba más alto que el hueco visible y su pie
     * —donde está «Finalizar compra»— quedaba por debajo de la barra de
     * navegación: había que hacer scroll para que la barra se escondiera y
     * apareciera el botón. Justo antes de pagar.
     *
     * `dvh` mide el hueco real en cada momento. Aquí no provoca los saltos que
     * suele reprochársele: con el cajón abierto el scroll del documento está
     * bloqueado, así que las barras no entran ni salen y el valor se queda
     * quieto. Se deja `vh` delante como respaldo para navegadores viejos.
     */
    height: 100vh;
    height: 100dvh;

    background: linear-gradient(180deg,
            var(--bazinga-dark-surface) 0%,
            var(--bazinga-dark) 100%);

    border-left: 1px solid var(--bazinga-border-color);

    z-index: var(--z-drawer);

    transform: translateX(100%);
    transition: transform var(--transition-slow);

    /*
     * Flex en columna en vez de `grid-template-rows: auto 1fr auto`.
     * El grid asumía exactamente tres hijos; con el aviso de feedback son
     * cuatro y las filas se descuadraban. Flex reparte bien con un número
     * variable de zonas y deja que el cuerpo absorba el alto sobrante.
     */
    display: flex;
    flex-direction: column;

    box-shadow: var(--cart-shadow);
}

.cart-drawer.active {
    transform: translateX(0);
}

/*********************************
HEADER
*********************************/

.cart-drawer__header {
    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--bazinga-border-color);

    background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(20px);
}

.cart-drawer__header h2 {
    margin: 0;

    font-family: var(--header-font);
    font-size: var(--h3-size);
    line-height: 1;

    color: var(--bazinga-light);
}

.cart-drawer__header p {
    margin: 4px 0 0;

    font-family: var(--body-font);
    font-size: var(--small-text);

    color: var(--bazinga-text-secondary);
}

.cart-drawer__close {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: var(--bazinga-medium-surface);

    color: var(--bazinga-light);

    cursor: pointer;

    transition: var(--cart-transition);
}

.cart-drawer__close:hover {
    background: var(--bazinga-purple);
    transform: rotate(90deg);
}

/*********************************
NOTICE / ESTADO DE CARGA
*********************************/

.cart-drawer__notice {
    margin: 0 24px;
    padding: 12px 16px;

    border: 1px solid var(--bazinga-color-agotado);
    border-radius: 12px;

    background: rgba(239, 68, 68, .12);

    color: var(--bazinga-light);

    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.45;
}

.cart-drawer__notice[hidden] {
    display: none;
}

.cart-drawer.is-busy .cart-drawer__body,
.cart-drawer.is-busy .cart-drawer__footer {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/*********************************
BODY
*********************************/

/*
 * El cuerpo absorbe el alto disponible y hace scroll interno.
 * Antes tenía `max-height: 59vh`, un número arbitrario que dejaba hueco en
 * pantallas altas y cortaba el contenido en las bajas.
 * `min-height: 0` es necesario para que un hijo flex con overflow pueda
 * encogerse por debajo de su contenido.
 */
.cart-drawer__header,
.cart-drawer__notice,
.cart-drawer__footer {
    flex: 0 0 auto;
}

.cart-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}

.cart-drawer__body::-webkit-scrollbar {
    width: 6px;
}

.cart-drawer__body::-webkit-scrollbar-thumb {
    background: var(--bazinga-border-color);
    border-radius: 999px;
}

/*********************************
FREE SHIPPING
*********************************/

.shipping-progress {
    margin-bottom: 24px;
}

.shipping-progress__fill {

    transition: width .35s ease;

}

.shipping-progress__text {
    margin-bottom: 12px;

    color: var(--bazinga-light);

    font-size: var(--small-text);
    font-family: var(--body-font);
}

.shipping-progress__bar {
    height: 10px;

    background: var(--bazinga-medium-surface);

    border-radius: 999px;
    overflow: hidden;
}

.shipping-progress__fill {
    width: 65%;
    height: 100%;

    background: linear-gradient(90deg,
            var(--bazinga-purple),
            var(--bazinga-electric-purple));

    border-radius: 999px;

    animation: progressGlow 2s infinite alternate;
}

@keyframes progressGlow {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.25);
    }
}

/*********************************
PRODUCTS
*********************************/

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item {
    display: grid;
    grid-template-columns: 110px 1fr;

    gap: 16px;
    align-items: center;

    padding: 16px;

    background: var(--bazinga-medium-surface);

    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--cart-radius);

    transition: var(--cart-transition);
}

.cart-item:hover {
    transform: translateY(-3px);

    border-color: var(--bazinga-purple);

    box-shadow: 0 10px 30px rgba(109, 40, 217, .15);
}

.cart-item__image {
    width: 110px;
    height: 153px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--bazinga-dark);
}

.cart-item__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

.cart-item__content {
    display: flex;
    flex-direction: column;
}

.cart-item__title {
    margin: 0 0 4px;

    font-family: var(--header-font);
    font-size: 24px;
    line-height: 1.1;

    color: var(--bazinga-light);
}

.cart-item__title a {
    color: inherit;
    text-decoration: none;
}

.cart-item__variant {
    margin-bottom: 12px;

    color: var(--bazinga-text-secondary);

    font-size: var(--small-text);
    font-family: var(--body-font);
}

.cart-item__price {
    margin-bottom: 16px;

    font-family: var(--header-font);
    font-size: var(--h4-size);

    color: var(--bazinga-gold);
}

.cart-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/*********************************
QUANTITY
*********************************/

.quantity-selector {
    display: flex;
    align-items: center;

    height: 42px;

    background: var(--bazinga-dark);

    border: 1px solid var(--bazinga-border-color);
    border-radius: 999px;

    overflow: hidden;
}

.quantity-selector button {
    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    color: var(--bazinga-light);

    font-size: 18px;

    cursor: pointer;

    transition: var(--cart-transition);
}

.quantity-selector button:hover {
    color: var(--bazinga-electric-purple);
}

.quantity-selector span {
    min-width: 40px;

    text-align: center;

    color: var(--bazinga-light);

    font-family: var(--body-font);
    font-weight: 700;
}

/*********************************
REMOVE
*********************************/

.cart-remove {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--bazinga-border-color);
    border-radius: 50%;

    background: transparent;

    color: var(--bazinga-text-secondary);

    cursor: pointer;

    transition: var(--cart-transition);
}

.cart-remove:hover {
    background: var(--bazinga-color-agotado);
    border-color: var(--bazinga-color-agotado);

    color: var(--bazinga-light);
}

/*********************************
FOOTER
*********************************/

.cart-drawer__footer {
    padding: 24px;

    /*
     * En pantalla completa —la tienda instalada, o el navegador sin barras—
     * el borde inferior del cajón coincide con la franja del indicador de
     * inicio del iPhone y el botón queda debajo. `max()` deja los 24px de
     * siempre donde no hay franja, que es el caso habitual.
     */
    padding-bottom: max(24px, env(safe-area-inset-bottom));

    background: var(--bazinga-dark);

    border-top: 1px solid var(--bazinga-border-color);

    box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
}

/*********************************
CÓDIGO DE DESCUENTO
*********************************/

.cart-coupon {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bazinga-border-color);
}

.cart-coupon__applied {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.cart-coupon__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border: 1px dashed var(--bazinga-electric-purple);
    border-radius: 999px;
    color: var(--bazinga-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}

.cart-coupon__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 28px y no 44: va pegado al código y ampliarlo rompería la pastilla. */
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bazinga-text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.cart-coupon__remove:hover,
.cart-coupon__remove:focus-visible {
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
}

/* El triángulo del navegador se sustituye por uno propio, alineado a la derecha. */
.cart-coupon__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
    cursor: pointer;
    list-style: none;
}

.cart-coupon__summary::-webkit-details-marker {
    display: none;
}

.cart-coupon__summary::after {
    content: '+';
    font-size: 18px;
    line-height: 1;
}

.cart-coupon__toggle[open] .cart-coupon__summary::after {
    content: '–';
}

.cart-coupon__summary:hover,
.cart-coupon__toggle[open] .cart-coupon__summary {
    color: var(--bazinga-light);
}

.cart-coupon__form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cart-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bazinga-dark-surface);
    color: var(--bazinga-light);
    font-family: inherit;
    font-size: 14px;
    text-transform: uppercase;
}

.cart-coupon__input::placeholder {
    color: var(--bazinga-text-secondary);
    text-transform: none;
}

.cart-coupon__input:focus-visible {
    outline: 2px solid var(--bazinga-electric-purple);
    outline-offset: 1px;
}

.cart-coupon__apply {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cart-coupon__apply:hover,
.cart-coupon__apply:focus-visible {
    background: var(--bazinga-purple);
    border-color: var(--bazinga-purple);
}

/*********************************
SUMMARY
*********************************/

.cart-summary {
    margin-bottom: 24px;
}

.cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;

    font-size: var(--body-size);
    font-family: var(--body-font);

    color: var(--bazinga-text-secondary);
}

.cart-summary__total {
    margin-top: 16px;
    padding-top: 16px;

    border-top: 1px solid var(--bazinga-border-color);

    font-family: var(--header-font);
    font-size: var(--h3-size);

    color: var(--bazinga-light);
}

/*********************************
CHECKOUT BUTTON
*********************************/

.checkout-btn {
    width: 100%;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 14px;

    background: linear-gradient(90deg,
            var(--bazinga-purple),
            var(--bazinga-electric-purple));

    color: var(--bazinga-light);

    font-family: var(--header-font);
    font-size: 20px;

    cursor: pointer;
    text-transform: uppercase;
    transition: var(--cart-transition);
}

.checkout-btn:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(109, 40, 217, .4);
}

/*********************************
VIEW CART
*********************************/



/*********************************
SECURITY
*********************************/


/*********************************
EMPTY
*********************************/

.cart-empty {
    padding: 80px 20px;

    text-align: center;
}

.cart-empty h3 {
    margin-bottom: 10px;

    font-family: var(--header-font);
    font-size: var(--h3-size);

    color: var(--bazinga-light);
}

.cart-empty p {
    color: var(--bazinga-text-secondary);

    font-family: var(--body-font);
}

/*********************************
ANIMATIONS
*********************************/

.cart-item {
    opacity: 0;
    transform: translateX(30px);
}

.cart-drawer.active .cart-item {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity .4s ease,
        transform .4s ease,
        border-color .3s ease;
}

.cart-drawer.active .cart-item:nth-child(1) {
    transition-delay: .05s;
}

.cart-drawer.active .cart-item:nth-child(2) {
    transition-delay: .10s;
}

.cart-drawer.active .cart-item:nth-child(3) {
    transition-delay: .15s;
}

.cart-drawer.active .cart-item:nth-child(4) {
    transition-delay: .20s;
}

.cart-drawer.active .cart-item:nth-child(5) {
    transition-delay: .25s;
}

/*********************************
MOBILE
*********************************/

@media (max-width: 768px) {

    .cart-drawer {
        width: 100%;
    }

    .cart-drawer__header,
    .cart-drawer__body,
    .cart-drawer__footer {
        padding: 16px;
    }

    /* El atajo de arriba pisa el `max()` del pie; hay que repetirlo. */
    .cart-drawer__footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .cart-item {
        grid-template-columns: 69px 1fr;
    }

    .cart-item__title {
        font-size: 20px;
    }

    .cart-item__price {
        font-size: 21px;
        margin-bottom: 5px;
    }

    .cart-summary__row {
        margin-bottom: 5px;
    }

    .cart-summary__row span {
        font-size: 12px;
    }

    .cart-item__image {
        width: 69px;
        height: 100px;
    }

    .cart-item__variant {
        margin-bottom: 0;
    }

    .quantity-selector {
        height: 33px;
    }

    .cart-summary__row.cart-summary__total span {
        font-size: 18px;
    }
}

/*********************************/
/* MAIN NAV */
/*********************************/

.main-nav {
    position: relative;
    background: var(--bazinga-dark-surface);
    border-top: 1px solid var(--bazinga-border-color);
    border-bottom: 1px solid var(--bazinga-border-color);
}

/*
 * Punto de conmutación de navegación. Si se cambia este max-width hay que
 * cambiar también el del .mobile-menu-trigger (bloque
 * "PUNTO DE CONMUTACIÓN DE NAVEGACIÓN" más arriba), o el sitio quedará sin
 * navegación en la franja intermedia.
 */
@media screen and (max-width:1200px) {
    .main-nav {
        display: none;
    }
}

.main-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu>li {
    position: relative;
}

/*
 * Un ítem de menú sin destino se imprime como <button> (abre el panel y no
 * navega), así que ambas etiquetas comparten exactamente la misma apariencia:
 * la diferencia es semántica, no visual.
 */
.main-menu>li>a,
.main-menu>li>button {
    display: block;
    padding: 24px 24px;
    color: var(--bazinga-light);
    font-weight: 600;
    transition: color .2s ease;
    font-size: 14px;
    text-transform: uppercase;

    /* Reinicio del botón: sin esto hereda fondo, borde y tipografía del UA. */
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

/*********************************/
/* ACTIVE INDICATOR */
/*********************************/

.main-menu>li::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--bazinga-purple);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}

.main-menu>li.active>a,
.main-menu>li.active>button {
    color: var(--bazinga-gold);
    background: #000;
}

.main-menu>li:hover>a,
.main-menu>li:hover>button {
    color: var(--bazinga-gold);
    background: #000;
}

/*********************************/
/* MEGA MENU */
/*********************************/

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;

    background: #000;

    border-top: 1px solid var(--bazinga-border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: var(--z-dropdown);

    /* Recorta el deslizamiento lateral de los paneles al entrar. */
    overflow: hidden;

    /*
     * Los paneles se apilan en la misma celda de una rejilla en lugar de
     * posicionarse en absoluto. Antes el contenedor tenía un alto fijo de
     * 380px porque los paneles absolutos no aportaban altura, así que un
     * panel con más contenido del previsto —por ejemplo dos banners que ya
     * no caben en una fila— quedaba recortado. Ahora el alto lo marca el
     * panel más alto y 380px es solo el mínimo.
     */
    display: grid;
    min-height: 380px;
}

.mega-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*********************************/
/* PANELS */
/*********************************/

.mega-panel {
    /* Todos los paneles comparten celda: se solapan sin salirse del flujo. */
    grid-area: 1 / 1;

    opacity: 0;
    visibility: hidden;

    transform: translateX(20px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    pointer-events: none;
}

.mega-panel.active {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);

    pointer-events: auto;
}

/*********************************/
/* CONTENT GRID */
/*********************************/

.mega-menu-grid {
    max-width: var(--max-page-width);

    margin: 0 auto;

    padding: 48px var(--padding-x);

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr 1fr 1fr 1fr;

    gap: 24px;
}

/*********************************/
/* COLUMNS */
/*********************************/

.mega-column .mega-column__title {
    /* 21px y 1.25 los daba la regla de h4; ahora se declaran. */
    font-size: var(--h4-size);
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--bazinga-gold);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

/* El título de columna puede ser un enlace: conserva el dorado del rótulo en
   lugar de tomar el gris de `.mega-column a`. */
.mega-column .mega-column__title a {
    color: inherit;
}

.mega-column .mega-column__title a:hover,
.mega-column .mega-column__title a:focus-visible {
    text-decoration: underline;
}

.mega-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-column li:not(:last-child) {
    margin-bottom: 12px;
}

.mega-column a {
    color: var(--bazinga-text-secondary);
    transition: color .2s ease;
    display: block;
}

.mega-column a:hover {
    color: var(--bazinga-gold);
}

/* Columna de ancho doble: única variante configurable desde el menú. */
.mega-column--wide {
    grid-column: span 2;
}

/* Enlace destacado dentro de una columna. */
.mega-column li.is-highlighted>a {
    color: var(--bazinga-light);
    font-weight: 700;
}

/*********************************/
/* BADGES DE MENU */
/*********************************/

/*
   Los cuatro estilos son los del sistema; desde el administrador solo se
   elige entre ellos, no se define un color.
*/
.bz-menu-badge {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--body-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

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

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

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

.bz-menu-badge--highlight {
    background: var(--bazinga-electric-purple);
    color: var(--bazinga-light);
}

/*********************************/
/* BANNER */
/*********************************/

.mega-banner {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    min-height: 200px;
    max-height: 200px;
    max-width: 100%;
    overflow: hidden;
    grid-column: span 3;
    border: 1px solid var(--bazinga-border-color);
}

.mega-banner:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #6D28D9;
    background: linear-gradient(21deg, rgba(109, 40, 217, 1) 0%, rgba(196, 119, 24, 0) 74%);
}

.mega-md-banner {
    grid-column: span 2;
}

.mega-xs-banner {
    grid-column: span 1;
}

.mega-banner img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform .4s ease;
}

.mega-panel.active .mega-banner img {
    transform: scale(1);
}

.mega-panel.active .mega-banner:hover img {
    transform: scale(1.05);
}

.mega-banner .content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 24px;

    background:
        linear-gradient(transparent,
            rgba(0, 0, 0, .85));
}

.mega-banner .mega-banner__title {
    color: #fff;
    font-family: var(--header-font);
    text-transform: uppercase;
    font-size: 34px;
    line-height: 1;
}

.mega-banner .mega-banner__eyebrow {
    color: var(--bazinga-gold);
    font-family: var(--header-font);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.25;
}

.mega-banner .mega-banner__title small {
    font-size: 14px;
}


/************************/
/*** FOOTER ***********/

.bazinga-footer {
    background: var(--bazinga-dark-surface);
    border-top: 1px solid var(--bazinga-border-color);
    margin-top: 80px;
}

.bazinga-footer .container {
    max-width: var(--max-page-width);
    margin: auto;
    padding: 70px var(--padding-x) 30px;
}

/*
 * El número de columnas ya no es fijo: sale del menú del pie, que puede tener
 * dos elementos de primer nivel o cinco. Antes era una rejilla de cuatro
 * pistas exactas y cualquier otra cantidad descuadraba la fila.
 *
 * Se resuelve con flex y no con `repeat(auto-fit, …)`: la especificación no
 * permite combinar un repeat automático con pistas flexibles (`1.7fr`), así
 * que esa declaración es inválida y el pie caía a una sola columna.
 */
.footer-grid {

    display: flex;
    flex-wrap: wrap;
    gap: 70px;

}

.footer-grid>.footer-newsletter {

    flex: 1.7 1 280px;

}

.footer-grid>.footer-column {

    flex: 1 1 150px;

}

.footer-newsletter .footer-newsletter__title {

    font-family: var(--header-font);
    font-size: 38px;

    /*
     * Los dos valores siguientes no hacían falta cuando esto era un <h3>. Al
     * pasar a <p> entró en el radio de `.footer-newsletter p`, que es la regla
     * del texto descriptivo de debajo: el titular se estiraba a interlineado
     * 1.7 —de 46 a 65px de alto— y se recortaba a los 420px de ancho de ese
     * párrafo. Lo cazó la comparación de estilos calculados antes y después.
     */
    line-height: 1.2;
    max-width: none;

    text-transform: uppercase;
    color: var(--bazinga-light);
    margin: 30px 0 10px;

}

.footer-newsletter p {

    color: var(--bazinga-text-secondary);
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: 25px;

}

.footer-column .footer-column__title {

    font-family: var(--header-font);
    font-size: 28px;
    /* 1.25 lo daba la regla de h4. */
    line-height: 1.25;
    color: white;
    margin-bottom: 22px;

}

/* El título de columna puede ser un enlace: mantiene el blanco del rótulo en
   lugar de tomar el gris de los enlaces de la lista. */
.footer-column .footer-column__title a {

    color: inherit;

}

.footer-column .footer-column__title a:hover,
.footer-column .footer-column__title a:focus-visible {

    text-decoration: underline;

}

.footer-column ul {

    list-style: none;
    margin: 0;
    padding: 0;

}

.footer-column li {

    margin-bottom: 14px;

}

.footer-column a {

    color: var(--bazinga-text-secondary);
    text-decoration: none;
    transition: .25s;

}

.footer-column a:hover {

    color: var(--bazinga-gold);

}

.footer-social {

    display: flex;
    gap: 18px;
    margin-top: 35px;
    flex-wrap: wrap;

}

.footer-social a {

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    color: var(--bazinga-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--transition-fast);

}

.footer-social a:hover,
.footer-social a:focus-visible {

    color: var(--bazinga-gold);

}

/* Medios de pago: solo existe la franja si hay logotipos que poner. */
.payments {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);

}

.payments img {

    width: auto;
    max-height: 28px;

}

.footer-bottom {

    margin-top: 60px;
    border-top: 1px solid var(--bazinga-border-color);

    padding-top: 25px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.copyright {

    color: var(--bazinga-text-secondary);
    font-size: 14px;

}

@media(max-width:980px) {

    /* Una columna por fila: las bases del flex pasan a ocupar el ancho. */
    .footer-grid {

        gap: 50px;

    }

    .footer-grid>.footer-newsletter,
    .footer-grid>.footer-column {

        flex-basis: 100%;

    }

    .footer-bottom {

        flex-direction: column;
        gap: 20px;

    }

}





/* =========================
   CONTENEDOR PRINCIPAL
   -------------------------
   Vivía en woocommerce-custom.css, pero .site-main lo usan todas las
   plantillas, no solo las de WooCommerce. Al estar en una hoja que carga
   después, su padding ganaba al modificador de la portada.
========================= */

.site-main {
    padding-top: var(--space-10);
}

/* La portada abre con el hero a sangre, pegado a la navegación. */
.site-main--front {
    padding-top: 0;
}