/* =========================================================
   WALON UI — Header, mega-menú, buscador y footer
   Namespace .wln-* para no chocar con Astra / Elementor / Woo.
   ========================================================= */

:root{
  /* El sitio es de diseño claro. Sin esto, el "tema oscuro automático" de
     Chrome en Android invierte los colores y el header sale negro. */
  color-scheme: light;

  --wln-ink:#0a0a0a;
  --wln-ink-soft:#5b5b5b;
  --wln-paper:#ffffff;
  --wln-panel:#f4f4f2;
  --wln-line:#e3e3e0;
  --wln-yellow:#F2D93B;
  --wln-sale:#8a3b2b;
  --wln-sale-soft:#f5e7e2;
  --wln-head: var(--w-font-head, "Shapiro", system-ui, sans-serif);
  --wln-body: var(--w-font-body, "Neusa Next Pro", system-ui, sans-serif);
  --wln-header-h: 118px;
}

/* ---------- restos del header/footer/buscador anteriores ---------- */
body.wln-ui-active #masthead,
body.wln-ui-active #colophon,
body.wln-ui-active #walon-mheader,
body.wln-ui-active #walon-mheader-spacer,
body.wln-ui-active #walon-mnav-viewport,
body.wln-ui-active #ast-mobile-popup-wrapper,
body.wln-ui-active .ast-mobile-header-wrap,
body.wln-ui-active .ast-mobile-popup-drawer,
body.wln-ui-active .dgwt-wcas-search-wrapp{
  display:none !important;
}

/* ---------- reset acotado a nuestros componentes ----------
   Va dentro de :where() a propósito: así tiene especificidad 0 y cualquier
   regla nuestra de más abajo le gana sin necesidad de !important. Sin esto,
   ".wln-footer a{color:inherit}" pisaba colores puntuales (el botón "Únete"
   quedaba gris sobre blanco) y ".wln-footer svg{display:block}" hacía
   aparecer en desktop los chevrons que son solo de mobile. */
:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch){
  font-family: var(--wln-body);
  color: var(--wln-ink);
}
.wln-header, .wln-footer, .wln-mnav, .wln-msearch{ box-sizing:border-box; }
.wln-header *, .wln-footer *, .wln-mnav *, .wln-msearch *{ box-sizing: border-box; }

:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch) ul{ list-style:none; margin:0; padding:0; }
:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch) a{
  text-decoration:none; color:inherit; box-shadow:none; border:0;
}
:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch) a:hover{ text-decoration:none; box-shadow:none; }
:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch) button{
  font-family:inherit; background:none; border:0; padding:0; margin:0;
  color:inherit; cursor:pointer; text-align:left;
}
:where(.wln-header, .wln-footer, .wln-mnav, .wln-msearch) svg{ display:block; }
:where(.wln-header, .wln-footer) img{ max-width:100%; height:auto; }

/* Astra le pinta fondo y color (normalmente a blanco) a <button> en
   :hover/:focus/:active con selectores de especificidad real — el reset de
   arriba va en :where() (especificidad 0) a propósito para no pisar colores
   puntuales nuestros, pero por eso mismo pierde contra Astra en esos
   estados.
   A PROPÓSITO es una lista explícita, no "todo <button> dentro de estos
   contenedores": un intento anterior así de genérico le quitó también el
   fondo negro/borde a propósito al input y botón de "Suscribirme" del
   newsletter, que sí tienen diseño propio con esos mismos valores. Cada
   ítem de esta lista es un botón "utilitario" (ícono suelto, sin fondo
   propio) donde Astra puso un fondo que nunca debió estar. */
.wln-burger, .wln-fcol__toggle, .wln-msearch__back, .wln-mnav__back, .wln-mnav__row:not([href$="/dias-walon/"]),
.wln-sr__plainrow, .wln-sr__chip, .wln-sr__link, .wln-searchbar__clear, .wln-action--searchm,
.wln-burger:hover, .wln-fcol__toggle:hover, .wln-msearch__back:hover, .wln-mnav__back:hover, .wln-mnav__row:not([href$="/dias-walon/"]):hover,
.wln-sr__plainrow:hover, .wln-sr__chip:hover, .wln-sr__link:hover, .wln-searchbar__clear:hover, .wln-action--searchm:hover,
.wln-burger:focus, .wln-fcol__toggle:focus, .wln-msearch__back:focus, .wln-mnav__back:focus, .wln-mnav__row:not([href$="/dias-walon/"]):focus,
.wln-sr__plainrow:focus, .wln-sr__chip:focus, .wln-sr__link:focus, .wln-searchbar__clear:focus, .wln-action--searchm:focus,
.wln-burger:active, .wln-fcol__toggle:active, .wln-msearch__back:active, .wln-mnav__back:active, .wln-mnav__row:not([href$="/dias-walon/"]):active,
.wln-sr__plainrow:active, .wln-sr__chip:active, .wln-sr__link:active, .wln-searchbar__clear:active, .wln-action--searchm:active{
  background:none !important; color:inherit !important;
}
/* "Días Walon" queda fuera del reset de arriba a propósito: ese reset fuerza
   color:inherit !important, que le gana al color animado (los valores que
   genera una animación CSS siempre pierden contra un !important estático,
   sin importar la especificidad del selector de la animación). */
