/* ==========================================================================
   MEGA MENÚ — Hechizos de Amor
   CSS único del header nuevo (activo solo con hda_megamenu_enabled = 1).
   Todo color sale de una custom property --mm-*; el tema fúnebre solo
   redefine esas properties, nunca repite selectores de layout.
   Pixel-perfect a 1820px de viewport; fluido con clamp() por debajo;
   layout de escritorio desde 1024px, drawer móvil por debajo de 1024px.
   ========================================================================== */

/* ===== 1. Tokens — tema floral (default) ===== */
.hda-header,
.hda-drawer,
.hda-drawer-backdrop {
  --mm-brand: #960946;
  --mm-strip: #EFDAE3;
  --mm-panel: #FDE8DE;
  --mm-panel-edge: #F6DACE;
  --mm-on-brand: #F1E0E6;
  --mm-cta-text: #FFF6F9;
  --mm-divider: #F2D9CD;
  --mm-track: #F2D5C8;
  --mm-chip: #FCEFE7;
  --mm-hover: #FFFFFF;
  --mm-backdrop: rgba(0, 0, 0, .25);
  --mm-shadow: rgba(60, 40, 50, .18);
}

/* ===== 2. Tokens — tema fúnebre (body.hda-funeral-theme) ===== */
body.hda-funeral-theme .hda-header,
body.hda-funeral-theme .hda-drawer,
body.hda-funeral-theme .hda-drawer-backdrop {
  --mm-brand: #4B5568;
  --mm-strip: #D4D7DB;
  --mm-panel: #D4D7DB;
  --mm-panel-edge: #C7CBD1;
  --mm-on-brand: #FEF3E7;
  --mm-cta-text: #FEF3E7;
  --mm-divider: #C5C9D0;
  --mm-track: #C0C5CD;
  --mm-chip: #E8EAEE;
}

/* ===== 3. Reset local — el sitio pone color/decoración/mayúsculas globales
   en <a> y <button>; el componente hereda solo de sí mismo. ===== */
.hda-header, .hda-drawer, .hda-drawer-backdrop, .hda-header *, .hda-drawer * {
  box-sizing: border-box;
}
/* :where() envuelve el selector de elemento (a, button) para que esta regla
   quede en especificidad (0,1,0) — la misma que ".hda-mm__link", ".hda-mm__cta",
   etc. Sin :where() el compuesto ".hda-header a" pesa (0,1,1) y le gana SIEMPRE
   a esas clases de un componente sin importar el orden del archivo (la
   especificidad decide antes que el orden de cascada): el color/fondo de cada
   componente quedaba pisado por este reset. Con la misma especificidad, gana
   la regla declarada DESPUÉS en el archivo — que es cada componente, todos
   más abajo que esta sección — y el reset sigue ganándole a los selectores
   sueltos del tema (`a { color: … }` de Astra, especificidad (0,0,1)). */
.hda-header :where(a, button),
.hda-drawer :where(a, button) {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
  text-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
/* F1b (reposo): el reset de arriba queda en (0,1,0) por el :where(), pero el
   verdadero rival no es un "button" global de Astra sino
   ".elementor-kit-840 button, .elementor-kit-840 input[type=button], …" en
   (0,1,1) — le gana al reset incluso SIN hover/focus (confirmado con
   getComputedStyle antes de cualquier interacción). El bloque de abajo (F1)
   solo cubre :hover/:focus/:active; en reposo seguía viéndose el texto
   doblado en los sublinks del drawer, "Regresar" y los íconos del header.
   Mismo truco que F4 (prefijo de componente para subir a (0,2,0)), pero acá
   sobre los elementos concretos porque no hay estado que lo dispare. */
.hda-header .hda-header__burger,
.hda-header .hda-header__util,
.hda-drawer .hda-drawer__link,
.hda-drawer .hda-drawer__back {
  text-shadow: none;
}
/* F1/F1b: Astra pone fondo beige y sombra de texto doble en botón/enlace al
   pasar el mouse o enfocar ("button:focus, button:hover, .menu-toggle:hover…"
   en (0,1,1)); con el prefijo de componente subimos a (0,2,0) para ganarle
   siempre, sea cual sea el orden de las hojas. */
.hda-header :where(a, button):hover,
.hda-header :where(a, button):focus,
.hda-header :where(a, button):active,
.hda-drawer :where(a, button):hover,
.hda-drawer :where(a, button):focus,
.hda-drawer :where(a, button):active {
  background: none;
  box-shadow: none;
  text-shadow: none;
}
/* F15: el foco se mueve por JS al abrir panel/drawer, así que no matchea
   :focus-visible y aparece el anillo punteado de Astra ("a:focus{outline:
   dotted}"). Lo apagamos solo cuando el foco NO es de teclado; :focus-visible
   sigue intacto (regla 9, más abajo) para el usuario que navega con Tab. */
.hda-header :where(a, button):focus:not(:focus-visible),
.hda-drawer :where(a, button):focus:not(:focus-visible) {
  outline: none;
}
.hda-header svg, .hda-drawer svg { display: block; flex: none; }

/* ===== 4. Spacer — reserva el alto del header fijo, evita CLS ===== */
.hda-header-spacer { display: block; height: 162px; }
/* G1: sin esto el 162px de arriba pisa el 86px que el bloque movil (§12)
   declara para el header a <1024px — quedaban 76px vacios bajo el header
   en cada carga movil. */
@media (max-width: 1023.98px) {
  .hda-header-spacer { height: 86px; }
}

/* ===== 5. Header fijo ===== */
.hda-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease;
}
.hda-header.is-hidden { transform: translateY(-100%); }

