/**
 * Header — HeaderFooter.dc.html.
 *
 * One 76px row: wordmark, inline nav, a search field that takes the slack, then
 * the account, wishlist and cart controls. A black announcement strip above,
 * a mega panel below.
 *
 * Measurements are the artboard's: 76px row, 32px gap, 28px between nav links,
 * a 44px search pill capped at 340px, 18px between the action icons, and a
 * 17px cart badge offset -7/-9 from the icon's corner.
 *
 * Written against the theme's own tokens. The previous version addressed the
 * design-system plugin's --hpds-* names, half of which had no alias and
 * resolved to nothing.
 */

.hp-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--hp-z-menu);
	background: var(--hp-surface);
	border-block-end: 1px solid var(--hp-border);
}

/**
 * The WordPress admin bar.
 *
 * `#wpadminbar` is `position: fixed` at the top of the viewport for a logged-in
 * user, and WordPress compensates by pushing the document down with
 * `html { margin-top: 32px !important }`. That moves the document — it does not
 * move the viewport, so a `position: sticky; top: 0` element still sticks to
 * the very top of the screen and spends its whole life underneath the bar.
 *
 * Everything the theme pins to the top of the viewport therefore has to start
 * below it. Three cases, which are WordPress's own breakpoints:
 *
 *   - desktop: the bar is 32px and fixed.
 *   - 782px and under: it grows to 46px, still fixed.
 *   - 600px and under: it becomes `position: absolute` and scrolls away with
 *     the page, so there is nothing to avoid and the offset must go back to 0
 *     or the header floats with a gap under it.
 *
 * This only ever affects logged-in editors, which is exactly why it survived
 * this long: the shop's own visitors never saw it.
 */
