/* ═══════════════════════════════════════════════════════════════════════════
   PROMOCIONES (inc/promociones.php, assets/js/promociones.js)

   Tres piezas: la barra superior (que reutiliza .zihouse-banner), el aviso al
   entrar y el panel de regalo del carrito y del pago. Solo se cargan mientras
   una campaña no ha terminado.

   SIN COLOR DE RELLENO. La primera versión (14-10-2026) teñía el panel de lila y
   le ponía borde lila al aviso; la tienda lo vio «de perfumería barata» y tenía
   razón: en esta web los bloques se separan con una línea de un píxel, la
   tipografía de los titulares es la serif y el acento se usa en una palabra,
   no en una caja. Es lo mismo que ya hace la ficha con su lista de valor («una
   línea bien puesta separa mejor que una caja», woocommerce.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lo que el servidor deja escondido hasta que el navegador mira la fecha. Sin
   esta regla, el display de cada componente le ganaría al atributo hidden. */
.zihouse-banner[hidden],
.zihouse-promo-aviso[hidden],
.zihouse-pdp__value li[hidden],
.zihouse-promo-panel__form[hidden],
.zihouse-promo-panel__error[hidden] {
	display: none !important;
}

/* El texto pequeño en mayúsculas que abre cada pieza: el mismo que usa la
   portada (.zihouse-brands__eyebrow). */
