:root {
    --header-font: "Oswald", sans-serif;
    --body-font: "Inter", sans-serif;
    --h1-size: 56px;
    --h2-size: 40px;
    --h3-size: 32px;
    --h4-size: 21px;
    --body-size: 16px;
    --small-text: 14px;

    --bazinga-dark: #171717;
    --bazinga-purple: #6D28D9;
    --bazinga-electric-purple: #8B5CF6;
    --bazinga-gold: #FACC15;
    --bazinga-dark-surface: #17171A;
    --bazinga-medium-surface: #232328;
    --bazinga-border-color: #34343A;
    --bazinga-text-secondary: #A1A1AA;
    --bazinga-gray-light: #f2f2f2;
    --bazinga-light: #ffffff;
    --bazinga-color-preventa: #FACC15;
    --bazinga-color-new: #22C55E;
    --bazinga-color-agotado: #EF4444;
    --bazinga-color-bestseller: #F97316;
    /*
     * «Últimas unidades». Traía el mismo naranja que `bestseller`, con el que
     * se pinta «Oferta», así que dos estados distintos se veían idénticos.
     * Este magenta se distingue del rojo de «Agotado» —los dos que más
     * importa no confundir—, del naranja de la oferta y del amarillo de la
     * preventa. Solo lo usaban dos utilidades sin uso en el marcado.
     */
    --bazinga-color-limited: #DB2777;

    --max-page-width: 1720px;
    --padding-x: 16px;

    /* =========================
       ESPACIADO
       -------------------------
       Escala de 4px. Sustituye a los valores sueltos (10, 14, 18, 22, 26…)
       que se repartían por las hojas del tema.
    ========================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* =========================
       RADIOS
    ========================= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 100px;
    --radius-circle: 50%;

    /* =========================
       SOMBRAS
    ========================= */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, .35);
    --shadow-drawer: -20px 0 80px rgba(0, 0, 0, .5);
    --shadow-purple: 0 10px 30px rgba(109, 40, 217, .35);

    /* =========================
       TRANSICIONES
    ========================= */

    --transition-fast: .2s ease;
    --transition-base: .3s ease;
    --transition-slow: .45s cubic-bezier(.16, 1, .3, 1);

    /* =========================
       Z-INDEX
       -------------------------
       El tema tenía diez valores sin relación entre sí (2, 3, 4, 5, 20, 999,
       9998, 9999, 100000, 999999). Con la cabecera en 999999 y el cart
       drawer en 9999, la cabecera tapaba el drawer.
    ========================= */

    --z-below: -1;
    --z-base: 1;
    --z-raised: 2;
    --z-sticky: 100;
    /* El mega menu vive dentro de la cabecera: comparte su contexto. */
    --z-dropdown: 200;
    --z-overlay: 900;
    --z-drawer: 1000;
    --z-modal: 1100;
    --z-toast: 1200;

    /* =========================
       BREAKPOINTS (referencia)
       -------------------------
       Las media queries no admiten var(), así que estos valores son
       documentación normativa: 480 / 768 / 992 / 1200 / 1440.
       No introducir puntos nuevos sin actualizar esta lista.
    ========================= */

    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-2xl: 1440px;

    /* =========================
       CART DRAWER
    ========================= */

    --cart-drawer-width: 560px;
    --cart-radius: var(--radius-lg);
    --cart-transition: var(--transition-base);
    --cart-shadow: var(--shadow-drawer);
}

html {
    overflow-y: scroll;
}

/* =========================
Accesibilidad
-------------------------
Definición estándar de WordPress. Es necesaria porque
the_posts_pagination() (home.php, index.php) imprime un
<h2 class="screen-reader-text"> que, sin esta regla, se renderiza visible.
========================= */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    display: block;
    top: 5px;
    left: 5px;
    z-index: var(--z-toast);
    width: auto;
    height: auto;
    padding: 15px 23px 14px;
    clip: auto !important;
    clip-path: none;
    color: #444;
    background-color: #eee;
    font-size: 1rem;
    line-height: normal;
    text-decoration: none;
}