body.admin-bar .hp-header {
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hp-header {
		inset-block-start: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .hp-header {
		inset-block-start: 0;
	}
}

/* An in-page anchor has to clear the sticky header, and for an editor it has to
 * clear the admin bar above it too. */
body.admin-bar {
	scroll-padding-block-start: calc(6rem + 32px);
}

/* ---- announcement ---- */

.hp-header__announcement {
	background: var(--hp-brand);
	color: var(--hp-text-inverse);
	text-align: center;
	font-size: var(--hp-text-sm);
}

.hp-header__announcement p {
	margin: 0;
	padding-block: var(--hp-space-2);
}

/* ---- the row ---- */

.hp-header__row {
	display: flex;
	align-items: center;
	gap: var(--hp-space-8);
	height: 4.75rem; /* 76px */
}

.hp-header__burger,
.hp-header__search-toggle {
	display: none;
}

/* ---- brand ---- */

.hp-header__brand {
	flex: none;
	display: flex;
	align-items: center;
}

.hp-header__wordmark {
	color: var(--hp-text);
	font-family: var(--hp-font-display);
	font-size: 1.625rem; /* 26px */
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* A site logo is honoured, but capped to the row. The uploaded logo is 684px
 * wide; without this it sets the flex basis and the row falls apart. */
.hp-header__brand .custom-logo-link {
	display: flex;
	align-items: center;
}

.hp-header__brand img {
	width: auto;
	max-width: 11rem;
	max-height: 2.375rem; /* 38px */
	object-fit: contain;
}

/* ---- navigation ---- */

.hp-nav {
	flex: none;
	min-width: 0;
}

.hp-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem; /* 28px */
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * The rule is drawn as a pseudo-element that scales out from the inline start,
 * not as a border that switches colour.
 *
 * Two reasons. It can be animated — a 2px border can only appear — and it costs
 * no layout: the earlier version went from weight 500 to 700 on hover, which
 * reflowed the label and nudged every item after it along the row. Nothing in a
 * navigation bar should move because the pointer passed over it.
 */
.hp-nav__link {
	position: relative;
	display: inline-block;
	padding-block: var(--hp-space-2);
	color: var(--hp-text);
	font-size: var(--hp-text-base);
	font-weight: 500;
	white-space: nowrap;
	background: none;
	cursor: pointer;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--hp-accent);
	/* RTL-safe: the transform origin follows the writing direction, so the rule
	 * grows from the right on this store and from the left on an LTR one. */
	transform: scaleX(0);
	/* `transform-origin` takes no logical keywords, so the RTL case is stated
	 * explicitly below rather than left to `inline-start`, which is not a value
	 * this property accepts. */
	transform-origin: left;
	transition: transform var(--hp-duration) var(--hp-ease-out);
}

[dir="rtl"] .hp-nav__link::after {
	transform-origin: right;
}

.hp-nav__link:hover::after,
.hp-nav__link:focus-visible::after,
.hp-nav__item.is-open > .hp-nav__link::after,
.hp-nav__link[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.hp-nav__link:hover,
.hp-nav__item.is-open > .hp-nav__link,
.hp-nav__link[aria-expanded="true"] {
	color: var(--hp-text);
}

/* The current section keeps its rule at rest, so the bar always says where you
 * are even with the pointer elsewhere. */
.hp-nav__item.current-menu-item > .hp-nav__link::after,
.hp-nav__item.current-menu-ancestor > .hp-nav__link::after {
	transform: scaleX(1);
}

/* The club entry is picked out in gold — set menu-item-club on the item. */
.hp-nav__item--club > .hp-nav__link {
	color: var(--hp-club);
	font-weight: 700;
}

.hp-nav__item--club > .hp-nav__link::after {
	background: var(--hp-club);
}

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

/**
 * `flex: 1` is deliberately not used here.
 *
 * It was, and it was written for one context — the header's horizontal row —
 * where growing to fill the slack is right. Everywhere else this form appears
 * the parent is a *column*: the 404 page, the empty-search block, a widget. In
 * a column the flex basis is the main size, so `flex: 1 1 0%` set the form's
 * height to 0 and `height: 2.75rem` never took effect. The 44px pill rendered
 * as a 20px sliver wrapped around its own icon.
 *
 * The header does not need it: `.hp-search-slot` is the flex item there and
 * carries `flex: 1` itself, so the form only has to fill the slot.
 */
.hp-search {
	display: flex;
	align-items: center;
	gap: var(--hp-space-3);
	flex: none;
	width: 100%;
	max-width: 21.25rem; /* 340px */
	height: 2.75rem; /* 44px */
	margin-inline-start: auto;
	padding-inline: var(--hp-space-4);
	background: var(--hp-surface-subtle);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text-muted);
}

.hp-search:focus-within {
	border-color: var(--hp-border-strong);
}

.hp-search .hp-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/**
 * The field inside the pill is bare — the pill is the control.
 *
 * `.hp-search__field` alone is (0,1,0) and lost to 40-forms.css's
 * `input[type="search"]` at (0,1,1), so the field kept the generic form
 * treatment: its own 46px height, border, background and radius, drawn inside
 * the pill. That is the second, smaller pill that appeared inside the search
 * box on the 404 page and anywhere else the standalone form is printed.
 */
.hp-search .hp-search__field,
.hp-search input[type="search"].hp-search__field {
	flex: 1;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--hp-text);
	font-size: 0.9375rem;
}

.hp-search__field::placeholder {
	color: var(--hp-text-muted);
	opacity: 1;
}

.hp-search__field:focus {
	outline: none;
}

/* WebKit paints its own clear affordance on type=search. */
.hp-search__field::-webkit-search-decoration,
.hp-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* ---- actions ---- */

.hp-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 1.125rem; /* 18px */
}

.hp-header__cart {
	position: relative;
}

.hp-header__cart-count {
	position: absolute;
	inset-block-start: -0.4375rem; /* -7px */
	inset-inline-start: -0.5625rem; /* -9px */
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.0625rem; /* 17px */
	height: 1.0625rem;
	padding-inline: 0.25rem;
	background: var(--hp-accent);
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text-inverse);
	font-size: 0.6875rem; /* 11px */
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* An empty cart needs no badge. */
.hp-header__cart-count.is-empty {
	display: none;
}

/* ---- mega panel ---- */

/**
 * The mega panel.
 *
 * One panel per top-level entry that has something to show. What it shows is
 * chosen in Appearance ▸ Menus — see inc/class-menu-fields.php — and the column
 * count arrives as an inline custom property, because it varies per entry: a
 * panel of brand names wants six narrow columns where a panel of treatment
 * categories wants four wide ones.
 */

.hp-mega {
	position: absolute;
	inset-inline: 0;
	background: var(--hp-surface);
	border-block-end: 1px solid var(--hp-border);
	box-shadow: 0 1rem 2.5rem rgb(17 17 17 / 0.14);
	/* A hairline of the accent along the top edge ties the open panel to the
	 * rule under the nav link that opened it. */
	border-block-start: 2px solid var(--hp-accent);
}

