/**
 * Carrito vacío v2 — estado vacío nuevo + paleta fúnebre del drawer + botón × .
 *
 * Encolar SOLO cuando hda_cart_empty_v2_enabled() sea verdadero (CONTRATO §1.3 y
 * §5): con el flag apagado este archivo ni siquiera se pide, así que no hace
 * falta gatear nada acá adentro por opción — todo lo que sigue asume que el
 * markup nuevo ya está en el DOM.
 *
 * Fuente de paridad: scratchpad/proto/final/prototipo-carrito-vacio.html
 * (aprobado por el dueño) y sus medidas en measure-final-out.json. Los
 * valores de tipografía/espaciado de la sección 1 están copiados literales
 * de ese prototipo — no son estimaciones.
 *
 * ---------------------------------------------------------------------------
 * 2026-09-04 — RONDA 3, dos cambios sobre la versión anterior de este archivo:
 *
 * A) CAMBIO DE ENFOQUE (el PHP ahora emite LAS DOS variantes siempre). El
 *    intento anterior decidía el tema (floral/fúnebre) EN PHP, adivinando por
 *    página o por el REFERER en AJAX. Fallaba de forma estructural: WooCommerce
 *    cachea el fragmento del carrito en sessionStorage bajo una clave que
 *    depende del CONTENIDO del carrito, no de la página — así que navegar de
 *    una página floral a una fúnebre en la misma pestaña repintaba el panel
 *    desde el fragmento cacheado del tema anterior, con 0 peticiones de red,
 *    sin que ningún arreglo de servidor pudiera interceptarlo. Ahora el HTML
 *    es IDÉNTICO en todo el sitio (las 2 variantes siempre presentes) y es
 *    ESTE archivo el que decide cuál se ve, con `body.hda-funeral-theme` —
 *    el mismo mecanismo que ya usa el resto del sitio (mega menú, skin
 *    fúnebre). Con el HTML siempre igual, el fragmento cacheado por
 *    WooCommerce siempre es válido: el bug de fondo desaparece por
 *    completo, no se parchea.
 *
 *    Markup real que produce cart-empty.php (hda_cart_empty_render_variant):
 *      <div class="zenth-cart-empty hda-cart-empty">
 *        <div class="hda-cart-empty__var hda-cart-empty__var--floral"  data-hda-tema="floral">…</div>
 *        <div class="hda-cart-empty__var hda-cart-empty__var--funebre" data-hda-tema="funebre">…</div>
 *      </div>
 *    La sección 1.0 de abajo es el selector de variante: sólo CSS, sin JS y
 *    sin PHP condicional. La variante oculta va display:none (no visibility,
 *    no opacity) — hace falta display:none para que sus fotos (con
 *    loading=lazy + hidden, gotcha 55) no se descarguen nunca, y para que
 *    sus enlaces no sean alcanzables por Tab.
 *
 * B) BLOQUEANTE #4 (scratchpad/BLOQUEANTE-4.md) — el fondo --mm-panel se
 *    pintaba sólo sobre el bloque del estado vacío, no sobre el drawer
 *    completo: quedaban franjas blancas arriba (header con el ×) y abajo.
 *    El fondo ahora va en el DRAWER (sección "BLOQUEANTE #4" más abajo),
 *    con :has(), la misma técnica que ya usa 1.7 para ocultar el <h2> — y
 *    por eso sigue sola a las transiciones AJAX sin trabajo extra
 *    (cart.js:361 mantiene la clase --body--empty en esa transición).
 *    Efecto en cadena, ambos documentados donde ocurren:
 *      - .hda-cart-empty y .hda-cart-empty__var YA NO pintan fondo ni
 *        border-bottom propios (antes tenían --mm-panel y un
 *        border-bottom: 4px solid --mm-panel-edge). Con el fondo ahora
 *        continuo en todo el drawer, ese borde quedaría flotando en medio
 *        de un fondo del mismo color (aviso #4 del bloqueante) — se quita,
 *        no se reemplaza.
 *      - El botón × (sección 3) gana un borde --mm-brand SÓLO en este
 *        mismo estado: medido, --mm-chip (su fondo) contra el nuevo
 *        --mm-panel da ~1,05:1 (floral) / ~1,20:1 (fúnebre) — dos cremas o
 *        dos grises casi iguales, dos "cremas casi iguales" tal cual lo
 *        advertía el bloqueante. --mm-brand contra --mm-panel ya está
 *        verificado en 7,33:1 / 5,20:1 (measure-final-out.json), de sobra
 *        sobre el 3:1 de WCAG 1.4.11 para el límite de un control. El
 *        ícono en sí (× sobre --mm-chip) no cambia: seguía en 7,69:1 /
 *        6,23:1, nunca fue el problema.
 *
 * Referencias al código real del servidor, leídas el 2026-09-04 (staging)
 * para escribir los overrides de las secciones 2 y 3 (no se tocan esos
 * archivos, sólo se les gana especificidad):
 *   - wp-content/plugins/lumik-agency-widgets/assets/css/widgets/cart.css
 *     (confirma --zenth-cart-bg:#fff en .zenth-cart-root y
 *     .zenth-cart-drawer{background:var(--zenth-cart-bg)} en 0,1,0 — el
 *     fondo blanco de hoy con el carrito CON productos, que el fix de
 *     BLOQUEANTE #4 no toca porque su selector exige
 *     :has(.zenth-cart-drawer__body--empty))
 *   - wp-content/themes/astra-child/css/global/templates/header/header.css
 *   - wp-content/uploads/elementor/css/post-840.css (kit de Elementor)
 *   - CSS dinámico de Astra (astra-theme-css-inline-css, inline en <head>)
 *
 * Convención de nombres del markup nuevo: prefijo "hda-cart-empty__" (no
 * "cart-empty__", que es sólo del documento de prototipo standalone).
 */


