/** Shopify CDN: Minification failed

Line 683:50 Expected "}" to go with "{"

**/
/* ============================================================
   VARPA — component-header-custom.css
   Header + Menú full-page estilo ZARA · SOLO DESKTOP (>=990px)
   Fondo BLANCO. En móvil este archivo no aplica nada (el menú
   móvil sigue con component-menu-drawer.css, sin alterar).
   ============================================================ */

/* El bloque desktop (zmenu full-page) sigue oculto fuera de escritorio */
.zmenu { display: none; }

/* ===== HAMBURGUESA -> X en TODOS los breakpoints (mismo icono, se transforma sin moverse) ===== */
.header__icon--menu > span > svg { display: none !important; }

.ham-desktop {
  display: block !important;
    position: relative;
      width: 14px;
        height: 14px;
        }

        .ham-desktop i {
          position: absolute;
            left: 0;
              top: 50%;
                width: 14px;
                  height: 1.5px;
                    background: currentColor;
                      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                        transform-origin: center;
                        }

                        .ham-desktop i:nth-child(1) { transform: translateY(-3.5px); }
                        .ham-desktop i:nth-child(2) { transform: translateY(3.5px); }

                        .menu-drawer-container.menu-opening .ham-desktop i:nth-child(1) {
                          transform: translateY(0) rotate(45deg);
                          }
                          .menu-drawer-container.menu-opening .ham-desktop i:nth-child(2) {
                            transform: translateY(0) rotate(-45deg);
                            }