/* The panel arrives rather than appearing. `[hidden]` is toggled by the script,
 * so the animation runs on the frame the attribute is removed. */
.hp-mega:not([hidden]) {
	animation: hp-mega-in var(--hp-duration) var(--hp-ease-out) both;
}

@keyframes hp-mega-in {
	from { opacity: 0; transform: translateY(-0.5rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-mega:not([hidden]) {
		animation: none;
	}
}

.hp-mega__inner {
	display: grid;
	grid-template-columns: repeat(var(--hp-mega-columns, 4), minmax(0, 1fr));
	gap: var(--hp-space-6) var(--hp-space-8);
	padding-block: var(--hp-space-8);
	/* A shop with sixty categories under one entry must not produce a panel
	 * taller than the screen with no way down it. */
	max-height: min(70vh, 34rem);
	overflow-y: auto;
}

.hp-mega__column {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	min-width: 0;
	font-size: 0.9375rem;
}

/**
 * The column heading is a link to the category itself, and says so.
 *
 * It carries the same animated rule the top-level nav links use, so the two
 * levels of the menu behave identically — the panel is not a different
 * component with different manners.
 */
.hp-mega__title {
	position: relative;
	align-self: flex-start;
	padding-block-end: var(--hp-space-1);
	color: var(--hp-text);
	font-size: var(--hp-text-base);
	font-weight: 700;
	line-height: 1.3;
}

.hp-mega__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--hp-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--hp-duration) var(--hp-ease-out);
}

[dir="rtl"] .hp-mega__title::after {
	transform-origin: right;
}

.hp-mega__title:hover::after,
.hp-mega__title:focus-visible::after {
	transform: scaleX(1);
}

.hp-mega__links {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-mega__links a {
	display: inline-block;
	color: var(--hp-text-muted);
	line-height: 1.45;
	transition:
		color var(--hp-duration-fast) var(--hp-ease),
		translate var(--hp-duration) var(--hp-ease-out);
}

/* The same step towards the reading start the footer links take — one motion
 * vocabulary across the site rather than a different one per component. */
.hp-mega__links a:hover,
.hp-mega__links a:focus-visible {
	color: var(--hp-link);
	translate: 3px 0;
}

[dir="rtl"] .hp-mega__links a:hover,
[dir="rtl"] .hp-mega__links a:focus-visible {
	translate: -3px 0;
}

/* ---- the highlight cell ----
 * Optional, set per menu item in the menu editor. It takes one of the panel's
 * columns rather than adding a further one, so the row never overflows.
 */

.hp-mega__promo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--hp-space-2);
	padding: var(--hp-space-6);
	border-radius: var(--hp-radius-lg);
	/* The club wash and its gold rule: the highlight is where the shop puts its
	 * offer, and the offer on this shop is the club. */
	background: var(--hp-club-tint);
	border: 1px solid color-mix(in srgb, var(--hp-club) 28%, transparent);
}

/**
 * The cell with a picture in it.
 *
 * It stops being a tinted box and becomes a card: the image fills the top, the
 * words sit under it, and the padding moves off the cell and onto the text so
 * the picture can reach the card's own edges. The club wash stays as the ground
 * behind the words, which is what still ties it to the offer.
 */
.hp-mega__promo--visual {
	padding: 0;
	overflow: hidden;
	justify-content: flex-start;
	gap: 0;
}

.hp-mega__promo-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--hp-surface-subtle);
	overflow: hidden;
}

.hp-mega__promo-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration-slow) var(--hp-ease-out);
}

.hp-mega__promo--visual:hover .hp-mega__promo-media img {
	transform: scale(1.04);
}

/* Everything below the picture takes the padding the cell gave up. */
.hp-mega__promo--visual > :not(.hp-mega__promo-media) {
	margin-inline: var(--hp-space-5);
}

.hp-mega__promo--visual > :not(.hp-mega__promo-media):first-of-type {
	margin-block-start: var(--hp-space-4);
}

.hp-mega__promo--visual > :last-child {
	margin-block-end: var(--hp-space-5);
}

/* A little smaller here: inside a card the heading shares the cell with a
 * photograph and should not shout over it. */
.hp-mega__promo--visual .hp-mega__promo-title {
	font-size: var(--hp-text-md);
}