/* Acotado a los inputs del buscador (no a TODOS los inputs de header/footer/
   mnav): un intento anterior de esta misma regla era genérico y de paso le
   quitó el borde a propósito al campo de newsletter del footer, que sí
   necesita su borde negro visible (ver .wln-news__form input). */
.wln-searchbar input, .wln-msearch__box input,
.wln-searchbar input:hover, .wln-msearch__box input:hover,
.wln-searchbar input:focus, .wln-msearch__box input:focus{
  background:#fff !important; color:var(--wln-ink) !important;
  /* El borde visible lo pone el contenedor (.wln-msearch__box, .wln-searchbar),
     no el <input> — si no, Astra le agrega su propio borde punteado de
     "campo con error"/validación nativa y se ven dos bordes distintos. */
  border:0 !important; outline:0 !important; box-shadow:none !important;
}

.wln-skip{
  position:absolute; left:-9999px; top:0; z-index:100000;
  background:#000; color:#fff; padding:10px 16px;
}
.wln-skip:focus{ left:0; }

/* =========================================================
   HEADER
   ========================================================= */
.wln-header{
  position:relative; z-index:900; background:var(--wln-paper);
}

/* Sticky solo al subir: al bajar se va, para no robar pantalla mientras
   el cliente recorre el catálogo. */
.wln-header__main{ position:relative; }
.wln-header.is-stuck .wln-header__main{
  position:fixed; top:0; left:0; right:0; z-index:930;
  background:var(--wln-paper); box-shadow:0 6px 22px rgba(0,0,0,.09);
  animation:wlnDrop .2s ease;
}
body.admin-bar .wln-header.is-stuck .wln-header__main{ top:32px; }
body.admin-bar .wln-msearch{ top:32px; }
/* La barra de admin de WordPress mide 46px en mobile (no 32px como en
   desktop) y tiene z-index altísimo: sin este offset, tapa el botón
   "Cerrar" del buscador full-screen y queda inaccesible para cualquier
   usuario logueado (admin/staff) que pruebe la web desde el celular. Va
   después de las reglas de 32px para ganarles en mobile (misma
   especificidad, gana la última declarada). */
@media (max-width:782px){
  body.admin-bar .wln-header.is-stuck .wln-header__main{ top:46px; }
  body.admin-bar .wln-msearch{ top:46px; }
}
@keyframes wlnDrop{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .wln-header.is-stuck .wln-header__main{ animation:none; }
}

/* El header ocupa todo el ancho de la pantalla: el margen lateral crece con
   la pantalla en vez de dejar franjas blancas en monitores grandes. */
.wln-topbar{ background:var(--wln-ink); color:#e6e6e6; }
.wln-topbar__inner{
  padding:9px clamp(18px, 2.2vw, 48px);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; text-align:center; flex-wrap:wrap;
}
.wln-topbar__link{ color:#fff; text-decoration:underline !important; }
.wln-topbar__link:hover{ color:#bbb; }

.wln-header__main{ border-bottom:1px solid var(--wln-line); }
.wln-header__inner{ padding:0 clamp(18px, 2.2vw, 48px); }

/* La línea va en la fila (ancho completo), no en el contenido con padding:
   así llega de borde a borde como en producción. */
.wln-header__rowtop{ border-bottom:1px solid var(--wln-line); }

.wln-header__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 0 16px;
}
/* Más grande a propósito: es la marca, tiene que notarse más que el resto
   del header. El link (.wln-logo) ya está perfectamente alineado con el
   menú de abajo a nivel de contenedor (mismo padding-left) — si se ve un
   corrimiento es el propio archivo del logo, que trae algo de aire en
   blanco antes del trazo de la "W". */
/* Empuje chico a la derecha: el propio archivo trae aire en blanco antes
   del trazo, así que visualmente el logo se veía más pegado al borde que
   "HOMBRE" en la fila de abajo aunque a nivel de contenedor estén parejos. */
.wln-logo{ margin-left:8px; }
.wln-logo img{ display:block; height:56px; width:auto; }

.wln-header__actions{ display:flex; align-items:center; gap:26px; }
.wln-action{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--wln-ink); position:relative;
}
.wln-action svg{ width:20px; height:20px; }
.wln-action span{
  font-size:10px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
.wln-action--searchm{ display:none; }

.wln-cart__count{
  position:absolute; top:-6px; right:-10px; min-width:17px; height:17px;
  border-radius:100px; background:var(--wln-ink); color:#fff;
  font-size:10px; font-weight:700; line-height:17px; text-align:center; padding:0 4px;
}
.wln-cart__count.is-empty{ display:none; }

/* El carrito vive junto al buscador en desktop; en mobile sube a la fila del logo. */
.wln-cart--mobile{ display:none; }
.wln-cart--desktop{ flex:0 0 auto; }

/* ---- fila de navegación ---- */
.wln-header__bottom{
  display:flex; align-items:center; gap:28px; padding:10px 0;
}
.wln-nav{ flex:0 0 auto; }
.wln-nav__list{ display:flex; gap:2px; }
.wln-nav__item{ position:static; }
/* Neusa Next Pro, no Shapiro: la variante "Wide" de Shapiro estira las
   letras y no coincide con el menú de producción. */
.wln-nav__link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--wln-body); font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.01em;
  padding:12px 14px; border-bottom:2px solid transparent;
}
.wln-nav__link .wln-chev{ width:11px; height:11px; opacity:.55; }
.wln-nav__item:hover > .wln-nav__link,
.wln-nav__item.is-open > .wln-nav__link{ border-bottom-color:var(--wln-ink); }