/* ============================================================
   0) TOKENS --mm-* — fundamento de las secciones 1 y 2
   ============================================================
   .zenth-cart-root NO hereda las variables --mm-* del mega menú por cascada:
   es HERMANO de .hda-header / .hda-drawer en el DOM, no descendiente
   (verificado con getComputedStyle: valor vacío en las 5 URLs fúnebres
   probadas — CONTRATO §3.1). Hay que redeclararlas acá, con los mismos
   valores que megamenu.css, en dos bloques. .zenth-cart-drawer SÍ es
   descendiente de .zenth-cart-root (confirmado leyendo class-renderer.php:
   <div class="zenth-cart-root">…<aside class="zenth-cart-drawer">…),
   así que estas variables cascadean sin problema hasta el drawer, el header
   del drawer, y el botón ×. Contraste verificado sobre --mm-panel con
   measure-final-out.json: título/subtítulo/etiqueta/ayuda dan 7,33:1
   (floral) y 5,20:1 (fúnebre); el CTA da 8,17:1 / 6,86:1.
   ⚠️ --mm-on-brand SOLO va sobre fondo --mm-brand: sobre el panel da 1,07:1
   (floral) — prácticamente invisible. Por eso todo el texto de la sección 1
   usa --mm-brand, nunca --mm-on-brand. */
.zenth-cart-root {
  --mm-brand: #960946;
  --mm-panel: #FDE8DE;
  --mm-panel-edge: #F6DACE;
  --mm-on-brand: #F1E0E6;
  --mm-cta-text: #FFF6F9;
  --mm-chip: #FCEFE7;
}
body.hda-funeral-theme .zenth-cart-root {
  --mm-brand: #4B5568;
  --mm-panel: #D4D7DB;
  --mm-panel-edge: #C7CBD1;
  --mm-on-brand: #FEF3E7;
  --mm-cta-text: #FEF3E7;
  --mm-chip: #E8EAEE;
}


/* ============================================================
   BLOQUEANTE #4 — el fondo del panel cubre TODO el drawer,
   SÓLO cuando el carrito está vacío (scratchpad/BLOQUEANTE-4.md)
   ============================================================
   Antes el crema/gris se pintaba nada más sobre .hda-cart-empty (el bloque
   del estado vacío): el drawer quedaba con una franja blanca arriba (donde
   vive el header con el botón ×) y otra abajo. El mockup del dueño pide un
   solo color continuo de arriba a abajo del drawer.

   :has(.zenth-cart-drawer__body--empty) sigue a la MISMA clase que ya usa
   1.7 para ocultar el <h2> del título — cart.js:361 la mantiene también en
   las transiciones AJAX (agregar/vaciar el carrito sin recargar), así que
   este fondo aparece y desaparece solo, sin trabajo extra, en esa
   transición.

   Con productos (sin esa clase) el selector no matchea: el fondo vuelve al
   blanco de siempre (--zenth-cart-bg del plugin, 0,1,0) — bloqueante #4,
   aviso #1. No hace falta ninguna regla adicional para eso, es la ausencia
   de match la que lo garantiza.

   Especificidad: .zenth-cart-drawer (clase) + :has(.zenth-cart-drawer__body
   --empty) (toma la especificidad de su argumento más específico, otra
   clase) = 0,2,0 — vence al 0,1,0 de .zenth-cart-drawer{background:…} del
   plugin sin importar el orden de encolado. */