@media screen and (min-width: 990px) {

  :root {
    --vh-ink:   #111111;
    --vh-light: #ffffff;
    --vh-muted: rgba(0, 0, 0, 0.55);
    --vh-line:  rgba(0, 0, 0, 0.12);
    --vh-ease:  cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ==========================================================
     HEADER — transparente sobre el hero, blanco al hacer scroll
     ========================================================== */
  .header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    background: #fff !important;
    border-bottom: 0 !important;
    transition: background 0.3s var(--vh-ease), border-color 0.3s var(--vh-ease);
  }

  .shopify-section-header-sticky.scrolled-past-header .header-wrapper,
  .shopify-section-header-sticky.shopify-section-header-hidden .header-wrapper {
    position: fixed !important;
    top: 0 !important;
    width: 100%;
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .section-header {
    position: sticky !important;
    top: 0;
    z-index: 9999 !important;
  }

  /* ==========================================================
     LAYOUT — 3 columnas, logo centrado de verdad
     ========================================================== */
  .header.drawer-menu {
    grid-template-areas: 'navigation heading icons' !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 0 !important;
    align-items: center;
  }

  .header.drawer-menu .header__heading,
  .header.drawer-menu .header__heading-link {
    grid-area: heading;
    justify-self: center !important;
    left: auto !important;
    margin: 0 !important;
    text-align: center;
  }

  header-drawer {
    grid-area: navigation;
    justify-self: start;
    margin-left: 0;
  }

  .header__icons {
    grid-area: icons;
    justify-self: end;
    margin-right: 0;
    gap: 4px;
  }

  /* ==========================================================
     ICONOS — finos y pequeños (editorial)
     ========================================================== */
  .header__icon {
    width: 4rem !important;
    height: 4rem !important;
    color: inherit;
  }

  .header__icon .svg-wrapper {
    width: 4rem;
    height: 4rem;
  }

  .header__icon--search .svg-wrapper svg,
  .header__icon--account .svg-wrapper svg,
  .header__icon--cart .svg-wrapper svg {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    stroke-width: 1.25 !important;
    display: block !important;
    overflow: visible;
  }

  .header__icon--cart .svg-wrapper svg {
    transform: translateY(1px);
  }

    .header__icon--cart .svg-wrapper svg {
        width: 22px !important;
            height: 22px !important;
                min-width: 22px !important;
                    min-height: 22px !important;
                      }

  /* ==========================================================
     COLORES HEADER — claro sobre hero, oscuro al hacer scroll
     ========================================================== */
  .header__icon,
  .header__icon .svg-wrapper svg,
  .header__heading-link,
  .header__heading-link .h2 {
    color: var(--vh-ink) !important;
    stroke: var(--vh-ink) !important;
    fill: none !important;
    transition: color 0.3s var(--vh-ease), stroke 0.3s var(--vh-ease);
  }

  .shopify-section-header-sticky.scrolled-past-header .header__icon,
  .shopify-section-header-sticky.scrolled-past-header .header__icon .svg-wrapper svg,
  .shopify-section-header-sticky.scrolled-past-header .header__heading-link,
  .shopify-section-header-sticky.scrolled-past-header .header__heading-link .h2,
  .shopify-section-header-sticky.shopify-section-header-hidden .header__icon,
  .shopify-section-header-sticky.shopify-section-header-hidden .header__icon .svg-wrapper svg,
  .shopify-section-header-sticky.shopify-section-header-hidden .header__heading-link,
  .shopify-section-header-sticky.shopify-section-header-hidden .header__heading-link .h2 {
    color: var(--vh-ink) !important;
    stroke: var(--vh-ink) !important;
  }

  .cart-count-bubble span { stroke: none !important; }

  /* ==========================================================
     HAMBURGUESA -> X  (dos barras que se cruzan al abrir)
     ========================================================== */
  /* ocultar la hamburguesa móvil (svg de dos líneas) y la X nativa */
  .header__icon--menu > span > svg { display: none !important; }

  /* barras desktop */
  .ham-desktop {
    display: block !important;
    position: relative;
    width: 34px;
    height: 16px;
  }

  .ham-desktop i {
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.4s var(--vh-ease);
    transform-origin: center;
  }
  /* cerradas: 8px de separación, centradas (líneas equidistantes del centro) */
  .ham-desktop i:nth-child(1) { transform: translateY(-4px); }
  .ham-desktop i:nth-child(2) { transform: translateY(4px); }

  /* color de las barras según el header (claro sobre hero / oscuro al scroll) */
  .header__icon--menu { color: var(--vh-ink) !important; display: flex !important; align-items: center !important; justify-content: center !important; }

  .shopify-section-header-sticky.scrolled-past-header .header__icon--menu,
  .shopify-section-header-sticky.shopify-section-header-hidden .header__icon--menu {
    color: var(--vh-ink) !important;
  }

  /* al ABRIR (ligado a .menu-opening => revierte al instante al cerrar):
     ambas barras van al centro a la vez (simétrico, sin deslizar feo) y se
     cruzan en X perfecta */
  .menu-drawer-container.menu-opening .ham-desktop i:nth-child(1) {
    transform: translateY(0) rotate(45deg);
  }
  .menu-drawer-container.menu-opening .ham-desktop i:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
  }

  /* X y barras SIEMPRE oscuras cuando el menú está abierto (van sobre blanco) */
  .header-wrapper:has(.menu-drawer-container[open]) .header__icon--menu {
    color: var(--vh-ink) !important;
    position: relative;
    z-index: 60;
  }

  /* Con el menú abierto ocultamos el logo central y los iconos del header
     (el menú full-page los cubre; dentro del menú añadimos el logo propio) */
  .header-wrapper:has(.menu-drawer-container[open]) .header__heading,
  .header-wrapper:has(.menu-drawer-container[open]) .header__icons {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ==========================================================
     DRAWER — full-page BLANCO con aparición progresiva (fade)
     ========================================================== */
  /* sin overlay/franja gris detrás en desktop
     (base.css lo crea con .header__icon--menu[aria-expanded]::before) */
  menu-drawer > details[open] > summary::before,
  menu-drawer > details > summary::before,
  header-drawer details > summary::before,
  .header__icon--menu::before,
  .header__icon--menu[aria-expanded="true"]::before {
    display: none !important;
    content: none !important;
  }

  .menu-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #fff !important;
    border: 0 !important;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    z-index: 50 !important;
    /* sin barra de scroll visible (quitar el "coso lateral") */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    transition: opacity 0.4s var(--vh-ease), visibility 0s linear 0.4s !important;
  }

  .menu-drawer::-webkit-scrollbar { display: none !important; }

  .js details[open].menu-opening > .menu-drawer {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.45s var(--vh-ease) !important;
  }

  .menu-drawer__inner-container,
  .menu-inner {
    background: #fff !important;
  }

  /* ocultar TODO el markup móvil en desktop, mostrar solo zmenu */
  .menu-inner .menu-topbar,
  .menu-inner .section-collections,
  .menu-inner .section-list,
  .menu-inner .section-footer {
    display: none !important;
  }

  .menu-inner {
    display: block !important;
    padding: 0 !important;
    min-height: 0;
  }

  .menu-inner .zmenu { display: grid !important; }

  /* ==========================================================
     ZMENU — distribución en columnas (madres | centro | imágenes)
     ========================================================== */
  .zmenu {
    grid-template-columns: minmax(220px, 280px) minmax(360px, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 48px;
    row-gap: 40px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 52px clamp(40px, 4vw, 72px) 44px;
    align-items: start;
    box-sizing: border-box;
    min-height: 100vh;
  }

  /* ---- LOGO de la tienda (fila 1, izquierda — como Zara) ---- */
  .zmenu__brand {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: start;
    margin-top: 10px;
  }
  .zmenu__brand img {
    display: block;
    width: clamp(180px, 17vw, 250px);
    height: auto;
  }
  .zmenu__brand-txt {
    font-family: var(--font-heading-family);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--vh-ink);
  }

  /* ---- IZQUIERDA: categorías madre (fila 2, empujadas hacia abajo) ---- */
  .zmenu__mothers {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .zmother {
    position: relative;
    display: block;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 3px 0 3px 24px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }

  .zmother__dot {
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--vh-ink);
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
    transition: opacity 0.25s var(--vh-ease), transform 0.25s var(--vh-ease);
  }

  .zmother__txt {
    font-family: var(--font-heading-family);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: var(--vh-ink);
    transition: opacity 0.2s var(--vh-ease);
  }

  .zmother:hover .zmother__txt { opacity: 0.55; }

  .zmother.is-active .zmother__dot {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .zmother.is-active .zmother__txt { opacity: 1; }

  /* ---- CENTRO: paneles que cambian al hacer click (fila 2) ---- */
  .zmenu__panels {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    min-height: 300px;
    padding-top: 6px;
  }

  .zpanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0 64px;
    align-items: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.32s var(--vh-ease), transform 0.32s var(--vh-ease), visibility 0s linear 0.32s;
  }

  .zpanel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.32s var(--vh-ease), transform 0.32s var(--vh-ease);
  }

  /* etiqueta numerada |01| COLECCIÓN */
  .zpanel__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 9px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vh-muted);
    white-space: nowrap;
  }

  .zpanel__num {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--vh-muted);
  }
  .zpanel__num::before { content: "|"; margin-right: 4px; }
  .zpanel__num::after  { content: "|"; margin-left: 4px; }

  .zpanel__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .zpanel__link {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    padding: 9px 0;
    transition: color 0.2s var(--vh-ease), padding-left 0.2s var(--vh-ease);
  }

  .zpanel__link:hover {
    color: #000;
    padding-left: 6px;
  }

  /* ---- DERECHA: imágenes de colección (2x2) — fila del cuerpo ---- */
  .zmenu__images {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(2, 165px);
    gap: 18px 18px;
  }

  .zimg {
    text-decoration: none;
    display: block;
  }

  .zimg__frame {
    display: block;
    width: 165px;
    height: 225px;
    overflow: hidden;
    background: #f3f3f3;
  }

  .zimg__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--vh-ease);
  }

  .zimg:hover .zimg__frame img { transform: scale(1.04); }

  .zimg__label {
    display: block;
    margin-top: 9px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vh-ink);
  }

  /* ---- ARRIBA-DERECHA: utilidades (buscar / carrito / iniciar sesión) ---- */
  .zmenu__utils {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 13px;
    padding-top: 4px;
  }

  .zutil {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vh-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    transition: color 0.2s var(--vh-ease);
  }

  .zutil:hover { color: var(--vh-muted); }

  .zutil--search {
    border-bottom: 1px solid var(--vh-ink);
    padding-bottom: 6px;
    min-width: 210px;
    margin-bottom: 6px;
  }

  .zutil__bag {
    width: 15px;
    height: 15px;
    display: block;
    flex: 0 0 auto;
  }

  /* ---- ABAJO-IZQUIERDA: contacto + localizar + políticas ---- */
  .zmenu__footer {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 8px;
  }

  .zfoot {
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vh-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--vh-ease);
  }

  .zfoot:hover { color: var(--vh-ink); }

  /* ==========================================================
     APARICIÓN PROGRESIVA al abrir (cascada suave)
     ========================================================== */
  .menu-drawer-container.menu-opening .zmother,
  .menu-drawer-container.menu-opening .zmenu__images .zimg,
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link {
    opacity: 0;
    animation: zRise 0.55s var(--vh-ease) forwards;
  }

  .menu-drawer-container.menu-opening .zmother:nth-child(1) { animation-delay: 0.10s; }
  .menu-drawer-container.menu-opening .zmother:nth-child(2) { animation-delay: 0.15s; }
  .menu-drawer-container.menu-opening .zmother:nth-child(3) { animation-delay: 0.20s; }
  .menu-drawer-container.menu-opening .zmother:nth-child(4) { animation-delay: 0.25s; }
  .menu-drawer-container.menu-opening .zmother:nth-child(5) { animation-delay: 0.30s; }

  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(1) { animation-delay: 0.22s; }
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(2) { animation-delay: 0.27s; }
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(3) { animation-delay: 0.32s; }
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(4) { animation-delay: 0.37s; }
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(5) { animation-delay: 0.42s; }
  .menu-drawer-container.menu-opening .zpanel.is-active .zpanel__link:nth-child(6) { animation-delay: 0.47s; }

  .menu-drawer-container.menu-opening .zimg:nth-child(1) { animation-delay: 0.24s; }
  .menu-drawer-container.menu-opening .zimg:nth-child(2) { animation-delay: 0.30s; }
  .menu-drawer-container.menu-opening .zimg:nth-child(3) { animation-delay: 0.36s; }
  .menu-drawer-container.menu-opening .zimg:nth-child(4) { animation-delay: 0.42s; }

  @keyframes zRise {
    to { opacity: 1; transform: none; }
  }
}

