/* =============================================================================
   Homes & Floors — Header optic v4
   Design source: Claude Design "Hochwertiger Cart und Checkout" / Header.dc.html
   =============================================================================

   NAMESPACE: .hfx-h
   -----------------
   Everything here is scoped to .hfx-h and uses NEW element class names
   (.hfx-h__util, .hfx-h__bar, .hfx-h__navlink, .hfx-h__ico, .hfx-h__acct*,
   .hfx-h__cart*). That is not cosmetic — it is the whole point of the file.

   assets/hf-global.css carries a stale baked copy of the OLD header: ~400
   `.hfh-*` rules, dozens of them !important, including

       .hfh-shell, .hfh-shell * { letter-spacing: 0 !important }
       .hfh-navItem__link      { color:#0a1f3a!important; font-weight:700!important }
       .hfh-minicart__title    { color: var(--hfh-accent) !important }
       .hfh-shell .hfh-logo img{ max-height: calc(96px - 20px) !important }

   !important always beats specificity within the same origin, so those rules
   cannot be overridden — only side-stepped. Renaming the elements makes them
   stop matching, which is why this file needs ZERO !important of its own.

   JS/AJAX contracts that MUST survive are kept verbatim:
     • every id (#hfhShell, #hfhCartPanel, #hfhCartBadge, #hfhAcctBtn, …)
     • .hfh-navItem on the <li>      (mega-menu hover + positioning)
     • .hfh-mega-v4__*               (tab controller in header3.js)
     • .hfh-mc-*                     (rows rendered by the cart AJAX endpoint)
     • .hfh-mob*                     (mobile drawer — out of scope here)

   Load order: enqueued AFTER header3.css, which stays the structural base.
   ============================================================================= */

.hfx-h {
	/* ink */
	--hfx-ink:          #16305c;
	--hfx-ink-deep:     #0c2038;
	--hfx-muted:        #8b95a1;
	--hfx-muted-2:      #9aa5b0;
	--hfx-on-dark:      #e8eef4;

	/* green */
	--hfx-green:        #3aaa4c;
	--hfx-green-deep:   #2e7d3f;
	--hfx-green-press:  #2f9440;
	--hfx-green-light:  #8fe06a;
	--hfx-green-dot:    #3fe06b;

	/* bespoke oak */
	--hfx-gold:         #a8863d;
	--hfx-gold-hover:   #c4a253;

	/* surfaces + lines */
	--hfx-line:         #e8ebe8;
	--hfx-line-soft:    #eef2ef;
	--hfx-line-hair:    #efefef;
	--hfx-line-field:   #d7dde0;
	--hfx-hover:        #f2f5f2;
	--hfx-hover-green:  #f4faf5;
	--hfx-pill:         #eaf5ec;

	/* geometry — single source of truth, also read by the markup */
	--hfx-accent-h:     3px;
	--hfx-util-h:       42px;
	--hfx-bar-h:        72px;
	--hfx-shell-w:      1360px;
	--hfx-gutter:       28px;
	--hfx-logo-h:       46px;

	/* elevation */
	--hfx-shadow-menu:  0 24px 48px rgba(12, 32, 56, .14);
	--hfx-shadow-pop:   0 8px 16px rgba(12, 32, 56, .06), 0 28px 64px rgba(12, 32, 56, .18);
	--hfx-shadow-cart:  -24px 0 60px rgba(12, 32, 56, .25);
}

/* ---------------------------------------------------------------- shell ---- */

.hfx-h {
	position: sticky;
	top: 0;
	z-index: 9000;
	background: #fff;
	font-family: 'Poppins', system-ui, -apple-system, sans-serif;
	color: var(--hfx-ink);
}

/* NO admin-bar offset on purpose. On the FRONT END #wpadminbar is
   `position:absolute` above 782px — it scrolls away with the document, so a
   `top:32px` here would leave a 32px window that page content scrolls through.
   Below 782px the admin bar is fixed, but the shell is `position:static` there
   anyway (see the 768px block), so no offset is needed in either direction. */