.zenth-cart-drawer:has(.zenth-cart-drawer__body--empty) {
  background: var(--mm-panel);
}


/* ============================================================
   1) EL ESTADO VACÍO NUEVO (CONTRATO §2 markup, §3.1/§3.3 color/título)
   ============================================================ */

/* --- 1.0 Selector de variante ---------------------------------------
   El PHP (cart-empty.php, hda_cart_empty_render()) ya no elige: mete las
   DOS variantes siempre, como hermanas, dentro del mismo <div
   class="zenth-cart-empty hda-cart-empty">. Acá se decide cuál se ve —
   con la MISMA clase de body que ya pinta el skin fúnebre en el resto del
   sitio (hda_es_pagina_funeral(), css/load-funeral-styles.php), así que
   este selector nunca puede desincronizarse de lo que ya se ve en el
   header o el fondo de página.

   display:none (no visibility, no opacity) en la variante que no
   corresponde: es la única forma de que sus 2 <img loading="lazy" hidden>
   no se descarguen nunca (gotcha 55 — un elemento con caja de layout,
   aunque esté fuera de pantalla o transparente, el navegador igual pide
   sus imágenes lazy si están "cerca" del viewport) y de que sus 2 <a> no
   queden alcanzables por Tab mientras están ocultos. */
.zenth-cart-drawer .hda-cart-empty__var--floral {
  display: flex;
}
.zenth-cart-drawer .hda-cart-empty__var--funebre {
  display: none;
}
body.hda-funeral-theme .zenth-cart-drawer .hda-cart-empty__var--floral {
  display: none;
}
body.hda-funeral-theme .zenth-cart-drawer .hda-cart-empty__var--funebre {
  display: flex;
}

/* --- 1.1 El panel -------------------------------------------------
   Dos niveles ahora, no uno:

   .hda-cart-empty (el <div> raíz, uno solo, siempre en el DOM) es sólo un
   contenedor neutro que hospeda a las 2 variantes — el layout real (flex
   column, padding, texto centrado) se mudó a .hda-cart-empty__var, que es
   el que la sección 1.0 muestra/oculta. Igual hay que neutralizar acá la
   regla del PROPIO plugin
     .zenth-cart-empty { display:flex; ...; gap:1rem; padding:3rem 1.5rem;
                         justify-content:center; min-height:100%; }
   (cart.css, especificidad 0,1,0), que sigue matcheando este div porque la
   clase zenth-cart-empty se conserva (CONTRATO §2 regla 1, la usa el
   selector del pie). display:block + padding:0 la anulan sin pelear por
   cada propiedad suelta.

   .hda-cart-empty__var YA NO pinta fondo ni border-bottom (antes tenía
   background:var(--mm-panel) y border-bottom:4px solid var(--mm-panel-edge)
   acá mismo) — el fondo ahora es del DRAWER completo (ver "BLOQUEANTE #4"
   arriba), y ese border-bottom, si se dejaba, quedaría flotando a mitad de
   un fondo del mismo color a los dos lados (aviso #4 del bloqueante): se
   quita en vez de reemplazarse. No hay redondeo de esquina — decisión del
   dueño ("esquina del panel: sin radio"). */
