/**
 * Header layout: Megastore — .espt-block-header.is-preset-megastore
 *
 * Three dark tiers built from the --hd-* tokens (the theme's settings): a
 * deep top bar, the main row in the header colour (else --hd-dark) and a
 * slightly deeper department strip with a faint line on top. Text is white,
 * secondary text see-through white; the accent colour marks the search
 * button, the text logo's mark, the cart bubble and badged menu links. The
 * mega panel under the strip stays white, with the promo card.
 */

/* Layout defaults, all built from tokens; a colour set on the block wins. */
.espt-block-header.is-preset-megastore {
	--mgs-t1: color-mix(in srgb, var(--hd-dark) 80%, #000);
	--mgs-t2: var(--header-bg, var(--hd-dark));
	--mgs-t3: color-mix(in srgb, var(--hd-dark) 90%, #000);
	--mgs-muted: color-mix(in srgb, #fff 68%, transparent);
	--mgs-line: rgba(255, 255, 255, 0.1);
	--mgs-rule: rgba(255, 255, 255, 0.18);
	--mgs-hover: rgba(255, 255, 255, 0.1);
	--hd-badge: var(--hd-accent);
	--hd-cart-bg: rgba(255, 255, 255, 0.12);
	--hd-cart-ink: #fff;
	--hd-search-btn: var(--hd-accent);
	--hd-tb-icon: var(--hd-accent);
}

.espt-block-header.is-preset-megastore .esptb-hd {
	background: var(--mgs-t2);
	color: #fff;
}

/* Accent badges carry dark ink, like the kit's other accent parts. */
.espt-block-header.is-preset-megastore .esptb-badge { color: var(--hd-ink); }

/* Keyboard focus stays visible on the dark bands. */
.espt-block-header.is-preset-megastore .esptb-hd-topbar a:focus-visible,
.espt-block-header.is-preset-megastore .esptb-hd-main a:focus-visible,
.espt-block-header.is-preset-megastore .esptb-hd-main button:focus-visible,
.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept:focus-visible {
	outline: 2px solid var(--hd-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------ tier 1: top bar */

.espt-block-header.is-preset-megastore .esptb-hd-topbar {
	background: var(--topbar-bg, var(--mgs-t1));
	color: var(--topbar-color, var(--mgs-muted));
	font-size: var(--topbar-size, 12.5px);
}

.espt-block-header.is-preset-megastore .esptb-hd-topbar .esptb-hd-bar {
	padding-bottom: 7px;
	padding-top: 7px;
}

.espt-block-header.is-preset-megastore .esptb-hd-topbar a { transition: color 0.15s ease; }

.espt-block-header.is-preset-megastore .esptb-hd-topbar a:hover {
	color: var(--topbar-color, #fff);
	opacity: 1;
}

.espt-block-header.is-preset-megastore .esptb-hd-tb-link .espt-ic { color: var(--hd-tb-icon); }

.espt-block-header.is-preset-megastore .esptb-hd-tb-r .esptb-hd-tb-link {
	color: var(--topbar-color, #fff);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Thin rules between the right-hand items. */
.espt-block-header.is-preset-megastore .esptb-hd-tb-r .esptb-hd-tb-item + .esptb-hd-tb-item,
.espt-block-header.is-preset-megastore .esptb-hd-tb-r .esptb-hd-tb-item + .esptb-hd-tb-note,
.espt-block-header.is-preset-megastore .esptb-hd-tb-r .esptb-hd-tb-item + .esptb-hd-tb-link,
.espt-block-header.is-preset-megastore .esptb-hd-tb-r .esptb-hd-tb-note + .esptb-hd-tb-link {
	border-left: 1px solid var(--mgs-rule);
	padding-left: 14px;
}

/* Running text takes the room the right side leaves. */
.espt-block-header.is-preset-megastore .esptb-hd-tb-l.is-running {
	flex: 1 1 0%;
	min-width: 0;
}

/* Phones: the promise only — the right side waits for 768px. */
.espt-block-header.is-preset-megastore .esptb-hd-tb-r,
.espt-block-header.is-preset-megastore .esptb-hd-topbar.is-right-only { display: none; }

/* Phones: a link in the promise line gets a 40px-tall tap area without
   making the bar any taller. */
@media (max-width: 767px) {
	.espt-block-header.is-preset-megastore .esptb-hd-tb-l a { position: relative; }

	.espt-block-header.is-preset-megastore .esptb-hd-tb-l a::before {
		content: "";
		inset: -12px 0;
		position: absolute;
	}
}

/* ----------------------------------------------------- tier 2: main row */

.espt-block-header.is-preset-megastore .esptb-hd-main {
	--hd-link: #fff;
	background: var(--mgs-t2);
	color: #fff;
}

.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-bar {
	flex-wrap: wrap;
	row-gap: 10px;
}

/* Phones: burger · logo · icons, the search on a row of its own. */
.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-burger { order: 0; }

/* A zero basis keeps burger, logo and icons on one line however long a
   text logo is; it grows into the free space, never past its own width. */
.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-logo {
	color: #fff;
	flex: 1 1 0%;
	max-width: max-content;
	order: 1;
}

.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-icons {
	gap: 4px;
	order: 2;
}

.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-searchbar {
	display: block;
	order: 4;
}

/* The text logo's mark: an accent tile with a dark eye, pure CSS. */
.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-logo-text::before {
	background: radial-gradient(circle closest-side, var(--mgs-t2) 0 38%, transparent 42%), var(--hd-accent);
	border-radius: 0.26em;
	content: "";
	display: inline-block;
	height: 0.86em;
	margin-right: 0.36em;
	vertical-align: -0.1em;
	width: 0.86em;
}

/* 40px tap targets; a light wash on hover instead of the base dark one. */
.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-burger,
.espt-block-header.is-preset-megastore .esptb-hd-icons > .espt-icon-btn,
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-icon .espt-cart-btn,
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total .espt-cart-btn {
	height: 40px;
	width: 40px;
}

.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-burger:hover,
.espt-block-header.is-preset-megastore .esptb-hd-icons > .espt-icon-btn:hover,
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-icon .espt-cart-btn:hover {
	background: var(--mgs-hover);
	color: var(--icons-color, #fff);
}

/* Account and compare: two lines, white, underlined on hover. */
.espt-block-header.is-preset-megastore .esptb-hd-acct,
.espt-block-header.is-preset-megastore .esptb-hd-mgs-duo {
	color: var(--icons-color, #fff);
	justify-content: center;
	min-height: 40px;
	white-space: nowrap;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-duo {
	display: none;
	flex: none;
	flex-direction: column;
	line-height: 1.2;
	text-decoration: none;
}

.espt-block-header.is-preset-megastore .esptb-hd-acct:hover .esptb-hd-acct-b,
.espt-block-header.is-preset-megastore .esptb-hd-mgs-duo:hover .esptb-hd-acct-b {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The cart: accent bubble in every look; a see-through pill for the total. */
.espt-block-header.is-preset-megastore .esptb-hd-main .espt-cart-count {
	background: var(--cart-bubble, var(--hd-accent));
	color: var(--hd-ink);
}

.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-icon .espt-cart-count,
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-round .espt-cart-count { box-shadow: 0 0 0 2px var(--mgs-t2); }

.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-round .espt-cart-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--hd-cart-ink, #fff);
}

.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total { transition: background 0.15s ease; }

.espt-block-header.is-preset-megastore .esptb-hd-cart-sum .amount,
.espt-block-header.is-preset-megastore .esptb-hd-cart-sum bdi { color: inherit; }

/* A cart word or running total answers taps across the whole 40px pill,
   not just its line of text (the total shows from 600px). */
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-label,
.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-label .espt-cart-btn { min-height: 40px; }

.espt-block-header.is-preset-megastore .esptb-hd-cart-label {
	align-items: center;
	align-self: stretch;
	display: inline-flex;
}

@media (min-width: 600px) {
	.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total { padding-right: 0; }
	.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total:hover { background: rgba(255, 255, 255, 0.2); }

	.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total .esptb-hd-cart-sum {
		align-items: center;
		align-self: stretch;
		display: inline-flex;
		padding-right: 16px;
	}
}

/* The search: a white field, the category picker in front, an accent
   button inside. Scoped to the bar — the phone menu keeps its own look. */
.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form { border-radius: var(--search-radius, 999px); }

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-accent) 55%, transparent);
}

.espt-block-header.is-preset-megastore .esptb-hd-searchbar input[type="search"],
.espt-block-header.is-preset-megastore .esptb-hd-searchbar input[type="search"]:focus {
	background: var(--search-bg, #fff);
	border-color: var(--search-line, transparent);
	color: var(--hd-ink);
	height: 44px;
	padding-bottom: 0;
	padding-left: 16px;
	padding-top: 0;
}

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form:not(.has-btn-text) input[type="search"] { padding-right: 58px; }

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form .button {
	background: var(--hd-search-btn);
	border-radius: max(0px, calc(var(--search-radius, 999px) - 4px));
	bottom: 4px;
	color: var(--hd-ink);
	height: auto;
	right: 4px;
	top: 4px;
	transform: none;
	transition: background 0.15s ease;
}

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form:not(.has-btn-text) .button { width: 48px; }

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form .button:hover {
	background: color-mix(in srgb, var(--hd-search-btn) 86%, #fff);
	color: var(--hd-ink);
}

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .esptb-hd-scope-btn {
	background: color-mix(in srgb, var(--search-bg, #fff) 94%, var(--hd-dark));
	border-color: var(--search-line, transparent);
	box-shadow: inset -1px 0 0 var(--hd-line);
	color: var(--hd-ink);
	min-width: 0;
}

.espt-block-header.is-preset-megastore .esptb-hd-searchbar .esptb-hd-scope-btn:hover { background: color-mix(in srgb, var(--search-bg, #fff) 88%, var(--hd-dark)); }

/* A long category name never eats the field. */
.espt-block-header.is-preset-megastore .esptb-hd-searchbar .esptb-hd-scope-btn [data-hd-scope-label] {
	max-width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Live results sit on white, not on the dark row's white text. */
.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-sr { color: var(--hd-text); }

/* ------------------------------------ tier 3: departments + top links */

.espt-block-header.is-preset-megastore .esptb-hd-sub-dept {
	--hd-link: #fff;
	background: var(--mgs-t3);
	border-top: 1px solid var(--mgs-line);
	color: #fff;
}

.espt-block-header.is-preset-megastore .esptb-hd-sub-dept .esptb-hd-bar {
	gap: 12px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	gap: 9px;
	line-height: 1.2;
	min-height: 40px;
	padding: 0 12px;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept:hover { background: rgba(255, 255, 255, 0.15); }

/* Open: the button turns white, a tab joined to the white panel below. */
.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept[aria-expanded="true"] {
	background: #fff;
	color: var(--hd-ink);
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept .espt-ic {
	font-size: 12px;
	opacity: 0.8;
	transition: transform 0.2s ease;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept[aria-expanded="true"] .espt-ic { transform: rotate(180deg); }

.espt-block-header.is-preset-megastore .esptb-hd-mgs-sep {
	background: var(--mgs-rule);
	flex: none;
	height: 20px;
	width: 1px;
}

/* The links: plain and muted; the list scrolls sideways on its own. */
.espt-block-header.is-preset-megastore .esptb-hd-mgs-links {
	flex: 1 1 auto;
	min-width: 0;
}

/* Plain links have no box: a floor keeps multi-word labels apart. */
.espt-block-header.is-preset-megastore .esptb-hd-mgs-links ul { gap: max(18px, var(--menu-gap, 22px)); }

.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a {
	border-bottom-color: transparent;
	color: var(--menu-color, var(--mgs-muted));
	font-weight: 500;
	min-height: 40px;
	padding: 9px 0 7px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a:has(.esptb-badge) { color: var(--hd-accent); }

.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a:hover {
	border-bottom-color: transparent;
	color: var(--menu-hover, #fff);
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a.is-current {
	border-bottom-color: currentColor;
	color: var(--menu-hover, #fff);
}

/* Inside a scroller, an outer ring would be clipped — draw it inside. */
.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a:focus-visible {
	outline: 2px solid var(--hd-accent);
	outline-offset: -2px;
}

/* ---------------------------------------------------------- mega panel */

.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega { border-top: 0; }

.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega .esptb-hd-mega-h {
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: 10px;
	padding-bottom: 8px;
}

.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega .esptb-hd-promo-b {
	align-items: center;
	display: inline-flex;
	min-height: 40px;
}

/* =====================================================================
   Phones and tablets
   ===================================================================== */

/* Phones: the departments button and the link row are the desktop menu —
   the burger's panel carries both (Menu / Categories). */
@media (max-width: 767px) {
	.espt-block-header.is-preset-megastore .esptb-hd-sub-dept,
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega { display: none; }
}

@media (max-width: 1023px) {
	/* The strip fades at its right edge: there is more to scroll to. */
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-links {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}

	.espt-block-header.is-preset-megastore .esptb-hd-mgs-links ul { padding-right: 28px; }

	/* Mega menu links big enough for a thumb. */
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega .esptb-hd-mega-col ul { gap: 0; }

	.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega .esptb-hd-mega-col li a {
		display: block;
		line-height: 1.45;
		min-height: 40px;
		padding: 10px 0;
	}

	.espt-block-header.is-preset-megastore .esptb-hd-mgs-mega .esptb-hd-mega-h {
		margin-bottom: 2px;
		padding-top: 10px;
	}
}

/* =====================================================================
   Tablet up: the search moves into the row
   ===================================================================== */

@media (min-width: 768px) {
	.espt-block-header.is-preset-megastore .esptb-hd-topbar.is-right-only { display: block; }
	.espt-block-header.is-preset-megastore .esptb-hd-tb-r:not(:empty) { display: flex; }

	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-bar { flex-wrap: nowrap; }
	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-logo {
		flex: 0 1 auto;
		margin-right: 0;
		max-width: 34%;
	}

	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-searchbar {
		flex: 1 1 auto;
		margin-left: auto;
		margin-right: auto;
		max-width: 780px;
		min-width: 0;
		order: 2;
	}

	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-icons {
		gap: 14px;
		order: 3;
	}

	/* The two-line account link takes over from the phone icon. */
	.espt-block-header.is-preset-megastore .esptb-hd-icons > .espt-account-btn { display: none; }
}

@media (min-width: 1024px) {
	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-bar { gap: 24px; }
	.espt-block-header.is-preset-megastore .esptb-hd-sub-dept .esptb-hd-bar { gap: 16px; }
}

/* 1280 up: room for the compare link. */
@media (min-width: 1280px) {
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-duo { display: inline-flex; }
	.espt-block-header.is-preset-megastore .esptb-hd-main .esptb-hd-icons { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-header.is-preset-megastore .esptb-hd-topbar a,
	.espt-block-header.is-preset-megastore .esptb-hd-cart.is-cart-total,
	.espt-block-header.is-preset-megastore .esptb-hd-searchbar .espt-search-form .button,
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept,
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-dept .espt-ic,
	.espt-block-header.is-preset-megastore .esptb-hd-mgs-links a { transition: none; }
}