.hfx-h *,
.hfx-h *::before,
.hfx-h *::after { box-sizing: border-box; }

/* the brand hairline: 3px gradient closing the header off at the very top */
.hfx-h__accent {
	height: var(--hfx-accent-h);
	background: linear-gradient(90deg, var(--hfx-green), var(--hfx-green-light));
}

/* ---------------------------------------------------------- utility bar ---- */

.hfx-h__util {
	background: var(--hfx-ink-deep);
	color: #fff;
}

.hfx-h__util-inner {
	max-width: var(--hfx-shell-w);
	margin: 0 auto;
	padding: 0 var(--hfx-gutter);
	height: var(--hfx-util-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.hfx-h__util-notes,
.hfx-h__util-ctas {
	display: flex;
	align-items: center;
	gap: 32px;
	min-width: 0;
}

.hfx-h__note,
.hfx-h__util-link,
.hfx-h__util-trade {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}

.hfx-h__note,
.hfx-h__util-link { color: var(--hfx-on-dark); }
.hfx-h__util-trade { color: var(--hfx-green-dot); }

.hfx-h__util-link:hover { color: var(--hfx-green-dot); text-decoration: none; }
.hfx-h__util-trade:hover { color: var(--hfx-green-light); text-decoration: none; }

.hfx-h__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hfx-green-dot);
}

.hfx-h__util-sep {
	flex: none;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .18);
}

/* the phone number reads as data, not as label — same size, lighter tracking */
.hfx-h__tel {
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- main bar ---- */

/* both bars sit above the scrim so the header stays lit while a drawer is open */
.hfx-h__util { position: relative; z-index: 50; }

.hfx-h__bar {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--hfx-line);
}

/* three columns, not flex: the side columns are width-capped and equal, so the
   nav sits optically centred no matter how wide the logo or the icon group
   grow. A flex row with margin-left:auto drifts the moment either side changes. */
.hfx-h__bar-inner {
	max-width: var(--hfx-shell-w);
	margin: 0 auto;
	padding: 0 var(--hfx-gutter);
	height: var(--hfx-bar-h);
	display: grid;
	grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(120px, 200px);
	align-items: center;
	gap: 16px;
}

.hfx-h__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.hfx-h__logo img {
	height: var(--hfx-logo-h);
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
}

/* ------------------------------------------------------------------ nav ---- */

.hfx-h__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.hfx-h__nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* .hfh-navItem is kept on the <li> — the mega menu's hover trigger and its
   absolute positioning both hang off it in header3.css. */
.hfx-h .hfh-navItem {
	position: static;
	display: flex;
}

.hfx-h__navlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 26px 2px;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hfx-ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease;
}

.hfx-h__navlink:hover,
.hfx-h .hfh-navItem:hover > .hfx-h__navlink {
	color: var(--hfx-green-deep);
	text-decoration: none;
}

.hfx-h__navlink svg {
	width: 9px;
	height: 9px;
	fill: none;
	stroke: var(--hfx-green);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

/* the shared chevron glyph points right; rotate it down at rest, up when open */
.hfx-h__navlink svg { transform: rotate(90deg); }
.hfx-h .hfh-navItem:hover > .hfx-h__navlink svg,
.hfx-h .hfh-navItem.hfh-open > .hfx-h__navlink svg { transform: rotate(270deg); }

/* Bespoke Oak is the one commercial outlier — gold, not navy */
.hfx-h__navlink--bespoke { color: var(--hfx-gold); }
.hfx-h__navlink--bespoke:hover,
.hfx-h .hfh-navItem:hover > .hfx-h__navlink--bespoke { color: var(--hfx-gold-hover); }

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

.hfx-h__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.hfx-h__ico {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hfx-ink);
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background .16s ease;
}

.hfx-h__ico:hover,
.hfx-h__ico[aria-expanded="true"],
.hfx-h__ico.is-active { background: var(--hfx-hover); }

