/** Shopify CDN: Minification failed

Line 1281:5 Unexpected "="
Line 1871:0 Unexpected "}"

**/
/* ==========================================================================
   TENFIT – HEADER + MEGA MENU (UNIFICADO)

   Organización actual (ver ÉPICA 10 en CLAUDE.md — pendiente pasar a mobile-first):
   0) Tokens y resets
   1) "Base / shared"  → hoy contiene el layout del MEGA-MENÚ DESKTOP sin media query
   2) Desktop (@media min-width: 1281px) — solo ajustes finos
   3) Mobile/Tablet (@media max-width: 1280px) — el drawer y todo el móvil
   4) Cart drawer z-index · 5) Desktop compacto (1400/1600)

   ESCALA DE BREAKPOINTS (fase 3, aún no aplicada de forma consistente):
     --bp-xs:  380px   móvil pequeño
     --bp-sm:  768px   móvil grande → inicio tablet
     --bp-md: 1024px   tablet grande / laptop chico
     --bp-lg: 1280px   ← corte actual drawer↔mega desktop
     --bp-xl: 1536px   desktop grande
   El menú móvil (drawer) se usa hoy hasta 1280px. El tramo 768–1280 (tablet)
   NO tiene tratamiento propio → tarea 10.17.
   ========================================================================== */

/* ------------------------------------------
   0) TOKENS & GLOBAL RESETS
------------------------------------------- */
:root {
    /* Color & UI */
    --header-bg: #fff;
    --text-strong: #000;
    --text-default: #333;
    --text-muted: #555;
    --border: #e5e5e5;
    --border-soft: #eee;
    --shadow: 0 8px 16px rgba(0, 0, 0, .08);
    --icon-mobile: #000;

    /* Z-index hierarchy.
       OJO: `.m-announcement-bar` (Minimog, en main.css) es `position: fixed; z-index: 6000`.
       El carrito TIENE que ir por encima de eso o el drawer queda tapado por el
       announcement bar al abrirse. */
    --z-header: 3000;
    --z-mega: 3500;
    --z-mobile-drawer: 3100;
    --z-announcement: 6000; /* referencia — el valor real lo pone main.css */
    --z-cart-backdrop: 6900;
    --z-cart-drawer: 7000;

    /* Radii, gaps, easing */
    --radius: 8px;
    --radius-sm: 4px;
    --gap: 20px;
    --gap-sm: 10px;
    --transition: 180ms ease;

    /* Alturas de header/announcement.
       El JS (recalc en custom-menu.js) sobreescribe --ann-h, --header-h y
       --header-total-h con los valores medidos al cargar/resize.
       --fixed-top-h queda ESTÁTICO a propósito: lo usa #MainContent para reservar
       espacio bajo el header fijo sin depender de que el JS haya corrido. */
    --ann-h: 40px;
    --header-h: 56px;
    --header-total-h: calc(var(--ann-h) + var(--header-h));
    --fixed-top-h: calc(var(--ann-h) + var(--header-h));
    --mega-menu-left-offset: 0px; /* alinea el mega-menú con su item (lo pone el JS) */

    /* Escala de breakpoints (referencia; los @media aún usan literales) */
    --bp-xs: 380px;
    --bp-sm: 768px;
    --bp-md: 1024px;
    --bp-lg: 1280px;
    --bp-xl: 1536px;
}

/* Accesibilidad: reducir movimiento SIN romper fades/lazyload de imágenes */
@media (prefers-reduced-motion: reduce) {

    /* Evita scroll suave, pero no bloquees transiciones globalmente */
    html:focus-within {
        scroll-behavior: auto !important;
    }

    /* Detén animaciones que generen desplazamiento grande/parallax/marquees */
    .parallax,
    [data-parallax],
    .marquee,
    .ticker,
    .slide-in,
    .fly,
    .spin,
    .bounce,
    [data-anim],
    [data-reveal] {
        animation: none !important;
    }

    /* Garantiza que las imágenes queden visibles aunque se cancele el keyframe de fade-in */
    img,
    picture,
    video,
    .product-card img,
    .collection-img,
    .product-img {
        opacity: 1 !important;
        /* anula opacity:0 inicial de algunos loaders */
        animation: none !important;
        /* desactiva solo la animación del fade, no depende de ella */
        /* No tocamos transition aquí para no interferir con otras UI */
    }

    /* Si igualmente quieres minimizar transiciones, reduce su duración en vez de bloquearlas */
    * {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        /* Omitimos 'transition: none' para no romper cambios de opacity necesarios */
    }
}

/* Accesibilidad foco */
:where(a, button, [role="button"]):focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ------------------------------------------
   1) BASE / SHARED
   (Reglas comunes sin forzar layout por breakpoint)
------------------------------------------- */

/* === OFFSET GLOBAL PARA CONTENIDO === */
#MainContent {
  padding-top: var(--fixed-top-h);
}

