/**
 * Husky Theme — visual system.
 *
 * theme.json owns the design tokens; this file composes them into the global
 * header, mega-menu, homepage sections, product cards and footer.
 *
 * RTL RULE: logical properties only (inline-start/inline-end, never left/right).
 * Farsi and Arabic are approved RTL languages (DD-25), so layout mirrors with no
 * separate rtl.css.
 *
 * COLOUR RULE (measured, not assumed): gold #B8935A on white is 2.85:1 and fails
 * both the 4.5:1 text and 3:1 non-text thresholds. Gold is only ever a SURFACE,
 * always paired with dark ink #1A1D23 (5.92:1). On navy it is used only for
 * large/bold text, where it measures 4.43:1 and passes the 3:1 large-text bar.
 */

/* ------------------------------------------------------------- Fonts --- *
 *
 * Two self-hosted variable families, latin subset, no third-party request.
 *
 * ARCHIVO (display) — the logo wordmark is a heavy grotesque with squared
 * bowls, flat terminals and tight apertures, printed with a distressed
 * texture. Archivo is the closest open-licence grotesque to those letterforms
 * and holds up at 700–800 without turning into a poster face. The texture is
 * deliberately NOT reproduced: distressed lettering is a logo effect, not a
 * reading typeface.
 *
 * INTER (body/UI) — chosen for small-size legibility and unambiguous figures,
 * which is what a catalogue of SKUs, voltages and model numbers needs.
 *
 * Weight budget: two files, 35KB + 48KB, one axis each. No italics, no static
 * weight files, no icon font.
 *
 * WHY THE FAMILIES ARE NAMESPACED. WooCommerce 9.4 ships its own @font-face
 * for a family literally called "Inter" (300–900, its own file), and it is
 * enqueued after the theme. A plain `font-family: Inter` therefore resolved to
 * WooCommerce's face, not this one — measured on the rendered page, where the
 * theme's Inter stayed `unloaded` and body text fell through to Segoe UI. The
 * families are prefixed so no plugin can shadow them, now or later. The
 * typefaces are unmodified Archivo and Inter; only the CSS family name is
 * scoped.
 */

@font-face {
	font-family: "Husky Archivo";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/archivo-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Husky Inter";
	font-style: normal;
	font-weight: 400 650;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--hk-navy: var(--wp--preset--color--primary, #253254);
	--hk-navy-d: #1b2540;
	--hk-navy-l: #33436d;
	--hk-gold: var(--wp--preset--color--accent, #b8935a);
	--hk-gold-d: #a8834b;
	--hk-gold-ink: #1a1d23;
	/*
	 * Brass as TEXT on navy, and only there.
	 *
	 * Measured: the brand gold #B8935A on navy is 4.425:1. That clears the 3:1
	 * large-text bar but not the 4.5:1 bar, and the labels that want brass on
	 * navy are 12px caps — which is not large text however bold it is. This is
	 * the same hue lifted until it measures 4.80:1, so a 12px eyebrow passes
	 * on its own terms rather than on an exemption it does not qualify for.
	 *
	 * The brand gold is untouched and remains the surface colour everywhere.
	 */
	--hk-gold-text: #be9a61;
	/*
	 * Brass as TEXT on a light surface.
	 *
	 * The brand gold on white is 2.85:1 and fails outright — which is why the
	 * standing rule is that gold is a surface, never text. Where a design
	 * genuinely calls for brass lettering on white (the section eyebrow, the
	 * Husky Select CTA), this is the same hue taken down until it measures
	 * 5.01:1 on white and 4.69:1 on the warm off-white. It still reads as
	 * brass; it just reads as brass a customer can actually see.
	 *
	 * The brand gold is untouched and remains the surface colour everywhere.
	 */
	--hk-gold-onlight: #8a6a32;
	--hk-base: var(--wp--preset--color--base, #fff);
	--hk-surface: var(--wp--preset--color--surface, #f6f7f9);
	--hk-ink: var(--wp--preset--color--ink, #1a1d23);
	--hk-muted: var(--wp--preset--color--ink-muted, #5a6270);
	--hk-border: var(--wp--preset--color--border, #d9dde3);

	/* Warm off-white. Used for the bands that sit between white sections so the
	   page has a beat without introducing a second brand colour. */
	--hk-warm: #faf7f2;
	--hk-warm-line: #e8ded0;

	--hk-r: 0.5rem;
	--hk-r-lg: 0.875rem;
	--hk-t: 160ms ease;
	--hk-shadow: 0 1px 2px rgb(37 50 84 / 6%), 0 4px 16px rgb(37 50 84 / 6%);
	--hk-lift: 0 2px 6px rgb(37 50 84 / 10%), 0 14px 30px rgb(37 50 84 / 10%);
	/*
	 * Container width system (Session 5G). Four tiers, one gutter scale.
	 * Before this, every section shared one 84rem (1344px) cap, which is why
	 * the site read narrow on large monitors: at 1920px that left 288px of
	 * dead margin on each side. Nothing here removes alignment discipline —
	 * every section still picks exactly one of these, never a one-off width.
	 *
	 *   --hk-container          standard / reading   — text, forms, legal
	 *   --hk-container-commerce commerce             — grids, PDP, shop
	 *   --hk-container-wide     wide editorial        — hero, campaign bands
	 *   (full bleed is just the absence of a container: 100vw background,
	 *   inner content still wrapped in one of the three above)
	 */
	--hk-container: 75rem;            /* 1200px */
	--hk-container-commerce: 85rem;   /* 1360px */
	--hk-container-wide: 95rem;       /* 1520px */

	/*
	 * PDP tier (Session 5W.1C §3). Added here rather than hard-coded on the
	 * section, per the rule stated below this block.
	 *
	 * The PDP is the one page whose composition is two fixed-purpose columns
	 * (a product stage and a decision panel) rather than a flexible grid, so
	 * it wants a genuinely different behaviour from --commerce: a tighter cap
	 * that still grows with the viewport, instead of one flat 1360px that
	 * makes the image stage oversized at 1440 and stops improving after it.
	 *
	 * Solved for the brief's own targets — usable content width (i.e. after
	 * this box's 2rem side padding) of ~1180px at 1440, growing to ~1230px by
	 * 1920, then stopping:
	 *   1440 (1vw=0.9rem): clamps to the 77.75rem floor -> 1244px -> 1180 usable
	 *   1600 (1vw=1.0rem): 68 + 10.8 = 78.8rem      -> 1261px -> 1197 usable
	 *   1920 (1vw=1.2rem): clamps to the 81rem ceil  -> 1296px -> 1232 usable
	 */
	--hk-container-pdp: clamp(77.75rem, 68rem + 10.8vw, 81rem);

	/* Type. Fallbacks are ordered so the swap-in shift is small: Archivo falls
	   back to the nearest wide grotesques, Inter to the platform UI face. */
	--hk-font-display: "Husky Archivo", "Helvetica Neue", "Arial Black", Arial, sans-serif;
	--hk-font-body: "Husky Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* One section-spacing scale for the whole page. Nothing sets its own. */
	--hk-space-section: 2.5rem;
	--hk-space-section-lg: 3.5rem;
}

/* ---------------------------------------------------------------- Base --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	color: var(--hk-ink);
	background: var(--hk-base);
	font-family: var(--hk-font-body);
	-webkit-font-smoothing: antialiased;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/*
 * The display face carries every voice-of-brand surface: headings, the
 * wordmark, buttons, eyebrows, tracked labels and prices. Everything a
 * customer reads at length stays in the body face.
 */
h1, h2, h3, h4 {
	font-family: var(--hk-font-display);
	font-weight: 700;
	letter-spacing: -0.018em;
}
.hk-btn,
.hk-navcta,
.hk-nav__link,
.hk-brand__mark,
.hk-brand__sub,
.hk-footer__mark,
.hk-footer__sub,
.hk-footer__title,
.hk-textlink,
.hk-tag,
.hk-card__flag,
.hk-card__price,
.hk-pillar__title,
.hk-pillar__cta,
.hk-pdp__title,
.hk-pdp__price,
.hk-catpanel__title,
.hk-brandhero__title,
.hk-stickybar__price { font-family: var(--hk-font-display); }

/* Model numbers, SKUs, counts and prices line up when the figures do. */
.hk-card__price,
.hk-card__count,
.hk-cat__count,
.hk-brands__count,
.hk-pdp__price { font-variant-numeric: tabular-nums; }

/*
 * Eyebrow — one treatment, used by every section that needs one, so the page
 * has a single label voice instead of five near-misses.
 */
.hk-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Brass lettering, taken down to 5.01:1 on white. See the token. */
	color: var(--hk-gold-onlight);
}
.hk-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	flex: 0 0 auto;
	background: var(--hk-gold);
}
/* 12px caps is not large text, so this uses the lifted brass (4.80:1), not
   the brand gold (4.425:1). The rule above it stays the brand gold — a 2px
   bar is a non-text element and only has a 3:1 bar to clear. */
.hk-eyebrow--onnavy { color: var(--hk-gold-text); }

/* Letter-spaced caps break connected Arabic letterforms, and the script has
   no case. Approved RTL languages drop the treatment rather than mangle it. */
[lang="ar"] .hk-eyebrow,
[lang="fa"] .hk-eyebrow,
[lang^="ar-"] .hk-eyebrow,
[lang^="fa-"] .hk-eyebrow { text-transform: none; letter-spacing: normal; }

.hk-container {
	inline-size: 100%;
	max-inline-size: var(--hk-container);
	margin-inline: auto;
	padding-inline: 1rem;
}
/* Same box, wider cap. Never hard-code a max-inline-size on a section
   directly — add the tier here (or a new one) instead. */
.hk-container--commerce { max-inline-size: var(--hk-container-commerce); }
.hk-container--wide { max-inline-size: var(--hk-container-wide); }
.hk-container--pdp { max-inline-size: var(--hk-container-pdp); }

.hk-icon { flex: 0 0 auto; }

.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wp-block-table { overflow-x: auto; max-inline-size: 100%; }
.wp-block-table table { min-inline-size: 100%; }
.wp-block-table th, .wp-block-table td {
	text-align: start;
	padding-block: 0.5rem;
	padding-inline: 0.75rem;
	border-block-end: 1px solid var(--hk-border);
}
pre, code { overflow-x: auto; max-inline-size: 100%; }

/* ------------------------------------------------------------- Buttons --- */

.hk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 44px;
	padding-block: 0.625rem;
	padding-inline: 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--hk-r);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hk-t), border-color var(--hk-t), color var(--hk-t);
}
.hk-btn--accent { background: var(--hk-gold); color: var(--hk-gold-ink); }
.hk-btn--accent:hover { background: var(--hk-gold-d); }
.hk-btn--primary { background: var(--hk-navy); color: #fff; }
.hk-btn--primary:hover { background: var(--hk-navy-d); }
.hk-btn--outline { background: transparent; color: var(--hk-navy); border-color: var(--hk-border); }
.hk-btn--outline:hover { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }
.hk-btn--ghost:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }
.hk-btn--sm { min-block-size: 40px; padding-block: 0.5rem; padding-inline: 0.875rem; font-size: 0.875rem; }
.hk-btn--block { inline-size: 100%; }

.hk-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-navy);
	text-decoration: none;
	white-space: nowrap;
}
.hk-textlink:hover { text-decoration: underline; }
.hk-textlink .hk-icon { transition: transform var(--hk-t); }
.hk-textlink:hover .hk-icon { transform: translateX(2px); }