/* =========================
Imagen destacada del listado de entradas
-------------------------
El tema no define una regla de imagen fluida global, y la miniatura que
renderiza home.php sale a su ancho natural (768px), provocando scroll
horizontal en móvil. Se acota solo a este componente para no alterar
las imágenes de los componentes ya existentes.
========================= */

.post-thumbnail img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================
   BOTONES
   -------------------------
   Sistema único. El tema tenía ocho implementaciones con alturas (30, 40, 44,
   48, 58, 64px), radios (0, 8, 10, 12, 14, 100px) y tratamientos de hover
   distintos.

   Se formaliza el patrón que ya seguía el diseño aprobado:

     · Acciones (añadir al carrito, checkout, envío de formulario)
       → radio --radius-md, rectángulo redondeado.
     · Filtros y navegación (pestañas, paginación, enlaces de sección)
       → modificador .btn--pill.

   Tamaños: --sm 36px · base 44px (mínimo táctil) · --lg 56px.
========================= */

.btn {
    /* Reset para que funcione igual en <button>, <a> e <input>. */
    -webkit-appearance: none;
    appearance: none;

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

    min-height: 44px;
    padding: 0 var(--space-6);

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    background: transparent;
    color: var(--bazinga-light);

    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Variantes ------------------------------------------ */

.btn--primary {
    background: var(--bazinga-purple);
    border-color: var(--bazinga-purple);
    color: var(--bazinga-light);
}

.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible {
    background: var(--bazinga-electric-purple);
    border-color: var(--bazinga-electric-purple);
}

.btn--secondary {
    background: var(--bazinga-medium-surface);
    border-color: var(--bazinga-border-color);
    color: var(--bazinga-text-secondary);
}

.btn--secondary:hover:not(:disabled),
.btn--secondary:focus-visible {
    background: var(--bazinga-purple);
    border-color: var(--bazinga-purple);
    color: var(--bazinga-light);
}

.btn--ghost {
    background: transparent;
    border-color: var(--bazinga-border-color);
    color: var(--bazinga-text-secondary);
}

.btn--ghost:hover:not(:disabled),
.btn--ghost:focus-visible {
    border-color: var(--bazinga-purple);
    color: var(--bazinga-light);
}

.btn--danger {
    background: transparent;
    border-color: var(--bazinga-border-color);
    color: var(--bazinga-text-secondary);
}

.btn--danger:hover:not(:disabled),
.btn--danger:focus-visible {
    background: var(--bazinga-color-agotado);
    border-color: var(--bazinga-color-agotado);
    color: var(--bazinga-light);
}

/* --- Modificadores -------------------------------------- */

.btn--sm {
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: 12px;
}

.btn--lg {
    min-height: 56px;
    padding: 0 var(--space-8);
    font-size: var(--body-size);
}

.btn--pill {
    border-radius: var(--radius-pill);
}

.btn--block {
    width: 100%;
}

.btn--icon {
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-circle);
}

.btn--icon.btn--sm {
    width: 36px;
    min-height: 36px;
}

/* =========================
   FOCO VISIBLE (global)
   -------------------------
   El tema no tenía ninguna regla :focus-visible y además anulaba el
   indicador nativo con `outline: 0` en el buscador y en las pestañas. Con
   teclado no se sabía dónde estaba el foco.

   Se usa :focus-visible para no mostrar el anillo en clics de ratón.
========================= */

:focus-visible {
    outline: 2px solid var(--bazinga-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Enlace de salto: primer elemento tabulable de la página. */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* =========================
   AVISOS Y MENSAJES
   -------------------------
   Una sola definición para los avisos del tema y para los que genera
   WooCommerce (carrito, checkout, Mi cuenta), que hasta ahora salían con
   los estilos por defecto del plugin sobre el fondo oscuro.
========================= */

.bz-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--bazinga-border-color);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.5;
    list-style: none;
}