/* Header contenedor */
.tenfit-header {
    position: fixed;
    top: var(--ann-h, 0px);
    left: 0; right: 0;
    z-index: var(--z-header);
    background: var(--header-bg, #fff);
    border-bottom: 1px solid var(--border-soft, #eee);
    isolation: isolate;
}

.header-inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Mantiene los lados en los extremos */
    position: relative;
    padding: 0px;
    min-height: 60px;
}

/* ==========================================================================
   MOBILE-FIRST — rebanada 2 (ÉPICA 10.15)
   Navegación horizontal desktop + estructura del mega-menú genérico
   (.main-menu, .menu-item, .mega-menu, .menu-column-*, .category-*, .product-card,
   .extra-links-fixed, .see-all-link). Todas estas clases solo existen en
   custom-menu-desktop.liquid; ninguna aparece en el bloque @media (max-width:1280px).
   Se deja FUERA `.tenfit-header` / `.header-inner` (compartidos) y `.icon-link` /
   `.icon` (los usa también el buscador móvil).
   ========================================================================== */
@media (min-width: 1281px) {

/* Navegación principal */
.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    position: relative;
}

.menu-item>a {
    font-size: 20px;
    font-weight: 100;
    text-decoration: none;
    margin: 0 15px;
    display: block;
    color: var(--text-strong);
    padding: 6px 2px;
}

.menu-item>a:hover {
    text-decoration: underline;
    font-weight: 500;
}

/* Submenú simple (fallback si se usa) */
.menu-item.has-submenu:hover .sub-menu {
    display: block;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 0.75rem 0;
    min-width: 180px;
    box-shadow: var(--shadow);
    z-index: 10;
}

.sub-menu-item a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.sub-menu-item a:hover {
    background: #f5f5f5;
}

/* Mega menú (estructura base) */
.menu-item .mega-menu {
    display: none;
}

/* oculto por defecto */
.menu-item.show-mega .mega-menu {
    display: flex;
}

/* visible al hover/JS */

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    margin-left: calc(-1 * var(--mega-menu-left-offset, 0px));
    padding: 10px;
    background: #fff;
    z-index: 999;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow);
}

.mega-columns {
    display: flex;
    gap: 20px;
}

.mega-menu .menu-column-left {
    user-select: none;
    cursor: default;
}

/* Columna izquierda + títulos */
.menu-column-left {
    display: flex;
    margin-left: 25px;
    flex-direction: column;
    position: relative;
    width: 450px;
    padding-right: 20px;
    border-right: 1px solid var(--border);
    top: 20px;
    flex-shrink: 0;
}

.mega-menu .menu-column-right {
    flex: 1;
    margin-right: 25px;
    margin-top: 20px;
}

.menu-column-left h4,
.mega-menu .menu-column-right h4 {
    font-weight: 400;
    font-size: 20px;
    color: var(--text-strong);
    margin-bottom: 16px;
}

/* Categorías nivel 2-3 */
.category-group {
    margin-bottom: 12px;
}

.category-group .category-title {
    color: var(--text-default);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.category-group .category-title>a,
.category-group .category-title>.category-title__text {
    font-size: 18px;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}

.category-group .category-title:hover {
    font-weight: 400;
    text-decoration: underline;
    color: var(--text-strong);
}

.category-group ul {
    padding-left: 10px;
    list-style: none;
}

.category-sublist {
    display: none;
    padding-left: 1rem;
}

.category-sublist.open {
    display: block;
}

.category-sublist[hidden] {
    display: none !important;
}

.category-group ul li a {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.category-sublist>li>a {
    font-size: 16px;
    font-weight: 500;
}

.category-sublist>li>a:hover {
    text-decoration: underline;
}

.toggle-icon svg {
    transition: transform var(--transition);
}

.category-title.open .toggle-icon svg,
.category-title[aria-expanded="true"] .toggle-icon svg {
    transform: rotate(180deg);
}

/* Tarjetas de producto (panel derecho) – SCOPED al header.
   Grid de 4 columnas fijas: el mega genérico / New / Niños muestran 4 productos
   (limit: 4) SIEMPRE en una fila limpia; las cards se adaptan al ancho de la
   columna (≈185px a 1281, ≈290px a 1920). Sin `flex-wrap` -> sin fila huérfana. */
.tenfit-header .mega-menu-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 15px 0;
    align-items: start;
    max-width: 1200px; /* tope para que no crezcan de más en pantallas grandes */
}

.tenfit-header .mega-menu-products .product-card {
    min-width: 0; /* permite que la card se encoja dentro de su celda */
    text-align: center;
}

.tenfit-header .mega-menu-products .product-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.tenfit-header .mega-menu-products .product-card span {
    display: block;
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.3;
    color: #111;
    font-weight: 500;
}

.tenfit-header .mega-menu-products .product-card .price {
    font-size: 14px;
    color: var(--text-strong);
    font-weight: 600;
}

/* Enlaces extra al fondo del mega – SCOPED */
.tenfit-header .extra-links-fixed {
    position: relative;
    bottom: 0;
    margin: 0 25px;
    display: flex;
    gap: 16px;
    background: #fff;
    width: calc(100% - 50px);
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.tenfit-header .extra-link-item {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-strong);
    text-decoration: none;
}

.tenfit-header .extra-link-item:hover {
    text-decoration: underline;
}

.tenfit-header .see-all-link {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin-left: -12px;
    display: inline-block;
    margin-top: 6px;
    transition: all var(--transition);
}

.tenfit-header .see-all-link:hover {
    text-decoration: underline;
    font-weight: 600;
}

} /* /@media (min-width: 1281px) — fin rebanada 2 mobile-first */

.tenfit-header .icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tenfit-header .icon {
    width: 20px;
    height: 20px;
    stroke: #555;
    fill: none;
    stroke-width: 1.5;
}

/* ==========================================================================
   MOBILE-FIRST — rebanada 1 (ÉPICA 10.15)
   Contenido del mega-menú DESKTOP (Niños / Esenciales / Accesorios / Sale-tabs).
   Estas clases solo existen en el markup de custom-menu-desktop.liquid y en móvil
   viven dentro de `.desktop-only { display:none }` -> antes eran reglas sin media
   query pero inertes en móvil. Ahora solo se cargan en desktop.
   ========================================================================== */
@media (min-width: 1281px) {

/* ====== Niños: dos columnas género (Niños / Niñas) */
.kids-gender-columns {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.kids-col {
    flex: 1;
}

.kids-col-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
    color: var(--text-default);
}

.kids-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kids-col-list li a {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: none;
    display: block;
}

.kids-col-list li a:hover {
    text-decoration: underline;
    color: var(--text-strong);
}

/* ====== Esenciales (estructura compartida) */
.tenfit-header .mega-menu-essentials-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: calc(-1 * var(--mega-menu-left-offset, 0px));
    width: 100vw;
    background: #fff;
    display: none;
    z-index: 1000;
    padding: 10px 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tenfit-header .menu-item.show-mega .mega-menu-essentials-wrapper {
    display: flex;
}

.tenfit-header .mega-menu-essentials {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    gap: 10px;
}

.tenfit-header .essentials-column-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tenfit-header .essentials-column-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}

