/**
 * Header layout: Glow — .espt-block-header.is-preset-glow
 *
 * Skincare / beauty. A dark notice bar whose messages run across, then a
 * frosted, see-through bar: the wordmark on the left, the menu as pills in a
 * soft capsule in the centre (≥1024), search / account / cart on the right.
 * The search button opens a frosted panel under the header. The bar slims
 * down once the sticky header is stuck. Colours come from the --hd-* tokens
 * (the theme's settings) unless the block sets its own.
 */

/* The rows paint themselves: the bar is see-through, so the wrapper is too,
   and the hairline moves onto the bar (never drawn twice). */
.espt-block-header.is-preset-glow .esptb-hd { background: transparent; }
.espt-block-header.is-preset-glow.is-divider .esptb-hd { border-bottom: 0; }

/* ---------------------------------------------------------- notice bar */

.espt-block-header.is-preset-glow .esptb-hd-topbar {
	--hd-tb-icon: var(--topbar-color, color-mix(in srgb, var(--hd-brand) 45%, #fff));
	background: var(--topbar-bg, var(--hd-dark));
	color: var(--topbar-color, #fff);
	font-size: var(--topbar-size, 13px);
}

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

.espt-block-header.is-preset-glow .esptb-hd-topbar .esptb-hd-tb-note,
.espt-block-header.is-preset-glow .esptb-hd-topbar .esptb-hd-tb-item {
	position: relative;
	white-space: nowrap;
}

/* A soft dot between the messages — and across the running loop's seam. */
.espt-block-header.is-preset-glow .esptb-hd-marquee-track > span { gap: 40px; padding-right: 40px; }

.espt-block-header.is-preset-glow .esptb-hd-marquee-track > span > *::before,
.espt-block-header.is-preset-glow .esptb-hd-glw-tb-row > * + *::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	height: 4px;
	left: -20px;
	opacity: 0.45;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-tb-row > * + *::before { left: -14px; }

/* Not running: centred when it fits, a sideways scroll when it does not. */
.espt-block-header.is-preset-glow .esptb-hd-glw-tb {
	display: flex;
	flex: 1 1 100%;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-tb::-webkit-scrollbar { display: none; }

.espt-block-header.is-preset-glow .esptb-hd-glw-tb-row {
	align-items: center;
	display: flex;
	flex: none;
	gap: 28px;
	margin: 0 auto;
	padding: 0 4px;
}

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

/* The blur makes the row a stacking context of its own: lift it to the
   dropdowns' level, or a header that is not sticky would slide its menu
   dropdowns under positioned page content below it. */
.espt-block-header.is-preset-glow .esptb-hd-main {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--header-bg, var(--hd-bg)) 86%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	position: relative;
	z-index: 991;
}

.espt-block-header.is-preset-glow.is-divider .esptb-hd-main {
	border-bottom: 1px solid color-mix(in srgb, var(--hd-line) 85%, transparent);
}

.espt-block-header.is-preset-glow .esptb-hd-logo-text {
	font-family: var(--hd-display);
	font-size: clamp(21px, 6vw, 27px);
	font-weight: 700;
	line-height: 1.15;
	transition: font-size 0.25s ease;
}

/* Icons: round, frosted on hover. */
.espt-block-header.is-preset-glow .esptb-hd-icons { gap: 4px; }

/* box-shadow / transform: shed the theme's global button look (its shadow
   setting and the 1px hover lift), which the base does not reset. */
.espt-block-header.is-preset-glow .esptb-hd-icons > .espt-icon-btn,
.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-icon .espt-cart-btn,
.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-burger {
	border-radius: 999px;
	box-shadow: none;
	height: 40px;
	transform: none;
	transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
	width: 40px;
}

.espt-block-header.is-preset-glow .esptb-hd-icons > .espt-icon-btn:hover,
.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-icon .espt-cart-btn:hover,
.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-burger:hover {
	background: color-mix(in srgb, #fff 82%, transparent);
	box-shadow: 0 0 0 1px var(--hd-line), 0 2px 6px -2px rgba(15, 23, 42, 0.12);
}

/* The open search: an ink circle, like the current menu pill. */
.espt-block-header.is-preset-glow .esptb-hd-glw-sbtn[aria-expanded="true"],
.espt-block-header.is-preset-glow .esptb-hd-glw-sbtn[aria-expanded="true"]:hover {
	background: var(--hd-ink);
	box-shadow: none;
	color: #fff;
}

/* Phones keep the bar to logo, search, cart and the burger (the phone menu
   carries the account); the account and wishlist join at 600px. */
.espt-block-header.is-preset-glow .esptb-hd-icons > .espt-account-btn,
.espt-block-header.is-preset-glow .esptb-hd-icons > .esptb-hd-wish { display: none; }

/* Count bubble: the brand colour, unless the theme or the block sets one. */
.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-icon .espt-cart-count {
	background: var(--cart-bubble, var(--hd-bubble, var(--hd-brand)));
	box-shadow: 0 0 0 2px var(--header-bg, var(--hd-bg));
	right: 0;
	top: 0;
}

/* The other cart looks keep a 40px tap target too (the base gives phones less). */
.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-total .espt-cart-btn { height: 40px; width: 40px; }
.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-label .espt-cart-btn { min-height: 40px; }

/* -------------------------------------------------------- search panel */

.espt-block-header.is-preset-glow .esptb-hd-glw-search {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--header-bg, var(--hd-bg)) 94%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--hd-line) 85%, transparent);
	box-shadow: 0 22px 40px -24px rgba(15, 23, 42, 0.4);
	color: var(--hd-ink);
	left: 0;
	padding-bottom: 16px;
	padding-top: 14px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 992;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-search[hidden] { display: none; }

.espt-block-header.is-preset-glow .esptb-hd-glw-search-in {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	margin: 0 auto;
	max-width: 720px;
	min-width: 0;
	width: 100%;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-search-row {
	align-items: center;
	display: flex;
	gap: 8px;
	min-width: 0;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-search-row .espt-search-form { flex: 1 1 auto; }

/* 16px keeps phones from zooming into the field. */
.espt-block-header.is-preset-glow .esptb-hd-glw-search .espt-search-form input[type="search"] {
	background: var(--search-bg, #fff);
	border-color: var(--search-line, var(--hd-line));
	font-size: 16px;
	padding-bottom: 12px;
	padding-top: 12px;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-x {
	align-items: center;
	background: color-mix(in srgb, var(--hd-ink) 6%, transparent);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--hd-ink);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	padding: 0;
	transform: none;
	transition: background 0.2s ease;
	width: 44px;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-x:hover { background: color-mix(in srgb, var(--hd-ink) 12%, transparent); }
.espt-block-header.is-preset-glow .esptb-hd-glw-x .espt-ic { display: inline-flex; }
.espt-block-header.is-preset-glow .esptb-hd-glw-x svg { height: 1em; width: 1em; }

.espt-block-header.is-preset-glow .esptb-hd-glw-pop {
	--hd-chip-on: var(--hd-ink);
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-pop-k {
	color: var(--hd-muted);
	flex: none;
	font-size: 12.5px;
	font-weight: 600;
}

.espt-block-header.is-preset-glow .esptb-hd-glw-pop .esptb-hd-chips { flex: 1 1 auto; min-width: 0; }
.espt-block-header.is-preset-glow .esptb-hd-glw-pop .esptb-hd-chips a { min-height: 40px; }

/* ------------------------------------------- phone menu (full screen) */

.espt-block-header.is-preset-glow.is-panel-style-fullscreen .esptb-hd-panel {
	background: var(--panel-bg, color-mix(in srgb, var(--hd-brand) 4%, #fff));
}

.espt-block-header.is-preset-glow.is-panel-style-fullscreen .esptb-nav-panel > ul > li > a {
	font-family: var(--hd-display);
	font-size: 21px;
	font-weight: 600;
}

/* ------------------------------------------------------------ tablet */

@media (min-width: 600px) {
	.espt-block-header.is-preset-glow .esptb-hd-icons > .espt-account-btn,
	.espt-block-header.is-preset-glow .esptb-hd-icons > .esptb-hd-wish { display: inline-flex; }
}

@media (min-width: 768px) {
	.espt-block-header.is-preset-glow .esptb-hd-logo-text { font-size: 27px; }
}

/* ----------------------------------------------------------- desktop */

@media (min-width: 1024px) {
	/* Logo · pill menu (centred on the page) · icons. The side columns never
	   drop below their content; a long menu wraps inside its capsule. */
	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-bar {
		display: grid;
		gap: 18px;
		grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	}

	/* The base caps the logo at 40% of its box — in this grid that box is the
	   logo's own column, which would shrink an image logo to 40% of itself. */
	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-logo { grid-column: 1; justify-self: start; max-width: none; }
	.espt-block-header.is-preset-glow .esptb-hd-logo-text { white-space: nowrap; }

	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-nav-main {
		grid-column: 2;
		justify-content: center;
		max-width: 100%;
		min-width: 0;
	}

	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-icons {
		grid-column: 3;
		justify-self: end;
		margin-left: 0;
	}

	/* The capsule. */
	.espt-block-header.is-preset-glow .esptb-nav-main .espt-hd-menu {
		background: color-mix(in srgb, #fff 70%, transparent);
		border-radius: 26px;
		box-shadow: 0 0 0 1px var(--hd-line), 0 6px 18px -12px rgba(15, 23, 42, 0.25);
		flex: 0 1 auto;
		gap: 2px;
		justify-content: center;
		min-width: 0;
		padding: 4px;
	}

	/* The pills: 13.5px at the default menu size; the menu spacing setting
	   widens or narrows each pill. */
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		border-radius: 999px;
		font-size: calc(var(--menu-size, 15px) * 0.9);
		padding: 7px clamp(9px, calc(var(--menu-gap, 24px) * 0.5), 18px);
		transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
	}

	/* The pill is the hover effect here — no underline inside it. */
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a::before { content: none; }

	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover,
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li:hover > a,
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li:focus-within > a {
		background: var(--nav-accent, #fff);
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
		color: var(--menu-hover, var(--hd-ink));
	}

	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li.current-menu-item > a,
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li.current-menu-ancestor > a,
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a[aria-current="page"] {
		background: var(--hd-ink);
		box-shadow: none;
		color: #fff;
	}

	/* Dropdowns clear the capsule; an invisible bridge keeps the hover alive. */
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > .sub-menu { top: calc(100% + 10px); }

	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > .sub-menu::before {
		content: "";
		height: 14px;
		left: 0;
		position: absolute;
		right: 0;
		top: -14px;
	}
}

@media (min-width: 1280px) {
	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-bar { gap: 24px; }

	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		padding-left: clamp(10px, calc(var(--menu-gap, 24px) * 0.68), 24px);
		padding-right: clamp(10px, calc(var(--menu-gap, 24px) * 0.68), 24px);
	}
}

/* Slim down once stuck: the row padding halves (base), the wordmark shrinks. */
.espt-block-header.is-preset-glow.is-sticky-shrink.is-stuck .esptb-hd-logo-text { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
	.espt-block-header.is-preset-glow .esptb-hd-logo-text,
	.espt-block-header.is-preset-glow .esptb-hd-icons > .espt-icon-btn,
	.espt-block-header.is-preset-glow .esptb-hd-cart.is-cart-icon .espt-cart-btn,
	.espt-block-header.is-preset-glow .esptb-hd-main .esptb-hd-burger,
	.espt-block-header.is-preset-glow .esptb-hd-glw-x,
	.espt-block-header.is-preset-glow .esptb-nav.esptb-nav-main:not(.esptb-nav-panel) .espt-hd-menu > li > a { transition: none; }
}