/**
 * Header layout: Atelier — .espt-block-header.is-preset-atelier
 *
 * A fashion boutique: a slim centred strip, then one airy row on a
 * three-column grid — the menu (or the burger) on the left, the logo or a
 * spaced-out wordmark in the centre, search, account and the "Bag 2" cart on
 * the right. Colours come from the --hd-* tokens (the theme's settings)
 * unless the block sets its own.
 *
 * --atl-side is the least width of BOTH side columns. Equal sides keep the
 * logo on the true centre; a side whose icons need more simply grows (the
 * logo then gives way a little instead of being overlapped).
 */

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

.espt-block-header.is-preset-atelier .esptb-hd-topbar {
	background: var(--topbar-bg, color-mix(in srgb, var(--hd-ink) 3%, var(--header-bg, var(--hd-bg))));
	border-bottom: 1px solid var(--hd-line);
	color: var(--topbar-color, var(--hd-muted));
	font-size: var(--topbar-size, 12px);
	font-weight: 400;
	letter-spacing: 0.02em;
}

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

.espt-block-header.is-preset-atelier .esptb-hd-atl-msg {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	justify-content: center;
	min-width: 0;
}

/* ----------------------------------------------- main row: the grid */

.espt-block-header.is-preset-atelier .esptb-hd-atl-main { --atl-side: 100px; }

.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-bar {
	column-gap: 6px;
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}

.espt-block-header.is-preset-atelier .esptb-hd-atl-l,
.espt-block-header.is-preset-atelier .esptb-hd-atl-r {
	align-items: center;
	display: flex;
	grid-row: 1;
	margin: 0;
	min-width: var(--atl-side, 100px);
}

.espt-block-header.is-preset-atelier .esptb-hd-atl-l { grid-column: 1; justify-content: flex-start; }

.espt-block-header.is-preset-atelier .esptb-hd-atl-r {
	gap: 2px;
	grid-column: 3;
	justify-content: flex-end;
}

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

/* The wordmark: display font, capitals, wide tracking. The left padding
   matches the tracking the last letter carries, so it sits optically centred. */
.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-logo-text {
	display: block;
	font-family: var(--hd-display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.05;
	padding-left: 0.22em;
	text-transform: uppercase;
}

/* 360–399px phones: a touch smaller so a longer name still fits one line. */
@media (max-width: 399px) {
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-logo-text {
		font-size: 22px;
		letter-spacing: 0.16em;
		padding-left: 0.16em;
	}
}

/* ------------------------------------------------ burger and icons */

.espt-block-header.is-preset-atelier .esptb-hd-burger {
	height: 40px;
	margin-left: -8px;
	width: 40px;
}

.espt-block-header.is-preset-atelier .esptb-hd-burger:hover {
	background: transparent;
	color: var(--menu-hover, var(--hd-link-h));
}

.espt-block-header.is-preset-atelier .esptb-burger { gap: 4.5px; width: 20px; }
.espt-block-header.is-preset-atelier .esptb-burger i { height: 1.5px; }

.espt-block-header.is-preset-atelier .esptb-hd-atl-r .espt-icon-btn:not(.espt-cart-btn),
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-cart.is-cart-icon .espt-cart-btn,
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-cart.is-cart-total .espt-cart-btn {
	height: 40px;
	width: 40px;
}

.espt-block-header.is-preset-atelier .esptb-hd-atl-r .espt-icon-btn:not(.espt-cart-btn):hover,
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-cart.is-cart-icon .espt-cart-btn:hover {
	background: transparent;
	color: var(--menu-hover, var(--hd-link-h));
}

/* Thin strokes suit the boutique look (fill icons are left alone). */
.espt-block-header.is-preset-atelier .esptb-hd-atl-r svg { stroke-width: 1.6; }

/* Phones: search and the bag; the account waits for 600px (the phone menu
   carries it), the wishlist too, and compare for the desktop. */
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .espt-account-btn,
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-wish,
.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-compare { display: none; }

/* The search button turns into a close cross while its panel is open. */
.espt-block-header.is-preset-atelier .esptb-hd-atl-find .esptb-hd-atl-ic-close,
.espt-block-header.is-preset-atelier .esptb-hd-atl-find[aria-expanded="true"] .esptb-hd-atl-ic-open { display: none; }
.espt-block-header.is-preset-atelier .esptb-hd-atl-find[aria-expanded="true"] .esptb-hd-atl-ic-close { display: inline-flex; }
.espt-block-header.is-preset-atelier .esptb-hd-atl-find > span { display: inline-flex; line-height: 0; }

/* The cart as a word + count ("ব্যাগ 2"): quiet type, a 40px tap area. */
.espt-block-header.is-preset-atelier .esptb-hd-cart.is-cart-label {
	font-size: 13.5px;
	font-weight: 500;
	gap: 5px;
	letter-spacing: 0.02em;
	min-height: 40px;
	padding: 0 2px 0 4px;
	transition: color 0.15s ease;
}

.espt-block-header.is-preset-atelier .esptb-hd-cart.is-cart-label:hover { color: var(--menu-hover, var(--hd-link-h)); }

.espt-block-header.is-preset-atelier .esptb-hd-cart.is-cart-label .espt-cart-btn,
.espt-block-header.is-preset-atelier .esptb-hd-cart.is-cart-label .espt-cart-btn:hover {
	background: transparent;
	color: inherit;
	min-height: 40px;
}

.espt-block-header.is-preset-atelier .esptb-hd-atl-r .espt-cart-count {
	font-size: 10.5px;
	height: 18px;
	min-width: 18px;
}

/* The word answers taps across the full 40px, not just its line of text;
   so does a running total (the "total" look) from 600px, where it shows. */
.espt-block-header.is-preset-atelier .esptb-hd-cart-label {
	align-items: center;
	align-self: stretch;
	display: inline-flex;
}

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

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

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

	.espt-block-header.is-preset-atelier .esptb-hd-atl-strip a::before {
		content: "";
		inset: -12px 0;
		position: absolute;
	}
}

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