.hfx-h__ico svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hfx-h__ico-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* pinned to the circle's top-right and nudged out by a third of itself, so it
   reads as attached to the button rather than floating beside it */
.hfx-h__badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(34%, -34%);
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--hfx-green);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px #fff;
}

/* ------------------------------------------------------ account popover ---- */

.hfx-h__acct {
	position: relative;
	display: inline-flex;
}

.hfx-h__acct-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 40;
	width: 300px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border: 1px solid #e6ebe7;
	border-radius: 14px;
	box-shadow: var(--hfx-shadow-pop);
	overflow: hidden;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.hfx-h__acct.is-open .hfx-h__acct-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.hfx-h__acct-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 20px 16px;
	background: linear-gradient(180deg, #f7faf7, #fff);
	border-bottom: 1px solid var(--hfx-line-soft);
}

.hfx-h__acct-head--anon { flex-direction: column; align-items: flex-start; gap: 5px; }

.hfx-h__acct-avatar {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(140deg, #16305c, #0c2038);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}

/* the green pip reads "signed in" without spending a line of copy on it */
.hfx-h__acct-avatar::after {
	content: "";
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--hfx-green);
	box-shadow: 0 0 0 2px #fff;
}

.hfx-h__acct-id { min-width: 0; }

.hfx-h__acct-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hfx-ink);
}

.hfx-h__acct-sub {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--hfx-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hfx-h__acct-head--anon .hfx-h__acct-sub { white-space: normal; }

.hfx-h__acct-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hfx-green-deep);
}

.hfx-h__acct-links { display: flex; flex-direction: column; padding: 10px; }

.hfx-h__acct-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hfx-ink);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.hfx-h__acct-link:hover {
	background: var(--hfx-hover-green);
	color: var(--hfx-green-deep);
	text-decoration: none;
}

.hfx-h__acct-link svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #7d8ba1;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .15s ease;
}

.hfx-h__acct-link:hover svg { stroke: var(--hfx-green-deep); }

.hfx-h__acct-count {
	margin-left: auto;
	background: var(--hfx-pill);
	color: var(--hfx-green-deep);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
}

.hfx-h__acct-ctas { display: flex; flex-direction: column; gap: 9px; padding: 14px 20px 4px; }

.hfx-h__acct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.hfx-h__acct-btn--primary { background: var(--hfx-green); color: #fff; }
.hfx-h__acct-btn--primary:hover { background: var(--hfx-green-press); color: #fff; text-decoration: none; }

.hfx-h__acct-btn--ghost { background: #fff; color: var(--hfx-ink); border: 1.5px solid var(--hfx-ink); }
.hfx-h__acct-btn--ghost:hover { background: var(--hfx-ink); color: #fff; text-decoration: none; }

.hfx-h__acct-perks { list-style: none; margin: 0; padding: 14px 20px 4px; display: flex; flex-direction: column; gap: 8px; }

.hfx-h__acct-perks li {
	position: relative;
	padding-left: 20px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--hfx-muted);
}

.hfx-h__acct-perks li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hfx-green);
}

.hfx-h__acct-foot {
	padding: 10px;
	margin-top: 10px;
	border-top: 1px solid var(--hfx-line-soft);
	background: #fbfcfb;
}

.hfx-h__acct-signout,
.hfx-h__acct-help {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hfx-muted);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.hfx-h__acct-signout svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hfx-h__acct-signout:hover { background: #fdecea; color: #b03a34; text-decoration: none; }
.hfx-h__acct-help:hover { background: var(--hfx-hover-green); color: var(--hfx-green-deep); text-decoration: none; }

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

.hfx-h__cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	width: 420px;
	max-width: 92vw;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: var(--hfx-shadow-cart);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .28s;
}

.hfx-h__cart.is-open {
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

.hfx-h__cart-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--hfx-line-hair);
}

.hfx-h__cart-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--hfx-ink);
}

