/*
|--------------------------------------------------------------------------
| AMOREA — MENÚ MÓVIL (offcanvas de Blocksy)
|--------------------------------------------------------------------------
|
| El panel, el botón de tres rayas, el acordeón, el foco, Escape y el
| clic exterior son 100 % nativos de Blocksy. Aquí SÓLO se re-viste ese
| offcanvas con la identidad de Amorea una vez que la ubicación
| `menu_mobile` recibe el MISMO menú aprobado que el header de escritorio
| (Amorea_Core_Menu_Frontend::mirror_primary_to_mobile()):
|
|   - fondo claro en vez del panel oscuro genérico;
|   - logo del sitio como cabecera del panel (inc/setup/home-hooks.php);
|   - tipografía, rosado y jerarquía coherentes con el menú de escritorio;
|   - filas táctiles ≥ 52 px que no se superponen con la flecha;
|   - la flecha (52 px propios) abre/cierra el acordeón; el nombre entra
|     a la categoría principal;
|   - scroll vertical sólo cuando hace falta, nunca horizontal.
|
| Alcance: TODO acotado a `.ct-drawer-canvas #offcanvas.ct-panel` — no
| toca el header de escritorio, ni el panel del carrito (#woo-cart-panel),
| ni el buscador (#search-modal). Blocksy imprime su CSS dinámico
| (`[data-header*="type-1"] #offcanvas …`, especificidad 1-2-0) DESPUÉS de
| esta hoja en el <head>, así que cada regla lleva `#offcanvas.ct-panel`
| (1-3-0) para ganar la cascada sin `!important`.
*/

/* ── Envoltura del panel ──────────────────────────────────────────── */

/* Velo detrás del panel: aparece/desaparece con la propia transición de
   opacidad de `.ct-panel`; deja zona para el "clic fuera". */
.ct-drawer-canvas #offcanvas.ct-panel {
	background: rgba(45, 37, 48, 0.42);
	--side-panel-width: min(88vw, 400px);
}

.ct-drawer-canvas #offcanvas.ct-panel .ct-panel-inner {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	color: var(--color-text);
}

/* ── Cabecera del panel: logo (izq.) + botón de cierre (der.) ──────── */

.ct-drawer-canvas #offcanvas.ct-panel .amorea-offcanvas-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* padding derecho generoso: deja libre el botón de cierre absoluto.
	   Sin borde ni línea: la separación con "Inicio" es sólo espacio en
	   blanco (el logo no lleva marco). */
	padding: 16px 60px 18px 22px;
}

.ct-drawer-canvas #offcanvas.ct-panel .amorea-offcanvas-brand .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

/* El logo es decorativo y está fuera del recorrido de tabulación
   (tabindex="-1"); Blocksy le mueve el foco al abrir el panel y su
   regla global `a:focus-visible` lo enmarca con el AZUL de la paleta
   por defecto. Se anula ese recuadro — "Inicio" es el enlace real al
   inicio y sí conserva su aro de foco rosado. */
.ct-drawer-canvas #offcanvas.ct-panel .amorea-offcanvas-brand .custom-logo-link:focus,
.ct-drawer-canvas #offcanvas.ct-panel .amorea-offcanvas-brand .custom-logo-link:focus-visible {
	outline: none;
}

.ct-drawer-canvas #offcanvas.ct-panel .amorea-offcanvas-brand .custom-logo {
	width: auto;
	height: 34px;
	max-width: 160px;
	object-fit: contain;
}

.ct-drawer-canvas #offcanvas.ct-panel .ct-panel-actions {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 4;
	min-height: 0;
	padding: 10px 10px 0 0;
}

.ct-drawer-canvas #offcanvas.ct-panel .ct-toggle-close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	--theme-icon-size: 15px;
	--theme-icon-color: var(--color-text-muted);
	--toggle-button-margin-end: 0;
	--toggle-button-margin-block: 0;
}

.ct-drawer-canvas #offcanvas.ct-panel .ct-toggle-close:hover,
.ct-drawer-canvas #offcanvas.ct-panel .ct-toggle-close:focus-visible {
	--theme-icon-color: var(--color-primary);
}

