/**
 * Header layout: Luxe — .espt-block-header.is-preset-luxe
 *
 * Fine jewellery: a quiet bar with the burger and its word on the left, the
 * wordmark centred in spaced capitals, thin-line search / account / cart on
 * the right. No menu in the bar on any screen — the layout registry keeps
 * the burger and its drawer on desktop too. The search icon opens a panel
 * under the bar. Colours come from the --hd-* tokens (the theme's settings)
 * unless the block sets its own; the bar is the header background (white by
 * default) with the base hairline divider.
 */

/* --------------------------------------------------------------- strip */

/* Only printed when the top bar has a message: quiet, centred, a hairline under it. */
.espt-block-header.is-preset-luxe .esptb-hd-lx-strip {
	background: var(--topbar-bg, transparent);
	border-bottom: 1px solid var(--hd-line);
	color: var(--topbar-color, var(--hd-muted));
	font-size: var(--topbar-size, 12px);
	font-weight: 400;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-strip .esptb-hd-bar {
	justify-content: center;
	padding-bottom: 7px;
	padding-top: 7px;
	text-align: center;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-sep {
	background: currentColor;
	display: inline-block;
	flex: none;
	height: 4px;
	opacity: 0.5;
	transform: rotate(45deg);
	width: 4px;
}

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

/* Three columns — burger · wordmark · icons — so the wordmark sits in the
   true centre whatever the two sides hold. The side columns never shrink
   below their buttons; a long shop name wraps rather than overlapping. */
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	padding-bottom: calc(var(--row-pad, 10px) * 1.6);
	padding-top: calc(var(--row-pad, 10px) * 1.6);
}

/* Explicit cells: the base flex `order` values would reshuffle grid auto-placement. */
/* box-shadow / transform here and on the icons: shed the theme's global
   button look (its shadow setting and the 1px hover lift). */
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-burger {
	border-radius: 999px;
	box-shadow: none;
	transform: none;
	grid-column: 1;
	grid-row: 1;
	height: 40px;
	justify-self: start;
	min-width: 40px;
	order: 0;
}

.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-logo {
	grid-column: 2;
	grid-row: 1;
	justify-content: center;
	justify-self: center;
	margin: 0;
	max-width: 100%;
	order: 0;
	text-align: center;
}

.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-icons {
	gap: 2px;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	margin: 0;
	order: 0;
}

/* The wordmark: display font, spaced capitals; the left padding matches the
   space letter-spacing leaves after the last letter, so it truly centres. */
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-logo-text {
	font-family: var(--hd-display);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.42em;
	line-height: 1.25;
	padding-left: 0.42em;
	text-transform: uppercase;
}

/* Burger: three hairlines; its word shows from 600px (base). */
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-burger-t { font-size: 13px; font-weight: 500; }
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-burger { gap: 5px; width: 22px; }
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-burger i { height: 1.5px; }
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-burger[aria-expanded="true"] .esptb-burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-burger[aria-expanded="true"] .esptb-burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Round 40px icon buttons on every screen (the base is 36px on phones). */
.espt-block-header.is-preset-luxe .esptb-hd-icons > .espt-icon-btn,
.espt-block-header.is-preset-luxe .esptb-hd-cart.is-cart-icon .espt-cart-btn {
	border-radius: 999px;
	box-shadow: none;
	height: 40px;
	transform: none;
	width: 40px;
}

/* The other cart looks keep a 40px tap target too. */
.espt-block-header.is-preset-luxe .esptb-hd-cart.is-cart-total .espt-cart-btn { height: 40px; width: 40px; }
.espt-block-header.is-preset-luxe .esptb-hd-cart.is-cart-label .espt-cart-btn { min-height: 40px; }

/* Thin-line icons. WooCommerce's refreshed cart link carries the same svg,
   so this survives an add-to-cart. */
.espt-block-header.is-preset-luxe .esptb-hd-main .espt-icon-btn svg { stroke-width: 1.4; }

/* The heart is a filled glyph: draw it as an outline to match. */
.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-wish svg {
	fill: none;
	stroke: currentColor;
	stroke-linejoin: round;
}

/* Phones keep search + cart only; account and wishlist join at 600px. */
.espt-block-header.is-preset-luxe .esptb-hd-icons > .espt-account-btn,
.espt-block-header.is-preset-luxe .esptb-hd-icons > .esptb-hd-wish { display: none; }

/* A small count bubble in the accent colour. */
.espt-block-header.is-preset-luxe .esptb-hd-cart.is-cart-icon .espt-cart-count {
	background: var(--cart-bubble, var(--hd-accent));
	box-shadow: 0 0 0 2px var(--header-bg, var(--hd-bg));
	color: var(--hd-ink);
	font-size: 9.5px;
	font-weight: 700;
	height: 15px;
	min-width: 15px;
	padding: 0 3px;
	right: 4px;
	top: 5px;
}

/* The search button swaps its glass for a ✕ while the panel is open. */
.espt-block-header.is-preset-luxe .esptb-hd-lx-ic { display: inline-flex; line-height: 0; }

.espt-block-header.is-preset-luxe .esptb-hd-lx-find .esptb-hd-lx-ic-x,
.espt-block-header.is-preset-luxe .esptb-hd-lx-find[aria-expanded="true"] .esptb-hd-lx-ic-s { display: none; }

.espt-block-header.is-preset-luxe .esptb-hd-lx-find[aria-expanded="true"] { background: rgba(15, 23, 42, 0.06); }
.espt-block-header.is-preset-luxe .esptb-hd-lx-find[aria-expanded="true"] .esptb-hd-lx-ic-x { display: inline-flex; }

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

.espt-block-header.is-preset-luxe .esptb-hd-lx-panel {
	background: var(--header-bg, var(--hd-bg));
	border-top: 1px solid var(--hd-line);
	box-shadow: 0 26px 40px -30px rgba(15, 23, 42, 0.45);
	color: var(--hd-ink);
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 993;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-panel[hidden] { display: none; }

.espt-block-header.is-preset-luxe .esptb-hd-lx-panel > .esptb-hd-bar {
	display: block;
	padding-bottom: 22px;
	padding-top: 18px;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-inner {
	margin: 0 auto;
	max-width: 640px;
}

/* 16px keeps phones from zooming into the field; the radius is the block's
   "Search field radius" (the design sets it square). */
.espt-block-header.is-preset-luxe .esptb-hd-lx-panel .espt-search-form input[type="search"] {
	background: var(--search-bg, transparent);
	border-color: var(--search-line, color-mix(in srgb, var(--hd-ink) 24%, transparent));
	font-size: 16px;
	padding: 13px 52px 13px 18px;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-panel .espt-search-form .button {
	box-shadow: none;
	color: var(--hd-ink);
	height: 40px;
	right: 6px;
	width: 40px;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-panel .espt-search-form .button svg { stroke-width: 1.6; }

.espt-block-header.is-preset-luxe .esptb-hd-lx-label {
	color: var(--hd-muted);
	font-size: 12.5px;
	margin: 16px 0 8px;
}

/* Collection chips: hairline outlines that fill with ink on hover. */
.espt-block-header.is-preset-luxe .esptb-hd-lx-chips {
	--hd-chip-bg: transparent;
	--hd-chip-ink: var(--hd-text);
	--hd-chip-on: var(--hd-ink);
	--hd-chip-on-ink: #fff;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-chips a {
	border: 1px solid var(--hd-line);
	border-radius: var(--search-radius, 999px);
	font-weight: 500;
	min-height: 40px;
}

.espt-block-header.is-preset-luxe .esptb-hd-lx-chips a:hover,
.espt-block-header.is-preset-luxe .esptb-hd-lx-chips a.is-current { border-color: var(--hd-ink); }

/* ------------------------------------------------------------- drawer */

/* The drawer is this layout's only menu, on every screen: keep it in the
   same quiet key — hairlines, ink instead of brand fills. */
.espt-block-header.is-preset-luxe .esptb-hd-logo-panel .esptb-hd-logo-text {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.espt-block-header.is-preset-luxe .esptb-nav-panel a { font-weight: 500; }

.espt-block-header.is-preset-luxe .esptb-hd-q {
	background: transparent;
	border: 1px solid var(--panel-line, var(--hd-line));
	border-radius: 6px;
	font-weight: 600;
}

.espt-block-header.is-preset-luxe .esptb-hd-q:hover {
	background: transparent;
	border-color: var(--panel-active, var(--hd-ink));
}

.espt-block-header.is-preset-luxe .esptb-hd-q .espt-ic { color: var(--panel-active, var(--hd-ink)); }
.espt-block-header.is-preset-luxe .esptb-hd-q svg { stroke-width: 1.4; }

.espt-block-header.is-preset-luxe .esptb-hd-ptabs { border-radius: 6px; }
.espt-block-header.is-preset-luxe .esptb-hd-ptabs button { border-radius: 4px; font-weight: 600; }
.espt-block-header.is-preset-luxe .esptb-hd-ptabs button[aria-selected="true"] { background: var(--panel-active, var(--hd-ink)); }
.espt-block-header.is-preset-luxe .esptb-hd-ctiles a { border-radius: 6px; }

.espt-block-header.is-preset-luxe .esptb-hd-ctiles img,
.espt-block-header.is-preset-luxe .esptb-hd-ctile-ph { border-radius: 4px; }

/* ------------------------------------------------------------ breakpoints */

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

@media (min-width: 768px) {
	.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-logo-text { font-size: 20px; }
	.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-icons { gap: 4px; }

	.espt-block-header.is-preset-luxe .esptb-hd-lx-panel > .esptb-hd-bar {
		padding-bottom: 28px;
		padding-top: 24px;
	}

	.espt-block-header.is-preset-luxe .esptb-hd-lx-panel .espt-search-form input[type="search"] { font-size: 17px; }
}

@media (min-width: 1024px) {
	.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-logo-text { font-size: 22px; }
	.espt-block-header.is-preset-luxe .esptb-hd-main .esptb-hd-icons { gap: 6px; }
}

/* The panel eases in (the base header's own keyframes) unless the shopper
   asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.espt-block-header.is-preset-luxe .esptb-hd-lx-panel:not([hidden]) { animation: esptb-hd-sub 0.24s ease both; }
}