.hfx-h__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 4px;
	background: var(--hfx-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hfx-h__cart-close {
	margin-left: auto;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--hfx-line);
	border-radius: 4px;
	background: #fff;
	color: var(--hfx-ink);
	cursor: pointer;
	transition: background .15s ease;
}

.hfx-h__cart-close:hover { background: var(--hfx-hover); }

.hfx-h__cart-close svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.hfx-h__cart-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 22px;
}

.hfx-h__cart-foot {
	border-top: 1px solid var(--hfx-line-hair);
	padding: 16px 22px calc(18px + env(safe-area-inset-bottom, 0px));
	background: #fff;
}

.hfx-h__cart-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.hfx-h__cart-total-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b7883;
}

.hfx-h__cart-total-n {
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.hfx-h__cart-total-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--hfx-ink);
	font-variant-numeric: tabular-nums;
}

.hfx-h__cart-note {
	margin-top: 2px;
	font-size: 12px;
	color: var(--hfx-muted);
}

.hfx-h__cart-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-top: 14px;
}

.hfx-h__cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 10px;
	border-radius: 4px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.hfx-h__cart-btn--ghost {
	background: #fff;
	border: 1.5px solid var(--hfx-ink);
	color: var(--hfx-ink);
	font-weight: 600;
}

.hfx-h__cart-btn--ghost:hover { background: var(--hfx-ink); color: #fff; text-decoration: none; }

.hfx-h__cart-btn--primary {
	background: var(--hfx-green);
	border: 0;
	color: #fff;
	font-weight: 700;
}

.hfx-h__cart-btn--primary:hover { background: var(--hfx-green-press); color: #fff; text-decoration: none; }

.hfx-h__cart-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hfx-muted);
}

.hfx-h__cart-secure svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--hfx-green);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* sample cap meter + free-shipping bar keep their existing structure, retinted */
.hfx-h__cart-samples {
	padding: 12px 22px 13px;
	border-bottom: 1px solid var(--hfx-line-hair);
	background: var(--hfx-hover-green);
}

.hfx-h__cart-samples-row { display: flex; align-items: center; justify-content: space-between; }

.hfx-h__cart-samples-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hfx-green-deep);
}

.hfx-h__cart-samples-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--hfx-ink);
	font-variant-numeric: tabular-nums;
}

.hfx-h__cart-samples-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(18, 43, 76, .1);
	margin-top: 8px;
	overflow: hidden;
}

.hfx-h__cart-samples-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--hfx-green);
	transition: width .25s ease;
}

.hfx-h__cart-samples.is-max .hfx-h__cart-samples-fill { background: #de911d; }

.hfx-h__cart-samples-note {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--hfx-muted);
}

.hfx-h__cart-samples.is-max .hfx-h__cart-samples-note { color: #9a6700; }

/* sample-box offer line — filled by header3.js from window.HF_SAMPLE_BOX */
.hfx-h__cart-samples-box {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(58, 170, 76, .28);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hfx-green-deep);
}

.hfx-h__cart-samples-box[hidden] { display: none; }

/* the AJAX-rendered rows keep their .hfh-mc-* contract; only the frame moves */
.hfx-h__cart .hfh-mc-item { border-bottom-color: #f2f2f2; }

/* empty state — also lives in #hfhCartEmptyTpl, which the controller clones */
.hfx-h__cart-empty { padding: 44px 4px 32px; text-align: center; }

.hfx-h__cart-empty-icon {
	width: 40px;
	height: 40px;
	fill: none;
	stroke: #c7d0d8;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hfx-h__cart-empty h3 {
	margin: 14px 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hfx-ink);
}

.hfx-h__cart-empty p {
	margin: 0 auto 20px;
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hfx-muted);
}

.hfx-h__cart-empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 4px;
	background: var(--hfx-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease;
}

.hfx-h__cart-empty-cta:hover { background: var(--hfx-green-press); color: #fff; text-decoration: none; }

.hfx-h__cart-empty-quick { margin-top: 30px; text-align: left; }

.hfx-h__cart-empty-label {
	display: block;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hfx-muted-2);
}