/* ===== 6. Franja de envío ===== */
.hda-header__strip {
  order: 0;
  position: relative;
  height: 44px;
  background: var(--mm-strip);
  overflow: hidden;
}
.hda-header__strip-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 24px;
  color: var(--mm-brand);
  font: 400 18px/1.2 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.hda-header__strip-msg.is-active { opacity: 1; }

/* ===== 7. Barra principal ===== */
.hda-header__bar {
  order: 1;
  position: relative;
  height: 118px;
  background: var(--mm-brand);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: clamp(24px, 6.6vw, 120px);
}

/* -- Logo -- */
.hda-header__logo { display: flex; align-items: center; }
/* F7 (corregido): "clamp(min, Nvw, max)" con N = max/1820*100 solo toca el piso
   "min" muy por debajo de 1024px (acá: recién en ~740px) — en TODO el rango de
   escritorio (1024-1820) el valor real quedaba más cerca del techo que del
   piso. Fórmula de dos puntos (ancla 1024px→min, 1820px→max) para que el piso
   se alcance EXACTO en 1024px, como dice el comentario original. */
.hda-header__logo img { display: block; width: clamp(150px, calc(150px + (100vw - 1024px) * 0.08794), 220px); height: auto; }

/* -- Hamburguesa (solo mobile) -- */
.hda-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
}
.hda-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--mm-on-brand);
}