/* ── Zona de scroll ───────────────────────────────────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel .ct-panel-content[data-device="mobile"] {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.ct-drawer-canvas #offcanvas.ct-panel .ct-panel-content-inner {
	flex: 1 1 auto;
	min-height: 0;
	height: auto; /* anula --panel-content-height: 100% de Blocksy */
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	align-items: stretch;
	padding: 6px 22px 28px;
}

/* ── Contenedor del menú ──────────────────────────────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel [data-id="mobile-menu"],
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu {
	width: 100%;
	max-width: 100%;
	font-family: var(--font-body);
	--theme-link-initial-color: var(--color-text);
	--theme-link-hover-color: var(--color-primary);
	--theme-link-active-color: var(--color-primary);
	--mobile-menu-divider: none;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu > ul {
	width: 100%;
	max-width: 100%;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu > ul > li {
	border-block-end: 1px solid rgba(203, 37, 90, 0.12);
}

/* ── Fila de menú (nivel superior) ────────────────────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-menu-link {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 52px;
	padding: 12px 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text);
	text-align: start;
	justify-content: flex-start;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-menu-link:hover,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-menu-link:focus-visible {
	color: var(--color-primary);
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .nav-menu-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-inline-end: 6px;
	vertical-align: middle;
}

/* Estado activo — mismo criterio que escritorio: se recolorea en rosa. */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .current-menu-item > .ct-menu-link,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
	color: var(--color-primary);
	font-weight: 700;
}

/* ── Fila con submenú + flecha del acordeón ───────────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-sub-menu-parent {
	display: flex;
	align-items: stretch;
	column-gap: 0;
	width: 100%;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-sub-menu-parent > .ct-menu-link {
	flex: 1 1 auto;
	min-width: 0;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile {
	flex: 0 0 auto;
	align-self: stretch;
	width: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	--theme-icon-size: 14px;
	--theme-icon-color: var(--color-primary);
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile svg {
	transition: transform 0.2s ease, fill 0.15s ease;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
	--toggle-icon-transform: rotate(180deg);
}

/* ── Submenú (acordeón) ───────────────────────────────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu [class*="children"] > ul {
	width: 100%;
	max-width: 100%;
	margin: 2px 0 8px;
	padding: 0;
	background: rgba(203, 37, 90, 0.045);
	border-radius: 12px;
	overflow: hidden;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li {
	border: 0;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link {
	position: relative;
	min-height: 46px;
	padding: 10px 14px 10px 42px;
	font-size: 14.5px;
	font-weight: 500;
}

/* ══ Corazón de las subcategorías ═══════════════════════════════════
   Es EXACTAMENTE el corazón que ya tenía el menú móvil: el glifo
   Unicode ♡ (contorno) que pasa a ♥ (relleno) al pasar el cursor, con
   foco de teclado o al pulsar. NO se cambia el corazón del móvil — ese
   MISMO corazón se lleva también al megamenú de escritorio.

   Una sola regla agrupada define los dos menús a la vez y fija de forma
   explícita `font-family`, `font-size` y `font-weight` en los dos
   pseudo-elementos: así ninguno de los dos hereda una familia distinta
   y el glifo se dibuja con la misma silueta en los dos sitios.

   El corazón del megamenú vive en `assets/css/layout.css` (commit
   6e4cca4), añadido DESPUÉS del último cambio de versión de `style.css`
   (5.16.1); como `layout.css` entra por `@import` en `main.css` no se le
   rompe la caché con esa versión, así que un navegador que ya lo tenía
   cacheado no recibe ese corazón. Al re-declararlo aquí —archivo con
   cache-buster propio por `filemtime`, cargado después— el megamenú
   recibe este diseño en todos los navegadores sin tocar la versión. */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::before,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-primary);
	-webkit-font-smoothing: antialiased;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

/* ♡ contorno — visible por defecto */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::before {
	content: "\2661";
	opacity: 1;
}

/* ♥ relleno — oculto por defecto */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::after {
	content: "\2665";
	opacity: 0;
}

