/**
 * Header layout: Grocer — .espt-block-header.is-preset-grocer
 *
 * Grocery delivery: a soft band with the delivery area (left) and the next
 * slot (right, from 600px), then logo + tagline, a soft pill search, account
 * and a cart pill with the running total, then aisle tabs that scroll
 * sideways on every screen. Colours come from the --hd-* tokens (the theme's
 * settings) unless the block sets its own.
 */

.espt-block-header.is-preset-grocer {
	--gr-line: color-mix(in srgb, var(--hd-brand) 18%, #fff);
	--gr-warm: color-mix(in srgb, var(--hd-accent) 58%, var(--hd-ink));
	--hd-tb-icon: var(--topbar-color, var(--hd-brand));
}

/* ------------------------------------------------ tier 1: area + slot */

.espt-block-header.is-preset-grocer .esptb-gr-band {
	background: var(--topbar-bg, var(--hd-soft));
	border-bottom: 1px solid var(--gr-line);
	color: var(--topbar-color, var(--hd-text));
	font-size: var(--topbar-size, 13px);
}

.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-bar {
	flex-wrap: nowrap;
	justify-content: space-between;
	min-height: 40px;
	padding-bottom: 0;
	padding-top: 0;
}

.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-l { justify-content: flex-start; }

/* Phones: the address line only — the slot joins it from 600px (or shows
   on its own when there is no address line). */
.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-r { display: none; justify-content: flex-end; }

.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-l:empty + .esptb-hd-tb-r:not(:empty) {
	display: flex;
	justify-content: flex-start;
}

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

.espt-block-header.is-preset-grocer .esptb-gr-band a.esptb-hd-tb-item {
	color: var(--topbar-color, var(--hd-ink));
	font-weight: 600;
}

/* A small "change it" caret after a linked area line. */
.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-l a.esptb-hd-tb-item::after {
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	content: "";
	flex: none;
	height: 6px;
	margin: -3px 0 0 2px;
	opacity: 0.55;
	transform: rotate(45deg);
	width: 6px;
}

/* The slot reads as a small light pill on the band. */
.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-r span.esptb-hd-tb-item {
	background: var(--topbar-bg, #fff);
	border: 1px solid var(--gr-line);
	border-radius: 14px;
	color: var(--topbar-color, var(--hd-ink));
	font-weight: 600;
	padding: 3px 12px 3px 9px;
}

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

/* Phone, chat, socials and the login button wait for desktop. */
.espt-block-header.is-preset-grocer .esptb-gr-band-x {
	align-items: center;
	display: none;
	flex: none;
	gap: 12px;
}

.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-login {
	background: var(--hd-brand);
	color: #fff;
}

.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-login:hover { background: var(--hd-brand-dark); }

/* Running-text variant ("Scroll the messages across"). */
.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-marquee { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------- main row */

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

.espt-block-header.is-preset-grocer .esptb-gr-brand {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	gap: 12px;
	margin-right: auto;
	max-width: 62%;
	min-width: 0;
	order: 1;
}

.espt-block-header.is-preset-grocer .esptb-gr-brand .esptb-hd-logo {
	margin-right: 0;
	max-width: 100%;
	order: 0;
}

.espt-block-header.is-preset-grocer .esptb-gr-brand .esptb-hd-logo-text { color: var(--hd-brand-dark); }
.espt-block-header.is-preset-grocer .esptb-gr-tagline { display: none; }

/* Phones and small tablets: the search is a row of its own under the bar. */
.espt-block-header.is-preset-grocer .esptb-hd-searchbar { display: block; }

.espt-block-header.is-preset-grocer .espt-search-form input[type="search"] {
	background: var(--search-bg, var(--hd-soft));
	border-color: var(--search-line, var(--gr-line));
}

.espt-block-header.is-preset-grocer .espt-search-form input[type="search"]:focus {
	background: var(--search-bg, var(--header-bg, var(--hd-bg)));
	border-color: var(--menu-hover, var(--hd-brand));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-brand) 16%, transparent);
}

.espt-block-header.is-preset-grocer .espt-search-form:not(.has-btn-text) .button { color: var(--hd-brand-dark); }
.espt-block-header.is-preset-grocer .espt-search-form:not(.has-btn-text) .button:hover { color: var(--menu-hover, var(--hd-brand)); }

.espt-block-header.is-preset-grocer .esptb-hd-icons { gap: 6px; }

/* Account: the word shows from 1024px; below that it stays the link's name
   for screen readers. */
.espt-block-header.is-preset-grocer .esptb-gr-acct-t {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Cart pill (the layout's own "total" look). */
.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total { transition: background 0.15s ease; }
.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total:hover { background: var(--hd-brand-dark); }

/* Phones: the running total hides (base), the cart stays a round brand button. */
@media (max-width: 599px) {
	.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total {
		background: var(--hd-cart-bg, var(--hd-brand));
		color: var(--hd-cart-ink, #fff);
		padding: 0;
	}

	.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total .espt-cart-btn {
		border-radius: 999px;
		height: 40px;
		width: 40px;
	}

	.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total .espt-cart-count {
		box-shadow: 0 0 0 2px var(--header-bg, var(--hd-bg));
		right: -4px;
		top: -4px;
	}
}

/* Phones: 40px taps for the burger and the icon buttons (the base keeps
   them at 36px until 768px). */
@media (max-width: 767px) {
	/* The aisle row is the desktop menu: phones get it in the burger's panel. */
	.espt-block-header.is-preset-grocer .esptb-hd-sub-aisles { display: none; }

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

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

@media (min-width: 600px) {
	.espt-block-header.is-preset-grocer .esptb-hd-cart.is-cart-total { padding-right: 0; }

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

/* ---------------------------------------------------------- aisle tabs */

.espt-block-header.is-preset-grocer .esptb-hd-sub-aisles { border-top: 1px solid var(--hd-line); }

.espt-block-header.is-preset-grocer .esptb-hd-sub-aisles .esptb-hd-bar {
	padding-bottom: 0;
	padding-top: 0;
}

.espt-block-header.is-preset-grocer .esptb-gr-aisles {
	flex: 1 1 auto;
	min-width: 0;
}

.espt-block-header.is-preset-grocer .esptb-gr-aisles ul { gap: max(14px, var(--menu-gap, 22px)); }

.espt-block-header.is-preset-grocer .esptb-gr-aisles a {
	color: var(--menu-color, var(--hd-link));
	font-size: var(--menu-size, 14px);
	min-height: 44px;
	padding: 10px 0 9px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.espt-block-header.is-preset-grocer .esptb-gr-aisles a:hover { color: var(--menu-hover, var(--hd-link-h)); }

/* The row is its own scroller: the focus ring is drawn inside the tab so
   the scroller's edges never clip it. */
.espt-block-header.is-preset-grocer .esptb-gr-aisles a:focus-visible {
	outline: 2px solid var(--hd-brand);
	outline-offset: -2px;
}

.espt-block-header.is-preset-grocer .esptb-gr-aisles a.is-current {
	border-bottom-color: var(--hd-brand);
	color: var(--hd-ink);
	font-weight: 700;
}

/* Items with a badge (offers, new arrivals) in a warm alert tone. */
.espt-block-header.is-preset-grocer .esptb-gr-aisles a:has(.esptb-badge) { color: var(--gr-warm); }

.espt-block-header.is-preset-grocer .esptb-gr-aisles a:has(.esptb-badge):hover,
.espt-block-header.is-preset-grocer .esptb-gr-aisles a.is-current:has(.esptb-badge) { border-bottom-color: var(--hd-accent); }

.espt-block-header.is-preset-grocer .esptb-gr-aisles .esptb-badge {
	background: color-mix(in srgb, var(--hd-accent) 18%, #fff);
	border-radius: 999px;
	color: var(--gr-warm);
	padding: 3px 6px;
}

.espt-block-header.is-preset-grocer.is-nav-uppercase .esptb-gr-aisles a {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Once stuck (and "slim down" is on) the tabs tighten a little. */
.espt-block-header.is-preset-grocer.is-sticky-shrink.is-stuck .esptb-gr-aisles a {
	min-height: 40px;
	padding-bottom: 7px;
	padding-top: 8px;
}

/* Phones and tablets: a soft fade hints that the aisles scroll sideways. */
@media (max-width: 1023px) {
	.espt-block-header.is-preset-grocer .esptb-gr-aisles ul {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
		padding-right: 24px;
	}
}

/* =====================================================================
   From 600px: the slot joins the address line.
   ===================================================================== */

@media (min-width: 600px) {
	.espt-block-header.is-preset-grocer .esptb-gr-band .esptb-hd-tb-r:not(:empty) { display: flex; }
}

/* =====================================================================
   Tablet: tagline beside the logo, the search moves into the row.
   ===================================================================== */

@media (min-width: 768px) {
	.espt-block-header.is-preset-grocer .esptb-hd-main .esptb-hd-bar { flex-wrap: nowrap; }

	.espt-block-header.is-preset-grocer .esptb-gr-brand {
		margin-right: 0;
		max-width: none;
	}

	.espt-block-header.is-preset-grocer .esptb-gr-tagline {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		border-left: 1px solid var(--hd-line);
		color: var(--hd-muted);
		display: -webkit-box;
		font-size: 12px;
		line-clamp: 2;
		line-height: 1.35;
		max-width: 132px;
		min-width: 0;
		overflow: hidden;
		overflow-wrap: anywhere;
		padding-left: 12px;
	}

	/* A long logo gives way before the search does. */
	.espt-block-header.is-preset-grocer .esptb-hd-searchbar {
		flex: 1 1 260px;
		margin: 0 auto;
		max-width: 620px;
		min-width: 150px;
		order: 2;
	}

	.espt-block-header.is-preset-grocer .esptb-hd-icons {
		margin-left: 0;
		order: 3;
	}

	.espt-block-header.is-preset-grocer .esptb-hd-burger { order: 4; }
}

/* =====================================================================
   Desktop: the burger goes (base), the account shows its word.
   ===================================================================== */

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

	.espt-block-header.is-preset-grocer .esptb-gr-band-x {
		display: inline-flex;
	}

	.espt-block-header.is-preset-grocer .esptb-gr-band-x:not(:first-child) {
		border-left: 1px solid var(--gr-line);
		padding-left: 14px;
	}

	.espt-block-header.is-preset-grocer .esptb-gr-acct {
		border-radius: 999px;
		gap: 8px;
		padding: 0 14px 0 10px;
		width: auto;
	}

	.espt-block-header.is-preset-grocer .esptb-gr-acct:hover { background: var(--hd-soft); }

	.espt-block-header.is-preset-grocer .esptb-gr-acct-t {
		clip: auto;
		clip-path: none;
		font-size: 14px;
		font-weight: 600;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
}

@media (min-width: 1280px) {
	.espt-block-header.is-preset-grocer .esptb-gr-tagline { max-width: 190px; }
}