.tenfit-header .essentials-divider {
    width: 1px;
    background: #ddd;
    margin: 0 10px;
}

.tenfit-header .essentials-groups-nav {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.tenfit-header .essentials-groups-nav .essentials-group {
    min-width: 210px;
}

.tenfit-header .essentials-group-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: .5rem;
}

.tenfit-header .essentials-group-title:hover {
    text-decoration: underline;
}

.tenfit-header .essentials-submenu li {
    margin-bottom: .4rem;
}

.tenfit-header .essentials-submenu>li>a:hover {
    text-decoration: underline;
}

.tenfit-header .essentials-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    align-items: start;
}

.tenfit-header .essentials-product-card {
    background: #fff;
    padding: 10px;
    text-align: center;
}

.tenfit-header .essentials-product-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 4px;
}

.tenfit-header .essentials-product-card span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

.tenfit-header .essentials-banner {
    border-radius: 12px;
    overflow: hidden;
}

.tenfit-header .essentials-banner img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.tenfit-header .essentials-banner-text {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: #333;
    padding: 8px 0;
}

.tenfit-header .essentials-promo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.tenfit-header .essentials-promo-card {
    min-width: 0; /* que la card se encoja en su celda en vez de desbordar */
    background: #fff;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    transition: transform var(--transition);
}

.tenfit-header .essentials-promo-card:hover {
    transform: translateY(-2px);
}

.tenfit-header .essentials-promo-card img {
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.tenfit-header .essentials-promo-title {
    margin-top: 8px;
    font-size: 20px;
    color: #333;
    margin-left: 10px;
}

.tenfit-header .essentials-submenu li a {
    font-size: 14px;
}

/* ====== Accesorios */
.tenfit-header .mega-menu-accessories-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: calc(-1 * var(--mega-menu-left-offset, 0px));
    width: 100vw;
    background: #fff;
    display: none;
    z-index: 1000;
    padding: 10px 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tenfit-header .menu-item.show-mega .mega-menu-accessories-wrapper {
    display: block;
}

.tenfit-header .mega-menu-accessories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tenfit-header .accessories-column-products {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tenfit-header .accessories-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tenfit-header .accessories-product-card {
    text-align: center;
}

.tenfit-header .accessories-product-card img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
    transition: transform var(--transition);
}

.tenfit-header .accessories-product-card img:hover {
    transform: scale(1.05);
}

.tenfit-header .accessories-product-card span {
    display: block;
    margin-top: .5rem;
    font-size: .95rem;
    color: #333;
}

/* ====== Sale (tabs) */
.tenfit-header .mega-menu-sale-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: calc(-1 * var(--mega-menu-left-offset, 0px));
    width: 100vw;
    background: #fff;
    display: none;
    z-index: 1000;
    padding: 10px 40px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tenfit-header .menu-item.show-mega .mega-menu-sale-wrapper {
    display: block;
}

/* Sale desktop: "Ver todo" arriba derecha */
.tenfit-header .sale-tabs-nav {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    padding: 0 16px;
}

.tenfit-header .sale-tabs-nav .sale-view-all {
    margin-left: auto;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.tenfit-header .sale-tab-button {
    flex: 1;
    max-width: 45px;
    text-align: center;
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    position: relative;
    padding: .75rem 0;
    white-space: nowrap;
    transition: color var(--transition);
}

.tenfit-header .sale-tab-button:hover {
    color: #000;
}

.tenfit-header .sale-divider {
    border-top: 1px solid #ddd;
    margin: 0 16px 16px 0;
}

.tenfit-header .sale-tab-button.active,
.tenfit-header [role="tab"][aria-selected="true"] {
    color: #000;
    font-weight: 700;
    border-bottom: 2px solid #000;
}

.tenfit-header .sale-tab-button.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
}

.tenfit-header .sale-tab-content {
    display: none;
}

.tenfit-header .sale-tab-content.active,
.tenfit-header [role="tabpanel"].active {
    display: block;
}

.tenfit-header .sale-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tenfit-header .sale-product-card {
    text-align: center;
}

.tenfit-header .sale-product-card img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
    transition: transform var(--transition);
}

.tenfit-header .sale-product-card img:hover {
    transform: scale(1.05);
}

.tenfit-header .sale-product-card span {
    display: block;
    margin-top: .5rem;
    font-size: .95rem;
    color: #333;
}

.tenfit-header .sale-product-card s {
    color: #888;
    margin-right: .3rem;
}

} /* /@media (min-width: 1281px) — fin rebanada 1 mobile-first */

/* .nav-right lo comparten el bloque de iconos desktop y el móvil -> se queda en base.
   .nav-desktop-left es solo desktop (contenedor .desktop-only) -> movido al bloque
   @media (min-width:1281px) de más abajo (rebanada 3). */
.nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    z-index: 5;
}

/* Utilidades de visibilidad SOLO dentro del header */
.tenfit-header .desktop-only {
    display: inline-flex;
}

.tenfit-header .mobile-only {
    display: none;
}