/* Posición horizontal según el padding de cada menú */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::before,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu .ct-menu-link::after {
	left: 16px;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::after {
	left: 9px;
}

/* Crossfade: al pasar el cursor / con foco / al pulsar, ♡ se apaga y ♥ se enciende */
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:hover::before,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:focus::before,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:focus-visible::before,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:active::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:hover::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus-visible::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:active::before {
	opacity: 0;
}

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:hover::after,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:focus::after,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:focus-visible::after,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .sub-menu > li > .ct-menu-link:active::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:hover::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus-visible::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:active::after {
	opacity: 1;
}

/* ── Botón de tres rayas (abre el menú móvil) ─────────────────────── */
/*
 * No está dentro del offcanvas sino en `#header`, pero es el disparador
 * de este menú. Blocksy deja su icono con el color de texto del tema y
 * el foco lo pinta con `--theme-palette-color-1` — el AZUL de la paleta
 * por defecto de Blocksy, que nunca se personalizó. Se re-viste con la
 * identidad de Amorea. `#header` para ganar la cascada, mismo criterio
 * que assets/css/layout.css.
 */
#header .ct-header-trigger {
	--theme-icon-color: var(--color-text);
	--theme-link-initial-color: var(--color-text);
	color: var(--color-text);
	-webkit-tap-highlight-color: transparent;
}

#header .ct-header-trigger .ct-icon,
#header .ct-header-trigger .ct-icon rect {
	fill: currentColor;
}

#header .ct-header-trigger:hover {
	--theme-icon-color: var(--color-primary);
	color: var(--color-primary);
}

#header .ct-header-trigger:focus:not(:focus-visible) {
	outline: none;
}

#header .ct-header-trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * ── Fila móvil del header: logo + lupa + Mi cuenta + Favoritos + Carrito + ☰ ──
 * Autorizado por la usuaria: Mi cuenta/Favoritos/Carrito no se mostraban
 * antes en móvil (theme_mod `header_placements`, ver home-hooks.php).
 *
 * RONDA ANTERIOR (revertida aquí): el logo se limitó a 36px de alto
 * (74×36) para que el botón ☰ no quedara con `width:0` al repartirse el
 * espacio — la usuaria pidió explícitamente NO limitarlo así: debe verse
 * a ~140px de ancho, con presencia de marca real. Esta ronda resuelve el
 * mismo problema (espacio insuficiente) sin sacrificar el logo:
 *
 *   1. La fila usa `grid-template-columns: auto auto` (Blocksy,
 *      columns.scss) y reparte el espacio SOBRANTE 50/50 entre logo e
 *      íconos — con un logo de ancho fijo eso le seguía "robando" medio
 *      sobrante sin necesitarlo. Se cambia a `auto 1fr`: la columna del
 *      logo mide justo lo que el logo pide y TODO el resto va a los
 *      controles.
 *   2. Blocksy separa cada `.ct-header-text`/`.ct-header-cart` con
 *      10px de margen propio por lado — combinado con el acolchado
 *      interno de 6px que ya tenía `.header-icon-link` (32px de caja
 *      para un ícono de 20px), Mi cuenta/Favoritos quedaban con ~32px
 *      de separación visual entre glifos mientras que Carrito/☰ (sin
 *      ese acolchado propio) sólo tenían ~20px — de ahí la asimetría
 *      reportada. Se anulan esos márgenes y un único `gap` friega la
 *      separación pareja entre los 5 controles.
 *   3. Los 5 controles (lupa, cuenta, favoritos, carrito, ☰) pasan todos
 *      al mismo cuadro táctil de 44×44 (antes 32/20/18px, por debajo del
 *      mínimo accesible).
 *   4. Con el logo a ~140px real, 5 controles de 44×44 no cierran en una
 *      sola fila por debajo de ~430px (44×5 + 4 separaciones ≈ 236px, y
 *      ahí sólo queda ese margen o menos libre) — en vez de fijar "dos
 *      filas sólo a 320px", el grupo se auto-ajusta a dos líneas
 *      exactamente donde no entra, en cualquier ancho donde haga falta.
 *      `initMobileSearchToggle()` (main.js) agrupa los 5 controles en dos
 *      sub-filas fijas — lupa+cuenta+favoritos / carrito+☰ — DENTRO de un
 *      único contenedor con `flex-wrap:wrap`: si caben las dos sub-filas
 *      una junto a otra se ven como una sola fila continua (mismo gap
 *      dentro y entre sub-filas); si no caben, la segunda pasa entera a
 *      una segunda línea. Sin esa agrupación, `flex-wrap` a secas
 *      envolvía los cinco controles sueltos y el reparto salía dispar
 *      según el ancho exacto (p. ej. 4+1, con el ☰ solo y descolgado);
 *      agrupados en dos bloques el resultado es siempre 3+2, prolijo.
 *      Documentado con números reales en el informe de esta ronda.
 */
