/* =============================================================================
   DKT Store — Header (DEC-W052 + DEC-W054 Opción A)
   Barra magenta custom + utilidades + drawer. Consume tokens de 1.0.
   Barra superior (vino) = barra de anuncios del PLUGIN, solo re-estilizada.
   ============================================================================= */

/* ---------- Suprimir el masthead de Astra (DEC-W054) — garantía CSS ---------- */
#masthead,
.site-header,
.ast-above-header-wrap,
.ast-below-header-wrap { display: none !important; }

/* ---------- Barra superior: la barra de anuncios del PLUGIN ----------
   Home Premium v3.2 (mockup .abar L60-62): fondo vino profundo #4A0B2C
   (--vino-deep, más oscuro que --dkt-vino) + texto rosado #FFD7E8 + icono
   chat vía mask en ::before del slide. El plugin imprime estilo inline
   (#1A1A1A) en wp_head; override con !important (no se toca el motor). */
.dkt-announcement-bar {
	background-color: #4A0B2C !important;   /* --vino-deep del mockup (aditivo; no existe token global) */
	color: #FFD7E8 !important;
	font-family: var(--dkt-font-body);
	font-weight: 500;
	font-size: 13px !important;   /* < texto del menú (15px) = jerarquía; override del inline del plugin, sin tocar el motor */
	letter-spacing: 0.01em;
}
.dkt-announcement-bar a,
.dkt-announcement-bar strong { color: var(--dkt-white) !important; font-weight: 600; }
/* Iconos POR MENSAJE (v3.3, mockup abar): camión (envíos) · candado (compra
   segura) · rayo (24 h), vía mask por posición. Mask por alfa: el color lo
   pone background-color (#FFB8D6). Guardas: solo los 3 primeros slides de la
   barra PÚBLICA (la barra PRO de médicos y slides extra quedan sin icono). */
.dkt-announcement-bar:not(.dkt-announcement-pro) .slide:nth-child(-n+3)::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 0.55em;
	vertical-align: -3px;
	background-color: #FFB8D6;
	-webkit-mask: var(--dkt-abar-ico) no-repeat center / contain;
	        mask: var(--dkt-abar-ico) no-repeat center / contain;
}
.dkt-announcement-bar:not(.dkt-announcement-pro) .slide:nth-child(1) {
	--dkt-abar-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h11v9h-11z'/%3E%3Cpath d='M13.5 10h4l3 3v3h-7'/%3E%3Ccircle cx='6.5' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
}
.dkt-announcement-bar:not(.dkt-announcement-pro) .slide:nth-child(2) {
	--dkt-abar-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V7.8a3.5 3.5 0 0 1 7 0v2.7'/%3E%3Ccircle cx='12' cy='15.2' r='1.3'/%3E%3C/svg%3E");
}
.dkt-announcement-bar:not(.dkt-announcement-pro) .slide:nth-child(3) {
	--dkt-abar-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.5 13.5H11L9.5 22 19 10h-6.5L13 2Z'/%3E%3C/svg%3E");
}

/* =============================================================================
   Barra principal (magenta exacto del logo = --dkt-magenta #A50050)
   ============================================================================= */
.dkt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--dkt-magenta);
	color: var(--dkt-white);
}
/* Layout de 3 zonas (DEC-W052): logo IZQ · nav CENTRO real · utilidades DER.
   Grid 1fr/auto/1fr con columnas explícitas → el nav queda centrado en la barra
   sin importar el ancho de logo/utilidades, y se mantiene robusto en mobile. */
.dkt-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-5);
}

/* Logo — la caja magenta del PNG se pierde en el fondo magenta */
.dkt-header__logo { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; margin-left: 45px; /* despegar del borde sin tocar el padding del inner */ }
.dkt-header__logo a,
.dkt-header__logo .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.dkt-header__logo img,
.dkt-header__logo .custom-logo {
	display: block;
	max-height: 75px !important;   /* 75px (gana al cap 60px de base.css .custom-logo) */
	height: auto !important;
	width: auto;
}