.zenth-cart-drawer .hda-cart-empty {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.zenth-cart-drawer .hda-cart-empty__var {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* el contenido arranca arriba, empujado sólo
                                   por el padding-top */
  gap: 0; /* el espaciado real sale de los márgenes explícitos de cada
              hijo, más abajo — con gap puesto se sumarían y quedaría todo
              separado el doble */
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  text-align: center;
  padding: 56px 28px 40px;
}
@media (max-width: 480px) {
  /* mismo breakpoint que ya usa el plugin para pasar el drawer a 100vw
     (cart.css: @media (max-width:480px){ --zenth-cart-width:100vw }) — acá
     NO tocamos ningún ancho, sólo el espaciado interno, fluido por herencia
     del ancho real del drawer (nunca 405px fijos, CONTRATO §1). */
  .zenth-cart-drawer .hda-cart-empty__var {
    padding: 52px 20px 36px;
  }
}

/* --- 1.2 El lockup "Cesta / Vacía" ---------------------------------
   aria-hidden="true" ya viene en el markup (CONTRATO §2 regla 2): es
   tipografía decorativa, el nombre accesible real es el subtítulo de abajo.
   Qalogre fit es una fuente del sitio (plugin custom-fonts) que NO llega
   por herencia a este componente — se declara acá, con el mismo fallback
   que usa el prototipo aprobado. Sólo existe el corte 400: no forzar
   font-weight:700, el navegador lo negritearía sintéticamente y deforma
   la letra (nota del propio prototipo). */
.zenth-cart-drawer .hda-cart-empty__lockup {
  line-height: 1;
  margin: 0 0 18px;
}
.zenth-cart-drawer .hda-cart-empty__cesta,
.zenth-cart-drawer .hda-cart-empty__vacia {
  display: block;
  font-family: "Qalogre fit", "Founders Grotesk Official", serif;
  font-weight: 400;
  color: var(--mm-brand);
}
.zenth-cart-drawer .hda-cart-empty__cesta {
  font-size: 22px;
  letter-spacing: 0.5px;
}
.zenth-cart-drawer .hda-cart-empty__vacia {
  font-size: 48px;
  line-height: 0.92;
  margin-top: -2px;
}
@media (max-width: 480px) {
  .zenth-cart-drawer .hda-cart-empty__cesta { font-size: 20px; }
  .zenth-cart-drawer .hda-cart-empty__vacia { font-size: 42px; }
}

/* --- 1.3 Subtítulo -------------------------------------------------- */
.zenth-cart-drawer .hda-cart-empty__sub {
  margin: 0 0 26px;
  max-width: 350px;
  font-family: "Founders Grotesk Official", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mm-brand);
}
@media (max-width: 480px) {
  .zenth-cart-drawer .hda-cart-empty__sub {
    max-width: 335px;
    font-size: 13px;
  }
}

/* --- 1.4 Las tarjetas ------------------------------------------------
   <ul>/<li> reales (CONTRATO §2), no los <div> del documento de prototipo:
   resetear lista + usar grid de 2 columnas, igual que el prototipo. */
.zenth-cart-drawer .hda-cart-empty__cards {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .zenth-cart-drawer .hda-cart-empty__cards { gap: 12px; }
}
.zenth-cart-drawer .hda-cart-empty__card {
  min-width: 0; /* evita que un slug/etiqueta largo desborde la columna del grid */
}
.zenth-cart-drawer .hda-cart-empty__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  min-height: 44px; /* área táctil mínima del enlace completo */
  /* overflow:hidden contiene el zoom de hover de la foto (1.4) contra los
     bordes izquierdo/derecho/superior de este mismo enlace, que coinciden
     con los bordes de la foto. El markup del contrato (§2) no trae un
     <span> propio alrededor de sólo la foto —a diferencia del documento de
     prototipo, que sí lo tenía— así que el ~4% de crecimiento vertical de
     ABAJO puede asomar un par de px sobre el margen de 10px antes de la
     etiqueta durante el hover. Es cosmético y transitorio (250ms, sólo con
     mouse); verificarlo visualmente en Chrome antes de dar el CSS por
     cerrado (ver pendiente_de_probar). */
  overflow: hidden;
}
.zenth-cart-drawer .hda-cart-empty__link:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}
.zenth-cart-drawer .hda-cart-empty__link:focus:not(:focus-visible) {
  /* el foco por click de mouse no matchea :focus-visible en todos los
     navegadores; sin esto se ve el outline punteado global de Astra
     (:focus{outline:thin dotted}, leído del CSS minificado del tema —
     especificidad 0,1,0, la gana cualquier regla propia) — CONTRATO §3.5. */
  outline: none;
}