/*
 * BUG REAL encontrado 2026-10-03 (barrido de desborde genérico): esta
 * regla fijaba `width:140px` (con `max-width:38vw` como tope de
 * emergencia sólo para 320px) de forma INDEPENDIENTE del contenedor
 * real — ignoraba por completo `.site-branding{max-width:90px}` (más
 * abajo en este archivo, el límite real y deliberado para esta fila,
 * ver su propio comentario: "90px (logo) + 5×44px (controles)...").
 * `.site-logo-container` ya se encoge correctamente a esos 90px
 * (`min-width:0`, fix anterior en este mismo archivo), pero el <img>
 * de adentro seguía intentando medir 140px por su cuenta, desbordando
 * su propio contenedor en TODO el rango móvil (no sólo 320px — medido
 * 122-140px de desborde constante entre 320-980px). `width:100%` deja
 * que el <img> llene exactamente el ancho real de su contenedor, sea
 * cual sea — ya no hace falta ningún tope de emergencia por aparte.
 */
#header [data-device="mobile"] img.default-logo {
	width: 100%;
	height: auto;
}

/*
 * DIAGNÓSTICO (Playwright + análisis de píxeles del PNG, 390px, sin
 * barra de administración): el logo se veía "muy arriba" respecto del
 * centro de los íconos (diferencia real medida: ~16px, no una cifra a
 * ojo). Descartado que sea el archivo: `amorea-logo-transparent.png`
 * tiene su contenido opaco centrado casi exacto dentro de su propio
 * lienzo (15px de margen transparente arriba, 15px abajo, sobre 724px
 * de alto) — no hay relleno interno asimétrico que compensar.
 *
 * La causa real es de maquetado: `.site-logo-container` (el <span> que
 * Blocksy pone alrededor del <img>) se ESTIRA a los 100px completos de
 * la fila (para que toda esa altura sea zona de clic), pero es
 * `display:block` — un bloque no centra verticalmente a su hijo, así
 * que el <img> (68px) simplemente caía pegado arriba del todo,
 * dejando SIEMPRE los ~32px sobrantes abajo sin importar el ancho.
 *
 * Se convierte ese mismo <span> en un contenedor flex centrado SOLO en
 * móvil: no cambia su tamaño (sigue midiendo 100px, la fila no crece),
 * no toca el <img> ni los íconos — sólo corrige cómo se reparte el
 * espacio que YA existía dentro del span. Al ser centrado real (no un
 * desplazamiento fijo en px), se ajusta solo a cualquier ancho de
 * logo/fila sin quedar descuadrado si alguno cambia después.
 */
/*
 * BUG REAL encontrado 2026-10-03 (barrido de desborde genérico, no el
 * síntoma puntual de ningún reporte): a 940-995px de viewport (dentro
 * de `[data-device="mobile"]`, confirmado en vivo) el logo real (140px
 * de ancho natural tras `srcset`) se salía 50px fuera de
 * `.site-branding` (limitado a `max-width:90px` más abajo en este
 * archivo). Causa: un contenedor `display:flex` tiene por defecto
 * `min-width:auto` — no se encoge por debajo del tamaño intrínseco de
 * su contenido (el `<img>`, que ya tiene `max-width:100%` del reset
 * global, pero ese 100% nunca llega a pesar porque el propio
 * contenedor flex nunca se encogió para forzarlo). `min-width:0` es
 * el fix estándar para este patrón — deja que el límite de
 * `.site-branding` SÍ se propague al `<img>` real.
 */
#header [data-device="mobile"] .site-logo-container {
	display: flex;
	align-items: center;
	min-width: 0;
}

