/* Mungos — Halloween · La Casa de Madame: barras del premio (carrito, checkout, mini-cart).
 * Tokens del diseño (docs/analisis-assets-2026-09-27.md §4): lima #c2e535, tinta #231705.
 * La tipografía la pone el tema hasta que haya licencia web de Black Mustang / SansPlomb. */
.mhw-slot { display: block; }
.mhw-slot:empty { display: none; }
/* La piel del carrito (mungos-animations, shop.css) arma .woocommerce como grid de 2 columnas: sin esto la barra caía en
 * la columna angosta de la derecha y dejaba un hueco en blanco a la izquierda del carrito (prueba manual del 5-oct). */
.woocommerce > .mhw-slot { grid-column: 1 / -1; }
.mhw-bar {
	--mhw-lime: #c2e535;
	--mhw-ink: #231705;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: 14px;
	background: var(--mhw-lime);
	color: var(--mhw-ink);
	font-weight: 700;
	line-height: 1.35;
}
.mhw-bar--expired { background: #f3eedf; }
.mhw-bar__icon { flex: 0 0 auto; width: 44px; height: 44px; }
/* Especificidad frente a Avada (.woocommerce p = 0,1,1): .mhw-bar .mhw-bar__text pesa 0,2,0. */
.mhw-bar .mhw-bar__text { flex: 1 1 auto; margin: 0; }
.mhw-countdown { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.mhw-bar .woocommerce-Price-amount,
.mhw-upsell .woocommerce-Price-amount { color: inherit !important; }
.mhw-bar__cta,
.mhw-bar__cta:visited {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--mhw-ink);
	color: var(--mhw-lime) !important;
	font-weight: 800;
	text-decoration: none;
}
/* El tema subraya los enlaces del carrito (se veía «Ir a la tienda» subrayado sobre el botón oscuro). */
.mhw-slot .mhw-bar__cta { text-decoration: none !important; }
/* El tema pinta los hover de fucsia: aquí manda la paleta de Madame. */
.mhw-bar__cta:hover,
.mhw-bar__cta:focus-visible { background: #000 !important; color: var(--mhw-lime) !important; }
.mhw-bar__cta:focus-visible,
.mhw-upsell__item a:focus-visible { outline: 3px solid #231705; outline-offset: 2px; }
.mhw-slot .mhw-upsell {
	display: grid;
	/* 120px, no 140: a 320px de ancho 140 no cabía dos veces y quedaba una sola columna muy alta. */
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: -6px 0 16px;
	padding: 0;
	list-style: none;
}
.mhw-slot .mhw-upsell li { margin: 0; }
.mhw-upsell__item a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 8px;
	border: 2px solid #231705;
	border-radius: 12px;
	background: #fff;
	color: #231705;
	text-decoration: none;
}
/* Color de reposo blindado: el tema pinta enlaces con su propio color por defecto. */
.mhw-slot .mhw-upsell__item a { color: #231705 !important; }
.mhw-upsell__item a:hover,
.mhw-upsell__item a:focus-visible { color: #231705 !important; background: #fff !important; text-decoration: none !important; }
.mhw-upsell__item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.mhw-upsell__name { font-size: 13px; line-height: 1.25; }
.mhw-upsell__price { font-weight: 800; }
.mhw-upsell__add { margin-top: auto; padding: 6px; border-radius: 8px; background: #c2e535; text-align: center; font-weight: 800; }
.mhw-gift-qty { display: inline-block; min-width: 2em; text-align: center; font-weight: 700; }
/* Oculto visualmente pero disponible para lectores de pantalla (aria-live="polite" lo anuncia). */
.mhw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mhw-slot--mini .mhw-bar { flex-wrap: wrap; margin: 8px; padding: 8px 10px; font-size: 13px; }
.mhw-slot--mini .mhw-bar__icon { width: 32px; height: 32px; }
.mhw-slot--mini .mhw-bar__cta { width: 100%; text-align: center; }
.mhw-slot--mini .mhw-upsell { grid-template-columns: 1fr 1fr; margin: 0 8px 8px; }
/* Aviso flotante (pill) mientras el cliente compra en la tienda (Alex, 5-oct): abajo al centro, sobre el contenido. */
.mhw-slot--pill {
	position: fixed;
	left: 50%;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	width: min(760px, calc(100% - 24px));
	transform: translateX(-50%);
}
.mhw-slot--pill .mhw-bar {
	margin: 0;
	padding: 8px 10px 8px 12px;
	border: 2px solid #231705;
	box-shadow: 0 8px 24px rgba(35, 23, 5, .28);
	font-size: 15px;
}
.mhw-slot--pill .mhw-bar__icon { width: 36px; height: 36px; }
/* all: unset — el tema le pone a todo <button> borde rosado, relleno y ancho mínimo. */
.mhw-slot .mhw-pill__close {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #231705;
	font: 700 22px/1 sans-serif;
	cursor: pointer;
}
.mhw-slot .mhw-pill__close:hover,
.mhw-slot .mhw-pill__close:focus-visible { background: rgba(35, 23, 5, .12); color: #231705; }
.mhw-slot .mhw-pill__close:focus-visible { outline: 3px solid #231705; outline-offset: 1px; }
/* Hasta 960 px el pill ocupa casi todo el ancho: sube por encima de las burbujas de chat y del carrito flotante
 * (WhatsApp, Wizybot, XootiX suelen ir abajo a la derecha, a ~20 px y de ~60 px de alto). */
@media (max-width: 960px) {
	.mhw-slot--pill { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
	.mhw-bar { flex-wrap: wrap; }
	.mhw-bar__cta { width: 100%; text-align: center; }
	/* En el teléfono: ícono, texto y cerrar arriba; el botón abajo a todo el ancho. */
	.mhw-slot--pill .mhw-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 8px; font-size: 13.5px; }
	.mhw-slot--pill .mhw-bar__icon { width: 30px; height: 30px; grid-row: 1; }
	.mhw-slot--pill .mhw-bar__text { grid-column: 2; grid-row: 1; }
	.mhw-slot--pill .mhw-pill__close { grid-column: 3; grid-row: 1; align-self: start; }
	.mhw-slot--pill .mhw-bar__cta { grid-column: 1 / -1; grid-row: 2; width: auto; padding: 7px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
	/* Solo la primera vez que se ve la barra (cart-timer.js quita .is-new antes de insertar HTML fresco por AJAX). */
	.mhw-bar.is-new { animation: mhw-bar-in .3s ease-out; }
	@keyframes mhw-bar-in { from { opacity: 0; transform: translateY(-4px); } }
}