/* ---------- Nav: zona central del grid, centrado, letras más pequeñas ---------- */
.dkt-header__nav { grid-column: 2; display: flex; justify-content: center; }
.dkt-header__nav .dkt-menu {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.dkt-header__nav .menu-item { position: relative; }
.dkt-header__nav .menu-item > a {
	position: relative;
	display: inline-block;
	color: var(--dkt-white);
	text-decoration: none;
	font-family: var(--dkt-font-titles);
	font-weight: 500;
	font-size: 15px;   /* px explícito (root del sitio = 18px → evitar ambigüedad rem) */
	letter-spacing: 0.01em;
	padding-bottom: 4px;
}
/* Subrayado RECTO (v3.3, mockup .hdr nav a::after): línea blanca 2px que
   crece del centro (width 0→100%, left 50%→0). Sustituye al arco --dkt-arc.
   Exclusivo del header custom (los landings ocultan .dkt-header entero).
   ⚠️ Dentro de los paneles mega, megamenu.css v3.5 NEUTRALIZA este ::after
   (content:none) y lo re-usa para micro-datos (Andalan) y badges (feats).
   Curva del mockup inline (el header vive fuera del scope .dkt-home). */
.dkt-header__nav .menu-item > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background-color: var(--dkt-white);   /* TOP-LEVEL sobre magenta = BLANCO */
	transition: width 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Sub-menú (fondo blanco): subrayado magenta para que se vea */
.dkt-header__nav .sub-menu .menu-item > a::after { background-color: var(--dkt-magenta); }
.dkt-header__nav .menu-item > a:hover::after,
.dkt-header__nav .menu-item > a:focus-visible::after,
.dkt-header__nav .menu-item.current-menu-item > a::after,
.dkt-header__nav .menu-item.current-menu-ancestor > a::after { width: 100%; left: 0; }

/* ---------- Iconos de menú top-level (Home Premium v3.2) ----------
   Inyectados por dkt_menu_item_icon() (inc/header.php). Solo el nivel 1 del
   .dkt-menu (los sub-ítems conservan su mecanismo dkt-mi--* de megamenu.css).
   max-width:none + flex none = blindaje contra el colapso de SVG de Astra. */
.dkt-header__nav .dkt-menu > .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.dkt-header__nav .dkt-menu > .menu-item > a .dkt-mi-ico {
	display: block;
	width: 19px;
	height: 19px;
	max-width: none;
	flex: 0 0 auto;
	opacity: 0.9;
}
.dkt-header__nav .dkt-menu > .menu-item > a img.dkt-mi-ico {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Sub-menús (desplegables del nav) — v3.4 FIX: en producción el hover puro no
   sostenía el panel (hueco entre link y panel + transición 180ms → se cerraba
   al cruzar). Solución: estado .is-open manejado por header.js (mouseenter/
   leave con gracia de cierre + click/touch + teclado + Escape + click-fuera)
   ADEMÁS del :hover/:focus-within CSS, y un puente invisible ::before que
   elimina el hueco para el caso CSS-puro (sin JS). Desde v3.5 el mega también
   ancla al li (mismo gap de 8px; sin puente propio en megamenu.css). */
.dkt-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 236px;
	background: var(--dkt-white);
	border-radius: 14px;   /* v3.5: sobrio refinado */
	box-shadow: var(--dkt-shadow-md);
	list-style: none;
	margin: 8px 0 0;
	padding: var(--space-2) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
	z-index: 10;
}
/* Puente anti-hueco: zona invisible que mantiene el :hover al cruzar del link
   al panel (es descendiente del li → li:hover se sostiene). Alto = gap REAL
   (margin 8px del panel): más alto taparía los últimos px del propio link. */
.dkt-header__nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
.dkt-header__nav .menu-item:hover > .sub-menu,
.dkt-header__nav .menu-item:focus-within > .sub-menu,
.dkt-header__nav .menu-item.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
/* Supresor de Escape (header.js): tras cerrar con teclado, :hover/:focus-within
   mantendrían el panel visible — esta regla, declarada DESPUÉS de la apertura,
   gana. Se limpia en ddOpen/mouseleave/focusout. */
.dkt-header__nav .menu-item.is-dismissed > .sub-menu {
	opacity: 0 !important;
	visibility: hidden !important;
}
.dkt-header__nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--dkt-vino);
	text-decoration: none;
	padding: 8px var(--space-4);
	font-size: 14px;   /* v3.5: un punto menos que el nav (pedido Ricardo) */
	font-family: var(--dkt-font-titles);
	font-weight: 500;
}
.dkt-header__nav .sub-menu a:hover { background: var(--dkt-paper-2); color: var(--dkt-magenta); }

/* Sobrio refinado (v3.5): iconitos line-art INFORMATIVOS de método por slug
   del href (mismo criterio aprobado en la sección Métodos: glifo genérico,
   CERO packshots/badges/promoción — la guarda sigue mandando). currentColor
   → vino, magenta al hover, blanco en el drawer móvil. */