/* ------------------------------------------
   2) DESKTOP (>=1281px)
------------------------------------------- */
@media (min-width:1281px) {

    /* rebanada 3: solo desktop (el contenedor .nav-desktop-left es .desktop-only) */
    .nav-desktop-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        z-index: 5;
    }

    /* .logo-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-center img {
        max-height: 32px;
    } */
     .tenfit-header .logo-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: max-content;
    }


    .tenfit-header .logo-center img {
        width: 150px;
        height: 20px;
        max-width: 150px;
        max-height: 20px;
        object-fit: contain;
        display: block;
    }

    /* Ocultar UI móvil totalmente en desktop */
    .nav-mobile-left,
    .mobile-menu-container,
    .mobile-only,
    .icon-close,
    .icon-menu {
        display: none !important;
    }

    .tenfit-header .desktop-only {
        display: inline-flex !important;
    }

    /* Reafirmar estilos del header en desktop */
    .tenfit-header {
        position: fixed;
        top: var(--ann-h, 0px);
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 8px 25px;
    }

    .menu-item .mega-menu {
        display: none;
    }

    .menu-item.show-mega .mega-menu {
        display: flex;
    }

    .mega-menu {
        box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .icon {
        width: 20px;
        height: 20px;
        stroke: #555;
    }
}

