/**
 * Zenth Toolkit — Header Icons
 *
 * Estilos de los 3 widgets del header (Search, User, Cart) + mini-cart drawer.
 * Los iconos en sí heredan mayormente del child theme (#cr-header-icons); aquí
 * solo añadimos el badge del carrito, el dropdown de usuario y el drawer del
 * minicart (con barra de envío gratis + upsell).
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Tokens (:root)        → vars de color / timings / z del módulo
 *   §2  Cart icon + badge     → .zenth-cart-icon (+ __badge)
 *   §3  User dropdown         → .zenth-user-dropdown / .zenth-user-menu
 *   §4  Minicart root         → root + overlay + drawer (estructura del drawer)
 *   §5  Minicart header       → title / count / close
 *   §6  Minicart body + empty → scroll body + estado vacío
 *   §7  Minicart items        → lista de productos del carrito
 *   §8  Minicart footer       → subtotal + actions + botones
 *   §9  Body scroll lock      → body.zenth-minicart-body-lock
 *   §10 Free-shipping bar     → .zenth-minicart-shipping (barra de progreso)
 *   §11 Upsell                → .zenth-minicart-upsell (cross-sell)
 *   §12 Responsive            → TODOS los @media consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS reales del archivo:
 *   Mobile-small  → max-width: 480px   (único tier de tamaño; toca drawer,
 *                   user-menu, items, footer, shipping y upsell)
 *
 *   En el original había DOS @media (max-width: 480px) (uno tras los botones,
 *   otro tras el upsell): se consolidan en §12 sin cambiar valores.
 *   + 1 media de accesibilidad (prefers-reduced-motion) en subsección aparte.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · TOKENS (:root)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	--zenth-hi-bg: #ffffff;
	--zenth-hi-text: #1a1a1a;
	--zenth-hi-text-muted: rgba(26, 26, 26, 0.6);
	--zenth-hi-accent: #c00000;
	--zenth-hi-border: rgba(0, 0, 0, 0.08);
	--zenth-hi-hover-bg: rgba(0, 0, 0, 0.04);
	/* Unificado al overlay global del proyecto (declarado en theme global.css). */
	--zenth-hi-overlay: var(--zenth-mm-overlay, rgba(0, 0, 0, 0.7));
    /* Timings asimétricos: abrir con peso, cerrar decidido. */
    --zenth-hi-speed-open: 420ms;
    --zenth-hi-speed-close: 340ms;
    --zenth-hi-ease-open: cubic-bezier(0.32, 0.72, 0, 1);
    --zenth-hi-ease-close: cubic-bezier(0.4, 0, 0.2, 1);

    /* Alias de compatibilidad. */
    --zenth-hi-speed: var(--zenth-hi-speed-open);
    --zenth-hi-ease: var(--zenth-hi-ease-open);
	--zenth-hi-z: 999998;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · CART ICON + BADGE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-cart-icon {
	position: relative;
}

.zenth-cart-icon__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--zenth-hi-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 100px;
	box-sizing: border-box;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · USER DROPDOWN — menú de cuenta
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-user-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.zenth-user-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 240px;
	background: var(--zenth-hi-bg);
	color: var(--zenth-hi-text);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
	z-index: var(--zenth-hi-z);
	overflow: hidden;
}

.zenth-user-dropdown.is-open .zenth-user-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}

.zenth-user-menu__greeting {
	padding: 16px 20px;
	font-size: 14px;
	color: var(--zenth-hi-text-muted);
	border-bottom: 1px solid var(--zenth-hi-border);
	background: var(--zenth-hi-hover-bg);
}

.zenth-user-menu__greeting strong {
	color: var(--zenth-hi-text);
	font-weight: 700;
}

.zenth-user-menu__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 0 !important;
}

.zenth-user-menu__list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.zenth-user-menu__list a {
	display: block !important;
	padding: 12px 20px !important;
	color: var(--zenth-hi-text) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: background 150ms ease, color 150ms ease;
	background: transparent !important;
}

.zenth-user-menu__list a:hover,
.zenth-user-menu__list a:focus-visible {
	background: var(--zenth-hi-hover-bg) !important;
	color: var(--zenth-hi-accent) !important;
	outline: none !important;
}

.zenth-user-menu__separator {
	height: 1px;
	background: var(--zenth-hi-border);
	margin: 8px 0;
}

.zenth-user-menu__logout {
	color: var(--zenth-hi-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · MINICART ROOT — root + overlay + drawer
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-root {
	position: fixed;
	inset: 0;
	z-index: var(--zenth-hi-z);
	pointer-events: none;
	visibility: hidden;
	font-family: inherit;
	transition: visibility 0s linear var(--zenth-hi-speed-close);
}

.zenth-minicart-root.is-open {
	pointer-events: auto;
	visibility: visible;
	transition: visibility 0s linear 0s;
}


.zenth-minicart-overlay {
	position: absolute;
	inset: 0;
	background: var(--zenth-hi-overlay);
	opacity: 0;
	transition: opacity var(--zenth-hi-speed-close) var(--zenth-hi-ease-close);
	cursor: pointer;
}

.zenth-minicart-root.is-open .zenth-minicart-overlay {
	opacity: 1;
	transition: opacity var(--zenth-hi-speed-open) var(--zenth-hi-ease-open);
}


.zenth-minicart-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100vw;
	background: var(--zenth-hi-bg);
	color: var(--zenth-hi-text);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--zenth-hi-speed-close) var(--zenth-hi-ease-close);
	overflow: hidden;
}

