/**
 * Header layout: Depot — .espt-block-header.is-preset-depot
 *
 * Three tiers: a deep-brand top bar (one line; it scrolls sideways on
 * phones), a white row with the logo, a big framed search, the call-us line
 * and the round cart, then a brand band (desktop) with the all-categories
 * dropdown, the menu and compare / wishlist. Colours come from the --hd-*
 * tokens (the theme's settings) unless the block sets its own.
 */

.espt-block-header.is-preset-depot {
	--hd-badge: var(--hd-accent);
	--hd-help-bg: transparent;
	--hd-help-ic: var(--hd-accent);
	--hd-tb-icon: var(--hd-accent);
}

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

.espt-block-header.is-preset-depot .esptb-hd-topbar {
	background: var(--topbar-bg, var(--hd-brand-dark));
	color: var(--topbar-color, #fff);
	font-size: var(--topbar-size, 13px);
}

/* One line on every screen: too long for a phone, it scrolls sideways
   (space-between falls back to flex-start once it overflows). */
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-bar {
	flex-wrap: nowrap;
	gap: 14px;
	justify-content: space-between;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-bar::-webkit-scrollbar { display: none; }

.espt-block-header.is-preset-depot .esptb-hd-tb-l,
.espt-block-header.is-preset-depot .esptb-hd-tb-r {
	flex: none;
	flex-wrap: nowrap;
	gap: 16px;
	justify-content: flex-start;
}

/* With nothing on the left, the right side still hugs the right edge
   (the auto margin gives way to 0 once the strip overflows and scrolls). */
.espt-block-header.is-preset-depot .esptb-hd-tb-r { margin-left: auto; }

/* The strip is its own scroller: the focus ring is drawn inside each link
   so the scroller's edges never clip it. */
.espt-block-header.is-preset-depot .esptb-hd-topbar a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-tb-item,
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-tb-note,
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-tb-link,
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-count,
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-login,
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-social {
	flex: none;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Running text: the messages take whatever the right side leaves. */
.espt-block-header.is-preset-depot .esptb-hd-tb-l.is-running {
	flex: 1 1 auto;
	min-width: 0;
}

.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-login {
	background: color-mix(in srgb, #fff 14%, transparent);
	border-radius: 999px;
	padding: 4px 13px;
	position: relative;
}

.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-login:hover { background: color-mix(in srgb, #fff 24%, transparent); }
.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-login .espt-ic { color: var(--hd-tb-icon, currentColor); }

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

/* Phones: burger · logo · icons, the search on a full-width row below. */
.espt-block-header.is-preset-depot .esptb-hd-main .esptb-hd-bar {
	flex-wrap: wrap;
	row-gap: 10px;
}

.espt-block-header.is-preset-depot .esptb-hd-burger {
	height: 40px;
	order: 0;
	width: 40px;
}

.espt-block-header.is-preset-depot .esptb-hd-logo { margin-right: auto; order: 1; }

.espt-block-header.is-preset-depot .esptb-hd-icons {
	gap: 4px;
	margin-left: 0;
	order: 2;
}

.espt-block-header.is-preset-depot .esptb-hd-icons > .espt-icon-btn { height: 40px; width: 40px; }
.espt-block-header.is-preset-depot .esptb-hd-help { order: 3; }

.espt-block-header.is-preset-depot .esptb-hd-searchbar {
	display: block;
	flex: 1 0 100%;
	order: 4;
}

/* The search: a squared bar in a brand frame, the worded button its end cap. */
.espt-block-header.is-preset-depot .espt-search-form.esptb-hd-dp-r8 { --search-radius: 8px; }

.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form {
	align-items: stretch;
	border-radius: var(--search-radius, 8px);
	transition: box-shadow 0.15s ease;
}

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

.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form input[type="search"] {
	background: var(--search-bg, var(--header-bg, var(--hd-bg)));
	border: 2px solid var(--search-line, var(--hd-brand));
	border-radius: var(--search-radius, 8px) 0 0 var(--search-radius, 8px);
	border-right: 0;
	font-size: 15px;
	min-height: 46px;
	padding: 10px 14px 10px 16px;
}

.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text .button,
.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text button[type="submit"] {
	background: var(--hd-search-btn, var(--hd-brand));
	border-radius: 0 var(--search-radius, 8px) var(--search-radius, 8px) 0;
	color: #fff;
	flex: none;
	font-size: 14px;
	font-weight: 800;
	height: auto;
	letter-spacing: 0.05em;
	min-width: 48px;
	padding: 0 15px;
	position: static;
	text-transform: uppercase;
	transform: none;
	transition: background 0.15s ease;
	width: auto;
}

.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text .button:hover,
.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text button[type="submit"]:hover {
	background: color-mix(in srgb, var(--hd-search-btn, var(--hd-brand)) 84%, #000);
	color: #fff;
}

/* "Call us": a big accent phone glyph (no disc), the number in bold. */
.espt-block-header.is-preset-depot .esptb-hd-help { gap: 8px; }

.espt-block-header.is-preset-depot .esptb-hd-help-ic {
	font-size: 32px;
	height: 44px;
	width: 36px;
}

.espt-block-header.is-preset-depot .esptb-hd-help-n { font-size: 18px; letter-spacing: 0.01em; }

.espt-block-header.is-preset-depot .esptb-hd-help-l,
.espt-block-header.is-preset-depot .esptb-hd-help-s { font-size: 12px; }

/* Menu badges: ink on the accent, a light brand tint for NEW / FREE. */
.espt-block-header.is-preset-depot .esptb-badge {
	--dp-tag: var(--hd-badge, var(--hd-accent));
	background: var(--dp-tag);
	color: var(--hd-ink);
}

.espt-block-header.is-preset-depot .espt-badge-new > a .esptb-badge,
.espt-block-header.is-preset-depot .espt-badge-free > a .esptb-badge {
	--dp-tag: color-mix(in srgb, var(--hd-brand) 32%, #fff);
}

/* ----------------------------------------- tier 3: the band (desktop) */

.espt-block-header.is-preset-depot .esptb-hd-sub-band { display: none; }
.espt-block-header.is-preset-depot .esptb-hd-dp-drop[hidden] { display: none; }

/* =====================================================================
   Phones: the top bar is a 40px strip, so every link in it is a fair tap.
   ===================================================================== */

@media (max-width: 767px) {
	.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-bar {
		min-height: 40px;
		padding-bottom: 0;
		padding-top: 0;
	}

	.espt-block-header.is-preset-depot .esptb-hd-topbar a.esptb-hd-tb-item,
	.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-tb-link { min-height: 40px; }

	.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-login::before {
		content: "";
		inset: -7px 0;
		position: absolute;
	}

	/* The strip's end fades when it runs past the screen, so a cut-off word
	   reads as "scroll for more" (the padding lets the last one scroll clear). */
	.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-bar {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
		padding-right: 28px;
	}

	/* The "icon" and "total" cart looks get a 40px button too. */
	.espt-block-header.is-preset-depot .esptb-hd-cart.is-cart-icon .espt-cart-btn,
	.espt-block-header.is-preset-depot .esptb-hd-cart.is-cart-total .espt-cart-btn {
		height: 40px;
		width: 40px;
	}
}

/* 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-depot .esptb-hd-cart.is-cart-label,
.espt-block-header.is-preset-depot .esptb-hd-cart.is-cart-label .espt-cart-btn { min-height: 40px; }

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

/* Small phones: the login and WhatsApp links are in the burger's panel, so
   the strip keeps just the store's own lines. */
@media (max-width: 599px) {
	.espt-block-header.is-preset-depot .esptb-hd-tb-l:not(:empty) + .esptb-hd-tb-r { display: none; }
}

/* The worded button shows its word from 600px (header.css). */
@media (min-width: 600px) {
	.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text .button,
	.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-btn-text button[type="submit"] { padding: 0 22px; }

	.espt-block-header.is-preset-depot .esptb-hd-cart.is-cart-total { padding-right: 0; }

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

/* =====================================================================
   Tablet: the search moves up beside the logo.
   ===================================================================== */

@media (min-width: 768px) {
	.espt-block-header.is-preset-depot .esptb-hd-topbar .esptb-hd-bar { gap: 24px; }

	.espt-block-header.is-preset-depot .esptb-hd-tb-l,
	.espt-block-header.is-preset-depot .esptb-hd-tb-r { gap: 20px; }

	.espt-block-header.is-preset-depot .esptb-hd-main .esptb-hd-bar {
		flex-wrap: nowrap;
		gap: 18px;
	}

	.espt-block-header.is-preset-depot .esptb-hd-logo { max-width: 32%; }

	/* The logo keeps its auto margin, the search takes one too: spare room
	   splits evenly, so the search centres — and with no search the icons
	   still hug the right edge. */
	.espt-block-header.is-preset-depot .esptb-hd-searchbar {
		flex: 1 1 auto;
		margin: 0 auto 0 0;
		max-width: 780px;
		min-width: 0;
		order: 2;
	}

	.espt-block-header.is-preset-depot .esptb-hd-icons { order: 4; }

	/* The category picker joins the frame; a thin line splits it from the field. */
	.espt-block-header.is-preset-depot .esptb-hd-scope-btn {
		background: var(--search-bg, color-mix(in srgb, var(--hd-ink) 4%, #fff));
		border: 2px solid var(--search-line, var(--hd-brand));
		border-radius: var(--search-radius, 8px) 0 0 var(--search-radius, 8px);
		border-right: 1px solid var(--hd-line);
		max-width: 190px;
		padding: 0 14px 0 16px;
	}

	.espt-block-header.is-preset-depot .esptb-hd-scope-btn [data-hd-scope-label] {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form.has-scope input[type="search"] {
		border-left: 0;
		border-radius: 0;
	}
}

/* =====================================================================
   Desktop: the band.
   ===================================================================== */

@media (min-width: 1024px) {
	.espt-block-header.is-preset-depot .esptb-hd-main .esptb-hd-bar { gap: 28px; }

	/* Compare / wishlist move to the band. */
	.espt-block-header.is-preset-depot .esptb-hd-dp-m { display: none; }

	.espt-block-header.is-preset-depot .esptb-hd-sub-band {
		background: var(--hd-brand);
		color: var(--menu-color, #fff);
		display: block;
	}

	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-hd-bar {
		align-items: stretch;
		gap: 24px;
		min-height: 50px;
	}

	/* --- the light "all categories" block and its list --- */
	.espt-block-header.is-preset-depot .esptb-hd-dp-browse {
		background: var(--browse-bg, color-mix(in srgb, var(--hd-ink) 6%, #fff));
		color: var(--browse-color, var(--hd-ink));
		flex: 0 0 250px;
		position: relative;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-btn {
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: inherit;
		cursor: pointer;
		display: flex;
		font: inherit;
		font-size: 14px;
		font-weight: 800;
		gap: 12px;
		height: 100%;
		letter-spacing: 0.04em;
		line-height: 1.2;
		min-height: 50px;
		padding: 0 18px;
		text-align: left;
		text-transform: uppercase;
		transition: background 0.15s ease;
		width: 100%;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-btn:hover { background: color-mix(in srgb, var(--hd-ink) 5%, transparent); }
	.espt-block-header.is-preset-depot .esptb-hd-dp-btn .esptb-burger { width: 18px; }

	.espt-block-header.is-preset-depot .esptb-hd-dp-btn-t {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-btn .espt-ic {
		font-size: 14px;
		margin-left: auto;
		transition: transform 0.2s ease;
	}

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

	.espt-block-header.is-preset-depot .esptb-hd-dp-drop {
		background: var(--drop-bg, #fff);
		border: 1px solid var(--hd-line);
		border-radius: 0 0 12px 12px;
		border-top: 0;
		box-shadow: 0 22px 40px -18px rgba(15, 23, 42, 0.45);
		left: 0;
		max-height: min(70vh, 560px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px 0 8px;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 994;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-drop ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-drop li + li { border-top: 1px solid color-mix(in srgb, var(--hd-line) 70%, transparent); }

	.espt-block-header.is-preset-depot .esptb-hd-dp-drop a {
		color: var(--drop-color, var(--hd-text));
		display: block;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.35;
		overflow-wrap: anywhere;
		padding: 11px 18px;
		text-decoration: none;
		transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-drop a:hover,
	.espt-block-header.is-preset-depot .esptb-hd-dp-drop a.is-current {
		background: var(--hd-soft);
		box-shadow: inset 3px 0 0 var(--hd-brand);
		color: var(--hd-brand-dark);
	}

	/* --- the menu: white and bold (capitals with "Uppercase menu items") --- */
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav-band { align-items: stretch; }

	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		color: var(--menu-color, #fff);
		font-weight: 700;
		padding-bottom: 16px;
		padding-top: 16px;
	}

	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover,
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li:focus-within > a,
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li.current-menu-item > a {
		color: var(--menu-hover, #fff);
	}

	/* Underline effects: an accent bar along the band's bottom edge. */
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a::before {
		background: var(--nav-accent, var(--hd-accent));
		border-radius: 3px 3px 0 0;
		bottom: 0;
		height: 3px;
	}

	.espt-block-header.is-preset-depot.is-nav-fx-pill .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a,
	.espt-block-header.is-preset-depot.is-nav-fx-box .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		padding-bottom: 9px;
		padding-top: 9px;
	}

	.espt-block-header.is-preset-depot.is-nav-fx-pill .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover,
	.espt-block-header.is-preset-depot.is-nav-fx-box .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover {
		background: var(--nav-accent, color-mix(in srgb, #fff 16%, transparent));
	}

	/* The dropdowns are white: their hover ink must not follow the band's. */
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav:not(.esptb-nav-panel) .sub-menu a:hover { color: var(--hd-brand-dark); }

	/* A badge sits above its item like a small tag. */
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .espt-hd-menu > li > a > .esptb-badge {
		left: 50%;
		margin: 0;
		padding: 3px 6px;
		position: absolute;
		top: -8px;
		transform: translateX(-50%);
		white-space: nowrap;
		z-index: 1;
	}

	.espt-block-header.is-preset-depot .esptb-hd-sub-band .espt-hd-menu > li > a > .esptb-badge::after {
		border: 4px solid transparent;
		border-top-color: var(--dp-tag);
		content: "";
		left: 50%;
		margin-left: -4px;
		position: absolute;
		top: 100%;
	}

	/* --- compare / wishlist on the band's right --- */
	.espt-block-header.is-preset-depot .esptb-hd-dp-tools {
		align-items: center;
		border-left: 1px solid color-mix(in srgb, #fff 22%, transparent);
		display: flex;
		flex: none;
		gap: 4px;
		margin-left: auto;
		padding-left: 14px;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-tools .espt-icon-btn {
		color: var(--menu-color, #fff);
		height: 40px;
		width: 40px;
	}

	.espt-block-header.is-preset-depot .esptb-hd-dp-tools .espt-icon-btn:hover {
		background: color-mix(in srgb, #fff 16%, transparent);
		color: var(--menu-hover, #fff);
	}
}

/* 1024–1279: a narrower block and tighter spacing keep the menu on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.espt-block-header.is-preset-depot .esptb-hd-dp-browse { flex-basis: 220px; }
	.espt-block-header.is-preset-depot .esptb-hd-sub-band .esptb-nav .espt-hd-menu { column-gap: calc(var(--menu-gap, 24px) * 0.7); }
}

@media (min-width: 1280px) {
	.espt-block-header.is-preset-depot .esptb-hd-dp-browse { flex-basis: 270px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form,
	.espt-block-header.is-preset-depot .esptb-hd-searchbar .espt-search-form .button,
	.espt-block-header.is-preset-depot .esptb-hd-dp-btn,
	.espt-block-header.is-preset-depot .esptb-hd-dp-btn .espt-ic,
	.espt-block-header.is-preset-depot .esptb-hd-dp-drop a { transition: none; }
}