/* ------------------------------------------
   3) MOBILE/TABLET (<=1280px)
   Drawer debajo del header + búsqueda
------------------------------------------- */
@media (max-width:1280px) {

    /* Bloquea scroll del documento cuando el menú está abierto */
    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
        height: 100%;
        touch-action: none;
        overscroll-behavior: none;
        /* evita arrastre al body */
    }

    .tenfit-header {
        position: fixed;
        top: var(--ann-h);
        z-index: 1000;
        background: var(--header-bg);
        border-bottom: 1px solid var(--border-soft);
        padding: 5px;
        border-bottom: 1px solid #e5e4e7;
    }

    /* 3 columnas: izquierda / logo / derecha */
    .tenfit-header .header-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left logo right";
        align-items: center;
        gap: 12px;
    }

    /* Visibilidades correctas */
    .tenfit-header .desktop-only {
        display: none !important;
    }

    .tenfit-header .mobile-only {
        display: inline-flex !important;
    }

    /* Columna izquierda: hamburguesa + lupa (tu snippet mobile) */
    .tenfit-header .mobile-slot-left {
        grid-area: left;
        display: flex !important;
        align-items: center;
        gap: 6px;
    }

    .tenfit-header .logo-center img {
        justify-self: center;
        width: 150px;
        height: 20px;
    }

    /* Derecha: ubicación + carrito */
    .tenfit-header .nav-right.mobile-only {
        grid-area: right;
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
    }

    .tenfit-header .nav-mobile-left .menu-toggle,
    .tenfit-header .nav-mobile-left .icon-link,
    .tenfit-header .nav-right.mobile-only .icon-link {
        /*width: 35px;*/
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tenfit-header .menu-toggle {
        background: none;
        border: 0;
        padding: 0;
    }

    .tenfit-header .menu-toggle svg,
    .tenfit-header .icon {
        width: 20px;
        height: 20px;
        stroke: var(--icon-mobile);
    }

    /* Col.2: logo centrado */
    .tenfit-header .logo-center {
        grid-column: 2;
        position: static;
        transform: none;
        justify-self: center;
    }

    .tenfit-header .logo-center .logo {
        max-height: 28px;
        display: block;
    }

    /* Col.3: iconos derechos */
    .tenfit-header .nav-right.mobile-only {
        grid-column: 3;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1px;
    }

    /*Inicio New Hombre / Mujer (solo mobile, dentro de .accordion-panel) */
    /* ====== FIX 1: anular inline-flex de .mobile-only SOLO dentro del panel ====== */
    .tenfit-header .mobile-menu-panel .mobile-menu-inner .accordion-panel .mobile-only {
        display: block !important;
        width: 100%;
    }

    /* ====== Estructura vertical: Ver todo / Hombre / Mujer / Recomendados ====== */

    /* Botón "Ver todo" */
    .tenfit-header .accordion-panel .mobile-view-all-btn {
        display: block !important;
        padding: 10px 0px;
        background: #fff;
        color: #111;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
    }

    .btn-ver-todo-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        /*background: #f9f9f9; Un tono gris muy suave para diferenciarlo */
        color: #000;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        border-bottom: 1px solid #eee;
        }

        .btn-ver-todo-main svg {
        margin-left: 10px;
        }

    .tenfit-header .accordion-panel .mobile-view-all-btn:active {
        background: #f7f7f7;
    }

    /* Hombre / Mujer en COLUMNA (uno debajo del otro) */
    .tenfit-header .accordion-panel .mobile-menu-gender {
        display: flex !important;
        flex-direction: column;
    }

    .tenfit-header .accordion-panel .mobile-menu-gender .gender-link {
        display: block;
        background: #fff;
        color: #111;
        font-size: 15px;
        text-decoration: none;
    }

    .tenfit-header .accordion-panel .mobile-menu-gender .gender-link:active {
        background: #f5f5f5;
    }

    /* ====== FIX 2: carrusel horizontal de Recomendados ====== */
    .tenfit-header .accordion-panel .collection-scroll-wrapper {
        overflow-x: hidden;
        padding-bottom: 10px;
    }

    /* Contenedor scrolleable */
    .tenfit-header .accordion-panel .collection-horizontal-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* no permitir wrap */
        gap: 12px;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding: 0 10px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .tenfit-header .accordion-panel .collection-horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Tarjetas uniformes (evita que el tema las expanda a 100%) */
    .tenfit-header .accordion-panel .collection-card {
        flex: 0 0 auto !important;
        min-width: 160px !important;
        max-width: 160px !important;
        scroll-snap-align: start;
    }

    .tenfit-header .accordion-panel .image-wrapper {
        position: relative;
        width: 160px;
        height: 220px;
        /* un poco más alto para foto */
        overflow: hidden;
        border-radius: 10px;
    }

    .tenfit-header .accordion-panel .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tenfit-header .accordion-panel .collection-name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 6px 8px;
        font-size: 13px;
        line-height: 1.25;
        background: rgba(0, 0, 0, .4);
        color: #fff;
    }

    /* Pequeños márgenes del bloque de extras */
    .tenfit-header .accordion-panel .mobile-extras .grupo {
        margin-top: 12px;
    }

    /*Categorias*/
    /* ===== Categorías (fila horizontal con snap) ===== */
    .tenfit-header .mobile-menu-inner .grupo .collection-scroll-wrapper {
        overflow-x: hidden;
        padding-bottom: 10px;
    }

    .tenfit-header .mobile-menu-inner .grupo .collection-horizontal-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        padding: 0 15px;
        scrollbar-width: none;
    }

    .tenfit-header .mobile-menu-inner .grupo .collection-horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    .tenfit-header .mobile-menu-inner .grupo .collection-card {
        flex: 0 0 auto !important;
        width: 140px !important;
    }

    .tenfit-header .mobile-menu-inner .grupo .image-wrapper {
        display: grid;
        grid-template-areas: "stack"; /* Creamos una única celda de apilamiento */
        width: 140px;
        height: 220px;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        /* Fix para esquinas en iPhone */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    /* La imagen ocupa toda la celda */
    .tenfit-header .mobile-menu-inner .grupo .image-wrapper img,
    .tenfit-header .mobile-menu-inner .grupo .placeholder-bg {
        grid-area: stack;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tenfit-header .mobile-menu-inner .grupo .collection-name {
        grid-area: stack;
        align-self: end; /* Se pega al fondo automáticamente */
        
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 10px 5px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        z-index: 2;
        
        /* Asegura que el fondo sea siempre del ancho total */
        width: 100%;
        box-sizing: border-box;
    }

    /*fin categorias*/

    /* ==== ENLACES EXTRA (MOBILE) 
    .tenfit-header .accordion-panel .mobile-extra-links {
        display: block;
        padding: 0 5px 4px;
        margin: 0px;
    }

    .tenfit-header .accordion-panel .mobile-extra-links .extra-link-item {
        display: block;
        margin-bottom: 2px;
        background: #fff;
        color: #111;
        text-decoration: underline;
        font-size: 15px;
        font-weight: 600; /* antes lo heredaba de la regla base sin media query (rebanada 2) */
    }

    .tenfit-header .accordion-panel .mobile-extra-links .extra-link-item:active {
        background: #f7f7f7;
    }==== */

    /* ==== RECOMENDADOS (MOBILE): carrusel horizontal ==== */
    /*Fin New Mobile*/

    /* Backdrop del drawer */
    .tenfit-header .mobile-menu-backdrop {
        position: fixed;
        top: var(--header-total-h);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .35);
        z-index: calc(var(--z-mobile-drawer) - 1);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-menu-backdrop {
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
        }

    .tenfit-header .mobile-menu-backdrop.open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    /* Drawer */
    .tenfit-header .mobile-menu-panel {
        position: fixed;
        top: var(--header-total-h);
        left: 0;
        right: 0;
        bottom: 0;
        /* altura dinámica: announcement + header */
        max-height: calc(100svh - var(--header-total-h));
        background: #fff;
        transform: translateX(-100%);
        transition: transform .32s ease;
        z-index: var(--z-mobile-drawer);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* el scroll vive en .mobile-menu-inner */
        box-shadow: 2px 0 12px rgba(0, 0, 0, .12);
        pointer-events: none;
        visibility: hidden;
        overscroll-behavior: contain;
    }

    .tenfit-header .mobile-menu-panel.open {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
        top: var(--header-total-h);
    }

    /* Header interno del panel (buscador) */
    .tenfit-header .mobile-panel-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #e6e6e6;
    }

    .tenfit-header .mobile-search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #222;
        padding: 6px 0;
    }

    .tenfit-header .mobile-search__icon {
        background: none;
        border: 0;
        padding: 0;
        line-height: 0;
        cursor: pointer;
    }

    .tenfit-header .mobile-search__input {
        width: 100%;
        border: 0;
        outline: none;
        font-size: 16px;
        padding: 6px 0;
    }

    /* Contenido scrolleable del drawer */
    .tenfit-header .mobile-menu-inner {
        flex: 1 1 auto;
        min-height: 0;
        /* clave para que flex permita scroll */
        overflow-y: auto;
        overscroll-behavior-x: contain;
        padding-bottom: max(env(safe-area-inset-bottom), 12px);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        user-select: none;
        overscroll-behavior: contain;
        /* evita “rubber band” al body */
    }

    /* Carruseles horizontales (solo dentro del drawer) */
    .tenfit-header .collection-scroll-wrapper {
        overflow-x: hidden;
        padding-bottom: 10px;
    }

    .tenfit-header .collection-horizontal-scroll {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        padding: 0 10px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .tenfit-header .collection-horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    .tenfit-header .collection-card {
        min-width: 120px;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .tenfit-header .image-wrapper {
        position: relative;
        width: 120px;
        height: 160px;
        overflow: hidden;
    }

    .tenfit-header .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tenfit-header .collection-name {
        position: absolute;
        inset: auto 0 0 0;
        padding: 6px;
        font-size: 14px;
        font-weight: 500;
        background: rgba(0, 0, 0, .4);
        color: #fff;
        text-align: center;
    }

    .tenfit-header .scroll-bar-fake {
        height: 2px;
        background: #ddd;
        margin: 8px 10px 0;
    }

    .tenfit-header .mobile-menu-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        padding: 0 10px;
    }

    /* Acordeones */
    .tenfit-header .accordion-item {
        border-top: 1px solid #eee;
        margin: 0;
        padding: 0 10px;
    }

    .tenfit-header .accordion-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        padding: 16px 0;
        color: #333;
    }

    .tenfit-header .accordion-summary::-webkit-details-marker {
        display: none;
    }

    /* 1. Estado base de todas las flechas en el menú móvil */
    .accordion-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg) !important;
    display: inline-block;
    }

    /* 2. Rotación manual controlada por JS (Nivel 2 y 3) */
    .accordion-icon.rotate {
    transform: rotate(180deg) !important;
    }

    /* 3. Rotación para el Nivel 1 (Mujer, Hombre, Accesorios) */
    /* Cuando el contenedor tiene .is-pushed, las flechas del nivel 1 deberían resetearse 
    o esconderse, dependiendo de tu diseño. Si quieres que roten al abrir: */
    .accordion-item.is-open > .accordion-summary .accordion-icon {
    transform: rotate(180deg) !important;
    }

    /* 4. Asegurar que el contenido sea visible en Android al abrir */
    .sub-accordion-item[open] > .accordion-subsubmenu {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    }

    .tenfit-header .accordion-submenu {
        padding-left: 0;
        list-style: none;
        margin:15px
    }

    .tenfit-header .sub-accordion-item summary {
        cursor: pointer;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        padding: 0px;
        margin: 5px;
    }

    /* Fuerza a Safari a mostrar el contenido cuando el atributo open está presente */
    .tenfit-header .sub-accordion-item[open] .accordion-subsubmenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    }

    /* Evita que el clic sea bloqueado por elementos internos del summary */
    .tenfit-header .sub-accordion-summary * {
    pointer-events: none;
    }

    .tenfit-header .accordion-subsubmenu {
        padding-left: 16px;
        margin: 4px 0;
        list-style: none;
    }

    .tenfit-header .accordion-subsubmenu li a {
        font-size: 14px;
        padding: 4px 0;
        display: block;
    }

    /* Quick links */
    .tenfit-header .quick-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    .tenfit-header .quick-link-item {
        padding: 12px;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        font-size: 14px;
        color: #000;
        text-decoration: none;
        background: #fff;
    }

    .tenfit-header .quick-link-item:nth-child(2n) {
        border-right: none;
    }

    .tenfit-header .quick-link-item:nth-last-child(1),
    .tenfit-header .quick-link-item:nth-last-child(2) {
        border-bottom: none;
    }

    .tenfit-header .quick-link-item:hover {
        background: #f7f7f7;
    }

    /* ========= PUSH PANEL (ocupa el área y muestra "Volver") ========= */

    /* el contenedor que maneja el estado */
    .tenfit-header [data-mobile-list] {
        position: relative;
    }
    .mobile-menu-panel {
  -webkit-overflow-scrolling: touch;
}

    /* compat: por si el tema hace stacking raro en summary */
    .tenfit-header .accordion-item.pushable>summary {
        position: relative;
        z-index: 1;
    }

    /* ---------------- Visibilidad base y en modo push ---------------- */

    /* BASE: lista plana -> NO mostrar panel/submenú del details */
    .tenfit-header [data-mobile-list] .accordion-item.pushable>.accordion-panel,
    .tenfit-header [data-mobile-list] .accordion-item.pushable>.accordion-panel>.accordion-submenu {
        display: none;
    }

    /* Cuando está empujado y el <details> está abierto, muestra el panel y su ul */
    .tenfit-header .mobile-menu-panel .mobile-menu-inner [data-mobile-list].is-pushed>.accordion-item.pushable.is-open>.accordion-panel {
        display: block !important;
    }

    .tenfit-header .mobile-menu-panel .mobile-menu-inner [data-mobile-list].is-pushed>.accordion-item.pushable.is-open>.accordion-panel>.accordion-submenu {
        display: block !important;
    }

    /* MODO PUSH: ocultar hermanos del abierto */
    .tenfit-header [data-mobile-list].is-pushed>.accordion-item:not(.is-open) {
        display: none !important;
    }

    /* MODO PUSH: mostrar SIEMPRE el contenido del item abierto */
    .tenfit-header [data-mobile-list].is-pushed>.accordion-item.pushable.is-open {
        display: block !important;
    }

    .tenfit-header [data-mobile-list].is-pushed>.accordion-item.pushable.is-open>.accordion-panel {
        display: block !important;
    }

    .tenfit-header [data-mobile-list].is-pushed>.accordion-item.pushable.is-open>.accordion-panel>.accordion-submenu {
        display: block !important;
    }

    /* algo de aire dentro del panel */
    .tenfit-header .accordion-item.pushable>.accordion-panel {
        padding: 0 10px 12px;
    }

    /* ---------------- Botón VOLVER (fila sticky) ---------------- */
    .tenfit-header .push-back-row {
        display: none;
        /* solo en modo push */
        width: 100%;
        align-items: center;
        gap: 4px;
        padding: 5px 0px;
        background: #fff;
        border: 0;
        border-bottom: 1px solid #e6e6e6;
        color: #333;
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .tenfit-header [data-mobile-list].is-pushed .accordion-item.is-open .push-back-row {
        display: inline-flex !important;
    }

    /*bonos*/
    .tenfit-header .mobile-giftcards {
        padding: 0 0 6px;
    }

    /* tarjeta y carrusel heredan de tus clases horizontales */
    .tenfit-header .mobile-giftcards .collection-horizontal-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding: 0 10px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .tenfit-header .mobile-giftcards .collection-horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    .tenfit-header .mobile-giftcards .giftcard-card {
        flex: 0 0 auto !important;
        min-width: 180px !important;
        /* más altas y delgadas como la referencia */
        max-width: 180px !important;
        scroll-snap-align: start;
    }

    .tenfit-header .mobile-giftcards .giftcard-image-wrapper {
        width: 180px;
        height: 240px;
        /* relación vertical */
        /* border-radius: 12px; */
        overflow: hidden;
        background: #f4f4f4;
    }

    .tenfit-header .mobile-giftcards .giftcard-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .tenfit-header .mobile-giftcards .giftcard-info {
        margin-top: 8px;
        line-height: 1.25;
    }

    .tenfit-header .mobile-giftcards .giftcard-title {
        font-size: 13px;
        color: #111;
        margin-bottom: 2px;
    }

    .tenfit-header .mobile-giftcards .giftcard-price {
        font-weight: 700;
        font-size: 13px;
    }

    /*fin bonos*/

    /*Sale*/
    /* === SALE · Mobile (dentro del drawer) === */

    /* Asegura layout vertical y neutraliza estilos anteriores */
    .tenfit-header .accordion-panel .mobile-sale {
            padding: 0 10px 4px;
        }

        /* "Ver todo" estilo título-link (sin caja) */
        .tenfit-header .accordion-panel .mobile-sale .mobile-view-all-btn {
            display: block !important;
            margin: 6px 0 10px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #111;
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
        }

        .tenfit-header .accordion-panel .mobile-sale .mobile-view-all-btn:active {
            opacity: .7;
        }

        /* Hombre / Mujer como líneas de texto (no chips) */
        .tenfit-header .accordion-panel .mobile-sale .mobile-menu-gender {
            display: block !important;
            margin: 0 0 12px;
        }

        .tenfit-header .accordion-panel .mobile-sale .mobile-menu-gender .gender-link {
            display: block;
            padding: 6px 0;
            border: 0;
            background: transparent;
            color: #555;
            font-size: 14px;
            text-decoration: none;
        }

        .tenfit-header .accordion-panel .mobile-sale .mobile-menu-gender .gender-link:active {
            color: #000;
        }

        /* Título “Recomendados” */
        .tenfit-header .accordion-panel .mobile-sale .mobile-menu-title {
            font-size: 16px;
            font-weight: 700;
            margin: 10px 0 10px;
            padding: 0;
        }

        /* Carrusel horizontal (usa tus clases globales de scroll) */
        .tenfit-header .accordion-panel .mobile-sale .collection-scroll-wrapper {
            overflow-x: hidden;
            padding-bottom: 8px;
        }

        .tenfit-header .accordion-panel .mobile-sale .collection-horizontal-scroll {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 14px;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            padding: 0 2px 0 0;
            /* respiro a la derecha */
            overscroll-behavior-x: contain;
            scrollbar-width: none;
        }

        .tenfit-header .accordion-panel .mobile-sale .collection-horizontal-scroll::-webkit-scrollbar {
            display: none;
        }

        /* Card de producto (más alta y un poco más delgada, como ref.) */
        .tenfit-header .accordion-panel .mobile-sale .product-sale-card {
            flex: 0 0 auto !important;
            min-width: 170px !important;
            max-width: 170px !important;
            scroll-snap-align: start;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .image-wrapper {
            width: 170px;
            height: 220px;
            /* alto ↑, ancho contenido */
            border-radius: 10px;
            overflow: hidden;
            background: #f7f7f7;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Precios */
        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .price-wrap {
            margin-top: 6px;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .price-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .price-row .old {
            text-decoration: line-through;
            color: #a3a7ad;
            font-size: 12px;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .price-row .now {
            color: #111;
            font-weight: 700;
            font-size: 14px;
        }

        .tenfit-header .accordion-panel .mobile-sale .product-sale-card .price-row .pct {
            color: #e53935;
            font-weight: 700;
            font-size: 12px;
        }

        /* Falsa barrita de scroll al estilo de tu UI */
        .tenfit-header .accordion-panel .mobile-sale .scroll-bar-fake {
            height: 2px;
            background: #ddd;
            margin: 8px 0 0;
        }

        /* Fix por si algún .mobile-only heredó inline-flex dentro del panel */
        .tenfit-header .mobile-menu-panel .mobile-menu-inner .accordion-panel .mobile-sale.mobile-only {
            display: block !important;
            width: 100%;
        }

    /*Fin Sale*/

    /* transiciones suaves solo si el usuario NO prefiere menos movimiento */
    @media (prefers-reduced-motion: no-preference) {

        .tenfit-header [data-mobile-list],
        .tenfit-header [data-mobile-list] .accordion-item .accordion-panel {
            transition: opacity .18s ease;
        }

        .tenfit-header [data-mobile-list].is-pushed .accordion-item.is-open .accordion-panel {
            opacity: 1;
        }
    }
}


/* ==========================================================================
   10.17 — TABLET (768–1280px)
   Este rango usa el drawer móvil. Las cards de los carruseles eran de tamaño
   teléfono (120–160px) y en pantalla ancha se veían diminutas y perdidas.
   Aquí solo se agrandan; el resto del drawer se hereda del bloque móvil.
   Bloque ADITIVO (antes no había nada para este rango) — ajustar valores en preview.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1280px) {

    /* Carruseles "Recomendados" dentro del acordeón */
    .tenfit-header .accordion-panel .collection-card,
    .tenfit-header .mobile-menu-inner .grupo .collection-card {
        min-width: 200px !important;
        max-width: 200px !important;
        width: 200px !important;
    }
    .tenfit-header .accordion-panel .image-wrapper,
    .tenfit-header .mobile-menu-inner .grupo .image-wrapper {
        width: 200px;
        height: 270px;
    }

    /* Carrusel base (categorías) */
    .tenfit-header .collection-card {
        min-width: 180px;
    }
    .tenfit-header .image-wrapper {
        width: 180px;
        height: 240px;
    }

    /* Bonos / Sale */
    .tenfit-header .mobile-giftcards .giftcard-image-wrapper {
        width: 220px;
        height: 290px;
    }
    .tenfit-header .accordion-panel .mobile-sale .product-sale-card .image-wrapper {
        width: 210px;
        height: 280px;
    }
}


/* TENFIT · Ajustes para pantallas 1440–1599px */
@media (min-width:1440px) and (max-width:1599px) {

    /* Header en 3 columnas (menú izq / logo centro / iconos der) */
    .tenfit-header .header-inner {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* Menú sin recortes (permite que el mega caiga fuera) */
    .main-menu {
        grid-column: 1;
        display: flex;
        flex-wrap: nowrap;
        overflow: visible !important;
    }

    .menu-item>a {
        font-size: 15px;
        margin: 0 10px;
        padding: 6px 2px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Logo realmente centrado */
    .logo-center {
        justify-self: center;
        display: inline-flex !important;
    }

    .logo-center img {
        max-height: 25px;
    }

    /* Iconos a la derecha */
    .nav-right {
        grid-column: 3;
        justify-content: flex-end;
        gap: 14px;
    }

    .menu-column-left {

        width: 370px;

    }

    .tenfit-header .essentials-groups-nav {
        gap: 0.5rem;
    }

    .tenfit-header .essentials-groups-nav .essentials-group {
        min-width: 190px;
    }

    .tenfit-header .essentials-column-right {
        gap: 3rem;
    }

    .tenfit-header .essentials-column-left {
        gap: 10px;
    }

    .tenfit-header .essentials-banner img {
        height: 180px;
    }

    .tenfit-header .accessories-column-products {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .tenfit-header .accessories-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.5rem;
    }

    .tenfit-header .sale-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.5rem;
    }

}


/*aqui*/
/* === CART DRAWER SIEMPRE ENCIMA DEL HEADER/MEGAMENÚ === */

/* backdrop / overlay del carrito */
.m-cart-drawer__backdrop,
.m-cart-backdrop,
[data-cart-backdrop],
.m-cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-cart-backdrop) !important;
}

/* panel del carrito */
#m-cart-drawer,
.m-cart-drawer,
.cart-drawer,
.shopify-section-cart-drawer,
[data-cart-drawer] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: var(--z-cart-drawer) !important;
}

/* por si el tema usa un contenedor interno para el panel */
.m-cart-drawer .m-cart-drawer__panel,
.cart-drawer .drawer,
.m-cart__drawer,
#cart-drawer {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-cart-drawer) + 1) !important;
}

