/* =========================================================================
   Promotion mechanics styling (ticket 19) - site add-on, not the child
   theme stylesheet. Every value reads the design tokens ticket 01 placed
   in the child theme stylesheet; no hard-coded colours except where a
   plugin insists on painting its own box.
   ========================================================================= */

/* --- The plain "Ends 31 Oct" fallback line ---------------------------- */
.nn-drop-ends {
	margin: 0 0 14px;
	color: var(--color-charcoal);
}

/* --- The countdown on a product page ---------------------------------- */
.hurrytimer-campaign,
.hurrytimer-campaign * {
	font-family: var(--font-body);
	box-sizing: content-box;
}

.hurrytimer-campaign {
	text-align: center;
}

.hurrytimer-headline {
	font-family: var(--font-body);
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	color: var(--color-charcoal);
	margin-bottom: 8px;
}

/* Digit blocks: sand panel, hairline stone frame, square corners. */
.hurrytimer-campaign .hurrytimer-timer-block {
	border: 1px solid var(--color-stone);
	border-radius: 0;
	background: var(--color-sand);
	font-variant-numeric: tabular-nums;
}

.hurrytimer-campaign .hurrytimer-timer-digit {
	color: var(--color-charcoal);
	font-weight: 600;
}

.hurrytimer-campaign .hurrytimer-timer-label,
.hurrytimer-campaign .hurrytimer-timer-sep {
	color: var(--color-charcoal);
}

/* The drop-closed message that replaces the timer at zero. */
.hurrytimer-campaign-message {
	display: block;
	clear: both;
	margin: 14px 0 0;
	padding: 14px 18px;
	background: var(--color-sand);
	border: 1px solid var(--color-stone);
	border-radius: 0;
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	text-align: center;
}

/* --- The banner section (date window, sample page) -------------------- */
.nn-banner {
	display: block;
	margin: 0;
	padding: 18px 22px;
	background: var(--color-sand);
	border-top: 1px solid var(--color-stone);
	border-bottom: 1px solid var(--color-stone);
	text-align: center;
}

.nn-banner__kicker {
	display: block;
	margin: 0 0 6px;
	font-size: var(--type-overline-size);
	font-weight: var(--type-overline-weight);
	line-height: var(--type-overline-leading);
	letter-spacing: var(--type-overline-tracking);
	text-transform: var(--type-overline-transform);
	color: var(--color-charcoal);
}

.nn-banner__line {
	display: block;
	margin: 0;
	font-size: var(--type-body-md-size);
	font-weight: var(--type-body-md-weight);
	line-height: var(--type-body-md-leading);
	color: var(--color-charcoal);
}

/* The If-So slot on the sample page: no empty box while the window is shut. */
.nn-banner-slot:empty {
	display: none;
}