.hp-mega__promo-title {
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-h3);
	font-weight: 700;
	line-height: 1.2;
	color: var(--hp-text);
}

.hp-mega__promo-text {
	margin: 0;
	font-size: var(--hp-text-sm);
	line-height: 1.5;
	color: var(--hp-text-muted);
}

.hp-mega__promo-link {
	margin-block-start: var(--hp-space-1);
	font-size: var(--hp-text-sm);
	font-weight: 700;
	color: var(--hp-link);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-mega__promo-link:hover {
	text-decoration-color: currentColor;
}

/* ---- search panel (small screens) ---- */

.hp-search-panel {
	position: absolute;
	inset-inline: 0;
	z-index: var(--hp-z-overlay);
	background: var(--hp-surface);
	border-block-end: 1px solid var(--hp-border);
	box-shadow: var(--hp-shadow-md);
}

.hp-search-panel__inner {
	display: flex;
	align-items: center;
	gap: var(--hp-space-4);
	padding-block: var(--hp-space-4);
}

.hp-search--panel {
	max-width: none;
}

/* ---- skip link ---- */

.hp-skip-link:focus {
	position: fixed;
	inset-block-start: var(--hp-space-2);
	inset-inline-start: var(--hp-space-2);
	z-index: var(--hp-z-toast);
	padding: var(--hp-space-3) var(--hp-space-4);
	background: var(--hp-surface);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow-md);
}

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

.hp-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--hp-z-modal);
}

.hp-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(13 13 13 / 0.45);
}

.hp-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(22rem, 88vw);
	background: var(--hp-surface);
	overflow-y: auto;
}

.hp-drawer__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-4);
	padding: var(--hp-space-4);
	border-block-end: 1px solid var(--hp-border);
}

.hp-drawer__title {
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-h3);
	font-weight: 700;
}

.hp-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-drawer__item {
	border-block-end: 1px solid var(--hp-border);
}

.hp-drawer__toggle,
.hp-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-3);
	width: 100%;
	padding: var(--hp-space-4);
	background: none;
	border: none;
	color: var(--hp-text);
	font-family: inherit;
	font-size: var(--hp-text-base);
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.hp-drawer__item--club > * {
	color: var(--hp-club);
}

.hp-drawer__submenu {
	margin: 0;
	padding: 0 var(--hp-space-4) var(--hp-space-4);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
}

.hp-drawer__submenu a {
	color: var(--hp-text-muted);
	font-size: 0.9375rem;
}

.hp-drawer__submenu-deep {
	padding-inline-start: var(--hp-space-4);
}

/* ---- responsive ----
 * Below the breakpoint the row keeps only the burger, the brand and the
 * actions; the nav moves into the drawer and the search into its panel.
 */

/**
 * Where the inline nav gives way to the burger.
 *
 * 85rem, raised from 64rem, and the number is measured rather than chosen. This
 * shop's menu has ten top-level items, which is 884px of nav that cannot shrink;
 * with the logo at 176, the action icons at 108, three 32px gaps and the
 * container's 64px of gutter, the row needs about 1352px before a search field
 * is even considered. At the old 64rem the nav was shown from 1025px up, and at
 * 1100 the cart, wishlist and account icons rendered at x = -94 — off the left
 * of the screen, on an ordinary laptop.
 *
 * So between 1025 and 1360 the burger is the honest answer: ten Hebrew category
 * names do not fit, and a drawer shows all ten at a readable size instead of
 * pushing three controls off the page.
 */
@media (max-width: 85rem) {
	.hp-header__row {
		gap: var(--hp-space-4);
	}

	/* The burger only. With the nav gone there is room for the field itself, so
	 * showing the toggle as well would put two ways to search in one row. */
	.hp-header__burger {
		display: inline-flex;
	}

	.hp-nav {
		display: none;
	}

	.hp-header__brand {
		margin-inline-end: auto;
	}

	.hp-mega {
		display: none;
	}
}

@media (min-width: 85.0625rem) {
	.hp-drawer {
		display: none;
	}
}