.woocommerce-message {
    border-left-color: var(--bazinga-color-new);
}

.woocommerce-info {
    border-left-color: var(--bazinga-electric-purple);
}

.woocommerce-error {
    border-left-color: var(--bazinga-color-agotado);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--bazinga-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* WooCommerce inserta un ::before decorativo con su propia fuente de iconos. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none;
}

.woocommerce-error li {
    list-style: none;
}

/* =========================
   ESTADOS VACÍOS
========================= */

.bz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-5);
    text-align: center;
}

.bz-empty__text {
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 17px;
}

/* =========================
   FORMULARIOS
   -------------------------
   Sistema único para todos los campos del sitio: buscador, newsletter,
   comentarios, cantidad, ordenación del catálogo, checkout y Mi cuenta.
   Antes cada uno heredaba los estilos del navegador, así que sobre el tema
   oscuro aparecían cajas blancas.
========================= */

.bz-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    box-sizing: border-box;
    width: 100%;
    /* Sin esto un input dentro de un flex no puede encogerse por debajo de
       su ancho intrínseco y desborda el contenedor. */
    min-width: 0;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-dark);
    color: var(--bazinga-light);

    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: 1.4;

    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--bazinga-text-secondary);
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--bazinga-electric-purple);
    outline: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 2px;
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Select con flecha propia: la nativa no respeta el tema oscuro. */
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    cursor: pointer;
}

select option {
    background: var(--bazinga-dark-surface);
    color: var(--bazinga-light);
}

label {
    font-family: var(--body-font);
    font-size: var(--small-text);
    color: var(--bazinga-text-secondary);
}

/* La cantidad de WooCommerce es un campo estrecho por naturaleza. */
.quantity input.qty {
    width: 84px;
    min-width: 0;
    text-align: center;
}

/* =========================
   PAGINACIÓN
   -------------------------
   Una sola definición para el blog (the_posts_pagination) y para el catálogo
   (woocommerce_pagination). Antes el blog tenía su propio bloque en
   editorial.css y la del catálogo no tenía estilos del tema.
   `.page-numbers` es una clase específica de WordPress y WooCommerce para
   paginación, así que se puede estilar directamente.
========================= */

.navigation.pagination,
.woocommerce-pagination {
    margin-top: var(--space-12);
}

.navigation.pagination .nav-links,
.woocommerce-pagination ul,
.woocommerce-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.woocommerce-pagination li {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
}

a.page-numbers,
span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
    border-color: var(--bazinga-purple);
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
}

span.page-numbers.current {
    border-color: var(--bazinga-purple);
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
}

span.page-numbers.dots {
    border-color: transparent;
    background: none;
    min-width: auto;
}

/* =========================
   CARGA PROGRESIVA DEL CATÁLOGO
========================= */

/* Con el infinite scroll activo la paginación nativa se oculta, pero sigue
   presente en el HTML para rastreadores y para el caso sin JavaScript. */
body.has-infinite-scroll .woocommerce-pagination {
    display: none;
}

.products-infinite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-10) 0;
}

.products-infinite__status:empty {
    display: none;
}