.zenth-minicart-root.is-open .zenth-minicart-drawer {
	transform: translateX(0);
	transition: transform var(--zenth-hi-speed-open) var(--zenth-hi-ease-open);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · MINICART HEADER — title / count / close
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--zenth-hi-border);
	flex-shrink: 0;
	min-height: 72px;
	background: var(--zenth-hi-bg);
}

.zenth-minicart-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: -0.2px;
	margin: 0 !important;
	text-transform: uppercase;
	color: var(--zenth-hi-text) !important;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.zenth-minicart-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--zenth-hi-text-muted);
	letter-spacing: 0;
	text-transform: none;
}

.zenth-minicart-count::before {
	content: "(";
}

.zenth-minicart-count::after {
	content: ")";
}

.zenth-minicart-close {
	background: transparent !important;
	border: none !important;
	padding: 8px !important;
	margin: -8px !important;
	cursor: pointer;
	color: var(--zenth-hi-text) !important;
	line-height: 1;
	transition: color 200ms ease;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.zenth-minicart-close:hover {
	color: var(--zenth-hi-accent) !important;
	background: transparent !important;
}

.zenth-minicart-close-icon {
	font-size: 32px;
	line-height: 0.8;
	font-weight: 300;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · MINICART BODY + EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}


.zenth-minicart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
	text-align: center;
	gap: 20px;
	min-height: 300px;
}

.zenth-minicart-empty__icon {
	color: var(--zenth-hi-text-muted);
	opacity: 0.4;
}

.zenth-minicart-empty__text {
	margin: 0;
	font-size: 15px;
	color: var(--zenth-hi-text-muted);
}

.zenth-minicart-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: var(--zenth-hi-accent);
	color: #fff !important;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all 200ms ease;
}

.zenth-minicart-empty__cta:hover {
	background: #8b0000;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(192, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · MINICART ITEMS — lista de productos del carrito
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-items {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 0 !important;
}

.zenth-minicart-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--zenth-hi-border);
	list-style: none !important;
	margin: 0 !important;
	position: relative;
}

.zenth-minicart-item:last-child {
	border-bottom: none;
}

.zenth-minicart-item__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--zenth-hi-hover-bg);
	display: block;
}

.zenth-minicart-item__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.zenth-minicart-item__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 24px; /* espacio para el botón X */
}

.zenth-minicart-item__name {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--zenth-hi-text) !important;
	text-decoration: none !important;
	line-height: 1.3;
	transition: color 150ms ease;
}

a.zenth-minicart-item__name:hover {
	color: var(--zenth-hi-accent) !important;
}

.zenth-minicart-item__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--zenth-hi-text-muted);
}

.zenth-minicart-item__qty {
	flex-shrink: 0;
}

.zenth-minicart-item__price {
	font-weight: 700;
	color: var(--zenth-hi-text);
}

.zenth-minicart-item__price .woocommerce-Price-amount {
	font-weight: 700;
}

.zenth-minicart-item__remove {
	position: absolute !important;
	top: 16px;
	right: 20px;
	width: 24px;
	height: 24px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--zenth-hi-text-muted) !important;
	font-size: 20px !important;
	line-height: 1;
	text-decoration: none !important;
	border-radius: 50%;
	transition: all 150ms ease;
	background: transparent !important;
	border: none !important;
	font-weight: 400 !important;
}

.zenth-minicart-item__remove:hover {
	color: var(--zenth-hi-accent) !important;
	background: var(--zenth-hi-hover-bg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · MINICART FOOTER — subtotal + actions + botones
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-footer {
	flex-shrink: 0;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--zenth-hi-border);
	background: var(--zenth-hi-bg);
}

.zenth-minicart-footer:empty {
	display: none;
}

.zenth-minicart-subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--zenth-hi-border);
}

.zenth-minicart-subtotal__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--zenth-hi-text-muted);
}

.zenth-minicart-subtotal__value {
	font-size: 20px;
	font-weight: 800;
	color: var(--zenth-hi-text);
	letter-spacing: -0.2px;
}


.zenth-minicart-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zenth-minicart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 100px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 200ms ease;
	line-height: 1;
	box-shadow: none;
}

.zenth-minicart-btn--primary {
	background: var(--zenth-hi-accent);
	color: #fff !important;
	border-color: var(--zenth-hi-accent);
}

.zenth-minicart-btn--primary:hover {
	background: #8b0000;
	border-color: #8b0000;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(192, 0, 0, 0.3);
}

.zenth-minicart-btn--outline {
	background: transparent;
	color: var(--zenth-hi-text) !important;
	border-color: var(--zenth-hi-text);
}