/* ---- mega menú ---- */
.wln-mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--wln-paper); border-top:1px solid var(--wln-line);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  padding:24px 0 28px;
  /* Estado cerrado: invisible y no interactivo, pero sigue en el DOM
     (sin display:none) mientras dura la transición de salida — ver
     Nav.open/closeAll en walon-ui.js, que recién le pone [hidden] cuando
     termina. */
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.wln-mega[hidden]{ display:none; }
.wln-nav__item.is-open .wln-mega{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .wln-mega{ transition:none; }
}
.wln-mega__inner{
  padding:0 clamp(18px, 2.2vw, 48px);
  display:flex; gap:32px; align-items:flex-start;
}
.wln-mega__promo{ flex:0 0 220px; width:220px; }
.wln-mega__promo img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.wln-mega__promo-fallback{
  width:100%; aspect-ratio:4/5; background:var(--wln-ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px 18px;
}
.wln-mega__promo-fallback .l1{
  font-family:var(--wln-head); font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.03em; color:#b9b9b9;
}
.wln-mega__promo-fallback .l2{
  font-family:var(--wln-head); font-weight:800; font-size:30px;
  text-transform:uppercase; line-height:.95; color:#fff;
}
/* flex:1 1 0% (no "auto"): fuerza un ancho definido para este contenedor
   antes de que el grid de abajo calcule cuántas columnas de auto-fit caben.
   Con "auto" a veces el navegador todavía no tenía el ancho resuelto en ese
   momento y el grid armaba una columna vacía de más, dejando un hueco a la
   derecha (pasaba solo a veces, según el orden de cálculo del navegador). */
.wln-mega__content{ flex:1 1 0%; min-width:0; }
.wln-mega__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:34px;
}
.wln-mega__title{
  font-family:var(--wln-head); font-size:16px; font-weight:800;
  text-transform:uppercase; letter-spacing:.02em;
  margin:0 0 7px; padding-bottom:6px; border-bottom:1px solid var(--wln-ink);
  color:var(--wln-ink);
}
.wln-mega__title a{ color:inherit; }
/* Texto más chico que el resto del sitio a propósito: en un hover-menu
   nadie lee de corrido, solo escanea nombres cortos — así entran las 10
   subcategorías de Ropa sin scroll y sin tocar el layout de columnas. */
.wln-mega__list li{ padding:2.5px 0; }
.wln-mega__list li.is-sub{ padding-left:14px; }
.wln-mega__list li.is-sub a::before{ content:"— "; color:var(--wln-ink-soft); }
.wln-mega__list a{
  font-size:12.5px; line-height:1.3; color:var(--wln-ink); display:inline-block;
}
.wln-mega__list a:hover{ text-decoration:underline !important; }

/* deportes: tira fotográfica — cada foto se estira a lo ancho (flex:1) para
   ocupar el panel completo, pero mantiene la proporción panorámica real del
   archivo (335:106) en vez de recortarla a un cuadro alto — eso fue lo que
   se veía mal, no el ancho. */
.wln-sports{ display:flex; gap:18px; }
.wln-sport{ flex:1 1 0; min-width:0; text-align:center; }
/* object-fit:contain a propósito, no cover: el archivo ya trae el corte
   diagonal pintado como triángulos blancos en las esquinas (no es CSS).
   Con "cover" esas esquinas se recortaban y la foto quedaba como un
   rectángulo derecho en vez del paralelogramo inclinado. */
.wln-sport__ph{
  height:64px; margin-bottom:14px;
}
.wln-sport__ph img{ display:block; width:100%; height:100%; object-fit:contain; }
.wln-sport__label{
  font-family:var(--wln-head); font-weight:800; font-size:15px;
  text-transform:uppercase; letter-spacing:.02em; display:block;
}
.wln-sport:hover .wln-sport__label{ text-decoration:underline; }

/* equipos: escudos — 4 por fila a propósito (no auto-fit): con los 7 clubes
   actuales arma 2 filas parejas (4 + 3) en vez de una sola fila angosta con
   todo el ancho del panel desperdiciado entre escudos chicos. */
