/* ============================================================
   L2 — Castillito Accesorios Bebés
   Theme: Toluca  ·  archivo: /static/css/l2-custom-v4.css

   Reemplaza a l2-custom-v3.css. En layouts/layout.tpl cambiar
   SOLO el nombre del archivo en el <link> que ya existe:

     'css/l2-custom-v3.css'  →  'css/l2-custom-v4.css'

   ⚠️ Los estáticos se sirven por CloudFront y la URL no lleva
   versión: sobrescribir el archivo NO alcanza, el CDN sigue
   devolviendo la copia vieja. Cada cambio = número nuevo
   (v5, v6...) y actualizar el layout.

   Cambios v4 (29/10/2026):
   - Barra del menú en azul con texto blanco y subrayado animado.
   - Mega menú de "Productos" estilo Escobar: grupos a la
     izquierda, subcategorías del grupo a la derecha.
   - Textos del menú en un azul más oscuro (pedido del cliente).
   ============================================================ */


/* ============================================================
   1 · MENÚ DESKTOP — barra azul + mega menú en dos columnas
   ============================================================ */

.js-menu-and-banners-row{
  /* Todo sale del acento del theme (#3688ad hoy). Sin hex
     clavados: si cambian la paleta desde el admin, acompaña. */
  --l2-azul:      color-mix(in srgb, var(--accent-color) 80%, #000);  /* barra        */
  --l2-azul-osc:  color-mix(in srgb, var(--accent-color) 52%, #000);  /* textos       */
  --l2-azul-tint: color-mix(in srgb, var(--accent-color) 9%, transparent);
  --l2-azul-line: color-mix(in srgb, var(--accent-color) 22%, transparent);
  --l2-verde:     var(--nav-desktop-foreground);                      /* acento hover */
  --l2-panel-bg:  var(--nav-desktop-background);

  /* medidas del mega menú */
  --l2-col1: 300px;   /* columna de grupos        */
  --l2-col2: 360px;   /* columna de subcategorías */
  --l2-alto: 420px;   /* alto mínimo del panel    */
}

/* ---------- la barra ---------- */
.js-menu-and-banners-row .nav-desktop{
  background: var(--l2-azul);
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08),
              0 6px 16px -8px rgba(0,0,0,.35);
  position: relative;
  z-index: 30;
}

/* centrado seguro */
.js-menu-and-banners-row .nav-desktop-list{
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0 var(--gutter-half);
  list-style: none;
  overflow: visible;
  justify-content: center;
  justify-content: safe center; /* si desborda cae a flex-start: no corta ítems */
}

/* ---------- ítems principales ---------- */
.js-menu-and-banners-row .nav-main-item{ position: relative; }

.js-menu-and-banners-row .nav-main-item > .nav-list-link,
.js-menu-and-banners-row .nav-main-item > .nav-item-container > .nav-list-link{
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px var(--gutter) 14px;
  color: #fff;
  font-family: var(--body-font);
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  background-color: transparent;
  transition: background-color .18s ease;
}

/* subrayado que crece desde el centro */
.js-menu-and-banners-row .nav-main-item > .nav-list-link::after,
.js-menu-and-banners-row .nav-main-item > .nav-item-container > .nav-list-link::after{
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}

/* HOVER: resalte claro + subrayado */
.js-menu-and-banners-row .nav-main-item:hover > .nav-list-link,
.js-menu-and-banners-row .nav-main-item:hover > .nav-item-container > .nav-list-link{
  color: #fff;
  background-color: rgba(255,255,255,.13);
}
.js-menu-and-banners-row .nav-main-item:hover > .nav-list-link::after,
.js-menu-and-banners-row .nav-main-item:hover > .nav-item-container > .nav-list-link::after,
.js-menu-and-banners-row .nav-main-item > .nav-list-link.selected::after,
.js-menu-and-banners-row .nav-main-item > .nav-item-container > .nav-list-link.selected::after{
  transform: scaleX(1);
}

/* ACTIVO: subrayado fijo y resalte más suave */
.js-menu-and-banners-row .nav-main-item > .nav-list-link.selected,
.js-menu-and-banners-row .nav-main-item > .nav-item-container > .nav-list-link.selected{
  color: #fff;
  background-color: rgba(255,255,255,.07);
}

/* flechita en los que abren dropdown */
.js-menu-and-banners-row .nav-main-item.item-with-subitems > .nav-item-container > .nav-list-link::before{
  content: "";
  width: 5px; height: 5px;
  margin-right: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .7;
  transition: opacity .18s ease, transform .18s ease;
}
.js-menu-and-banners-row .nav-main-item.item-with-subitems:hover > .nav-item-container > .nav-list-link::before{
  opacity: 1;
  transform: rotate(45deg) translateY(1px);
}

/* flechas de scroll del theme (solo aparecen si la barra desborda) */
.js-menu-and-banners-row .nav-desktop-list-arrow{
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: #fff;
  opacity: .5;
  transition: opacity .18s ease;
}
.js-menu-and-banners-row .nav-desktop-list-arrow:hover{ opacity: 1; }
.js-menu-and-banners-row .nav-desktop-list-arrow svg{ fill: currentColor; }


/* ---------- el panel desplegable ----------
   El theme lo trae en position:fixed a todo el ancho de la
   pantalla. Acá se cuelga del ítem: queda debajo de "Productos"
   y del ancho justo de las dos columnas. */
.js-menu-and-banners-row .nav-main-item > .desktop-dropdown{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: auto !important;
  min-width: 240px;
  max-height: none !important;   /* el theme lo fija inline por JS */
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;     /* el theme lo pone en flex */
  background: var(--l2-panel-bg);
  border: 1px solid var(--l2-azul-line);
  border-top: 0;
  border-bottom: 3px solid var(--l2-azul);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.28),
              0 4px 10px -4px rgba(0,0,0,.12);
  overflow: visible;
}