/* -------------------------------------------------------- Utility bar --- */

/*
 * One reassurance message at a time, centred, cross-fading in place.
 *
 * The earlier version streamed five repeated copies of the list past a window.
 * The loop was seamless, but the repetition was visible on a wide screen —
 * "Financing available … Expert support … Financing available" across the
 * strip at once, which reads as a rendering fault rather than a deliberate
 * rail. Slides remove the duplication entirely.
 *
 * Every message is in the DOM exactly once. There are no aria-hidden copies to
 * keep in step, and a screen reader simply reads the four messages in order.
 *
 * MECHANISM: the four items are stacked in a single grid cell and share one
 * keyframe, each offset by a quarter of the cycle. Four turns of 25%: fade in,
 * hold, fade out, wait. No JavaScript, no timers, no carousel.
 *
 * BOUND TO THE PHP: the 25% turns assume four messages. Change
 * husky_utility_messages() and these percentages must change with it.
 *
 * Motion is optional, not assumed. Hover and keyboard focus pause the rotation
 * — what WCAG 2.2.2 asks of content that moves by itself for more than five
 * seconds, which a 14s loop still does — and prefers-reduced-motion stops it
 * and shows every message at once instead.
 */
.hk-utility {
	/*
	 * Full cycle across all four messages: 3.5 seconds each.
	 *
	 * The per-message dwell is this divided by the message count, so changing
	 * the number of messages changes the pace unless this moves with it.
	 */
	--hk-utility-speed: 14s;
	background: var(--hk-navy);
	color: rgb(255 255 255 / 88%);
	font-size: 0.75rem;
}

.hk-utility__viewport {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 34px;
	padding-inline: 1rem;
	overflow: hidden;
}

/*
 * A single grid cell holding every slide. The strip's height is therefore the
 * tallest message rather than the sum of them, and each slide is centred in
 * the same place instead of arriving from an edge.
 */
.hk-utility__track {
	display: grid;
	grid-template-areas: "slide";
	place-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	inline-size: 100%;
}

.hk-utility__item {
	grid-area: slide;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	max-inline-size: 100%;
	text-align: center;
	opacity: 0;
	animation: hk-utility-slide var(--hk-utility-speed) linear infinite;
	animation-delay: calc(var(--hk-utility-speed) / var(--hk-util-count, 4) * var(--hk-util-index, 0));
}
.hk-utility__item a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: inherit;
	text-decoration: none;
}
.hk-utility__item a:hover { color: #fff; text-decoration: underline; }
.hk-utility .hk-icon { flex: 0 0 auto; color: var(--hk-gold); }

/* Session 5AL.5: a Quick Fixes single-message override has nothing to rotate
   against, so it holds steady instead of running the 4-message cross-fade. */
.hk-utility--static .hk-utility__item {
	opacity: 1;
	animation: none;
}

/* Session 5AL.5: Husky Theme Quick Fixes emergency notice. Printed via
   wp_body_open, ahead of the header, so it never touches header markup or
   the sticky-header IntersectionObserver sentinel. Compact and restrained
   by design — not a full-page takeover banner. */
.hk-emergency-notice {
	background: var(--hk-warm);
	border-block-end: 1px solid var(--hk-warm-line);
	color: var(--hk-ink);
	font-size: 0.875rem;
}
.hk-emergency-notice--notice {
	background: var(--hk-gold);
	border-block-end-color: var(--hk-gold-d);
	color: var(--hk-gold-ink);
}
.hk-emergency-notice__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	padding-block: 0.625rem;
	text-align: center;
}
.hk-emergency-notice__msg { margin: 0; }
.hk-emergency-notice__cta {
	flex: 0 0 auto;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hk-emergency-notice__cta:hover { text-decoration-thickness: 2px; }

/*
 * The hold runs to 25% and the fade-out to 26.5%, i.e. PAST the point where the
 * next slide begins. That overlap is what makes it a cross-fade: measured with
 * a hard 25% cut-off there was a 0.4s window where every slide was transparent
 * and the strip blinked empty between messages.
 */
@keyframes hk-utility-slide {
	0% { opacity: 0; }
	1.5% { opacity: 1; }
	25% { opacity: 1; }
	26.5% { opacity: 0; }
	100% { opacity: 0; }
}

/* Pause for a pointer or a keyboard. */
.hk-utility__viewport:hover .hk-utility__item,
.hk-utility__viewport:focus-within .hk-utility__item { animation-play-state: paused; }

/*
 * A link inside a faded-out slide is still in the tab order, so focusing it
 * would otherwise move focus to something invisible. Focus brings its slide
 * fully forward and holds it there.
 */
.hk-utility__item:focus-within {
	opacity: 1;
	z-index: 1;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * No rotation: every message visible at once, wrapped and centred. The
	 * track stops being a single stacked cell and becomes a normal wrapping
	 * row, and the viewport releases its fixed height so nothing is cut off.
	 */
	.hk-utility__viewport {
		overflow: visible;
		min-block-size: 0;
		padding-block: 0.375rem;
	}
	.hk-utility__track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem 1.5rem;
	}
	.hk-utility__item {
		opacity: 1;
		animation: none;
		max-inline-size: none;
	}
}


/* -------------------------------------------------------------- Header --- */

/*
 * Session 5AJ.3 sticky-header fix. WordPress renders every
 * `wp:template-part` as its own wrapper <div class="wp-block-template-part">
 * — for the header part, that div's box is exactly as tall as .hk-header
 * itself (it has no other content). position:sticky's containing block is
 * that wrapper, and a containing block with zero extra height gives the
 * sticky element nowhere to "stick" — it detaches the instant scrolling
 * starts and tracks the scroll position 1:1, i.e. does not stay pinned.
 * Confirmed directly: removing html/body's overflow-x:clip (5AJ.2's
 * suspected cause) made no difference; giving this wrapper `display:
 * contents` (below) fixed it immediately with overflow-x:clip untouched.
 * `display: contents` unwraps the div from layout entirely — its children
 * (the sentinel + .hk-header) become direct flow children of
 * .wp-site-blocks, which spans the full page height, so .hk-header can
 * stick against the real page, not a 1px-tall box. The header part is
 * reliably the first template-part in every template (verified across all
 * ~74 template files), so this needs no template edits or new classes.
 */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }

/*
 * Session 5AJ.3A. Shared by page-level secondary sticky bars (.hk-termsnav,
 * .hk-faqchips — assets/css/pages.css) that need to sit flush beneath the
 * compact/is-stuck header rather than duplicating its height as a
 * disconnected magic number. Real measured compact-header height, not a
 * calculated one — .hk-header has no single explicit height, it's the sum
 * of several rows' padding/line-height, so the values below are read
 * directly from getBoundingClientRect() at each breakpoint the header's own
 * CSS already branches on: 47.9375rem (.hk-header__bar padding-block drops
 * to 0.375rem below this, line ~1799) and 64rem (adds a third header nav
 * row, which shortens the *other* rows' padding at the same time — that is
 * why the desktop compact height is smaller, not larger, than the tablet
 * one). Three tiers, matched to those same two breakpoints, not two —
 * a single sub-64rem value measured 3.33px short of flush at 390 because
 * 390 and 768 do not share a compact header height.
 * Rounded up very slightly (not down) so a secondary bar can never overlap
 * the header, only ever leave a sub-pixel gap.
 */
:root { --hk-header-h-stuck: 6.9375rem; } /* covers measured 110.67px (<48rem, e.g. 390) */
@media (min-width: 48rem) {
	:root { --hk-header-h-stuck: 7.125rem; } /* covers measured 113.33px (48rem–63.99rem, e.g. 768) */
}
@media (min-width: 64rem) {
	:root { --hk-header-h-stuck: 6.5625rem; } /* covers measured 104.67px (≥64rem, e.g. 1440/1920) */
}

#hk-header-sentinel { block-size: 1px; margin-block-end: -1px; }

.hk-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	background: var(--hk-base);
	border-block-end: 1px solid var(--hk-border);
	transition: box-shadow var(--hk-t);
}
/*
 * Compact/floating sticky state (Session 5AJ.1). Toggled by an
 * IntersectionObserver on #hk-header-sentinel (assets/js/theme.js) once the
 * page has scrolled past the header's natural position — the full header
 * (announcement strip + logo/search row + mega-nav) only shows at the very
 * top of the page; scrolled, the announcement strip disappears and the
 * remaining rows compact, so navigation and search stay reachable without
 * keeping the full-height stack pinned. CSS-only where possible; JS only
 * toggles one class.
 */
.hk-header.is-stuck { box-shadow: 0 2px 14px rgb(37 50 84 / 10%); }
.hk-header.is-stuck .hk-utility { display: none; }
.hk-header.is-stuck .hk-header__bar { padding-block: 0.5rem; }
.hk-header.is-stuck .hk-brand__sub { display: none; }
.hk-header.is-stuck .hk-brand__mark { font-size: 1.125rem; }
.hk-header.is-stuck .hk-brand img { max-block-size: 34px; }
.hk-header.is-stuck .hk-search__input { min-block-size: 38px; }
.hk-header.is-stuck .hk-search__submit { min-block-size: 32px; }
@media (prefers-reduced-motion: reduce) {
	.hk-header { transition: none; }
}
/* WordPress core exposes this custom property on <html> only while the
   logged-in admin bar is present, so the sticky header offsets under it
   instead of being covered by its higher z-index (99999). */