/* La foto sale con el atributo `hidden` en el markup (CONTRATO §2 regla 4,
   gotcha 55): un <img loading=lazy> oculto con visibility/opacity IGUAL se
   descarga en cada carga de página. El JS (cart-empty.js) quita `hidden` al
   abrir el drawer la primera vez.
   ⚠️ El selector va con :not([hidden]) a propósito: si le declarara
   `display` a `.hda-cart-empty__img` sin esa guarda, cualquier CSS de
   AUTOR (aunque tenga la misma especificidad 0,1,0 que la hoja de estilos
   por defecto del navegador) le gana al `[hidden]{display:none}` de la UA
   — el origen "autor" siempre pesa más que el origen "user agent",
   independientemente de la especificidad — y la foto se descargaría
   siempre, rompiendo la razón de ser del atributo `hidden`. */
.zenth-cart-drawer .hda-cart-empty__img:not([hidden]) {
  display: block;
  width: 100%;
  /* height:auto es OBLIGATORIO acá, no cosmético: el markup trae width/height
     explícitos como atributos HTML (CONTRATO §2 regla 5, para reservar
     espacio y no repetir el gotcha 9 de CLS). Un atributo HTML width/height
     se mapea como estilo de origen UA (height:220px), y una propiedad
     aspect-ratio de autor NO reemplaza una altura ya resuelta — sólo rellena
     la dimensión que esté en auto. Sin este height:auto, el div de la
     tarjeta anda a 100% de ancho (buscando el auto real, medido en QA local:
     186px) pero la foto queda con los 220px LITERALES del atributo, dando
     una relación 0,73 en vez de 0,845 — se ve "aplastada" en cualquier
     ancho de grilla que no sea 186px exactos. Confirmado con getBoundingClientRect
     en el arnés de QA de este mismo archivo antes de este fix. */
  height: auto;
  aspect-ratio: 186 / 220; /* valor real del prototipo aprobado */
  object-fit: cover;
  background: var(--mm-chip); /* placeholder mientras carga / si el PNG tiene alfa */
  transition: transform 0.25s ease;
  transform-origin: center;
}
.zenth-cart-drawer .hda-cart-empty__link:hover .hda-cart-empty__img,
.zenth-cart-drawer .hda-cart-empty__link:focus-visible .hda-cart-empty__img {
  transform: scale(1.04);
}
.zenth-cart-drawer .hda-cart-empty__label {
  margin: 10px 0 0;
  font-family: "Founders Grotesk Official", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: var(--mm-brand);
}

/* --- 1.5 Línea de ayuda ---------------------------------------------- */
.zenth-cart-drawer .hda-cart-empty__help {
  margin: 0 0 16px;
  font-family: "Founders Grotesk Official", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--mm-brand);
}

/* --- 1.6 CTA de WhatsApp ----------------------------------------------
   text-shadow:none y border:0 son defensivos: el kit de Elementor pone
   text-shadow a TODO <button>/.elementor-button (post-840.css:
   ".elementor-kit-840 button,...,.elementor-kit-840 .elementor-button
   {text-shadow:0px 0px 10px rgba(0,0,0,.3)}") — este CTA es un <a>, así
   que ese selector no lo alcanza hoy, pero lo dejamos neutralizado por si
   algún día se reutiliza la clase .elementor-button acá. */
.zenth-cart-drawer .hda-cart-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mm-brand);
  color: var(--mm-cta-text);
  text-decoration: none;
  text-shadow: none;
  font-family: "Founders Grotesk Official", Helvetica, Arial, sans-serif;
  font-weight: 400;
  /* 13px, NO 12: a 12px, uppercase + letter-spacing:2px pierde la tinta de
     la "C" de ESCRÍBENOS a DPR=1 (medido con Chrome headless real, 4
     variantes de letter-spacing y con/sin -webkit-font-smoothing — nota
     del prototipo aprobado). 13px la recupera en las 4 combinaciones. */
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}
.zenth-cart-drawer .hda-cart-empty__cta:hover {
  opacity: 0.92;
}
.zenth-cart-drawer .hda-cart-empty__cta:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}
.zenth-cart-drawer .hda-cart-empty__cta:focus:not(:focus-visible) {
  outline: none;
}
.zenth-cart-drawer .hda-cart-empty__cta svg {
  flex: none;
}
@media (max-width: 480px) {
  .zenth-cart-drawer .hda-cart-empty__cta {
    min-height: 44px;
    padding: 0 24px;
  }
}