.products-infinite__status {
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

/* El spinner solo se ve mientras hay una carga en curso. Antes el CSS
   definía .infinite-loader pero el marcado no la aplicaba nunca. */
.infinite-loader {
    display: none;
    width: 32px;
    height: 32px;
    border: 3px solid var(--bazinga-border-color);
    border-top-color: var(--bazinga-purple);
    border-radius: var(--radius-circle);
    animation: bz-spin .8s linear infinite;
}

.products-infinite.is-loading .infinite-loader {
    display: block;
}

.products-infinite.is-loading .products-infinite__more {
    visibility: hidden;
}

@keyframes bz-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bz-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.product-enter {
    animation: bz-fade-up .35s ease both;
}

/* =========================
Typography
========================= */

.h1 {
    font-family: var(--header-font);
    font-size: var(--h1-size);
    line-height: 1.1;
    font-weight: 700;
}

.h2 {
    font-family: var(--header-font);
    font-size: var(--h2-size);
    line-height: 1.15;
    font-weight: 700;
}

.h3 {
    font-family: var(--header-font);
    font-size: var(--h3-size);
    line-height: 1.2;
    font-weight: 700;
}

.body-text {
    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: 1.6;
    font-weight: 400;
}

.small-text {
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.5;
    font-weight: 400;
}

/* =========================
   Text Colors
========================= */

.text-dark {
    color: var(--bazinga-dark);
}

.text-purple {
    color: var(--bazinga-purple);
}

.text-electric-purple {
    color: var(--bazinga-electric-purple);
}

.text-gold {
    color: var(--bazinga-gold);
}

.text-dark-surface {
    color: var(--bazinga-dark-surface);
}

.text-medium-surface {
    color: var(--bazinga-medium-surface);
}

.text-border {
    color: var(--bazinga-border-color);
}

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

.text-light {
    color: var(--bazinga-light);
}

.text-preventa {
    color: var(--bazinga-color-preventa);
}

.text-new {
    color: var(--bazinga-color-new);
}

.text-agotado {
    color: var(--bazinga-color-agotado);
}

.text-bestseller {
    color: var(--bazinga-color-bestseller);
}

.text-limited {
    color: var(--bazinga-color-limited);
}

/* =========================
   Background Colors
========================= */

.bg-dark {
    background-color: var(--bazinga-dark);
}

.bg-purple {
    background-color: var(--bazinga-purple);
}

.bg-electric-purple {
    background-color: var(--bazinga-electric-purple);
}

.bg-gold {
    background-color: var(--bazinga-gold);
}

.bg-dark-surface {
    background-color: var(--bazinga-dark-surface);
}

.bg-medium-surface {
    background-color: var(--bazinga-medium-surface);
}

.bg-border {
    background-color: var(--bazinga-border-color);
}

.bg-secondary {
    background-color: var(--bazinga-text-secondary);
}

.bg-light {
    background-color: var(--bazinga-light);
}

.bg-preventa {
    background-color: var(--bazinga-color-preventa);
}

.bg-new {
    background-color: var(--bazinga-color-new);
}

.bg-agotado {
    background-color: var(--bazinga-color-agotado);
}

.bg-bestseller {
    background-color: var(--bazinga-color-bestseller);
}

.bg-limited {
    background-color: var(--bazinga-color-limited);
}

.button-achurado {
    position: relative;
    width: fit-content;
    height: 40px;
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--bazinga-purple);
    text-transform: uppercase;
    font-weight: 300;
    transition: 0.5s;
    letter-spacing: 1px;
    border-radius: 8px;
    padding: 0;
}


.button-achurado a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 101%;
    height: 100%;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: bold;
    background: var(--bazinga-purple);
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
    -webkit-mask-size: 3000% 100%;
    mask-size: 3000% 100%;
    border: none;
    color: var(--bazinga-light);
    cursor: pointer;
    -webkit-animation: ani2 0.7s steps(29) forwards;
    animation: ani2 0.7s steps(29) forwards;
    padding: 0 24px;
}

.button-achurado a:hover {
    -webkit-animation: ani 0.7s steps(29) forwards;
    animation: ani 0.7s steps(29) forwards;
}

.mas {
    position: absolute;
    color: var(--bazinga-purple);
    background-color: var(--bazinga-light);
    text-transform: uppercase;
    text-align: center;
    width: 101%;
    height: 100%;
    font-weight: 300;
    position: absolute;
    font-size: 11px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    padding: 0 24px;
}

@-webkit-keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@-webkit-keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}