/* ==========================================================================
   Holiday Countdown Strips: one compact band built on the platform's countdown widget
   Every rule is scoped to the strip's own section (section.hcs26), so nothing else on the
   store changes, and the sheet only loads on a page that carries the widget (widgetCss).
   No new countdown logic: the platform's widget-countdown owns the date and the clock.
   One shape, four holidays. A section's class picks the holiday (hcs26-christmas,
   hcs26-black-friday, hcs26-new-years, hcs26-valentines); with none, it is Christmas.
   The strip adds what the widget does not give a one-line band:
   - the large flip cards set as a quiet typographic clock (and a clock that keeps ticking
     under reduced motion, where the platform's own rule would freeze it);
   - digits held back until the first tick, so the placeholder 99s are never seen;
   - the whole strip gone once the widget reports the date has passed;
   - an optional small text link to the landing page of the store's choice.
   Plain CSS (no nesting, no .min.css). The store's own fonts, no web font request.

   Color: each holiday sets four tokens, ground, ink, accent and glint (the small symbol beside
   the title). A store's judgement pass overrides them in holiday-countdown-strips-store.css
   (loaded after this sheet, plain hex; the platform skips it until it exists). The holiday
   blocks match the base block's specificity on purpose, so that file wins.
   ========================================================================== */

/* Tokens: the base is Christmas */
/* ----------------------------- */
section[data-pagebuilder="section"].hcs26 {
	/* signature */
	--hcs26-evergreen: #1f4a36;
	--hcs26-gold: #d9bf8c;
	--hcs26-ivory: #fbf8f3;
	/* store roles (the holiday's defaults) */
	--hcs26-ground: var(--hcs26-evergreen);  /* the band */
	--hcs26-ink: var(--hcs26-ivory);         /* title, hours, minutes, seconds, labels */
	--hcs26-accent: var(--hcs26-gold);       /* the days, the link, the frame, the hairlines and the symbol */
	/* derived */
	--hcs26-frame: color-mix(in srgb, var(--hcs26-accent) 65%, transparent);
	--hcs26-hairline: color-mix(in srgb, var(--hcs26-accent) 45%, transparent);
	--hcs26-gap: 24px;                       /* between the clock's units (the hairline sits in the middle) */
	--hcs26-glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l4 7h-2.6l4.2 6h-3l5 6.5h-6.4v1.8h-2.4V21H4.4l5-6.5h-3l4.2-6H8z'/%3E%3C/svg%3E");
	background-color: var(--hcs26-ground);
	/* a lighter frame set inside the band: ground, the line, ground again */
	outline: 1px solid var(--hcs26-frame);
	outline-offset: -6px;
	color: var(--hcs26-ink);
	padding-top: 0;
	padding-bottom: 0;
}

/* Black Friday: onyx and brass, a price tag */
section[data-pagebuilder="section"].hcs26-black-friday {
	--hcs26-ground: #15130f;
	--hcs26-ink: #f4efe6;
	--hcs26-accent: #d4af6a;
	--hcs26-glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 4.5A1.5 1.5 0 0 1 4.5 3h6.8a1.5 1.5 0 0 1 1.06.44l8.2 8.2a1.5 1.5 0 0 1 0 2.12l-6.8 6.8a1.5 1.5 0 0 1-2.12 0l-8.2-8.2A1.5 1.5 0 0 1 3 11.3zM7.6 5.9a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4z'/%3E%3C/svg%3E");
}

/* New Year's: midnight and platinum, a champagne glass */
section[data-pagebuilder="section"].hcs26-new-years {
	--hcs26-ground: #12203d;
	--hcs26-ink: #f6f7fb;
	--hcs26-accent: #c9d3e6;
	--hcs26-glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10c0 5-2 8.3-5 8.3S7 8 7 3zM11.2 10.8h1.6V19h-1.6zM8 19h8v2H8z'/%3E%3C/svg%3E");
}