/* el icono/burbuja puede quedarse normal */
.m-cart-icon-bubble {
    position: relative;
}


/* rebanada 3: z-index de los paneles del mega — solo desktop (en móvil están ocultos) */
@media (min-width: 1281px) {
    .mega-menu,
    .tenfit-header .mega-menu-essentials-wrapper,
    .tenfit-header .mega-menu-accessories-wrapper,
    .tenfit-header .mega-menu-sale-wrapper {
        z-index: var(--z-mega);
    }
}


/*fin*/


/*adaptacion*/
/* --- Desktop COMPACTO cuando el viewport es 1600↓ y 1400↓ --- */
@media (max-width: 1600px) {
    .tenfit-header .menu-item>a {
        /* menos aire cuando se reduce el viewport por escala/zoom */
        margin: 0 10px;
        font-size: clamp(14px, 1.05vw, 18px);
    }

    .tenfit-header .nav-right {
        gap: 8px;
    }

    .tenfit-header {
        padding-inline: 18px;
    }

    .tenfit-header .logo-center img {
        max-height: 30px;
    }

    .tenfit-header .mega-menu-products .product-card {
        width: auto; /* el grid de .mega-menu-products controla el ancho (opción A) */
        text-align: center;
    }

    /* .essentials-promo-row usa el grid auto-fit de la regla base -> aquí no forzamos nada */
    .tenfit-header .essentials-promo-card {
        min-width: 0;
    }
}