/* ---------- columna 1 · los grupos ---------- */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems{
  position: relative;
  list-style: none;
  columns: auto !important;          /* anula las 4 columnas de v3/theme */
  column-count: 1 !important;
  width: var(--l2-col1) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 0 !important;
}
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li{
  position: static;                  /* la columna 2 se mide contra el panel */
  margin: 0;
  break-inside: avoid;
}

/* Si el desplegable tiene tercer nivel (Productos), se abre la
   columna 2: el panel crece y gana alto mínimo. "Set de cambiado"
   no tiene, y queda como lista simple de una columna. */
.js-menu-and-banners-row .desktop-dropdown:has(.desktop-list-subitems > li > .list-subitems > li){
  width: calc(var(--l2-col1) + var(--l2-col2)) !important;
}
.js-menu-and-banners-row .desktop-dropdown:has(.desktop-list-subitems > li > .list-subitems > li) .desktop-list-subitems{
  min-height: var(--l2-alto);
  border-right: 1px solid var(--l2-azul-line);
}

/* texto de cada grupo */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .nav-list-link,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .nav-item-container > .nav-list-link{
  position: relative;
  display: block;
  margin: 0;
  padding: 8px 36px 8px 24px;
  border-radius: 0;
  color: var(--l2-azul-osc);
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: normal;
  opacity: 1;
  text-decoration: none;
  transform: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

/* chevron › solo en los grupos que tienen subcategorías */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li.item-with-subitems > .nav-item-container > .nav-list-link::after{
  content: "\203A";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  opacity: .4;
  transition: opacity .16s ease, right .16s ease;
}

/* grupo con el mouse encima (y el primero, mientras no se toque otro) */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li:hover > .nav-list-link,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li:hover > .nav-item-container > .nav-list-link,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems:not(:hover) > li.item-with-subitems:first-child > .nav-item-container > .nav-list-link{
  background-color: var(--l2-azul-tint);
  color: var(--l2-azul);
  box-shadow: inset 3px 0 0 var(--l2-azul);
}
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li.item-with-subitems:hover > .nav-item-container > .nav-list-link::after,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems:not(:hover) > li.item-with-subitems:first-child > .nav-item-container > .nav-list-link::after{
  opacity: 1;
  right: 16px;
}

/* ---------- columna 2 · subcategorías del grupo ---------- */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .list-subitems{
  display: none;
  position: absolute;
  left: var(--l2-col1);
  top: 0;
  z-index: 3;
  width: var(--l2-col2);
  margin: 0;
  padding: 14px 0;
  list-style: none;
  border: 0;
}

/* visible: la del grupo con hover; si no se tocó nada, la del primero */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li:first-child > .list-subitems,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li:hover > .list-subitems{
  display: block;
}
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems:hover > li:first-child:not(:hover) > .list-subitems{
  display: none;
}

/* Puente invisible sobre la columna 2: mantiene el grupo
   "agarrado" mientras el mouse cruza hacia sus subcategorías. */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li.item-with-subitems:hover::after{
  content: "";
  position: absolute;
  left: var(--l2-col1);
  top: 0;
  bottom: 0;
  width: var(--l2-col2);
  z-index: 1;
}

/* ítems de la columna 2 */
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .list-subitems > li > .nav-list-link,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .list-subitems > li > .nav-item-container > .nav-list-link{
  display: block;
  margin: 0 !important;              /* el theme le pone 10px abajo */
  padding: 6px 24px;
  border-radius: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--l2-azul-osc);
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.4;
  opacity: 1;
  text-decoration: none;
  transform: none;
  transition: color .16s ease, border-color .16s ease, padding-left .16s ease;
}
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .list-subitems > li > .nav-list-link:hover,
.js-menu-and-banners-row .desktop-dropdown .desktop-list-subitems > li > .list-subitems > li > .nav-item-container > .nav-list-link:hover{
  color: var(--l2-azul);
  border-left-color: var(--l2-verde);
  padding-left: 30px;
  background: transparent;
}