/* --- 1.7 El <h2> del plugin, oculto visualmente cuando el carrito está
   vacío (CONTRATO §3.3). Recorte tipo screen-reader-only —el MISMO patrón
   que ya usa el propio plugin en .zenth-cart-live (cart.css)— y NO
   display:none/visibility:hidden, porque el <h2> sigue siendo el nombre
   accesible del diálogo vía aria-labelledby="zenth-cart-title". :has()
   sigue a la clase --body--empty que cart.js:361 mantiene también en las
   transiciones AJAX (vaciar el carrito sin recargar), así que esto
   funciona en esa transición sin trabajo extra — la MISMA clase que ahora
   también dispara el fondo del drawer entero (ver "BLOQUEANTE #4" arriba). */
.zenth-cart-drawer:has(.zenth-cart-drawer__body--empty) .zenth-cart-drawer__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Al recortar el <h2> con position:absolute, sale del flujo del flex del
   header (.zenth-cart-drawer__header{display:flex;justify-content:
   space-between}) y queda un solo hijo flex real: el botón cerrar. Con un
   único hijo, space-between lo manda a la IZQUIERDA (no hay "espacio entre"
   que repartir). Lo anclamos a la derecha explícitamente. */
.zenth-cart-drawer:has(.zenth-cart-drawer__body--empty) .zenth-cart-drawer__header {
  justify-content: flex-end;
}


/* ============================================================
   2) LA PALETA FÚNEBRE DE TODO EL DRAWER (CONTRATO §3.2)
   ============================================================
   Decisión del dueño: el gris pizarra de las páginas fúnebres se extiende
   a TODO el carrito (no sólo al estado vacío de la sección 1), en las
   páginas que ya llevan la clase body.hda-funeral-theme (confirmado con
   curl --path-as-is en las 5 URLs fúnebres). Esta sección NO cambió en la
   ronda 3 — ya se verificó en pizarra con control en floral, con el
   carrito CON productos. */

/* --- 2.1 El acento del carrito CON PRODUCTOS (título de item al hover,
   fondo/texto de "¡Envío gratis incluido!", botón "Finalizar compra" en su
   estado base, anillo de foco) ya lo resuelve --zenth-cart-accent, que
   header.css sobrescribe hoy siempre a vinotinto:
     body .zenth-cart-root { --zenth-cart-accent: var(--hda-color-primary); ...}
   (especificidad 0,1,1). En fúnebre lo re-apuntamos al gris pizarra con más
   especificidad para ganarle sin tocar ese archivo: */
body.hda-funeral-theme .zenth-cart-root {
  --zenth-cart-accent: var(--mm-brand);        /* #4B5568 */
  --zenth-cart-accent-on: var(--mm-on-brand);  /* #FEF3E7 */
}

/* --- 2.2 Las 4 reglas con vinotinto HARDCODEADO de header.css: no usan
   variable, así que 2.1 NO las mueve — hay que vencerlas una por una.
   Leídas del servidor el 2026-09-04
   (astra-child/css/global/templates/header/header.css):

     L378-382  body .zenth-cart-shipping__bar { background: rgba(150, 9, 70, .12); }
     L384-386  body .zenth-cart-shipping__bar-fill {
                  background: linear-gradient(90deg, var(--hda-color-primary), #B82961);
                }
     L404-407  body .zenth-cart-drawer__btn--primary:hover { background: #7B0035; opacity: 1; }
     L417-419  body .zenth-cart-item:hover { background-color: rgba(150, 9, 70, .03); }

   Las 4 tienen especificidad (0,1,1): un tag (body) + una clase (la de
   :hover suma otro nivel de "clase" en las 2 que la llevan, dando 0,2,1 en
   esas dos — igual, seguimos ganando). Les ganamos con
   body.hda-funeral-theme .zenth-cart-root + la clase del propio elemento,
   que da mínimo (0,3,1): */