.hfx-h__cart-empty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.hfx-h__cart-empty-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--hfx-line);
	border-radius: 8px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hfx-ink);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hfx-h__cart-empty-tile:hover {
	background: var(--hfx-hover-green);
	border-color: rgba(58, 170, 76, .35);
	color: var(--hfx-green-deep);
	text-decoration: none;
}

/* error state — markup is built in header3.js */
.hfx-h__cart-err { padding: 42px 18px; text-align: center; }

.hfx-h__cart-err p {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--hfx-muted);
}

.hfx-h__cart-err-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 4px;
	background: var(--hfx-green);
	color: #fff;
	font: 700 12px/1 'Poppins', system-ui, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease;
}

.hfx-h__cart-err-btn:hover { background: var(--hfx-green-press); }

/* -------------------------------------------------------------- scrims ----- */

/* one scrim serves the mobile drawer and the basket — the controller toggles
   `is-active` on #hfhOverlay for both, so the class name is its contract */
.hfx-h__scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(12, 32, 56, .4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility 0s linear .18s;
}

.hfx-h__scrim.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ----------------------------------------------------------- mega menu ----- */
/*
 * Rebuilt, not repainted. The old panel was a dark navy tile board
 * (`.hfh-mega-v4__*`, ~70 rules in header3.css, 11 of them !important on
 * colour and text-decoration). Renaming to `hfx-h__mega*` retires that block
 * wholesale instead of overriding it property by property — the controller
 * follows via six selectors in header3.js, the data layer is untouched.
 *
 * The tab behaviour stays: hovering a category swaps the tone panel and the
 * featured card. The design mock shows one frame of exactly that.
 */

.hfx-h__mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9600;
	background: #fff;
	border-bottom: 1px solid var(--hfx-line);
	box-shadow: var(--hfx-shadow-menu);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* a hairline bridge so the pointer can cross from the trigger into the panel */
.hfx-h__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

.hfh-navItem--shop.hfh-open .hfx-h__mega,
.hfh-navItem--shop:focus-within .hfx-h__mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/*
 * Closed means closed — for EVERY descendant, not just links. `visibility` and
 * `pointer-events` pierce a hidden ancestor the moment a child re-enables
 * them, and the old menu shipped exactly that bug twice: an invisible
 * full-size category link floated over the page and swallowed clicks (on
 * product pages it sat over the buy box). Carried over deliberately.
 */
.hfh-navItem--shop:not(.hfh-open):not(:focus-within) .hfx-h__mega,
.hfh-navItem--shop:not(.hfh-open):not(:focus-within) .hfx-h__mega * {
	visibility: hidden;
	pointer-events: none;
}

.hfx-h__mega__inner {
	max-width: var(--hfx-shell-w);
	min-height: 340px;
	margin: 0 auto;
	padding: 28px var(--hfx-gutter) 32px;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 300px;
	gap: 40px;
}

.hfx-h__mega__eyebrow {
	margin: 0 0 12px;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hfx-green-deep);
}

/* the eyebrow only indents with the list rows it labels */
.hfx-h__mega__routes > .hfx-h__mega__eyebrow,
.hfx-h__mega__featured > .hfx-h__mega__eyebrow { padding: 0; }

/* ---- column 1: by type ---- */

.hfx-h__mega__categories { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hfx-h__mega__category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hfx-ink);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.hfx-h__mega__category:hover,
.hfx-h__mega__category.is-active {
	background: var(--hfx-hover-green);
	color: var(--hfx-green-deep);
	text-decoration: none;
}

/* the design lists names, not photographs — the imagery lives in the featured
   card, where one big picture does more than seven thumbnails */
.hfx-h__mega__category-image,
.hfx-h__mega__category-shade { display: none; }

.hfx-h__mega__category strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: inherit;
	color: inherit;
}

.hfx-h__mega__category-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 12px;
	font-weight: 500;
	color: var(--hfx-muted-2);
}