/**
 * The laptop band: the full menu, and search behind its icon.
 *
 * Between the burger breakpoint and roughly 1456px the header row cannot hold
 * everything. Measured across five widths with the real markup: the nav is
 * `flex: none` at 884px for this shop's ten top-level items, and the search slot
 * is the only flexible thing in the row — so as the viewport narrows the field
 * is squeezed to 56px at 1280 and to zero at 1100, at which point the cart,
 * wishlist and account icons were pushed to x = -92. Off the screen. On a
 * laptop.
 *
 * Adding up what the row actually needs — logo 176, nav 884, a usable field
 * 240, actions 108, three 32px gaps and the container's 64px of gutter — the
 * inline arrangement needs about 1455px and there is no tuning that changes
 * that. Something has to go.
 *
 * The field goes, not the menu. A shopper on a laptop is far likelier to browse
 * the ten categories than to type, the search is one click away behind the icon
 * the header already carries, and that icon opens the same full-width panel the
 * phone header uses — so this costs a click and no capability. Above 91rem the
 * field comes back inline.
 */
@media (min-width: 85.0625rem) and (max-width: 91rem) {
	.hp-header__row > .hp-search-slot {
		display: none;
	}

	.hp-header__search-toggle {
		display: inline-flex;
	}

	/* With the field gone the nav would drift into the middle of the row; the
	 * brand keeps its edge and the nav closes up against the actions. */
	.hp-header__brand {
		margin-inline-end: auto;
	}
}

/* ---- the search slot ----
 * Holds either FiboSearch's own search bar or the theme's fallback form. The
 * plugin's markup is styled to the canvas pill here rather than reproduced, so
 * its suggestion behaviour is untouched.
 */

.hp-search-slot {
	flex: 1;
	max-width: 21.25rem; /* 340px */
	margin-inline-start: auto;
	min-width: 0;
}

.hp-search-slot .hp-search {
	max-width: none;
	margin-inline-start: 0;
}

.hp-search-slot .dgwt-wcas-search-wrapp {
	width: 100%;
	max-width: none;
}

.hp-search-slot .dgwt-wcas-search-form {
	margin: 0;
}

.hp-search-slot .dgwt-wcas-sf-wrapp {
	display: flex;
	align-items: center;
	gap: var(--hp-space-3);
	height: 2.75rem; /* 44px */
	padding-inline: var(--hp-space-4);
	background: var(--hp-surface-subtle);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
}

.hp-search-slot .dgwt-wcas-sf-wrapp:focus-within {
	border-color: var(--hp-border-strong);
}

/**
 * The selector is this long on purpose.
 *
 * FiboSearch's "pirx" skin styles the field as
 * `.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input`
 * — four classes and an attribute — with `height: auto` and 13px of vertical
 * padding. A two-class rule loses to it, which left a 54px field inside the
 * 44px pill and pushed the magnifier out of the bottom of the header. Matching
 * the plugin's shape and adding `.hp-search-slot` wins by one class, with no
 * `!important` anywhere.
 */
.hp-search-slot .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	flex: 1;
	width: auto;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	color: var(--hp-text);
	font-family: var(--hp-font-ui);
	font-size: 0.9375rem;
	line-height: 1;
}

.hp-search-slot .dgwt-wcas-search-input:focus {
	outline: none;
	box-shadow: none;
}

/**
 * The submit control.
 *
 * FiboSearch's pirx skin positions it absolutely at `left: 23px; top: 21px`
 * inside a field it assumes is ~66px tall, and moves it to the other end once
 * the field has text. Dropped into the theme's 44px pill those coordinates put
 * the magnifier below the pill entirely — which is what was hanging out of the
 * bottom of the header.
 *
 * The selector matches the plugin's own shape exactly —
 * `.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit`
 * is (0,3,1), and so is this — so the theme wins on load order alone, with no
 * `!important` and no specificity arms race.
 *
 * The button then joins the flex row and leads it, which is where the theme's
 * own search form draws its magnifier. `pointer-events` is restored because the
 * skin disables the button until the field has text; here it is a real submit
 * at all times.
 */
.hp-search-slot .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	position: static;
	order: -1;
	flex: none;
	inset: auto;
	width: 1.125rem;
	min-width: 0;
	height: 1.125rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--hp-text-muted);
	pointer-events: auto;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-search-slot .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
	background: none;
	color: var(--hp-link);
}

/* The skin positions the glyph absolutely inside a button it has also
 * positioned absolutely, so moving the button alone left the magnifier behind
 * at the skin's coordinates — floating in the middle of the placeholder text.
 * The glyph travels with its button. */
.hp-search-slot .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
	position: static;
	inset: auto;
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