body.admin-bar .hk-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }

.hk-header__bar { padding-block: 0.625rem; }
.hk-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
}

.hk-brand {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	color: var(--hk-navy);
}
.hk-brand__mark { font-size: 1.375rem; font-weight: 800; letter-spacing: 0.01em; }
.hk-brand__sub { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hk-muted); margin-block-start: 2px; }
.hk-brand img { max-block-size: 46px; inline-size: auto; }

.hk-search {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--hk-base);
	border: 1.5px solid var(--hk-border);
	border-radius: var(--hk-r);
	padding-inline-start: 0.75rem;
	padding-inline-end: 0.25rem;
	transition: border-color var(--hk-t), box-shadow var(--hk-t);
}
.hk-search:focus-within { border-color: var(--hk-navy); box-shadow: 0 0 0 3px rgb(37 50 84 / 12%); }
.hk-search__icon { color: var(--hk-muted); display: flex; }
.hk-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.9375rem;
	color: inherit;
	padding: 0;
}
.hk-search__input:focus { outline: none; }
.hk-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: 0;
	background: var(--hk-navy);
	color: #fff;
	border-radius: calc(var(--hk-r) - 2px);
	min-block-size: 36px;
	padding-inline: 0.875rem;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--hk-t);
}
.hk-search__submit:hover { background: var(--hk-navy-d); }
.hk-search__submit-label { display: none; }

.hk-header__actions { display: none; align-items: center; gap: 0.125rem; }
.hk-iconlink {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	min-inline-size: 52px;
	min-block-size: 46px;
	justify-content: center;
	padding-inline: 0.375rem;
	border-radius: var(--hk-r);
	color: var(--hk-navy);
	text-decoration: none;
	transition: background-color var(--hk-t);
}
.hk-iconlink:hover { background: var(--hk-surface); }
.hk-iconlink__label { font-size: 0.6875rem; font-weight: 600; color: var(--hk-muted); white-space: nowrap; }
.hk-badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 4px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--hk-gold);
	color: var(--hk-gold-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.hk-navtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-navy);
	cursor: pointer;
}

/* ---------------------------------------------------------- Navigation --- */

/* Navy navigation bar — the mockup's defining header element. */
.hk-nav { background: var(--hk-navy); color: #fff; }
.hk-nav[hidden] { display: none; }
@media (max-width: 63.99rem) {
	.hk-nav { max-block-size: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; }

	/*
	 * Account/Compare/Cart had no mobile entry point at all — the row was
	 * unconditionally display:none below the nav breakpoint. Row 1, between
	 * the logo and the hamburger — the base grid's middle `1fr` track
	 * already sits there unused (the search field is pulled into row 2 by
	 * its own explicit grid-row), so this needs no new row, just filling
	 * that track and right-aligning within it. Icon-only: logo + 3 icons +
	 * hamburger in one row at 375px leaves no room for label text too.
	 */
	.hk-header__actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.125rem;
	}
	.hk-header__actions .hk-iconlink--desktoponly { display: none; }
	.hk-header__actions .hk-iconlink { min-inline-size: 38px; min-block-size: 38px; padding-inline: 0.125rem; }
	.hk-header__actions .hk-iconlink__label { display: none; }
}
.hk-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hk-nav__item { position: relative; }
.hk-nav__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	inline-size: 100%;
	min-block-size: 50px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	border-block-end: 1px solid rgb(255 255 255 / 14%);
}
.hk-nav__link:hover { color: #fff; }
.hk-nav__trigger .hk-icon:last-child { margin-inline-start: auto; transition: transform var(--hk-t); }
.hk-nav__trigger[aria-expanded="true"] .hk-icon:last-child { transform: rotate(180deg); }
.hk-nav__item--mobilecta { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1rem; }
/* In the drawer the plate is inset from the stacked rows rather than mounted. */
.hk-nav__item--cta { padding-block: 0.75rem; }

/*
 * Husky Select leads the bar. This is 14px semibold — not large text — so it
 * uses the lifted brass at 4.80:1 rather than the brand gold at 4.425:1,
 * which would have been relying on a large-text exemption it does not get.
 * Gold is still never used as text on white.
 */
.hk-nav__item--highlight .hk-nav__link { color: var(--hk-gold-text); }

/*
 * Session 5P: the drawer is a light background below the nav breakpoint
 * (desktop bar above stays navy, untouched). This has to come AFTER the
 * base `.hk-nav__link { color: #fff }` above, not just be wrapped in the
 * media query — an earlier attempt placed it before those base rules in
 * source order, and at equal specificity the later declaration always
 * wins regardless of which one sits inside a media query. Text goes to
 * `--hk-ink` (Husky charcoal) on explicit request rather than navy —
 * buttons (`.hk-navcta`, the ghost/outline CTAs) are untouched.
 */
@media (max-width: 63.99rem) {
	.hk-nav { background: var(--hk-warm); color: var(--hk-ink); }
	.hk-nav__link { color: var(--hk-ink); border-block-end-color: var(--hk-border); }
	.hk-nav__link:hover { color: var(--hk-ink); background: var(--hk-surface); }
	.hk-nav__item--highlight .hk-nav__link { color: var(--hk-ink); font-weight: 800; }
	.hk-nav__item--highlight .hk-nav__link::before {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--hk-gold);
		flex: 0 0 auto;
	}
	.hk-navcta:focus-visible { outline-color: var(--hk-navy); }
}

/*
 * Request a Quote — a brass spec-plate, the stamped nameplate riveted to every
 * piece of commercial kitchen equipment. Mounted ON the navy rail rather than
 * filling it, so it reads as an object you press instead of a highlighted nav
 * item. The seven destinations in this bar are sentence case; the one action is
 * struck in caps, so case carries what a thing does.
 *
 * Measured: ink #1A1D23 on gold #B8935A is 5.92:1, and 4.83:1 on the darker
 * hover gold — both pass AA for this text size. Gold remains a surface only.
 */
.hk-navcta {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 48px;
	padding-inline: 1.25rem;
	border-radius: var(--hk-r);
	background: var(--hk-gold);
	color: var(--hk-gold-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	/* Milled top edge, seated bottom edge. The whole effect, and the only one. */
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 1px 0 rgb(0 0 0 / 22%);
	transition: background-color var(--hk-t), transform var(--hk-t);
}
.hk-navcta:hover { background: var(--hk-gold-d); }
.hk-navcta:active {
	transform: translateY(1px);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}
/* Navy focus rings vanish against the navy rail; white reads on both. */
.hk-navcta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/*
 * Arabic and Farsi are approved languages. Letter-spacing breaks connected
 * Arabic letterforms and the script has no case, so the stamped treatment is
 * dropped rather than mangled.
 */
[lang="ar"] .hk-navcta,
[lang="fa"] .hk-navcta,
[lang^="ar-"] .hk-navcta,
[lang^="fa-"] .hk-navcta {
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.9375rem;
}

/* Mega menu */
.hk-mega { background: var(--hk-surface); }
.hk-mega[hidden] { display: none; }
/*
 * Without JavaScript the panels have no control to open them, so they stay
 * open: a long menu is a lesser failure than an unreachable one.
 */
html:not(.has-js) .hk-mega[hidden] { display: block; }
.hk-mega__all { margin: 0; padding: 0.75rem 0.5rem 0.25rem; }
.hk-mega__all .hk-icon { transition: transform var(--hk-t); }
.hk-mega__all a:hover .hk-icon { transform: translateX(2px); }

/*
 * Real category photography, left of the name.
 *
 * Held at 52px: the source files are 150px thumbnails from 2019, and pushing
 * them much past this starts to show. Better a crisp small photo than a soft
 * large one.
 */
.hk-mega__figure {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: #fff;
}
.hk-mega__thumb {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.hk-mega__inner { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding-block: 0.75rem; }
.hk-mega__col { padding-block: 0.375rem; }
.hk-mega__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--hk-r);
	text-decoration: none;
	color: var(--hk-navy);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
	transition: background-color var(--hk-t);
}
.hk-mega__head:hover { background: var(--hk-base); }
.hk-mega__head:hover .hk-mega__name { text-decoration: underline; }
.hk-mega__icon {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--hk-r);
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	color: var(--hk-navy);
	flex: 0 0 auto;
}
.hk-mega__name { display: block; }
.hk-mega__count { display: block; margin-block-start: 0.0625rem; font-size: 0.75rem; font-weight: 500; color: var(--hk-muted); }

/*
 * Child links align to the text column, not under the photo, so each column
 * reads as one heading with its list rather than a picture with stray links.
 */
.hk-mega__sub {
	list-style: none;
	margin: 0;
	padding-block: 0.125rem 0.25rem;
	padding-inline-start: calc(52px + 0.75rem + 0.5rem);
}
.hk-mega__sub a {
	display: block;
	padding-block: 0.1875rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--hk-muted);
	text-decoration: none;
}
.hk-mega__sub a:hover { color: var(--hk-navy); text-decoration: underline; }
.hk-mega__foot { padding: 0.75rem 0.5rem 0.25rem; }

/* ---------------------------------------------------------------- Hero --- */

/*
 * Hero. Warm off-white rather than grey — the page's coolest surfaces are its
 * navy bands, so the light end is warmed to keep the whole thing from reading
 * as a generic storefront.
 */
/*
 * Session 5S.1 replaced this fallback's photography with text-only, since
 * the hero's real design now lives in Slider Revolution's editor (see
 * inc/hero-revslider.php). Session 5S.2 restored the photographic layout
 * below at the owner's direct request ("the fallback needs a photo, the
 * same way you had it before") — this remains the fallback only, shown when
 * no populated module exists yet or the plugin is inactive.
 */
.hk-hero { background: linear-gradient(180deg, var(--hk-warm), var(--hk-base) 72%); }

/* The Slider Revolution embed's own wrapper — spacing only; the module owns
   everything else about its own appearance. */
.hk-hero--rs { padding-block: 1rem; }