.dkt-header__nav .sub-menu a[href*="pastillas-anticonceptivas"]::before,
.dkt-header__nav .sub-menu a[href*="lyndavel"]::before,
.dkt-header__nav .sub-menu a[href*="levoplant"]::before,
.dkt-header__nav .sub-menu a[href*="taylafemm"]::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--mi-sober) center / contain no-repeat;
	        mask: var(--mi-sober) center / contain no-repeat;
}
.dkt-header__nav .sub-menu a[href*="pastillas-anticonceptivas"] { --mi-sober: url("/wp-content/themes/astra-dkt-store/assets/brand/iconos/blister-pildora.svg"); }
.dkt-header__nav .sub-menu a[href*="lyndavel"] { --mi-sober: url("/wp-content/themes/astra-dkt-store/assets/brand/iconos/jeringa-inyectable.svg"); }
.dkt-header__nav .sub-menu a[href*="levoplant"] { --mi-sober: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='9' width='13' height='2.6' rx='1.3' transform='rotate(-18 4 9)'/%3E%3Crect x='7' y='14' width='13' height='2.6' rx='1.3' transform='rotate(-18 7 14)'/%3E%3C/svg%3E"); }
.dkt-header__nav .sub-menu a[href*="taylafemm"] { --mi-sober: url("/wp-content/themes/astra-dkt-store/assets/brand/iconos/frasco-medicamento.svg"); }

/* =============================================================================
   Utilidades (derecha, blanco)
   ============================================================================= */
.dkt-header__utils { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }

/* ⚠️ El CSS legacy (dkt-style.css) estiliza TODO <button> con !important
   (fondo magenta + padding 12px 28px). Ese padding colapsa la caja del ícono
   (border-box) → SVG invisible. Aquí se neutraliza para los botones del header
   (única vía de ganarle a un !important es otro !important). */
.dkt-util {
	position: relative;
	z-index: 20;   /* sobre el panel del mega (z:10): su puente anti-hueco no tapa los botones en 1025-1150px */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;          /* zona de toque ≥44px */
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--dkt-white) !important;
	cursor: pointer;
	border-radius: var(--radius-pill) !important;
	transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dkt-util:hover { background-color: rgba(255,255,255,0.14) !important; }
.dkt-util:active { transform: scale(0.94); }
/* Íconos más juntos: padding horizontal compacto. El selector (elemento+2 clases
   = especificidad 0,2,1) iguala al legacy button:not()(0,2,1) y, al cargar después,
   gana — por eso el `.dkt-util{padding:0}` previo NO surtía efecto. Tamaño guiado
   por el padding; min 44px para área táctil. */
.dkt-header__utils button.dkt-util {
	width: auto !important;
	height: auto !important;
	min-width: 40px;
	min-height: 44px;
	padding: 12px 9px !important;   /* + gap 6px → hueco entre glifos ~22px */
}
/* SVG blanco por FILL + SIZING blindado.
   Causa raíz medida en DOM: dentro del flex .dkt-util el width computaba 0px
   (Astra padre aplica img,svg{max-width:100%} y ese 100% resuelve a ~0 en el
   flex). Fix: max-width:none + width/height !important + no encoger. */
.dkt-util svg {
	display: block;
	fill: var(--dkt-white) !important;
	width: 22px !important;
	height: 22px !important;
	max-width: none !important;
	flex: 0 0 auto;
}
.dkt-nav-toggle svg { width: 24px !important; height: 24px !important; }
/* Hamburguesa: oculta en ESCRITORIO. !important porque .dkt-util ya trae
   display:inline-flex !important (si no, ganaría y la mostraría con el nav). */
.dkt-nav-toggle { display: none !important; }   /* solo mobile (≤992px) */

/* Contador del carrito (badge blanco, número magenta) */
.dkt-cart-count {
	position: absolute;
	top: 4px; right: 2px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	background: var(--dkt-white);
	color: var(--dkt-magenta);
	font-family: var(--dkt-font-titles);
	font-weight: 700;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	border-radius: var(--radius-pill);
}
.dkt-cart-count[hidden] { display: none; }

/* ---------- Desplegable de cuenta ---------- */
.dkt-account { position: relative; }
.dkt-account-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 240px;
	background: var(--dkt-white);
	color: var(--dkt-ink);
	border-radius: var(--dkt-radius-lg);
	box-shadow: var(--dkt-shadow-lg);
	padding: var(--space-3);
	z-index: 110;
}
.dkt-account-menu[hidden] { display: none; }
.dkt-account-group + .dkt-account-group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--dkt-line); }
.dkt-account-group__title {
	display: block;
	font-family: var(--dkt-font-titles);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--dkt-muted);
	margin-bottom: var(--space-1);
}
.dkt-account-group a {
	display: block;
	color: var(--dkt-vino);
	text-decoration: none;
	padding: var(--space-2) var(--space-2);
	border-radius: var(--dkt-radius);
	font-size: var(--fs-sm);
}
.dkt-account-group a:hover { background: var(--dkt-paper-2); color: var(--dkt-magenta); }
.dkt-ext { font-size: 0.85em; opacity: 0.7; }

