/**
 * Header layout: Editorial — .espt-block-header.is-preset-editorial
 *
 * A dark editorial band: burger (below 1024), a text wordmark in the theme's
 * heading font, the menu on the left, and on the right a quiet underline
 * search trigger (an icon on phones), the account word and the bag count.
 * The trigger drops a full-width dark panel with a big underline search and
 * outline category chips. Colours come from the --hd-* tokens unless the
 * block sets its own (header, menu, icon, dropdown, bubble, search colours).
 *
 * Everything that paints the bar is scoped to .esptb-hd-main so the phone
 * menu (a white drawer inside the same root) keeps its own colours.
 */

/* Kit parts recoloured for a dark band. */
.espt-block-header.is-preset-editorial {
	--hd-chip-bg: transparent;
	--hd-chip-ink: color-mix(in srgb, #fff 84%, transparent);
	--hd-chip-on: color-mix(in srgb, var(--hd-accent) 14%, transparent);
	--hd-chip-on-ink: var(--hd-accent);
}

/* ---------------------------------------------------------------- band */

.espt-block-header.is-preset-editorial .esptb-hd {
	background: var(--header-bg, var(--hd-dark));
	color: color-mix(in srgb, #fff 90%, transparent);
}

.espt-block-header.is-preset-editorial.is-divider .esptb-hd { border-bottom-color: rgba(255, 255, 255, 0.1); }

.espt-block-header.is-preset-editorial .esptb-hd-topbar { font-size: var(--topbar-size, 12.5px); }

/* Running top bar: the strip takes the room the notes had. */
.espt-block-header.is-preset-editorial .esptb-hd-edtb-run { flex: 1 1 100%; min-width: 0; }

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

/* Phones and tablets: burger · wordmark · icons. */
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-burger {
	box-shadow: none;
	color: var(--icons-color, #fff);
	height: 40px;
	margin-left: -6px;
	order: 0;
	transform: none;
	width: 40px;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-burger:hover { background: rgba(255, 255, 255, 0.08); }

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo { color: var(--menu-color, #fff); }

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo-text {
	font-family: var(--hd-display);
	font-size: clamp(21px, 6.4vw, 25px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	transition: font-size 0.25s ease;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-icons { gap: 4px; }

/* Icon buttons (search on phones, account at 1024–1279, wishlist, compare). */
.espt-block-header.is-preset-editorial .esptb-hd-main .espt-icon-btn:not(.espt-cart-btn) {
	box-shadow: none;
	color: var(--icons-color, color-mix(in srgb, #fff 90%, transparent));
	height: 40px;
	transform: none;
	width: 40px;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .espt-icon-btn:not(.espt-cart-btn):hover,
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-edfind-ic[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.08);
	color: var(--menu-hover, var(--hd-accent));
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-compare,
.espt-block-header.is-preset-editorial .esptb-hd-main .espt-account-btn { display: none; }

/* The underline search trigger (≥768). */
.espt-block-header.is-preset-editorial .esptb-hd-edfind {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	box-shadow: none;
	color: color-mix(in srgb, #fff 62%, transparent);
	cursor: pointer;
	display: none;
	flex: 0 3 230px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	height: 40px;
	letter-spacing: normal;
	line-height: 1.3;
	min-width: 120px;
	padding: 0 4px 0 0;
	text-align: left;
	text-transform: none;
	transform: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.espt-block-header.is-preset-editorial .esptb-hd-edfind .espt-ic {
	color: var(--icons-color, #fff);
	display: inline-flex;
	flex: none;
	font-size: 17px;
	transition: color 0.15s ease;
}

.espt-block-header.is-preset-editorial .esptb-hd-edfind .espt-ic svg,
.espt-block-header.is-preset-editorial .esptb-hd-edsearch-x .espt-ic svg {
	display: block;
	height: 1em;
	width: 1em;
}

.espt-block-header.is-preset-editorial .esptb-hd-edfind-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espt-block-header.is-preset-editorial .esptb-hd-edfind:hover,
.espt-block-header.is-preset-editorial .esptb-hd-edfind[aria-expanded="true"] {
	background: transparent;
	border-bottom-color: var(--menu-hover, var(--hd-accent));
	color: var(--menu-hover, var(--hd-accent));
}

.espt-block-header.is-preset-editorial .esptb-hd-edfind:hover .espt-ic,
.espt-block-header.is-preset-editorial .esptb-hd-edfind[aria-expanded="true"] .espt-ic { color: inherit; }

/* Account as a word ("অ্যাকাউন্ট"), from 600px. */
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct {
	align-items: center;
	color: var(--icons-color, color-mix(in srgb, #fff 90%, transparent));
	display: none;
	flex: none;
	flex-direction: row;
	min-height: 40px;
	transition: color 0.15s ease;
	white-space: nowrap;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct:hover { color: var(--menu-hover, var(--hd-accent)); }
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct-s { display: none; }
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct-b { font-size: 14px; font-weight: 500; }

/* The cart. Default look: the word + its count in an accent circle. */
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-icon,
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label {
	color: var(--icons-color, color-mix(in srgb, #fff 90%, transparent));
	transition: color 0.15s ease;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label { font-size: 14px; font-weight: 600; gap: 7px; }
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label:hover { color: var(--menu-hover, var(--hd-accent)); }

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart-label {
	align-items: center;
	display: inline-flex;
	min-height: 40px;
	padding-left: 4px;
	white-space: nowrap;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label .espt-cart-btn,
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label .espt-cart-btn:hover {
	background: transparent;
	box-shadow: none;
	min-height: 40px;
	min-width: 24px;
	padding: 0;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-label .espt-cart-count {
	background: var(--cart-bubble, var(--hd-accent));
	box-shadow: none;
	color: var(--hd-ink);
	font-size: 11.5px;
	height: 22px;
	min-width: 22px;
	padding: 0 6px;
}

/* The other looks, when the block picks one: rings match the dark band. */
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-icon .espt-cart-btn {
	box-shadow: none;
	color: inherit;
	height: 40px;
	width: 40px;
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-total .espt-cart-btn { height: 40px; width: 40px; }

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-icon .espt-cart-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--menu-hover, var(--hd-accent));
}

.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-icon .espt-cart-count,
.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-round .espt-cart-count {
	box-shadow: 0 0 0 2px var(--header-bg, var(--hd-dark));
}

@media (max-width: 599px) {
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-cart.is-cart-total { color: var(--icons-color, #fff); }
}

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

.espt-block-header.is-preset-editorial .esptb-hd-edsearch {
	background: color-mix(in srgb, var(--header-bg, var(--hd-dark)) 88%, #000);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 0.6);
	color: color-mix(in srgb, #fff 90%, transparent);
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 993;
}

.espt-block-header.is-preset-editorial .esptb-hd-edsearch[hidden] { display: none; }

.espt-block-header.is-preset-editorial .esptb-hd-edsearch > .esptb-hd-bar {
	align-items: stretch;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 18px;
	padding-top: 14px;
}

.espt-block-header.is-preset-editorial .esptb-hd-edsearch-row {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

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

/* The big search: an underline, white display type. */
.espt-block-header.is-preset-editorial .espt-search-form.is-big input[type="search"] {
	background: var(--search-bg, transparent);
	border: 0;
	border-bottom: 2px solid var(--search-line, rgba(255, 255, 255, 0.3));
	border-radius: 0;
	box-shadow: none;
	caret-color: var(--hd-accent);
	color: #fff;
	font-family: var(--hd-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	padding: 8px 46px 10px 0;
	transition: border-color 0.2s ease;
}

.espt-block-header.is-preset-editorial .espt-search-form.is-big input[type="search"]::placeholder {
	color: color-mix(in srgb, #fff 50%, transparent);
	opacity: 1;
}

.espt-block-header.is-preset-editorial .espt-search-form.is-big input[type="search"]:focus {
	border-bottom-color: var(--menu-hover, var(--hd-accent));
	box-shadow: none;
	outline: none;
}

.espt-block-header.is-preset-editorial .espt-search-form.is-big .button,
.espt-block-header.is-preset-editorial .espt-search-form.is-big button[type="submit"] {
	box-shadow: none;
	color: color-mix(in srgb, #fff 72%, transparent);
	height: 44px;
	right: 0;
	width: 44px;
}

.espt-block-header.is-preset-editorial .espt-search-form.is-big .button:hover,
.espt-block-header.is-preset-editorial .espt-search-form.is-big button[type="submit"]:hover { color: var(--menu-hover, var(--hd-accent)); }

.espt-block-header.is-preset-editorial .espt-search-form.is-big .button svg,
.espt-block-header.is-preset-editorial .espt-search-form.is-big button[type="submit"] svg {
	height: 22px;
	width: 22px;
}

.espt-block-header.is-preset-editorial .esptb-hd-edsearch-x {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	box-shadow: none;
	color: color-mix(in srgb, #fff 85%, transparent);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transform: none;
	transition: border-color 0.15s ease, color 0.15s ease;
	width: 44px;
}

.espt-block-header.is-preset-editorial .esptb-hd-edsearch-x:hover {
	background: transparent;
	border-color: var(--menu-hover, var(--hd-accent));
	color: var(--menu-hover, var(--hd-accent));
}

.espt-block-header.is-preset-editorial .esptb-hd-edsearch-x .espt-ic { display: inline-flex; }

/* "জনপ্রিয় খোঁজ" + outline chips (a sideways-scrolling row on phones). */
.espt-block-header.is-preset-editorial .esptb-hd-edpop {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	min-width: 0;
}

.espt-block-header.is-preset-editorial .esptb-hd-edpop-l {
	color: color-mix(in srgb, #fff 58%, transparent);
	flex: 0 0 100%;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.espt-block-header.is-preset-editorial .esptb-hd-edchips { flex: 1 1 100%; min-width: 0; }
.espt-block-header.is-preset-editorial .esptb-hd-edchips ul { padding: 3px 2px; }

.espt-block-header.is-preset-editorial .esptb-hd-edchips a {
	border: 1px solid rgba(255, 255, 255, 0.26);
	font-size: 13.5px;
	font-weight: 500;
	min-height: 40px;
	padding: 0 16px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.espt-block-header.is-preset-editorial .esptb-hd-edchips a:hover,
.espt-block-header.is-preset-editorial .esptb-hd-edchips a.is-current { border-color: var(--hd-accent); }

/* The panel eases in (reuses the base's esptb-hd-sub keyframes). */
@media (prefers-reduced-motion: no-preference) {
	.espt-block-header.is-preset-editorial .esptb-hd-edsearch:not([hidden]) { animation: esptb-hd-sub 0.24s ease both; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo-text { transition: none; }
}

/* =====================================================================
   600+ — the account word joins the row
   ===================================================================== */

@media (min-width: 600px) {
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct { display: inline-flex; }
}

/* =====================================================================
   Tablet — the underline trigger replaces the search icon
   ===================================================================== */

@media (min-width: 768px) {
	.espt-block-header.is-preset-editorial .esptb-hd-edtb-run { flex: 1 1 0; }

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo-text { font-size: 27px; }

	/* The trigger gives way first (down to its 120px); the cluster never
	   shrinks below its buttons, so a long wordmark wraps instead of pushing
	   them off the page. */
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-icons {
		flex: 0 1 auto;
		gap: 18px;
	}

	.espt-block-header.is-preset-editorial .esptb-hd-edfind { display: inline-flex; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-edfind-ic { display: none; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-compare { display: inline-flex; }

	.espt-block-header.is-preset-editorial .esptb-hd-edsearch > .esptb-hd-bar {
		gap: 20px;
		padding-bottom: 26px;
		padding-top: 22px;
	}

	.espt-block-header.is-preset-editorial .espt-search-form.is-big input[type="search"] {
		font-size: 28px;
		padding: 10px 52px 12px 0;
	}

	.espt-block-header.is-preset-editorial .esptb-hd-edpop { flex-wrap: nowrap; }
	.espt-block-header.is-preset-editorial .esptb-hd-edpop-l { flex: none; }
	.espt-block-header.is-preset-editorial .esptb-hd-edchips { flex: 1 1 0; }
}

/* =====================================================================
   Desktop — the menu on the left after the wordmark
   ===================================================================== */

@media (min-width: 1024px) {
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-bar { gap: 24px; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo-text { font-size: 29px; }
	.espt-block-header.is-preset-editorial.is-sticky-shrink.is-stuck .esptb-hd-main .esptb-hd-logo-text { font-size: 25px; }

	.espt-block-header.is-preset-editorial .esptb-nav-main { flex: 1 1 auto; margin-left: 4px; min-width: 0; }
	.espt-block-header.is-preset-editorial .esptb-nav-main .espt-hd-menu { justify-content: flex-start; }

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a {
		color: var(--menu-color, color-mix(in srgb, #fff 72%, transparent));
		font-size: var(--menu-size, 14px);
		font-weight: 500;
	}

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover,
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li.current-menu-item > a {
		color: var(--menu-hover, var(--hd-accent));
	}

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a::before {
		background: var(--nav-accent, var(--menu-hover, var(--hd-accent)));
	}

	.espt-block-header.is-preset-editorial.is-nav-fx-pill .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover,
	.espt-block-header.is-preset-editorial.is-nav-fx-box .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .espt-hd-menu > li > a:hover {
		background: var(--nav-accent, rgba(255, 255, 255, 0.08));
	}

	/* Dropdowns match the panel: dark, with the accent on hover. */
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .sub-menu {
		background: var(--drop-bg, color-mix(in srgb, var(--header-bg, var(--hd-dark)) 88%, #000));
		border-color: rgba(255, 255, 255, 0.1);
		box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
	}

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .sub-menu a {
		color: var(--drop-color, color-mix(in srgb, #fff 78%, transparent));
	}

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-nav:not(.esptb-nav-panel) .sub-menu a:hover {
		background: rgba(255, 255, 255, 0.07);
		color: var(--menu-hover, var(--hd-accent));
	}

	/* The icons and the wordmark keep their size; a long menu wraps instead
	   (the base lets the logo shrink, which squeezed the wordmark). With no
	   menu at all, the auto margin still keeps the icons on the right. */
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-icons {
		flex: none;
		gap: 16px;
		margin-left: auto;
	}

	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-logo { flex-shrink: 0; max-width: 40%; }

	/* 1024–1279: a shorter trigger and the account as an icon. */
	.espt-block-header.is-preset-editorial .esptb-hd-edfind { flex: 0 0 190px; min-width: 0; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct { display: none; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .espt-account-btn { display: inline-flex; }

	.espt-block-header.is-preset-editorial .esptb-hd-edsearch > .esptb-hd-bar { padding-bottom: 30px; padding-top: 28px; }
}

@media (min-width: 1280px) {
	.espt-block-header.is-preset-editorial .esptb-hd-edfind { flex-basis: 230px; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .esptb-hd-acct { display: inline-flex; }
	.espt-block-header.is-preset-editorial .esptb-hd-main .espt-account-btn { display: none; }
}