/* =========================================================
   DEPORTES JIMMY — HEADER
   Depende de deportes-jimmy-design-system.css (cárgalo primero)
   ========================================================= */

.dj-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--dj-space-sm, 16px);
}

/* ---------------------------------------------------------
   BARRA SUPERIOR
   --------------------------------------------------------- */
.dj-topbar {
  background-color: var(--dj-black-soft, #111);
  padding: 8px 0;
}
.dj-topbar__msg {
  margin: 0;
  text-align: center;
  color: var(--dj-white, #fff);
  font-size: 0.78rem;
  font-weight: var(--dj-weight-medium, 500);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   HEADER PRINCIPAL
   --------------------------------------------------------- */
.dj-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

.dj-header__main {
  background-color: var(--dj-white, #fff);
  border-bottom: 1px solid #ececec;
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}

/* Header "comprimido" al hacer scroll (clase añadida por JS)
 *
 * v3.4: la sombra baja de 16 px al 8% → 9 px al 5%. Al empezar a bajar,
 * el menú proyectaba una franja gris sobre el borde de arriba del hero
 * y se mezclaba con los efectos del slider. Ahora solo despega el menú
 * del contenido, que es para lo único que está. */
.dj-header--scrolled .dj-header__main {
  box-shadow: 0 2px 9px rgba(0,0,0,0.05);
}
.dj-header--scrolled .dj-header__inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

.dj-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: padding 0.25s ease;
  position: relative;
}

/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */
.dj-logo {
  flex-shrink: 0;
}
.dj-logo a {
  display: flex;
  align-items: center;
}
/**
 * Un solo logo, el completo, en todas las pantallas.
 * El isotipo suelto queda reservado para el favicon.
 *
 * ⚠️ LOS !important SON NECESARIOS, no son pereza:
 * WooCommerce y Hello Elementor traen una regla global
 * `img { width: 100%; height: auto; }`. En las páginas de tienda y
 * categoría esa regla ganaba y el logo se estiraba a lo ancho de
 * media pantalla. Con el tamaño fijado aquí, no hay hoja de estilos
 * de ningún plugin que lo pueda reventar.
 */
.dj-header .dj-logo__img,
.dj-logo__img {
  display: block !important;
  height: 44px !important;
  width: auto !important;
  max-width: 230px !important;
  min-width: 0;
  object-fit: contain;
}

/* ---------------------------------------------------------
   MENÚ PRINCIPAL (desktop)
   --------------------------------------------------------- */
.dj-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.dj-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dj-nav__list a {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.dj-nav__list a:hover,
.dj-nav__list .current-menu-item > a {
  color: var(--dj-red, #FF0000);
}
/* ⚠️ v8.8 — OJO CON EL ">": ESTE SUBRAYADO ES SOLO DEL PRIMER NIVEL.
   Antes decía ".dj-nav__list a::after" a secas, y eso alcanzaba a
   TODOS los enlaces del menú, submenús incluidos. Como el isologo de
   las categorías con hijos también se dibuja con "::after", esta
   regla le metía "background: rojo" por debajo — y el isologo salía
   con un recuadro rojo detrás. Con "> li > a" solo toca los ítems de
   la barra de arriba, que es para lo que estaba pensado. */
.dj-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--dj-red, #FF0000);
  transition: width 0.25s ease;
}
.dj-nav__list > li > a:hover::after {
  width: 100%;
}

/* Submenús (dropdown simple) */
.dj-nav__list li { position: relative; }
.dj-nav__list ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--dj-white, #fff);
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14));
  border-radius: var(--dj-radius-sm, 4px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 10;
}
.dj-nav__list li:hover > ul,
.dj-nav__list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Segundo nivel (ej. Béisbol dentro de Deportes) y más adentro:
   se abre hacia la derecha en vez de apilarse debajo, como un
   flyout de submenú */
.dj-nav__list ul ul {
  top: -9px; /* alinea con el borde superior del padding del item padre */
  left: 100%;
  margin-left: 4px;
  transform: translateX(8px);
}
.dj-nav__list ul li:hover > ul,
.dj-nav__list ul li:focus-within > ul {
  transform: translateX(0);
}

/* v8.2 — si no hay espacio a la derecha, header.js agrega esta
   clase al <li> y el flyout se abre hacia la izquierda en su
   lugar, para no salirse de la pantalla. */
.dj-nav__list ul li.dj-flyout-left > ul {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
  transform: translateX(-8px);
}
.dj-nav__list ul li.dj-flyout-left:hover > ul,
.dj-nav__list ul li.dj-flyout-left:focus-within > ul {
  transform: translateX(0);
}

/* v8.8 — el isologo a COLOR REAL (el .png que mandó el cliente), no
   pintado de rojo. El archivo ya viene con fondo transparente, así
   que conserva su rojo, blanco y negro sin ningún recuadro detrás.

   Viene a 151×116 px y se reduce por código a 17×13 px (misma
   proporción, para que no se deforme). Se deja al doble de la
   resolución que se ve, así se mantiene nítido en pantallas Retina.

   POSICIÓN — el orden pedido, de izquierda a derecha:

       │ barrita LED (3px)  ·5px·  isologo (17px)  ·5px·  TEXTO
       └ left: 0            └ left: 8px            └ padding-left: 30px

   O sea: 3 + 5 = 8px para el isologo, y 8 + 17 + 5 = 30px donde
   arranca el texto. Va SIEMPRE a la izquierda, se abra el flyout
   hacia donde se abra. */
.dj-nav__list ul li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 17px;
  height: 13px;
  transform: translateY(-50%) scale(0.55);
  opacity: 0;
  /* Blindaje: NINGÚN fondo de color detrás del isologo, pase lo que
     pase. Es lo que le pasaba con el subrayado del menú (ver arriba):
     otra regla le colaba "background: rojo" y el logo salía con un
     recuadro. Declarándolo aquí, aunque mañana aparezca otra regla
     parecida, el isologo se sigue viendo limpio. */
  background-color: transparent !important;
  background-image: url('../img/isotipo-dj-menu.png?v=7.33');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.dj-nav__list ul li.menu-item-has-children:hover > a::after,
.dj-nav__list ul li.menu-item-has-children:focus-within > a::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  /* Espera a que la luz llegue: la barrita tarda 0.25s en prender. */
  transition-delay: 0.22s;
}

/* v8.5 — la "barrita LED": se ilumina en rojo, con resplandor,
   cuando ese item (con hijos) se abre por hover o por foco de
   teclado. Sirve de aviso visual de "esto se está desplegando",
   igual en hijos que en nietos. */
.dj-nav__list ul li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--dj-red, #FF0000);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.3);
  transform-origin: center;
  box-shadow: 0 0 0 rgba(255, 0, 0, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dj-nav__list ul li.menu-item-has-children:hover > a::before,
.dj-nav__list ul li.menu-item-has-children:focus-within > a::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
  box-shadow: 0 0 8px 1px rgba(255, 0, 0, 0.7);
}

/* v8.5 — el texto se ilumina en rojo letra por letra (no todo
   de golpe). header.js envuelve cada letra en un <span
   class="dj-letter"> con su índice en --i; acá solo se define
   la demora de cada una según ese índice. */
.dj-nav__list ul li.menu-item-has-children > a .dj-letter {
  display: inline;
  color: var(--dj-black-soft, #111);
  transition: color 0.2s ease;
  transition-delay: calc(var(--i, 0) * 22ms);
}
.dj-nav__list ul li.menu-item-has-children:hover > a .dj-letter,
.dj-nav__list ul li.menu-item-has-children:focus-within > a .dj-letter {
  color: var(--dj-red, #FF0000);
}
@media (prefers-reduced-motion: reduce) {
  .dj-nav__list ul li.menu-item-has-children > a::before,
  .dj-nav__list ul li.menu-item-has-children > a .dj-letter {
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

.dj-nav__list ul li a {
  display: block;
  /* Izquierda 24px = sangrado normal de los ítems sin hijos. Los que
     SÍ tienen hijos lo suben a 30px (regla de abajo) para dejar pasar
     la barrita LED y el isologo. */
  padding: 10px 20px 10px 24px;
  font-size: 0.85rem;
  position: relative;
}
/* barrita (3px) + 5px + isologo (17px) + 5px = 30px */
.dj-nav__list ul li.menu-item-has-children > a {
  padding-left: 30px;
}

/* v3.16.5 — "Ofertas" en rojo, a la derecha del menú de escritorio */
.dj-nav__ofertas {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dj-red, #FF0000) !important;
  text-decoration: none;
  margin-left: 32px;
  white-space: nowrap;
}
.dj-nav__ofertas:hover { color: var(--dj-black-soft, #111) !important; }

:root { --lab-red: #e52822; }

/* v9.0 — "The Lab", pegado a la derecha de Ofertas. Es un logo, no
   texto, así que se centra y reacciona al pasar el mouse. */
.dj-nav__lab {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  line-height: 0;
}
.dj-nav__lab-img {
  display: block;
  width: auto;
  height: 26px;
  transition: opacity .3s ease, transform .3s ease;
}
.dj-nav__lab:hover .dj-nav__lab-img,
.dj-nav__lab:focus-visible .dj-nav__lab-img {
  opacity: 0;
  transform: scale(.85);
}

/* v9.2 — el "estampado": al pasar el mouse aparece una camiseta con
   el isotipo de Deportes Jimmy encima, como diciendo "esto es lo que
   hace The Lab" — personaliza hasta su propio logo. Dos capas que se
   cruzan en opacidad, sin mover nada del layout de al lado. */
.dj-nav__lab-hover {
  /* v9.4 — CENTRADO POR PUNTO, no por "inset:0": el logo de al lado
     (el que se apaga) sigue ocupando su ancho normal aunque esté en
     opacidad 0, así que "estirar" esta capa a ese ancho entero
     dejaba la camiseta centrada en una caja mucho más ancha que
     ella misma — y el isotipo, centrado en ESA misma caja, caía
     lejos de la camiseta en vez de encima. Con top/left 50% +
     translate(-50%,-50%) esta capa se encoge a su propio contenido
     (la camiseta) y se ancla por su CENTRO, sin importar cuánto mida
     el logo de al lado. */
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7) rotate(-6deg);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.dj-nav__lab:hover .dj-nav__lab-hover,
.dj-nav__lab:focus-visible .dj-nav__lab-hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.dj-nav__lab-camisa {
  display: block;
  width: 31px;
  height: auto;
}

/* v9.2 — el isotipo no solo aparece: CAE desde arriba y rebota hasta
   quedar "estampado" en el pecho. Va con un ligero retraso (.15s)
   para que primero se vea entrar la camiseta y luego, encima, el
   golpe del logo — dos tiempos, no todo de una vez. */
.dj-nav__lab-isotipo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: translate(-50%, -230%) scale(.5) rotate(-14deg);
  transition: opacity .2s ease, transform .2s ease;
}
.dj-nav__lab:hover .dj-nav__lab-isotipo,
.dj-nav__lab:focus-visible .dj-nav__lab-isotipo {
  animation: dj-lab-caer .55s cubic-bezier(.34, 1.56, .64, 1) .15s forwards;
}
@keyframes dj-lab-caer {
  0%   { opacity: 0; transform: translate(-50%, -230%) scale(.5) rotate(-14deg); }
  55%  { opacity: 1; transform: translate(-50%, -34%) scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: translate(-50%, -42%) scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dj-nav__lab-img, .dj-nav__lab-hover, .dj-nav__lab-isotipo { transition: none; }
  .dj-nav__lab:hover .dj-nav__lab-isotipo,
  .dj-nav__lab:focus-visible .dj-nav__lab-isotipo {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -42%);
  }
}

/* Sin dirección todavía (falta terminar la página): se ve, reacciona
   igual al pasar el mouse, pero no es clicable. */
.dj-nav__lab--pendiente { cursor: default; }

/* ---------------------------------------------------------
   ACCIONES (buscar / cuenta / carrito)
   --------------------------------------------------------- */
.dj-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dj-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--dj-black-soft, #111);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  text-decoration: none;
}
.dj-action-btn:hover {
  background: var(--dj-gray-light, #f4f4f5);
  color: var(--dj-red, #FF0000);
}

.dj-cart-btn { position: relative; }
.dj-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 4px;
}

/* ---------------------------------------------------------
   WHATSAPP (v7.28)
   Al lado del carrito. Se pinta verde ya en reposo —apagado
   pasaría por "otro icono más"— pero sin gritar más que el
   contador rojo del carrito, que es lo que manda ahí.
   --------------------------------------------------------- */
.dj-wa-btn {
  color: #128C4B;
}
.dj-wa-btn:hover {
  background: rgba(37, 211, 102, .13);
  color: #128C4B;
}
.dj-wa-btn svg {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.dj-wa-btn:hover svg { transform: scale(1.12); }


/* ---------------------------------------------------------
   BARRA DE BÚSQUEDA EXPANDIBLE
   --------------------------------------------------------- */
.dj-search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--dj-white, #fff);
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14));
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.dj-search-bar.is-open {
  max-height: 100px;
}
.dj-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.dj-search-form__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--dj-font-body);
  font-size: 1rem;
  padding: 10px 4px;
  border-bottom: 2px solid var(--dj-gray-light, #f4f4f5);
}
.dj-search-form__input:focus {
  border-bottom-color: var(--dj-red, #FF0000);
}
.dj-search-form__submit {
  background: var(--dj-red, #FF0000);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   HAMBURGUESA (solo visible en móvil/tablet)
   --------------------------------------------------------- */
.dj-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.dj-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dj-black-soft, #111);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.dj-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dj-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dj-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   MENÚ MÓVIL OFF-CANVAS
   --------------------------------------------------------- */
.dj-mobile-menu {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: var(--dj-black-soft, #111);
  z-index: 1001;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}
.dj-mobile-menu.is-open { left: 0; }

.dj-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dj-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--dj-red, #FF0000);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dj-mobile-menu__close:hover {
  background: var(--dj-black-soft, #111);
  transform: scale(1.06);
}

.dj-mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.dj-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dj-mobile-menu__list a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dj-mobile-menu__list a:hover { color: var(--dj-red, #FF0000); }

/* ===========================================================
   v8.12 — LA BARRITA LED Y EL ISOLOGO, TAMBIÉN EN EL CELULAR
   -----------------------------------------------------------
   En escritorio, la categoría que se está abriendo se marca con
   una barrita roja encendida a la izquierda y el isologo apareciendo
   detrás de la luz. Ese detalle no existía en el menú del celular.

   Aquí se hace lo mismo, pero disparado por la clase que ya pone el
   JavaScript cuando la sección se despliega (".is-open" en su
   submenú) — en vez del ":hover" de escritorio, que en una pantalla
   táctil no ocurre nunca.
   =========================================================== */
.dj-mobile-menu__list li.menu-item-has-children > a {
  position: relative;
}

/* La barrita: apagada por defecto, se enciende con resplandor
   cuando esa sección está abierta. */
.dj-mobile-menu__list li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 55%;
  border-radius: 0 3px 3px 0;
  background: var(--dj-red, #FF0000);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.3);
  box-shadow: 0 0 0 rgba(255, 0, 0, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dj-mobile-menu__list li.menu-item-has-children:has(> .sub-menu.is-open) > a::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
  box-shadow: 0 0 8px 1px rgba(255, 0, 0, 0.7);
}

/* El isologo aparece después de la luz, igual que en escritorio:
   la barrita prende primero y él entra detrás.
   ⚠️ Ojo: el "+" / "−" de este menú también se dibuja con "::after"
   sobre el mismo enlace, así que el isologo NO puede ir ahí — se
   pisarían. Va sobre el <li>, posicionado a la izquierda del texto. */
.dj-mobile-menu__list li.menu-item-has-children {
  position: relative;
}
.dj-mobile-menu__list li.menu-item-has-children::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 17px;
  height: 13px;
  opacity: 0;
  transform: scale(0.55);
  background-image: url('../img/isotipo-dj-menu.png?v=7.33');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.dj-mobile-menu__list li.menu-item-has-children:has(> .sub-menu.is-open)::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.22s;
}
/* El texto se corre para dejarle sitio a la barrita y al isologo:
   barrita (3px) + 5px + isologo (17px) + 5px = 30px */
.dj-mobile-menu__list li.menu-item-has-children > a {
  padding-left: 30px;
}
/* Los niveles de adentro llevan su propia sangría, así que se les
   suma la misma reserva en vez de pisarla. */
.dj-mobile-menu__list .sub-menu li.menu-item-has-children::before {
  left: 20px;
}
.dj-mobile-menu__list .sub-menu li.menu-item-has-children > a {
  padding-left: 42px;
}

@media (prefers-reduced-motion: reduce) {
  .dj-mobile-menu__list li.menu-item-has-children > a::before,
  .dj-mobile-menu__list li.menu-item-has-children::before {
    transition: none;
  }
}

/* v3.16.5 — submenús contraídos por defecto (Gym y Fitness, Deportes,
   Moda Deportiva). El JS ya alternaba la clase .is-open al hacer clic;
   faltaba este CSS, así que las tres categorías se veían siempre
   desplegadas de entrada. */
.dj-mobile-menu__list .sub-menu {
  max-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: max-height 0.3s ease;
}
/* ⚠️ v8.11 — EL ALTO LO MIDE EL JAVASCRIPT, NO ESTE NÚMERO.
   Antes esto decía "max-height: 2000px" a secas, y ahí estaba el
   error: al abrir un nieto dentro de un hijo, el contenido del
   padre crecía por encima de ese tope y, como la caja recorta lo
   que sobra ("overflow: hidden"), los nietos quedaban CORTADOS —
   se veía media lista y no había forma de llegar al resto.

   Ahora header.js mide el alto real de cada nivel abierto y lo
   escribe en el elemento, de adentro hacia afuera. El valor de
   abajo queda solo como respaldo por si el JavaScript no llega a
   correr: generoso, para que en el peor caso se vea de más y no
   de menos. */
.dj-mobile-menu__list .sub-menu.is-open {
  max-height: 6000px;
}
.dj-mobile-menu__list li.menu-item-has-children > a {
  position: relative;
  padding-right: 44px;
}
.dj-mobile-menu__list li.menu-item-has-children > a::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.1rem;
}
.dj-mobile-menu__list li.menu-item-has-children:has(> .sub-menu.is-open) > a::after {
  content: "\2212";
}

/* v3.16.2 — enlace "Ofertas" destacado arriba del menú móvil */
.dj-mobile-menu__ofertas-link {
  color: var(--dj-red, #FF0000) !important;
  font-weight: var(--dj-weight-black, 900) !important;
}

/* v9.0 — "The Lab", pegado debajo de Ofertas (mismo sitio,
   independiente del menú de verdad). Logo en blanco: el fondo del
   menú móvil es oscuro. */
.dj-mobile-menu__list--lab { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dj-mobile-menu__lab-link {
  display: flex !important;
  align-items: center;
  padding: 10px 20px !important;
}
.dj-mobile-menu__lab-img {
  display: block;
  width: auto;
  height: 24px;
  transition: opacity .25s ease;
}
a.dj-mobile-menu__lab-link:hover { color: #fff !important; }
a.dj-mobile-menu__lab-link:hover .dj-mobile-menu__lab-img { opacity: .75; }
.dj-mobile-menu__lab-link--pendiente { cursor: default; }

.dj-mobile-menu__footer {
  padding: 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.dj-mobile-menu__footer .dj-btn { flex: 1; }

.dj-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.dj-mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Bloquear scroll del body cuando el menú móvil está abierto */
body.dj-menu-open {
  overflow: hidden;
}


/* ===========================================================
   RESPONSIVE
   =========================================================== */

/* Tablet (≤1024px): ocultamos el menú horizontal, mostramos hamburguesa */
@media (max-width: 1024px) {
  .dj-nav { display: none; }
  .dj-hamburger { display: flex; }
}

/* Tablet / móvil grande (≤768px) */
@media (max-width: 768px) {
  .dj-topbar__msg { font-size: 0.68rem; }

  /* En celular el logo completo, solo un poco más chico */
  .dj-header .dj-logo__img,
  .dj-logo__img { height: 34px !important; max-width: 160px !important; }

  .dj-header__inner { gap: 12px; padding-top: 12px; padding-bottom: 12px; }

  .dj-action-btn { width: 38px; height: 38px; }
}

/* Móvil pequeño (≤480px) */
@media (max-width: 480px) {
  .dj-container { padding: 0 12px; }
  .dj-topbar__msg { font-size: 0.62rem; letter-spacing: 0.2px; }
  .dj-search-form__input { font-size: 0.9rem; }
  .dj-header .dj-logo__img,
  .dj-logo__img { height: 30px !important; max-width: 138px !important; }
}


/* ===========================================================
   v3.15 — EL BUSCADOR, SIEMPRE ABIERTO
   -----------------------------------------------------------
   Antes vivía detrás de una lupa: había que tocarla para que se
   desplegara. Ese toque de más es justo el que separa a quien ya
   sabe lo que quiere de encontrarlo — y en una tienda con miles de
   referencias, el buscador vende más que cualquier menú.

   Ahora está a la vista en las dos versiones:
     COMPUTADORA → al lado del menú, en la misma fila.
     CELULAR/TABLET → debajo del logo, a todo el ancho.

   El botón de la lupa desapareció del HTML y su JavaScript también:
   un botón que abre algo que ya está abierto no es un botón, es un
   estorbo.
   =========================================================== */

/* --- Base común: deja de ser un panel que se despliega --- */
.dj-search-bar {
  position: static;
  max-height: none;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.dj-search-bar .dj-container {
  max-width: none;
  padding: 0;
  width: 100%;
}
.dj-search-form {
  padding: 0;
  gap: 8px;
}

/* La caja: borde propio, para que se lea como un campo de escribir
   y no como una raya suelta en mitad de la cabecera. */
.dj-search-form__input {
  border: 1px solid #dcdce4;
  border-bottom: 1px solid #dcdce4;
  border-radius: var(--dj-radius-sm, 4px);
  padding: 10px 14px;
  font-size: 0.9rem;
  background: #fff;
  min-width: 0;              /* que pueda encogerse sin desbordar */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dj-search-form__input:focus {
  border-color: var(--dj-red, #FF0000);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}
.dj-search-form__submit {
  width: 40px;
  height: 40px;
  border-radius: var(--dj-radius-sm, 4px);
  transition: background-color 0.2s ease;
}
.dj-search-form__submit:hover { background: var(--dj-red-dark, #C40000); }


/* -----------------------------------------------------------
   COMPUTADORA (1025 en adelante): en la misma fila que el menú
   ----------------------------------------------------------- */
@media (min-width: 1025px) {

  /* El orden en el HTML es logo → menú → acciones → buscador.
     En pantalla queremos logo → menú → BUSCADOR → acciones, y eso
     se resuelve con `order` sin tocar el HTML (que además importa
     para quien navega con teclado o lector de pantalla). */
  .dj-logo       { order: 1; }
  .dj-nav        { order: 2; }
  .dj-search-bar { order: 3; }
  .dj-actions    { order: 4; }

  .dj-search-bar {
    flex: 0 1 300px;
    width: auto;
  }
  .dj-search-form__input { padding: 9px 13px; font-size: 0.86rem; }
  .dj-search-form__submit { width: 38px; height: 38px; }

  /* El menú deja de estirarse a todo lo ancho: ahora comparte la
     fila con el buscador. */
  .dj-nav { flex: 0 1 auto; }
}


/* -----------------------------------------------------------
   CELULAR Y TABLET: debajo del logo, a todo el ancho
   ----------------------------------------------------------- */
@media (max-width: 1024px) {

  /* La cabecera pasa a dos renglones: arriba logo y botones,
     abajo el buscador entero. */
  .dj-header__inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .dj-search-bar {
    order: 9;                /* el último: siempre debajo */
    flex: 0 0 100%;
    width: 100%;
  }

  /* 16px de letra o iOS amplía la página sola al tocar el campo, y
     el cliente se encuentra la web gigante justo cuando iba a
     escribir. */
  .dj-search-form__input {
    font-size: 16px;
    padding: 11px 14px;
  }
  .dj-search-form__submit {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .dj-search-form__input { font-size: 16px; padding: 10px 12px; }
  .dj-search-form__submit { width: 42px; height: 42px; }
  .dj-header__inner { row-gap: 8px; }
}


/* ===========================================================
   v3.16 — "BUSCAR" FIJO Y LAS PALABRAS PASANDO
   -----------------------------------------------------------
   El texto gris de dentro de un campo (el `placeholder`) no se
   puede animar: lo pinta el navegador, no es un elemento de la
   página. Por eso el campo va SIN placeholder y encima se dibuja
   uno de mentira que sí se puede mover.

   "Buscar" se queda quieto —es la instrucción, tiene que leerse
   siempre— y a su derecha van entrando las palabras, una a una,
   desde la derecha. Cada una es una idea de compra que el cliente
   igual no traía al entrar.

   Todo esto se apaga en cuanto toca el campo: a partir de ahí lo
   único que importa es lo que él escribe.
   =========================================================== */
.dj-search-form__field {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
}
.dj-search-form__field .dj-search-form__input {
  width: 100%;
}

.dj-search-form__ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;     /* el clic siempre llega al campo */
  overflow: hidden;
  white-space: nowrap;
  color: #8a8a95;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

/* Al escribir o al enfocar, el fantasma se aparta */
.dj-search-form__input:focus ~ .dj-search-form__ghost,
.dj-search-form__field.is-typing .dj-search-form__ghost {
  opacity: 0;
}

.dj-search-form__ghost-fijo {
  flex: 0 0 auto;
  color: #6a6a75;
}

/* La palabra que va cambiando */
.dj-search-form__rota {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dj-red, #FF0000);
  font-weight: var(--dj-weight-semibold, 600);
  will-change: transform, opacity;
}

/* Entra desde la derecha… */
.dj-search-form__rota.is-in {
  animation: dj-palabra-entra 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* …y sale por la izquierda. De derecha a izquierda, como se lee. */
.dj-search-form__rota.is-out {
  animation: dj-palabra-sale 0.3s ease-in both;
}

@keyframes dj-palabra-entra {
  from { opacity: 0; transform: translate3d(22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dj-palabra-sale {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(-22px, 0, 0); }
}

/* Quien pidió menos movimiento ve una palabra fija (la que le haya
   tocado al azar) y ninguna animación. */
@media (prefers-reduced-motion: reduce) {
  .dj-search-form__rota,
  .dj-search-form__rota.is-in,
  .dj-search-form__rota.is-out {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  .dj-search-form__ghost { font-size: 0.95rem; left: 14px; }
}
@media (max-width: 480px) {
  .dj-search-form__ghost { font-size: 0.88rem; left: 12px; }
}


/* ===========================================================
   v9.9.15 — TRES ARREGLOS DEL CELULAR (sobre todo iPhone)
   =========================================================== */

/* -----------------------------------------------------------
   1. EL MENÚ: TODOS LOS HIJOS ALINEADOS
   -----------------------------------------------------------
   El bug de "Atletismo": la sangría de los submenús se le daba
   SOLO a los que tienen hijos —
   `.sub-menu li.menu-item-has-children > a { padding-left: 42px }`—
   porque esa reserva se pensó para el "+" y el isologo. Un hijo
   sin hijos propios (Atletismo, dentro de Deportes) se quedaba
   con la sangría base de 20 px y aparecía 22 px más a la
   izquierda que sus hermanos: leído desde el teléfono parecía
   que ya no era parte del grupo.

   Ahora la sangría la da el NIVEL, no el hecho de tener hijos.
   ----------------------------------------------------------- */
.dj-mobile-menu__list .sub-menu > li > a {
  padding-left: 42px;
}
/* Tercer nivel (ej. Kettlebells dentro de Fuerza): un escalón más,
   para que se vea de un vistazo de quién cuelga cada cosa. */
.dj-mobile-menu__list .sub-menu .sub-menu > li > a {
  padding-left: 56px;
}
.dj-mobile-menu__list .sub-menu .sub-menu li.menu-item-has-children::before {
  left: 34px;
}

/* -----------------------------------------------------------
   2. QUE NO SE "BUGUEE" AL ABRIR Y CERRAR CATEGORÍAS
   -----------------------------------------------------------
   El estado abierto se marcaba únicamente con `:has()`. Safari lo
   soporta, pero en iOS 16 y anteriores no siempre recalcula el
   `:has()` de un ancestro cuando el JavaScript cambia una clase
   dentro: el submenú se abre y el "+" se queda en "+", o la
   barrita roja no enciende hasta que tocas otra cosa. Se ve como
   si el menú se hubiera trabado.

   El JavaScript ahora marca también el <li> con `.is-abierto`, y
   estas reglas —una clase normal, sin `:has()`— son las que
   mandan de verdad. Las de `:has()` se quedan como respaldo por
   si el JS no llegara a correr.
   ----------------------------------------------------------- */
.dj-mobile-menu__list li.menu-item-has-children.is-abierto > a::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
  box-shadow: 0 0 8px 1px rgba(255, 0, 0, 0.7);
}
.dj-mobile-menu__list li.menu-item-has-children.is-abierto::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.22s;
}
.dj-mobile-menu__list li.menu-item-has-children.is-abierto > a::after {
  content: "\2212";
}

/* -----------------------------------------------------------
   3. EL LOGO BORROSO AL ABRIR EL CARRITO (iOS)
   -----------------------------------------------------------
   No es una foto mala ni un filtro: es cómo compone Safari en el
   iPhone. Al abrir el panel del carrito, ese panel se anima con
   `transform` y Safari crea una capa nueva; mientras la anima,
   vuelve a rasterizar las capas que tiene detrás — y la cabecera,
   que es `position: sticky`, es una de ellas. Si le toca
   rasterizarla a 1x en vez de a la densidad real del iPhone, el
   logo se ve emborronado, como con un desenfoque gaussiano. Por
   eso pasa "a veces": depende de si le da tiempo a rehacerla.

   La solución es adelantarse: se le da al logo su propia capa
   desde el principio, ya rasterizada a la densidad correcta, para
   que Safari no tenga que rehacerla en mitad de la animación.
   ----------------------------------------------------------- */
.dj-logo__img,
.dj-mobile-menu__header img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}