/* ---------- Panel de búsqueda ---------- */
.dkt-search-panel { background: var(--dkt-magenta); padding: 0 var(--space-5) var(--space-3); }
.dkt-search-panel[hidden] { display: none; }
.dkt-search-form { display: flex; max-width: 1280px; margin: 0 auto; gap: var(--space-2); }
.dkt-search-form input[type="search"] {
	flex: 1 1 auto;
	border: 0;
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-4);
	font-family: var(--dkt-font-body);
	font-size: var(--fs-base);
}
.dkt-search-form button {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 48px; padding: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important;
	background: var(--dkt-white) !important; color: var(--dkt-magenta) !important; box-shadow: none !important; cursor: pointer;
}

/* =============================================================================
   Drawer del carrito + scrim
   ============================================================================= */
.dkt-scrim {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(42,26,36,0.5);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.dkt-scrim.is-open { opacity: 1; }
.dkt-scrim[hidden] { display: none; }

.dkt-cart-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 210;
	width: min(420px, 92vw);
	background: var(--dkt-white);
	box-shadow: var(--dkt-shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--dur) var(--ease);
}
.dkt-cart-drawer.is-open { transform: translateX(0); }
.dkt-cart-drawer[hidden] { display: none; }
.dkt-cart-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--dkt-line);
}
.dkt-cart-drawer__title { margin: 0; font-size: var(--fs-lg); color: var(--dkt-vino); }
.dkt-cart-close {
	background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer;
	font-size: 28px; line-height: 1; color: var(--dkt-muted) !important;
	width: 44px; height: 44px; padding: 0 !important; border-radius: var(--radius-pill) !important;
}
.dkt-cart-close:hover { background: var(--dkt-paper-2) !important; color: var(--dkt-magenta) !important; }
.dkt-cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--space-5); }

/* Mini-cart de WooCommerce dentro del drawer */
.dkt-cart-drawer .woocommerce-mini-cart__empty-message { color: var(--dkt-muted); }
.dkt-cart-drawer .woocommerce-mini-cart__total { font-family: var(--dkt-font-titles); }
.dkt-cart-drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.dkt-cart-drawer .woocommerce-mini-cart__buttons .button {
	display: block; text-align: center;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	font-family: var(--dkt-font-titles); font-weight: 600;
	text-decoration: none;
}
/* "Ver carrito" = secundario · "Finalizar compra" (.checkout) = primario magenta.
   !important para ganarle al legacy (button{} magenta !important). */
.dkt-cart-drawer .woocommerce-mini-cart__buttons .button {
	background: transparent !important; color: var(--dkt-vino) !important; border: 2px solid var(--dkt-line) !important; box-shadow: none !important;
}
.dkt-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--dkt-magenta) !important; color: var(--dkt-white) !important; border-color: var(--dkt-magenta) !important;
}
.dkt-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--dkt-magenta-mid) !important; border-color: var(--dkt-magenta-mid) !important; }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {   /* lg — nav → hamburguesa (canónico DEC-W067, antes 992) */
	.dkt-nav-toggle { display: inline-flex !important; }   /* móvil: re-mostrar (mismo breakpoint que oculta el nav) */
	.dkt-header__nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--dkt-magenta);
		flex-direction: column;
		padding: var(--space-3) var(--space-5) var(--space-5);
		box-shadow: var(--dkt-shadow-md);
		display: none;
	}
	.dkt-header__nav.is-open { display: block; }
	.dkt-header__nav .dkt-menu { flex-direction: column; align-items: stretch; gap: var(--space-2); }
	.dkt-header__nav .menu-item > a { display: block; padding: var(--space-2) 0; }
	.dkt-header__nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: transparent; margin: 0 0 0 var(--space-3); padding: 0;
	}
	/* Los puentes anti-hueco son SOLO para el hover de escritorio: en el menú
	   hamburguesa (sub-menu static) crearían franjas invisibles que bloquean
	   taps. Cubre también al mega (mismo pseudo-elemento ::before del .sub-menu
	   base; desde v3.5 megamenu.css no define puente propio — el panel ancla
	   al li y el gap es el margin de 8px). */
	.dkt-header__nav .sub-menu::before { content: none; }
	.dkt-header__nav .sub-menu a { color: var(--dkt-white); }
	/* En el menú móvil (lista vertical) el subrayado en arco sobra → ocultarlo. */
	.dkt-header__nav .menu-item > a::after { display: none !important; }
	.dkt-cart-drawer { width: 100vw; }
}

/* Reduced motion: el refuerzo global vive en base.css; aquí desactivamos los
   transforms de drawer/scrim/arco por seguridad. */
@media (prefers-reduced-motion: reduce) {
	.dkt-cart-drawer, .dkt-scrim, .dkt-header__nav .menu-item > a::after, .dkt-header__nav .sub-menu { transition: none !important; }
}