/*
 * DIAGNÓSTICO (Playwright, sin barra de administración, 390px):
 *   - Blocksy fija la altura de la fila con
 *     `#header [data-row]>div { min-height: var(--height) }`
 *     (static/bundle/main.min.css) — `--height` sale de
 *     `headerRowHeight: 110` (theme_mod `header_placements`,
 *     compartido tal cual entre escritorio y móvil, sin split
 *     responsive guardado). Con logo (68px) e íconos (94px, 2 filas)
 *     centrados dentro de esos 110px fijos, sobraban ~16px de alto
 *     VACÍO dentro de la propia fila, antes de llegar siquiera al
 *     `padding-top` del hero.
 *   - `#header [data-device="mobile"] [data-row="middle"] > .ct-container`
 *     (con `grid-template-columns` ya editado abajo) es EXACTAMENTE el
 *     `div` que Blocksy apunta con esa regla — mayor especificidad
 *     (id + 2 atributos + clase) le gana sin `!important`, y queda
 *     acotado a `[data-device="mobile"]`: el escritorio conserva sus
 *     110px intactos.
 *   - 96px es el mínimo real que no recorta nada: 94px que ya piden las
 *     2 filas de íconos (44+6+44, ver más abajo) + 2px de aire, sin
 *     tocar el logo ni comprimir los íconos — ninguno de los dos se
 *     mueve de tamaño, sólo baja la altura VACÍA de la fila que los
 *     contiene.
 */
/*
 * BUG REAL encontrado 2026-10-03 (barrido de desborde genérico): con
 * `auto 1fr`, la columna del logo toma su ancho preferido (hasta los
 * 90px de `.site-branding`) SIN SABER que la columna de controles
 * necesita un mínimo real (228px: 5×44px + 4×2px de gap) para no
 * desbordar — a 320-360px de viewport (Android real, no sólo un caso
 * de laboratorio) el logo le dejaba sólo 182-208px a los controles,
 * desbordando 11-46px. `minmax(232px, 1fr)` (228px + 4px de margen)
 * en la columna de controles le garantiza ESE mínimo siempre primero;
 * el logo (`auto`, con su propio tope de 90px) recibe lo que sobra —
 * se angosta solo, de forma fluida, exactamente cuando hace falta, sin
 * un punto de quiebre fijo ni sacrificar nunca el cuadro táctil
 * accesible de 44px de los controles.
 */
#header [data-device="mobile"] [data-row="middle"] > .ct-container {
	grid-template-columns: minmax(0, auto) minmax(232px, 1fr);
	min-height: 60px;
}

/*
 * Pedido explícito de la usuaria: los 5 controles (lupa, cuenta,
 * favoritos, carrito, ☰) en una sola fila real — antes se agrupaban en
 * dos sub-filas fijas (ver main.js, ya retirado) porque a 44px de
 * cuadro táctil por control más el logo no entraban los 5 juntos.
 * `nowrap` + gap más chico (2px, antes 4px) + logo más angosto (regla
 * de abajo) SÍ alcanzan: 90px (logo) + 5×44px (controles) + 4×2px
 * (gaps) = 318px, contra 390px de ancho real mínimo soportado — 72px
 * de aire de sobra para el padding del contenedor.
 */
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] [data-items="primary"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
}

#header [data-device="mobile"] [data-row="middle"] [data-column="end"] [data-items="primary"] > * {
	margin: 0;
	flex: 0 0 auto;
}

/* Favoritos/Mi cuenta/lupa en móvil son sólo el ícono (la etiqueta de
   texto ya la oculta Blocksy en esta fila) — cuadro táctil de 44×44
   parejo para los 5 controles, en vez del tamaño mínimo del <img>. */
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] .header-icon-link,
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] .ct-header-cart .ct-cart-item,
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] .ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Logo más angosto SOLO en móvil — libera el ancho real que piden los
   5 controles en una sola fila (ver comentario de arriba). No toca la
   altura de la fila (96px→60px ya solo por pasar a una fila; el logo
   sigue centrado verticalmente por la regla de más abajo). */
#header [data-device="mobile"] [data-row="middle"] .site-branding {
	max-width: 90px;
}

/* `.ct-header-text`/`.entry-content` (envoltorios nativos de Blocksy de
   Mi cuenta y Favoritos) miden ~16px MÁS que el `.header-icon-link` de
   adentro — `.entry-content{width:100%}` de Blocksy, con el contenedor
   flex en `width:auto`, resuelve a un ancho de más que el del propio
   ícono. Sin fijar el ancho acá, cada envoltorio quedaba con ~60px en
   vez de 44px, y ese sobrante rompía el cálculo de cuántos controles
   caben por fila (el ajuste automático de `flex-wrap` terminaba en 3
   filas en vez de 2 a 320px). Se fija el mismo cuadro de 44px también en
   el envoltorio, para que el ancho real de cada control sea 44px de
   punta a punta, sin sobrante invisible. */
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] .ct-header-text,
#header [data-device="mobile"] [data-row="middle"] [data-column="end"] .ct-header-text .entry-content {
	width: 44px;
	flex: 0 0 auto;
}