.zenth-minicart-btn--outline:hover {
	background: var(--zenth-hi-text);
	color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · BODY SCROLL LOCK
   ═══════════════════════════════════════════════════════════════════════ */

body.zenth-minicart-body-lock {
	overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · FREE-SHIPPING BAR — barra de progreso de envío gratis
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-shipping {
	padding: 14px 20px;
	background: var(--zenth-hi-hover-bg);
	border-bottom: 1px solid var(--zenth-hi-border);
}

.zenth-minicart-shipping__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--zenth-hi-text);
	line-height: 1.4;
	margin-bottom: 10px;
}

.zenth-minicart-shipping__label .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--zenth-hi-accent);
}

.zenth-minicart-shipping__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #1a9f5c;
	flex-shrink: 0;
}

.zenth-minicart-shipping__bar {
	position: relative;
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 100px;
	overflow: hidden;
}

.zenth-minicart-shipping__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--zenth-hi-accent);
	border-radius: 100px;
	transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zenth-minicart-shipping.is-unlocked {
	background: rgba(26, 159, 92, 0.08);
}

.zenth-minicart-shipping.is-unlocked .zenth-minicart-shipping__label {
	color: #1a9f5c;
	font-weight: 600;
}

.zenth-minicart-shipping.is-unlocked .zenth-minicart-shipping__fill {
	background: #1a9f5c;
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · UPSELL — cross-sell de productos sugeridos
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-minicart-upsell {
	padding: 20px 20px 8px;
	border-top: 1px solid var(--zenth-hi-border);
	background: var(--zenth-hi-hover-bg);
}

.zenth-minicart-upsell__title {
	margin: 0 0 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--zenth-hi-text-muted);
	line-height: 1 !important;
}

.zenth-minicart-upsell__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zenth-minicart-upsell__item {
	list-style: none !important;
	margin: 0 !important;
	padding: 10px;
	background: var(--zenth-hi-bg);
	border: 1px solid var(--zenth-hi-border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.zenth-minicart-upsell__item:hover {
	border-color: var(--zenth-hi-text-muted);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.zenth-minicart-upsell__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
}

.zenth-minicart-upsell__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zenth-minicart-upsell__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zenth-minicart-upsell__name {
	color: var(--zenth-hi-text) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zenth-minicart-upsell__name:hover {
	color: var(--zenth-hi-accent) !important;
}

.zenth-minicart-upsell__price {
	font-size: 12px;
	font-weight: 600;
	color: var(--zenth-hi-accent);
	line-height: 1.2;
}

.zenth-minicart-upsell__price del {
	color: var(--zenth-hi-text-muted);
	font-weight: 400;
	margin-right: 4px;
}

.zenth-minicart-upsell__add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 1px solid var(--zenth-hi-border);
	background: var(--zenth-hi-bg);
	color: var(--zenth-hi-text) !important;
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none !important;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.zenth-minicart-upsell__add:hover:not(:disabled) {
	background: var(--zenth-hi-accent);
	border-color: var(--zenth-hi-accent);
	color: #fff !important;
}

.zenth-minicart-upsell__add:disabled {
	cursor: wait;
	opacity: 0.6;
}

.zenth-minicart-upsell__add.is-added {
	background: #1a9f5c;
	border-color: #1a9f5c;
	color: #fff !important;
	transform: scale(0.92);
}

.zenth-minicart-upsell__add svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §12 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Mobile-small (≤480)  — único breakpoint de tamaño.
   Al final, accesibilidad (prefers-reduced-motion), que NO es breakpoint de
   tamaño y no se consolida con el de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── MOBILE-SMALL · max-width: 480px ──────────────── */
@media (max-width: 480px) {
	/* §4 · Drawer ocupa todo el ancho del viewport */
	.zenth-minicart-drawer {
		width: 100vw;
	}

	/* §3 · User menu: más angosto y pegado al borde derecho */
	.zenth-user-menu {
		min-width: 200px;
		right: -16px;
	}

	/* §5 · Header del minicart: padding más compacto */
	.zenth-minicart-header {
		padding: 16px 20px;
	}

	/* §7 · Items: padding/gap más compactos */
	.zenth-minicart-item {
		padding: 14px 20px;
		gap: 12px;
	}

	.zenth-minicart-item__thumb {
		width: 60px;
		height: 60px;
	}

	/* §8 · Footer: padding más compacto */
	.zenth-minicart-footer {
		padding: 16px 20px 20px;
	}

	/* §10 · Free-shipping bar: padding más compacto */
	.zenth-minicart-shipping {
		padding: 12px 16px;
	}

	/* §11 · Upsell: padding más compacto */
	.zenth-minicart-upsell {
		padding: 16px 16px 6px;
	}

	.zenth-minicart-upsell__item {
		padding: 8px;
	}

	.zenth-minicart-upsell__thumb {
		width: 44px;
		height: 44px;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-minicart-drawer,
	.zenth-minicart-overlay,
	.zenth-user-menu {
		transition-duration: 50ms !important;
	}
}