.wln-clubs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px 22px;
}
.wln-club{ text-align:center; display:flex; flex-direction:column; align-items:center; transition:transform .15s ease; }
.wln-club:hover{ transform:translateY(-3px); }
.wln-club__crest{
  height:100px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.wln-club__crest img{ max-height:100px; max-width:100%; width:auto; object-fit:contain; }
.wln-club__name{
  font-family:var(--wln-head); font-weight:800; font-size:14px;
  text-transform:uppercase; line-height:1.25;
}
.wln-club__count{ font-size:11px; color:var(--wln-ink-soft); margin-top:4px; }

/* =========================================================
   BUSCADOR
   ========================================================= */
.wln-header__tools{
  display:flex; align-items:center; gap:28px; margin-left:auto; flex:0 0 auto;
}
/* Buscador: caja completa (no solo línea inferior), con acento de marca
   (amarillo Walon) al enfocar en vez de un genérico negro/azul. */
.wln-searchbar{
  position:relative; flex:1 1 380px; width:380px; max-width:420px;
  display:flex; align-items:center; gap:11px;
  background:var(--wln-panel); border:1.5px solid var(--wln-line);
  border-radius:0; padding:11px 16px; height:auto;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wln-searchbar:hover{ border-color:#c9c9c5; }
/* La señal de "estás buscando" es este borde oscuro — no un velo que
   atenúa el resto de la página (eso se sacó: ver walon-ui.js). */
.wln-searchbar:focus-within{
  background:var(--wln-paper); border-color:var(--wln-ink);
}
.wln-searchbar > svg{ width:16px; height:16px; opacity:.5; flex:0 0 auto; }

/* El !important va a propósito: Astra y WooCommerce estilizan
   input[type="search"] con más especificidad que una sola clase, y ese borde
   propio del input era lo que dibujaba las cajitas internas del buscador. */
.wln-searchbar input.wln-searchbar__input,
.wln-searchbar input[type="search"]{
  flex:1 1 auto; min-width:0;
  -webkit-appearance:none; appearance:none;
  border:0 !important; outline:0 !important; background:transparent !important;
  box-shadow:none !important; border-radius:0 !important;
  padding:0 !important; margin:0 !important;
  height:auto !important; min-height:0 !important;
  font-family:var(--wln-body); font-size:13.5px; color:var(--wln-ink); line-height:1.5;
}
.wln-searchbar__input::placeholder{ color:#9a9a9a; opacity:1; }
.wln-searchbar__input::-webkit-search-cancel-button,
.wln-searchbar__input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }

/* La X vive dentro del campo, al final de la misma línea. */
.wln-searchbar__clear{
  flex:0 0 auto; display:flex; align-items:center; padding:0; border:0; background:none;
}
.wln-searchbar__clear svg{ width:14px; height:14px; opacity:.45; }
.wln-searchbar__clear:hover svg{ opacity:.9; }
.wln-searchbar__clear[hidden]{ display:none; }

/* ---- Panel de búsqueda: dropdown compacto, anclado bajo la caja ----
   Antes ocupaba todo el ancho del header; walon-ui.js ahora le calcula
   left/width en cada apertura para que quede pegado a .wln-searchbar
   (ver Search.reposition en walon-ui.js). El ancho/posición de acá son
   solo el fallback antes de que corra ese cálculo. Dos zonas: a la
   izquierda por dónde seguir buscando, a la derecha los productos. */
.wln-searchpanel{
  position:absolute; top:calc(100% + 4px); right:0; z-index:950;
  width:560px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--wln-line); border-radius:0;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
  max-height:90vh; overflow-y:auto;
  animation:wlnFade .16s ease;
}
.wln-searchpanel[hidden]{ display:none; }
@keyframes wlnFade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.wln-searchpanel__inner{
  padding:20px 22px 18px;
  display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:start;
}
.wln-searchpanel__inner.is-single{ grid-template-columns:1fr; }

.wln-sr__aside{ display:flex; flex-direction:column; gap:26px; }
.wln-sr__main{ min-width:0; }

.wln-sr__label{
  font-family:var(--wln-body); font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--wln-ink-soft);
  margin:0 0 12px;
}
.wln-sr__links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.wln-sr__link{ font-size:13.5px; color:var(--wln-ink); text-align:left; line-height:1.35; }
.wln-sr__link:hover{ text-decoration:underline !important; }

/* Productos en lista compacta: thumb chico a la izquierda, texto apilado
   a la derecha — no una card de foto grande, así entran varias filas
   visibles sin que el panel tenga que ser ancho. */
.wln-sr__list{ display:flex; flex-direction:column; gap:14px; }
.wln-sr__row{ display:flex; gap:12px; align-items:flex-start; color:var(--wln-ink); }
.wln-sr__row:hover .wln-sr__thumb{ transform:scale(1.04); }
.wln-sr__row.is-active{ outline:2px solid var(--wln-ink); outline-offset:3px; }
.wln-sr__thumbwrap{
  display:block; width:60px; height:60px; flex:0 0 auto; overflow:hidden;
  background:var(--wln-panel); position:relative;
}
.wln-sr__thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.wln-sr__badge{
  position:absolute; top:3px; left:3px;
  font-size:8.5px; font-weight:700; background:var(--wln-ink); color:#fff;
  padding:2px 5px; letter-spacing:.02em;
}
.wln-sr__rinfo{ min-width:0; padding-top:1px; }
.wln-sr__cat{ font-size:11px; color:var(--wln-ink-soft); margin-bottom:2px; display:block; }
.wln-sr__name{
  font-size:12.5px; font-weight:600; line-height:1.35; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wln-sr__name mark{ background:none; color:inherit; font-weight:800; }
.wln-sr__price{ font-size:12.5px; display:block; }
.wln-sr__price del{ font-size:11px; color:var(--wln-ink-soft); margin-right:6px; }
.wln-sr__price ins{ text-decoration:none; font-weight:700; color:var(--wln-sale); }
.wln-sr__price .amount{ font-weight:700; }
.wln-sr__oos{ font-size:10.5px; color:var(--wln-ink-soft); }

.wln-sr__empty{ font-size:14px; color:var(--wln-ink-soft); padding:6px 0 18px; }
.wln-sr__empty b{ display:block; color:var(--wln-ink); margin-bottom:6px; font-size:16px; }
.wln-sr__dym{ font-size:13px; margin-bottom:16px; color:var(--wln-ink-soft); }
.wln-sr__dym button{ font-weight:700; text-decoration:underline; color:var(--wln-ink); }

/* "Ver todo": fila de ancho completo, abajo de las dos columnas. */
.wln-sr__seeall{
  grid-column:1/-1; margin-top:14px; padding-top:14px; border-top:1px solid var(--wln-line);
  font-size:13px; font-weight:700; text-decoration:underline !important;
}

.wln-skel__list{ display:flex; flex-direction:column; gap:16px; }
.wln-skel__row{ display:flex; gap:12px; }
.wln-skel__lines{ flex:1 1 auto; padding-top:2px; }
.wln-skel__box{
  background:linear-gradient(90deg,#eee 25%,#f7f7f7 37%,#eee 63%);
  background-size:400% 100%; animation:wlnShimmer 1.2s infinite;
}
.wln-skel__thumb{ width:60px; height:60px; flex:0 0 auto; }
.wln-skel__line{ height:9px; border-radius:3px; margin-bottom:7px; }

@media (prefers-reduced-motion: reduce){
  .wln-skel__box{ animation:none; }
  .wln-club{ transition:none; }
}

/* =========================================================
   MENÚ MOBILE (navegación por niveles)
   ========================================================= */
.wln-burger{
  display:none; width:26px !important; height:17px !important; flex:0 0 auto; position:relative;
  flex-direction:column; justify-content:space-between; align-items:flex-start; padding:0 !important;
}
/* Ancho fijo en vez de 100%: si Astra le cambia el ancho al <button>
   (min-width en botones es algo que suele traer por defecto), las 3 líneas
   ya no seguían ese ancho nuevo por igual y una se veía más corta/angosta
   que las otras. Con un valor propio no dependen de lo que mida el padre. */
.wln-burger span{
  display:block; flex:0 0 auto; height:2px !important; width:26px !important;
  background:var(--wln-ink); border-radius:0;
}
/* walon-ui.js reemplaza el contenido (3 barras <-> ícono X), no anima
   transforms — cuando muestra la X necesita su propio tamaño, distinto al
   de las 3 barras que rellenan toda la caja de 26x17. */
.wln-burger svg{ width:22px; height:22px; display:block; margin:auto; }
/* Astra le pinta fondo a cualquier <button> en :hover/:focus/:active —
   mismo bug que el toggle del footer (ver wln-fcol__toggle): el reset base
   va en :where(), que pierde contra la regla real de Astra. */
.wln-burger,
.wln-burger:hover,
.wln-burger:focus,
.wln-burger:active{
  background:none !important;
}

.wln-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:940;
}
.wln-overlay[hidden]{ display:none; }

/* El panel arranca justo debajo del header real (walon-ui.js ajusta "top"
   al valor exacto en cada apertura) y ocupa el ancho completo — no es un
   drawer angosto desde el borde: el header se queda visible arriba, con
   la hamburguesa convertida en X, igual que el menú mobile anterior. */
.wln-mnav{
  position:fixed; left:0; right:0; bottom:0; top:var(--wln-header-h);
  background:#fff; z-index:960; display:flex; flex-direction:column;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.wln-mnav[hidden]{ display:none; }
.wln-mnav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .wln-mnav{ transition:none; }
}

/* Cabecera de subnivel: solo aparece a partir de "Hombre" → "Calzado" en
   adelante. El nivel raíz no la lleva (walon-ui.js le pone [hidden]) — ahí
   la lista de categorías va directo, sin título "Menú" redundante. */
.wln-mnav__head{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--wln-line); flex:0 0 auto;
}
.wln-mnav__head[hidden]{ display:none; }
.wln-mnav__title{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.wln-mnav__crumb{ font-size:10.5px; color:var(--wln-ink-soft); }
.wln-mnav__titletext{
  font-family:var(--wln-head); font-weight:800; font-size:14px; text-transform:uppercase;
}
.wln-mnav__back{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.wln-mnav__back[hidden]{ display:none; }
.wln-mnav__back svg{ width:18px; height:18px; }
/* Cada nivel ("Menú" → "Hombre" → "Calzado") ocupa toda el área y se
   desliza tipo "push" de app nativa — antes cambiaba de golpe (display
   none/block), sin ningún efecto de transición. */
.wln-mnav__body{ flex:1 1 auto; overflow:hidden; position:relative; }
.wln-mnav__level{
  position:absolute; inset:0; overflow-y:auto; background:var(--wln-paper);
  transform:translateX(0); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.wln-mnav__level[hidden]{ display:none; }
.wln-mnav__level--enter-right{ transform:translateX(100%); z-index:2; }
.wln-mnav__level--enter-left{ transform:translateX(-100%); z-index:2; }
@media (prefers-reduced-motion: reduce){
  .wln-mnav__level{ transition:none; }
}
.wln-mnav__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:15px 18px; border-bottom:1px solid var(--wln-line);
  font-family:var(--wln-body); font-weight:700; font-size:13.5px; text-transform:uppercase;
}
.wln-mnav__row svg{ width:15px; height:15px; opacity:.5; flex:0 0 auto; }
/* Fila "Ver todo X": fondo gris para diferenciarla del resto de la lista,
   igual que en el diseño mobile anterior — no es una subcategoría más. */
.wln-mnav__row--all{
  background:var(--wln-panel); color:var(--wln-ink);
  font-size:12.5px; letter-spacing:.03em;
}
.wln-mnav__row--plain{ text-transform:none; font-weight:600; font-size:14px; }
.wln-mnav__row--plain span{ display:flex; align-items:center; gap:11px; }
.wln-mnav__row--plain svg{ width:19px; height:19px; flex:0 0 auto; }
.wln-mnav__sep{ margin-top:18px; border-top:1px solid var(--wln-line); }
.wln-mnav__row.is-sub{ padding-left:34px; }
.wln-mnav__row.is-sub span::before{ content:"— "; color:var(--wln-ink-soft); }

/* buscador full-screen en mobile — flecha atrás + una sola caja con borde
   (input + lupa), sin botón "Cancelar" aparte: el mismo patrón que un
   buscador mobile de referencia rápido y minimalista. */
.wln-msearch{
  position:fixed; inset:0; background:#fff; z-index:970; display:flex; flex-direction:column;
}
.wln-msearch[hidden]{ display:none; }
.wln-msearch__head{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--wln-panel); }
.wln-msearch__back{
  width:28px; height:28px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer; color:var(--wln-ink);
}
.wln-msearch__back svg{ width:20px; height:20px; }
/* Mismo bug de Astra pintando fondo en <button>:hover/:focus/:active que
   ya se corrigió en la hamburguesa y el toggle del footer. */
.wln-msearch__back,
.wln-msearch__back:hover,
.wln-msearch__back:focus,
.wln-msearch__back:active{
  background:none !important;
}
.wln-msearch__box{
  flex:1 1 auto; display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--wln-ink); padding:10px 14px; min-width:0;
}
.wln-msearch__box input{
  flex:1 1 auto; min-width:0; border:0; outline:0; font-size:16px; font-family:var(--wln-body);
  background:transparent; color:var(--wln-ink);
}
.wln-msearch__box input::placeholder{ color:#9a9a9a; }
.wln-msearch__icon{ width:17px; height:17px; opacity:.55; flex:0 0 auto; }
.wln-msearch__box .wln-searchbar__clear{ flex:0 0 auto; }
.wln-msearch__box .wln-searchbar__clear svg{ width:14px; height:14px; opacity:.5; }

.wln-msearch__body{ flex:1 1 auto; overflow-y:auto; }
.wln-msearch__body .wln-searchpanel{
  position:static; box-shadow:none; border:0; border-radius:0; max-height:none; animation:none;
  width:auto; max-width:none;
}
.wln-msearch__body .wln-searchpanel__inner{
  grid-template-columns:1fr; gap:0; padding:0;
}

/* Estado inicial (recientes/populares) y filas sin imagen: texto plano,
   como una lista de enlaces — nada que decodificar/descargar, por eso se
   siente instantáneo. */
.wln-sr__plainlist{ display:flex; flex-direction:column; }
.wln-sr__plainrow{
  padding:14px 16px; border-bottom:1px solid var(--wln-line);
  font-size:14.5px; color:var(--wln-ink); text-align:left; width:100%;
}
.wln-msearch .wln-sr__label{ padding:16px 16px 4px; margin:0; }
.wln-msearch .wln-sr__main{ padding:0; }
.wln-msearch .wln-sr__empty{ padding:16px; }
.wln-msearch .wln-sr__dym{ padding:0 16px; margin-top:14px; }
.wln-msearch .wln-sr__list{ padding:0 16px; gap:0; }
.wln-msearch .wln-sr__seeall{ margin:6px 16px 16px; }

.wln-sr__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 6px; }
.wln-sr__chip{
  border:1px solid var(--wln-line); border-radius:100px; padding:7px 14px;
  font-size:12.5px; font-weight:600; color:var(--wln-ink);
}

/* Fila de producto sin imagen: mismo patrón de link simple, con precio y
   badge de descuento en línea en vez de superpuestos a una foto. */
.wln-sr__row.is-noimg{
  padding:13px 0; border-bottom:1px solid var(--wln-line);
}
.wln-sr__row.is-noimg .wln-sr__name{ -webkit-line-clamp:2; }
.wln-sr__pdisc{ color:var(--wln-sale); font-weight:700; margin-left:4px; }

/* =========================================================
   FOOTER
   ========================================================= */
.wln-footer{ background:#0a0a0a; color:#eaeaea; font-family:var(--wln-body); }

.wln-news{ background:var(--wln-yellow); }
.wln-news__inner{
  padding:46px clamp(18px, 2.2vw, 48px);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.wln-news__copy h2{
  font-family:var(--wln-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,2.6vw,30px); color:#0a0a0a; margin:0 0 10px;
  max-width:26ch; line-height:1.08;
}
.wln-news__copy p{ font-size:12px; font-style:italic; color:#5a521c; margin:0; }
.wln-news__form{ display:flex; flex:0 0 auto; }
.wln-news__form input{
  font-family:var(--wln-body); font-size:13.5px; padding:13px 16px; width:230px;
  background:#fff; border:1px solid #0a0a0a; border-right:0; color:#0a0a0a;
  border-radius:0; outline:0; height:auto;
}
.wln-news__form button{
  font-family:var(--wln-head); font-weight:800; font-size:12.5px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:0 24px; background:#0a0a0a; color:#fff; border:1px solid #0a0a0a;
}
.wln-news__form button:hover{ background:#262626; }
.wln-news__msg{ flex-basis:100%; font-size:12.5px; color:#5a521c; margin-top:8px; }

.wln-footer__main{
  padding:52px clamp(18px, 2.2vw, 48px) 36px;
  display:grid; grid-template-columns:1fr 1fr 1fr 1.15fr; gap:36px;
}
/* El !important va a propósito: es un <button> (para el acordeón mobile), y
   Astra resetea "a, button, img" a border:0 con !important — sin esto la
   línea bajo AYUDA/ACERCA DE WALON/TÉRMINOS no se pinta en desktop. */
.wln-fcol__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid #262626 !important; cursor:default;
}
/* Astra le pinta fondo a cualquier <button> en :hover/:focus/:active — este
   botón no es un botón visual (en desktop ni siquiera es clickeable), así
   que se anula explícito; el reset de más arriba va en :where(), que pierde
   contra la regla real de Astra. */
.wln-fcol__toggle,
.wln-fcol__toggle:hover,
.wln-fcol__toggle:focus,
.wln-fcol__toggle:active{
  background:none !important;
}
.wln-fcol__toggle h3{
  font-family:var(--wln-head); font-weight:800; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.03em; color:#fff; margin:0;
}
/* Va con .wln-footer delante a propósito: el reset .wln-footer svg{display:block}
   de más arriba tiene más especificidad y si no, el chevron se vería en desktop. */
.wln-footer .wln-fcol__chev{ display:none; width:16px; height:16px; color:#eaeaea; transition:transform .2s ease; }
.wln-fcol ul{ display:flex; flex-direction:column; gap:12px; }
.wln-fcol a{
  font-size:13.5px; color:#adadad; text-underline-offset:3px;
  transition:color .15s ease;
}
.wln-fcol a:hover{ color:#fff; text-decoration:underline !important; }
.wln-fcol a.is-pending{ cursor:default; opacity:.75; }
.wln-fcol a.is-pending:hover{ color:#adadad; text-decoration:none !important; }
.wln-reclamo{ display:flex; align-items:center; gap:8px; }
.wln-reclamo img{ height:24px; width:auto; flex:0 0 auto; }

.wln-fjoin p{ font-size:13px; color:#adadad; line-height:1.55; margin:0 0 18px; max-width:30ch; }
.wln-fjoin__btn{
  display:inline-block; font-family:var(--wln-head); font-weight:800; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase;
  color:#0a0a0a; background:#fff; padding:12px 22px; margin-bottom:24px;
  transition:background-color .15s ease, transform .15s ease;
}
.wln-fjoin__btn:hover{ background:#d8d8d8; color:#0a0a0a; transform:translateY(-1px); }
.wln-social{ display:flex; gap:12px; }
.wln-social a{
  width:34px; height:34px; border:1px solid #333 !important; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#eaeaea;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.wln-social a:hover{ border-color:#fff !important; color:#0a0a0a; background:#fff; }
.wln-social svg{ width:15px; height:15px; }

.wln-tagline{
  padding:26px clamp(18px, 2.2vw, 48px) 36px;
  display:flex; align-items:center; gap:10px; border-top:1px solid #1c1c1c;
}
.wln-tagline img{ width:22px; height:22px; object-fit:contain; }
.wln-tagline span{
  font-family:var(--wln-head); font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:.02em; color:#fff;
}
.wln-copy{ border-top:1px solid #1c1c1c; }
.wln-copy p{
  margin:0;
  padding:18px clamp(18px, 2.2vw, 48px);
  font-size:11.5px; color:#6e6e6e; text-align:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .wln-searchbar{ flex-basis:260px; width:260px; max-width:260px; }
  .wln-header__tools{ gap:18px; }
  .wln-header__bottom{ gap:16px; }
}

@media (max-width:960px){
  .wln-header__inner{ padding:0 18px; }
  /* Todo en una sola fila: el texto se trunca con "…" solo si de verdad no
     entra (pantallas muy angostas), pero "Ver más" siempre queda visible y
     clickeable en vez de saltar a una segunda línea. */
  .wln-topbar__inner{ padding:8px 18px; font-size:11.5px; flex-wrap:nowrap; }
  .wln-topbar__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .wln-topbar__link{ flex:0 0 auto; white-space:nowrap; }

  /* Header mobile igual al de producción: hamburguesa, logo, y a la derecha
     solo buscador y carrito. Mi cuenta y Tiendas viven dentro del menú. */
  .wln-burger{ display:flex; }
  .wln-header__rowtop{ border-bottom:0; }
  .wln-header__top{ padding:12px 0; gap:12px; }
  /* Logo centrado de verdad (flex:1 reparte el espacio sobrante a ambos
     lados) en vez de pegado a la hamburguesa con el resto del hueco a la
     derecha — así el header queda simétrico como en producción. */
  /* Empuje chico a la derecha: el grupo de la derecha (buscar + carrito)
     pesa más que la hamburguesa sola, así que el centrado "de verdad" del
     espacio sobrante queda un poco corrido a la izquierda del centro real
     de la pantalla. */
  .wln-logo{ flex:1 1 auto; display:flex; justify-content:center; margin:0 0 0 10px; }
  .wln-logo img{ height:30px; }
  .wln-header__actions{ gap:22px; }
  .wln-action span{ display:none; }
  .wln-action svg{ width:23px; height:23px; }
  .wln-action--searchm{ display:flex; }
  .wln-cart--mobile{ display:flex; }
  .wln-cart--desktop{ display:none; }
  /* Mi cuenta y Tiendas se quitan del header y pasan al menú lateral. */
  .wln-header__actions > .wln-action:not(.wln-action--searchm):not(.wln-cart){ display:none; }
  .wln-header__bottom{ display:none; }

  .wln-mega{ display:none !important; }

  .wln-news__inner{ flex-direction:column; align-items:flex-start; padding:36px 18px; }
  .wln-news__form{ width:100%; }
  .wln-news__form input{ flex:1 1 auto; width:auto; }

  .wln-footer__main{ grid-template-columns:1fr; gap:0; padding:8px 18px 32px; }
  .wln-fcol{ border-bottom:1px solid #262626; }
  .wln-fcol__toggle{ border-bottom:0 !important; margin:0; padding:18px 0; cursor:pointer; }
  .wln-footer .wln-fcol__chev{ display:block; }
  .wln-footer .wln-fcol.is-open .wln-fcol__chev{ transform:rotate(180deg); }
  .wln-fcol ul{ display:none; padding-bottom:20px; gap:14px; }
  .wln-fcol.is-open ul{ display:flex; }
  .wln-fcol[data-col="ayuda"]{ order:1; }
  .wln-fcol[data-col="acerca"]{ order:2; }
  .wln-fcol[data-col="terminos"]{ order:3; }
  .wln-fjoin{ order:4; padding-top:28px; }

  .wln-tagline, .wln-copy p{ padding-left:18px; padding-right:18px; }
}

@media (min-width:961px){
  .wln-mnav, .wln-msearch{ display:none !important; }
}

/* =========================================================
   "DÍAS WALON" — único ítem con color animado (campaña temporal)
   Aislado por data-key (desktop) y por href (mobile, no depende del
   dominio) para no afectar a Hombre/Mujer/Niños/Deportes/Equipos ni a
   ningún otro link del header. Quitar este bloque completo cuando
   termine la campaña.
   ========================================================= */
@keyframes wlnDiasWalonColor{
  0%   { color:#6C2CE7; }
  33%  { color:#E72AAE; }
  66%  { color:#FFD21A; }
  100% { color:#6C2CE7; }
}
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link,
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link:link,
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link:visited,
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link:hover,
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link:focus,
.wln-nav__item[data-key="dias-walon"] > .wln-nav__link:active,
.wln-mnav__row[href$="/dias-walon/"],
.wln-mnav__row[href$="/dias-walon/"]:link,
.wln-mnav__row[href$="/dias-walon/"]:visited,
.wln-mnav__row[href$="/dias-walon/"]:hover,
.wln-mnav__row[href$="/dias-walon/"]:focus,
.wln-mnav__row[href$="/dias-walon/"]:active{
  animation:wlnDiasWalonColor 3.5s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce){
  .wln-nav__item[data-key="dias-walon"] > .wln-nav__link,
  .wln-mnav__row[href$="/dias-walon/"]{
    animation:none !important;
    color:#A72DEB !important;
  }
}