@media (max-width: 1400px) {
    .tenfit-header .menu-item>a {
        margin: 0 8px;
        font-size: clamp(13px, 1vw, 17px);
    }

    .tenfit-header .nav-right {
        gap: 6px;
    }

    .tenfit-header {
        padding-inline: 14px;
    }

    .tenfit-header .logo-center img {
        max-height: 28px;
    }

    .tenfit-header .mega-menu-products .product-card {
        width: auto; /* el grid de .mega-menu-products controla el ancho (opción A) */
        text-align: center;
    }

    /* .essentials-promo-row usa el grid auto-fit de la regla base -> aquí no forzamos nada */
    .tenfit-header .essentials-promo-card {
        min-width: 0;
    }
}


/* Habilita container queries en el header */
.tenfit-header {
    container-type: inline-size;
}

/* Cuando el header tenga poco ancho disponible, compacta */
@container (max-width: 1500px) {
    .tenfit-header .menu-item>a {
        margin: 0 10px;
        font-size: clamp(14px, 1.05cqi, 18px);
    }

    .tenfit-header .mega-menu-products .product-card {
        width: auto; /* el grid de .mega-menu-products controla el ancho (opción A) */
        text-align: center;
    }

    .tenfit-header .essentials-product-card img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        border-radius: 4px;
    }

    .tenfit-header .essentials-banner img { 
        width: 100%; 
        height: 160px; 
        object-fit: cover; 
        display: block; 
        border-radius: 12px; 
    }

    .tenfit-header .accessories-products-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
        gap: 1.5rem; 
    }

    .tenfit-header .sale-products-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
        gap: 1.5rem; 
    }
}

@container (max-width: 1320px) {
    .tenfit-header .mega-menu-products .product-card {
        width: auto; /* grid (opción A) */
    }

    .tenfit-header .essentials-promo-card {
        min-width: 0;
    }
}


/*fin adaptacion */


/* Hotfix: evita que estilos del menú afecten el resto del sitio */
:not(.tenfit-header) .image-wrapper,
:not(.tenfit-header) .image-wrapper img,
:not(.tenfit-header) .collection-card,
:not(.tenfit-header) .collection-horizontal-scroll,
:not(.tenfit-header) .collection-name,
:not(.tenfit-header) .scroll-bar-fake {
    all: unset;
}