/* ── Lupa de búsqueda móvil (insertada por JS, ver initMobileSearchToggle
   en main.js) — mismo tratamiento visual que Mi cuenta/Favoritos. ───── */
#header [data-device="mobile"] .amorea-mobile-search-toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--color-text);
	-webkit-tap-highlight-color: transparent;
}

#header [data-device="mobile"] .amorea-mobile-search-toggle:hover,
#header [data-device="mobile"] .amorea-mobile-search-toggle[aria-expanded="true"] {
	color: var(--color-primary);
}

#header [data-device="mobile"] .amorea-mobile-search-toggle:focus:not(:focus-visible) {
	outline: none;
}

#header [data-device="mobile"] .amorea-mobile-search-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

/*
 * ── Desplegable FLOTANTE del buscador móvil ──────────────────────────
 * Ronda anterior: el panel se insertaba en flujo normal justo debajo de
 * #header (`insertAdjacentElement('afterend', …)`) — quedaba de ancho
 * completo, empujaba el hero hacia abajo y crecía la altura visual del
 * header. Corregido: ahora JS lo agrega DENTRO de `#header` (que ya es
 * `position:relative`, igual que el propio dropdown nativo del
 * mini-carrito de Blocksy — `#header .ct-cart-content`, ver abajo) y
 * flota con `position:absolute`, anclado bajo la zona de íconos, sin
 * participar del flujo del documento: no mueve el hero, no cambia la
 * altura del header, puede superponerse al banner mientras está abierto.
 *
 * El <form> de adentro sigue siendo un CLON del mismo `.search-form` de
 * escritorio (mismo action/inputs/nombres) — no hay lógica de búsqueda
 * duplicada, sólo el mismo formulario mostrado en otro lugar.
 */
.amorea-mobile-search-panel {
	display: none;
}

.amorea-mobile-search-panel:not([hidden]) {
	display: block;
	position: absolute;
	/* `100%` = el borde inferior REAL de #header (su propia altura), no
	   un valor fijo en px que se descuadraría si la fila del header
	   cambia de alto (p. ej. con la barra de administración, que
	   desplaza a #header entero pero no su alto propio) — por eso sigue
	   viéndose igual con o sin ella. Sólo se acorta el margen (4px, antes
	   6px) para acercarlo más a la fila de íconos, tal como se pidió. */
	inset-block-start: 100%;
	inset-inline-end: 16px;
	margin-block-start: 4px;
	width: min(340px, calc(100vw - 32px));
	z-index: 40;
	/* Algunos navegadores móviles "oscurecen" colores automáticamente
	   (modo oscuro forzado a nivel de sistema) si no se declara
	   explícitamente que este bloque está pensado en claro — es lo que
	   puede volver azulado un botón definido en CSS como rosa. */
	color-scheme: light;
	background: var(--color-surface);
	/*
	 * Sin borde propio: el `.search-form` de adentro (mismo componente
	 * de escritorio) ya trae su propio borde y, al enfocarse
	 * automáticamente al abrir, su propio halo rosado (`:focus-within`
	 * en forms.css) — si el panel TAMBIÉN pintaba un borde rosado
	 * alrededor, se veían dos marcos concéntricos ("muchos marcos"). Con
	 * el panel sin borde, el único marco visible es el del propio campo
	 * (igual que en escritorio) y la sombra sola define los bordes del
	 * flotante.
	 */
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 30px rgba(45, 37, 48, 0.16), 0 3px 10px rgba(203, 37, 90, 0.1);
	padding: 7px;
	box-sizing: border-box;
}

.amorea-mobile-search-panel .amorea-mobile-search-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

/*
 * Sin borde ni halo, tampoco al enfocarse: `.search-form`/
 * `.search-form__input:focus` (forms.css) traen su propio borde+halo
 * rosado con `!important` — es correcto en escritorio (un solo marco,
 * ver esa hoja) pero acá, dentro de un panel ya compacto, la usuaria
 * pidió explícitamente que NO quede ningún borde rosado: sólo el campo
 * blanco y el botón de lupa, sin marco. Mismo criterio de especificidad
 * e `!important` para ganarles a esas reglas (mobile-menu.css carga
 * después de forms.css).
 */