.zihouse-promo-aviso__eyebrow,
.zihouse-promo-panel__eyebrow {
	margin: 0;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

/* ── Línea de la ficha ───────────────────────────────────────────────────── */
/* Una línea más de la lista, en tinta. Se distingue por lo que dice, no por el
   color. */
.zihouse-pdp__value li.zihouse-pdp__value-promo {
	color: var(--zihouse-color-ink);
	font-weight: 500;
}

/* ── Aviso al entrar ─────────────────────────────────────────────────────── */
/* Una tarjeta en la esquina, no una ventana que tapa la página: la misma
   familia que el aviso de cookies (fondo claro, borde de tinta de un píxel,
   titular en serif). Abajo a la izquierda, porque a la derecha vive el botón de
   asistencia; las cookies, que salen antes en el mismo sitio, ya se han
   resuelto cuando aparece. */
.zihouse-promo-aviso {
	position: fixed;
	z-index: 44;
	left: clamp(0.75rem, 2.5vw, 1.75rem);
	bottom: clamp(0.75rem, 2.5vw, 1.75rem);
	width: min(24rem, calc(100vw - 1.5rem));
	display: grid;
	gap: 0.6rem;
	padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	background: var(--zihouse-color-surface-raised);
	color: var(--zihouse-color-ink);
	border: 1px solid var(--zihouse-color-ink);
	border-radius: var(--zihouse-radius-lg);
	box-shadow: var(--zihouse-shadow-lg);
	font-family: var(--zihouse-font-body);
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity var(--zihouse-duration-slow, 400ms) var(--zihouse-ease-out-quint, ease-out),
		transform var(--zihouse-duration-slow, 400ms) var(--zihouse-ease-out-quint, ease-out);
}

.zihouse-promo-aviso.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 48rem) {
	/* Deja libre la esquina derecha, donde está el botón de asistencia. */
	.zihouse-promo-aviso {
		right: 4.6rem;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zihouse-promo-aviso {
		transition: none;
		transform: none;
	}
}

.zihouse-promo-aviso__cerrar {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--zihouse-color-ink-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.zihouse-promo-aviso__cerrar:hover,
.zihouse-promo-aviso__cerrar:focus-visible {
	color: var(--zihouse-color-ink);
}

.zihouse-promo-aviso__titulo {
	margin: 0;
	padding-right: 2rem;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl, 1.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.zihouse-promo-aviso__texto {
	margin: 0;
	font-size: var(--zihouse-text-sm);
	line-height: 1.6;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-promo-aviso__boton {
	justify-self: start;
	margin-top: 0.5rem;
}

/* ── Panel del regalo, en el carrito y en el pago ─────────────────────────── */
/* Sin fondo ni borde: una regla arriba y otra abajo, como las secciones de la
   ficha. Lo que lo distingue del carrito es el titular en serif. */
.zihouse-promo-panel {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 var(--zihouse-space-xl, 2.5rem);
	padding: var(--zihouse-space-md, 1.25rem) 0 var(--zihouse-space-lg, 1.75rem);
	border-top: 1px solid var(--zihouse-color-ink);
	border-bottom: 1px solid var(--zihouse-color-border);
	font-family: var(--zihouse-font-body);
}

.zihouse-promo-panel:empty {
	display: none;
}

.zihouse-promo-panel__titulo {
	margin: 0;
	max-width: 30ch;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl, 1.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.zihouse-promo-panel__pista {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg, 1.25rem);
	font-weight: 400;
	line-height: 1.3;
}

.zihouse-promo-panel__pista + .zihouse-promo-panel__titulo {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	line-height: 1.5;
}

.zihouse-promo-panel__nota {
	margin: 0.25rem 0 0;
	max-width: 64ch;
	font-size: var(--zihouse-text-xs);
	line-height: 1.55;
	color: var(--zihouse-color-ink-muted);
}

/* El regalo ya elegido: una línea de la lista, con la cantidad escrita antes
   («1 ×»), como en una factura. */
.zihouse-promo-panel__elegido {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--zihouse-text-base);
	line-height: 1.5;
}

.zihouse-promo-panel__marca {
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--zihouse-color-ink);
}

.zihouse-promo-panel__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.zihouse-promo-panel__enlace {
	min-height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--zihouse-color-ink);
	font: inherit;
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

.zihouse-promo-panel__enlace:hover,
.zihouse-promo-panel__enlace:focus-visible {
	color: var(--zihouse-color-ink-muted);
}

.zihouse-promo-panel__form {
	display: grid;
	gap: 1rem;
}

.zihouse-promo-panel__lista {
	display: grid;
	gap: 0.75rem;
}

.zihouse-promo-panel__lista.is-varios {
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Cada regalo: foto a cuadro y nombre debajo, como una tarjeta del catálogo.
   El elegido se marca con una línea de tinta, no con un color. */
.zihouse-promo-panel__regalo {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.35rem 1rem;
	align-items: start;
	padding: 0.85rem;
	background: var(--zihouse-color-surface-raised);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	transition: border-color 200ms ease-out;
}

.zihouse-promo-panel__lista.is-varios .zihouse-promo-panel__regalo {
	grid-template-columns: 1fr;
	padding: 0.6rem 0.6rem 0.85rem;
	cursor: pointer;
}

.zihouse-promo-panel__regalo:hover {
	border-color: var(--zihouse-color-border-strong);
}

.zihouse-promo-panel__regalo input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.zihouse-promo-panel__regalo.is-seleccionado,
.zihouse-promo-panel__regalo:has(input[type="radio"]:checked) {
	border-color: var(--zihouse-color-ink);
	box-shadow: inset 0 0 0 1px var(--zihouse-color-ink);
}

.zihouse-promo-panel__regalo:has(input[type="radio"]:focus-visible) {
	outline: var(--zihouse-focus-ring-width, 2px) solid var(--zihouse-color-ink);
	outline-offset: 3px;
}

.zihouse-promo-panel__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--zihouse-radius-sm);
}

.zihouse-promo-panel__lista.is-varios .zihouse-promo-panel__foto img {
	aspect-ratio: 4 / 3;
}

.zihouse-promo-panel__nombre {
	font-size: var(--zihouse-text-sm);
	font-weight: 500;
	line-height: 1.35;
	align-self: center;
}

.zihouse-promo-panel__lista.is-varios .zihouse-promo-panel__nombre {
	padding-top: 0.25rem;
}

/* En la tarjeta elegida, el nombre lleva delante una marca pequeña. */
.zihouse-promo-panel__lista.is-varios .zihouse-promo-panel__regalo.is-seleccionado .zihouse-promo-panel__nombre::before,
.zihouse-promo-panel__lista.is-varios .zihouse-promo-panel__regalo:has(input[type="radio"]:checked) .zihouse-promo-panel__nombre::before {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin: 0 0.5rem 0.1rem 0;
	border-radius: 50%;
	background: var(--zihouse-color-ink);
}

.zihouse-promo-panel__campos {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.6rem;
}

.zihouse-promo-panel__lista:not(.is-varios) .zihouse-promo-panel__campos {
	grid-column: 2;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.zihouse-promo-panel__campo {
	display: grid;
	gap: 0.35rem;
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

/* Los mismos desplegables que la ficha (Medida, Color). 16 px como mínimo:
   Safari de iPhone amplía la página al tocar un campo más pequeño. */
.zihouse-promo-panel__campo select {
	width: 100%;
	min-height: var(--zihouse-control-h, 48px);
	padding: 0 0.9rem;
	background-color: var(--zihouse-color-surface-raised);
	border: 1px solid var(--zihouse-color-border-strong);
	border-radius: var(--zihouse-radius-control);
	color: var(--zihouse-color-ink);
	font: 400 16px/1.2 var(--zihouse-font-body);
	text-transform: none;
	letter-spacing: normal;
}

.zihouse-promo-panel__campo select:focus-visible {
	outline: var(--zihouse-focus-ring-width, 2px) solid var(--zihouse-color-ink);
	outline-offset: 2px;
}

.zihouse-promo-panel__boton {
	justify-self: start;
}

.zihouse-promo-panel__boton[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.zihouse-promo-panel__error,
.zihouse-promo-panel__aviso {
	margin: 0;
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-danger, #a4372b);
}