/* add grey line below RB */
.header_banner {
	border-bottom: 1px solid #1d1c1c;
	/* box-shadow: rgba(0, 0, 0, 0.1) 0 3px 3px 0; */
	box-shadow: none !important;
}

/* add grey line below MM & CK logo */
.page--home .page_header-inner,
.page_header {
	border-bottom: 1px solid #1d1c1c;
}

/* Make background of MM and CK logo black */
.page_header-inner,
.page_header {
	background-color: #000;
}

/* white/icons on MM */
.page_header-search,
.page_header-menu_item span,
.page_header-menu_item button,
.logo,
.header_link,
.header_link:hover,
.header_link:focus,
.header_account,
.header_account:hover,
.header_account:focus,
.burger_menu {
	color: #fff
}

/* white CK logo */
.logo-img {
	fill: #fff;
}

/* ==========================================================
	CK-6414 — Header promo countdown (skinny / rotating banner)
	Timer logic comes from the cartridge: countDownTimer.js
	========================================================== */

/* >>> THE ONLY COLOUR TO CONFIRM WITH DESIGN <<<
	Replace the hex below with the Fill value from the Figma number layer. */
.header_banner .hpc-num {
	color: #C9A227 !important;
	/* countdown NUMBERS */
}

/* The banner is a centred flex container, so .header_banner-container is a
	flex item that shrinks to its content instead of filling the bar. Force the
	chain to full width so justify-content:center actually centres the row and
	nothing is clipped by the banner's overflow:hidden. */
.header_banner-container {
	width: 100% !important;
}

.header_banner-content {
	width: 100%;
	justify-content: center;
}

/* Campaign colours. Needed because the homepage header is transparent, so the
	banner does not inherit its default #333 / white. */
.header_banner {
	background-color: #000 !important;
	color: #fff !important;
}

/* Headline white */
.header_banner a,
.header_banner .hpc-title {
	color: #fff !important;
}

/* Label and the D / H / M / S letters grey */
.header_banner .hpc-label,
.header_banner .hpc-unit {
	color: #999 !important;
}

.hpc {
	width: 100%;
	height: 100%;
}

.hpc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 1px 10px;
	padding: 0 15px;
}

/* 15px — Figma spec */
.hpc-title {
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.hpc-title:hover {
	text-decoration: underline;
}

.hpc-timer {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

/* 12px — Figma spec */
.hpc-label {
	font-size: 12px;
	letter-spacing: 0.04em;
}

.hpc-clock {
	display: inline-flex;
	align-items: baseline;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* 15px — Figma spec. min-width holds the width steady so the ticking never
	reflows the sticky header. */
.hpc-num {
	display: inline-block;
	min-width: 2ch;
	font-size: 15px;
	text-align: center;
}

.hpc-unit {
	font-size: 12px;
	margin-inline-start: 2px;
	margin-inline-end: 6px;
}

.hpc-unit:last-child {
	margin-inline-end: 0;
}

/* Banner is 40px tall with overflow:hidden. On mobile the row wraps to two
	lines (18px + 15.6px = 34px), so keep vertical padding at 0. */
@media only screen and (max-width: 991px) {
	.hpc-title {
		font-size: 13px;
	}

	.hpc-row {
		gap: 0 8px;
	}
}