/* Reduce motion — solo desktop */
@media screen and (min-width: 990px) and (prefers-reduced-motion: reduce) {
  .menu-drawer,
  .zmother,
  .zimg,
  .zpanel__link,
  .ham-desktop i {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   CARRITO LATERAL por encima del menú full-page (solo desktop)
   El menú va a z-index 50 dentro de .section-header (z-index 9999);
   subimos el cajón del carrito por encima para que abra SOBRE el menú.
   ============================================================ */
@media screen and (min-width: 990px) {
  cart-drawer,
  cart-drawer .cart-drawer,
  cart-drawer .cart-drawer__overlay,
  cart-drawer .drawer__inner {
    z-index: 10001 !important;
  }
}

/* ============================================================
   SCROLL DE LA PÁGINA — ocultar la barra en toda la web (desktop).
   El scroll sigue funcionando (rueda/trackpad); solo se oculta la
   barra visible. Anula también la barra personalizada de base.css.
   ============================================================ */
@media screen and (min-width: 990px) {
  html,
  body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}


/* Tamaño del carrito — unificado mobile y desktop */
.header__icon--cart .svg-wrapper svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2 !important;
}

/* Contador del carrito — reposicionado arriba a la derecha del icono (24px) para que no se solape ni se vean caracteres sueltos */
.header__icon--cart {
  position: relative !important;
  }
  .header__icon--cart .cart-count-bubble {
    position: absolute !important;
      top: 4px !important;
        right: 2px !important;
          left: auto !important;
            bottom: auto !important;
              width: 16px !important;
                height: 16px !important;
                  min-width: 16px !important;
                    min-height: 16px !important;
                      font-size: 9px !important;
                        line-height: 1 !important;