body.hda-funeral-theme .zenth-cart-root .zenth-cart-shipping__bar {
  /* mismo criterio que el original: acento al 12% de opacidad */
  background: rgba(75, 85, 104, 0.12);
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-shipping__bar-fill {
  /* #7D8592 = --mm-brand fúnebre mezclado 28% con blanco — mismo criterio
     que el original (960946 → B82961: un tono más CLARO en el extremo del
     degradado, no más oscuro; B82961 es más luminoso que 960946). */
  background: linear-gradient(90deg, var(--mm-brand), #7D8592);
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-drawer__btn--primary:hover {
  /* #3E4655 = --mm-brand fúnebre oscurecido ~18% — mismo criterio que el
     original (960946 → 7B0035: un tono más OSCURO en el hover). */
  background: #3E4655;
  opacity: 1;
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-item:hover {
  background-color: rgba(75, 85, 104, 0.03);
}

/* --- 2.3 Las 3 reglas que la 2.2 se dejó afuera: usan var(--hda-color-primary)
   DIRECTO (no vía --zenth-cart-accent, que 2.1 ya resuelve), así que tampoco
   las mueve 2.1. Encontradas repitiendo el mismo grep de 2.2 sobre el header.css
   bajado de STAGING el 2026-09-04 (bloque "6b. ZENTH CART DRAWER"), y confirmadas
   en el navegador con un producto real en el carrito de una página fúnebre
   (getComputedStyle vía :hover/:visited miente para <a> — coloreado real
   verificado con captura de pantalla, gotcha 18 en su variante de enlaces
   visitados): las 3 seguían vinotinto con el carrito CON productos.

     L391-394  body .zenth-cart-drawer__btn--secondary {
                  color: var(--hda-color-primary); border-color: var(--hda-color-primary);
                }
     L396-400  body .zenth-cart-drawer__btn--secondary:hover {
                  background: var(--hda-color-on-primary); color: var(--hda-color-primary);
                  border-color: var(--hda-color-primary);
                }
     L435-439  body .zenth-cart-drawer__title {
                  font-family: var(--hda-font-base); color: var(--hda-color-primary);
                  letter-spacing: 0.01em;
                }
     L442-444  body .zenth-cart-drawer__subtotal-amount { color: var(--hda-color-primary); }

   Especificidad de origen: (0,1,1) las 3 bases, (0,2,1) el :hover del botón
   (la pseudo-clase suma un nivel de "clase"). Mismo patrón de 2.2 para ganarles:
   body.hda-funeral-theme .zenth-cart-root .SELECTOR da (0,3,1) — o (0,4,1) en
   el :hover, sumando la propia pseudo-clase —, de sobra por encima de las 2
   especificidades de arriba. No se toca font-family/letter-spacing del título:
   son tipografía de marca, no color, y no forman parte de este bug. */
body.hda-funeral-theme .zenth-cart-root .zenth-cart-drawer__title {
  color: var(--mm-brand);
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-drawer__btn--secondary {
  color: var(--mm-brand);
  border-color: var(--mm-brand);
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-drawer__btn--secondary:hover {
  background: var(--mm-on-brand);
  color: var(--mm-brand);
  border-color: var(--mm-brand);
}
body.hda-funeral-theme .zenth-cart-root .zenth-cart-drawer__subtotal-amount {
  color: var(--mm-brand);
}


/* ============================================================
   3) EL BOTÓN DE CERRAR: CÍRCULO CON × (CONTRATO §3.4)
   ============================================================
   Reemplaza al <kbd>ESC</kbd> en TODOS los estados del drawer (con
   productos y vacío), sin tocar el markup del plugin: se oculta el <kbd> y
   el × se pinta encima con dos barras (::before/::after) rotadas — no un
   glyph de texto "×", para no heredar el text-shadow del kit de Elementor
   (ver más abajo) ni depender de que la fuente tenga ese carácter con
   buena métrica.

   Especificidad: hay que vencer (gotcha 54, confirmado leyendo el CSS real
   del servidor el 2026-09-04, no de memoria):
     - Astra (CSS dinámico, inline en <head>, id=astra-theme-css-inline-css):
       "button:focus,...,button:hover,...{color:#fff;background-color:#f9d9c1;
       border-color:#f9d9c1;}" → cada selector individual (button:hover,
       button:focus) es tag+pseudo-clase = especificidad (0,1,1).
     - Kit de Elementor (post-840.css):
       ".elementor-kit-840 button,...{text-shadow:0px 0px 10px rgba(0,0,0,.3);}"
       → clase+tag = especificidad (0,1,1), y se aplica SIEMPRE (no sólo en
       :hover).
   .zenth-cart-drawer .zenth-cart-drawer__close (dos clases) ya da (0,2,0)
   en la base, y (0,3,0) en :hover/:focus-visible — gana a las dos. */
.zenth-cart-drawer .zenth-cart-drawer__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--mm-chip);
  color: var(--mm-brand); /* currentColor para las barras del × de abajo */
  text-shadow: none; /* anula el kit de Elementor */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zenth-cart-drawer .zenth-cart-drawer__close .zenth-cart-drawer__esc {
  /* el <kbd>ESC</kbd> se oculta por completo: el aria-label="Cerrar" que ya
     trae el botón (CONTRATO §3.4) sigue siendo su nombre accesible sin él. */
  display: none;
}
.zenth-cart-drawer .zenth-cart-drawer__close::before,
.zenth-cart-drawer .zenth-cart-drawer__close::after {
  content: "";
  position: absolute;
  /* el botón es display:inline-flex con align-items/justify-content:center,
     pero eso sólo centra hijos EN FLUJO — position:absolute los saca del
     flex por completo. Sin top/left:50%, un pseudo-elemento absoluto sin
     otro punto de referencia cae en la esquina superior-izquierda del
     button, no en el centro. Centrado manual con translate(-50%,-50%),
     que además funciona igual a 32px (escritorio) y 44px (móvil) porque es
     relativo al propio tamaño del pseudo-elemento, no al del botón. */
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.6px;
  background: currentColor;
  border-radius: 1px;
}
.zenth-cart-drawer .zenth-cart-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.zenth-cart-drawer .zenth-cart-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.zenth-cart-drawer .zenth-cart-drawer__close:hover,
.zenth-cart-drawer .zenth-cart-drawer__close:focus-visible {
  background: var(--mm-brand);
  color: var(--mm-on-brand);
}
.zenth-cart-drawer .zenth-cart-drawer__close:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}
.zenth-cart-drawer .zenth-cart-drawer__close:focus:not(:focus-visible) {
  /* foco movido por JS (p.ej. al abrir el drawer) no matchea :focus-visible
     en todos los navegadores: sin esto se ve el outline punteado global de
     Astra (:focus{outline:thin dotted}, especificidad 0,1,0) — CONTRATO §3.5. */
  outline: none;
}
@media (max-width: 480px) {
  /* 44×44 de área táctil en móvil (CONTRATO §3.4) */
  .zenth-cart-drawer .zenth-cart-drawer__close {
    width: 44px;
    height: 44px;
  }
}

/* --- 3.1 Borde del × SOLO con el carrito vacío (BLOQUEANTE #4, aviso #2) --
   Con el fondo del drawer ahora pintado en --mm-panel para este estado (ver
   "BLOQUEANTE #4" arriba), el chip --mm-chim del botón queda casi fundido
   con el panel: medido, ~1,05:1 (floral, #FCEFE7 sobre #FDE8DE) y ~1,20:1
   (fúnebre, #E8EAEE sobre #D4D7DB) — muy por debajo del 3:1 que pide WCAG
   1.4.11 para el límite de un control de UI. El ícono en sí (× sobre
   --mm-chip) NUNCA fue el problema: 7,69:1 / 6,23:1, de sobra.

   Arreglo: un borde con --mm-brand, que contra --mm-panel ya está medido en
   7,33:1 / 5,20:1 (measure-final-out.json) — el mismo token que ya se usa
   para el texto sobre el panel, ninguna cuenta nueva. box-sizing:border-box
   para que el círculo se quede en 32×32 / 44×44 con el borde adentro, no
   sumado — el área táctil móvil no se toca.

   Escopeado a :has(.zenth-cart-drawer__body--empty): con el carrito CON
   productos el fondo sigue blanco (chip contra blanco no cambió con este
   trabajo, no es parte de este arreglo) y el botón se queda como estaba.
   Al hover/focus el fondo del botón pasa a --mm-brand (regla de arriba): el
   borde, del mismo color, se funde con el relleno — es el resultado
   esperado, no un bug, el círculo entero pasa a ser un único bloque
   --mm-brand con contraste máximo contra el panel. */
.zenth-cart-drawer:has(.zenth-cart-drawer__body--empty) .zenth-cart-drawer__close {
  box-sizing: border-box;
  border: 1.5px solid var(--mm-brand);
}


/* ============================================================
   REDUCED MOTION — compartido por las secciones 1 y 3
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .zenth-cart-drawer .hda-cart-empty__img,
  .zenth-cart-drawer .hda-cart-empty__cta,
  .zenth-cart-drawer .zenth-cart-drawer__close {
    transition-duration: 0.01ms !important;
  }
}