.espt-block-header.is-preset-atelier .esptb-hd-atl-search {
	background: var(--header-bg, var(--hd-bg));
	border-top: 1px solid var(--hd-line);
	box-shadow: 0 18px 32px -20px rgba(15, 23, 42, 0.4);
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 992;
}

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

.espt-block-header.is-preset-atelier .esptb-hd-atl-search > .esptb-hd-bar {
	display: block;
	padding-bottom: 16px;
	padding-top: 16px;
}

.espt-block-header.is-preset-atelier .esptb-hd-atl-search .espt-search-form {
	margin: 0 auto;
	max-width: 640px;
}

/* 16px text: phones do not zoom into the field on focus. */
.espt-block-header.is-preset-atelier .esptb-hd-atl-search .espt-search-form input[type="search"] {
	background: var(--search-bg, color-mix(in srgb, var(--hd-ink) 3%, var(--header-bg, var(--hd-bg))));
	border-color: var(--search-line, var(--hd-line));
	font-size: 16px;
	padding-bottom: 12px;
	padding-top: 12px;
}

@media (prefers-reduced-motion: no-preference) {
	.espt-block-header.is-preset-atelier .esptb-hd-atl-search {
		transition: opacity 0.2s ease, transform 0.24s ease;
	}

	/* Browsers with @starting-style fade the panel in; others just show it. */
	@starting-style {
		.espt-block-header.is-preset-atelier .esptb-hd-atl-search {
			opacity: 0;
			transform: translateY(-6px);
		}
	}

	.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-logo-text { transition: font-size 0.25s ease; }
}

/* Slim down once stuck: the wordmark shrinks with the row. */
.espt-block-header.is-preset-atelier.is-sticky-shrink.is-stuck .esptb-hd-atl-main .esptb-hd-logo-text { font-size: 21px; }

/* ================================================================ 600px+ */

@media (min-width: 600px) {
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main { --atl-side: 144px; }
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main.has-atl-wish { --atl-side: 188px; }

	/* A running total is wider than the other cart looks. */
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main:has(.esptb-hd-cart.is-cart-total) { --atl-side: 236px; }

	.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-bar { column-gap: 12px; }
	.espt-block-header.is-preset-atelier .esptb-hd-atl-r { gap: 4px; }

	.espt-block-header.is-preset-atelier .esptb-hd-atl-r .espt-account-btn,
	.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-wish { display: inline-flex; }
}

/* ================================================================ 768px+ */

@media (min-width: 768px) {
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-logo-text { font-size: 32px; }
	.espt-block-header.is-preset-atelier.is-sticky-shrink.is-stuck .esptb-hd-atl-main .esptb-hd-logo-text { font-size: 25px; }
	.espt-block-header.is-preset-atelier .esptb-hd-cart.is-cart-label { font-size: 14px; }
}

/* =============================================================== 1024px+ */

@media (min-width: 1024px) {
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main,
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main.has-atl-wish { --atl-side: 200px; }
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main.has-atl-compare { --atl-side: 244px; }
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main:has(.esptb-hd-cart.is-cart-total) { --atl-side: 250px; }

	/* The menu may wrap inside its column, so that side sizes to its widest
	   item rather than the whole row of links. */
	.espt-block-header.is-preset-atelier .esptb-hd-atl-main .esptb-hd-bar {
		column-gap: 24px;
		grid-template-columns: minmax(min-content, 1fr) auto minmax(max-content, 1fr);
	}

	.espt-block-header.is-preset-atelier .esptb-hd-atl-l .esptb-nav-main {
		flex: 1 1 auto;
		justify-content: flex-start;
		min-width: 0;
	}

	.espt-block-header.is-preset-atelier .esptb-nav-main .espt-hd-menu { justify-content: flex-start; }

	.espt-block-header.is-preset-atelier .esptb-nav-main.esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		font-size: var(--menu-size, 14px);
		font-weight: 500;
		letter-spacing: 0.01em;
	}

	/* A hairline underline reads finer than the default 2px bar. */
	.espt-block-header.is-preset-atelier.is-nav-fx-underline .esptb-nav-main .espt-hd-menu > li > a::before,
	.espt-block-header.is-preset-atelier.is-nav-fx-underline-center .esptb-nav-main .espt-hd-menu > li > a::before {
		bottom: 3px;
		height: 1px;
	}

	.espt-block-header.is-preset-atelier .esptb-hd-atl-r .esptb-hd-compare { display: inline-flex; }
}

/* 1024–1279: the menu shares half the row with the logo — tighter spacing
   keeps a longer menu on one line before it wraps. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.espt-block-header.is-preset-atelier .esptb-nav-main .espt-hd-menu { column-gap: calc(var(--menu-gap, 24px) * 0.7); }
}

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