/* -- Nav de escritorio (columna "auto" del grid: ya centrada por el 1fr/1fr) -- */
.hda-mm__list {
  display: flex;
  align-items: center;
  /* F7 (corregido): idem nota de ".hda-header__logo img" — era el mayor
     responsable del desborde a 1024px: con la fórmula vieja este gap medía
     42.8px ahí (no 20px), es decir 22.8px de más × 5 huecos = 114px que le
     faltaron a la barra y que el logo y el nav terminaban tocándose. */
  gap: clamp(20px, calc(20px + (100vw - 1024px) * 0.07035), 76px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Prefijo ".hda-header" en ".hda-mm__link"/".hda-mm__cta"/".hda-mm__aside-link"
   (especificidad (0,2,0)+): el sitio trae reglas globales "a:hover, a:focus"
   ((0,1,1)) que, sin este prefijo, le ganan a la clase sola ((0,1,0)) — pasa
   de verdad en cuanto el usuario pasa el mouse o el teclado mueve el foco
   (megamenu.js SIEMPRE mueve el foco al abrir un panel/drawer). Con el
   prefijo estas reglas ganan siempre, en cualquier estado. */
.hda-header .hda-mm__link {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  color: var(--mm-on-brand);
  font: 400 18px/1.2 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  /* F7: a 1366px "Inicio" queda pegado al logo y a 1280px desborda; fluido
     entre 1024 y 1820px (fórmula de dos puntos, ver nota en el gap de
     ".hda-mm__list" más arriba), mismo line-height 1.2 del shorthand. */
  font-size: clamp(15px, calc(15px + (100vw - 1024px) * 0.00377), 18px);
  white-space: nowrap;
}
.hda-header .hda-mm__link:hover,
.hda-header .hda-mm__link:focus-visible { color: var(--mm-hover); }
.hda-mm__chevron { width: 12px; height: 8px; transition: transform .2s ease; }
.hda-mm__link--toggle[aria-expanded="true"] .hda-mm__chevron { transform: rotate(180deg); }

/* -- Utilidades -- */
.hda-header__utils {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* F7 (corregido): misma fórmula de dos puntos. */
  gap: clamp(18px, calc(18px + (100vw - 1024px) * 0.01884), 33px);
}
.hda-header__util { position: relative; display: flex; }
.hda-header__util svg { color: var(--mm-on-brand); }
/* F4/F13: header.css (global) trae ".zenth-cart-icon svg{fill:currentColor}"
   y ".zenth-search-icon:hover{color:rosa}". Prefijo ".hda-header" en las
   reglas de tamaño/relleno para subir a (0,2,x) y no depender del orden. */
.hda-header .hda-header__util--account svg,
.hda-header .hda-header__util--search svg { width: 30px; height: 30px; }
.hda-header__util--cart svg { width: 32px; height: 32px; }
.hda-header .hda-header__util--cart svg { fill: none; }
.hda-header .hda-header__util:hover svg,
.hda-header .hda-header__util:focus-visible svg { color: var(--mm-hover); }
.hda-header .zenth-cart-icon__count {
  position: absolute;
  top: 1px;
  right: -1px;
  width: 7px;
  height: 7px;
  /* header.css (global, sigue cargando para el buscador/carrito) declara
     min-width:18px y padding:0 5px en .zenth-cart-icon__count: hay que pisarlos
     o el punto de 7 px sale como una pildora de 18x7. */
  min-width: 7px;
  padding: 0;
  line-height: 7px;
  border-radius: 999px;
  background: var(--mm-on-brand);
  overflow: hidden;
  text-indent: -999px;
}
/* F6: con ítems en el carrito, megamenu.js pone "has-items" en el botón y el
   punto se convierte en la burbuja numérica del diseño. */
.hda-header .hda-header__util--cart.has-items .zenth-cart-icon__count {
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  top: -5px;
  right: -8px;
  text-indent: 0;
  overflow: visible;
  font: 700 10px/16px 'Founders Grotesk Official', sans-serif;
  color: var(--mm-brand);
  text-align: center;
}

/* ===== 8. Panel del mega menú ===== */
.hda-mm__panels { position: absolute; top: 100%; left: 0; right: 0; }
.hda-mm__panel {
  background: var(--mm-panel);
  border-bottom: 1px solid var(--mm-panel-edge);
  border-radius: 0 0 40px 40px;
  padding: 44px clamp(24px, 6.6vw, 120px) 40px;
  display: grid;
  /* Columna lateral fluida entre 1024 px (240) y 1820 px (436), continua: dos
     regimenes con media query producian un salto de 20 px en las tarjetas al
     cruzar 1440. Formula de dos puntos: 240 + (100vw - 1024) * 196 / 796. */
  grid-template-columns: minmax(0, 1fr) clamp(240px, calc(240px + (100vw - 1024px) * 196 / 796), 436px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease-out, transform .16s ease-out;
}
.hda-mm__panel.is-open { opacity: 1; transform: translateY(0); }

/* -- Tarjetas -- */
.hda-mm__cards {
  display: flex;
  /* gap 16 -> 32 y padding-left 0 -> 32 entre 1024 y 1820 px, continuos (misma
     formula de dos puntos que la columna lateral). A 1820 dan exactamente 32/32. */
  gap: clamp(16px, calc(16px + (100vw - 1024px) * 16 / 796), 32px);
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(0px, calc((100vw - 1024px) * 32 / 796), 32px);
}
.hda-mm__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 1 240px;
  /* G8: piso de 150px — a 1024px la columna lateral cede a 240px y sobran
     600px para 4 tarjetas + 3 gaps de 16px = 150px c/u, justo el piso. */
  min-width: 150px;
}
.hda-mm__card:hover { opacity: .86; }
.hda-mm__card-img {
  display: block;
  width: min(200px, 100%);
  aspect-ratio: 200 / 240;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 auto;
}
.hda-mm__card-title {
  margin: 20px 0 0;
  min-height: 60px;
  color: var(--mm-brand);
  /* 500 como pide el README. Qalogre fit autohospedada tiene una sola cara (400):
     el navegador usa esa cara sin sintetizar (solo sintetiza desde 600), asi que
     hoy se ve igual; si algun dia se instala la cara 500, entra sola. */
  font: 500 23px/30px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
  text-wrap: balance;
  /* G5: el padre (.hda-mm__card) tiene align-items:center, que encoge esta
     caja al ancho del texto — text-wrap:balance terminaba actuando sobre
     una caja mas angosta que la tarjeta. */
  align-self: stretch;
  width: 100%;
}

/* -- Columna de enlaces + CTA -- */
.hda-mm__aside { padding-top: 56px; min-width: 0; }
.hda-header .hda-mm__aside-link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  color: var(--mm-brand);
  font: 400 16px/20px 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
}
.hda-header .hda-mm__aside-link:hover,
.hda-header .hda-mm__aside-link:focus-visible { opacity: .75; }
.hda-mm__aside-label { width: 210px; max-width: calc(100% - 42px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hda-mm__arrow { width: 26px; height: 12px; }
.hda-header .hda-mm__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  width: min(340px, 100%);
  height: 48px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--mm-brand);
  color: var(--mm-cta-text);
  font: 400 17px/1.2 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
}
.hda-header .hda-mm__cta:hover,
.hda-header .hda-mm__cta:focus-visible { opacity: .9; }

/* G8: entre 1024 y 1440px la columna lateral (minmax(300px,436px) en §8) no
   cedia y las tarjetas absorbian todo el achique (81px a 1024, 137 a 1280).
   Reducimos el piso de esa columna y el resto del panel para dejarle a las
   tarjetas su piso real de 150px (calculo en el comentario de .hda-mm__card
   de arriba; a 1366px da 200px, el techo). A 1440+ vuelve el minmax de §8. */
/* ===== 9. Foco visible — nunca outline:none ===== */
.hda-header__bar :is(a, button):focus-visible {
  outline: 2px solid var(--mm-on-brand);
  outline-offset: 3px;
}
.hda-mm__panels :is(a, button):focus-visible,
.hda-drawer :is(a, button):focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

/* ===== 10. Drawer móvil — backdrop ===== */
.hda-drawer-backdrop {
  position: fixed;
  top: 86px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: var(--mm-backdrop);
}

/* ===== 11. Drawer móvil — panel ===== */
.hda-drawer {
  position: fixed;
  top: 86px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: min(333px, 82vw);
  background: var(--mm-panel);
  border-radius: 0 30px 30px 0;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s ease;
}
.hda-drawer.is-open { transform: translateX(0); visibility: visible; }
.hda-drawer::-webkit-scrollbar { width: 6px; }
.hda-drawer::-webkit-scrollbar-thumb { background: var(--mm-panel-edge); border-radius: 999px; }
body.hda-drawer-open { overflow: hidden; }
/* G3: con el drawer abierto, la barra fixed de hechizos-lead-cta (.hz-sticky,
   z-index 99999, movil <=782px) y el flotante .hda-wa tapan el pie del
   drawer (sociales + Mi Cuenta, no clickeables). El drawer ya trae su
   propio CTA de WhatsApp. */
body.hda-drawer-open .hz-sticky,
body.hda-drawer-open .hda-wa {
  display: none;
}

.hda-drawer__divider { height: 0; margin: 0; border: 0; border-top: 1px solid var(--mm-divider); }

/* -- Nivel raíz -- */
.hda-drawer__list {
  margin: 0;
  padding: 24px 40px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* Mismo motivo que ".hda-header .hda-mm__link" arriba: el sitio trae
   "a:hover, a:focus" en (0,1,1), que sin el prefijo ".hda-drawer" le gana a
   la clase sola. El drawer abre moviendo el foco a "Inicio" (megamenu.js) —
   así que esto se dispara SIEMPRE que se abre el drawer, no solo al pasar
   el mouse. */
.hda-drawer .hda-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--mm-brand);
  font: 400 28px/30px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
  text-align: left;
  /* Objetivo táctil 44px sin mover el texto: 7px de relleno arriba/abajo
     compensados con el mismo margen negativo, así el gap visual sigue en 15px. */
  padding-block: 7px;
  margin-block: -7px;
}
.hda-drawer__screen--root .hda-drawer__divider { margin-top: 22px; }
.hda-drawer__interest {
  margin: 0;
  padding: 22px 40px 0;
  text-align: center;
  color: var(--mm-brand);
  font: 400 22px/26px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
}