/*
 * The seam a future multi-slide rotator could fill with additional
 * `.hk-hero__frame` siblings — see the doc comment on
 * husky_render_hero_fallback(). One static frame today; no slider JS.
 */
.hk-hero__stage { padding-block: 1.5rem; }

.hk-hero__frame { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding-block: 0.75rem 0.75rem; align-items: center; }

.hk-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-hero__eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	flex: 0 0 auto;
	background: var(--hk-gold);
}
/*
 * The headline is the one place the brand speaks at full volume: display face
 * at its heaviest grade, set tight and stacked two lines deep so "Built for /
 * real kitchens." reads as a stamped statement rather than a sentence.
 */
.hk-hero__title {
	margin: 0 0 1.125rem;
	font-family: var(--hk-font-display);
	font-size: clamp(2.75rem, 7.2vw, 4.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--hk-navy);
	max-inline-size: 11ch;
	text-wrap: balance;
}
.hk-hero__lede { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.62; color: var(--hk-muted); max-inline-size: 44ch; }
.hk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-end: 1.125rem; }
/*
 * Third rung of the CTA ladder. A link, not a button, and underlined so it is
 * unmistakably a link — the gap between it and the two buttons above is the
 * hierarchy.
 */
.hk-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--hk-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--hk-navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--hk-gold);
	text-underline-offset: 5px;
}
.hk-hero__link .hk-icon { transition: transform var(--hk-t); }
.hk-hero__link:hover .hk-icon { transform: translateX(3px); }
.hk-hero__media { border-radius: var(--hk-r-lg); overflow: hidden; background: var(--hk-navy); aspect-ratio: 16 / 10; }
.hk-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/*
 * An owner-supplied header image's real proportions aren't known up front —
 * cover-fitting a wide product-lineup shot into the placeholder's tall box
 * crops equipment off the edges. `auto` (rather than a ratio hardcoded to one
 * specific image) lets the box take its shape from the `<img>` tag's own
 * width/height attributes — set dynamically in husky_render_hero_fallback()
 * from whichever attachment is actually resolved — so nothing is ever
 * cropped for any image the owner sets, not only the current one. The light
 * background matches a typical white-background product photo instead of
 * the placeholder's navy.
 */
.hk-hero__media--fit { aspect-ratio: auto; background: var(--hk-base); }
.hk-hero__media--fit img { object-fit: contain; }
.hk-hero__placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.5rem;
	block-size: 100%;
	color: rgb(255 255 255 / 55%);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--hk-navy), var(--hk-navy-l));
}

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

/*
 * A bridge, not a section: one hairline band that closes the hero and opens
 * the navy pillars beneath it. Kept deliberately short.
 */
.hk-trust { border-block: 1px solid var(--hk-border); background: var(--hk-base); }
.hk-trust__grid { display: grid; grid-template-columns: 1fr; }
.hk-trust__item { display: flex; align-items: flex-start; gap: 0.625rem; padding-block: 0.75rem; }
.hk-trust__item + .hk-trust__item { border-block-start: 1px solid var(--hk-border); }
.hk-trust__icon { color: var(--hk-gold); display: flex; margin-block-start: 1px; }
.hk-trust__text { display: flex; flex-direction: column; }
.hk-trust__title { font-family: var(--hk-font-display); font-size: 0.875rem; font-weight: 700; color: var(--hk-navy); line-height: 1.3; }
.hk-trust__sub { font-size: 0.8125rem; line-height: 1.45; color: var(--hk-muted); }

/* ------------------------------------------------------------ Sections --- */

/*
 * SECTION RHYTHM
 *
 * Every homepage section uses this one spacing scale and one of four
 * surfaces, so the page reads as chapters rather than as a stack of
 * WooCommerce blocks:
 *
 *   (default)   white          — catalogue content: categories, products
 *   --surface   cool grey      — supporting content
 *   --warm      warm off-white — Husky Select, which needs to feel curated
 *   --navy      navy           — the two brand statements: pillars, project
 *
 * Two navy bands, no more. A third would stop being a punctuation mark.
 */
.hk-section { padding-block: var(--hk-space-section); }
.hk-section--surface { background: var(--hk-surface); }
.hk-section--warm { background: var(--hk-warm); }
.hk-section--navy { background: var(--hk-navy); color: rgb(255 255 255 / 82%); }
.hk-section--navy .hk-section__title,
.hk-section--navy h2,
.hk-section--navy h3 { color: #fff; }

/* Adjacent bands of the same surface would merge into one long block; the
   rule keeps the seam visible without adding another colour. */
.hk-section--surface + .hk-section--surface,
.hk-section--warm + .hk-section--warm { border-block-start: 1px solid var(--hk-border); }

.hk-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; flex-wrap: wrap; }
.hk-section__headcopy { min-inline-size: 0; }
.hk-section__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.5rem, 3.6vw, 2.125rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.026em;
	color: var(--hk-navy);
}
.hk-section__lede {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-muted);
	max-inline-size: 56ch;
}
.hk-section--navy .hk-section__lede { color: rgb(255 255 255 / 76%); }

/* On navy the link has to carry its own contrast. */
.hk-section--navy .hk-textlink { color: #fff; }

/* Pillars ------------------------------------------------------------- *
 *
 * The three businesses Husky is in. A light band, and an unadorned one: the
 * photographs carry the whole weight. No icon, no badge, no overlay — the
 * image, the name and where it goes.
 *
 * The three are identical in every dimension — width, image ratio, padding,
 * rule, CTA geometry. Husky Select differs by exactly two things: a brass edge
 * and a brass CTA. That is the whole distinction, and it is meant to read as
 * "curated programme", never as "sale".
 */
/*
 * White. No bottom edge is needed: the trust strip sits directly beneath and
 * brings its own hairlines.
 */
.hk-pillars { background: var(--hk-base); }

/*
 * The divider between the hero and the cards — the only thing separating them
 * now that the trust strip has moved below.
 *
 * Brass at the centre, fading to nothing at both ends, so it reads as a seam
 * the page fades through rather than as the top border of a box. The fade is
 * a horizontal linear-gradient rather than a radial one: on a 1px-tall box a
 * radial gradient's vertical radius collapses and the result is unstable
 * across engines, whereas three stops along the inline axis give exactly the
 * centre-out fade with no such dependency.
 *
 * Container width, so it starts and ends on the same grid lines as the cards
 * beneath it. Purely decorative and aria-hidden — it conveys nothing the
 * heading below does not already say, so the 3:1 non-text contrast bar does
 * not apply.
 */
.hk-pillars__rule {
	display: block;
	inline-size: 100%;
	block-size: 1px;
	margin-block-end: 2.25rem;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--hk-gold) 50%,
		transparent 100%
	);
}

.hk-pillars__head { margin-block-end: 1.75rem; max-inline-size: 46ch; }
.hk-pillars__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.75rem, 4.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--hk-navy);
}
.hk-pillars__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
/*
 * Strategic cards: photograph on top, white content area beneath. All three
 * are identical in width, image height and padding — the photograph is the
 * only thing that distinguishes them, so no card carries a tint, badge or
 * icon of its own.
 */
.hk-pillar {
	/* Scoped so the site-wide border token is untouched. */
	--hk-pillar-border: #cdd4de;

	display: flex;
	flex-direction: column;
	background: var(--hk-base);
	border: 1px solid var(--hk-pillar-border);
	border-radius: var(--hk-r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	/* Two-stop elevation on a light ground: a close contact shadow plus a wide,
	   very soft one. Enough to lift the card off the page, not enough to
	   announce itself. */
	box-shadow: 0 1px 2px rgb(37 50 84 / 5%), 0 10px 24px rgb(37 50 84 / 7%);
	transition: border-color var(--hk-t), box-shadow var(--hk-t), transform var(--hk-t);
}
.hk-pillar:hover {
	border-color: var(--hk-navy);
	box-shadow: 0 4px 10px rgb(37 50 84 / 9%), 0 22px 44px rgb(37 50 84 / 14%);
	transform: translateY(-3px);
}

/*
 * Husky Select is the #1 revenue priority, so it is the one card that carries
 * the brass accent: a hairline gold edge, a faint gold halo and a gold CTA
 * edge. The photograph, the card dimensions and the body surface are identical
 * to the other two — the accent is the only variable.
 */
.hk-pillar--select {
	--hk-pillar-border: var(--hk-gold);
	/* A faint brass halo under the card, so it sits a little forward of the
	   other two without being a different size or a different shape. */
	box-shadow: 0 1px 2px rgb(138 106 50 / 10%), 0 12px 28px rgb(138 106 50 / 14%);
}
.hk-pillar--select:hover {
	border-color: var(--hk-gold-d);
	box-shadow: 0 4px 10px rgb(138 106 50 / 16%), 0 24px 48px rgb(138 106 50 / 22%);
}

/* One fixed ratio across all three, so the titles below always line up. */
.hk-pillar__media {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	background: var(--hk-surface);
	overflow: hidden;
}
.hk-pillar__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * A card with no photograph says so, in the same language as the hero: navy
 * panel, brass wordmark, inset dashed rule. It has to look finished enough to
 * judge the layout and unfinished enough that nobody mistakes it for art. A
 * real photograph would never carry a dashed frame.
 */
.hk-pillar__placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	block-size: 100%;
	padding: 1.25rem;
	text-align: center;
	background: linear-gradient(160deg, var(--hk-navy-l), var(--hk-navy-d));
	color: rgb(255 255 255 / 78%);
}
.hk-pillar__placeholder::before {
	content: "";
	position: absolute;
	inset: 0.625rem;
	border: 1px dashed rgb(255 255 255 / 22%);
	border-radius: var(--hk-r);
	pointer-events: none;
}
.hk-pillar__placeholdermark {
	font-family: var(--hk-font-display);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--hk-gold);
}
.hk-pillar__placeholdertext {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	max-inline-size: 20ch;
}

.hk-pillar__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: 1.5rem 1.375rem 1.375rem;
}
/*
 * Title case, not caps: these are the names of three businesses, and caps at
 * this size turned "Restaurant Design & Custom Packages" into a wall.
 */
.hk-pillar__title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: var(--hk-navy);
}
/* A short brass rule under each title — the one ornament these cards carry,
   and the thing that ties them to the section eyebrow above. */