/* The skin draws a small arrow beside the button with a border triangle. It
 * belongs to a submit that reads as a coloured block; here it is a bare
 * magnifier, and the arrow is a stray mark. */
.hp-search-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
	content: none;
}

/* The preloader keeps the plugin's own positioning: it is an overlay on the
 * field, and forcing it into the row gave it 40px of width it does not need
 * while idle. */

.hp-search-panel__inner .hp-search-slot {
	max-width: none;
}

/* Below this the row is too narrow for a field as well as the three action
 * icons, so search moves behind its own icon — the same panel the laptop band
 * uses. */
@media (max-width: 64rem) {
	.hp-header__row > .hp-search-slot {
		display: none;
	}

	.hp-header__search-toggle {
		display: inline-flex;
	}
}

/* ---- side cart ----
 * Cart.dc.html, "Side Cart — נפתח אוטומטית אחרי הוספה לסל".
 *
 * These rules were lost when this file was rewritten from the artboard: the
 * markup kept emitting .hp-cart-drawer while nothing styled it, so the panel sat
 * in normal flow and pushed the page down instead of sliding in from the edge.
 *
 * The panel's body is WooCommerce's own woocommerce_mini_cart(), so the
 * selectors below name core's mini-cart markup as well as the theme's frame.
 */

.hp-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--hp-z-modal);
}

/* Both overlays start below the admin bar for the same reason the header does —
 * see the note beside `.hp-header`. Without this the cart drawer's title and
 * its close button sit underneath the bar and cannot be clicked. */
body.admin-bar .hp-drawer,
body.admin-bar .hp-cart-drawer {
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hp-drawer,
	body.admin-bar .hp-cart-drawer {
		inset-block-start: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .hp-drawer,
	body.admin-bar .hp-cart-drawer {
		inset-block-start: 0;
	}
}

.hp-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(13 13 13 / 0.45);
}

.hp-cart-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	/* Wider than it was. At 25rem the product name — which on this shop runs to
	 * fifteen Hebrew words — wrapped to four lines beside a 56px thumbnail and
	 * the whole panel read as cramped. */
	width: min(28rem, 94vw);
	background: var(--hp-surface);
	/* Rounded on the leading edge only: the trailing edge is against the screen
	 * and a radius there would show a sliver of the page behind it. */
	border-start-start-radius: var(--hp-radius-lg);
	border-end-start-radius: var(--hp-radius-lg);
	box-shadow: -1rem 0 2.5rem rgb(17 17 17 / 0.12);
	overflow: hidden;
}

.hp-cart-drawer__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-4);
	flex: none;
	padding: var(--hp-space-5) var(--hp-space-6);
	border-block-end: 1px solid var(--hp-border);
}