/* ---- column 2: by tone ---- */

/*
 * The tab panels stack in ONE grid cell rather than being absolutely
 * positioned. Absolute panels contribute no height, so the column collapsed to
 * its min-height and a category with nine tones simply spilled out of the
 * bottom of the menu. Stacked in a grid, the column measures the tallest panel
 * and every tab gets the room it actually needs.
 */
.hfx-h__mega__routes {
	display: grid;
	grid-template-areas: "stack";
	min-width: 0;
	min-height: 300px;
}

.hfx-h__mega__panel {
	grid-area: stack;
	display: flex;
	flex-direction: column;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, visibility 0s linear .14s;
}

.hfx-h__mega__panel.is-active { opacity: 1; transition-delay: 0s; }

.hfh-navItem--shop.hfh-open .hfx-h__mega__panel.is-active,
.hfh-navItem--shop:focus-within .hfx-h__mega__panel.is-active {
	visibility: visible;
	pointer-events: auto;
}

.hfx-h__mega__swatches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-content: start;
}

.hfx-h__mega__swatch { display: block; min-width: 0; text-decoration: none; }

.hfx-h__mega__swatch-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	background: #edf0f2 center / cover no-repeat;
	transition: transform .18s ease, box-shadow .18s ease;
}

.hfx-h__mega__swatch:hover .hfx-h__mega__swatch-image {
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -14px rgba(12, 32, 56, .55);
}

.hfx-h__mega__swatch > span:last-child {
	display: block;
	margin-top: 8px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--hfx-ink);
}

.hfx-h__mega__swatch:hover > span:last-child { color: var(--hfx-green-deep); }

.hfx-h__mega__empty {
	grid-column: 1 / -1;
	padding: 24px 0;
	font-size: 13.5px;
	color: var(--hfx-muted);
	text-decoration: none;
}

.hfx-h__mega__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hfx-green-deep);
	text-decoration: none;
}

.hfx-h__mega__all span { transition: transform .16s ease; }
.hfx-h__mega__all:hover { text-decoration: none; }
.hfx-h__mega__all:hover span { transform: translateX(3px); }

/* ---- column 3: featured ---- */

.hfx-h__mega__featured { position: relative; min-width: 0; min-height: 300px; }

.hfx-h__mega__spot {
	position: absolute;
	left: 0;
	right: 0;
	top: 30px;
	bottom: 0;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: #122b4c center / cover no-repeat;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, visibility 0s linear .14s;
}

.hfx-h__mega__spot.is-active { opacity: 1; transition-delay: 0s; }

.hfh-navItem--shop.hfh-open .hfx-h__mega__spot.is-active,
.hfh-navItem--shop:focus-within .hfx-h__mega__spot.is-active {
	visibility: visible;
	pointer-events: auto;
}

.hfx-h__mega__spot-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent, rgba(12, 32, 56, .78) 32%);
}

.hfx-h__mega__spot-copy { position: absolute; left: 18px; right: 18px; bottom: 18px; }

.hfx-h__mega__spot-count {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hfx-green-light);
}