.hk-pillar__title::after {
	content: "";
	display: block;
	inline-size: 2.25rem;
	block-size: 3px;
	margin-block-start: 0.75rem;
	border-radius: 2px;
	background: var(--hk-gold);
}
.hk-pillar__text { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.62; color: var(--hk-muted); }

/*
 * The CTA is a pill with a hairline edge, not a filled button: the card is
 * already the click target, so this reads as the card's own label for where
 * it goes rather than as a second, competing action.
 *
 * Pinned to the bottom of the content area so all three align however long
 * the copy above them ran.
 */
.hk-pillar__cta {
	align-self: flex-start;
	margin-block-start: auto;
	padding-block-start: 1.375rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-navy);
}
/* The pill is an inner span so the gap above it lives on the wrapper rather
   than inside the border. */
.hk-pillar__ctainner {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	padding-inline: 1.125rem;
	border: 1.5px solid var(--hk-navy);
	border-radius: 999px;
	transition: background-color var(--hk-t), border-color var(--hk-t), color var(--hk-t);
}
.hk-pillar:hover .hk-pillar__ctainner { background: var(--hk-navy); color: #fff; }

/* Husky Select's CTA is brass — at 5.01:1 on white, not the 2.85:1 brand gold. */
.hk-pillar--select .hk-pillar__cta { color: var(--hk-gold-onlight); }
.hk-pillar--select .hk-pillar__ctainner { border-color: var(--hk-gold); }
.hk-pillar--select:hover .hk-pillar__ctainner {
	background: var(--hk-gold);
	border-color: var(--hk-gold);
	color: var(--hk-gold-ink);
}

.hk-pillar__cta .hk-icon { transition: transform var(--hk-t); }
.hk-pillar:hover .hk-pillar__cta .hk-icon { transform: translateX(3px); }

[lang="ar"] .hk-pillar__cta,
[lang="fa"] .hk-pillar__cta,
[lang^="ar-"] .hk-pillar__cta,
[lang^="fa-"] .hk-pillar__cta { text-transform: none; letter-spacing: normal; }

/* Categories */
.hk-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
/* Shown only below the tablet breakpoint; the section-head link serves
   every wider viewport. See husky_render_category_grid(). */
.hk-catgrid__more { display: none; }

.hk-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
	padding: 0.75rem 0.75rem 1rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--hk-t), box-shadow var(--hk-t);
}
/*
 * Same hover as a product card, because they are the same object to a
 * customer: the border goes navy, the card lifts on the shared shadow, and
 * the photograph scales a little inside its stage. Tinting the image stage
 * was the earlier treatment and it was wrong — it recoloured the ground
 * behind the photograph, which read as a state change rather than a hover.
 */
.hk-cat:hover,
.hk-cat:focus-visible { border-color: var(--hk-navy); box-shadow: var(--hk-lift); }

/*
 * Husky Select (Session 5S) — the same brass treatment as .hk-pillar--select:
 * a hairline gold border and a faint gold-tinted shadow are the only
 * difference from a sibling card. Same border-radius, same padding, same
 * grid cell — the distinction is the accent, not the geometry.
 */
.hk-cat--select {
	border-color: var(--hk-gold);
	box-shadow: 0 1px 2px rgb(138 106 50 / 10%), 0 8px 18px rgb(138 106 50 / 12%);
}
.hk-cat--select:hover,
.hk-cat--select:focus-visible {
	border-color: var(--hk-gold-d);
	box-shadow: 0 3px 8px rgb(138 106 50 / 16%), 0 16px 32px rgb(138 106 50 / 20%);
}
.hk-cat__badge {
	margin-block-start: 0.125rem;
	font-family: var(--hk-font-display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hk-gold-onlight);
}
/*
 * Category photography. The source files are 250px square, so the stage is
 * square too — a 4:3 stage letterboxed them, constraining a square image by
 * the short edge and leaving dead space either side. Matched to the source,
 * the image fills the width it is given without ever being upscaled or
 * cropped. The card turns portrait as a result, which is what the text block
 * below it wants anyway.
 */
.hk-cat__media {
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	padding: 0.625rem;
	border-radius: var(--hk-r);
	background: var(--hk-surface);
	overflow: hidden;
}
.hk-cat__img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--hk-t);
}
.hk-cat:hover .hk-cat__img,
.hk-cat:focus-visible .hk-cat__img { transform: scale(1.02); }
.hk-cat__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--hk-base); color: var(--hk-navy); }
.hk-cat__name { font-family: var(--hk-font-display); font-weight: 700; font-size: 0.875rem; color: var(--hk-navy); line-height: 1.25; letter-spacing: -0.005em; }
.hk-cat__count { font-size: 0.75rem; color: var(--hk-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.hk-cat:hover .hk-cat__img,
	.hk-cat:focus-visible .hk-cat__img { transform: none; }
}

/* Brands ---------------------------------------------------------------- *
 *
 * One row of manufacturer logos, on white, with a hairline above and below.
 * No cards, no counts, no borders around each mark — the logos are the
 * content and anything drawn around them competes with seven different house
 * styles at once.
 *
 * Greyscaled at rest so those seven styles sit inside the Husky palette
 * rather than fighting it, and restored to full colour on hover, which also
 * confirms the link target. Each logo goes to that brand's real archive.
 */
.hk-brands {
	background: var(--hk-base);
	border-block: 1px solid var(--hk-border);
}
.hk-brands__title {
	margin: 0 0 1.5rem;
	font-family: var(--hk-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--hk-navy);
}
.hk-brands__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 1.5rem 1rem;
}
/*
 * One fixed stage height so wide wordmarks and square roundels share a
 * baseline. The sources are ~150px JPEGs on white, so they are contained
 * (never upscaled) and multiplied to drop the white box behind them.
 */
.hk-brands__item {
	display: grid;
	place-items: center;
	block-size: 2.75rem;
	padding-inline: 0.5rem;
	text-decoration: none;
}
.hk-brands__item img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale(1) contrast(1.1);
	opacity: 0.72;
	transition: filter var(--hk-t), opacity var(--hk-t);
}
.hk-brands__item:hover img,
.hk-brands__item:focus-visible img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.hk-brands__item img { transition: none; }
}

/* -------------------------------------------------------- Product card --- */

.hk-cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.hk-card {
	display: flex;
	flex-direction: column;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	overflow: hidden;
	transition: border-color var(--hk-t), box-shadow var(--hk-t);
}
.hk-card:hover { border-color: var(--hk-navy); box-shadow: var(--hk-lift); }

/*
 * The image stage is the card's most valuable surface, so it gets a square —
 * catalogue photography here is a mix of tall reach-ins and wide prep tables,
 * and a square is the only ratio that does not crop one to flatter the other.
 * A hairline tint separates the stage from the white card without a border.
 */
.hk-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--hk-base); overflow: hidden; }
.hk-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: 0.75rem;
	transition: transform var(--hk-t);
}
.hk-card:hover .hk-card__media img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
	.hk-card:hover .hk-card__media img { transform: none; }
}
.hk-card__placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.375rem;
	block-size: 100%;
	color: var(--hk-muted);
	background: repeating-linear-gradient(45deg, var(--hk-surface), var(--hk-surface) 10px, #f1f3f6 10px, #f1f3f6 20px);
}
.hk-card__placeholder-text { font-size: 0.6875rem; font-weight: 600; }
.hk-card__flag {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	padding-block: 0.1875rem;
	padding-inline: 0.5rem;
	border-radius: 999px;
	background: var(--hk-gold);
	color: var(--hk-gold-ink);
	font-size: 0.6875rem;
	font-weight: 700;
}

.hk-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.3125rem; padding: 0.875rem; border-block-start: 1px solid var(--hk-border); }
.hk-card__brand { margin: 0; font-family: var(--hk-font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hk-muted); }
/*
 * Product names run long and technical. Three lines is enough to identify a
 * unit; past that the card stops being scannable, so it clamps — the full
 * name is one click away and the title attribute is not needed because the
 * link text is the name.
 */
.hk-card__title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hk-card__title a { color: var(--hk-ink); text-decoration: none; }
.hk-card__title a:hover { text-decoration: underline; }

