/* =============================================================================
   DKT Store — Menús de la cabecera v5 (0.9.159, propuesta aprobada por Ricardo 08-sep-2026)
   Desplegables, megamenús y desplegable de cuenta con el lenguaje de Mi cuenta v2:
   cabecera vino (nombre + frase + chip) · cuerpo rosa suave · filas blancas con icono en
   cuadrito y dato corto · destacados como banda de marca · fila de cierre en magenta.
   Carga DESPUÉS de header.css y megamenu.css: esos siguen dando posición/anclaje, apertura,
   puente anti-hueco, la degradación del cajón móvil y las variables de icono por href
   (--mm-icon / --mi-sober). Aquí solo se cambia el VESTIDO; los !important ganan a los de
   la unificación 0.9.42. Markup: inc/menus-v5.php (DKT_Menu_Walker_V5).
   @package astra-dkt-store
   ============================================================================= */

@media (min-width: 1025px) {

	/* ---------- el panel ---------- */
	.dkt-header__nav .sub-menu.dkt-mm {
		background: var(--dkt-soft, #FCF7FA) !important;
		border: 1px solid var(--dkt-line);
		border-top: 1px solid var(--dkt-line) !important;
		border-radius: 16px !important;
		box-shadow: 0 22px 55px -18px rgba(110, 16, 57, .30), 0 2px 6px rgba(110, 16, 57, .06) !important;
		padding: 0 10px 10px !important;
		/* sin overflow:hidden: recortaría el puente anti-hueco (::before en top:-8px) y se perdería el hover al cruzar */
		min-width: 320px;
	}
	/* megamenús de dos columnas (Prudence / Andalan) e Insumos (una) */
	.dkt-header__nav .menu-item.dkt-mega > .sub-menu.dkt-mm { gap: 6px; }
	.dkt-header__nav .menu-item.dkt-mega--prudence > .sub-menu.dkt-mm,
	.dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu.dkt-mm { width: 460px !important; max-width: min(460px, calc(100vw - 48px)); }
	.dkt-header__nav .menu-item.dkt-mega--insumos > .sub-menu.dkt-mm { width: 360px !important; max-width: min(360px, calc(100vw - 48px)); }
	/* desplegable sobrio (Hormonales): lista apilada con el mismo vestido */
	.dkt-header__nav .menu-item:not(.dkt-mega) > .sub-menu.dkt-mm { min-width: 340px; width: 340px; }
	.dkt-header__nav .menu-item:not(.dkt-mega) > .sub-menu.dkt-mm > .dkt-mm-li + .dkt-mm-li { margin-top: 6px; }

	/* ---------- cabecera del panel · v5.1 MINIMALISTA (Ricardo 08-sep: la banda magenta se
	   fundía con la barra) — una sola línea discreta: "PRUDENCE · Preservativos y geles" + chip en contorno ---------- */
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head {
		grid-column: 1 / -1;
		list-style: none;
		position: relative;
		margin: 0 0 4px;
		padding: 11px 6px 5px;
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 4px 8px;
		background: transparent;
		color: var(--dkt-ink);
	}
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head .ic { display: none; }
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head .t { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; flex: 1 1 auto; min-width: 0; }
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head .k { font: 700 10.5px/1.2 var(--dkt-font-titles); letter-spacing: .14em; text-transform: uppercase; color: var(--dkt-magenta); }
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head .n { font: 500 12.5px/1.3 var(--dkt-font-body); color: var(--dkt-muted); letter-spacing: 0; margin: 0; }
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head .chip { margin-left: auto; font: 600 10.5px/1 var(--dkt-font-titles); padding: 4px 9px; border-radius: 999px; background: transparent; border: 1px solid var(--dkt-line); color: var(--dkt-muted); white-space: nowrap; align-self: center; }

	/* ---------- los iconos y datos viejos por pseudo-elemento se apagan (ahora van en el markup) ---------- */
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a::before,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a::after { content: none !important; display: none !important; }

	/* ---------- ítem = tarjeta blanca con icono en cuadrito ---------- */
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li { position: relative; margin: 0; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item {
		display: grid !important;
		grid-template-columns: 34px minmax(0, 1fr) !important;
		align-items: center !important;
		justify-content: start !important;
		column-gap: 10px;
		row-gap: 0;
		padding: 8px 10px !important;
		background: #fff !important;
		border: 1px solid var(--dkt-line) !important;
		border-radius: 12px !important;
		color: var(--dkt-vino) !important;
		box-shadow: none !important;
		text-align: left !important;
		font-weight: 600 !important;
		transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
	}
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item:hover,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item:focus-visible {
		transform: translateY(-1px);
		background: #fff !important;
		border-color: var(--dkt-magenta) !important;
		box-shadow: 0 1px 2px rgba(110, 16, 57, .05), 0 8px 22px rgba(110, 16, 57, .10) !important;
		color: var(--dkt-vino) !important;
	}
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .qi { width: 34px; height: 34px; border-radius: 9px; background: rgba(165, 0, 80, .10); color: var(--dkt-magenta); display: grid; place-items: center; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .qi::before {
		content: ""; width: 18px; height: 18px; background-color: currentColor;
		-webkit-mask: var(--mm-icon, var(--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' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 20 20'/%3E%3C/svg%3E"))) center / contain no-repeat;
		        mask: var(--mm-icon, var(--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' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 20 20'/%3E%3C/svg%3E"))) center / contain no-repeat;
	}
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx { display: flex; flex-direction: column; min-width: 0; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx b { font: 600 13.5px/1.2 var(--dkt-font-titles); color: inherit; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx small { font: 400 11.5px/1.25 var(--dkt-font-body); color: var(--dkt-muted); margin-top: 2px; letter-spacing: 0; text-transform: none; }

	/* filas de orientación de Andalan (¿Cómo funciona? · ¿Cuál es para mí?): ancho completo, icono teal */
	.dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu.dkt-mm > .dkt-mm-li:has(> a[href*="como-funciona"]),
	.dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu.dkt-mm > .dkt-mm-li:has(> a[href*="#cual"]) { grid-column: 1 / -1; }
	.dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu.dkt-mm > .dkt-mm-li:has(> a[href*="como-funciona"]) > a .qi,
	.dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu.dkt-mm > .dkt-mm-li:has(> a[href*="#cual"]) > a .qi { background: #E5F4EF; color: var(--dkt-teal, #2f8e7f); }

	/* ---------- destacado = banda de marca ---------- */
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li.dkt-mega-feat { grid-column: 1 / -1; margin: 0; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item--feat {
		grid-template-columns: 34px minmax(0, 1fr) auto !important;
		background: linear-gradient(120deg, var(--dkt-vino), var(--dkt-magenta) 70%, var(--brand-prudence-accent, #ED0076)) !important;
		border-color: transparent !important;
		color: #fff !important;
	}
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item--feat:hover,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-item--feat:focus-visible { background: linear-gradient(120deg, var(--dkt-vino), var(--dkt-magenta) 70%, var(--brand-prudence-accent, #ED0076)) !important; border-color: transparent !important; color: #fff !important; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item--feat .qi { background: rgba(255, 255, 255, .16); color: #fff; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item--feat .tx small { color: rgba(255, 255, 255, .85); }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item--feat .pill { font: 700 9.5px/1 var(--dkt-font-titles); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; white-space: nowrap; }

	/* ---------- fila de cierre ("Conoce el mundo Prudence", "Ver todos los DIU") ---------- */
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li.dkt-mega-more { grid-column: 1 / -1; border-top: 1px solid var(--dkt-line); margin-top: 2px; padding-top: 4px; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-more {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px;
		padding: 9px !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		color: var(--dkt-magenta) !important;
		font: 600 13px/1.2 var(--dkt-font-titles) !important;
		transform: none;
	}
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-more:hover,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a.dkt-mm-more:focus-visible { color: var(--dkt-vino) !important; background: transparent !important; box-shadow: none !important; transform: none; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-more .tx b { font: inherit; color: inherit; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-more svg { width: 15px; height: 15px; }
	/* Insumos: el destacado "¿Eres profesional?" va después del cierre (orden del menú) → sin línea encima */
	.dkt-header__nav .menu-item.dkt-mega--insumos > .sub-menu.dkt-mm > .dkt-mm-li.dkt-mega-feat { margin-top: 4px; }
}

/* ---------- cajón móvil (≤1024px): EXACTAMENTE como hasta hoy ----------
   El cajón lo viste movil.css (filas Inter, icono por a::before, punto rosa en los destacados,
   "ver todo" en rosa). Aquí solo se esconde lo que el markup nuevo añade (cabecera, cuadrito,
   dato corto, pill) y se deja que las reglas de movil.css sigan mandando. */
@media (max-width: 1024px) {
	.dkt-header__nav .sub-menu.dkt-mm > .dkt-mm-head { display: none; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .qi,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx small,
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .pill { display: none; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a .tx { display: inline; min-width: 0; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a .tx b { font: inherit; color: inherit; }
	/* el dato que venía en el propio título ("Neón — brilla en la oscuridad") se vuelve a mostrar en línea */
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx small.from-title { display: inline; font: inherit; color: inherit; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-item .tx small.from-title::before { content: " — "; }
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-more svg { width: 14px; height: 14px; flex: none; stroke: currentColor; }
}

/* =============================================================================
   Desplegable de cuenta (cabecera) — mismo panel, con cara
   ============================================================================= */
.dkt-account-menu.dkt-acc-dd {
	min-width: 300px;
	padding: 0;
	background: var(--dkt-soft, #FCF7FA);
	border: 1px solid var(--dkt-line);
	border-radius: 16px;
	box-shadow: 0 22px 55px -18px rgba(110, 16, 57, .30), 0 2px 6px rgba(110, 16, 57, .06);
	overflow: hidden;
}
/* v5.1 (Ricardo 08-sep): cabecera rosa suave en vez de la banda magenta; el avatar conserva la identidad */
.dkt-acc-dd__head {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px 13px;
	background: var(--dkt-blush, #FBEEF4);
	color: var(--dkt-vino);
	border-bottom: 1px solid var(--dkt-line);
}
.dkt-acc-dd__head .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--dkt-magenta), var(--brand-prudence-accent, #ED0076)); color: #fff; display: grid; place-items: center; font: 600 15px var(--dkt-font-titles); flex: none; }
.dkt-acc-dd__head .ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(165, 0, 80, .10); color: var(--dkt-magenta); display: grid; place-items: center; flex: none; }
.dkt-acc-dd__head .ic svg { width: 20px; height: 20px; }
.dkt-acc-dd__head .t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dkt-acc-dd__head .k { font: 600 10.5px/1.2 var(--dkt-font-titles); letter-spacing: .12em; text-transform: uppercase; color: var(--dkt-muted); }
.dkt-acc-dd__head .n { font: 700 15px/1.2 var(--dkt-font-titles); letter-spacing: -.01em; margin-top: 2px; color: var(--dkt-vino); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkt-acc-dd__head .chip { margin-left: auto; font: 600 10.5px/1 var(--dkt-font-titles); padding: 5px 9px; border-radius: 999px; background: var(--dkt-paper-2, #F6EEF2); color: var(--dkt-muted); white-space: nowrap; }
.dkt-acc-dd__head .chip.is-doctor, .dkt-acc-dd__head .chip.is-mayorista { background: #E5F4EF; color: #1c7a4f; }
.dkt-acc-dd__head .chip.is-pendiente { background: #FDF0E0; color: #a56b1c; }
.dkt-acc-dd__body { padding: 8px; display: grid; gap: 4px; }
.dkt-acc-dd__body .grp { font: 700 10.5px/1.2 var(--dkt-font-titles); letter-spacing: .12em; text-transform: uppercase; color: var(--dkt-muted); padding: 8px 10px 2px; }
.dkt-acc-dd__item {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px;
	padding: 8px 10px; background: #fff; border: 1px solid var(--dkt-line); border-radius: 12px;
	color: var(--dkt-vino); text-decoration: none;
	font: 600 13.5px/1.2 var(--dkt-font-titles);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dkt-acc-dd__item:hover, .dkt-acc-dd__item:focus-visible { transform: translateY(-1px); border-color: var(--dkt-magenta); box-shadow: 0 1px 2px rgba(110, 16, 57, .05), 0 8px 22px rgba(110, 16, 57, .10); color: var(--dkt-vino); }
.dkt-acc-dd__item .qi { width: 30px; height: 30px; border-radius: 8px; background: rgba(165, 0, 80, .10); color: var(--dkt-magenta); display: grid; place-items: center; }
.dkt-acc-dd__item .qi svg { width: 16px; height: 16px; }
.dkt-acc-dd__item b { font: inherit; color: inherit; }
.dkt-acc-dd__item .tx { display: flex; flex-direction: column; min-width: 0; }
.dkt-acc-dd__item .tx small { font: 400 11.5px/1.25 var(--dkt-font-body); color: var(--dkt-muted); margin-top: 2px; }
.dkt-acc-dd__item .ext { display: inline-flex; vertical-align: middle; margin-left: 6px; opacity: .55; }
.dkt-acc-dd__item .ext svg { width: 12px; height: 12px; }
.dkt-acc-dd__item.is-out { background: transparent; border-color: transparent; color: var(--dkt-ink-soft, #6E5A65); font-weight: 500; }
.dkt-acc-dd__item.is-out .qi { background: transparent; color: var(--dkt-muted); }
.dkt-acc-dd__item.is-out:hover { background: #fff; border-color: var(--dkt-line); box-shadow: none; transform: none; }
.dkt-acc-dd__body .btns { display: flex; gap: 8px; padding: 2px 0 4px; }
.dkt-acc-dd__body .btn { flex: 1; text-align: center; font: 600 13px/1.2 var(--dkt-font-titles); padding: 10px 12px; border-radius: 10px; background: var(--dkt-magenta); color: #fff; border: 1.5px solid var(--dkt-magenta); text-decoration: none; transition: background .15s ease, color .15s ease; }
.dkt-acc-dd__body .btn:hover { background: var(--dkt-magenta-mid, #C42A78); border-color: var(--dkt-magenta-mid, #C42A78); color: #fff; }
.dkt-acc-dd__body .btn.ghost { background: #fff; color: var(--dkt-vino); border-color: var(--dkt-line); }
.dkt-acc-dd__body .btn.ghost:hover { border-color: var(--dkt-magenta); color: var(--dkt-magenta); background: #fff; }
.dkt-account-menu.dkt-acc-dd img.emoji { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.dkt-header__nav .sub-menu.dkt-mm .dkt-mm-li > a, .dkt-acc-dd__item, .dkt-acc-dd__body .btn { transition: none !important; transform: none !important; }
}