.hp-cart-drawer__title {
	margin: 0;
	/* Down one step from h3. It is a drawer label, not a page heading, and at
	 * 22px it was competing with the product names under it. */
	font-size: var(--hp-text-lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* The scrolling body. */
.hp-cart-drawer__contents {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	/* `overflow-x: hidden` rather than visible: a long unbroken price or SKU
	 * inside core's markup must not be able to push the panel sideways. */
	overflow-x: hidden;
	padding: var(--hp-space-6);
}

/* ---- core's mini cart inside the panel ---- */

.hp-cart-drawer .woocommerce-mini-cart,
.hp-cart-drawer ul.cart_list {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * The row.
 *
 * Core's markup is not three siblings but two anchors and a span:
 *
 *   <li> <a class="remove">×</a> <a><img>Product name</a> <span class="quantity">
 *
 * The thumbnail is INSIDE the product link. An earlier version here placed the
 * image with `grid-column` / `grid-row`, which did nothing at all — it is not a
 * grid item, it is the anchor's own child — so the name wrapped underneath the
 * thumbnail instead of sitting beside it.
 *
 * So the layout is two grids. The row splits into content and the remove
 * control; the product link then splits into thumbnail and name.
 */
.hp-cart-drawer ul.cart_list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	align-items: start;
	column-gap: var(--hp-space-3);
	row-gap: var(--hp-space-2);
	margin: 0;
	padding: 0 0 var(--hp-space-5);
	border-block-end: 1px solid var(--hp-border);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.hp-cart-drawer ul.cart_list li:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.hp-cart-drawer ul.cart_list li > a:not(.remove) {
	grid-column: 1;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--hp-space-4);
	min-width: 0;
	color: var(--hp-text);
	font-weight: 600;
	line-height: 1.35;
	/* The names on this shop are long enough to contain no break opportunity
	 * for whole clauses; without this one runs out of the panel. */
	overflow-wrap: anywhere;
	text-decoration: none;
}

.hp-cart-drawer ul.cart_list li > a:not(.remove):hover {
	color: var(--hp-link);
}

.hp-cart-drawer ul.cart_list li img {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	object-fit: cover;
	border-radius: var(--hp-radius-lg);
	background: var(--hp-surface-subtle);
	/* Core floats it; inside a grid cell the float is inert, but it is cleared
	 * here so a stylesheet loading after this one cannot resurrect it. */
	float: none;
}

.hp-cart-drawer ul.cart_list li a.remove {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: none;
	color: var(--hp-text-muted);
	font-size: 1.125rem;
	line-height: 1;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-cart-drawer ul.cart_list li a.remove:hover {
	background: none;
	color: var(--hp-sale);
}

/* The price line and the club price sit under the NAME, not under the
 * thumbnail — so they are indented past it by the thumbnail's width plus the
 * gap that separates it from the name. */
.hp-cart-drawer ul.cart_list li .quantity,
.hp-cart-drawer .hairport-club-pricing {
	grid-column: 1;
	padding-inline-start: calc(3.5rem + var(--hp-space-3));
}

.hp-cart-drawer ul.cart_list li .quantity {
	height: auto;
	border: none;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	font-variant-numeric: tabular-nums;
}

/* ---- the foot: total and the two actions ---- */

.hp-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	/* Wraps rather than overflowing. The label and the amount are one line at
	 * any sane width, but a long currency string on a 320px screen has to be
	 * allowed to drop instead of running out of the panel. */
	flex-wrap: wrap;
	gap: var(--hp-space-2) var(--hp-space-4);
	margin: var(--hp-space-6) 0 0;
	padding-block-start: var(--hp-space-5);
	border-block-start: 1px solid var(--hp-border);
	font-size: var(--hp-text-lg);
	font-weight: 800;
}

.hp-cart-drawer .woocommerce-mini-cart__total strong {
	font-weight: 400;
	color: var(--hp-text-muted);
}

.hp-cart-drawer .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	margin: var(--hp-space-6) 0 0;
}

/* Core prints "View cart" first and "Checkout" second, both as .button. The
 * artboard leads with checkout, so the checkout button is promoted and the
 * view-cart link steps back to the secondary treatment. */
.hp-cart-drawer .woocommerce-mini-cart__buttons .button {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--hp-control-height);
	padding: 0;
	line-height: 1;
	background: transparent;
	border: 1px solid var(--hp-border-strong);
	color: var(--hp-text);
	border-radius: var(--hp-radius-pill);
	font-weight: 600;
}

.hp-cart-drawer .woocommerce-mini-cart__buttons .button:hover {
	background: transparent;
	border-color: var(--hp-text);
	color: var(--hp-text);
}

.hp-cart-drawer .woocommerce-mini-cart__buttons .checkout {
	order: 1;
	background: var(--hp-brand);
	border-color: transparent;
	color: var(--hp-text-inverse);
	font-weight: 700;
}

.hp-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--hp-brand-hover);
	border-color: transparent;
	color: var(--hp-text-inverse);
}

.hp-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding-block: var(--hp-space-10);
	text-align: center;
	color: var(--hp-text-muted);
}

/* ---- free-shipping progress ----
 * The artboard shows how much more is needed for free delivery, with a bar.
 * Rendered by inc/class-mini-cart.php from WooCommerce's own free-shipping
 * minimum, so it never invents a threshold.
 */

.hp-cart-progress {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	margin-block-end: var(--hp-space-5);
	padding: var(--hp-space-3) var(--hp-space-4);
	background: var(--hp-surface-warm);
	border-radius: var(--hp-radius);
	font-size: var(--hp-text-sm);
}

.hp-cart-progress__bar {
	height: 0.375rem;
	border-radius: var(--hp-radius-pill);
	background: var(--hp-border);
	overflow: hidden;
}

.hp-cart-progress__fill {
	height: 100%;
	border-radius: inherit;
	background: var(--hp-accent);
	transition: width var(--hp-duration) var(--hp-ease);
}