.hk-card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.hk-tag {
	display: inline-flex;
	align-items: center;
	padding-block: 0.1875rem;
	padding-inline: 0.5rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	border: 1px solid var(--hk-border);
	background: var(--hk-surface);
	color: var(--hk-ink);
}
.hk-tag--new { border-color: var(--hk-navy); color: var(--hk-navy); background: var(--hk-base); }
.hk-tag--select { border-color: var(--hk-gold); color: var(--hk-gold-ink); background: #f7f1e7; }

/*
 * Availability never relies on colour alone — each state carries its own
 * words. Pushed to the card's floor so price, availability and CTA align
 * across a row however long the product names ran.
 */
.hk-card__stock { margin: auto 0 0; font-size: 0.8125rem; font-weight: 600; }
.hk-card__stock.is-in { color: #17553a; }
.hk-card__stock.is-low { color: #8a5a1f; }
.hk-card__stock.is-out { color: var(--hk-muted); }

/* Price is the heaviest element on the card — approved information priority. */
.hk-card__price { margin: 0.125rem 0 0; font-size: 1.125rem; font-weight: 800; color: var(--hk-navy); line-height: 1.25; }
.hk-card__price del { font-weight: 400; color: var(--hk-muted); font-size: 0.8em; }
.hk-card__price ins { text-decoration: none; }
.hk-card__quote { font-size: 0.9375rem; font-weight: 700; color: var(--hk-muted); }
.hk-card__actions { margin-block-start: 0.5rem; }

/* ------------------------------------------ Compact card (Session 5AJ.1) --- *
 * Business Type equipment groups need a smaller, calmer card than the leaf
 * catalogue grid — same markup, same husky_get_price_state() truth, just a
 * tighter box: smaller media, no meta-tag row, no stock line unless a
 * product is genuinely out of stock, smaller type, a smaller action button.
 */
.hk-card--compact .hk-card__body { padding: 0.625rem; gap: 0.25rem; }
.hk-card--compact .hk-card__title { font-size: 0.8125rem; line-height: 1.3; -webkit-line-clamp: 2; line-clamp: 2; }
.hk-card--compact .hk-card__brand { font-size: 0.625rem; }
.hk-card--compact .hk-card__price { font-size: 0.9375rem; margin-block-start: 0.125rem; }
.hk-card--compact .hk-card__quote { font-size: 0.8125rem; }
.hk-card--compact .hk-card__stock { font-size: 0.6875rem; margin: 0; }
.hk-card--compact .hk-card__actions { margin-block-start: 0.375rem; }
.hk-card--compact .hk-card__actions .hk-btn { min-block-size: 36px; font-size: 0.75rem; padding-inline: 0.625rem; }
.hk-card--compact .hk-card__placeholder-text { display: none; }

/* ------------------------------------------------------- Husky Select --- *
 *
 * The Husky Select grid answers the strategic card in the navy band above it,
 * but is deliberately not the same object: a warm band with a brass rule at
 * its head, and cards that keep the brass edge without the plated label.
 * "Curated pre-owned programme", not "clearance".
 */
.hk-select { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-select .hk-section__head { border-block-start: 3px solid var(--hk-gold); padding-block-start: 1.25rem; }
.hk-select .hk-card { border-color: var(--hk-warm-line); }
.hk-select .hk-card:hover { border-color: var(--hk-gold-d); }
.hk-select .hk-card__media { background: var(--hk-base); }
.hk-select .hk-card__body { background: var(--hk-base); }
/* Every unit here is a specific physical machine, so a missing photo is a
   real fact about this listing, not a styling gap. It says so. */
.hk-select .hk-card__placeholder {
	background: repeating-linear-gradient(45deg, var(--hk-warm), var(--hk-warm) 10px, #f4ece0 10px, #f4ece0 20px);
	color: #7a6549;
}

/* ----------------------------------------------------- Project support --- */

/*
 * The page's second and last navy band, and its culmination: having sold
 * equipment and pre-owned equipment above, this is the offer to build the
 * whole kitchen. It is a full-width band rather than a card floating in a
 * white section — the same weight as the pillar band, so the page opens and
 * closes on the same note.
 */
.hk-projectband { background: var(--hk-navy); color: rgb(255 255 255 / 82%); }
.hk-project {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
.hk-project__title { margin: 0 0 0.625rem; font-family: var(--hk-font-display); font-size: clamp(1.625rem, 3.8vw, 2.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em; color: #fff; }
.hk-project__text { margin: 0 0 1.375rem; font-size: 0.9375rem; line-height: 1.62; color: rgb(255 255 255 / 78%); max-inline-size: 42ch; }
.hk-project__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: hk-step; }
/* Numbered because they are a sequence, and the number is the cheapest way to
   say so without another icon. */
.hk-project__step {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	padding-block-start: 0.875rem;
	border-block-start: 1px solid rgb(255 255 255 / 20%);
	counter-increment: hk-step;
}
.hk-project__step::before {
	content: counter(hk-step, decimal-leading-zero);
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--hk-gold-text);
	font-variant-numeric: tabular-nums;
}
.hk-project__icon { display: none; }
/* Gold on navy measures 4.43:1 — the step titles carry it at bold weight,
   above the 3:1 large-text bar. The body text stays white. */
.hk-project__steptitle { font-family: var(--hk-font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.hk-project__steptext { font-size: 0.8125rem; line-height: 1.55; color: rgb(255 255 255 / 76%); }

/* ------------------------------------------------------------ Service CTA */

/*
 * Final conversion point. Deliberately a bar, not a band: the navy above it
 * has already made the argument, so this only has to be the last thing you
 * can click before the footer.
 */
.hk-ctaband { background: var(--hk-warm); border-block-start: 1px solid var(--hk-warm-line); }
.hk-cta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--hk-r-lg);
	background: var(--hk-navy);
	color: #fff;
}
.hk-cta__icon { color: var(--hk-gold); }
.hk-cta__title { margin: 0 0 0.25rem; font-family: var(--hk-font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.hk-cta__text { margin: 0; font-size: 0.9375rem; color: rgb(255 255 255 / 78%); }
.hk-cta__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }

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

/*
 * Session 5S. Last section on the page, deliberately: the CTA bar above it
 * has already made every purchase/contact argument, so this lower-commitment
 * ask doesn't compete with any of them — least of all the hero. Light, calm,
 * a single brass rule in the same language as the pillars' opening rule
 * rather than a second navy bar right before the navy footer.
 */
.hk-newsband { background: var(--hk-base); }
.hk-newsband__rule {
	display: block;
	inline-size: 100%;
	block-size: 1px;
	margin-block-end: 1.75rem;
	background: linear-gradient(to right, transparent 0%, var(--hk-gold) 50%, transparent 100%);
}
.hk-newsband__inner { display: flex; flex-direction: column; gap: 1.25rem; }
.hk-newsband__copy { max-inline-size: 34rem; }
.hk-newsband__title {
	margin: 0 0 0.5rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--hk-navy);
}
.hk-newsband__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }
.hk-newsband__form { flex: 0 0 auto; }

/* -------------------------------------------------------------- Services */

/*
 * The detail behind the trust strip. Borderless columns separated by a rule
 * rather than four more boxes — the page already has enough cards, and this
 * is reference copy, not something to click.
 */
.hk-services__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-block-start: 1.5rem; }
.hk-service { padding-block-start: 1rem; border-block-start: 2px solid var(--hk-gold); }
.hk-service__icon { color: var(--hk-navy); margin-block-end: 0.5rem; }
.hk-service__title { margin: 0 0 0.375rem; font-family: var(--hk-font-display); font-size: 1rem; font-weight: 700; color: var(--hk-navy); }
.hk-service__text { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--hk-muted); }

/* ---------------------------------------------------------------- Footer */

.hk-footer { background: var(--hk-navy); color: rgb(255 255 255 / 78%); margin-block-start: 1rem; }
.hk-footer__inner { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding-block: 2.5rem; }
.hk-footer__mark { display: block; font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1; }
/* 9px caps on navy: the lifted brass, for the same reason as the nav. */
.hk-footer__sub { display: block; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hk-gold-text); margin-block-start: 3px; }
.hk-footer__blurb { margin: 0.875rem 0 0; font-size: 0.875rem; line-height: 1.65; max-inline-size: 42ch; }
/* Session 5AF.1: Request a Quote CTA, folded into the brand column — see husky_render_footer()'s own docblock for why it isn't a fifth grid column. */
.hk-footer__quotecta { display: inline-flex; margin-block-start: 1.25rem; }
.hk-footer__title { margin: 0 0 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.hk-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4375rem; }
.hk-footer__col a { font-size: 0.875rem; color: rgb(255 255 255 / 78%); text-decoration: none; }
.hk-footer__col a:hover { color: #fff; text-decoration: underline; }
/* Session 5AL.5: Husky Theme Quick Fixes footer notice — collapses to nothing
   when disabled, no impact on the .hk-footer__inner grid or bottom row. */
.hk-footer__notice {
	border-block-start: 1px solid rgb(255 255 255 / 15%);
	padding-block: 0.75rem;
}
.hk-footer__notice p {
	margin: 0;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 78%);
	text-align: center;
}

.hk-footer__bottom { border-block-start: 1px solid rgb(255 255 255 / 15%); }
.hk-footer__bottominner {
	padding-block: 1rem;
	/* Copyright and legal share one row on desktop and stack on narrow screens.
	   `wrap` rather than a breakpoint: the only thing that matters is whether
	   both fit, and that depends on the site name's length, not the viewport. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.25rem;
}
.hk-footer__bottominner p { margin: 0; font-size: 0.8125rem; }

/* Legal links (Session 5R.0). Sits with the copyright, not in the Support
   column: Privacy is a legal notice, and this is the row people look in. */
.hk-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.hk-footer__legal a {
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 72%);
	text-decoration: none;
}
.hk-footer__legal a:hover,
.hk-footer__legal a:focus-visible { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------- Breakpoints --- */

/* Small phones 375–430px: tighten, never collapse the scanning grid. */
@media (max-width: 26.875rem) {
	.hk-container { padding-inline: 0.75rem; }
	.hk-cardgrid, .hk-catgrid { gap: 0.5rem; }
	.hk-card__body { padding: 0.75rem; }
	.hk-card__price { font-size: 1.0625rem; }
	.hk-section { padding-block: 2rem; }
	.hk-hero__actions .hk-btn { flex: 1 1 100%; }
	.hk-cta { padding: 1.125rem; }
	.hk-utility { font-size: 0.6875rem; }
}

/* ==================================================== Mobile header ---
 *
 * Session 5C. The phone header was 212px of an 812px viewport before the
 * hero began — a quarter of the first screen spent on chrome. Measured, not
 * estimated: utility strip 88.8px wrapped onto THREE rows, header bar
 * 122.7px, hero copy starting at 236px.
 *
 * Scoped to below the tablet breakpoint so the 768px composition and the
 * desktop navigation bar are untouched.
 */

@media (max-width: 47.9375rem) {

	/* A shorter strip on a phone; the slides themselves are unchanged. */
	.hk-utility__viewport { min-block-size: 30px; padding-inline: 0.75rem; }
	.hk-utility__item { font-size: 0.6875rem; }

	/*
	 * Header bar: wordmark on its own line, then one control row — menu, then
	 * search.
	 *
	 * TRUE centring, not approximate. The wordmark spans the full container and
	 * centres itself inside it, so it sits on the viewport's centre line by
	 * construction: no rail widths to keep in balance, and nothing beside it
	 * that could drag it off centre. Centring it by auto margins, or by letting
	 * content-sized columns decide, put it 124.5px left of centre — measured,
	 * which is how that bug was found.
	 *
	 * Row two pairs the menu with the field it belongs beside. Both are the
	 * same height and share the field's border and radius, so the row reads as
	 * one control strip rather than a loose icon parked next to an input.
	 */
	.hk-header__bar { padding-block: 0.375rem; }
	/*
	 * Session 5P: row 1 now carries the wordmark AND the Account/Compare/Cart
	 * icons, so it needs a third track for them to sit in — previously the
	 * icons had no placement in this grid at all and auto-placed into the
	 * 44px menu-button track on a new row 3, which is why they rendered
	 * squeezed and clipped off the left edge on a real phone.
	 *
	 * The wordmark is left-aligned now rather than centred (it no longer has
	 * the row to itself, so the earlier true-centring rationale below no
	 * longer applies) and steps down from 2rem, which was sized for a full
	 * -width row: at 375px a 2rem mark plus three icons would collide.
	 */
	.hk-header__inner {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		column-gap: 0.5rem;
		row-gap: 0.375rem;
	}
	.hk-brand {
		grid-column: 1 / 3;
		grid-row: 1;
		justify-self: start;
		align-items: flex-start;
		text-align: start;
	}
	.hk-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
	.hk-navtoggle {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		align-self: stretch;
		inline-size: 44px;
		border: 1.5px solid var(--hk-border);
		border-radius: var(--hk-r);
		background: var(--hk-base);
	}
	.hk-navtoggle:hover { border-color: var(--hk-navy); }
	.hk-navtoggle[aria-expanded="true"] {
		border-color: var(--hk-navy);
		background: var(--hk-navy);
		color: #fff;
	}
	/* Spans the menu track and the field track, since the icons now hold column 3. */
	.hk-search { grid-column: 2 / -1; grid-row: 2; }

	/*
	 * The wordmark. There is no logo image on this install — the header
	 * renders the typographic fallback — so sizing it means scaling the two
	 * lines that make up the mark, not resizing artwork. Faces and weights
	 * are unchanged; only the size and tracking move.
	 *
	 * Stepped down from the 2rem used when this had the row to itself: it now
	 * shares row 1 with three 38px action icons, and at 375px the 2rem pair
	 * plus those icons overflows the row.
	 */
	.hk-brand__mark { font-size: 1.5rem; letter-spacing: 0.005em; }
	.hk-brand__sub { font-size: 0.5625rem; letter-spacing: 0.16em; margin-block-start: 1px; }

	/*
	 * If a real logo is ever set in WordPress, it inherits the same centred
	 * track and is capped to it, so it cannot overflow the column or force the
	 * row taller than the 44px touch line.
	 */
	.hk-brand img { max-inline-size: 100%; max-block-size: 42px; }

	/*
	 * Search stays the loudest thing in the header, because a model-number
	 * lookup is the job this site is actually hired for. One rectangle, one
	 * radius — not a rounded field inside a rounded bar.
	 *
	 * 16px input text is deliberate and is not a type choice: iOS zooms the
	 * viewport on focus for anything smaller, which shifts the whole layout
	 * sideways the moment a customer taps the field.
	 */
	.hk-search {
		gap: 0.375rem;
		padding-inline-start: 0.625rem;
		padding-inline-end: 0.25rem;
	}
	.hk-search__input {
		min-block-size: 46px;
		font-size: 1rem;
	}
	/*
	 * 44px, up from 38px. It costs nothing: the control's height is set by the
	 * 46px input, so the submit grows into space the field already had.
	 */
	.hk-search__submit {
		min-block-size: 44px;
		padding-inline: 0.75rem;
	}

	/*
	 * The wordmark is two short lines of type, so its box was 31px tall and the
	 * home link was the smallest target in the header. Centring it inside the
	 * 44px row gives it a full-height hit area without touching the type size.
	 */
	.hk-brand {
		justify-content: center;
		min-block-size: 44px;
	}

	/*
	 * Above the fold. The headline was set at 44px on a 375px screen, which
	 * bought three lines of stamped display face and pushed the lede, the CTA
	 * ladder and the image stage off the first screen. It still speaks at full
	 * volume; it just stops shouting over the rest of the pitch.
	 */
	.hk-hero__stage { padding-block: 1.25rem 1.375rem; }
	.hk-hero__eyebrow { margin-block-end: 0.625rem; font-size: 0.6875rem; }
	.hk-hero__title {
		font-size: clamp(2rem, 8.6vw, 2.5rem);
		margin-block-end: 0.75rem;
		max-inline-size: 15ch;
		letter-spacing: -0.03em;
	}
	.hk-hero__lede { font-size: 1rem; line-height: 1.55; margin-block-end: 1.125rem; }
	.hk-hero__actions { gap: 0.5rem; margin-block-end: 0.875rem; }
}


/* ============================================ Mobile page hierarchy ---
 *
 * Session 5C, part two. Measured at 375px the homepage ran to 10,335px —
 * 12.7 phone screens — and every one of its ten sections carried the same
 * 32px/32px padding, the same 22px heading and the same head-to-grid gap.
 * Nothing was a chapter, because everything was.
 *
 * This does NOT scale every token down. It sorts the page into three
 * weights, then attacks the two components that were actually generating
 * the length: the product card (426px each, eight of them) and the category
 * card (242px each, ten of them).
 *
 * Everything is scoped below the tablet breakpoint. Desktop composition,
 * spacing and type are untouched.
 */

@media (max-width: 47.9375rem) {

	/* ---------------------------------------------- Chapter weighting --- */

	/*
	 * Three weights instead of one:
	 *
	 *   chapter    pillars, project band — the two places the page makes an
	 *              argument rather than lists stock
	 *   standard   the merchandise sections
	 *   supporting brands, services, closing CTA — real content, quieter
	 *              delivery, no claim on a full screen of their own
	 */
	.hk-section { padding-block: 1.75rem; }
	.hk-section.hk-pillars,
	.hk-section.hk-projectband { padding-block: 2.25rem; }
	.hk-section.hk-brands { padding-block: 1.125rem; }
	.hk-section.hk-services,
	.hk-section.hk-ctaband { padding-block: 1.5rem; }

	/* Section heads: the gap between a heading and the thing it heads was
	   24px on a 375px screen, which reads as a break rather than a label. */
	.hk-section__head { margin-block-end: 0.875rem; gap: 0.25rem; }
	.hk-section__title { font-size: 1.1875rem; letter-spacing: -0.015em; }
	.hk-section__lede { font-size: 0.9375rem; line-height: 1.5; margin-block-start: 0.25rem; }

	/* --------------------------------------------------- Product card --- */

	/*
	 * 426px per card, two columns, eight cards: the Featured section alone
	 * was 1,870px. The image keeps its prominence — it is still the largest
	 * element on the card and still `contain`, so no photograph is cropped —
	 * but a 4:3 stage removes the dead band a square left above and below a
	 * wide prep table.
	 */
	.hk-card__media { aspect-ratio: 4 / 3; }
	.hk-card__media img { padding: 0.5rem; }
	.hk-card__body { gap: 0.25rem; padding: 0.625rem 0.625rem 0.6875rem; }
	.hk-card__brand { font-size: 0.625rem; letter-spacing: 0.06em; }

	/*
	 * Two lines, not three. Model numbers sit at the front of these titles,
	 * so the second line is where identification is already finished; the
	 * third was carrying the tail of a spec phrase.
	 */
	.hk-card__title { font-size: 0.8125rem; line-height: 1.3; -webkit-line-clamp: 2; line-clamp: 2; }
	.hk-card__meta { gap: 0.25rem; }
	.hk-card__meta .hk-tag { font-size: 0.625rem; padding-block: 0.0625rem; padding-inline: 0.375rem; }
	.hk-card__stock { font-size: 0.6875rem; }
	.hk-card__price { font-size: 1rem; margin-block-start: auto; padding-block-start: 0.25rem; }
	.hk-card__actions { margin-block-start: 0.375rem; }
	.hk-card__actions .hk-btn { min-block-size: 40px; font-size: 0.8125rem; }

	/*
	 * The dev marker must stay unmistakable at this size. It keeps its own
	 * line rather than being squeezed alongside the figure.
	 */
	.hk-card__price .hk-devprice { display: block; margin-inline-start: 0; margin-block-start: 0.1875rem; }

	/* -------------------------------------------------- Category card --- */

	/*
	 * Six categories, then a way out. The homepage does not need to be the
	 * taxonomy — the mega-menu, the shop page and every archive already are.
	 */
	.hk-catgrid .hk-cat:nth-child(n + 7) { display: none; }
	.hk-catgrid__more { display: block; margin: 0.75rem 0 0; }
	/*
	 * The head link and the block below the grid are the same destination, so
	 * exactly one of them is ever rendered. display:none removes the other from
	 * the accessibility tree and the tab order outright — measured with both
	 * visible first, which is the bug this line fixes.
	 */
	#hk-cats-title ~ .hk-textlink,
	.hk-section__head:has(#hk-cats-title) .hk-textlink { display: none; }

	.hk-cat { gap: 0.25rem; padding: 0.5rem 0.5rem 0.6875rem; }
	.hk-cat__media { aspect-ratio: 4 / 3; padding: 0.375rem; }
	.hk-cat__name { font-size: 0.8125rem; line-height: 1.2; }
	.hk-cat__count { font-size: 0.6875rem; }

	/* ------------------------------------------------ Strategic cards --- */

	/*
	 * These stay a chapter — they are the answer to "what can Husky do for
	 * me" — but a 219px photograph per card, three deep, is a lot of scroll
	 * before the third one is even reached.
	 */
	/* 16:9, not 3:2 — 3:2 is TALLER than the 16:10 desktop stage and made the
	   section longer, which the first measurement caught. */
	.hk-pillar__media { aspect-ratio: 16 / 9; }
	.hk-pillars__grid { gap: 0.75rem; }
	.hk-pillar__body { padding: 0.875rem; }
	.hk-pillar__title { font-size: 1.0625rem; }
	.hk-pillar__text { font-size: 0.875rem; line-height: 1.5; }

	/* ---------------------------------------------- Supporting blocks --- */

	.hk-trust__item { padding-block: 0.625rem; }
	.hk-services__grid { gap: 0.625rem; }
	.hk-service { padding: 0.875rem; }
	.hk-brands__list { gap: 1rem 0.75rem; }
	.hk-project__steps { gap: 0.875rem; }
}

@media (min-width: 30rem) {
	.hk-catgrid { grid-template-columns: repeat(4, 1fr); }
	.hk-brands__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.hk-cardgrid { grid-template-columns: repeat(3, 1fr); }
	.hk-catgrid { grid-template-columns: repeat(4, 1fr); }
	.hk-brands__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/*
	 * Tablet recomposes the strategic cards rather than shrinking them: three
	 * columns at 768 gives each card 230px, which is too narrow for a
	 * photograph, a two-line title and a body paragraph. Stacked full-width
	 * with the photograph beside the copy uses the width the device actually
	 * has, and keeps all three on one screen.
	 */
	.hk-pillars__grid { grid-template-columns: 1fr; gap: 0.875rem; }
	.hk-pillar { flex-direction: row; align-items: stretch; }
	.hk-pillar__media { inline-size: 38%; flex: 0 0 38%; aspect-ratio: auto; }
	.hk-pillar__body { flex: 1 1 auto; }
	.hk-services__grid { grid-template-columns: repeat(2, 1fr); }
	.hk-mega__inner { grid-template-columns: repeat(2, 1fr); }
	.hk-header__actions { display: flex; }
	.hk-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
	.hk-trust__item + .hk-trust__item { border-block-start: 0; }
	.hk-trust__item:nth-child(n + 3) { border-block-start: 1px solid var(--hk-border); }
	.hk-project__steps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.75rem; }
	.hk-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	.hk-cta { flex-direction: row; align-items: center; padding: 1.5rem 1.75rem; }
	.hk-cta__copy { flex: 1 1 auto; }
	.hk-section { padding-block: 3rem; }
	.hk-newsband__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
	.hk-newsband__form { flex: 0 0 auto; padding-block-start: 0; }
}

@media (min-width: 64rem) {
	.hk-header__bar { padding-block: 0.875rem; }
	.hk-header__inner { grid-template-columns: auto minmax(18rem, 1fr) auto; gap: 1.5rem; }
	.hk-search { grid-column: auto; grid-row: auto; }
	.hk-search__submit-label { display: inline; }
	.hk-navtoggle { display: none; }

	.hk-nav[hidden] { display: block; }
	.hk-nav__list { flex-direction: row; align-items: stretch; gap: 0; }
	.hk-nav__link {
		inline-size: auto;
		min-block-size: 52px;
		padding-inline: 1rem;
		border-block-end: 0;
		border-radius: 0;
		font-size: 0.875rem;
		letter-spacing: 0.01em;
		position: relative;
	}
	.hk-nav__link:hover { background: rgb(255 255 255 / 10%); }
	.hk-header.is-stuck .hk-nav__link { min-block-size: 42px; }
	/* Gold underline on hover — accent as a surface, never as text. */
	.hk-nav__link::after {
		content: "";
		position: absolute;
		inset-inline: 1rem;
		inset-block-end: 0;
		block-size: 3px;
		background: var(--hk-gold);
		opacity: 0;
		transition: opacity var(--hk-t);
	}
	.hk-nav__link:hover::after,
	.hk-nav__trigger[aria-expanded="true"]::after { opacity: 1; }
	.hk-nav__item--mobilecta { display: none; }

	.hk-nav__item--mega { position: static; }

	/* Subtle vertical dividers between top-level subjects. */
	.hk-nav__list > .hk-nav__item + .hk-nav__item > .hk-nav__link::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block: 0.9375rem;
		inline-size: 1px;
		background: rgb(255 255 255 / 18%);
	}
	/*
	 * 32px plate on a 52px rail. The box scales down a full 20%; the type only
	 * eases from 13px to 12px, because tracked caps lose legibility faster than
	 * a box loses presence. Touch targets are untouched — this applies from
	 * 64rem up, where the pointer is a mouse.
	 */
	.hk-nav__item--cta { margin-inline-start: auto; display: flex; align-items: center; padding-block: 0; }
	.hk-navcta {
		inline-size: auto;
		min-block-size: 32px;
		padding-inline: 1rem;
		font-size: 0.75rem;
		letter-spacing: 0.07em;
	}
	.hk-mega {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		border-block-start: 1px solid var(--hk-border);
		box-shadow: var(--hk-lift);
		z-index: 40;
	}
	/*
	 * Columns balance by content rather than by count: a category with six
	 * children and one with none sit in the same grid without the short one
	 * leaving a hole. Four columns keeps line lengths scannable at 84rem.
	 */
	.hk-mega__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.25rem 1.75rem;
		padding-block: 1.25rem 1.5rem;
		align-items: start;
	}
	.hk-mega__col { padding-block: 0.25rem; }
	/*
	 * Twelve top-level categories with children would produce a menu taller than
	 * the viewport. The panel is capped and scrolls internally instead.
	 */
	.hk-mega__inner--scroll {
		max-block-size: min(30rem, calc(100dvh - 14rem));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.hk-mega__foot { grid-column: 1 / -1; border-block-start: 1px solid var(--hk-border); margin-block-start: 0.5rem; }

	.hk-hero--rs { padding-block: 1.5rem; }
	.hk-hero__stage { padding-block: 2rem 1.75rem; }

	/*
	 * Hero proportions: the copy column is the narrower one. A 44ch lede and
	 * an 11ch headline want about 40% of an 84rem grid, and giving the image
	 * the remainder is what makes the photograph the thing you see first.
	 */
	.hk-hero__frame { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; padding-block: 2rem 1.75rem; }
	.hk-hero__media { aspect-ratio: 4 / 3; }
	.hk-hero__media--fit { aspect-ratio: auto; }

	/*
	 * Overlay variant — Session 5S, restored as the fallback in 5S.2. Only
	 * reached when husky_render_hero_fallback() judged the resolved image
	 * genuinely banner-shaped (ratio > 1.8); below this breakpoint every
	 * hero, overlay-eligible or not, still uses the split layout above,
	 * which has no risk of text landing on the product photography at a
	 * width this narrow.
	 *
	 * Both children share one grid cell — the image as the full-bleed layer,
	 * the copy stacked on top — rather than reordering the DOM: copy stays
	 * first in source for reading order regardless of visual layering.
	 *
	 * The frame's own background (#f4f4f5) matches the photograph's own
	 * studio ground, so if the frame's height (set independently of the
	 * image's ratio, to give the overlaid copy room) doesn't exactly match
	 * the image, `contain`'s letterboxing is invisible rather than a visible
	 * boxed-in photo.
	 */
	.hk-hero__frame--overlay {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 0;
		min-block-size: 26rem;
		max-block-size: 34rem;
		padding-block: 0;
		border-radius: var(--hk-r-lg);
		overflow: hidden;
		background: #f4f4f5;
		box-shadow: 0 1px 2px rgb(37 50 84 / 6%), 0 20px 48px rgb(37 50 84 / 12%);
	}
	.hk-hero__frame--overlay .hk-hero__media,
	.hk-hero__frame--overlay .hk-hero__copy {
		grid-column: 1;
		grid-row: 1;
	}
	.hk-hero__frame--overlay .hk-hero__media {
		inline-size: 100%;
		block-size: 100%;
		border-radius: 0;
		background: transparent;
	}
	.hk-hero__frame--overlay .hk-hero__media--fit img { object-fit: contain; object-position: center; }
	.hk-hero__frame--overlay .hk-hero__copy {
		position: relative;
		z-index: 1;
		align-self: center;
		justify-self: start;
		max-inline-size: 27rem;
		padding-inline-start: 3rem;
	}

	.hk-trust__grid { grid-template-columns: repeat(4, 1fr); gap: 0 2rem; }
	.hk-trust__item:nth-child(n + 3) { border-block-start: 0; }
	.hk-trust__item { padding-block: 1rem; }
	/* Vertical hairlines between the four commitments, rather than four boxes. */
	.hk-trust__item + .hk-trust__item {
		border-inline-start: 1px solid var(--hk-border);
		padding-inline-start: 2rem;
		margin-inline-start: -1rem;
	}
	/*
	 * Product cards are four across on every desktop width, not five.
	 *
	 * A fifth column puts the card at 179px at 1024 and 246px at 1440, and a
	 * card that has to carry a three-line technical product name, a condition
	 * tag, availability, a price and a button does not have room at either.
	 * Four gives it ~300px at 1440, which goes to the photograph — the part of
	 * the card a buyer actually reads first. Eight featured products then fill
	 * exactly two rows at every width instead of leaving a ragged one.
	 *
	 * Category tiles stay five across: they carry two short lines, not a
	 * product record, and ten of them make two clean rows.
	 */
	.hk-cardgrid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
	.hk-catgrid { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
	/* Seven across from 1024 up — one row, as in the mockup. */
	.hk-brands__list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.25rem; }
	.hk-services__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
	/* Back to three photo-led columns once each has real width. */
	.hk-pillars__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.hk-pillar { flex-direction: column; }
	.hk-pillar__media { inline-size: 100%; flex: 0 0 auto; aspect-ratio: 16 / 10; }
	.hk-pillars__head { margin-block-end: 2.25rem; }
	.hk-pillar__body { padding: 1.5rem; }
	.hk-pillar__title { font-size: 1.125rem; }
	.hk-project { grid-template-columns: 1fr 1.7fr; gap: 3.5rem; align-items: start; }
	.hk-project__steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
	.hk-section { padding-block: var(--hk-space-section-lg); }
	.hk-container { padding-inline: 1.5rem; }
}

/*
 * The wide-tier container (hero, pillars, project band) gives real extra
 * width from 1440 up. Text columns stay exactly as wide as they were — every
 * one of them is already capped in `ch`, not a fraction — so the growth
 * below goes to the media side and to breathing room between columns, per
 * the Session 5G design principle: widen the composition, not the line
 * length.
 */
@media (min-width: 90rem) {
	.hk-hero__frame { grid-template-columns: 1fr 1.35fr; gap: 4.5rem; }
	.hk-hero__frame--overlay {
		grid-template-columns: 1fr;
		min-block-size: 30rem;
		max-block-size: 38rem;
	}
	.hk-hero__frame--overlay .hk-hero__copy { max-inline-size: 27rem; padding-inline-start: 4.5rem; }
	.hk-project { grid-template-columns: 1fr 1.85fr; gap: 4.5rem; }
	.hk-container { padding-inline: 2rem; }
}

/* ------------------------------------------------------- Accessibility --- */

:focus-visible { outline: 2px solid var(--hk-navy); outline-offset: 2px; border-radius: var(--hk-r); }
.hk-utility :focus-visible, .hk-project :focus-visible, .hk-cta :focus-visible, .hk-footer :focus-visible { outline-color: var(--hk-gold); }
:focus:not(:focus-visible) { outline: none; }

input, select, textarea {
	font: inherit;
	color: inherit;
	max-inline-size: 100%;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	padding-block: 0.5rem;
	padding-inline: 0.75rem;
	background: var(--hk-base);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}