/* cuarto nivel (hoy: Espacio Lúdico › Juegos y Juguetes):
   se muestra adentro de la columna 2, con sangría y guía */
.js-menu-and-banners-row .desktop-dropdown .list-subitems .list-subitems .list-subitems{
  display: block;
  list-style: none;
  margin: 0 0 6px 24px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--l2-azul-line);
}
.js-menu-and-banners-row .desktop-dropdown .list-subitems .list-subitems .list-subitems .nav-list-link{
  display: block;
  margin: 0 !important;
  padding: 5px 12px;
  color: var(--l2-azul-osc);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  opacity: .85;
  background: transparent;
  transform: none;
  transition: color .16s ease, opacity .16s ease;
}
.js-menu-and-banners-row .desktop-dropdown .list-subitems .list-subitems .list-subitems .nav-list-link:hover{
  color: var(--l2-azul);
  opacity: 1;
  background: transparent;
}

/* ítem de la página actual */
.js-menu-and-banners-row .desktop-dropdown .nav-list-link.selected{
  color: var(--l2-azul);
  font-weight: 700;
}

/* ---------- accesibilidad ---------- */
.js-menu-and-banners-row .nav-main-item > .nav-list-link:focus-visible,
.js-menu-and-banners-row .nav-main-item > .nav-item-container > .nav-list-link:focus-visible{
  outline: 2px solid #fff;
  outline-offset: -3px;
}
.js-menu-and-banners-row .desktop-dropdown .nav-list-link:focus-visible{
  outline: 2px solid var(--l2-azul);
  outline-offset: -3px;
}


/* ============================================================
   2 · CONTADOR REGRESIVO DEL HOME
   Markup en snipplets/l2-countdown.tpl   (sin cambios desde v3)
   ============================================================ */

.l2-countdown{
  /* Usa los colores del badge "OFERTA" de las fichas, así el reloj
     queda hermanado con los sellos de promo. */
  --l2-cd-bg: var(--label-background);
  --l2-cd-fg: var(--label-foreground);
  --l2-cd-chip: color-mix(in srgb, var(--label-foreground) 14%, transparent);

  display: none;                 /* lo enciende el JS: evita el flash */
  background: var(--l2-cd-bg);
  color: var(--l2-cd-fg);
  font-family: var(--body-font);
  padding: 18px var(--gutter);
  text-align: center;
}
.l2-countdown.is-on{ display: block; }

.l2-countdown__msg{
  font-family: var(--heading-font);
  font-size: var(--font-big);
  font-weight: var(--title-font-weight);
  line-height: 1.35;
  margin: 0 0 12px;
  letter-spacing: .01em;
}

.l2-countdown__clock{ display: flex; justify-content: center; gap: 8px; }

.l2-countdown__unit{
  background: var(--l2-cd-chip);
  border-radius: calc(var(--border-radius) * 2);
  padding: 8px 4px;
  min-width: 62px;
}
.l2-countdown__num{
  display: block;
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* sin esto los dígitos bailan en cada tick */
}
.l2-countdown__lbl{
  display: block;
  font-size: var(--font-smallest);
  text-transform: uppercase;
  letter-spacing: .09em;
  opacity: .75;
  margin-top: 5px;
}

@media (max-width:480px){
  .l2-countdown{ padding: 14px 12px; }
  .l2-countdown__msg{ font-size: var(--font-base); }
  .l2-countdown__unit{ min-width: 0; flex: 1; padding: 7px 2px; }
  .l2-countdown__num{ font-size: var(--h5); }
}


/* ============================================================
   3 · MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  .js-menu-and-banners-row .nav-list-link,
  .js-menu-and-banners-row .nav-list-link::after,
  .js-menu-and-banners-row .nav-list-link::before{ transition: none !important; }
}