.hfx-h__mega__spot-copy > strong {
	display: block;
	margin-top: 2px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.hfx-h__mega__spot-cta {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 16px;
	border-radius: 6px;
	background: #fff;
	color: var(--hfx-ink);
	font-size: 12px;
	font-weight: 600;
	transition: color .16s ease;
}

.hfx-h__mega__spot:hover .hfx-h__mega__spot-cta { color: var(--hfx-green-deep); }

@media (max-width: 1280px) {
	.hfx-h__mega__inner { grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 28px; }
	.hfx-h__mega__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) { .hfx-h__mega { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.hfx-h__mega,
	.hfx-h__mega__panel,
	.hfx-h__mega__spot,
	.hfx-h__mega__category,
	.hfx-h__mega__swatch-image { transition: none; }
}

/* --------------------------------------------------- search panel (hfms) --- */
/*
 * The mega search lives in Header.php and prints its own <style> at wp_head
 * priority 100 — after every enqueued stylesheet — with 75 !important
 * declarations. Out-shouting that would mean 75 more !important here.
 *
 * It does not come to that, because hfms is fully tokenised: nearly every
 * colour is a `var(--hfms-*)` read. A custom property can be redefined from
 * anywhere the cascade lets us win, and the new value flows into every
 * consuming declaration — INCLUDING the !important ones, because !important
 * governs the declaration, not the value it resolves to.
 *
 * `html .hfms-root` (0,1,1) simply outranks the source's `.hfms-root` (0,1,0),
 * so the repaint is a token swap. Only the two green buttons hard-code their
 * colours, and neither carries !important, so a plain rule wins there too.
 */
html .hfms-root {
	--hfms-bg:           #fff;
	--hfms-bar:          #f7f9f8;   /* was #F2F2F2 — warmer, matches the header */
	--hfms-bar-focus:    #fff;
	--hfms-ink:          #16305c;   /* was #111 */
	--hfms-muted:        #8b95a1;   /* was #6b6b6b */
	--hfms-faint:        #9aa5b0;   /* was #9a9a9a */
	--hfms-accent:       #16305c;   /* was #0F1F3D */
	--hfms-accent-hover: #2e7d3f;   /* was #1A2D52 — hover goes green, as in the header */
	--hfms-line:         #e8ebe8;   /* was #E7E7E7 */
	--hfms-success:      #2e7d3f;
	--hfms-star:         #3aaa4c;   /* the "ready to order" dot */
	--hfms-radius:       8px;       /* was 6px */
}

/* The sheet drops the floating-card treatment and becomes a full-width panel
 * flush under the header, like the mega menu — one dropdown vocabulary instead
 * of two.
 *
 * Note what is NOT overridden: the source centres the sheet with
 * `left:50% + translateX(-50%)` and animates it in on the same transform.
 * Setting `width:100%` uses that machinery instead of fighting it — the panel
 * ends up exactly viewport-wide and the open/close animation stays intact.
 * Overriding left/right/transform instead would mean re-implementing the
 * transition on top of a rule that already carries it. */
html .hfms-root .hfms-sheet {
	width: 100%;
	max-width: none;
	border-radius: 0;
	border-bottom: 1px solid var(--hfx-line, #e8ebe8);
	box-shadow: var(--hfx-shadow-menu, 0 24px 48px rgba(12, 32, 56, .14));
}

/* The search bar row.
 * `align-items:center` matters: the close button's 42px box is locked with
 * !important in the source, so it cannot stretch to the row height. Centring
 * the row lets a 42px control sit correctly next to the 46px field instead of
 * hanging 4px high. */
html .hfms-root .hfms-bar-row {
	align-items: center;
	gap: 10px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 28px 0;
}

/* the results area shares the bar's measure and is separated by a hairline */
html .hfms-root .hfms-panel__inner {
	max-width: 1100px;
	padding: 22px 28px 28px;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 32px;
}

html .hfms-root .hfms-panel { border-top: 0; }
html .hfms-root .hfms-panel__sidebar { padding-right: 32px; }

html .hfms-root .hfms-panel__products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

html .hfms-root .hfms-card__img {
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	margin-bottom: 9px;
}

html .hfms-root .hfms-card__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--hfx-ink, #16305c);
}

html .hfms-root .hfms-card__options {
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--hfx-green-deep, #2e7d3f);
}

/* the field gains a real border — a bare grey fill reads as disabled */
html .hfms-root .hfms-form {
	height: 46px;
	padding: 0 8px 0 16px;
	border: 1.5px solid var(--hfx-line-field, #d7dde0);
	background: #f7f9f8;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

html .hfms-root .hfms-form:focus-within {
	border-color: var(--hfx-green-deep, #2e7d3f);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(58, 170, 76, .15);
}

html .hfms-root .hfms-form__icon { color: var(--hfx-muted-2, #9aa5b0); margin-right: 10px; }
html .hfms-root .hfms-form__input { font-size: 15px; }

/* both CTAs: flat green on white, not the old lime gradient on navy text */
html .hfms-root .hfms-bar__submit,
html .hfms-root .hfms-panel__viewall {
	background: var(--hfx-green, #3aaa4c);
	color: #fff;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

html .hfms-root .hfms-bar__submit { height: 46px; padding: 0 26px; font-size: 12px; }
html .hfms-root .hfms-panel__viewall { padding: 14px 20px; font-size: 12px; }

html .hfms-root .hfms-bar__submit:hover,
html .hfms-root .hfms-panel__viewall:hover {
	background: var(--hfx-green-press, #2f9440);
	color: #fff;
}

/* eyebrows pick up the header's uppercase rhythm */
html .hfms-root .hfms-panel__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--hfx-muted-2, #9aa5b0);
}

/* ------------------------------------------------------------ responsive --- */

/* display:none by default, not via a min-width query: a grid child that is
   `none` leaves the grid entirely, so the desktop bar has exactly the three
   children its three columns expect (logo | nav | actions). */
.hfx-h__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hfx-line);
	border-radius: 8px;
	background: #fff;
	color: var(--hfx-ink);
	cursor: pointer;
	transition: background .15s ease;
}

.hfx-h__burger:hover { background: var(--hfx-hover); }

.hfx-h__burger svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

@media (max-width: 1100px) {
	.hfx-h__nav { display: none; }
	.hfx-h__burger { display: inline-flex; justify-self: start; }

	/* below the nav breakpoint the bar becomes burger | logo | actions with the
	   logo optically centred — the side columns are matched, so it is geometric
	   rather than nudged */
	.hfx-h__bar-inner { grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); }
	.hfx-h__logo { justify-self: center; }
}

@media (max-width: 900px) {
	/* the phone is the one utility item worth the width on a narrow bar; the
	   trust notes and the trade link fold away before it does */
	.hfx-h__util-notes .hfx-h__note:nth-child(n+2),
	.hfx-h__util-sep { display: none; }
	.hfx-h__util-notes, .hfx-h__util-ctas { gap: 16px; }
	.hfx-h__util-inner { gap: 12px; }
}

@media (max-width: 768px) {
	.hfx-h {
		/* deliberate, carried over from the current header: the shell scrolls
		   away on phones because the bottom nav (hfbn) keeps Shop / Samples /
		   Search / Basket reachable. Remove this block to make it sticky. */
		position: static;
	}

	.hfx-h { --hfx-bar-h: 64px; --hfx-logo-h: 40px; --hfx-gutter: 14px; }
	.hfx-h__util-trade { display: none; }
	.hfx-h__note, .hfx-h__util-link { font-size: 10px; letter-spacing: .1em; }
	.hfx-h__util { --hfx-util-h: 38px; }
	.hfx-h__cart { width: 100vw; max-width: 100vw; }
}

@media (max-width: 480px) {
	.hfx-h { --hfx-bar-h: 60px; --hfx-logo-h: 36px; }
	.hfx-h__actions { gap: 0; }
	.hfx-h__ico { width: 34px; height: 34px; }
}

/* ------------------------------------------------- a11y + reduced motion --- */

.hfx-h__navlink:focus-visible,
.hfx-h__ico:focus-visible,
.hfx-h__util-link:focus-visible,
.hfx-h__util-trade:focus-visible,
.hfx-h__acct-link:focus-visible,
.hfx-h__acct-btn:focus-visible,
.hfx-h__cart-btn:focus-visible,
.hfx-h__cart-close:focus-visible,
.hfx-h__burger:focus-visible {
	outline: 2px solid var(--hfx-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hfx-h__acct-menu,
	.hfx-h__cart,
	.hfx-h__scrim,
	.hfx-h__navlink,
	.hfx-h__navlink svg,
	.hfx-h__ico,
	.hfx-h__cart-samples-fill {
		transition: none;
	}
}