/* -- Nivel categoría -- */
.hda-drawer__screen:not(.hda-drawer__screen--root) .hda-drawer__divider { margin-top: 24px; }
.hda-drawer .hda-drawer__back {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 40px 0;
  color: var(--mm-brand);
  font: 400 19px/1.2 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
}
.hda-drawer__title {
  margin: 0;
  padding: 34px 40px 0;
  color: var(--mm-brand);
  font: 400 46px/50px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
}
.hda-drawer__sublist {
  margin: 0;
  padding: 34px 40px 0 60px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hda-drawer .hda-drawer__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--mm-brand);
  font: 400 19px/22px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
  /* mismo truco de 44px que .hda-drawer__link, sobre línea de 22px */
  padding-block: 11px;
  margin-block: -11px;
}

/* -- Bloque inferior (común a las 5 pantallas) -- */
.hda-drawer__bottom { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; }
.hda-drawer__carousel-wrap { position: relative; }
.hda-drawer__carousel {
  display: flex;
  gap: 28px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* F5: el snap ignora el padding del contenedor; sin esto la primera
     tarjeta queda pegada al borde izquierdo al hacer snap-back. */
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.hda-drawer__carousel::-webkit-scrollbar { display: none; }
.hda-drawer__card {
  position: relative;
  flex: none;
  width: 183px;
  height: 234px;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
}
.hda-drawer__card:hover { opacity: .92; }
.hda-drawer__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hda-drawer__chip {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  overflow: hidden;
  border-radius: 10px;
  padding: 9px 8px;
  background: var(--mm-chip);
  color: var(--mm-brand);
  font: 400 14px/16px 'Qalogre fit', 'Cormorant Garamond', Georgia, serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hda-drawer__next {
  position: absolute;
  top: 99px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-chip);
  box-shadow: 0 2px 8px var(--mm-shadow);
}
.hda-drawer__next:hover { background: var(--mm-hover); }
.hda-drawer__next svg { width: 18px; height: 12px; color: var(--mm-brand); }

.hda-drawer__progress {
  margin: 20px 20px 0;
  height: 4px;
  border-radius: 999px;
  background: var(--mm-track);
  overflow: hidden;
}
.hda-drawer__progress-fill {
  width: 0;
  height: 100%;
  background: var(--mm-brand);
  transition: width .2s ease;
}

.hda-drawer .hda-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 252px;
  height: 36px;
  margin: 26px auto 0;
  border-radius: 999px;
  background: var(--mm-brand);
  color: var(--mm-cta-text);
  font: 400 13px/1.2 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
}
.hda-drawer .hda-drawer__cta:hover,
.hda-drawer .hda-drawer__cta:focus-visible { opacity: .9; }