/* Valentine's Day: garnet and blush, a heart */
section[data-pagebuilder="section"].hcs26-valentines {
	--hcs26-ground: #5b1a30;
	--hcs26-ink: #fdf3f0;
	--hcs26-accent: #f2c1c4;
	--hcs26-glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.8C6.2 16 3 12.9 3 9.3 3 6.6 5 4.6 7.5 4.6c1.8 0 3.4.9 4.5 2.4 1.1-1.5 2.7-2.4 4.5-2.4C19 4.6 21 6.6 21 9.3c0 3.6-3.2 6.7-9 11.5z'/%3E%3C/svg%3E");
}

section[data-pagebuilder="section"].hcs26 ::selection {
	background: var(--hcs26-accent);
	color: var(--hcs26-ground);
}

/* Layout */
/* ----------------------------- */
section[data-pagebuilder="section"].hcs26 > .container {
	padding: 0 20px;
}

section[data-pagebuilder="section"].hcs26 .widget {
	margin: 0;
}

section[data-pagebuilder="section"].hcs26 .widget-image-wrapper:empty {
	display: none;
}

/* The widget root is the strip's row: the words, then the clock */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 17px 0;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block {
	display: block;
	width: auto;
	padding: 0;
}

/* Words: the symbol, the title and the optional link. The symbols are the wrapper's own ::before and
   ::after (the wrapper carries the widget's .d-flex, so making it a grid needs !important).
   Phone: all centered, a symbol on each side of the title, the link centered beneath.
   From 768px: one symbol on the left, centered on the title and link together, which share a left edge. */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div {
	display: grid !important;
	grid-template-columns: auto auto auto;
	justify-content: center;
	align-items: center;
	column-gap: clamp(0.5rem, 3.1vw, 0.75rem); /* the symbols and the title ease in together so the longest title keeps one line at 320px */
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::before,
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::after {
	content: "";
	grid-row: 1;
	width: clamp(1.05rem, 4.9vw, 1.2rem);
	height: clamp(1.05rem, 4.9vw, 1.2rem);
	background: var(--hcs26-accent);
	-webkit-mask: var(--hcs26-glint) center / contain no-repeat;
	mask: var(--hcs26-glint) center / contain no-repeat;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::before {
	grid-column: 1;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::after {
	grid-column: 3;
	transform: scaleX(-1); /* the pair mirror each other around the title */
}

/* Title: the one line of text (the widget's .text-center is !important, so alignment is too) */
section[data-pagebuilder="section"].hcs26 .hcs26-title {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--hcs26-ink);
	font-family: var(--bs-h1-family), serif;
	font-size: clamp(1rem, 5vw, 1.125rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center !important;
	text-transform: none;
}

/* The optional link: a small underlined text link under the title. The hit area is padded out
   to 40px tall (the platform's phone minimum) and pulled back with negative margins, so the
   band stays compact. */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container {
	grid-column: 1 / -1;
	grid-row: 2;
	display: block;
	margin: 0;
	padding: 0;
	text-align: center !important;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a {
	position: relative;
	display: inline-block;
	margin: -10px 0;
	padding: 14px 8px;
	border-radius: 2px;
	color: var(--hcs26-accent);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-transform: uppercase;
	text-underline-offset: 4px;
	scroll-margin-bottom: 160px; /* keyboard focus scrolls clear of a fixed cookie or chat bar */
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a:hover {
	color: var(--hcs26-ink);
	text-decoration-thickness: 2px;
}

/* Keyboard focus: a ring that hugs the words (not the padded hit area, which would cut across the title).
   It is a border, so Windows high contrast keeps it; the browser's own outline would box the whole hit area. */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a:focus-visible {
	outline: none;
	text-decoration-thickness: 2px;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a:focus-visible::before {
	content: "";
	position: absolute;
	inset: 10px 2px 8px;
	border: 2px solid var(--hcs26-ink);
	border-radius: 3px;
	pointer-events: none;
}

/* Countdown: the platform's flip cards become a quiet typographic clock */
/* ----------------------------- */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hcs26-gap);
	padding: 0;
	opacity: 1;
}

/* The widget paints placeholder 99s until its first tick, which fills the screen-reader text:
   hold the digits back until then (the space stays reserved, so nothing jumps). */
section[data-pagebuilder="section"].hcs26:has([id$="-acc"]:empty) [data-widget-countdown] .countdown {
	opacity: 0;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding-bottom: 2px; /* the numbers' lining figures sit high in their line box: this lifts number and label 1px so their ink, not their box, is centered */
}

/* A hairline between the units, centered on the number and its label together */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group + .countdown-group::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--hcs26-gap) / -2);
	width: 1px;
	height: 32px;
	background: var(--hcs26-hairline);
	transform: translateY(-50%);
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards {
	display: flex;
	padding: 0;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card {
	position: relative;
	display: block;
	margin: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--hcs26-ink);
	font-family: var(--bs-h1-family), serif;
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card .countdown-digit-top {
	display: block;
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	overflow: visible;
	background: none;
	color: inherit;
	line-height: 1;
	text-align: center;
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card .countdown-digit-bottom {
	display: none;
}

/* The script swaps digits on these elements' animation events: keep a 1ms animation running
   (reduced motion included, where the platform sets animation: none) so the clock never
   freezes, and keep the elements invisible. */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card .countdown-digit-top-flip,
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card .countdown-digit-bottom-flip {
	position: absolute;
	inset: 0;
	visibility: hidden;
	transform: none;
	animation: hcs26-tick 1ms linear !important;
}

@keyframes hcs26-tick {
	to {
		opacity: 0;
	}
}

/* The days are the number that matters: the one accent figure */
section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group.countdown-group-days .countdown-group-cards .countdown-card {
	color: var(--hcs26-accent);
}

section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-label {
	margin: 0;
	color: var(--hcs26-ink);
	font-family: inherit;
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* After the date: the widget reports it has passed by hiding its clock; the whole strip goes with it */
section[data-pagebuilder="section"].hcs26:has([data-widget-countdown] .countdown.hide) {
	display: none;
}

/* Breakpoints and preferences (mobile-first) */
/* ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown {
		transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
}

/* Reduced motion: no per-second change on screen. The clock keeps its days, hours and minutes.
   The seconds are taken out of the layout and out of sight but not display:none: the script's
   cleanup runs on animation events, and an element that is not rendered never fires them, so its
   leftovers would pile up for as long as the tab stays open. */
@media (prefers-reduced-motion: reduce) {
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group-seconds {
		position: absolute;
		visibility: hidden;
		pointer-events: none;
	}
}

/* Windows high contrast and other forced colors: system colors for what is drawn with background */
@media (forced-colors: active) {
	section[data-pagebuilder="section"].hcs26 {
		outline-color: CanvasText;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::before,
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::after,
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown::before,
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group + .countdown-group::before {
		background-color: CanvasText;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a {
		color: LinkText;
	}
}

@media (min-width: 768px) {
	section[data-pagebuilder="section"].hcs26 {
		--hcs26-gap: 32px;
	}

	section[data-pagebuilder="section"].hcs26 > .container {
		padding: 0 32px;
	}

	/* One row, everything on the section's centre line: the words, the rules and the numbers with their labels */
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		padding: 16px 0;
	}

	/* The words: one symbol on the left, centered on the title and link together; the title and the link
	   share a left edge (the link's own 8px of padding is pulled back so its words, not its box, line up) */
	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div {
		grid-template-columns: auto minmax(0, 1fr);
		justify-content: start;
		column-gap: 0.875rem;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::before {
		grid-row: 1 / span 2;
		width: 1.875rem;
		height: 1.875rem;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .content-block > div::after {
		display: none;
	}

	section[data-pagebuilder="section"].hcs26 .hcs26-title {
		font-size: 1.25rem;
		text-align: left !important;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container {
		grid-column: 2;
		text-align: left !important;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a {
		margin: -8px 0 -8px -8px;
		padding: 12px 8px;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .link-container a:focus-visible::before {
		inset: 8px 2px 6px;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown {
		margin-left: 8px;
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -24px;
		width: 1px;
		height: 32px;
		background: var(--hcs26-hairline);
		transform: translateY(-50%);
	}

	section[data-pagebuilder="section"].hcs26 [data-widget-countdown] .countdown .countdown-group .countdown-group-cards .countdown-card {
		font-size: 1.75rem;
	}
}