.amorea-mobile-search-panel .search-form,
.amorea-mobile-search-panel .search-form:focus-within {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	border: none !important;
	box-shadow: none !important;
	/* Sin borde, el campo (blanco) se perdía contra el panel (también
	   blanco) — un fondo apenas distinto (el mismo tono cálido que usa
	   el resto del sitio) basta para que siga leyéndose como un campo,
	   sin volver a dibujar un marco. */
	background: var(--color-canvas);
}

.amorea-mobile-search-panel .search-form__input,
.amorea-mobile-search-panel .search-form__input:focus {
	height: 38px;
	box-sizing: border-box;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Rosa explícito con !important: si algo más específico (o el modo
   oscuro forzado de algunos navegadores móviles) llega a recolorear
   este botón, que no gane sobre la identidad de Amorea. */
.amorea-mobile-search-panel .search-form__submit {
	width: 38px;
	height: 38px;
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
}

/* Cinturón de seguridad: el botón que lo abre sólo existe en el árbol
   `[data-device="mobile"]`, pero si alguien redimensiona la ventana con
   el panel ya abierto y cruza a escritorio, esto evita que un overlay
   pensado para el header móvil quede flotando sobre el de escritorio. */
@media (min-width: 769px) {
	.amorea-mobile-search-panel {
		display: none !important;
	}
}

/* ── Foco visible por teclado (dentro del panel) ──────────────────── */

.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-menu-link:focus-visible,
.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile:focus-visible,
.ct-drawer-canvas #offcanvas.ct-panel .ct-toggle-close:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -3px;
	border-radius: 8px;
}

/* ── Movimiento reducido ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile svg,
	.ct-drawer-canvas #offcanvas.ct-panel .mobile-menu [class*="children"] > ul.is-animating {
		transition-duration: 0.01ms !important;
	}
}

/* ══ Mini-carrito del encabezado (dropdown al pasar el cursor) ═══════
   Blocksy lo pinta con su chrome oscuro y los botones "Ver carrito" /
   "Finalizar compra" con el azul de su paleta por defecto. Se re-viste
   con la identidad de Amorea: fondo claro, botones rosados, texto y
   divisores legibles. Mismo criterio que el resto del re-vestido de
   paneles de Blocksy de este archivo. Acotado a `#header .ct-cart-content`
   (dentro del offcanvas Blocksy lo oculta). */
#header .ct-cart-content {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 44px rgba(45, 37, 48, 0.16), 0 3px 12px rgba(203, 37, 90, 0.08);
}

#header .ct-cart-content .woocommerce-mini-cart-item .product-title {
	color: var(--color-text);
	font-weight: 600;
}

#header .ct-cart-content .woocommerce-mini-cart-item .product-title:hover {
	color: var(--color-primary);
}

#header .ct-cart-content .woocommerce-mini-cart-item .quantity {
	color: var(--color-text-muted);
}

#header .ct-cart-content .woocommerce-mini-cart-item {
	border-bottom: 1px solid rgba(203, 37, 90, 0.12);
}

#header .ct-cart-content .woocommerce-mini-cart__total {
	border-top: 1px solid rgba(203, 37, 90, 0.16);
	color: var(--color-text);
}

#header .ct-cart-content .woocommerce-mini-cart__total strong {
	color: var(--color-text);
}

#header .ct-cart-content .remove_from_cart_button {
	color: var(--color-primary);
}

#header .ct-cart-content .remove_from_cart_button:hover {
	color: var(--color-primary-hover);
}

#header .ct-cart-content .woocommerce-mini-cart__empty-message,
#header .ct-cart-content .empty {
	color: var(--color-text-muted);
}

/* Botones — rosados, no azules. Se fijan tanto las variables de botón de
   Blocksy como el `background`/`color` directos, para ganar cualquier
   render basado en `--theme-button-*`. */
#header .ct-cart-content .woocommerce-mini-cart__buttons .button {
	--theme-button-background-initial-color: var(--color-primary);
	--theme-button-background-hover-color: var(--color-primary-hover);
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	font-weight: 600;
	box-shadow: none;
}

#header .ct-cart-content .woocommerce-mini-cart__buttons .button:hover,
#header .ct-cart-content .woocommerce-mini-cart__buttons .button:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: #fff;
}