/* .hda-drawer__all vive escondido por [hidden]; solo declaramos su display
   "visible" bajo :not([hidden]) para no pelear contra el atributo (ver §13). */
.hda-drawer__all:not([hidden]) {
  display: block;
  text-align: center;
  padding: 18px 40px 0;
  color: var(--mm-brand);
  font-size: 13px;
}

/* -- Footer (solo raíz) — mismo truco que .hda-drawer__all -- */
.hda-drawer__footer:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding: 18px 24px 0;
  border-top: 1px solid var(--mm-divider);
}
.hda-drawer__social { display: flex; align-items: center; gap: 18px; }
.hda-drawer__social svg { width: 22px; height: 22px; color: var(--mm-brand); }
.hda-drawer .hda-drawer__account {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--mm-brand);
  font-size: 12px;
}
.hda-drawer__account svg { width: 21px; height: 21px; }

/* ===== 12. Mobile <1024px — segundo markup, no un reflow ===== */
@media (max-width: 1023.98px) {
  .hda-header__strip { order: 2; height: 24px; }
  .hda-header__strip-msg { padding: 0 16px; font-size: 11px; }

  .hda-header__bar { order: 0; height: 62px; padding-inline: 26px; }
  .hda-header__logo img { width: 104px; }
  .hda-header__burger { display: flex; }
  .hda-header__nav { display: none; }
  .hda-mm__panels { display: none; }

  .hda-header__utils { gap: 20px; }
  .hda-header__util--account { display: none; }
  .hda-header .hda-header__util--search svg { width: 21px; height: 21px; }
  .hda-header .hda-header__util--cart svg { width: 22px; height: 22px; }
}

/* ===== 13. [hidden] siempre gana — del contrato de markup ===== */
.hda-mm__panel[hidden],
.hda-drawer__carousel[hidden],
.hda-drawer[hidden],
[data-hda-screen][hidden] {
  display: none !important;
}

/* ===== 14. Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  .hda-header,
  .hda-header__strip-msg,
  .hda-mm__panel,
  .hda-mm__chevron,
  .hda-drawer,
  .hda-drawer__progress-fill {
    transition: none;
  }
}