/**
 * Husky Theme — page templates: catalogue, product page, brand page.
 *
 * Loaded alongside theme.css and reuses its tokens and components, so the
 * PDF's category, product and brand designs share one system.
 *
 * RTL RULE: logical properties throughout. The one place a physical transform
 * is unavoidable (the off-canvas filter drawer) is mirrored explicitly.
 */

/* =========================================================== Breadcrumbs */

.hk-crumbs { padding-block: 1rem 0.25rem; font-size: 0.8125rem; }
.hk-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.hk-crumbs li { display: inline-flex; align-items: center; gap: 0.375rem; }
.hk-crumbs a { color: var(--hk-muted); text-decoration: none; }
.hk-crumbs a:hover { color: var(--hk-navy); text-decoration: underline; }
.hk-crumbs [aria-current="page"] { color: var(--hk-navy); font-weight: 600; }
.hk-crumbs__sep { display: inline-flex; color: var(--hk-border); }

/* ============================================================= Catalogue */

/*
 * Page canvas (§C/§20/§21). Product cards, the filter rail and the toolbar are
 * all white; before 5U.1 the page behind them was white too, so a category
 * page was one flat plane broken only by hairlines — the "pale, unfinished"
 * read the owner flagged. Tinting only the catalogue region gives every white
 * surface something to sit on, without touching the homepage or any other
 * template. Existing token, not a new colour.
 */
.hk-catalog {
	padding-block-end: 3rem;
	background: var(--hk-surface);
}

/* ===================================================== Category panel ---
 *
 * Session 5U.1 built this as one composed module instead of loose content on
 * the page canvas — right call, wrong palette: a warm/cream panel (--hk-warm)
 * that the owner rejected outright against the newly approved reference
 * (`docs/Design/Website mockup/Catgory Colour reference.png`), which is
 * near-white and distinctly cool. Session 5U.2A corrects the surface without
 * inventing new colour: the panel is now --hk-base (pure white) on the
 * catalogue's existing --hk-surface canvas (a cool, already-established
 * light grey — used for the mega-menu and category-icon backgrounds
 * elsewhere in this theme), separated by a hairline border and the faintest
 * shadow rather than a tinted fill. No warm token is used anywhere in this
 * component any more.
 */

.hk-catpanel {
	margin-block: 0.5rem 1.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: 0 1px 2px rgb(37 50 84 / 4%);
	overflow: hidden;
}

/*
 * Hero gradient, pixel-sampled from the owner's reference (not guessed):
 * `docs/Design/Website mockup/Catgory Colour reference.png`, read via canvas
 * at native 1448x1086. It is a horizontal gradient only (a fixed x column
 * measured flat top-to-bottom, ruling out a diagonal/radial read) — near-white
 * rgb(250,249,247) for roughly the left 40% where the copy sits, easing to a
 * light warm grey rgb(238,233,230) by the right edge, behind the image. The
 * "BROWSE BY TYPE" section below was sampled separately and is flat white
 * (rgb(254,254,254)), confirmed at y=850 across 4 x positions — so the
 * gradient belongs on __hero only, not the whole panel.
 */
.hk-catpanel__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: linear-gradient(to right, #faf9f7 0%, #faf9f7 40%, #eee9e6 100%);
}
[dir="rtl"] .hk-catpanel__hero { background: linear-gradient(to left, #faf9f7 0%, #faf9f7 40%, #eee9e6 100%); }
.hk-catpanel__copy { padding: 1.5rem 1.5rem 1.25rem; align-self: center; }

.hk-catpanel__eyebrow {
	margin: 0 0 0.625rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-gold-onlight);
}

.hk-catpanel__title {
	margin: 0;
	font-size: clamp(1.875rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	color: var(--hk-navy);
}

/* One readable copy block, never two narrow columns (§5). The legacy
   WPBakery column wrappers are stripped server-side in
   husky_category_description_text(); this caps the measure so the lead can't
   run to a full-panel line length either. */
.hk-catpanel__intro {
	margin: 0.75rem 0 0;
	max-inline-size: 48ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hk-muted);
}

/*
 * Technical-benefit lines (§7/§8) — a small brass line icon and a short
 * phrase, precision-marker scale rather than a decorative icon row. Renders
 * only when husky_hero_benefits() finds real, editor-supplied
 * content for this term; on every category today that is nothing, so this
 * block is simply absent — the panel is deliberately laid out to look
 * complete with or without it (§7: "the visual system must work without
 * it"), not like a gap waiting to be filled.
 */
.hk-catpanel__benefits { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hk-catpanel__benefits li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--hk-ink); }
.hk-catpanel__benefits .hk-icon { flex: 0 0 auto; color: var(--hk-gold-onlight); }

/* --- Media states -------------------------------------------------------
 *
 * `--stage` is the state that actually renders across this catalogue today:
 * every category thumbnail audited on DEV is a 200-250px square product
 * cutout (266 of 270 under 600px wide, none at 900px). §9 of the 5U.2A brief
 * asks for real presence for that same small asset — no bordered box or
 * secondary background any more (§5: no boxes inside boxes), just the image
 * itself, centred and considerably larger than 5U.1's 15rem/10rem caps,
 * sitting directly on the panel's own white so a seamless product cutout
 * optically merges with its surface rather than looking framed.
 *
 * 250px source at a 240-320px display size (base/tablet/desktop below) is a
 * modest upscale, capped well short of the ~1.5x+ that started looking soft
 * when first tried at 1440px — measured live: a 384px render on a 250px
 * source pushed the whole module to 931px tall, which is the "giant hero"
 * §19 explicitly rules out. This is the balance point between "more
 * presence" (§9) and "not a giant hero" (§19) for the one asset size this
 * catalogue actually has today.
 *
 * `--editorial` is the mockup's treatment and activates automatically the
 * day real wide photography exists: the image bleeds to the panel edge, full
 * height, cropped deliberately. No category qualifies yet.
 */
.hk-catpanel__media { display: none; }

.hk-catpanel--stage .hk-catpanel__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.hk-catpanel--stage .hk-catpanel__media img {
	/*
	 * `inline-size`, not `max-inline-size` — a max only caps, it never grows
	 * an image past its own intrinsic size. Verified live at 1440px: with
	 * max-inline-size alone, a 250px source rendered at 250px, not the ~320px+
	 * presence §9 asks for. `inline-size: min(...)` sets the size directly, so
	 * the browser actually upscales toward the cap.
	 */
	inline-size: min(100%, 15rem);
	block-size: auto;
	object-fit: contain;
}

.hk-catpanel--editorial .hk-catpanel__media { display: block; block-size: 100%; }
.hk-catpanel--editorial .hk-catpanel__media img {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 15rem;
	object-fit: cover;
}

/* --- Child navigation inside the panel ---------------------------------- */

.hk-catpanel__nav {
	padding: 1.25rem 1.5rem 1.5rem;
	border-block-start: 1px solid var(--hk-border);
}

/*
 * Nav header (§4/§11/§16): the "Browse by type" label and the "View all"
 * escape hatch sit in the same row, directly above the cards — attached to
 * the module, not a floating textlink orphaned below it the way 5U.1 left it.
 */
.hk-catpanel__navhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.875rem;
}
.hk-catpanel__navtitle {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-catpanel__viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--hk-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hk-navy);
	text-decoration: none;
	white-space: nowrap;
}
.hk-catpanel__viewall .hk-icon { transition: transform var(--hk-t); }
.hk-catpanel__viewall:hover { color: var(--hk-gold-onlight); }
.hk-catpanel__viewall:hover .hk-icon { transform: translateX(2px); }

/*
 * A leaf panel is the same module one size down (§19) — the shopper has
 * already chosen, so the header gets out of the way faster. Session 5U.2A:
 * `--style-compact` is the SAME visual treatment, available on any category
 * via the admin Hero Style override — leaf categories just default to it
 * (§27, resolved in husky_get_hero_data()). One rule set, two ways to reach it.
 */
.hk-catpanel--leaf,
.hk-catpanel--style-compact { margin-block-end: 1.25rem; }
.hk-catpanel--leaf .hk-catpanel__copy,
.hk-catpanel--style-compact .hk-catpanel__copy { padding: 1.25rem 1.25rem 1rem; }
.hk-catpanel--leaf .hk-catpanel__title,
.hk-catpanel--style-compact .hk-catpanel__title { font-size: clamp(1.625rem, 4vw, 2.25rem); }
.hk-catpanel--leaf .hk-catpanel__intro,
.hk-catpanel--style-compact .hk-catpanel__intro { margin-block-start: 0.625rem; font-size: 0.9375rem; max-inline-size: 52ch; }
.hk-catpanel--leaf.hk-catpanel--stage .hk-catpanel__media,
.hk-catpanel--style-compact.hk-catpanel--stage .hk-catpanel__media { padding: 1rem; }
.hk-catpanel--leaf.hk-catpanel--stage .hk-catpanel__media img,
.hk-catpanel--style-compact.hk-catpanel--stage .hk-catpanel__media img { inline-size: min(100%, 13rem); }

/*
 * Minimal (§10 optional third state) — text-led even at desktop, for a
 * category with genuinely weak imagery. Builds on Compact's padding/type
 * scale above and shrinks the image column further rather than duplicating
 * every value again.
 */
.hk-catpanel--style-minimal.hk-catpanel--stage .hk-catpanel__media img { inline-size: min(100%, 9rem); }

/*
 * Measured at 390px in a real browser: the leaf image stage cost ~190px of
 * vertical space and pushed the first product card far down the page. On a
 * leaf/Compact category the shopper has already chosen and is here to see
 * products (§32), so the decorative stage is dropped on phones and returns
 * at tablet where it costs nothing. Editorial (branch default) keeps its
 * image at every width — there it is orienting content, not decoration.
 */
@media (max-width: 47.99rem) {
	.hk-catpanel--leaf .hk-catpanel__media,
	.hk-catpanel--style-compact .hk-catpanel__media,
	.hk-catpanel--style-minimal .hk-catpanel__media { display: none; }
}

/* Layout override (§9/§29): swaps which side the image sits on at desktop
   via `order`, not by re-emitting DOM in a different sequence — so the
   mobile stack order (title -> intro -> image -> nav) stays the one
   consistent order §28 asks for, regardless of the desktop layout choice. */
@media (min-width: 48rem) {
	.hk-catpanel--layout-image-left .hk-catpanel__media { order: -1; }
}

/* A configured Hero CTA with Browse by Type hidden still needs its own
   restrained footer slot (§25) rather than looking like an afterthought. */
.hk-catpanel__nav--ctaonly { display: flex; justify-content: flex-start; }

.hk-catalog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.75rem;
	border-block: 1px solid var(--hk-border);
	margin-block-end: 1.5rem;
	flex-wrap: wrap;
}
.hk-catalog__count { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--hk-muted); }
.hk-sort { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.hk-sort__label { font-size: 0.8125rem; font-weight: 600; color: var(--hk-muted); }
.hk-sort select { min-block-size: 40px; font-size: 0.875rem; }

.hk-catalog__layout { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }

/* Mobile: sidebar becomes an off-canvas drawer. */
.hk-catalog__side {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(88vw, 22rem);
	z-index: 60;
	background: var(--hk-base);
	border-inline-end: 1px solid var(--hk-border);
	padding: 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	transition: transform var(--hk-t);
}
.hk-catalog__side[data-open="true"] { transform: translateX(0); }
[dir="rtl"] .hk-catalog__side { transform: translateX(100%); }
[dir="rtl"] .hk-catalog__side[data-open="true"] { transform: translateX(0); }

.hk-catalog__sidehead { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.75rem; }
.hk-catalog__sidetitle { margin: 0; font-size: 1rem; color: var(--hk-navy); }
.hk-drawerclose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 40px;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-navy);
	cursor: pointer;
}
.hk-scrim {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgb(26 29 35 / 45%);
	border: 0;
	padding: 0;
	cursor: pointer;
}
.hk-scrim[hidden] { display: none; }

.hk-filters { display: flex; flex-direction: column; gap: 1.25rem; }
.hk-filter { padding-block-end: 1.25rem; border-block-end: 1px solid var(--hk-border); }
.hk-filter:last-of-type { border-block-end: 0; }
/*
 * Each filter group is a native <details>/<summary> — keyboard-operable and
 * screen-reader-announced (expanded/collapsed) with no JS. Sub-categories and
 * Brand ship `open` by default (see husky_render_filters()); everything else
 * starts collapsed so a category with several relevant specs doesn't present
 * as one long wall on first load.
 */
.hk-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-navy);
	cursor: pointer;
	list-style: none;
}
.hk-filter__title::-webkit-details-marker { display: none; }
.hk-filter__title::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	border-inline-end: 2px solid var(--hk-muted);
	border-block-end: 2px solid var(--hk-muted);
	transform: rotate(45deg);
	transition: transform var(--hk-t);
}
details[open] > .hk-filter__title::after { transform: rotate(-135deg); }
.hk-filter > .hk-filter__title { margin-block-end: 0; }
.hk-filter[open] > .hk-filter__title { margin-block-end: 0.625rem; }
.hk-filter__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.hk-filter__links a { display: flex; justify-content: space-between; gap: 0.5rem; padding-block: 0.375rem; font-size: 0.875rem; color: var(--hk-ink); text-decoration: none; }
.hk-filter__links a:hover { color: var(--hk-navy); text-decoration: underline; }
.hk-filter__count { font-size: 0.75rem; color: var(--hk-muted); }
.hk-filter__scroll { max-block-size: 15rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.125rem; }
.hk-check { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.3125rem; font-size: 0.875rem; cursor: pointer; }
.hk-check input { inline-size: 17px; block-size: 17px; accent-color: var(--hk-navy); flex: 0 0 auto; padding: 0; min-block-size: 0; }
.hk-check span:first-of-type { flex: 1 1 auto; }
.hk-filter__range { display: flex; align-items: center; gap: 0.5rem; }
.hk-filter__range input { inline-size: 100%; min-inline-size: 0; min-block-size: 40px; }
.hk-filter__note { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--hk-muted); }
.hk-filter__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }

.hk-cardgrid--catalog { grid-template-columns: repeat(2, 1fr); }

.hk-pagination { margin-block-start: 2rem; }
.hk-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; }
.hk-pagination a, .hk-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 42px;
	min-block-size: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-navy);
	text-decoration: none;
}
.hk-pagination a:hover { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-pagination .current { background: var(--hk-navy); border-color: var(--hk-navy); color: #fff; }

.hk-empty { padding: 3rem 1rem; text-align: center; border: 1px dashed var(--hk-border); border-radius: var(--hk-r-lg); }
.hk-empty h2 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--hk-navy); }
.hk-empty p { margin: 0 0 1.25rem; color: var(--hk-muted); }

/* ========================================================== Product page */

/*
 * Session 5W.1 §5: the PDP sat entirely on --hk-base (white), so the gallery
 * stage, buy panel, spec rows and body copy all read as one flat plane —
 * the "pale/plain" feedback. Reuses the same canvas the catalogue already
 * uses (.hk-catalog) rather than inventing a new tone: the page background
 * moves to --hk-surface, and the surfaces that should read as raised objects
 * (gallery stage, buy panel) stay explicitly --hk-base, so white-on-grey
 * itself does the layering work.
 */
.hk-pdp { padding-block-end: 6rem; background: var(--hk-surface); }
.hk-pdp__top { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding-block: 1rem 2rem; }
/*
 * Square, not 4:3. Most of the catalogue's product photography — this
 * one included — was shot/uploaded as a square canvas (this one is a native
 * 400x400). A 4:3 box around a square photo lets object-fit: contain
 * letterbox it, which is exactly the dead white space around the fryer
 * flagged in review. Mobile had already independently landed on 1:1 for
 * the same reason (see the 47.9375rem breakpoint below); this brings
 * desktop in line with it instead of the two disagreeing.
 */
.hk-pdp__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	overflow: hidden;
}
.hk-pdp__main img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 1rem; }
.hk-pdp__thumbs { list-style: none; margin: 0.625rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.hk-pdp__thumbs li { border: 1px solid var(--hk-border); border-radius: var(--hk-r); overflow: hidden; aspect-ratio: 1; }
.hk-pdp__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; }

.hk-pdp__brand { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hk-muted); }
/*
 * Session 5W.1A §5/§6: the H1 now sits inside the padded card rather than
 * the full-width column it used to have — the same Archivo treatment
 * (var(--hk-font-display) inherited from the sitewide h1 rule), the top of
 * its clamp trimmed a little ("slightly more contained," not shrunk) so a
 * long commercial name wraps comfortably inside the card's own padding
 * instead of pushing right up against it.
 */
.hk-pdp__title { margin: 0 0 0.75rem; font-size: clamp(1.375rem, 2.4vw + 1rem, 1.875rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--hk-navy); }
.hk-pdp__price { margin: 0.875rem 0 0.375rem; font-size: 1.875rem; font-weight: 800; color: var(--hk-navy); line-height: 1.1; }
.hk-pdp__quote { font-size: 1.25rem; font-weight: 700; color: var(--hk-muted); }
.hk-pdp__stock { margin: 0 0 1.25rem; font-size: 0.9375rem; font-weight: 600; }
.hk-pdp__stock.is-in { color: #17553a; }
.hk-pdp__stock.is-out { color: var(--hk-muted); }
.hk-pdp__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.hk-pdp__actions .hk-btn { flex: 1 1 12rem; }
/*
 * Session 5W.3B.1: final utility row inside the purchase card. Deliberately
 * quieter than every action above it — smaller text, muted colour, no icon
 * fill — so Favourites/Compare read as secondary housekeeping links, never
 * as a second set of primary CTAs.
 */
.hk-pdp__mini {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0.875rem 0 0;
	padding: 0.875rem 0 0;
	border-block-start: 1px solid var(--hk-border);
}
.hk-minilink { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--hk-muted); text-decoration: none; }
.hk-minilink:hover { color: var(--hk-navy); text-decoration: underline; }
.hk-minilink .hk-icon { inline-size: 15px; block-size: 15px; }

.hk-specs, .hk-downloads { margin-block-start: 1.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hk-border); }
.hk-specs__title { margin: 0 0 0.75rem; font-size: 1rem; color: var(--hk-navy); }
.hk-specs__list { margin: 0; }
.hk-specs__row { display: grid; grid-template-columns: 40% 1fr; gap: 0.75rem; padding-block: 0.5rem; border-block-end: 1px solid var(--hk-border); }
.hk-specs__row dt { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--hk-muted); }
.hk-specs__row dd { margin: 0; font-size: 0.875rem; color: var(--hk-ink); }
.hk-downloads ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.hk-downloads a { font-size: 0.875rem; font-weight: 600; color: var(--hk-navy); }

.hk-pdp__desc { padding-block: 1.5rem; border-block-start: 1px solid var(--hk-border); }
.hk-prose { font-size: 0.9375rem; line-height: 1.7; color: var(--hk-ink); max-inline-size: 74ch; }
.hk-prose img { border-radius: var(--hk-r); max-inline-size: 100%; height: auto; }
.hk-prose > * + * { margin-block-start: 1.25rem; }
.hk-prose h2, .hk-prose h3, .hk-prose h4, .hk-prose h5, .hk-prose h6 {
	margin-block: 2rem 0.75rem;
	font-family: var(--hk-font-display);
	font-weight: 700;
	line-height: 1.25;
	color: var(--hk-navy);
	letter-spacing: -0.01em;
}
.hk-prose h2 { font-size: 1.375rem; }
.hk-prose h3 { font-size: 1.1875rem; }
.hk-prose h4, .hk-prose h5, .hk-prose h6 { font-size: 1.0625rem; }
.hk-prose a { color: var(--hk-navy); text-decoration-color: var(--hk-border); text-underline-offset: 0.15em; }
.hk-prose a:hover { text-decoration-color: currentColor; }
.hk-prose ul, .hk-prose ol { margin: 0; padding-inline-start: 1.375rem; }
.hk-prose li + li { margin-block-start: 0.375rem; }
.hk-prose blockquote {
	margin: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--hk-gold);
	color: var(--hk-muted);
	font-style: italic;
}
.hk-prose hr { border: 0; border-block-start: 1px solid var(--hk-border); }
.hk-prose figure { margin: 0; }
.hk-prose figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--hk-muted); }
.hk-prose table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hk-prose th, .hk-prose td { padding: 0.625rem 0.75rem; border: 1px solid var(--hk-border); text-align: start; }
.hk-prose th { background: var(--hk-surface); color: var(--hk-navy); font-weight: 700; }
.hk-prose .wp-block-table { overflow-x: auto; }
.hk-prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.hk-prose .wp-block-column { flex: 1 1 16rem; }
.hk-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 0.625rem 1.125rem;
	border-radius: var(--hk-r);
	background: var(--hk-navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.hk-prose .wp-block-button__link:hover { background: var(--hk-navy-d); }
.hk-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--hk-navy);
	border: 1px solid var(--hk-navy);
}
.hk-prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.hk-prose .wp-block-gallery img { border-radius: var(--hk-r); }

.hk-contentpage { padding-block-end: 4rem; }
.hk-contentpage__head { margin-block: 0.5rem 2rem; }
.hk-contentpage__title { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: clamp(1.625rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--hk-navy); }
.hk-contentpage__lede { margin: 0; max-inline-size: 68ch; font-size: 1.0625rem; line-height: 1.6; color: var(--hk-muted); }

@media (max-width: 47.9375rem) {
	.hk-contentpage { padding-block-end: 3rem; }
	.hk-contentpage__head { margin-block: 0.25rem 1.5rem; }
	.hk-prose .wp-block-columns { flex-direction: column; gap: 1.25rem; }
}

/* Sticky bottom price + CTA bar */
.hk-stickybar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 45;
	background: var(--hk-base);
	border-block-start: 1px solid var(--hk-border);
	box-shadow: 0 -4px 20px rgb(37 50 84 / 10%);
	padding-block: 0.625rem;
	padding-block-end: max(0.625rem, env(safe-area-inset-bottom));
}
.hk-stickybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hk-stickybar__info { display: flex; flex-direction: column; min-inline-size: 0; }
.hk-stickybar__title { font-size: 0.75rem; color: var(--hk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-stickybar__price { font-size: 1rem; font-weight: 800; color: var(--hk-navy); }
.hk-stickybar__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }

/* ============================================================ Brand page */

/*
 * Session 5P: this was a full-bleed navy band, flagged in human visual QA
 * as too heavy for what is essentially a page header — the design brief
 * itself warns against "excessive navy." Session 5V.1B rebuilt it again
 * against the owner's manufacturer-page mockup (`docs/Design/Website
 * mockup/Manufacturer Page Mockup.png`) as the direct visual target, after
 * the owner flagged that the prior single-column version "did not actually
 * change enough" and still visually duplicated the logo with a large text
 * name beside it.
 *
 * Two-column composed panel, mockup-faithful: a narrower info column (logo,
 * eyebrow, count, description, CTAs) and a dominant image column, both
 * inside the same wide container the leaf/branch catalogue already uses
 * (§19 — "a bit more expansive," not a new container tier). The accent bar
 * stays — the one place a brand profile's colour is used safely (never as
 * text).
 */
.hk-brandhero {
	border-block-start: 3px solid var(--hk-brandhero-accent, var(--hk-gold));
}
.hk-brandhero__inner { padding-block: 2rem; }
.hk-brandhero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
/* Graceful degradation (§8, "if a real image exists") — a brand with no
   usable product photo (e.g. its one product carries no featured image)
   gets a text-only hero rather than an empty right-column gap. */
.hk-brandhero__grid--text-only { grid-template-columns: 1fr; max-inline-size: 42rem; }

.hk-brandhero__info { display: flex; flex-direction: column; }
.hk-brandhero__logo { margin-block-end: 1rem; max-inline-size: 11rem; max-block-size: 3.5rem; }
.hk-brandhero__logo img { display: block; max-inline-size: 100%; max-block-size: 3.5rem; block-size: auto; object-fit: contain; background: #fff; border-radius: var(--hk-r-md); padding: 0.375rem 0.625rem; border: 1px solid var(--hk-border); }

/*
 * §5/§6: a real logo is the visible brand identity now — the H1 with the
 * brand name gets .screen-reader-text (still one real, focusable heading for
 * SEO/accessibility, just not visually duplicating the logo). A brand with
 * no logo has nothing else to establish identity, so husky_render_brand_page()
 * leaves .hk-brandhero__title on the H1 instead in that case, and this rule
 * still applies to style it.
 */
.hk-brandhero__title { margin: 0 0 0.375rem; font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--hk-navy); }
.hk-brandhero__eyebrow { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hk-muted); }
.hk-brandhero__count { margin: 0 0 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--hk-navy); }
.hk-brandhero__desc { margin-block-start: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--hk-ink); max-inline-size: 42ch; }
.hk-brandhero__desc p + p { margin-block-start: 0.875rem; }
.hk-brandhero__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: auto; padding-block-start: 1.5rem; }
/* `.hk-btn--ghost` is a white-on-dark treatment (correct on the homepage's navy section); this header is light now, so its one use here needs the opposite ink. */
.hk-brandhero__actions .hk-btn--ghost { color: var(--hk-navy); border-color: var(--hk-border); }
.hk-brandhero__actions .hk-btn--ghost:hover { background: var(--hk-surface); border-color: var(--hk-navy); }

/*
 * §8: the mockup's right column is a large lifestyle kitchen photo. Audited
 * again this session — no such asset exists for any brand in this catalogue
 * (see husky_get_brand_hero_image_id()), so this renders the brand's own
 * real product photo instead, contained rather than cropped so a small
 * product-cutout source (this catalogue's actual image stock — the same
 * finding Session 5U.1 made for category imagery) never looks stretched or
 * fabricated. Same "stage" principle as .hk-catpanel--stage, sized larger
 * because here the whole column is dedicated to it.
 */
.hk-brandhero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 16rem;
	padding: 1.5rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	box-shadow: var(--hk-shadow);
}
.hk-brandhero__media img { inline-size: min(100%, 20rem); block-size: auto; object-fit: contain; }

/*
 * Category shelf — Session 5V.1/5V.1A/5V.1B. Rebuilt in 5V.1B to match the
 * mockup's compact horizontal row card (small image, name + count, trailing
 * chevron) rather than the vertical image-on-top card 5V.1 borrowed from the
 * branch-page shelf — a dedicated component since the mockup's card reads
 * meaningfully differently, not a reinterpretation of the shared one.
 * §13/§14: real bottom margin plus a top rule now separate this section
 * cleanly from both the hero above and the filter/results area below — the
 * "filter rail starts too high" complaint was this section carrying no
 * breathing room after it, not the sidebar's own position.
 */
.hk-brandshelf {
	margin-block: 2.5rem 3rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--hk-border);
}
.hk-brandshelf__title {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-brandshelf__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
.hk-brandshelf__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	text-decoration: none;
	color: var(--hk-navy);
	background: var(--hk-base);
	transition: border-color var(--hk-t), transform var(--hk-t);
}
.hk-brandshelf__link:hover,
.hk-brandshelf__link:focus-visible {
	border-color: var(--hk-gold);
	transform: translateY(-1px);
}
.hk-brandshelf__link:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.hk-brandshelf__link { transition: border-color var(--hk-t); }
	.hk-brandshelf__link:hover, .hk-brandshelf__link:focus-visible { transform: none; }
}
.hk-brandshelf__figure {
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: var(--hk-r);
	background: var(--hk-surface);
	overflow: hidden;
}
.hk-brandshelf__figure img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.hk-brandshelf__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.hk-brandshelf__name { font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
.hk-brandshelf__count { font-size: 0.75rem; color: var(--hk-muted); }
.hk-brandshelf__chevron { flex: 0 0 auto; color: var(--hk-border); }

/*
 * §13/§14: the sidebar/results row itself was always correctly positioned —
 * `align-items: start` in the ≥64rem `.hk-catalog__layout` rule below simply
 * has nothing above it to create separation on a headless brand archive
 * (`show_head: false`, no breadcrumb/H1 panel there). Scoped to `.hk-brandpage`
 * only, so the shop archive (the layout's other headless caller) is untouched.
 */
.hk-brandpage .hk-catalog { padding-block-start: 0.5rem; }

@media (min-width: 48rem) {
	.hk-brandshelf__grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}

@media (min-width: 64rem) {
	.hk-brandhero__inner { padding-block: 3rem; }
	.hk-brandhero__grid { grid-template-columns: minmax(19rem, 42%) 1fr; gap: 3rem; }
	.hk-brandhero__grid--text-only { grid-template-columns: 1fr; }
	.hk-brandhero__media { min-block-size: 100%; }
	.hk-brandhero__media img { inline-size: min(100%, 24rem); }
	.hk-brandpage .hk-catalog { padding-block-start: 1.5rem; }
}

.hk-faq { padding-block: 1rem 3rem; }
.hk-faq__list { display: flex; flex-direction: column; gap: 0.625rem; margin-block-start: 1.25rem; }
.hk-faq__item { border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); background: var(--hk-base); }
.hk-faq__item summary {
	cursor: pointer;
	padding: 0.875rem 1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--hk-navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.hk-faq__item summary::-webkit-details-marker { display: none; }
.hk-faq__item p { margin: 0; padding: 0 1rem 1rem; font-size: 0.9375rem; line-height: 1.65; color: var(--hk-muted); }

/* Background lock while the mobile filter drawer is open — the scrim alone
   stops interacting with the page behind it, but without this the page
   itself keeps scrolling under a fixed-position drawer. */
body.hk-scrimopen { overflow: hidden; }

/* =========================================================== Breakpoints */

@media (min-width: 48rem) {
	.hk-cardgrid--catalog { grid-template-columns: repeat(3, 1fr); }
	/*
	 * The product page stays single-column at tablet.
	 *
	 * Two 340px columns here gave the purchase panel a 303px button and left
	 * 152px for every specification value - measured at 768. The brief's own
	 * warning about extremely narrow side-by-side columns is exactly this case,
	 * so the split now waits for 64rem where both columns have room.
	 */
	.hk-brandhero__inner { padding-block: 3.5rem 3rem; }
	.hk-filter__actions { flex-direction: row; align-items: center; }

	/*
	 * The panel becomes a real two-column composition once there is width for
	 * it: copy on one side, imagery on the other, both inside the same surface
	 * so neither floats free on the page canvas (§A/§7). Below this width they
	 * stack in the order §31 asks for — title, intro, image, then navigation —
	 * which the source order already gives for free.
	 *
	 * The image column is now the larger half (§9 — "the image needs much more
	 * presence"), a deliberate reversal from 5U.1's text-favoured 60/40 split.
	 */
	.hk-catpanel--media .hk-catpanel__hero { grid-template-columns: 1fr 1.2fr; gap: 0; }
	.hk-catpanel__copy { padding: 2rem 2rem 1.75rem; }
	.hk-catpanel__nav { padding: 1.5rem 2rem 1.75rem; }

	.hk-catpanel--stage .hk-catpanel__media { padding: 1.5rem 2rem; }
	.hk-catpanel--stage .hk-catpanel__media img { inline-size: min(100%, 18rem); }

	.hk-catpanel--leaf .hk-catpanel__copy { padding: 1.5rem 1.75rem; }
	.hk-catpanel--leaf.hk-catpanel--media .hk-catpanel__hero { grid-template-columns: 1fr 34%; }
	.hk-catpanel--leaf.hk-catpanel--stage .hk-catpanel__media { padding: 1rem 1.25rem; }
	.hk-catpanel--leaf.hk-catpanel--stage .hk-catpanel__media img { inline-size: min(100%, 14rem); }
}

@media (min-width: 64rem) {
	/*
	 * Session 5U.2C.1 §5/§6: sidebar widened 17rem (272px) -> 19rem (304px),
	 * inside the requested 280-320px range, and the gutter grew 2.5rem ->
	 * 3rem so the rail reads as its own column next to the results rather
	 * than a narrow strip crammed against the grid. This is also the
	 * breakpoint where the toolbar/pills (now inside .hk-catalog__main, see
	 * husky_render_catalog()) start aligning to the content column instead
	 * of spanning the sidebar's width too.
	 */
	.hk-catalog__layout { grid-template-columns: 19rem 1fr; gap: 3rem; align-items: start; }
	/*
	 * Sectional contrast on the leaf page (§20/§C): the rail is a white panel
	 * lifted off the tinted catalogue canvas, so it reads as its own region
	 * rather than as a bordered rectangle drawn on the same plane as the grid.
	 */
	.hk-catalog__side {
		position: sticky;
		inset-block-start: 9.5rem;
		inline-size: auto;
		z-index: 1;
		transform: none;
		border: 1px solid var(--hk-border);
		border-radius: var(--hk-r-lg);
		background: var(--hk-base);
		max-block-size: calc(100dvh - 11rem);
		padding: 1.375rem;
	}
	/*
	 * Vertical density (§19): 5U.1 grew padding at every breakpoint, which is
	 * how the branch panel reached 819px tall at 1440 — measured in a real
	 * browser, well into the "giant hero" the brief now explicitly rejects.
	 * Padding here stays close to the 48rem step rather than growing again;
	 * the extra width goes to the image (§9), not to empty margin.
	 */
	.hk-catpanel__copy { padding: 2.25rem 2rem; }
	.hk-catpanel__nav { padding: 1.75rem 2rem 2rem; }
	.hk-catpanel--stage .hk-catpanel__media img { inline-size: min(100%, 20rem); }
	.hk-catpanel--leaf .hk-catpanel__copy { padding: 1.625rem 2rem; }
	[dir="rtl"] .hk-catalog__side { transform: none; }
	.hk-catalog__sidehead .hk-drawerclose { display: none; }
	.hk-filtertoggle { display: none; }
	.hk-scrim { display: none; }
	.hk-cardgrid--catalog { grid-template-columns: repeat(3, 1fr); }
	/*
	 * Session 5W.1: grid-template-columns/gap for this breakpoint are set by
	 * the more specific ≥64rem rule further down (§9 in that comment block) —
	 * only padding-block is real here, kept so it isn't lost.
	 */
	.hk-pdp__top { padding-block: 1.5rem 3rem; }
	.hk-stickybar { padding-block: 0.75rem; }
}

/*
 * Card density at wide desktop — Session 5U.2C.1 §7/§8: owner preference is
 * explicitly a 5-up grid at 1440/1920. With the container now
 * --hk-container-wide (1520px) and the sidebar at 19rem/3rem gap (see the
 * 64rem block above), the results column at 1440px works out to roughly
 * 1520 - 304 - 48 = 1168px — five cards at ~224px each after gaps, close to
 * the ~247px cards the previous 4-up tier produced at this same width, not
 * an aggressive squeeze. (History: this was 3-up until an earlier session
 * moved it to 4-up next to a 17rem sidebar; both the sidebar and the
 * container have since changed, so the math was re-derived here rather
 * than assumed to still hold.)
 */
@media (min-width: 90rem) {
	.hk-cardgrid--catalog { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================ Dev placeholder pricing ---
   Visible only on the development host. Deliberately loud so a synthetic
   price can never be mistaken for a real one during review. */

.hk-devprice {
	display: inline-block;
	margin-inline-start: 0.4375rem;
	padding-block: 0.125rem;
	padding-inline: 0.375rem;
	border-radius: 4px;
	background: #7a2f2f;
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	vertical-align: middle;
	white-space: nowrap;
}

.hk-devnotice {
	margin: 0 0 1rem;
	padding: 0.625rem 0.75rem;
	border: 1px dashed #7a2f2f;
	border-radius: var(--hk-r);
	background: #fdf5f5;
	color: #6d2828;
	font-size: 0.8125rem;
	line-height: 1.5;
}


/* =========================================== Subcategory navigation ---
 *
 * Session 5U.1 redesign. These were horizontal list-rows with a 38px
 * thumbnail — the owner's screenshots show them reading as small utility
 * rows rather than equipment navigation. The mockup's tiles stack instead:
 * a generous image zone on top, the category name beneath it, the count as
 * quiet metadata, and a directional arrow in the corner.
 *
 * They sit as white cards directly on the panel's own white — the same
 * treatment as the approved reference, where a card reads from its border
 * alone rather than from a background-colour shift (§5: no boxes inside
 * boxes; a tinted card on a tinted panel is exactly that).
 */

.hk-subcats { margin: 0; }
.hk-subcats__title {
	margin: 0 0 0.875rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
/*
 * Explicit column counts per breakpoint, NOT auto-fill.
 *
 * auto-fill was measured in a real browser at 1280px producing SEVEN 153px
 * columns — narrow enough that "Commercial Range" wrapped inside a 124px text
 * box, which is exactly the cramped wrapping §13 rules out. Fixed counts also
 * make the arrangement deliberate rather than emergent: a 10-child category
 * like Cooking Equipment lands 5 x 2 at wide desktop (§12) instead of a
 * lopsided 7 + 3.
 *
 * These rules must stay AFTER the breakpoint section above; equal specificity
 * means source order decides, and the earlier attempt at this lost the cascade
 * to the base rule.
 */
.hk-subcats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}
@media (min-width: 48rem) {
	.hk-subcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
	.hk-subcat__figure { block-size: 6rem; }
	.hk-subcat__name { font-size: 0.9375rem; }
}
@media (min-width: 64rem) {
	.hk-subcats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hk-subcat__figure { block-size: 6.5rem; }
}
@media (min-width: 90rem) {
	.hk-subcats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.hk-subcat__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	block-size: 100%;
	padding: 0.875rem 0.875rem 2rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-navy);
	text-decoration: none;
	transition: border-color var(--hk-t), box-shadow var(--hk-t);
}
/* Husky-specific touch: a brass interaction indicator on the one navigation
   surface a shopper uses over and over while drilling down — a hairline
   border and an arrow nudge, not a new component. */
.hk-subcat__link:hover,
.hk-subcat__link:focus-visible {
	border-color: var(--hk-gold);
	box-shadow: var(--hk-shadow);
}
.hk-subcat__link:hover .hk-subcat__arrow,
.hk-subcat__link:focus-visible .hk-subcat__arrow { color: var(--hk-gold-onlight); transform: translateX(2px); }

/* Image zone. Real category thumbnails here are 200-250px squares, so they
   are contained at their own scale on a neutral ground — never stretched to
   fill the tile, never upscaled. The icon glyph occupies the identical slot,
   so a category with no image keeps the same tile geometry. */
.hk-subcat__figure {
	display: grid;
	place-items: center;
	block-size: 5rem;
	border-radius: calc(var(--hk-r) - 2px);
	background: var(--hk-surface);
	overflow: hidden;
}
.hk-subcat__figure img { max-inline-size: 90%; max-block-size: 90%; inline-size: auto; block-size: auto; object-fit: contain; }
.hk-subcat__icon { display: grid; place-items: center; color: var(--hk-navy); }

.hk-subcat__body { display: block; }
.hk-subcat__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/* Two lines reserved so a one-line and a two-line name keep the same card
	   height — §13's consistent-height requirement without fixing a height. */
	min-block-size: 2.4em;
	font-family: var(--hk-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-subcat__count { display: block; margin-block-start: 0.25rem; font-size: 0.75rem; color: var(--hk-muted); }

.hk-subcat__arrow {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.875rem;
	display: inline-flex;
	color: var(--hk-border);
	transition: transform var(--hk-t), color var(--hk-t);
}
[dir="rtl"] .hk-subcat__arrow { transform: scaleX(-1); }
[dir="rtl"] .hk-subcat__link:hover .hk-subcat__arrow,
[dir="rtl"] .hk-subcat__link:focus-visible .hk-subcat__arrow { transform: scaleX(-1) translateX(2px); }

/* ------------------------------------------------------ Active filters --- */

.hk-activefilters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 1rem;
}
.hk-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.625rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-base);
	color: var(--hk-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}
.hk-pill:hover { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-pill span[aria-hidden] { color: var(--hk-muted); font-weight: 400; }
.hk-activefilters__clear {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hk-muted);
	text-decoration: underline;
	text-decoration-color: var(--hk-border);
}
.hk-activefilters__clear:hover { color: var(--hk-navy); text-decoration-color: currentColor; }

.hk-catalog__gridtitle {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--hk-navy);
}

/* Lower content area. Empty until an editor writes real content. */
/*
 * Session 5U.2B §27: a subtle top divider and a constrained readable width
 * already existed; adding a very light secondary surface so the long-form
 * copy reads as one deliberate closing section rather than loose text
 * trailing off the page beneath the editorial modules above it.
 */
.hk-catcontent {
	margin-block: 2.5rem 0;
	padding: 2rem;
	border-block-start: 1px solid var(--hk-border);
	background: var(--hk-surface);
	border-radius: var(--hk-r-lg);
}
.hk-catcontent__prose { max-inline-size: 68ch; }
.hk-catlinks { margin-block-start: 1.5rem; }
.hk-catlinks__title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: var(--hk-navy); }
.hk-catlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hk-catlinks a {
	display: inline-block;
	padding-block: 0.375rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-base);
	font-size: 0.8125rem;
	color: var(--hk-navy);
	text-decoration: none;
}
.hk-catlinks a:hover { border-color: var(--hk-navy); background: var(--hk-surface); }

/* =============================================== Editorial modules ---
 *
 * Session 5U.2B. Page rhythm: Category Hero -> Browse by Type (quick nav,
 * "I know where I want to go") -> THIS (an information feed, "help me
 * understand what's available") -> supporting content. Cards are stacked
 * (image on top, content below) — the information architecture of the
 * owner's Vortex reference, none of its visual specifics: Husky's own
 * near-white/navy/brass tokens, an 8px radius (--hk-r, already the site's
 * "restrained/industrial" radius), a hairline border, no shadow stack.
 */

.hk-editorial { margin-block: 2.5rem 0; }
.hk-editorial__heading {
	margin: 0 0 1.25rem;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}

.hk-editorial__grid {
	display: grid;
	grid-template-columns: 1fr;
	/*
	 * align-items: start, not the grid default (stretch) — Session 5U.2B.2.
	 * A card with a real Editorial Image now stands taller than a plain
	 * cutout card by design (§ "photography should determine the final
	 * proportion"). Stretch would force a shorter cutout card to match its
	 * taller row-mate's full height, leaving dead space inside it; start
	 * lets each card keep its own natural, size-class-consistent height.
	 */
	align-items: start;
	gap: 1.25rem;
	margin-block-end: 1.25rem;
}
.hk-editorial__grid:last-child { margin-block-end: 0; }
.hk-editorial__grid--secondary { gap: 1rem; }

.hk-editorialcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	overflow: hidden;
}

/*
 * Session 5U.2B.3 §7: the height target has moved twice more since the
 * numbers above were written (9.5rem/11rem cutout, 15rem/25rem editorial).
 * The owner's latest direction: a single moderate middle ground for BOTH
 * the cutout (--stage) and real-photography (--editorial) states — taller
 * than the "compressed" 11rem cutout, shorter than the "oversized" 25rem
 * editorial height. Both now target the same ~300-380px band at desktop
 * (measured against real module width, not assumed), so a category that
 * gains real photography later doesn't visually jump in scale relative to
 * its still-cutout siblings — the fit mode (contain vs cover) still differs
 * (§6), only the box height around it no longer does.
 */
.hk-editorialcard__media {
	display: block;
	background: var(--hk-surface);
}
.hk-editorialcard--stage .hk-editorialcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 15rem;
	padding: 0.75rem;
}
.hk-editorialcard--stage .hk-editorialcard__media img {
	/*
	 * Default (square-ish source, the overwhelming real case — see
	 * husky_image_shape()): fill height first, cap width so nothing
	 * overflows its column. object-fit: contain throughout; nothing is ever
	 * cropped (§5/§6). This remains the ceiling of what CSS alone can do —
	 * baked-in white margin inside the file itself (confirmed real via pixel
	 * sampling, not assumed) isn't something layout can remove without
	 * cropping into the equipment on the other axis, so a source image with
	 * heavy internal padding still looks smaller here than one without.
	 * That remainder is a content gap, reported as one, not silently fixed.
	 */
	inline-size: auto;
	block-size: 95%;
	max-inline-size: 94%;
	object-fit: contain;
	margin-inline: auto;
}
/*
 * Shape-aware fill (§9 of the brief): generic classes driven by the file's
 * real dimensions (husky_image_shape()), never a per-term selector. Today
 * every real thumbnail in this catalogue is a square file, so these two
 * overrides are dormant on the current asset library and activate
 * automatically the moment a genuinely wide or tall image is supplied
 * (through the existing Hero Image override, at any node) — real behaviour,
 * not simulated for the current screenshots.
 */
.hk-editorialcard--stage.hk-editorialcard--landscape .hk-editorialcard__media img {
	inline-size: 94%;
	block-size: auto;
	max-block-size: 94%;
}
.hk-editorialcard--stage.hk-editorialcard--portrait .hk-editorialcard__media img {
	block-size: 96%;
	max-inline-size: 88%;
}

/*
 * Editorial (cover-crop) state — for genuine wide/large photography only;
 * a contained product cutout never reaches this branch (it stays on the
 * shorter --stage sizing above, deliberately NOT inflated to match — a weak
 * cutout should not pretend to be a hero photo just to fill space).
 *
 * Session 5U.2B.3: now converged on the same ~300-380px band the cutout
 * state targets above, rather than the 25rem (400px) the previous session
 * measured — that height was above this session's own explicit ceiling
 * ("not as tall as the earliest oversized version"). Object-position
 * honours that child term's own Hero Image Position control, so a
 * focal-point setting made for the hero applies consistently if the same
 * image is reused in its module.
 */
.hk-editorialcard--editorial .hk-editorialcard__media { block-size: 15rem; padding: 0; }
.hk-editorialcard--editorial .hk-editorialcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.hk-editorialcard__body { display: flex; flex-direction: column; padding: 1.125rem 1.25rem 1.25rem; flex: 1 1 auto; }
.hk-editorialcard__headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
/*
 * Session 5U.2B.1: one heading carries what used to be an eyebrow plus a
 * separate title. Bumped noticeably larger on review while staying visibly
 * smaller than the page-level "Shop Cooking Equipment" H2 above the grid
 * (clamp(1.375rem, 3vw, 1.75rem), i.e. 22px minimum) — semibold rather than
 * bold keeps it from competing with that H2 for attention.
 */
.hk-editorialcard__title { margin: 0; font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; }
.hk-editorialcard__title a { color: var(--hk-navy); text-decoration: none; }
.hk-editorialcard__title a:hover { text-decoration: underline; text-decoration-color: var(--hk-gold); }
.hk-editorialcard__viewall { flex: 0 0 auto; }

.hk-editorialcard__desc {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--hk-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/*
 * Child category shelf — Session 5U.2B.3 §8-13, rebuilt from the owner's
 * mockup ("Sub Category Card Mockup.png"): real visual cards, not the old
 * icon-scale nav links. One subtle divider above the shelf, matching the
 * mockup and §24 ("one internal divider ... do not add unnecessary borders
 * around every content block") — the border lives on each item's IMAGE only,
 * exactly as drawn in the mockup, with the name sitting below it, outside
 * that border, not inside a second nested box.
 */
.hk-editorialshelf {
	list-style: none;
	margin: 1rem 0 0;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--hk-border);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 1rem 0.75rem;
}
.hk-editorialshelf__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--hk-navy);
}
.hk-editorialshelf__figure {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 0.625rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	overflow: hidden;
	transition: border-color var(--hk-t), transform var(--hk-t);
}
.hk-editorialshelf__figure img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}
/* Interaction (§13): border strengthens to brass, image lifts a hair —
   150-180ms via the existing --hk-t (160ms) token. Restrained, not dramatic. */
.hk-editorialshelf__link:hover .hk-editorialshelf__figure,
.hk-editorialshelf__link:focus-visible .hk-editorialshelf__figure {
	border-color: var(--hk-gold);
	transform: translateY(-2px);
}
.hk-editorialshelf__link:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 3px; border-radius: var(--hk-r); }
@media (prefers-reduced-motion: reduce) {
	.hk-editorialshelf__figure { transition: border-color var(--hk-t); }
	.hk-editorialshelf__link:hover .hk-editorialshelf__figure,
	.hk-editorialshelf__link:focus-visible .hk-editorialshelf__figure { transform: none; }
}
.hk-editorialshelf__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Secondary modules: the same card family, one size down (§20/§21) — the
   same fixed-stage-height, height-first-fill, shape-aware system as major
   cards, just smaller, so the two never look like unrelated components. */
.hk-editorialcard--secondary.hk-editorialcard--stage .hk-editorialcard__media { block-size: 9rem; padding: 0.5rem; }
.hk-editorialcard--secondary.hk-editorialcard--editorial .hk-editorialcard__media { block-size: 9rem; }
.hk-editorialcard--secondary .hk-editorialcard__body { padding: 0.875rem 1rem 1rem; }
.hk-editorialcard--secondary .hk-editorialcard__title { font-size: 1.125rem; }
.hk-editorialcard--secondary .hk-editorialcard__desc { margin-block-start: 0.375rem; -webkit-line-clamp: 2; }
.hk-editorialcard--secondary .hk-editorialshelf { margin-block-start: 0.75rem; padding-block-start: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }

@media (min-width: 64rem) {
	.hk-editorial__grid { grid-template-columns: repeat(2, 1fr); }
	.hk-editorial__grid--secondary { grid-template-columns: repeat(3, 1fr); }
	/*
	 * Session 5U.2B.3: cutout and editorial converge on the same middle-
	 * ground band at desktop — 21rem (336px), inside the requested
	 * 300-380px range — a real reversal from the prior session's
	 * deliberately-kept-shorter cutout (11rem) and deliberately-taller
	 * editorial (25rem, above this session's own ceiling). Measured live
	 * and reported in the HANDOFF entry, not assumed.
	 */
	.hk-editorialcard--stage .hk-editorialcard__media,
	.hk-editorialcard--editorial .hk-editorialcard__media { block-size: 21rem; }
	.hk-editorialcard--secondary.hk-editorialcard--stage .hk-editorialcard__media,
	.hk-editorialcard--secondary.hk-editorialcard--editorial .hk-editorialcard__media { block-size: 12rem; }
}

/* ==================================================== PDP additions ---
   Identity line, purchase area and the lower content sections. */

.hk-pdp__identity {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
}
.hk-pdp__sku { display: inline-flex; align-items: baseline; gap: 0.375rem; font-size: 0.875rem; color: var(--hk-ink); }
.hk-pdp__identitylabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hk-muted); }
.hk-tag--config { background: var(--hk-surface); color: var(--hk-navy); }

.hk-buy { margin-block: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.hk-buy__secondary { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hk-buy__options {
	padding: 1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-surface);
}
.hk-buy__optionstitle { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; color: var(--hk-navy); }
.hk-buy__option { margin: 0 0 0.75rem; display: grid; gap: 0.3125rem; }
.hk-buy__option label { font-size: 0.8125rem; font-weight: 600; color: var(--hk-ink); }
.hk-buy__option select { inline-size: 100%; min-block-size: 44px; }
.hk-buy__note { margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--hk-muted); }

/* WooCommerce's own add-to-cart and variation markup, given Husky styling
   without altering its structure or behaviour.

   The PDP quantity input previously inherited its color, background and
   font-size instead of declaring them, unlike the cart's `.qty` (below),
   which is why the cart quantity has always been legible while the PDP one
   rendered an empty-looking box. WooCommerce's own stylesheet only sets
   `width` and `text-align` on `.quantity .qty` — everything else here is
   Husky's, made explicit rather than assumed, plus native `-moz/-webkit`
   number-input resets so OS/browser theming cannot recolor the value. */
.hk-buy__native .quantity {
	display: inline-flex;
	align-items: stretch;
	margin-inline-end: 0.5rem;
}
.hk-buy__native .quantity input.qty {
	inline-size: 4.5rem;
	min-block-size: 44px;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-ink);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/*
 * Explicit −/+ buttons are added by theme.js, which wraps the untouched
 * native input in `.qty-stepper` and reuses it — same name, same min/max/
 * step, same change events WooCommerce's variation form already listens
 * for. Without JavaScript the input above renders exactly as it does here,
 * with its native browser spinner intact, so nothing is lost.
 */
.has-js .hk-buy__native .quantity .qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	overflow: hidden;
}
.has-js .hk-buy__native .quantity .qty-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	min-block-size: 44px;
	flex: 0 0 auto;
	border: 0;
	background: var(--hk-surface);
	color: var(--hk-navy);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}
.has-js .hk-buy__native .quantity .qty-stepper__btn:hover { background: var(--hk-border); }
.has-js .hk-buy__native .quantity .qty-stepper__btn:disabled { color: var(--hk-muted); cursor: not-allowed; opacity: 0.6; }
.has-js .hk-buy__native .quantity .qty-stepper input.qty {
	inline-size: 3.25rem;
	border: 0;
	border-inline: 1px solid var(--hk-border);
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.has-js .hk-buy__native .quantity .qty-stepper input.qty::-webkit-outer-spin-button,
.has-js .hk-buy__native .quantity .qty-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.hk-buy__native table.variations { inline-size: 100%; border-collapse: collapse; margin-block-end: 0.75rem; }
.hk-buy__native table.variations th,
.hk-buy__native table.variations td { display: block; text-align: start; padding: 0 0 0.5rem; }
.hk-buy__native table.variations label { font-size: 0.8125rem; font-weight: 600; }
.hk-buy__native table.variations select { inline-size: 100%; min-block-size: 44px; }
.hk-buy__native .woocommerce-variation-price { margin-block-end: 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--hk-navy); }
.hk-buy__native button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-block: 0.625rem;
	padding-inline: 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--hk-r);
	background: var(--hk-navy);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.hk-buy__native button.single_add_to_cart_button:hover { background: var(--hk-navy-d); }
.hk-buy__native .reset_variations { font-size: 0.8125rem; color: var(--hk-muted); }

.hk-financing-open { align-self: flex-start; }

/* ---------------------------------------------------- Financing modal --- */

.hk-modal[hidden] { display: none; }
body.hk-modalopen { overflow: hidden; }
.hk-modal__scrim {
	position: fixed;
	inset: 0;
	background: rgb(26 29 35 / 55%);
	border: 0;
	padding: 0;
	z-index: 1000;
}
.hk-modal__panel {
	position: fixed;
	inset-block: 5vh;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: min(34rem, calc(100vw - 2rem));
	max-block-size: 90vh;
	overflow-y: auto;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	box-shadow: 0 20px 50px rgb(26 29 35 / 25%);
	z-index: 1001;
	padding: 1.5rem;
}
.hk-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1rem;
}
.hk-modal__title { margin: 0; font-family: var(--hk-font-display); font-size: 1.25rem; font-weight: 700; color: var(--hk-navy); }
.hk-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	flex: 0 0 auto;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-ink);
	cursor: pointer;
}
.hk-modal__close:hover { background: var(--hk-surface); }

.hk-modal__tabs { display: flex; gap: 0.375rem; border-block-end: 1px solid var(--hk-border); margin-block-end: 1.25rem; }
.hk-modal__tab {
	padding: 0.625rem 0.25rem;
	margin-block-end: -1px;
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	color: var(--hk-muted);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.hk-modal__tab.is-active { color: var(--hk-navy); border-block-end-color: var(--hk-gold); }

.hk-finpanel[hidden] { display: none; }
.hk-finpanel__basis { margin: 0 0 1rem; font-size: 0.875rem; color: var(--hk-muted); }
.hk-finpanel__price { color: var(--hk-navy); font-variant-numeric: tabular-nums; }
.hk-finpanel__pending {
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-surface);
	color: var(--hk-ink);
	font-size: 0.875rem;
	line-height: 1.55;
}
.hk-finpanel__selector { display: flex; gap: 0.5rem; margin-block-end: 1rem; }
.hk-finpanel__option {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 0.75rem;
	min-block-size: 44px;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}
.hk-finpanel__option:has(input:checked) { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-finpanel__figures { margin: 0; }

.hk-finpanel__terms { margin: 0.875rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.hk-finpanel__terms li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.875rem; border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-finpanel__terms strong { font-family: var(--hk-font-display); font-size: 0.8125rem; color: var(--hk-navy); }
.hk-finpanel__terms span { font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

.hk-finpanel__disclaimer { margin: 1.25rem 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--hk-muted); }

.hk-modal__foot { margin-block-start: 1.25rem; }

/* ==========================================================================
   EconoLease calculator embed (Session 5AG.3) — inc/financing.php
   husky_render_financing_calculator_embed(). One shared component used
   inside the PDP financing modal and the standalone Financing page.
   ========================================================================== */

/* .hk-btn's own `display: inline-flex` (theme.css) otherwise beats the [hidden] attribute's UA default once JS sets it on the "Show Calculator" trigger. */
[data-hk-fincalc-trigger][hidden] { display: none; }

.hk-fincalc { margin-block-start: 1rem; position: relative; }
.hk-fincalc[hidden] { display: none; }
.hk-fincalc__frame {
	position: relative;
	block-size: 640px;
	max-block-size: 80vh;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	overflow: hidden;
	background: var(--hk-surface);
}
.hk-fincalc__iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.hk-fincalc__loading {
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 0.8125rem;
	color: var(--hk-muted);
}
.hk-fincalc__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	background: var(--hk-surface);
}
.hk-fincalc__fallback[hidden] { display: none; }
.hk-fincalc__fallback p { margin: 0; font-size: 0.875rem; color: var(--hk-muted); }

.hk-fin__disclaimer--inline { margin-block-start: 0.875rem; padding: 0; }

@media (max-width: 26.25rem) {
	.hk-modal__panel { inset-block-start: 0; inset-block-end: 0; max-block-size: 100vh; border-radius: 0; }
}

/*
 * Product-image lightbox — Session 5W.1 §21-26, corrected to a white/near-
 * white surface in 5W.1B (§1: the owner flagged the dark-navy panel — the
 * backdrop scrim stays a translucent dark overlay, only the panel itself
 * changes). Reuses `.hk-modal`'s scrim/open-close/focus-trap plumbing; only
 * the panel chrome is lightbox-specific — larger, white, prev/next controls
 * when there is more than one image.
 *
 * Every interactive control in here gets an explicit z-index so paint order
 * is deterministic rather than relying on DOM position: the close-button
 * defect this session fixed (see husky_output_pdp_lightbox()) was a
 * functional inert bug, not a stacking one, but an unstyled z-index:auto
 * button sharing a stacking context with an absolutely-positioned stage was
 * one contributing risk factor worth removing at the same time.
 */
.hk-lightbox__panel {
	inline-size: min(64rem, calc(100vw - 2rem));
	max-block-size: 90vh;
	padding: 1rem;
	background: var(--hk-base);
	border-color: var(--hk-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.hk-lightbox__close {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 3;
	background: var(--hk-base);
	border-color: var(--hk-border);
	color: var(--hk-ink);
}
.hk-lightbox__close:hover,
.hk-lightbox__close:focus-visible { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-lightbox__stage {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: min(76vh, 44rem);
	display: grid;
	place-items: center;
}
.hk-lightbox__img {
	grid-area: 1 / 1;
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	margin: auto;
	object-fit: contain;
}
.hk-lightbox__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--hk-border);
	border-radius: 50%;
	background: var(--hk-base);
	color: var(--hk-navy);
	cursor: pointer;
}
.hk-lightbox__nav:hover,
.hk-lightbox__nav:focus-visible { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-lightbox__nav--prev { inset-inline-start: 0.5rem; transform: translateY(-50%) rotate(180deg); }
.hk-lightbox__nav--next { inset-inline-end: 0.5rem; }
.hk-lightbox__count { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--hk-muted); font-variant-numeric: tabular-nums; }

@media (min-width: 48rem) {
	.hk-lightbox__panel { padding: 1.5rem; }
	.hk-lightbox__nav { inline-size: 3.25rem; block-size: 3.25rem; }
	.hk-lightbox__nav--prev { inset-inline-start: 1rem; }
	.hk-lightbox__nav--next { inset-inline-end: 1rem; }
}

.hk-pdp__short { margin-block: 1.25rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
/*
 * Session 5W.1 §18-20: on real products (SX-24 among them) this content is
 * WooCommerce's own short description, hand-formatted as "<strong>Label:</strong>
 * value<br>" pairs rather than structured attributes husky_get_spec_rows()
 * can read — real data, just not in the shape the structured spec table
 * needs, and presentation-only per §43 means restyling this markup rather
 * than parsing/rewriting it into a new table. Bold labels read as label
 * text, not just heavier body copy.
 */
.hk-pdp__short strong {
	display: inline-block;
	min-inline-size: 11rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hk-muted);
}

/*
 * Session 5W.1 §18/§20: "Additional specifications" used to be a heading
 * sitting directly on the page canvas with a single top hairline — correct
 * information, but reading as loose body copy rather than a technical
 * table. A defined white panel (same restrained one hairline / one radius
 * / no shadow treatment as the buy panel) turns it into a compact
 * spec-sheet object against the page's now-grey canvas, without a shadow
 * or a second colour — the layering comes from the same white/grey pair
 * used everywhere else on this page.
 */
.hk-pdp__more {
	margin-block-start: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
}

/*
 * Below-fold rhythm — Session 5W.1C §11. §11 asks for "section spacing and
 * rules more than floating boxes", so the description and documents blocks
 * are deliberately NOT boxed: they sit on the page canvas separated by a
 * top rule and consistent spacing. Only the two genuinely tabular blocks
 * (specifications, and the key-spec strip above) get a white surface,
 * because a table benefits from a defined ground and body prose does not.
 * That gives white / canvas / white / canvas alternation down the page
 * without wrapping every block in a card.
 */
.hk-pdp__desc,
.hk-downloads {
	margin-block-start: 2rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--hk-border);
}
.hk-downloads { padding-block-end: 0; }

.hk-specs__list--wide { columns: 1; }

@media (min-width: 48rem) {
	.hk-specs__list--wide { columns: 2; column-gap: 2.5rem; }
	.hk-specs__list--wide .hk-specs__row { break-inside: avoid; }
	.hk-buy__options { max-inline-size: 26rem; }
}

/* ==================================================== Live search panel ---
   Anchored under the header search field. Rendered server-side so pricing
   comes from the same state machine as cards and product pages. */

.hk-search { position: relative; }

.hk-searchpanel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 0.5rem);
	z-index: 60;
	max-block-size: min(32rem, calc(100dvh - 10rem));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: 0.5rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: var(--hk-lift);
	text-align: start;
}
.hk-searchpanel[hidden] { display: none; }

.hk-searchpanel__label {
	margin: 0.375rem 0 0.25rem;
	padding-inline: 0.875rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-searchpanel__loading {
	margin: 0;
	padding: 1.25rem 0.875rem;
	font-size: 0.875rem;
	color: var(--hk-muted);
}

.hk-sresult {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.875rem;
	text-decoration: none;
	color: var(--hk-ink);
}
.hk-sresult:hover,
.hk-sresult.is-active { background: var(--hk-surface); }
.hk-sresult__media {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	overflow: hidden;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: #fff;
}
.hk-sresult__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.hk-sresult__noimage { color: var(--hk-muted); }
.hk-sresult__body { min-inline-size: 0; }
.hk-sresult__brand {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-sresult__title {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hk-sresult__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.125rem;
	font-size: 0.75rem;
	color: var(--hk-muted);
}
.hk-sresult__sku { font-variant-numeric: tabular-nums; }
.hk-sresult__stock.is-in { color: #1f6b45; }
.hk-sresult__stock.is-out { color: #8a3d3d; }
.hk-sresult__price {
	grid-column: 2;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hk-navy);
}
.hk-sresult__quote { font-size: 0.8125rem; font-weight: 600; color: var(--hk-muted); }

.hk-scat {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	color: var(--hk-navy);
	text-decoration: none;
}
.hk-scat:hover, .hk-scat.is-active { background: var(--hk-surface); }
.hk-scat__icon { color: var(--hk-muted); display: flex; }
.hk-scat__name { font-weight: 600; }
.hk-scat__count { margin-inline-start: auto; font-size: 0.75rem; color: var(--hk-muted); }

.hk-searchpanel__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-block-start: 0.375rem;
	padding: 0.75rem;
	border-block-start: 1px solid var(--hk-border);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hk-navy);
	text-decoration: none;
}
.hk-searchpanel__all:hover, .hk-searchpanel__all.is-active { background: var(--hk-surface); }

.hk-searchpanel__empty { padding: 1.25rem 0.875rem; }
.hk-searchpanel__emptytitle { margin: 0 0 0.375rem; font-size: 0.9375rem; font-weight: 700; color: var(--hk-navy); }
.hk-searchpanel__emptytext { margin: 0 0 0.875rem; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

@media (min-width: 48rem) {
	.hk-sresult { grid-template-columns: 56px 1fr auto; gap: 0.875rem; }
	.hk-sresult__media { inline-size: 56px; block-size: 56px; }
	.hk-sresult__price { grid-column: auto; text-align: end; white-space: nowrap; }
}

/* ------------------------------------------ Live search on a phone ---
 *
 * Session 5C. The panel read as a stack of mini product cards: each result
 * was 109.7px tall because the price sat on its own row beneath the body, so
 * only TWO results cleared the software keyboard at 375px. A trade buyer
 * typing a model number wants a lookup list, not a catalogue.
 *
 * The row is recomposed into three columns — thumbnail, identity, price —
 * so the price shares the first row instead of claiming a second. Nothing
 * about retrieval, ordering or pricing changes: this file styles what
 * husky_render_search_result() already emits, and the price still comes from
 * husky_get_price_state().
 */

@media (max-width: 47.9375rem) {

	/*
	 * Attached to the field, not floating near it: a 4px offset, a modest
	 * radius and a single soft shadow instead of the large card treatment.
	 */
	.hk-searchpanel {
		inset-block-start: calc(100% + 0.25rem);
		/*
		 * 30rem, not 26. With the row height down to 85px the panel's own cap
		 * became the limit before the keyboard did — measured at 430x932, four
		 * rows showed because the panel stopped at 416px while 596px of screen
		 * was still free. The dvh term keeps it honest on short viewports.
		 */
		max-block-size: min(30rem, calc(100dvh - 11rem));
		padding-block: 0;
		border-radius: var(--hk-r);
		box-shadow: 0 10px 26px rgb(37 50 84 / 16%);
	}

	/* Section labels become sticky rails, so "Products" stays legible while
	   the list scrolls under it. */
	.hk-searchpanel__label {
		position: sticky;
		inset-block-start: 0;
		z-index: 1;
		margin: 0;
		padding: 0.4375rem 0.75rem 0.375rem;
		background: var(--hk-surface);
		border-block-end: 1px solid var(--hk-border);
	}

	.hk-sresult {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.75rem;
	}
	/* Hairlines rather than gaps: density without losing the row boundary. */
	.hk-sresult + .hk-sresult { border-block-start: 1px solid var(--hk-border); }
	.hk-sresult__media { inline-size: 52px; block-size: 52px; }
	.hk-sresult__brand { font-size: 0.625rem; letter-spacing: 0.05em; }

	/*
	 * Two clean lines, then stop. One-line truncation on this catalogue cuts
	 * "Vulcan Gas Fryer 1VEG35M (35-40 lbs)…" at the word before the model
	 * number, which is the one word the customer is looking for.
	 */
	.hk-sresult__title {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.8125rem;
		line-height: 1.3;
	}
	.hk-sresult__meta { margin-block-start: 0.0625rem; gap: 0.4375rem; font-size: 0.6875rem; }

	.hk-sresult__price {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		max-inline-size: 5.75rem;
		text-align: end;
		font-size: 0.8125rem;
		line-height: 1.25;
	}
	.hk-sresult__quote { font-size: 0.75rem; }
	/*
	 * The dev marker keeps its own line so it can never be mistaken for part
	 * of the figure above it — and it is allowed to wrap. Held on one line it
	 * measured 103px inside an 84px column and the word "PLACEHOLDER" was
	 * being clipped, which is the one label on this site that must never be
	 * half-legible.
	 */
	.hk-sresult__price .hk-devprice {
		display: block;
		margin-block-start: 0.1875rem;
		margin-inline-start: 0;
		white-space: normal;
		line-height: 1.15;
		letter-spacing: 0.04em;
	}

	.hk-scat { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
	.hk-scat + .hk-scat { border-block-start: 1px solid var(--hk-border); }

	.hk-searchpanel__all {
		position: sticky;
		inset-block-end: 0;
		margin-block-start: 0;
		padding: 0.6875rem;
		background: var(--hk-base);
	}

	.hk-searchpanel__empty { padding: 1rem 0.75rem; }
}
/* ============================================ Homepage fidelity pass ---
   Brings the homepage closer to the approved mockup: a hero with a real
   image stage, pillar cards that carry imagery and a bottom-anchored
   action, and tighter vertical rhythm between sections. */

.hk-btn--lg { min-block-size: 52px; padding-inline: 1.5rem; font-size: 1rem; }

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

.hk-hero__media {
	position: relative;
	border-radius: var(--hk-r-lg);
	overflow: hidden;
	background: var(--hk-surface);
}
.hk-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/*
 * The hero image stage with no image in it.
 *
 * This is a holding frame, not a design: it must look finished enough that
 * the layout can be judged, and unfinished enough that nobody mistakes it for
 * the final hero. The inset dashed rule does that job — a real photograph
 * would never have one. Set a WordPress header image and the whole panel is
 * replaced by the photograph.
 */
.hk-hero__placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	block-size: 100%;
	min-block-size: 15rem;
	background: linear-gradient(160deg, var(--hk-navy-l), var(--hk-navy-d));
	color: rgb(255 255 255 / 78%);
	text-align: center;
	padding: 1.5rem;
}
.hk-hero__placeholder::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 1px dashed rgb(255 255 255 / 22%);
	border-radius: var(--hk-r);
	pointer-events: none;
}
.hk-hero__placeholdermark {
	font-family: var(--hk-font-display);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1;
	color: var(--hk-gold);
}
.hk-hero__placeholdertext {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	max-inline-size: 22ch;
	line-height: 1.5;
}

/* Vertical rhythm ---------------------------------------------------- */

/*
 * Section headings are held below the fluid clamp in theme.css. On the
 * homepage the H1 and the two band titles carry the display voice; nine
 * section headings competing at 2rem apiece would flatten that hierarchy.
 */
.hk-section__title { font-size: 1.375rem; }

@media (min-width: 64rem) {
	.hk-section__title { font-size: 1.75rem; }
	.hk-hero__placeholder { min-block-size: 24rem; }
	/* Four footer columns beside the brand block, as in the mockup. */
	.hk-footer__inner { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
	.hk-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================ Search results page --- */

.hk-searchpage { padding-block: 0 var(--hk-space-section-lg); }
.hk-searchpage__head { padding-block: 0.75rem 1.5rem; }
.hk-searchpage__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.018em;
	color: var(--hk-navy);
	/* A pasted model number can be one unbroken 40-character token. */
	overflow-wrap: anywhere;
}
.hk-searchpage__count { margin: 0.5rem 0 0; color: var(--hk-muted); font-size: 0.9375rem; }

/* Search-again field. Repeated from the header on purpose: after a failed
   search the header field is a scroll away, and a refined query is the single
   most likely next action on this page. */
.hk-searchagain {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1.25rem;
	padding: 0.375rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-base);
	max-inline-size: 38rem;
}
.hk-searchagain__icon { display: inline-flex; padding-inline-start: 0.625rem; color: var(--hk-muted); }
.hk-searchagain__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	/* 44px, not 40 — this is the primary control on a failed search, and it is
	   most likely to be used on a phone. */
	min-block-size: 44px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--hk-ink);
}
.hk-searchagain__input:focus { outline: none; }
.hk-searchagain:focus-within { border-color: var(--hk-navy); box-shadow: 0 0 0 3px rgb(37 50 84 / 12%); }
.hk-searchagain .hk-btn { flex: 0 0 auto; min-block-size: 44px; border-radius: 999px; }

/* Non-product results (pages, posts) — plain, legible, no invented cards. */
.hk-searchlist { margin: 0; padding: 0; list-style: none; }
.hk-searchlist__item { padding-block: 1.25rem; border-block-end: 1px solid var(--hk-border); }
.hk-searchlist__title { margin: 0 0 0.375rem; font-size: 1.0625rem; }
.hk-searchlist__title a { color: var(--hk-navy); text-decoration: none; }
.hk-searchlist__title a:hover { text-decoration: underline; }
.hk-searchlist__excerpt { margin: 0; color: var(--hk-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Empty state. Deliberately not a dashed placeholder box like .hk-empty:
   a no-results page is a real destination a customer landed on, not a hole
   in a layout, and it has real work to do. */
.hk-noresults {
	padding: 2rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-warm);
}
.hk-noresults__title {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--hk-navy);
	overflow-wrap: anywhere;
}
.hk-noresults__text { margin: 0 0 0.5rem; color: var(--hk-ink); font-size: 0.9375rem; }
.hk-noresults__tips { margin: 0 0 1.25rem; padding-inline-start: 1.125rem; color: var(--hk-muted); font-size: 0.9375rem; line-height: 1.8; }
.hk-noresults__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =================================================== Request a Quote --- */

.hk-quote { padding-block: 0 var(--hk-space-section-lg); }
.hk-quote__head { padding-block: 0.75rem 1.75rem; max-inline-size: 46rem; }
.hk-quote__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--hk-navy);
}
.hk-quote__lede { margin: 0.625rem 0 0; color: var(--hk-muted); font-size: 1.0625rem; line-height: 1.6; }

/*
 * minmax(0, 1fr) and the min-inline-size resets below are not decoration.
 * A grid item's default minimum size is its MIN-CONTENT, so one unbreakable
 * run inside the form or the product panel silently widened the whole column
 * past the container. Measured at 375px before the fix: the layout track
 * computed to 374px inside a 351px container and body.scrollWidth was 386 —
 * 11px of every card quietly clipped by the theme's overflow-x: clip, which
 * hides the symptom and not the bug.
 */
.hk-quote__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.hk-quote__side { display: grid; gap: 1.25rem; }
.hk-quote__layout > *,
.hk-quote__main > *,
.hk-quote__side > *,
.hk-qsummary__body > *,
.hk-quoteform .wpcf7-form > *,
.hk-quoteform .hk-fieldrow > * { min-inline-size: 0; }

/* Product summary. Every value on this panel is resolved server-side from the
   product ID — nothing here can be influenced by the query string beyond which
   published product is shown. */
.hk-qsummary {
	padding: 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: var(--hk-shadow);
}
.hk-qsummary__title {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hk-gold-onlight);
}
.hk-qsummary__body { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start; }
.hk-qsummary__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-surface);
	overflow: hidden;
}
.hk-qsummary__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.hk-qsummary__noimage { color: var(--hk-muted); }
.hk-qsummary__brand {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-qsummary__name { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 650; line-height: 1.35; }
.hk-qsummary__name a { color: var(--hk-navy); text-decoration: none; }
.hk-qsummary__name a:hover { text-decoration: underline; }
/*
 * Label above value, at every width — not a two-column definition list.
 * This panel lives in a 21rem sidebar on desktop and full-width on a phone;
 * a fixed 6.5rem label column left roughly 78px for the value, which clipped
 * both "$2,000 – $2,130" and the DEV PLACEHOLDER chip. Stacking is the only
 * arrangement that holds at both widths without truncating a price.
 */
.hk-qsummary__facts { margin: 0; display: grid; gap: 0.625rem; font-size: 0.8125rem; }
.hk-qsummary__facts dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-qsummary__facts dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0.125rem 0 0;
	color: var(--hk-ink);
	overflow-wrap: anywhere;
}
.hk-qsummary__warn {
	margin: 0.875rem 0 0;
	padding: 0.625rem 0.75rem;
	border-inline-start: 3px solid var(--hk-gold);
	background: var(--hk-warm);
	color: var(--hk-ink);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.hk-qsummary__note { margin: 1rem 0 0; color: var(--hk-muted); font-size: 0.8125rem; }
.hk-qsummary__change { margin: 0.625rem 0 0; font-size: 0.8125rem; }
.hk-qsummary__change a { color: var(--hk-navy); font-weight: 650; text-decoration: underline; }

/* What happens next. Process, not promises: no response-time claim, no
   "instant quote", nothing the business has not agreed to. White/cool-neutral
   (Session 5Z.1) — this previously sat on --hk-warm, the same warm off-white
   token the brief calls "beige" and explicitly asks removed from this panel. */
.hk-qhelp { padding: 1.25rem; border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); background: var(--hk-base); border-inline-start: 3px solid var(--hk-gold); }
.hk-qhelp__title {
	margin: 0 0 0.75rem;
	font-family: var(--hk-font-display);
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-qhelp__list { margin: 0 0 0.875rem; padding-inline-start: 1.125rem; font-size: 0.875rem; line-height: 1.65; color: var(--hk-ink); }
.hk-qhelp__list li + li { margin-block-start: 0.5rem; }
.hk-qhelp__note { margin: 0; font-size: 0.8125rem; color: var(--hk-muted); line-height: 1.6; }
.hk-qhelp__hint { margin: 0.875rem 0 0; padding-block-start: 0.875rem; border-block-start: 1px solid var(--hk-border); font-size: 0.8125rem; color: var(--hk-ink); line-height: 1.6; }

/* ------------------------------------------- Contact Form 7 quote form --- */

.hk-quoteform {
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: var(--hk-shadow);
}
.hk-quoteform .wpcf7-form { display: grid; gap: 1rem; }
.hk-quoteform .hk-field { display: grid; gap: 0.375rem; }
.hk-quoteform label { font-size: 0.875rem; font-weight: 650; color: var(--hk-navy); }
.hk-quoteform .hk-req { color: var(--hk-gold-onlight); font-weight: 700; }
.hk-quoteform .hk-hint { font-size: 0.8125rem; font-weight: 400; color: var(--hk-muted); }

.hk-quoteform input[type="text"],
.hk-quoteform input[type="email"],
.hk-quoteform input[type="tel"],
.hk-quoteform input[type="number"],
.hk-quoteform select,
.hk-quoteform textarea {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-ink);
	font: inherit;
	font-size: 0.9375rem;
}
.hk-quoteform textarea { min-block-size: 7.5rem; resize: vertical; line-height: 1.6; }
.hk-quoteform input:focus-visible,
.hk-quoteform select:focus-visible,
.hk-quoteform textarea:focus-visible {
	outline: 2px solid var(--hk-navy);
	outline-offset: 1px;
	border-color: var(--hk-navy);
}
.hk-quoteform .hk-fieldrow { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.hk-quoteform .wpcf7-submit { inline-size: 100%; }

/*
 * Validation messaging.
 *
 * Colour is never the only signal: every error also carries an exclamation
 * mark, a heavier border on the field, and the text of the problem itself.
 * Colour is the third cue, not the first.
 */
.hk-quoteform .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin-block-start: 0.25rem;
	color: #a4262c;
	font-size: 0.8125rem;
	font-weight: 650;
}
.hk-quoteform .wpcf7-not-valid-tip::before {
	content: "!";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	border-radius: 50%;
	background: #a4262c;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
}
.hk-quoteform .wpcf7-not-valid { border-color: #a4262c; border-width: 2px; }
.hk-quoteform .wpcf7-response-output {
	margin: 0;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--hk-border);
	border-inline-start-width: 4px;
	border-radius: var(--hk-r);
	font-size: 0.875rem;
	line-height: 1.5;
}
.hk-quoteform form.invalid .wpcf7-response-output,
.hk-quoteform form.unaccepted .wpcf7-response-output,
.hk-quoteform form.failed .wpcf7-response-output,
.hk-quoteform form.aborted .wpcf7-response-output { border-inline-start-color: #a4262c; background: #fdf3f3; }
.hk-quoteform form.sent .wpcf7-response-output { border-inline-start-color: #1f7a44; background: #f1f8f3; }
.hk-quoteform .wpcf7-spinner { margin-inline-start: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
	.hk-quoteform .wpcf7-spinner { animation: none; }
}

/* ------------------------------- Search and quote breakpoints --- */

@media (min-width: 48rem) {
	.hk-quoteform .hk-fieldrow { grid-template-columns: 1fr 1fr; }
	.hk-quoteform .wpcf7-submit { inline-size: auto; min-inline-size: 14rem; }
	.hk-quoteform { padding: 1.75rem; }
}

@media (min-width: 64rem) {
	.hk-quote__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; }
	.hk-quote__main { max-inline-size: 52.5rem; }
	.hk-searchpage__head { padding-block: 0.75rem 2rem; }
	.hk-noresults { padding: 2.75rem 2rem; }
}

/* ------------------------------------- Multi-step quote form (5Z.1) --- *
 *
 * One CF7 form, all fields always in the DOM (so CF7's own AJAX/validation/
 * CFDB7 storage are completely untouched) — assets/js/quote-form.js only
 * shows and hides .hk-qstep sections and toggles data-qshow groups by the
 * selected request type. Nothing here is a real wizard plugin.
 */

.hk-qsteps { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; font-size: 0.8125rem; }
.hk-qsteps__item { display: flex; align-items: center; gap: 0.4rem; color: var(--hk-muted); }
.hk-qsteps__item:not(:last-child)::after {
	content: "";
	inline-size: 1.25rem;
	block-size: 1px;
	background: var(--hk-border);
	margin-inline-start: 0.4rem;
}
.hk-qsteps__num {
	display: grid;
	place-items: center;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	border: 1px solid var(--hk-border);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--hk-muted);
}
.hk-qsteps__label { display: none; }
.hk-qsteps__item.is-active { color: var(--hk-navy); font-weight: 650; }
.hk-qsteps__item.is-active .hk-qsteps__num { border-color: var(--hk-navy); background: var(--hk-navy); color: #fff; }
.hk-qsteps__item.is-done .hk-qsteps__num { border-color: var(--hk-gold-onlight); background: var(--hk-gold); color: var(--hk-gold-ink); }
.hk-qsteps__item.is-done .hk-qsteps__num::before { content: "✓"; }

.hk-qstep__title { margin: 0 0 1rem; font-family: var(--hk-font-display); font-size: 1.1875rem; color: var(--hk-navy); }

/* Request-type tiles — CF7's default radio markup, restyled as a compact
   selectable-card grid (Session 5Z.1B.1). Each label IS the tappable target,
   so the hit area is the whole card, not just the dot. `.hk-qtiles__icon` is
   inserted client-side by quote-form.js (initTileLabels()) — CF7's [radio]
   tag has no per-option HTML slot, so an icon can only be added by DOM
   insertion after render, never by editing the shortcode itself. 1 column
   on mobile, 2×3 at tablet, 3×2 at desktop — matches the six fixed options
   exactly; if a seventh option is ever added, re-check this grid still reads
   as a tidy block instead of a stray row. */
/* CF7 wraps the six options in <p class="hk-field"> > .wpcf7-form-control-wrap
   > .wpcf7-form-control.wpcf7-radio > six .wpcf7-list-item spans. The grid
   is applied directly to `.wpcf7-form-control.wpcf7-radio` — the real,
   immediate parent of the six cards — rather than to `.hk-qtiles` itself.
   An earlier version of this fix used `display: contents` on the three
   intervening wrappers to "dissolve" them so `.hk-qtiles`'s own grid could
   reach the cards; that placed the grid correctly but broke live restyling —
   measured in a real browser that toggling `.is-selected` on a card nested
   under a `display: contents` ancestor updated the DOM/class correctly but
   the browser never repainted the border/background change (a known class
   of `display: contents` invalidation bug, not a selector-matching issue).
   Gridding the real, non-contents parent avoids the bug entirely. */
.hk-qtiles { margin: 0 0 1.25rem; }
.hk-qtiles .wpcf7-form-control.wpcf7-radio {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.625rem;
}
.hk-qtiles .hk-field__legend { display: block; margin-block-end: 0.625rem; }
.hk-qtiles .wpcf7-list-item { margin: 0; }
/* Compact button style (Session 5Z.1B.2) — no icon, single-line row: radio
   dot, then label, left-aligned. Replaces the taller icon-topped card from
   5Z.1B.1 per direct visual reference from the owner. Font size (5Z.1B.3)
   is small enough that the longest label ("Replacement Equipment") fits one
   line at the narrowest card width (3-column desktop, ~236px) — verified
   live, not just estimated — so every card gets the same single-line
   content height without a fixed min-block-size fighting real text. */
.hk-qtiles label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: 2px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hk-navy);
	text-align: start;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--hk-t), background-color var(--hk-t);
}
.hk-qtiles input[type="radio"] { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; accent-color: var(--hk-navy); }
.hk-qtiles label:hover { border-color: var(--hk-navy); }
.hk-qtiles label:focus-within { outline: 2px solid var(--hk-navy); outline-offset: 2px; }
/* Selected-card state is driven by a JS-toggled `.is-selected` class
   (quote-form.js's syncTileSelection()), not CSS :has(input:checked) —
   measured live in Session 5Z.1B.1 that :has() re-evaluation was unreliable
   through the display:contents wrapper chain the grid fix above requires:
   the initially-checked card styled correctly on first paint, but clicking
   a different card afterward left border-color/background stuck at their
   unselected values (only border-width updated). The JS class has no such
   dependency. */
.hk-qtiles .wpcf7-list-item.is-selected label { border-color: var(--hk-navy); background: var(--hk-surface); }

@media (min-width: 48rem) {
	.hk-qtiles .wpcf7-form-control.wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
	.hk-qtiles .wpcf7-form-control.wpcf7-radio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Plain Yes/No radios (replacing existing equipment, floor plan, contact
   method) — compact pill pair, not full-width tiles. Targeted by CF7's own
   `data-name` attribute on the field wrapper, so no extra class needs to be
   injected into the form template just for styling. */
.hk-quoteform [data-name="husky-replacing"] .wpcf7-list,
.hk-quoteform [data-name="husky-floorplan"] .wpcf7-list,
.hk-quoteform [data-name="husky-contact-method"] .wpcf7-list { display: flex; gap: 0.625rem; margin-block-start: 0.375rem; }
.hk-quoteform [data-name="husky-replacing"] .wpcf7-list-item,
.hk-quoteform [data-name="husky-floorplan"] .wpcf7-list-item,
.hk-quoteform [data-name="husky-contact-method"] .wpcf7-list-item { margin: 0; }
.hk-quoteform [data-name="husky-replacing"] label,
.hk-quoteform [data-name="husky-floorplan"] label,
.hk-quoteform [data-name="husky-contact-method"] label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-ink);
	cursor: pointer;
}
.hk-quoteform [data-name="husky-replacing"] .wpcf7-list-item:has(input:checked) label,
.hk-quoteform [data-name="husky-floorplan"] .wpcf7-list-item:has(input:checked) label,
.hk-quoteform [data-name="husky-contact-method"] .wpcf7-list-item:has(input:checked) label { border-color: var(--hk-navy); background: var(--hk-navy); color: #fff; }

.hk-field__legend { display: block; margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 650; color: var(--hk-navy); }
.hk-field__note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--hk-muted); }
.hk-optional { font-weight: 400; color: var(--hk-muted); text-transform: none; letter-spacing: 0; }

/* File upload — three real <input type="file"> slots, revealed one at a time
   by quote-form.js, each stylable as a drop area because it IS the input. */
.hk-qupload { margin: 1.25rem 0; padding: 1rem; border: 1px dashed var(--hk-border); border-radius: var(--hk-r-lg); background: var(--hk-surface); }
.hk-qupload__slot { position: relative; margin-block-start: 0.625rem; }
.hk-qupload__slot:first-of-type { margin-block-start: 0.75rem; }
.hk-qupload input[type="file"] {
	display: block;
	inline-size: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	font-size: 0.8125rem;
}
.hk-qupload__slot.is-dragover input[type="file"] { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-qupload__slot.has-file input[type="file"] { border-color: var(--hk-gold-onlight); }
.hk-qupload__filename { display: block; margin-block-start: 0.375rem; font-size: 0.8125rem; color: var(--hk-navy); }
.hk-qupload__remove {
	margin-inline-start: 0.625rem;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 650;
	color: var(--hk-gold-onlight);
	text-decoration: underline;
	cursor: pointer;
}

/* The honeypot is never rendered on screen, and never announced to a screen
   reader — a real customer, using a mouse, keyboard or AT, should never be
   able to reach or fill it in. */
.hk-qhoneypot { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hk-qnav { display: flex; gap: 0.75rem; margin-block-start: 1.75rem; }
.hk-qnav__continue,
.hk-qnav__submit { flex: 1 1 auto; }
.hk-qnav__back { flex: 0 0 auto; }
/* CF7 auto-injects a `.wpcf7-spinner` right after every [submit] tag and
   hides it with `visibility: hidden` (not `display`) between submissions —
   confirmed by inspecting the real rendered form. Left alone, that spinner
   is still a live flex child of .hk-qnav and steals row width from Continue
   (measured 242px of a 310px row for the only OTHER visible button — found
   during Session 5Z.1B's real-browser QA, not present in the flat pre-wizard
   layout). Hidden by default here and restored only while CF7's own JS marks
   it active, so the genuine "sending…" indicator during submission is kept.
*/
.hk-qnav .wpcf7-spinner { display: none; }
.hk-qnav .wpcf7-spinner.is-active { display: inline-block; }

/*
 * Several components inside the quote form set their own `display` (.hk-btn
 * is `inline-flex`, `.hk-quoteform .hk-fieldrow` is `grid`) — author rules at
 * the SAME specificity as the UA stylesheet's `[hidden] { display: none }`,
 * which the UA rule always loses regardless of source order because UA
 * rules sit below every author rule in the cascade. Concretely: a `hidden`
 * nav button stayed flex-visible and ate row width from its sibling
 * (Continue measured 100px in a 325px row with both others still occupying
 * space), and the same shape of bug would silently apply to any
 * `data-qshow` group built on `.hk-fieldrow`. One `!important` rule, scoped
 * to this form only, is the standard fix for exactly this — `[hidden]` is
 * supposed to be an unconditional override, and nothing here needs `hidden`
 * elements to ever partially render.
 */
.hk-quoteform [hidden] { display: none !important; }

/* Success replaces the form in place rather than navigating away, so the
   product-context sidebar and "what happens next" panel stay on screen. */
.hk-qsuccess {
	display: grid;
	gap: 0.5rem;
	padding: 1.5rem;
	border: 1px solid var(--hk-border);
	border-inline-start: 3px solid #1f7a44;
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
}
.hk-qsuccess__title { margin: 0; font-family: var(--hk-font-display); font-size: 1.25rem; color: var(--hk-navy); }
.hk-qsuccess__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-ink); }
.hk-qsuccess__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.5rem; }

/* CF7's own response banner (§33) — unstyled by default sitewide; scoped
   here to the quote form only rather than changing every CF7 form's look. */
.hk-quoteform .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	font-size: 0.875rem;
	line-height: 1.55;
}
.hk-quoteform.is-failed .wpcf7-response-output { border-color: #c0392b; border-inline-start-width: 3px; color: var(--hk-ink); }

@media (min-width: 48rem) {
	.hk-qsteps__label { display: inline; }
}

/* ================================================ Cart and checkout ---
 *
 * These two pages belong to WooCommerce, not to the theme. The markup below is
 * WooCommerce classic cart and checkout output, restyled in place; the theme
 * overrides only the page shell (templates/page-cart.html, page-checkout.html)
 * and one small template (cart-empty). Nothing here recalculates a total,
 * renames a field or removes a control — WooCommerce stays authoritative for
 * everything it owns, which is the only safe way to touch a checkout.
 */

/* ------------------------------------------------------- Page head --- */

.hk-shophead { padding-block: 0 1.25rem; border-block-end: 1px solid var(--hk-border); }
.hk-shophead__title {
	margin: 0.25rem 0 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--hk-navy);
}

/* Purchase-path steps: a rule with three marks on it, not three buttons. */
.hk-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}
.hk-steps__item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hk-muted); }
.hk-steps__num {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border: 1px solid var(--hk-border);
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.hk-steps__label { color: inherit; text-decoration: none; }
.hk-steps__item.is-done { color: var(--hk-navy); }
.hk-steps__item.is-done .hk-steps__num { border-color: var(--hk-navy); color: var(--hk-navy); }
.hk-steps__item.is-done .hk-steps__label { text-decoration: underline; text-underline-offset: 3px; }
/* The current step is marked by weight and a filled counter as well as colour,
   and carries aria-current plus a screen-reader label in the markup. */
.hk-steps__item.is-current { color: var(--hk-navy); font-weight: 700; }
.hk-steps__item.is-current .hk-steps__num { border-color: var(--hk-navy); background: var(--hk-navy); color: #fff; }

/* ------------------------------------------------------------ Cart --- */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	max-inline-size: var(--hk-container-commerce);
	margin-inline: auto;
	padding-inline: 1rem;
	padding-block: 1.75rem 3rem;
}

/*
 * WooCommerce ships the cart as a table and it stays a table: the header cells
 * are what tell a screen reader what each number means, and the update and
 * remove controls are wired to these classes. Only presentation changes.
 */
.woocommerce-cart table.shop_table {
	inline-size: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}
.woocommerce-cart table.shop_table thead th {
	padding: 0 0 0.625rem;
	border-block-end: 1px solid var(--hk-border);
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hk-muted);
	text-align: start;
}
.woocommerce-cart table.shop_table td {
	padding: 1rem 0.5rem 1rem 0;
	border-block-end: 1px solid var(--hk-border);
	vertical-align: top;
}
.woocommerce-cart td.product-thumbnail { inline-size: 84px; padding-inline-end: 1rem; }
.woocommerce-cart td.product-thumbnail img {
	inline-size: 84px;
	block-size: 84px;
	object-fit: contain;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: #fff;
	padding: 0.25rem;
}
.woocommerce-cart td.product-name a {
	font-weight: 650;
	color: var(--hk-navy);
	text-decoration: none;
	line-height: 1.35;
}
.woocommerce-cart td.product-name a:hover { text-decoration: underline; }

/* Brand / Model / variation rows injected via woocommerce_get_item_data. */
.woocommerce-cart .variation,
.woocommerce-checkout .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.5rem;
	margin: 0.4375rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
}
.woocommerce-cart .variation dt,
.woocommerce-checkout .variation dt { margin: 0; color: var(--hk-muted); font-weight: 400; }
.woocommerce-cart .variation dd,
.woocommerce-checkout .variation dd { margin: 0; color: var(--hk-ink); }
.woocommerce-cart .variation dd p,
.woocommerce-checkout .variation dd p { margin: 0; }

.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.woocommerce-cart td.product-subtotal { font-weight: 700; color: var(--hk-navy); }

/* 44px, not 32. This is the only destructive control on the page and it was
   the single sub-44px target measured on cart at 375 and 1280. */
.woocommerce-cart td.product-remove a.remove {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--hk-r);
	color: var(--hk-muted);
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
}
.woocommerce-cart td.product-remove a.remove:hover { background: var(--hk-surface); color: #8a3d3d; }

.woocommerce-cart .quantity input.qty {
	inline-size: 4.5rem;
	min-block-size: 44px;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	font: inherit;
	font-size: 0.9375rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .actions { padding-block: 1.25rem 0; }
.woocommerce-cart .coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.woocommerce-cart .coupon label { font-size: 0.8125rem; font-weight: 650; color: var(--hk-navy); }
.woocommerce-cart .coupon input#coupon_code {
	min-block-size: 44px;
	min-inline-size: 11rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	font: inherit;
}

/* ------------------------------------------------- Cart totals panel --- */

.cart-collaterals { margin-block-start: 2rem; }
.cart-collaterals .cart_totals {
	padding: 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: var(--hk-shadow);
}
.cart-collaterals .cart_totals > h2 {
	margin: 0 0 0.875rem;
	font-family: var(--hk-font-display);
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.cart-collaterals table.shop_table { inline-size: 100%; border-collapse: collapse; }
.cart-collaterals table.shop_table th,
.cart-collaterals table.shop_table td {
	padding: 0.5rem 0;
	border-block-end: 1px solid var(--hk-border);
	font-size: 0.875rem;
	text-align: start;
	vertical-align: top;
}
.cart-collaterals table.shop_table th { font-weight: 400; color: var(--hk-muted); }
.cart-collaterals table.shop_table td { text-align: end; font-variant-numeric: tabular-nums; }
.cart-collaterals tr.order-total th,
.cart-collaterals tr.order-total td {
	border-block-end: 0;
	padding-block-start: 0.75rem;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--hk-navy);
}
.cart-collaterals .wc-proceed-to-checkout { padding-block-start: 1rem; }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button { inline-size: 100%; }

/* Shipping calculator: a disclosure, not a second form competing with totals. */
.cart-collaterals .shipping-calculator-button { font-size: 0.8125rem; color: var(--hk-navy); }
.cart-collaterals .shipping-calculator-form { margin-block-start: 0.75rem; display: grid; gap: 0.5rem; }

/* -------------------------------------------------------- Empty cart --- */

.hk-cartempty {
	max-inline-size: 44rem;
	padding: 2rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-warm);
}
.hk-cartempty__title {
	margin: 0 0 0.625rem;
	font-family: var(--hk-font-display);
	font-size: 1.25rem;
	color: var(--hk-navy);
}
.hk-cartempty__text { margin: 0 0 1.25rem; color: var(--hk-ink); font-size: 0.9375rem; line-height: 1.6; }
.hk-cartempty__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* -------------------------------------------------------- Checkout --- */

.hk-checkout-financing {
	margin-block-start: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-surface);
}
.hk-checkout-financing__title { margin: 0 0 0.5rem; font-family: var(--hk-font-display); font-size: 1rem; color: var(--hk-navy); }
.hk-checkout-financing__text { margin: 0 0 0.875rem; font-size: 0.875rem; line-height: 1.55; color: var(--hk-ink); }
.hk-checkout-financing__note { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--hk-muted); }
.hk-checkout-financing__pending { margin: 0; font-size: 0.8125rem; color: var(--hk-muted); }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 0.875rem;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	padding-block-end: 1.5rem;
}

/*
 * Fields. WooCommerce labels, order and required flags are untouched; only the
 * control surface is brought into the Husky system.
 */
.woocommerce-checkout .form-row { display: grid; gap: 0.3125rem; margin: 0 0 0.875rem; padding: 0; }
.woocommerce-checkout .form-row label {
	font-size: 0.875rem;
	font-weight: 650;
	color: var(--hk-navy);
	line-height: 1.4;
}
.woocommerce-checkout .form-row .required { color: var(--hk-gold-onlight); text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-ink);
	font: inherit;
	font-size: 0.9375rem;
}
.woocommerce-checkout .form-row textarea { min-block-size: 6.5rem; line-height: 1.6; resize: vertical; }
.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce-checkout .form-row input:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible,
.woocommerce-checkout .form-row select:focus-visible {
	outline: 2px solid var(--hk-navy);
	outline-offset: 1px;
	border-color: var(--hk-navy);
}

/*
 * Consent and add-on checkboxes carry long, legal-ish copy, so they get a
 * readable two-column layout rather than a hanging indent.
 */
.woocommerce-checkout .checkbox,
.woocommerce-checkout .form-row-wide label.checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
	align-items: start;
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--hk-ink);
}
.woocommerce-checkout input[type="checkbox"] { inline-size: 1.125rem; block-size: 1.125rem; margin: 0.125rem 0 0; }

/*
 * Validation. Colour is never the only signal: the field takes a heavier
 * border, the message carries an exclamation mark, and WooCommerce's own text
 * says what is wrong.
 */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-container .select2-selection--single {
	border-color: #a4262c;
	border-width: 2px;
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--hk-border);
	border-inline-start-width: 4px;
	border-radius: var(--hk-r);
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.5;
}
.woocommerce-error { border-inline-start-color: #a4262c; background: #fdf3f3; }
.woocommerce-message { border-inline-start-color: #1f7a44; background: #f1f8f3; }
.woocommerce-info { border-inline-start-color: var(--hk-navy); background: var(--hk-surface); }
.woocommerce-error li::before { content: "! "; font-weight: 800; }

/* Order review */
.woocommerce-checkout-review-order {
	padding: 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	box-shadow: var(--hk-shadow);
}
.woocommerce-checkout-review-order table.shop_table { inline-size: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
	padding: 0.625rem 0;
	border-block-end: 1px solid var(--hk-border);
	font-size: 0.875rem;
	text-align: start;
	vertical-align: top;
}
.woocommerce-checkout-review-order table.shop_table thead th {
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.woocommerce-checkout-review-order td.product-total,
.woocommerce-checkout-review-order .order-total td { text-align: end; font-variant-numeric: tabular-nums; }
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
	border-block-end: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--hk-navy);
}

/* Payment */
.woocommerce-checkout #payment { margin-block-start: 1.25rem; }
.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods li { padding: 0.875rem 1rem; }
.woocommerce-checkout #payment ul.payment_methods li + li { border-block-start: 1px solid var(--hk-border); }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 650; color: var(--hk-navy); }
.woocommerce-checkout #payment .payment_box {
	margin: 0.625rem 0 0;
	padding: 0.75rem 0.875rem;
	border-inline-start: 3px solid var(--hk-gold);
	background: var(--hk-warm);
	font-size: 0.8125rem;
	line-height: 1.55;
}
.woocommerce-checkout #payment .payment_box p:last-child { margin-block-end: 0; }
.woocommerce-checkout #place_order { inline-size: 100%; min-block-size: 52px; font-size: 1rem; }

/* WooCommerce button classes mapped onto the Husky button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 44px;
	padding-inline: 1.25rem;
	border: 1.5px solid transparent;
	border-radius: var(--hk-r);
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--hk-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hk-t), border-color var(--hk-t);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover { background: var(--hk-navy-d); color: #fff; }
/* Secondary weight for the cart's own update control. */
.woocommerce button.button[name="update_cart"] {
	background: transparent;
	color: var(--hk-navy);
	border-color: var(--hk-border);
}
.woocommerce button.button[name="update_cart"]:hover { background: var(--hk-surface); color: var(--hk-navy); border-color: var(--hk-navy); }
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] { opacity: 0.45; cursor: not-allowed; }

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

@media (max-width: 47.9375rem) {
	/*
	 * The cart table stops behaving as a table on a phone. WooCommerce's own
	 * shop_table_responsive convention is used — each cell carries its column
	 * name in a data-title attribute — so the header row can be hidden and each
	 * row becomes a labelled block without losing what any number means.
	 */
	.woocommerce-cart table.shop_table thead { display: none; }
	.woocommerce-cart table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 84px 1fr;
		gap: 0.25rem 0.875rem;
		padding-block: 1rem;
		border-block-end: 1px solid var(--hk-border);
	}
	.woocommerce-cart table.shop_table tbody tr.cart_item td { border: 0; padding: 0; }
	.woocommerce-cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; inline-size: 84px; padding: 0; }
	.woocommerce-cart td.product-name { grid-column: 2; grid-row: 1; }
	.woocommerce-cart td.product-price { display: none; }
	.woocommerce-cart td.product-quantity { grid-column: 2; grid-row: 2; padding-block-start: 0.5rem; }
	.woocommerce-cart td.product-subtotal { grid-column: 2; grid-row: 3; padding-block-start: 0.375rem; font-size: 1.0625rem; }
	.woocommerce-cart td.product-subtotal::before {
		content: attr(data-title) ": ";
		font-size: 0.75rem;
		font-weight: 400;
		color: var(--hk-muted);
	}
	.woocommerce-cart td.product-remove { grid-column: 2; grid-row: 4; justify-self: start; padding-block-start: 0.25rem; }
	.woocommerce-cart .actions { display: grid; gap: 0.75rem; }
	.woocommerce-cart .coupon { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
	.woocommerce-cart .coupon label { grid-column: 1 / -1; }
	.hk-shophead { padding-block: 0 1rem; }
	.hk-steps { gap: 0.375rem 0.875rem; font-size: 0.75rem; }
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce { padding-inline: 0.75rem; padding-block: 1.25rem 2rem; }
}

@media (min-width: 48rem) {
	.woocommerce-cart td.product-price { display: table-cell; }
}

@media (min-width: 64rem) {
	/*
	 * Two columns, and only here. Below this the form and the summary stack: a
	 * 300px summary beside a 300px form is two cramped columns rather than one
	 * readable one.
	 */
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: 2.5rem;
		align-items: start;
	}
	/*
	 * Session 5P fix: a plugin field (the Tailgate Charge add-on, rendered as
	 * `#wc_checkout_add_ons` before `#customer_details`) has no grid placement
	 * of its own, so default auto-placement claimed row 1 / column 1 for it —
	 * which pushed #order_review_heading into row 1 / column 2 alone, and
	 * #order_review (unpinned on the row axis) down into row 2, stranded
	 * below the entire billing/shipping form instead of beside it. Every
	 * direct child defaults to column 1 (stacking normally in DOM order,
	 * whatever a plugin adds there), so only the summary pair below has to
	 * be — and now is — pinned to specific rows in column 2.
	 */
	.woocommerce-checkout form.checkout > * { grid-column: 1; }
	.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }

	.woocommerce-cart .woocommerce-cart-form { margin-block-end: 0; }
	.cart-collaterals { display: flex; justify-content: flex-end; }
	.cart-collaterals .cart_totals { inline-size: 24rem; }

	/* Two-up rows inside an address block. */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { display: inline-grid; inline-size: calc(50% - 0.375rem); vertical-align: top; }
	.woocommerce-checkout .form-row-first { margin-inline-end: 0.75rem; }
}

/* ============================================ Product page refinement ---
 *
 * Session 5E. The PDP was already custom and already correct — pricing states,
 * variation mechanics and the purchase path all worked. What it lacked was
 * hierarchy: identity, price and action carried similar weight, the gallery
 * thumbnails looked interactive and were not, and the brand was printed twice.
 *
 * These rules refine what exists. No component is replaced.
 */

/* ------------------------------------------------------- Identity --- */

/*
 * The identity row carries the two things a trade buyer arrives holding: the
 * manufacturer and the model. It reads as a spec strip rather than as tags,
 * because that is what it is.
 */
.hk-pdp__identity {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	align-items: baseline;
}
.hk-pdp__ident { display: inline-flex; flex-direction: column; gap: 0.125rem; }
.hk-pdp__identitylabel {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
/*
 * The model number is the single most searched-for string on this site, so it
 * is set in the display face, tabular, and at text size rather than as fine
 * print. It is an identifier, not metadata.
 */
.hk-pdp__identvalue {
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hk-navy);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	/* Long model strings break rather than push the column open. */
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------- Gallery --- */

.hk-pdp__main {
	position: relative;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.hk-pdp__main[data-hk-lightbox-open] { cursor: zoom-in; }

/*
 * Perceived-size system — Session 5W.1C §6.
 *
 * A safety inset per real image shape, classified server-side from the
 * attachment's true stored dimensions (husky_image_shape(), reused from
 * Session 5U.2B.1 rather than rebuilt). object-fit stays `contain` in every
 * case, so no equipment is ever cropped — legs, handles, backsplash and
 * controls all survive, per §8's explicit list.
 *
 * MEASURED, not assumed — 600 published products sampled on DEV:
 *   square    414 (69%)  overwhelmingly 500x500 / 600x600 / 400x400
 *   landscape 185 (31%)  overwhelmingly 680x480
 *   portrait    0 ( 0%)  no genuinely portrait source image exists
 *
 * That result changes the right answer. §6 sketches "square equipment
 * ~72-82%", but this catalogue's square files are square *canvases* with
 * manufacturer whitespace baked in around a product of any real silhouette
 * (the Vulcan fryer — a tall unit — ships as 400x400). Insetting those
 * further would shrink the true product twice over, so the ratio classes
 * only nudge around §6's stated "internal safety inset approximately
 * 32-40px", which is the honest lever available without touching pixels:
 *
 *   square    36px  the 69% case; mid of §6's safety-inset range
 *   landscape 32px  680x480 letterboxes in a 1:1 stage already
 *   portrait  28px  no current product, kept for correctness
 *
 * The remaining gain — trimming baked-in source whitespace — is deliberately
 * NOT implemented: §6 rules out destructive media processing where it would
 * be risky, and re-encoding 2,700 manufacturer images qualifies. Recorded as
 * a data-side improvement in the completion report instead.
 */
.hk-pdp__main img { padding: 2.25rem; }
.hk-pdp__main--portrait img { padding: 1.75rem; }
.hk-pdp__main--landscape img { padding: 2rem; }
.hk-pdp__main--square img { padding: 2.25rem; }

/*
 * Session 5W.1 §21: restrained hover zoom, desktop pointer devices only —
 * `(hover: hover) and (pointer: fine)` means this never activates on touch,
 * where §26 explicitly rules out hover-dependent behaviour. Contained by
 * .hk-pdp__main's own overflow:hidden, so the scaled image never spills
 * past the stage border. A plain CSS transform, not a cursor-follow
 * magnifier — the brief's own "premium and simple," not the "old-fashioned
 * aggressive magnifying-lens UI" it rules out.
 */
@media (hover: hover) and (pointer: fine) {
	.hk-pdp__main img { transition: transform var(--hk-t); }
	.hk-pdp__main:hover img,
	.hk-pdp__main:focus-within img { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.hk-pdp__main img { transition: none; }
}

.hk-pdp__zoombtn {
	position: absolute;
	inset-block-end: 0.625rem;
	inset-inline-end: 0.625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: rgb(255 255 255 / 92%);
	color: var(--hk-navy);
	cursor: pointer;
	z-index: 1;
}
.hk-pdp__zoombtn:hover,
.hk-pdp__zoombtn:focus-visible { border-color: var(--hk-navy); }

/*
 * Thumbnails are buttons now. They size to the row rather than to a fixed
 * six-column grid, so three images do not stretch across the full width
 * pretending to be six.
 */
.hk-pdp__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
}
.hk-pdp__thumbs li { flex: 0 0 auto; }
.hk-pdp__thumbbtn {
	display: block;
	inline-size: 68px;
	block-size: 68px;
	padding: 0.25rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	cursor: pointer;
	transition: border-color var(--hk-t);
}
.hk-pdp__thumbbtn img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.hk-pdp__thumbbtn:hover { border-color: var(--hk-navy); }
/*
 * The selected thumbnail is marked by a two-pixel navy border AND the brass
 * underline below it, so the current view is not signalled by colour alone.
 */
.hk-pdp__thumbbtn[aria-pressed="true"] {
	border-color: var(--hk-navy);
	border-width: 2px;
	padding: calc(0.25rem - 1px);
	position: relative;
}
.hk-pdp__thumbbtn[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 20%;
	inset-block-end: -5px;
	block-size: 2px;
	background: var(--hk-gold);
}

/* ---------------------------------------------------- Purchase panel --- */

/*
 * A defined panel, not a floating card: one hairline, one radius, no shadow.
 * It groups price, configuration and action so the commitment area reads as
 * one object, without turning into the SaaS card the brief rules out.
 *
 * Session 5W.1 §11/§16: the top accent is the same restrained brass line
 * already used on the category and brand hero panels (border-block-start,
 * 3px, var(--hk-gold)) — a small, sparing accent this session's brief
 * explicitly allows ("small section accent"), reused rather than invented,
 * and it also gives the panel the "stronger but subtle" edge definition
 * asked for without darkening the whole border.
 */
.hk-pdp__buypanel {
	padding: 1.125rem;
	border: 1px solid var(--hk-border);
	border-block-start: 3px solid var(--hk-gold);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
}

/*
 * Session 5W.1A §3/§7/§8: identity now opens the card. A subtle divider
 * marks the transition into pricing (§8) without a second boxed section —
 * one hairline, matching the rest of this panel's restrained internal
 * grouping rather than six nested cards.
 */
.hk-pdp__cardident { margin: 0 0 1rem; padding: 0 0 1rem; border-block-end: 1px solid var(--hk-border); }
.hk-pdp__cardident .hk-pdp__identity { margin-block-end: 0; }

/*
 * Metadata legibility — Session 5W.1C §5. The label/value pair was 10px
 * uppercase muted over a 15px value; §5 asks for stronger contrast without
 * more size. Labels move to 0.6875rem (11px) and the values to a firmer
 * navy, which is the actual readability problem — not the label size.
 */
.hk-pdp__identitylabel { font-size: 0.6875rem; letter-spacing: 0.08em; }
.hk-pdp__identvalue { font-size: 0.8125rem; color: var(--hk-navy); }

/*
 * Price / availability on the left, rebate offer on the right — §4/§8.
 * `align-items: start` so a two-line promo never drags the price baseline
 * down, and the promo is allowed to shrink but not to squeeze the price.
 */
.hk-pdp__pricerow {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-block-end: 1.125rem;
}
.hk-pdp__pricecol { flex: 1 1 auto; min-inline-size: 0; }
.hk-pdp__price { margin: 0 0 0.25rem; line-height: 1.05; }
.hk-pdp__stock { margin: 0; }

/*
 * §4/§16: the rebate reads as a real commercial offer without becoming a
 * marketing badge — white surface, hairline border, brass on the amount
 * only. No fill, no gradient, no oversized badge, exactly as §4 specifies,
 * and brass stays an accent per §17.
 */
.hk-pdp__promo {
	flex: 0 1 auto;
	max-inline-size: 15rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
}
.hk-pdp__promoamount {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hk-gold-onlight);
}
.hk-pdp__promoterms { margin: 0.125rem 0 0; font-size: 0.6875rem; line-height: 1.4; color: var(--hk-muted); }

/* ------------------------------------- Purchase controls (5W.1C §5) --- */

/*
 * One control system across all three purchase states, so a Request Pricing
 * product feels as finished as an Add to Cart one (§5). Every select and
 * text input in the decision panel — the theme's own, WooCommerce's native
 * variation form, and the Request Pricing plugin's form — lands on the same
 * 46px height, the same radius and the same navy focus ring.
 *
 * The plugin's own stylesheet is deliberately NOT edited: these rules are
 * scoped to `.hk-buy`, so they harmonise the plugin inside this panel while
 * leaving the plugin's file (and any other context it renders in) untouched.
 */
.hk-buy select,
.hk-buy input[type="email"],
.hk-buy input[type="text"] {
	min-block-size: 46px;
	border-radius: var(--hk-r);
	border: 1px solid var(--hk-border);
	background-color: var(--hk-base);
	font-size: 0.9375rem;
}
.hk-buy select { color: var(--hk-navy); font-weight: 600; }
.hk-buy select:focus-visible,
.hk-buy input:focus-visible {
	outline: 2px solid var(--hk-navy);
	outline-offset: 1px;
	border-color: var(--hk-navy);
}

/* Configuration labels read as labels, not as fine print (§5). */
.hk-buy__option label,
.hk-buy .hrp__option label,
.hk-buy__native table.variations label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

/*
 * §5: a disabled Add to Cart must read unmistakably disabled — WooCommerce
 * adds `.disabled`/`.wc-variation-selection-needed` before a variation is
 * chosen, and the default styling left it looking clickable.
 */
.hk-buy__native button.single_add_to_cart_button.disabled,
.hk-buy__native button.single_add_to_cart_button:disabled,
.hk-buy__native button.single_add_to_cart_button.wc-variation-selection-needed {
	background: var(--hk-surface);
	color: var(--hk-muted);
	border-color: var(--hk-border);
	cursor: not-allowed;
}

/* …and an enabled one unmistakably primary. */
.hk-buy__native button.single_add_to_cart_button:not(.disabled):not(:disabled):hover {
	background: var(--hk-navy-d);
}
.hk-buy__native button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--hk-gold);
	outline-offset: 2px;
}

/* The Request Pricing submit is the primary action in its own state. */
.hk-buy .hrp__submit { min-block-size: 46px; }

/*
 * The development marker sits on its own line at full contrast. It must never
 * read as a suffix to the figure above it.
 */
.hk-pdp__price .hk-devprice { display: inline-block; margin-inline-start: 0.5rem; vertical-align: middle; }
.hk-devnotice {
	margin: 0 0 0.875rem;
	padding: 0.625rem 0.75rem;
	border-inline-start: 3px solid #7a2f2f;
	background: #fdf3f3;
	color: var(--hk-ink);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Reassurance: three short lines of fact, not an icon wall. */
.hk-pdp__assure {
	margin: 0.875rem 0 0;
	padding: 0.875rem 0 0;
	border-block-start: 1px solid var(--hk-border);
	display: grid;
	gap: 0.4375rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--hk-muted);
	list-style: none;
}
.hk-pdp__assure li { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
.hk-pdp__assure .hk-icon { color: var(--hk-gold-onlight); margin-block-start: 0.0625rem; }

/* ------------------------------------------- Key specs at a glance --- */

/*
 * Session 5W.1C §7/§20. One restrained technical strip, explicitly NOT the
 * "six oversized SaaS cards" §7 rules out: a single white panel with one
 * hairline border, and the items separated by internal rules rather than
 * each becoming its own floating box.
 *
 * The grid is auto-fit with a real minimum, so it lays out honestly for
 * whatever number of specs a product genuinely has — six across when six
 * exist, three across when three do — instead of stretching a short list
 * to fill a fixed six-column track. §7: show what exists, never fake
 * completeness.
 */
.hk-keyspecs {
	margin-block: 0 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
}
.hk-keyspecs__title {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-keyspecs__grid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1rem 1.5rem;
}
/*
 * Separated by spacing alone, not by vertical rules. A per-item leading
 * rule was tried first and rejected: with an auto-fit grid the items wrap,
 * and `:first-child` only suppresses the rule on the very first item — so
 * the first item of every SUBSEQUENT row kept a leading rule floating
 * mid-strip. Whitespace separates just as clearly and cannot break when
 * the row count changes with the number of real specs.
 */
/*
 * Session 5W.3A: the mockup sets the icon and the label together on one line,
 * with the value on its own line beneath and flush to the icon's left edge —
 * not indented into the label's column. Two grid rows: [icon][label] then a
 * value spanning both. When a row has no icon (Custom mode allows that), the
 * label is the cell's first child and stretches across instead, so nothing
 * sits in a hanging empty gutter.
 */
.hk-keyspecs__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.4375rem;
	row-gap: 0.25rem;
	min-inline-size: 0;
	align-content: start;
}
.hk-keyspecs__icon {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	color: var(--hk-gold-onlight);
}
.hk-keyspecs__icon svg {
	width: 1.0625rem;
	height: 1.0625rem;
}
.hk-keyspecs__label {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hk-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hk-keyspecs__label:first-child {
	grid-column: 1 / -1;
}
.hk-keyspecs__value {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hk-navy);
	/* §19 of 5W.1: engineered figures line up column-to-column. */
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* ===================================================================
 * Session 5W.3A — below-fold PDP composition.
 *
 * §19/§21: every region below the purchase decision shares one surface
 * language — same width, same 1px cool border, same radius, same internal
 * padding, and a consistent 1.25rem gap — so the page reads as one aligned
 * product document rather than unrelated cards floating on grey.
 * =================================================================== */

.hk-keyspecs,
.hk-pdpnav,
.hk-pdpsec {
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
	margin-block: 0 1.25rem;
}
.hk-keyspecs { padding: 1.25rem 1.5rem; }

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

.hk-pdpnav { padding: 0 1.5rem; overflow-x: auto; scrollbar-width: none; }
.hk-pdpnav::-webkit-scrollbar { display: none; }
.hk-pdpnav__list {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-inline-size: max-content;
}
.hk-pdpnav__link {
	display: block;
	padding-block: 0.9375rem;
	border-block-end: 2px solid transparent;
	font-family: var(--hk-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.hk-pdpnav__link:hover { color: var(--hk-navy); }
.hk-pdpnav__link.is-active {
	color: var(--hk-navy);
	border-block-end-color: var(--hk-navy);
}

/* --- Section shell (a <details> so mobile gets accordions free) ------ */

.hk-pdpsec { padding: 0 1.5rem; }
.hk-pdpsec__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	cursor: pointer;
	list-style: none;
}
.hk-pdpsec__summary::-webkit-details-marker { display: none; }
.hk-pdpsec__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-pdpsec__count {
	margin-inline-start: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hk-muted);
}
.hk-pdpsec__chev {
	display: none;
	flex: 0 0 auto;
	color: var(--hk-muted);
	transition: transform 0.18s ease;
}
.hk-pdpsec[open] .hk-pdpsec__chev { transform: rotate(180deg); }
.hk-pdpsec__body { padding-block-end: 1.5rem; }

/* --- Overview + Documents row --------------------------------------- */

.hk-pdprow { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

.hk-overview { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hk-overview__intro {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--hk-ink);
	max-inline-size: 62ch;
}
.hk-overview__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.hk-overview__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--hk-ink);
}
/* Top-aligned, not centred: these bullets run to three or four lines on a
   phone, and a vertically-centred tick drifts into the middle of the text. */
.hk-overview__tick {
	color: var(--hk-gold-onlight);
	display: flex;
	align-items: flex-start;
	padding-block-start: 0.1875rem;
}
.hk-overview__more { margin-block-start: 1.125rem; display: inline-flex; }

/* Documents reads as a quieter companion panel, not a third heading of
   equal weight — it is reference material beside the story. */
.hk-pdpsec--docs { background: var(--hk-surface); }

/*
 * Session 5W.3B.2, revised: Technical Drawing + Documents share one module
 * (§4 of that session's brief — "not two unrelated floating cards"),
 * stacked in one column always — documents first, drawing below. A
 * side-by-side variant was tried first but the Documents column never had
 * enough real width for its own three-part row (icon/name/PDF badge+size)
 * once squeezed next to a fixed-width drawing, which overlapped the file
 * name against the PDF badge. Single column removes that constraint
 * entirely and reads as one continuous card either way.
 */
.hk-docpanel { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hk-docpanel__subhead {
	margin: 0 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

/*
 * One shared stage for both states — real drawing and placeholder are the
 * same box (§7: "preserve enough module structure that Documents does not
 * jump wildly between products") — so the module's height stays predictable
 * whether or not a drawing is configured.
 */
.hk-techdrawing {
	position: relative;
	display: block;
	max-inline-size: 26rem;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	overflow: hidden;
	text-decoration: none;
}
.hk-techdrawing__img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; padding: 0.625rem; box-sizing: border-box; }
.hk-techdrawing__zoom {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-end: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	border: 1px solid var(--hk-border);
	background: var(--hk-base);
	color: var(--hk-navy);
	box-shadow: 0 1px 4px rgb(26 29 35 / 12%);
	transition: background 0.15s ease, color 0.15s ease;
}
a.hk-techdrawing:hover .hk-techdrawing__zoom { background: var(--hk-navy); color: var(--hk-base); border-color: var(--hk-navy); }

/*
 * §6/§7: a designed placeholder, never a broken image and never an
 * enormous empty panel — same footprint as the real-drawing state, dashed
 * to read clearly as "nothing configured" rather than "failed to load".
 */
.hk-techdrawing--empty {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.25rem;
	padding: 1rem;
	text-align: center;
	border-style: dashed;
	background: var(--hk-surface);
	color: var(--hk-muted);
}
.hk-techdrawing__label { margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--hk-navy); }
.hk-techdrawing__sub { margin: 0; font-size: 0.75rem; color: var(--hk-muted); }

@media (max-width: 47.9375rem) {
	/* §11: compact on mobile — a full-width 4:3 stage runs tall once the
	   Documents list is stacked directly below it inside the same accordion. */
	.hk-techdrawing { aspect-ratio: 16 / 9; }
}

.hk-docpanel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.hk-docpanel__list a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--hk-r);
	text-decoration: none;
	color: var(--hk-ink);
	transition: background 0.15s ease;
}
.hk-docpanel__list a:hover { background: rgb(37 50 84 / 6%); }
.hk-docpanel__icon { color: var(--hk-gold-onlight); display: flex; }
.hk-docpanel__name {
	font-size: 0.875rem;
	font-weight: 600;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hk-docpanel__meta { display: flex; flex: 0 0 auto; gap: 0.5rem; align-items: center; white-space: nowrap; }
.hk-docpanel__ext {
	padding: 0.0625rem 0.3125rem;
	border: 1px solid var(--hk-border);
	border-radius: 0.1875rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hk-muted);
}
.hk-docpanel__size { font-size: 0.75rem; color: var(--hk-muted); font-variant-numeric: tabular-nums; }

/* --- Product Details ------------------------------------------------- */

.hk-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.hk-details__list li {
	position: relative;
	padding-inline-start: 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-ink);
	break-inside: avoid;
}
.hk-details__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5625rem;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--hk-gold-onlight);
}
.hk-details__list li[hidden] { display: none; }
.hk-details__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-block-start: 1.125rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--hk-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-navy);
}
.hk-details__toggle:hover { color: var(--hk-gold-onlight); }
.hk-details__chev { display: flex; transition: transform 0.18s ease; }
/* aria-expanded is the single source of truth for which label shows. */
.hk-details__toggle[aria-expanded="true"] .hk-details__more,
.hk-details__toggle[aria-expanded="false"] .hk-details__less { display: none; }
.hk-details__toggle[aria-expanded="true"] .hk-details__chev { transform: rotate(180deg); }

/* --- Shipping & Warranty band ---------------------------------------- */

.hk-policyband { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.hk-policyband__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}
.hk-policyband__icon { color: var(--hk-gold-onlight); display: flex; padding-block-start: 0.125rem; }
.hk-policyband__label {
	margin: 0 0 0.25rem;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hk-navy);
}
.hk-policyband__text {
	margin: 0 0 0.4375rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--hk-muted);
}
.hk-policyband__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-end: 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hk-navy);
	text-decoration: none;
}
.hk-policyband__link:hover { color: var(--hk-gold-onlight); text-decoration: underline; }
.hk-policyband__ext { color: var(--hk-muted); font-weight: 500; }

/* --- Related Equipment rail ------------------------------------------ */

.hk-section--rail { padding-block: 0; }
.hk-rail { position: relative; }
/*
 * Flexbox, not CSS Grid. This was originally `display:grid; grid-auto-flow:
 * column; grid-auto-columns: calc(...)` — verified correct in headless
 * Chrome (cards measured exactly the intended width), but real iPhone
 * Safari rendered eight unreadably narrow slivers with none of the intended
 * card width. That's a known WebKit bug: a percentage inside
 * grid-auto-columns, on an auto-flow:column grid that is itself the
 * overflow-x:auto scroll container, resolves against the wrong box in
 * Safari. Flexbox with an explicit flex-basis has none of that ambiguity —
 * it's the standard, cross-browser-proven pattern for a scroll-snap card
 * rail — so this session moved off grid rather than chase the Safari bug.
 */
.hk-rail__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block-end: 0.25rem;
}
.hk-rail__track::-webkit-scrollbar { display: none; }
.hk-rail__track > * {
	/*
	 * Mobile default: ~1.6 cards in view, so the next one is visibly cut off
	 * and the row reads as swipeable (§24). flex-shrink:0 is load-bearing —
	 * without it flexbox divides the track between however many cards exist,
	 * which is exactly the "all eight squeezed in" failure this replaces.
	 */
	flex: 0 0 calc((100% - 1rem) / 1.6);
	scroll-snap-align: start;
	min-inline-size: 0;
}
.hk-rail__nav {
	position: absolute;
	inset-block-start: 38%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid var(--hk-border);
	border-radius: 50%;
	background: var(--hk-base);
	color: var(--hk-navy);
	cursor: pointer;
	box-shadow: 0 2px 8px rgb(26 29 35 / 10%);
	transition: opacity 0.15s ease;
}
.hk-rail__nav--prev { inset-inline-start: -1.125rem; transform: scaleX(-1); }
.hk-rail__nav--next { inset-inline-end: -1.125rem; }
.hk-rail__nav[disabled] { opacity: 0; pointer-events: none; }

@media (min-width: 48rem) {
	.hk-pdpsec { padding-inline: 1.75rem; }
	.hk-pdpsec__body { padding-block-end: 1.75rem; }
	.hk-policyband { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
	.hk-details__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2.25rem; }
	.hk-rail__track > * { flex-basis: calc((100% - 2rem) / 2.4); }
}

@media (min-width: 64rem) {
	/* Desktop: sections are always open and the summary is a plain heading —
	   the disclosure behaviour belongs to mobile only. pointer-events keeps
	   the <details> from being collapsible without needing script to enforce
	   it, and theme.js re-opens anything a visitor closed before resizing. */
	.hk-pdpsec__summary { cursor: default; pointer-events: none; }
	.hk-pdpsec__count { display: none; }
	/*
	 * Session 5W.3B.2 follow-up: no `align-items: start` here — grid's own
	 * default (stretch) is what's wanted. Overview and Documents/Technical
	 * are meant to read as one matched pair of cards; `start` was sizing
	 * each `.hk-pdpsec` to its own content, so a short Documents card sat
	 * visibly shorter than a long Overview one. Letting both stretch to the
	 * row's tallest child fixes that with no extra markup.
	 */
	.hk-pdprow { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
	.hk-pdprow > .hk-pdpsec { margin-block-end: 0; }
	/*
	 * Session 5W.3B.2: the two children's own bottom margin is zeroed above
	 * (the grid `gap` handles spacing between them) but nothing was putting
	 * it back on the ROW as a whole — Documents and Specifications measured
	 * at 0px apart on the live page (verified via getBoundingClientRect),
	 * not the "excessive dead space" the row's grey background made it look
	 * like, but a straight collision. Restores the same 1.25rem (20px) the
	 * rest of the below-fold sections already use between each other.
	 */
	.hk-pdprow { margin-block-end: 1.25rem; }
	/* A product whose Enhanced Product Profile replaces the description has
	   no Overview, leaving Documents alone in the row — it takes the full
	   width instead of sitting in a 1.85fr column beside dead space. */
	.hk-pdprow > .hk-pdpsec:only-child { grid-column: 1 / -1; }
	.hk-rail__track > * { flex-basis: calc((100% - 3rem) / 4); }
	.hk-rail__nav { display: flex; }
	.hk-section--rail .hk-container { position: relative; }
}

@media (max-width: 63.9375rem) {
	/* Mobile/tablet: real disclosure rows, chevron visible, as the mobile
	   mockup shows ("Overview", "Product Details (9)", "Specifications"…). */
	.hk-pdpsec__chev { display: flex; }
	.hk-pdpsec:not([open]) .hk-pdpsec__summary { padding-block: 1.125rem; }
}

/* --------------------------------------------------- Specifications --- */

/*
 * A spec table is read down the value column, so the label column is fixed
 * rather than proportional — values then start at the same x on every row and
 * can actually be compared.
 */
.hk-specs__row { grid-template-columns: 11rem 1fr; align-items: baseline; }
.hk-specs__row dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hk-specs__row:last-child { border-block-end: 0; }
.hk-specs__list--wide .hk-specs__row { grid-template-columns: 14rem 1fr; }

.hk-pdp__desc .hk-prose { max-inline-size: 68ch; }
.hk-pdp__desc .hk-prose p { margin-block: 0 0.875rem; }

/*
 * Documents: real tap targets, with the file type and real byte size stated
 * (Session 5W.1C §10 — the size is read off disk in husky_get_pdp_documents(),
 * never estimated, so a buyer on a site connection knows what a link costs
 * before opening it). Two columns from tablet up — this catalogue's products
 * carry two to four documents, which reads better paired than as a single
 * tall stack.
 */
.hk-downloads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hk-downloads__list a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 44px;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	background: var(--hk-base);
	color: var(--hk-navy);
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: none;
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-downloads__list a:hover,
.hk-downloads__list a:focus-visible { border-color: var(--hk-navy); background: var(--hk-surface); }
.hk-downloads__icon { display: inline-flex; flex: 0 0 auto; color: var(--hk-gold-onlight); }
.hk-downloads__name { flex: 1 1 auto; min-inline-size: 0; }
.hk-downloads__meta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hk-muted);
	font-variant-numeric: tabular-nums;
}
.hk-downloads__ext {
	padding: 0.0625rem 0.3125rem;
	border: 1px solid var(--hk-border);
	border-radius: 0.1875rem;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
	.hk-downloads__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Session 5W.3 §6-13: the WPBean gallery's own stage and thumbnail rail
 * are two independent elements with only a small internal gap between them
 * (the plugin's `.wcpg-row` gap) — nothing wraps them as one surface, so
 * without this they read as a main image floating next to a loose column
 * of thumbnail tiles rather than one gallery box. This gives the whole
 * plugin gallery the SAME bordered/radius surface `.hk-pdp__main` already
 * uses for the native fallback, so stage + thumbnails share one visual
 * container at every breakpoint — including mobile, which now shows its
 * own thumbnail strip (`mobileShowThumbs`, set true this session) and
 * needs the same integrated feel. CSS-only: no plugin markup touched.
 */
.hk-pdp__gallery--plugin {
	padding: 0.625rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	background: var(--hk-base);
}

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

@media (max-width: 47.9375rem) {
	/*
	 * Session 5W.1A: identity now opens the card (see .hk-pdp__cardident
	 * below) rather than living in its own element, so there is no longer a
	 * separate block to reorder ahead of the gallery — pulling just the
	 * title out of the card on mobile and leaving the rest of the card
	 * behind would recreate the exact "detached title" problem this session
	 * removed. Gallery first, then the full card (title included) — the
	 * brief's own documented second option, chosen because it is the one
	 * that can't reintroduce a split identity block.
	 */
	.hk-pdp__gallery { order: 1; }
	.hk-pdp__summary { order: 2; }
	/* §5/§16: 22-24px on a phone — was 20-26px, which ran both a shade small
	   at the bottom and slightly loud at the top of the range. */
	.hk-pdp__title { margin-block-end: 0.5rem; font-size: clamp(1.375rem, 5.4vw, 1.5rem); }
	.hk-pdp__identity { margin-block-end: 0; gap: 0.5rem 1.25rem; }

	.hk-pdp__top { gap: 1.125rem; padding-block: 0.75rem 1.5rem; }
	.hk-pdp__buypanel { padding: 1rem; }
	.hk-pdp__price { font-size: 1.625rem; }
	.hk-pdp__thumbbtn { inline-size: 56px; block-size: 56px; }
	.hk-specs__row { grid-template-columns: 1fr; gap: 0.125rem; padding-block: 0.5rem; }
	.hk-specs__row dt { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
	.hk-specs__list--wide .hk-specs__row { grid-template-columns: 1fr; }
	.hk-pdp { padding-block-end: 5rem; }
	.hk-pdp__more { padding: 1rem; }

	/*
	 * Session 5W.1C §13 (390). The stage is far smaller here, so the desktop
	 * safety insets would leave the product looking lost inside its own
	 * border — every shape tightens, square most of all since it had the
	 * most to give back.
	 */
	.hk-pdp__main img { padding: 1.125rem; }
	.hk-pdp__main--portrait img { padding: 0.875rem; }
	.hk-pdp__main--landscape img { padding: 1rem; }
	.hk-pdp__main--square img { padding: 1.125rem; }

	/* §13: thumbnails scroll horizontally rather than wrapping into rows
	   that push the purchase card off-screen. */
	.hk-pdp__thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		padding-block-end: 0.25rem;
	}

	/* §13: a two-column compact spec grid, not six full-width rows. */
	.hk-keyspecs { padding: 1rem; margin-block-end: 1.5rem; }
	.hk-keyspecs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; }
	.hk-keyspecs__value { font-size: 0.9375rem; }

	/* §4: the promo sits under the price on a phone rather than beside it. */
	.hk-pdp__promo { max-inline-size: none; inline-size: 100%; }
}

@media (min-width: 64rem) {
	/*
	 * Session 5W.1C §3: 54% gallery / 46% decision panel, replacing 5W.1's
	 * 48.5/51.5. That earlier split was the right correction at the time
	 * (the image genuinely was overpowering a too-narrow panel), but it was
	 * made against a 1360px --commerce container; on the narrower, purpose-
	 * built --pdp container the same absolute panel width is now reached at
	 * a smaller share, so the image can take the larger fraction again
	 * without regaining its old dominance. Measured at 1440 / 1180 usable:
	 *   gallery region 54% of (1180 - 30 gap) = ~621px
	 *     - vertical thumbnail rail 60px + 0.75rem gap  =  72px
	 *     - main stage                                   = ~549px  (§6: 520-580)
	 *   decision panel 46%                               = ~529px
	 * So both the §3 percentages and the §6 stage target are satisfied by
	 * the same numbers rather than trading off against each other.
	 *
	 * Session 5W.1A: identity lives inside the card, so "ident" is no longer
	 * a separate grid area — one row, gallery and card sharing the same top
	 * edge structurally (locked by §2, unchanged here).
	 */
	.hk-pdp__top {
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
		grid-template-areas: "gallery summary";
		gap: 0.75rem 1.875rem;
		align-content: start;
		align-items: start;
	}
	.hk-pdp__gallery { grid-area: gallery; }
	.hk-pdp__summary { grid-area: summary; }
	.hk-pdp__buypanel { padding: 1.5rem; }

	/*
	 * §6: thumbnails move from a row beneath the stage to a vertical rail
	 * beside it, as in the mockup. This keeps the stage square without the
	 * thumbnail row adding height below it, and reads as a filmstrip rather
	 * than as a second content block. The rail is fixed-width so the stage
	 * gets every remaining pixel.
	 */
	.hk-pdp__gallery {
		display: grid;
		grid-template-columns: 3.75rem minmax(0, 1fr);
		gap: 0.75rem;
		align-items: start;
	}
	.hk-pdp__gallery > .hk-pdp__main { grid-column: 2; grid-row: 1; }
	.hk-pdp__thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		margin: 0;
		max-block-size: none;
	}
	.hk-pdp__thumbbtn { inline-size: 3.75rem; block-size: 3.75rem; }
	/* Selected marker moves from an underline to an inline bar on the rail. */
	.hk-pdp__thumbbtn[aria-pressed="true"]::after {
		inset-inline: auto;
		inset-inline-start: -5px;
		inset-block: 20%;
		inline-size: 2px;
		block-size: auto;
	}
	/* A single-image product has no rail, so the stage takes the full width. */
	.hk-pdp__gallery:not(:has(.hk-pdp__thumbs)) { grid-template-columns: minmax(0, 1fr); }
	.hk-pdp__gallery:not(:has(.hk-pdp__thumbs)) > .hk-pdp__main { grid-column: 1; }

	/*
	 * Session 5W.2: when the WPBean plugin gallery is active for a product,
	 * `.hk-pdp__gallery--plugin` holds ONE child — the plugin's own
	 * `.wpbean-product-gallery` wrapper — which already builds its own
	 * complete internal layout (main stage + a left-side thumbnail rail,
	 * per the `thumbnailPosition: "left"` rule configured in wp-admin →
	 * Product Gallery). The two-column 3.75rem-rail grid above was built
	 * for Husky's OWN two-element markup (.hk-pdp__main + .hk-pdp__thumbs)
	 * and must not also apply here — carving out a host-side rail column
	 * would squeeze the plugin's already-complete rail into a second,
	 * nested one. Explicit and named, rather than relying on the
	 * single-image `:not(:has(.hk-pdp__thumbs))` rule above to match this
	 * case by coincidence (it does, since .hk-pdp__thumbs genuinely never
	 * exists in this branch — but that is accidental correctness, not
	 * documented intent).
	 */
	.hk-pdp__gallery--plugin { display: block; }
}

/*
 * 1024 specifically (§13). Two columns stay — measured, they remain
 * genuinely usable here (stage ~442px, decision panel ~438px, near-balanced
 * exactly as §13 asks) rather than being forced. Two adjustments make that
 * true rather than merely arithmetic: the gap tightens to §13's stated
 * ~24px, and the H1 caps at 26px — the bottom of §5's 26-30px band — so a
 * long commercial name does not crush inside the narrower panel. Both
 * revert automatically above 1280.
 */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.hk-pdp__top { gap: 0.75rem 1.5rem; }
	.hk-pdp__title { font-size: 1.625rem; }
	.hk-pdp__buypanel { padding: 1.25rem; }
}

/* ================================================= Enhanced Product Profile */

/*
 * Every colour here reads `var(--hk-epp-*, <husky-default>)`. A Brand Design
 * Profile can only ever set those four custom properties (inline, on the
 * module's own <section>, in enhanced-profiles.php) — never a raw style
 * block. Absent a brand, every module renders in plain Husky navy/brass, so
 * an ordinary product with a profile enabled but no brand chosen looks
 * exactly like the rest of the site.
 */
.hk-epp { padding-block: var(--hk-epp-space, 3rem); }
.hk-epp--spacing-compact { --hk-epp-space: 1.75rem; }
.hk-epp--spacing-standard { --hk-epp-space: 3rem; }
.hk-epp--spacing-generous { --hk-epp-space: 4.5rem; }

.hk-epp--light { background: var(--hk-epp-light, var(--hk-base)); color: var(--hk-ink); }
.hk-epp--dark { background: var(--hk-epp-dark, var(--hk-navy)); color: #fff; }
.hk-epp--accent { background: var(--hk-epp-accent, var(--hk-warm)); color: var(--hk-ink); }
/*
 * Per-variant defaults above; a Brand Design Profile's own
 * `_hk_bdp_text_treatment` (rendered as `.hk-epp--text-navy` /
 * `.hk-epp--text-white`) always wins, because a brand accent colour can be
 * dark (needs white text) or light (needs ink text) independent of which
 * variant an admin picked for a given module. Same specificity, later in the
 * cascade, so this is the rule that actually decides.
 */
.hk-epp--text-navy { color: var(--hk-ink); }
.hk-epp--text-white { color: #fff; }

.hk-epp--bordered { border-block: 1px solid var(--hk-border); }
.hk-epp--dark.hk-epp--bordered,
.hk-epp--accent.hk-epp--bordered { border-color: rgb(255 255 255 / 18%); }

.hk-epp__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.hk-epp--align-center .hk-epp__inner { text-align: center; align-items: center; }

.hk-epp h2, .hk-epp h3 { font-family: var(--hk-font-display); color: inherit; }
.hk-epp--dark h2, .hk-epp--dark h3,
.hk-epp--text-white h2, .hk-epp--text-white h3 { color: #fff; }
.hk-epp--heading-tight h2, .hk-epp--heading-tight h3 { letter-spacing: -0.03em; }
.hk-epp--heading-wide h2, .hk-epp--heading-wide h3 { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9em; }

.hk-epp .hk-epp__cta { text-decoration: none; }
.hk-epp .hk-epp__cta::after { content: "→"; margin-inline-start: 0.5rem; transition: transform var(--hk-t); display: inline-block; }
.hk-epp .hk-epp__cta:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.hk-epp .hk-epp__cta:hover::after { transform: none; }
}
.hk-epp--btn-solid-accent .hk-epp__cta { background: var(--hk-epp-accent, var(--hk-navy)); color: #fff; border: 1px solid transparent; border-radius: var(--hk-r); padding: 0.625rem 1.125rem; display: inline-flex; min-block-size: 44px; align-items: center; font-weight: 600; }
.hk-epp--btn-outline-accent .hk-epp__cta { background: transparent; color: var(--hk-epp-accent, var(--hk-navy)); border: 1px solid var(--hk-epp-accent, var(--hk-navy)); border-radius: var(--hk-r); padding: 0.625rem 1.125rem; display: inline-flex; min-block-size: 44px; align-items: center; font-weight: 600; }
.hk-epp--dark.hk-epp--btn-outline-accent .hk-epp__cta,
.hk-epp--dark .hk-epp__cta { color: #fff; border-color: rgb(255 255 255 / 55%); }
.hk-epp--btn-solid-dark .hk-epp__cta { background: var(--hk-epp-dark, var(--hk-navy-d)); color: #fff; border: 1px solid transparent; border-radius: var(--hk-r); padding: 0.625rem 1.125rem; display: inline-flex; min-block-size: 44px; align-items: center; font-weight: 600; }

/*
 * Module A: promotion / rebate.
 *
 * A full-strength accent-coloured band read as "wall of red" in review — a
 * manufacturer promo needs to interrupt the PDP's rhythm, not shout over it.
 * This is the restrained version: Husky's own surface stays dominant, and
 * the accent colour does its work as a rule bar, the eyebrow, and the CTA —
 * exactly the "editorial accent, not a paint job" brief. The soft
 * diagonal wash is a few percent of the accent colour blended toward
 * transparent; browsers without color-mix() just show the plain surface
 * underneath, which is a perfectly fine fallback, not a broken one.
 */
.hk-epp-promo {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	border-inline-start: 3px solid var(--hk-epp-accent, var(--hk-gold));
	background: linear-gradient(135deg, color-mix(in srgb, var(--hk-epp-accent, var(--hk-gold)) 7%, transparent), transparent 65%);
}
.hk-epp--align-center .hk-epp-promo {
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-inline-start: 0;
	border-block-start: 3px solid var(--hk-epp-accent, var(--hk-gold));
}
.hk-epp--dark .hk-epp-promo,
.hk-epp--accent .hk-epp-promo { border-color: var(--hk-epp-accent, #fff); background: none; }
.hk-epp-promo__icon { flex: 0 0 auto; inline-size: 3rem; block-size: 3rem; }
.hk-epp-promo__icon img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.hk-epp-promo__eyebrow { margin: 0 0 0.5rem; font-family: var(--hk-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hk-epp-accent, var(--hk-gold-onlight)); }
.hk-epp--dark .hk-epp-promo__eyebrow,
.hk-epp--accent .hk-epp-promo__eyebrow { color: var(--hk-epp-accent, inherit); }
.hk-epp-promo__headline { margin: 0 0 0.625rem; font-size: 1.625rem; line-height: 1.15; }
.hk-epp-promo__text { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; max-inline-size: 60ch; }
.hk-epp-promo__date { margin: 0 0 0.75rem; font-size: 0.8125rem; opacity: 0.75; }

/* --- Module B: image + text editorial --- */
.hk-epp-editorial { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.hk-epp-editorial__heading {
	position: relative;
	margin: 0 0 1rem;
	padding-block-start: 0.875rem;
	font-size: 1.875rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
/* Same rule-bar motif as the promo module's border — one consistent way
   the profile signals "manufacturer accent," not a different device per
   module. */
.hk-epp-editorial__heading::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 2.25rem;
	block-size: 3px;
	background: var(--hk-epp-accent, var(--hk-gold));
}
.hk-epp--align-center .hk-epp-editorial__heading::before { inset-inline-start: 50%; transform: translateX(-50%); }
.hk-epp-editorial__text { max-inline-size: 58ch; font-size: 1rem; line-height: 1.65; }
/* 1:1, not 4:3 — same fix as the PDP main image (Session 5I follow-up): a
   4:3 box around this catalogue's largely-square source photography either
   letterboxes or crops into the product depending on object-fit. Matching
   the box to the photo's real shape removes the box-added dead space; any
   whitespace still visible after that is baked into the source photo
   itself and is a photography/asset issue, not a CSS one. */
.hk-epp-editorial__media img { border-radius: var(--hk-r-lg); inline-size: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.hk-epp-editorial__media figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; opacity: 0.75; }
@media (min-width: 48rem) {
	.hk-epp-editorial--image-left { grid-template-columns: 1fr 1.05fr; }
	.hk-epp-editorial--image-right { grid-template-columns: 1.05fr 1fr; }
	.hk-epp-editorial--image-right .hk-epp-editorial__media { order: 2; }
	.hk-epp-editorial--wide-above { grid-template-columns: 1fr; }
}

/*
 * Session 5W.3 §39-44: the PDP Brand Design Profile band. Deliberately
 * lighter-touch than the EPP editorial module above — this sits in the
 * Husky white/cool-neutral document, not on a manufacturer's own dark
 * surface, so the profile's accent shows as a restrained rule-bar and CTA
 * colour only. Never render on the profile's dark/light background colours
 * here — those are for the manufacturer's OWN pages, not this PDP band.
 */
.hk-bdp-band {
	margin-block: 0 2.5rem;
	padding-block: 2rem;
	border-block-start: 1px solid var(--hk-border);
}
.hk-bdp-band__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: center;
}
.hk-bdp-band__media img {
	inline-size: 100%;
	border-radius: var(--hk-r-lg);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--hk-surface);
}
.hk-bdp-band__logo img { max-block-size: 2.25rem; inline-size: auto; margin-block-end: 0.875rem; }
.hk-bdp-band__eyebrow {
	margin: 0 0 0.625rem;
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-epp-accent, var(--hk-gold-onlight));
}
.hk-bdp-band__headline {
	position: relative;
	margin: 0 0 1rem;
	padding-block-start: 0.875rem;
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-bdp-band__headline::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 2.25rem;
	block-size: 3px;
	background: var(--hk-epp-accent, var(--hk-gold));
}
.hk-bdp-band__copy { max-inline-size: 58ch; font-size: 1rem; line-height: 1.65; color: var(--hk-ink); }
.hk-bdp-band__copy p:last-child { margin-block-end: 0; }
.hk-bdp-band__cta { margin-block-start: 1.25rem; }
.hk-bdp-band__logo img { max-block-size: 2.5rem; inline-size: auto; }
/* Copy-only profiles (the brand-description fallback) stay a single readable
   measure rather than stretching the full container width. */
.hk-bdp-band--copyonly .hk-bdp-band__copy { max-inline-size: 74ch; }

@media (min-width: 48rem) {
	.hk-bdp-band { padding-block: 3rem; }
	.hk-bdp-band--image-left .hk-bdp-band__inner { grid-template-columns: 1fr 1.1fr; }
}

/*
 * Module C: performance / comparison — the profile's most important section.
 * A dated manufacturer graphic needs real framing to read as a credible
 * technical exhibit rather than "an old image dropped into a dark box," and
 * its historical qualification is a compliance-critical line, not fine
 * print — it gets its own bordered, icon-marked callout instead of faint
 * trailing opacity text.
 */
.hk-epp-comparison__heading { margin: 0 0 0.625rem; font-size: 1.75rem; letter-spacing: -0.01em; }
.hk-epp-comparison__intro { margin: 0 0 1.75rem; max-inline-size: 65ch; font-size: 1rem; line-height: 1.6; opacity: 0.85; }
.hk-epp-comparison__media {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--hk-r-lg);
	background: rgb(255 255 255 / 4%);
}
.hk-epp--light .hk-epp-comparison__media { border-color: var(--hk-border); background: var(--hk-surface); }
.hk-epp-comparison__media img { border-radius: var(--hk-r); inline-size: 100%; display: block; }
.hk-epp-comparison__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.hk-epp-comparison__point { padding: 0.875rem; border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-epp--dark .hk-epp-comparison__point,
.hk-epp--accent .hk-epp-comparison__point { border-color: rgb(255 255 255 / 25%); }
.hk-epp-comparison__point dt { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.hk-epp-comparison__point dd { margin: 0; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.hk-epp-comparison__note {
	position: relative;
	margin: 0;
	max-inline-size: 70ch;
	padding: 0.875rem 1rem 0.875rem 2.75rem;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--hk-r);
	background: rgb(255 255 255 / 6%);
	font-size: 0.8125rem;
	line-height: 1.6;
	opacity: 1;
}
.hk-epp-comparison__note::before {
	content: "i";
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: 0.875rem;
	display: inline-grid;
	place-items: center;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	font-style: italic;
}
.hk-epp--light .hk-epp-comparison__note { border-color: var(--hk-border); background: var(--hk-surface); color: var(--hk-ink); }

/* --- Module D: services / included benefits --- */
.hk-epp-services__heading { margin: 0 0 1.25rem; font-size: 1.375rem; }
.hk-epp-services__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.hk-epp-services__grid--list { gap: 0.875rem; }
.hk-epp-services__item { padding: 1rem; border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); }
.hk-epp--dark .hk-epp-services__item,
.hk-epp--accent .hk-epp-services__item { border-color: rgb(255 255 255 / 22%); }
.hk-epp-services__grid--list .hk-epp-services__item { border: 0; border-block-end: 1px solid var(--hk-border); border-radius: 0; padding: 0.875rem 0; }
.hk-epp-services__status { display: inline-block; margin-block-end: 0.5rem; padding: 0.1875rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.hk-epp-services__status--included { background: var(--hk-surface); color: var(--hk-navy); }
.hk-epp-services__status--available { background: transparent; border: 1px solid currentColor; opacity: 0.8; }
.hk-epp-services__title { margin: 0 0 0.375rem; font-size: 1rem; }
.hk-epp-services__desc { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.55; opacity: 0.9; }
@media (min-width: 48rem) {
	.hk-epp-services__grid--two-col { grid-template-columns: repeat(2, 1fr); }
	.hk-epp-services__grid--three-col { grid-template-columns: repeat(3, 1fr); }
}

/* --- Module E: image banner --- */

/* A full-bleed banner drops the section's own padding — the point is an
   edge-to-edge image, not an edge-to-edge image with a Husky-grey margin
   around it — and needs position:relative to host the absolutely
   positioned media fill. */
.hk-epp--fullbleed { padding-block: 0; position: relative; overflow: hidden; }

.hk-epp-banner { position: relative; }
.hk-epp-banner__media img { inline-size: 100%; block-size: auto; display: block; }
.hk-epp-banner:not(.hk-epp-banner--fullbleed) .hk-epp-banner__media img { border-radius: var(--hk-r-lg); }

.hk-epp-banner--fullbleed { min-block-size: 18rem; }
.hk-epp-banner--fullbleed .hk-epp-banner__media { position: absolute; inset: 0; }
.hk-epp-banner--fullbleed .hk-epp-banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.hk-epp-banner__textwrap {
	position: relative;
	display: flex;
	padding-block: 2rem;
}
.hk-epp-banner--fullbleed .hk-epp-banner__textwrap { position: absolute; inset: 0; padding-block: 2.5rem; }
.hk-epp-banner--overlay-dark.hk-epp-banner--fullbleed .hk-epp-banner__textwrap { background: linear-gradient(0deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 10%) 60%); }
.hk-epp-banner--overlay-accent.hk-epp-banner--fullbleed .hk-epp-banner__textwrap { background: linear-gradient(0deg, var(--hk-epp-accent, var(--hk-navy)) 0%, transparent 75%); opacity: 0.92; }

.hk-epp-banner--center .hk-epp-banner__textwrap { align-items: center; justify-content: center; text-align: center; }
.hk-epp-banner--left .hk-epp-banner__textwrap { align-items: center; justify-content: flex-start; text-align: start; }
.hk-epp-banner--bottom-left .hk-epp-banner__textwrap { align-items: flex-end; justify-content: flex-start; text-align: start; }

.hk-epp-banner__text { max-inline-size: 36rem; }
.hk-epp-banner--fullbleed .hk-epp-banner__text { color: #fff; }
.hk-epp-banner__heading { margin: 0 0 0.5rem; font-size: 1.75rem; }
.hk-epp-banner__sub { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; opacity: 0.9; }

@media (max-width: 47.9375rem) {
	.hk-epp-banner--fullbleed { min-block-size: 14rem; }
	.hk-epp-banner__heading { font-size: 1.375rem; }
}

/* --- Module F: shortcode / embed --- */

/* Deliberately unopinionated — a shortcode's own markup carries its own
   styling. This only guarantees it can't blow out the module's width. */
.hk-epp-shortcode { max-inline-size: 100%; overflow-x: auto; }
/* Only ever seen by a logged-in editor — see husky_render_epp_shortcode(). */
.hk-epp-shortcode__blocked {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--hk-border);
	border-radius: var(--hk-r);
	font-size: 0.8125rem;
	color: var(--hk-muted);
}

/* ---------------------------------------- Enhanced Product Profile: mobile */

/*
 * The desktop spacing scale (1.75 / 3 / 4.5rem) is tuned for a page that's
 * already wide — at 375px, "generous" read as a dead 72px gap before
 * anything else loaded. Every module keeps its full qualification and
 * source-note text on mobile (nothing is hidden to shorten the page); only
 * the whitespace and type scale around it come down.
 */
@media (max-width: 47.9375rem) {
	.hk-epp--spacing-compact { --hk-epp-space: 1.5rem; }
	.hk-epp--spacing-standard { --hk-epp-space: 2rem; }
	.hk-epp--spacing-generous { --hk-epp-space: 2.5rem; }

	.hk-epp-promo { padding: 1.125rem 1.25rem; gap: 0.875rem; }
	.hk-epp-promo__headline { font-size: 1.3125rem; }

	.hk-epp-editorial { gap: 1.25rem; }
	.hk-epp-editorial__heading { font-size: 1.5rem; }

	.hk-epp-comparison__heading { font-size: 1.375rem; }
	.hk-epp-comparison__media { padding: 0.75rem; margin-block-end: 1.125rem; }
	.hk-epp-comparison__note { font-size: 0.8125rem; padding-inline-start: 2.5rem; }

	.hk-epp .hk-epp__cta { inline-size: 100%; justify-content: center; }
}

/* ================================================================ About ---
 *
 * About Us, rebuilt native in Session 5R.0 (inc/about.php). The legacy page it
 * replaces was a WPBakery layout whose H1/H4 were hardcoded `color:#fff` over a
 * background image — unreadable once the image was not what 2019 assumed. There
 * is no white body text anywhere below: every heading and paragraph here takes
 * its colour from the theme's ink tokens, so it cannot repeat that failure.
 *
 * The composition is editorial on purpose — a reading measure inside a wider
 * frame, alternating image/text rows, numerals instead of cards. No card grid,
 * no navy field, no decorative gradient.
 * ----------------------------------------------------------------------- */

.hk-about { padding-block-end: 0; }

/* ---- Editorial intro ---- */
.hk-about__intro { padding-block: 1rem 2.5rem; }
.hk-about__introinner { max-inline-size: 52rem; }

.hk-about__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-about__eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	flex: 0 0 auto;
	background: var(--hk-gold);
}

.hk-about__title {
	margin: 0 0 0.75rem;
	font-family: var(--hk-font-display);
	/* Clamped rather than stepped: the title is one line of two words and should
	   scale continuously instead of jumping at a breakpoint. */
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}

.hk-about__lede {
	margin: 0;
	max-inline-size: 40ch;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	line-height: 1.55;
	color: var(--hk-muted);
}

/* ---- Shared small section label ---- */
.hk-about__sectionlabel {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Brass as text on a light surface must use the darkened token (5.01:1);
	   the brand gold itself is 2.85:1 on white and is a surface colour only. */
	color: var(--hk-gold-onlight);
}

/* ---- Who we are ---- */
.hk-about__who { padding-block: 2.5rem 0; }
.hk-about__whoinner { border-block-start: 1px solid var(--hk-border); padding-block-start: 2.5rem; }
.hk-about__prose { max-inline-size: 68ch; }
.hk-about__prose p {
	margin: 0 0 1.15em;
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--hk-ink);
}
.hk-about__prose p:last-child { margin-block-end: 0; }

/* ---- What we do ---- */
.hk-about__work { padding-block: 3.5rem 1rem; }

.hk-about__row {
	display: grid;
	/* minmax(0,…) so a long word or wide image can never force the grid wider
	   than its container — the classic source of horizontal page overflow. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	padding-block: 2.25rem;
	border-block-start: 1px solid var(--hk-border);
}
.hk-about__row:first-of-type { border-block-start: 0; padding-block-start: 0; }

.hk-about__rowmedia { position: relative; }
.hk-about__rowmedia img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--hk-r);
}

.hk-about__rowcopy { align-self: center; }

.hk-about__num {
	display: block;
	margin-block-end: 0.5rem;
	font-family: var(--hk-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hk-gold-onlight);
}

.hk-about__rowtitle {
	margin: 0 0 0.5rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	line-height: 1.2;
	color: var(--hk-navy);
}

.hk-about__rowbody {
	margin: 0 0 0.9rem;
	max-inline-size: 52ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--hk-ink);
}

/* ---- Focus band ---- */
.hk-about__focus {
	margin-block-start: 2.5rem;
	padding-block: 3rem;
	background: var(--hk-warm);
	border-block: 1px solid var(--hk-warm-line);
}
.hk-about__focusinner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
.hk-about__focustitle {
	margin: 0 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-about__focuscopy p {
	margin: 0 0 1.1em;
	max-inline-size: 60ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--hk-ink);
}
.hk-about__focuscopy p:last-child { margin-block-end: 0; }

.hk-about__detailtitle {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-gold-onlight);
}
.hk-about__dl { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.hk-about__dl dt {
	font-weight: 600;
	color: var(--hk-muted);
	font-size: 0.8125rem;
}
.hk-about__dl dd {
	margin: 0 0 0.9rem;
	color: var(--hk-ink);
	/* Long addresses and emails must break rather than push the grid wide. */
	overflow-wrap: anywhere;
}
.hk-about__dl dd:last-child { margin-block-end: 0; }
.hk-about__dl a { color: var(--hk-navy); text-decoration: underline; text-underline-offset: 2px; }
.hk-about__dl a:hover, .hk-about__dl a:focus-visible { color: var(--hk-gold-onlight); }

/* ---- Closing CTA ---- */
.hk-about__cta { padding-block: 2.5rem 3.5rem; }
.hk-about__ctainner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}
.hk-about__ctatext {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--hk-navy);
}
.hk-about__ctaactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* ---- Breakpoints ---- */
@media (min-width: 48rem) {
	.hk-about__intro { padding-block: 1.5rem 3rem; }
	.hk-about__focusinner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; }
}

@media (min-width: 64rem) {
	.hk-about__work { padding-block: 4.5rem 1rem; }
	.hk-about__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: center;
		padding-block: 3rem;
	}
	/* Alternating: even rows put the photograph second without reordering the
	   DOM, so reading order stays image-then-copy for assistive tech. */
	.hk-about__row--flip .hk-about__rowmedia { order: 2; }
	.hk-about__focus { padding-block: 4rem; }
}

/* ======================================================================
 * Warranty & Product Support hub (Session 5X.1)
 *
 * Reuses the site's existing tokens/scale wholesale — .hk-container is
 * already 75rem/1200px (the task's own preferred width), .hk-prose is
 * already a 74ch reading measure, .hk-eyebrow/.hk-btn/.hk-minilink are the
 * shared voice. Nothing here introduces a new colour, radius or shadow.
 * ====================================================================== */

.hk-warranty { padding-block-end: 0; }

/* ---- Hero ---- */
.hk-warhero { padding-block: 1.5rem 2.5rem; }
.hk-warhero__inner { max-inline-size: 52rem; }
.hk-warhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-warhero__lede {
	margin: 0 0 1.5rem;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}
.hk-warhero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Warranty at a glance ---- */
.hk-warglance {
	padding-block: 1.5rem;
	background: var(--hk-surface);
	border-block: 1px solid var(--hk-border);
}
.hk-warglance__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}
.hk-warglance__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hk-warglance__icon { color: var(--hk-gold-onlight); flex: 0 0 auto; padding-block-start: 0.125rem; }
.hk-warglance__label {
	margin: 0 0 0.2rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-warglance__value {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hk-navy);
}

/* ---- Section rhythm ---- */
.hk-warsec { padding-block: 2.5rem; }
.hk-warsec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-warsec__inner { max-inline-size: 56rem; }
.hk-warsec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-warsec__subtitle {
	margin: 2rem 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	color: var(--hk-navy);
}
.hk-warsec__prose p {
	margin: 0 0 1.1em;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--hk-ink);
}
.hk-warsec__prose p:last-child { margin-block-end: 0; }
.hk-warsec .hk-minilink { margin-block-start: 1.25rem; }
/* Sections using the full-width .hk-container (not .hk-warsec__inner's 56rem
   cap — the brand directory, Session 5X.2) still need their intro prose held
   to a reading measure; every 56rem-capped section is already narrower than
   this, so the rule is a no-op there. */
.hk-warsec__prose { max-inline-size: 62ch; }

/* ---- Claim steps ---- */
.hk-warsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.hk-warsteps__item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; }
.hk-warsteps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
}
.hk-warsteps__title { margin: 0 0 0.3rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-warsteps__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Claim preparation panel ---- */
.hk-warprep {
	margin-block-start: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	border-inline-start: 3px solid var(--hk-gold);
}
.hk-warprep__title { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-warprep__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.hk-warprep__list li {
	position: relative;
	padding-inline-start: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--hk-ink);
}
.hk-warprep__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	block-size: 0.4rem;
	inline-size: 0.4rem;
	margin-block-start: 0.5rem;
	border-radius: 50%;
	background: var(--hk-gold);
}
/* The one required item in an otherwise "nice to have" list needs to read as
   different at a glance, not just in wording — a filled navy marker instead
   of the brass dot, so the requirement doesn't blend into the optional rest. */
.hk-warprep__item--required::before { background: var(--hk-navy); inline-size: 0.5rem; block-size: 0.5rem; margin-block-start: 0.45rem; }
.hk-warprep__item--required strong { color: var(--hk-navy); }

/* ---- Eligibility bullet list ---- */
.hk-warlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.hk-warlist li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-ink);
}
.hk-warlist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	block-size: 1px;
	inline-size: 0.9rem;
	background: var(--hk-gold-onlight);
}

/* ---- Manufacturer vs Husky comparison ---- */
.hk-warcompare { overflow-x: auto; border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-warcompare__table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hk-warcompare__table th, .hk-warcompare__table td { padding: 0.75rem 1rem; text-align: start; border-block-end: 1px solid var(--hk-border); }
.hk-warcompare__table thead th {
	background: var(--hk-surface);
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-navy);
}
.hk-warcompare__table tbody th { font-weight: 600; color: var(--hk-navy); white-space: nowrap; }
.hk-warcompare__table tbody td { color: var(--hk-ink); }
.hk-warcompare__table tbody tr:last-child th, .hk-warcompare__table tbody tr:last-child td { border-block-end: 0; }

/* ---- Warranty Support by Brand (Session 5X.2) ---- */
.hk-brandlist {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem 1.5rem;
}
.hk-brandlist li { font-size: 0.9375rem; border-block-end: 1px solid var(--hk-border); padding-block-end: 0.5rem; }
.hk-brandlist a { color: var(--hk-navy); text-decoration: none; }
.hk-brandlist a:hover, .hk-brandlist a:focus-visible { color: var(--hk-gold-onlight); text-decoration: underline; text-underline-offset: 2px; }

.hk-brandlist__more { margin-block-start: 1.5rem; border-block-start: 1px solid var(--hk-border); padding-block-start: 1.25rem; }
.hk-brandlist__moretoggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-family: var(--hk-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hk-gold-onlight);
	list-style: none;
}
.hk-brandlist__moretoggle::-webkit-details-marker { display: none; }
.hk-brandlist__moretoggle::after { content: "→"; transition: transform var(--hk-t); }
.hk-brandlist__more[open] .hk-brandlist__moretoggle::after { transform: rotate(90deg); }
.hk-brandlist__more .hk-brandlist { margin-block-start: 1.25rem; }

/* ---- FAQ accordion ---- */
.hk-faq { border-block-start: 1px solid var(--hk-border); }
.hk-faq__item { border-block-end: 1px solid var(--hk-border); }
.hk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hk-navy);
	cursor: pointer;
	list-style: none;
}
.hk-faq__q::-webkit-details-marker { display: none; }
.hk-faq__q:focus-visible { outline: 2px solid var(--hk-navy); outline-offset: 2px; }
.hk-faq__chev { flex: 0 0 auto; color: var(--hk-gold-onlight); transition: transform var(--hk-t); }
.hk-faq__item[open] .hk-faq__chev { transform: rotate(180deg); }
.hk-faq__a { margin: 0 0 1.1rem; max-inline-size: 66ch; font-size: 0.9375rem; line-height: 1.65; color: var(--hk-muted); }

/* ---- Support CTA ---- */
.hk-warcta { padding-block: 2.5rem; background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-warcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; }
.hk-warcta__title { margin: 0 0 0.35rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: var(--hk-navy); }
.hk-warcta__body { margin: 0; max-inline-size: 44ch; font-size: 0.9375rem; line-height: 1.5; color: var(--hk-muted); }
.hk-warcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Full warranty terms ---- */
.hk-warterms { padding-block: 2.5rem 3.5rem; }
.hk-warterms__inner { max-inline-size: 56rem; }
.hk-warterms__title { margin: 0 0 0.5rem; font-family: var(--hk-font-display); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); color: var(--hk-navy); }
.hk-warterms__note { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--hk-muted); }
.hk-warterms__body { padding: 1.75rem 2rem; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); }
.hk-warterms__body.hk-prose { max-inline-size: none; }
.hk-warterms__body p { font-size: 1rem; line-height: 1.75; }

/* ---- Related policy links ----
   Session 5AE.1: generalized into .hk-policynav, shared by every V2 policy
   page (Warranty, Payments, Delivery, Returns, Terms, Privacy) via the one
   husky_render_policy_nav() in inc/policy-nav.php — this used to be two
   near-identical blocks (.hk-warpolicynav / .hk-paypolicynav). */
.hk-policynav { padding-block: 1.5rem; border-block-start: 1px solid var(--hk-border); }
.hk-policynav__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.hk-policynav__label {
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-policynav__inner ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.hk-policynav__inner a { font-size: 0.875rem; color: var(--hk-navy); text-decoration: underline; text-underline-offset: 2px; }
.hk-policynav__inner a:hover, .hk-policynav__inner a:focus-visible { color: var(--hk-gold-onlight); }

@media (min-width: 48rem) {
	.hk-warhero { padding-block: 2.5rem 3rem; }
	.hk-warterms__body { padding: 2.25rem 2.75rem; }
	.hk-brandlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4 columns from desktop only — 2 columns through tablet, per spec. */
@media (min-width: 64rem) {
	.hk-warglance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 64rem) {
	.hk-warsec { padding-block: 3.5rem; }
	.hk-warcta { padding-block: 3rem; }
	.hk-brandlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================================
 * Restaurant Construction & Renovation hub (Session 5Y.1)
 *
 * Same tokens and rhythm as the Warranty hub above (.hk-container is
 * already 1200px, .hk-prose already a 74ch measure) — a distinct class
 * namespace (.hk-rcv*) because this page has its own component shapes
 * (service modules, process steps, project photos), not because the
 * design language differs.
 * ====================================================================== */

.hk-rcv { padding-block-end: 0; }

/* ---- Hero ---- */
.hk-rcvhero { padding-block: 1.5rem 2.5rem; }
.hk-rcvhero__inner { max-inline-size: 54rem; }
.hk-rcvhero__title {
	margin: 0 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-rcvhero__lede {
	margin: 0 0 1.5rem;
	max-inline-size: 64ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}
.hk-rcvhero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Service summary strip ---- */
.hk-rcvstrip { padding-block: 1.75rem; background: var(--hk-surface); border-block: 1px solid var(--hk-border); }
.hk-rcvstrip__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hk-rcvstrip__icon { display: flex; color: var(--hk-gold-onlight); margin-block-end: 0.6rem; }
.hk-rcvstrip__label { margin: 0 0 0.25rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-rcvstrip__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

/* ---- Section rhythm (parallels .hk-warsec) ---- */
.hk-rcvsec { padding-block: 2.5rem; }
.hk-rcvsec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-rcvsec__inner { max-inline-size: 62rem; }
.hk-rcvsec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-rcvsec__subtitle {
	margin: 2rem 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	color: var(--hk-navy);
}
.hk-rcvsec__prose p {
	margin: 0 0 1.1em;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--hk-ink);
}
.hk-rcvsec__prose p:last-child { margin-block-end: 0; }
.hk-rcvsec__note { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--hk-muted); }
.hk-rcvsec__note a { color: var(--hk-navy); text-decoration: underline; text-underline-offset: 2px; }
.hk-rcvsec .hk-btn { margin-block-start: 1.5rem; }

/* ---- Kitchen-planning split (checklist + prep panel) ---- */
.hk-rcvsplit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-block-start: 2rem; }

.hk-rcvlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.hk-rcvlist li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-ink);
}
.hk-rcvlist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	block-size: 1px;
	inline-size: 0.9rem;
	background: var(--hk-gold-onlight);
}
.hk-rcvlist--wide { grid-template-columns: minmax(0, 1fr); margin-block: 1.5rem; }

.hk-rcvprep {
	padding: 1.25rem 1.5rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	border-inline-start: 3px solid var(--hk-gold);
}
.hk-rcvprep__title { margin: 0 0 0.4rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-rcvprep__lede { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--hk-muted); }
.hk-rcvprep__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.hk-rcvprep__list li {
	position: relative;
	padding-inline-start: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--hk-ink);
}
.hk-rcvprep__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	block-size: 0.4rem;
	inline-size: 0.4rem;
	margin-block-start: 0.5rem;
	border-radius: 50%;
	background: var(--hk-gold);
}

/* ---- Equipment category link cards ---- */
.hk-rcvcats { margin-block-start: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--hk-border); border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); overflow: hidden; }
.hk-rcvcats__item { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem; background: var(--hk-base); text-decoration: none; transition: background-color var(--hk-t); }
.hk-rcvcats__item:hover, .hk-rcvcats__item:focus-visible { background: var(--hk-surface); }
.hk-rcvcats__label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--hk-font-display); font-size: 1rem; font-weight: 700; color: var(--hk-navy); }
.hk-rcvcats__label .hk-icon { color: var(--hk-gold-onlight); }
.hk-rcvcats__body { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hk-muted); }

/* ---- Trade coordination service modules (2/3-col editorial, not a tiny-icon grid) ---- */
.hk-rcvmodules { margin-block-start: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.hk-rcvmodules__icon { display: flex; color: var(--hk-gold-onlight); margin-block-end: 0.75rem; }
.hk-rcvmodules__title { margin: 0 0 0.5rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-rcvmodules__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Process steps (parallels .hk-warsteps) ---- */
.hk-rcvsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.hk-rcvsteps__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
.hk-rcvsteps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--hk-font-display);
	font-size: 1rem;
	font-weight: 700;
}
.hk-rcvsteps__title { margin: 0 0 0.3rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-rcvsteps__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Project-type tags ---- */
.hk-rcvtags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hk-rcvtags li {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-base);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-navy);
}

/* ---- Recent Projects photo grid ---- */
.hk-rcvprojects { margin-block-start: 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hk-rcvprojects__item { margin: 0; }
.hk-rcvprojects__item img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--hk-r);
	border: 1px solid var(--hk-border);
}
.hk-rcvprojects__item figcaption { margin-block-start: 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; }
.hk-rcvprojects__name { font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-rcvprojects__meta { font-size: 0.8125rem; color: var(--hk-muted); }

/* ---- Final CTA band ---- */
.hk-rcvcta { padding-block: 3rem; background: var(--hk-navy); }
.hk-rcvcta__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.hk-rcvcta__title { margin: 0 0 0.6rem; font-family: var(--hk-font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); color: #fff; }
.hk-rcvcta__body { margin: 0; max-inline-size: 56ch; font-size: 0.9375rem; line-height: 1.6; color: rgb(255 255 255 / 78%); }
.hk-rcvcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hk-rcvcta__actions .hk-btn--outline { color: #fff; border-color: rgb(255 255 255 / 45%); }
.hk-rcvcta__actions .hk-btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }

@media (min-width: 40rem) {
	.hk-rcvstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-rcvcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-rcvprojects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.hk-rcvhero { padding-block: 2.5rem 3rem; }
	.hk-rcvsplit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; }
	.hk-rcvlist--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.hk-rcvmodules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
	.hk-rcvsteps__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
	.hk-rcvcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 64rem) {
	.hk-rcvsec { padding-block: 3.75rem; }
	.hk-rcvstrip__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
	.hk-rcvcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-rcvmodules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-rcvprojects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hk-rcvcta { padding-block: 3.5rem; }
}

/* ======================================================================
 * Commercial Kitchen Equipment Service & Repair hub (Session 5AA.1)
 *
 * Same tokens/rhythm as the Warranty and Restaurant Contracting hubs above
 * (.hk-container/.hk-prose/.hk-eyebrow/.hk-btn/.hk-minilink/.hk-faq/
 * .hk-brandlist are all shared, unprefixed classes reused as-is) — a
 * distinct .hk-svc* namespace only for this page's own component shapes.
 * ====================================================================== */

.hk-svc { padding-block-end: 0; }

/* ---- Hero ---- */
.hk-svchero { padding-block: 1.5rem 2.5rem; }
.hk-svchero__inner { max-inline-size: 54rem; }
.hk-svchero__title {
	margin: 0 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-svchero__lede {
	margin: 0 0 1.5rem;
	max-inline-size: 64ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}
.hk-svchero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Service at a glance ---- */
.hk-svcglance {
	padding-block: 1.5rem;
	background: var(--hk-surface);
	border-block: 1px solid var(--hk-border);
}
.hk-svcglance__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 1.5rem;
}
.hk-svcglance__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hk-svcglance__icon { color: var(--hk-gold-onlight); flex: 0 0 auto; padding-block-start: 0.125rem; }
.hk-svcglance__label {
	margin: 0 0 0.2rem;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	color: var(--hk-navy);
}
.hk-svcglance__value { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hk-muted); }

/* ---- Section rhythm (parallels .hk-warsec/.hk-rcvsec) ---- */
.hk-svcsec { padding-block: 2.5rem; }
.hk-svcsec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-svcsec__inner { max-inline-size: 62rem; }
.hk-svcsec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-svcsec__prose p {
	margin: 0 0 1.1em;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--hk-ink);
}
.hk-svcsec__prose p:last-child { margin-block-end: 0; }
.hk-svcsec__prose { max-inline-size: 62ch; }

/* ---- What to Have Ready panel (parallels .hk-warprep/.hk-rcvprep) ---- */
.hk-svcprep {
	margin-block-start: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	border-inline-start: 3px solid var(--hk-gold);
}
.hk-svcprep__title { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-svcprep__list { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.hk-svcprep__list li {
	position: relative;
	padding-inline-start: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--hk-ink);
}
.hk-svcprep__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	block-size: 0.4rem;
	inline-size: 0.4rem;
	margin-block-start: 0.5rem;
	border-radius: 50%;
	background: var(--hk-gold);
}
.hk-svcprep__item--required::before { background: var(--hk-navy); inline-size: 0.5rem; block-size: 0.5rem; margin-block-start: 0.45rem; }
.hk-svcprep__item--required strong { color: var(--hk-navy); }
.hk-svcprep__note { margin: 0; font-size: 0.8125rem; color: var(--hk-muted); }

/* ---- Safety note ---- */
.hk-svcsafety {
	margin-block-start: 1.5rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
}
.hk-svcsafety__icon { flex: 0 0 auto; color: var(--hk-navy); padding-block-start: 0.1rem; }
.hk-svcsafety p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hk-ink); }

/* ---- Equipment category modules (parallels .hk-rcvcats) ---- */
.hk-svcmodules { margin-block-start: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--hk-border); border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); overflow: hidden; }
.hk-svcmodules__item { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem; background: var(--hk-base); text-decoration: none; transition: background-color var(--hk-t); }
.hk-svcmodules__item:hover, .hk-svcmodules__item:focus-visible { background: var(--hk-surface); }
.hk-svcmodules__label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--hk-font-display); font-size: 1rem; font-weight: 700; color: var(--hk-navy); }
.hk-svcmodules__label .hk-icon { color: var(--hk-gold-onlight); }
.hk-svcmodules__body { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hk-muted); }

/* ---- Common-request tags (parallels .hk-rcvtags) ---- */
.hk-svctags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hk-svctags li {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-base);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hk-navy);
}

/* ---- Process steps (parallels .hk-warsteps/.hk-rcvsteps) ---- */
.hk-svcsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.hk-svcsteps__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
.hk-svcsteps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--hk-font-display);
	font-size: 1rem;
	font-weight: 700;
}
.hk-svcsteps__title { margin: 0 0 0.3rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-svcsteps__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Repair-or-replace factor list (parallels .hk-warlist) ---- */
.hk-svclist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.hk-svclist li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-ink);
}
.hk-svclist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	block-size: 1px;
	inline-size: 0.9rem;
	background: var(--hk-gold-onlight);
}

/* ---- Final CTA band ---- */
.hk-svccta { padding-block: 3rem; background: var(--hk-navy); }
.hk-svccta__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.hk-svccta__title { margin: 0 0 0.6rem; font-family: var(--hk-font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); color: #fff; }
.hk-svccta__body { margin: 0; max-inline-size: 56ch; font-size: 0.9375rem; line-height: 1.6; color: rgb(255 255 255 / 78%); }
.hk-svccta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hk-svccta__actions .hk-btn--outline { color: #fff; border-color: rgb(255 255 255 / 45%); }
.hk-svccta__actions .hk-btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }

@media (min-width: 40rem) {
	.hk-svcglance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-svcmodules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.hk-svchero { padding-block: 2.5rem 3rem; }
	.hk-svcsteps__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
	.hk-svccta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 64rem) {
	.hk-svcsec { padding-block: 3.75rem; }
	.hk-svcglance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
	.hk-svcmodules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-svccta { padding-block: 3.5rem; }
}

/* ======================================================================
 * Contact Us — contact + routing hub (Session 5AB.1)
 *
 * Deliberately the simplest V2 page — a compact hero, one routing grid, one
 * visit/map section and a short general form. Reuses .hk-quoteform's
 * existing CF7 field/label/validation/response styling wholesale for the
 * general contact form (Session 5Z.1B, above) rather than writing a second
 * set of input rules, and .hk-container/.hk-eyebrow/.hk-btn are the same
 * shared, unprefixed classes every other V2 hub already uses.
 * ====================================================================== */

.hk-contact { padding-block-end: 0; }

/* ---- Hero (compact — no summary strip, no long lede) ---- */
.hk-contacthero { padding-block: 1.5rem 2rem; }
.hk-contacthero__inner { max-inline-size: 42rem; }
.hk-contacthero__title {
	margin: 0 0 0.6rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-contacthero__lede { margin: 0; max-inline-size: 56ch; font-size: 1rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Primary routing cards ---- */
.hk-contactroutes { padding-block: 0.5rem 1.5rem; }
.hk-contactroutes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--hk-border); border: 1px solid var(--hk-border); border-radius: var(--hk-r-lg); overflow: hidden; }
.hk-contactroutes__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.25rem 1.5rem;
	background: var(--hk-base);
	text-decoration: none;
	transition: background-color var(--hk-t);
}
.hk-contactroutes__item:hover, .hk-contactroutes__item:focus-visible { background: var(--hk-surface); }
.hk-contactroutes__icon { color: var(--hk-gold-onlight); }
.hk-contactroutes__label { font-family: var(--hk-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--hk-navy); }
.hk-contactroutes__body { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--hk-muted); flex-grow: 1; }
.hk-contactroutes__cta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hk-gold-onlight);
}

/* ---- Section rhythm (parallels .hk-warsec/.hk-svcsec) ---- */
.hk-contactsec { padding-block: 2rem; }
.hk-contactsec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-contactsec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	line-height: 1.2;
	color: var(--hk-navy);
}

/* ---- Visit / direct contact + map ---- */
.hk-contactvisit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.hk-contactinfo { margin: 0; display: grid; gap: 1rem; }
.hk-contactinfo__row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding-block-end: 0.85rem; border-block-end: 1px solid var(--hk-border); }
.hk-contactinfo__row:last-child { border-block-end: 0; padding-block-end: 0; }
.hk-contactinfo__row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hk-muted); }
.hk-contactinfo__row dd { margin: 0; font-size: 1rem; color: var(--hk-ink); overflow-wrap: anywhere; }
.hk-contactinfo__row dd a { display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; color: var(--hk-navy); font-weight: 600; text-decoration: none; }
.hk-contactinfo__row dd a:hover, .hk-contactinfo__row dd a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.hk-contacthours { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; font-size: 0.9375rem; }
.hk-contacthours span:nth-child(odd) { color: var(--hk-muted); }
.hk-contacthours span:nth-child(even) { color: var(--hk-ink); font-weight: 600; }

.hk-contactvisit__map { border-radius: var(--hk-r-lg); overflow: hidden; border: 1px solid var(--hk-border); }
.hk-contactvisit__map iframe { display: block; inline-size: 100%; block-size: 300px; border: 0; }

/* ---- General contact form (kept intentionally narrow, §17) ---- */
.hk-contactform { max-inline-size: 40rem; margin-inline: auto; text-align: center; }
.hk-contactform__note { margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--hk-muted); }
.hk-contactform .hk-contactsec__title { text-align: center; }
.hk-contactform__cf7 { text-align: start; }
.hk-contactform__cf7.hk-quoteform { box-shadow: none; }

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

@media (min-width: 48rem) {
	.hk-contacthero { padding-block: 2.25rem 2.5rem; }
	.hk-contactvisit { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; }
	.hk-contactvisit__map iframe { block-size: 100%; min-block-size: 340px; }
}

@media (min-width: 64rem) {
	.hk-contactroutes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hk-contactsec { padding-block: 3rem; }
}

/* ======================================================================
 * Payments & Order Deposits hub (Session 5AC.1)
 *
 * Same tokens/rhythm as the Warranty hub (.hk-warsec et al.) — a distinct
 * .hk-pay* namespace for this page's own component shapes, reusing shared
 * unprefixed classes (.hk-container/.hk-prose/.hk-eyebrow/.hk-minilink/
 * .hk-faq) as-is. Hero uses a plain nested __inner (not dual-classed with
 * .hk-container), the corrected pattern from the Contact Us fix in Session
 * 5AB.1, so the title lines up with the rest of the page instead of
 * centering in the viewport.
 * ====================================================================== */

.hk-pay { padding-block-end: 0; }

/* ---- Hero ---- */
.hk-payhero { padding-block: 1.5rem 2rem; }
.hk-payhero__inner { max-inline-size: 52rem; }
.hk-payhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-payhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

/* ---- Payments at a glance ---- */
.hk-payglance {
	padding-block: 1.5rem;
	background: var(--hk-surface);
	border-block: 1px solid var(--hk-border);
}
.hk-payglance__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}
.hk-payglance__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hk-payglance__icon { color: var(--hk-gold-onlight); flex: 0 0 auto; padding-block-start: 0.125rem; }
.hk-payglance__label {
	margin: 0 0 0.2rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-payglance__value { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--hk-navy); }

/* ---- Section rhythm (parallels .hk-warsec) ---- */
.hk-paysec { padding-block: 2.5rem; }
.hk-paysec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-paysec__inner { max-inline-size: 56rem; }
.hk-paysec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-paysec__prose p { margin: 0 0 1.1em; font-size: 1rem; line-height: 1.7; color: var(--hk-ink); }
.hk-paysec__prose p:last-child { margin-block-end: 0; }
.hk-paysec__prose { max-inline-size: 62ch; }
.hk-paysec__prose a { color: var(--hk-navy); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Ways to pay ---- */
.hk-paymethods { margin-block-start: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hk-paymethods__item { display: flex; gap: 0.9rem; align-items: flex-start; }
.hk-paymethods__icon { flex: 0 0 auto; color: var(--hk-gold-onlight); padding-block-start: 0.1rem; }
.hk-paymethods__title { margin: 0 0 0.3rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-paymethods__body { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--hk-muted); }

/* ---- Security callout (parallels .hk-warprep's accent-border panel) ---- */
.hk-paysafety {
	margin-block-start: 1.5rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	border-inline-start: 3px solid var(--hk-navy);
}
.hk-paysafety__icon { flex: 0 0 auto; color: var(--hk-navy); padding-block-start: 0.1rem; }
.hk-paysafety p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--hk-ink); }
.hk-paysafety strong { color: var(--hk-navy); }

/* ---- Project/financing minilinks ---- */
.hk-paylinks { margin-block-start: 1.25rem; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.hk-paylinks .hk-minilink { margin: 0; }
.hk-paysec .hk-minilink { display: inline-flex; margin-block-start: 1.25rem; }

@media (min-width: 48rem) {
	.hk-payhero { padding-block: 2.25rem 2.5rem; }
	.hk-paymethods { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

@media (min-width: 64rem) {
	.hk-paysec { padding-block: 3.25rem; }
	.hk-payglance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ======================================================================
 * FAQ hub (Session 5AD.1)
 *
 * Same tokens/rhythm as the other V2 hubs. Hero uses a plain nested
 * __inner (not dual-classed with .hk-container), the pattern corrected in
 * Session 5AB.1/5AC.1 so titles stay flush with the rest of the page
 * instead of centering in the viewport. .hk-faq/.hk-container/.hk-eyebrow/
 * .hk-btn are the same shared, unprefixed classes every other hub uses.
 * ====================================================================== */

.hk-faqhub { padding-block-end: 0; }

/* ---- Hero ---- */
.hk-faqhero { padding-block: 1.5rem 1.75rem; }
.hk-faqhero__inner { max-inline-size: 46rem; }
.hk-faqhero__title {
	margin: 0 0 0.6rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-faqhero__lede { margin: 0; max-inline-size: 58ch; font-size: 1rem; line-height: 1.6; color: var(--hk-muted); }

/* ---- Category chip navigation ----
 * Session 5AJ.3: offset by the header's compact height so this bar sticks
 * below the (now genuinely pinned) header instead of behind it — same
 * reasoning as .hk-termsnav's comment on the Terms page, below. Session
 * 5AJ.3A: switched to the shared `--hk-header-h-stuck` token (theme.css) —
 * the original flat 7.5rem was safe but sat 6–15px lower than the header
 * actually is, reading as an unwanted gap.
 */
.hk-faqchips {
	position: sticky;
	inset-block-start: var(--hk-header-h-stuck);
	z-index: 5;
	padding-block: 0.75rem;
	background: var(--hk-base);
	border-block: 1px solid var(--hk-border);
}
body.admin-bar .hk-faqchips { inset-block-start: calc(var(--hk-header-h-stuck) + var(--wp-admin--admin-bar--height, 32px)); }
/*
 * Session 5AJ.3D. scrollbar-width: none (+ hidden ::-webkit-scrollbar) hid
 * the only way a desktop mouse user — no touchpad, no touchscreen — had to
 * reach chips/tabs past the fold: there is no default click-drag-to-scroll
 * on a plain overflow:auto box, so with the scrollbar gone those users were
 * simply stuck. Reported live: the Terms tab row cut off after "Warranty"
 * with no way to see the rest. Switched to `thin`, the same visible-but-
 * unobtrusive pattern already used for `.hk-pdp__thumbs` — Firefox renders
 * a slim thumb via `scrollbar-width`; Chrome/Safari/Edge fall back to their
 * normal (not hidden) scrollbar since no ::-webkit-scrollbar override
 * remains to hide it.
 */
.hk-faqchips__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.hk-faqchips__list li { flex: 0 0 auto; }
.hk-faqchips__list a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	background: var(--hk-surface);
	color: var(--hk-navy);
	font-size: 0.8125rem;
	font-weight: 650;
	text-decoration: none;
	transition: background-color var(--hk-t), border-color var(--hk-t);
}
.hk-faqchips__list a:hover, .hk-faqchips__list a:focus-visible {
	background: var(--hk-navy);
	border-color: var(--hk-navy);
	color: #fff;
}

/* ---- FAQ category sections ----
 * scroll-margin clears the header and this page's own sticky .hk-faqchips
 * bar, with the same generous buffer as .hk-termssec (see its comment) for
 * an anchor jump made from the un-scrolled top of the page.
 */
.hk-faqcat { padding-block: 2.25rem; scroll-margin-block-start: 15.5rem; }
.hk-faqcat--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-faqcat__inner { max-inline-size: 54rem; }
.hk-faqcat__title {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	line-height: 1.2;
	color: var(--hk-navy);
}

/* Inline links after an answer — small, quiet, not a full CTA button. */
.hk-faq__links { margin: -0.4rem 0 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.hk-faq__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 650;
	color: var(--hk-gold-onlight);
	text-decoration: none;
}
.hk-faq__links a:hover, .hk-faq__links a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Support CTA ---- */
.hk-faqcta { padding-block: 2.5rem; background: var(--hk-navy); }
.hk-faqcta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.hk-faqcta__title { margin: 0; font-family: var(--hk-font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); color: #fff; }
.hk-faqcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hk-faqcta__actions .hk-btn--outline { color: #fff; border-color: rgb(255 255 255 / 45%); }
.hk-faqcta__actions .hk-btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }

/* ---- Related help links ---- */
.hk-faqrelated { padding-block: 1.5rem; border-block-start: 1px solid var(--hk-border); }
.hk-faqrelated__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.hk-faqrelated__label {
	font-family: var(--hk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-faqrelated__inner ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.hk-faqrelated__inner a { font-size: 0.875rem; color: var(--hk-navy); text-decoration: underline; text-underline-offset: 2px; }
.hk-faqrelated__inner a:hover, .hk-faqrelated__inner a:focus-visible { color: var(--hk-gold-onlight); }

@media (min-width: 48rem) {
	.hk-faqhero { padding-block: 2.25rem 2.5rem; }
	.hk-faqcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 64rem) {
	.hk-faqcat { padding-block: 3rem; }
	.hk-faqcta { padding-block: 3rem; }
}

/* ==========================================================================
   Returns & Cancellations hub (Session 5AE.1) — inc/returns-page.php
   Terms and Conditions hub (Session 5AE.1) — inc/terms-page.php
   Privacy Policy hub (Session 5AE.1) — inc/privacy-page.php

   All three reuse the existing tokens/scale wholesale, the same as
   Warranty/Payments/FAQ before them: .hk-container, .hk-prose, .hk-eyebrow,
   .hk-btn, .hk-minilink, .hk-faq, .hk-policynav. Nothing here introduces a
   new colour, radius or shadow. Section wrappers deliberately nest
   .hk-container > .hk-XXXsec__inner as two elements, never combined on one
   div — the dual-class `hk-container hk-XXXsec__inner` pattern silently
   overrides .hk-container's centering on every page that has shipped it
   (Contact Us hero, every Making Payments section) and had to be corrected
   twice already; it is never written that way here.
   ========================================================================== */

/* -------------------------------------------------------------- Returns -- */

.hk-ret { padding-block-end: 0; }

.hk-rethero { padding-block: 1.5rem 2.5rem; }
.hk-rethero__inner { max-inline-size: 52rem; }
.hk-rethero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-rethero__lede {
	margin: 0 0 1.5rem;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}
.hk-rethero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hk-retglance { padding-block: 1.5rem; background: var(--hk-surface); border-block: 1px solid var(--hk-border); }
.hk-retglance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.hk-retglance__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hk-retglance__icon { color: var(--hk-gold-onlight); flex: 0 0 auto; padding-block-start: 0.125rem; }
.hk-retglance__label {
	margin: 0 0 0.2rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-retglance__value { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--hk-navy); }

.hk-retsec { padding-block: 2.5rem; }
.hk-retsec--alt { background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-retsec__inner { max-inline-size: 56rem; }
.hk-retsec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-retsec__prose { max-inline-size: 62ch; }
.hk-retsec__prose p { margin: 0 0 1.1em; font-size: 1rem; line-height: 1.7; color: var(--hk-ink); }
.hk-retsec__prose p:last-child { margin-block-end: 0; }
.hk-retsec .hk-minilink { margin-block-start: 1.25rem; }
.hk-retsec__note { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--hk-muted); }
.hk-retsec__note a { color: var(--hk-navy); }

.hk-retlist { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.hk-retlist li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hk-ink);
}
.hk-retlist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	block-size: 1px;
	inline-size: 0.9rem;
	background: var(--hk-gold-onlight);
}

.hk-retsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.hk-retsteps__item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; }
.hk-retsteps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
}
.hk-retsteps__title { margin: 0 0 0.3rem; font-family: var(--hk-font-display); font-size: 1.0625rem; color: var(--hk-navy); }
.hk-retsteps__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hk-muted); }

.hk-retcta { padding-block: 2.5rem; background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-retcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; }
.hk-retcta__title { margin: 0 0 0.35rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: var(--hk-navy); }
.hk-retcta__body { margin: 0; max-inline-size: 44ch; font-size: 0.9375rem; line-height: 1.5; color: var(--hk-muted); }
.hk-retcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------- Terms -- */

.hk-terms { padding-block-end: 0; }

.hk-termshero { padding-block: 1.5rem 2rem; }
.hk-termshero__inner { max-inline-size: 52rem; }
.hk-termshero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-termshero__lede {
	margin: 0;
	max-inline-size: 66ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

/* Compact section navigation — a plain sticky strip of anchor links, not a
   giant policy mega-menu (§18/§11: "restrained policy-navigation strip").
 *
 * Session 5AJ.3: this bar was written (5AE.1) against a header that was
 * already `position: sticky` but never actually stayed pinned (the same
 * site-wide bug fixed this session — see theme.css's header comment), so an
 * `inset-block-start: 0` here never visibly collided with anything: the
 * header always detached and scrolled away within the first few pixels of
 * scroll. Now that the header genuinely stays pinned, this bar's own
 * `top: 0` sticks it directly underneath the header — same viewport offset,
 * lower z-index, so the header painted over it and its links became
 * unclickable. Offsetting by `--hk-header-h-stuck` (theme.css, the header's
 * own real measured compact height) stacks this bar immediately below the
 * header instead of behind it. Session 5AJ.3A replaced the original flat
 * 7.5rem/120px offset — safe (never overlapped) but ~6–15px taller than the
 * header actually is, which read as an unwanted white gap — with this
 * shared, breakpoint-matched token instead.
 */
.hk-termsnav {
	position: sticky;
	inset-block-start: var(--hk-header-h-stuck);
	z-index: 5;
	padding-block: 0.875rem;
	background: var(--hk-base);
	border-block: 1px solid var(--hk-border);
}
body.admin-bar .hk-termsnav { inset-block-start: calc(var(--hk-header-h-stuck) + var(--wp-admin--admin-bar--height, 32px)); }
/*
 * Session 5AJ.3B. overflow-x used to live on .hk-termsnav itself (the
 * full-width outer band) — measured live at 1920, that let the tab row
 * spill 251px past .hk-termsnav__inner's own right edge (the same
 * .hk-container column the page body and header both align to) before a
 * scrollbar ever appeared, because the outer band is wider than the
 * centered column and had room to absorb the overflow first. Moved to the
 * <ul> itself, inside the centered, padded .hk-termsnav__inner, so the tab
 * row always scrolls within the aligned content column — never past it —
 * and the container's own padding-inline stays outside the scroll port as
 * a stable gutter at both ends, matching .hk-faqchips__list below.
 */
/*
 * Session 5AJ.3D. `scrollbar-width: none` (+ a hidden ::-webkit-scrollbar)
 * removed the only way a desktop mouse user — no touchpad, no touchscreen —
 * had to reach tabs past the fold: a plain overflow:auto box has no default
 * click-drag-to-scroll, so with the scrollbar gone those users were stuck.
 * Reported live: the row cut off after "Warranty" with no way to see the
 * rest. Switched to `thin`, the same visible-but-unobtrusive pattern
 * already used for `.hk-pdp__thumbs` elsewhere in this file — Firefox
 * renders a slim thumb via `scrollbar-width`; Chrome/Safari/Edge fall back
 * to their normal (not hidden) scrollbar since no ::-webkit-scrollbar
 * override remains to hide it.
 */
.hk-termsnav__inner ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1.5rem;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.hk-termsnav__inner ul li { flex: 0 0 auto; }
.hk-termsnav__inner a {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hk-muted);
	text-decoration: none;
}
.hk-termsnav__inner a:hover, .hk-termsnav__inner a:focus-visible { color: var(--hk-navy); text-decoration: underline; }

.hk-termsbody { max-inline-size: 56rem; padding-block: 2.5rem 1rem; }

/*
 * scroll-margin clears the header and this page's own sticky .hk-termsnav
 * (measured 120px + 70px), plus extra buffer: an anchor jump made while the
 * page is still at the top (header in its full, non-compact state) settles
 * ~56px short of a jump made after the page has already scrolled once —
 * measured and reproducible, not fully explained by the CSS alone (likely
 * how the browser resolves :target scroll position against a header whose
 * own height is still changing class mid-scroll). Sized generously so
 * neither case ever leaves a heading obscured; the cost is a little extra
 * whitespace above the heading in the already-scrolled case, which is
 * harmless — see the 5AJ.3 comment above.
 */
.hk-termssec { padding-block: 1.75rem; scroll-margin-block-start: 15rem; }
/* A plain in-column tint, not a full-bleed band like .hk-warsec--alt/.hk-paysec--alt
   (those are top-level <section>s outside any width cap; .hk-termssec sits
   inside .hk-termsbody's own 56rem-capped column, so a negative-margin bleed
   here would push past the real viewport edge on a narrow screen, not just
   past the reading column — kept as a contained card instead). */
.hk-termssec--alt { background: var(--hk-warm); border: 1px solid var(--hk-warm-line); border-radius: var(--hk-r-lg); padding-inline: 1.25rem; }
.hk-termssec__title {
	margin: 0 0 1.25rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.2;
	color: var(--hk-navy);
}
.hk-termsclause + .hk-termsclause { margin-block-start: 1.75rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--hk-border); }
.hk-termsclause__title { margin: 0 0 0.5rem; font-family: var(--hk-font-display); font-size: 1rem; font-weight: 700; color: var(--hk-navy); }
.hk-termsclause__body { max-inline-size: none; font-size: 0.9375rem; }
.hk-termsclause__body p { margin: 0 0 1em; line-height: 1.7; }
.hk-termsclause__body p:last-child { margin-block-end: 0; }

/* -------------------------------------------------------------- Privacy -- */

.hk-priv { padding-block-end: 0; }

.hk-privhero { padding-block: 1.5rem 2rem; }
.hk-privhero__inner { max-inline-size: 52rem; }
.hk-privhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-privhero__lede {
	margin: 0;
	max-inline-size: 66ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-privsec { padding-block: 1rem 2.5rem; }
.hk-privsec__inner { max-inline-size: 56rem; }
.hk-privsec__inner h2 {
	margin: 2.25rem 0 0.9rem;
	font-family: var(--hk-font-display);
	font-size: 1.1875rem;
	color: var(--hk-navy);
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--hk-border);
}
.hk-privsec__inner > *:first-child,
.hk-privsec__inner h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }

.hk-privcta { padding-block: 2.5rem; background: var(--hk-warm); border-block: 1px solid var(--hk-warm-line); }
.hk-privcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; }
.hk-privcta__title { margin: 0 0 0.35rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: var(--hk-navy); }
.hk-privcta__body { margin: 0; max-inline-size: 44ch; font-size: 0.9375rem; line-height: 1.5; color: var(--hk-muted); }
.hk-privcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 48rem) {
	.hk-rethero { padding-block: 2.5rem 3rem; }
	.hk-retsec { padding-block: 3.25rem; }
	.hk-retglance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hk-termshero { padding-block: 2.5rem 2.75rem; }
	.hk-privhero { padding-block: 2.5rem 2.75rem; }
}

/* ==========================================================================
   Policies & Support hub (Session 5AF.1) — inc/policies-hub-page.php
   Same reused tokens/scale as every other V2 policy surface — .hk-container,
   .hk-eyebrow, .hk-policynav. Kept deliberately simple per this session's
   brief (§9): a compact hero and one link-group grid, nothing more.
   ========================================================================== */

.hk-polhub { padding-block-end: 0; }

.hk-polhubhero { padding-block: 1.5rem 2rem; }
.hk-polhubhero__inner { max-inline-size: 52rem; }
.hk-polhubhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-polhubhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-polhubsec { padding-block: 1rem 3rem; }
.hk-polhub__groups { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.hk-polhub__grouptitle {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--hk-navy);
	padding-block-end: 0.625rem;
	border-block-end: 1px solid var(--hk-border);
}
.hk-polhub__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.hk-polhub__link {
	display: block;
	padding: 0.875rem 1rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	text-decoration: none;
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-polhub__link:hover, .hk-polhub__link:focus-visible {
	border-color: var(--hk-navy);
	background: #fff;
}
.hk-polhub__linklabel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hk-navy);
}
.hk-polhub__linklabel .hk-icon { color: var(--hk-gold-onlight); flex: 0 0 auto; }
.hk-polhub__linkbody { display: block; margin-block-start: 0.3rem; font-size: 0.8125rem; line-height: 1.45; color: var(--hk-muted); }

@media (min-width: 48rem) {
	.hk-polhubhero { padding-block: 2.5rem 2.75rem; }
	.hk-polhub__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}

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

/* ==========================================================================
   Business Types hub (Session 5AG.1) — inc/business-types-page.php
   Same hero/section scale as the Policies hub; a card grid rather than a
   link-group list since each business type is a peer destination, not a
   sub-topic of one document.
   ========================================================================== */

.hk-bthub { padding-block-end: 0; }

.hk-bthubhero { padding-block: 1.5rem 2rem; }
.hk-bthubhero__inner { max-inline-size: 52rem; }
.hk-bthubhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-bthubhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-bthubsec { padding-block: 1.25rem 2.5rem; }
.hk-bthubsec--alt { background: var(--hk-surface); padding-block: 2.5rem; }
.hk-bthubsec__title {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--hk-navy);
}
.hk-bthubchoose { max-inline-size: 62rem; }
.hk-bthubchoose p { max-inline-size: 68ch; line-height: 1.65; color: var(--hk-ink); }
.hk-bthubchoose .hk-locallinks { margin-block-start: 1rem; }

/*
 * Session 5AJ.1A: replaced the 5AJ.1 icon-plate tile with a full-picture
 * editorial card in the same visual language as the homepage's .hk-pillar
 * cards — dominant image, white body, restrained brass "Explore" instead of
 * a button. Lighter than .hk-pillar on purpose (thin --hk-border/--hk-r
 * instead of .hk-pillar's custom border/--hk-r-lg, little to no shadow at
 * rest) since 17 of these sit on one page rather than 3 on a homepage. The
 * media block uses .hk-pillar's 16/10 ratio — on a ~370-390px card that
 * lands the image at ~66% of total card height, inside the brief's 65-72%
 * target, without hardcoding a height against variable body-text length.
 */
.hk-bthub__grid { display: grid; grid-template-columns: 1fr; gap: 1.125rem; }
.hk-bthub__card {
	display: flex;
	flex-direction: column;
	background: var(--hk-base);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--hk-t), box-shadow var(--hk-t), transform var(--hk-t);
}
.hk-bthub__card:hover, .hk-bthub__card:focus-visible {
	border-color: var(--hk-navy);
	box-shadow: 0 2px 5px rgb(37 50 84 / 6%), 0 10px 20px rgb(37 50 84 / 8%);
	transform: translateY(-2px);
}
.hk-bthub__cardmedia { display: block; inline-size: 100%; aspect-ratio: 16 / 10; background: var(--hk-surface); overflow: hidden; }
.hk-bthub__cardimg { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.hk-bthub__cardplaceholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	block-size: 100%;
	padding: 1rem;
	text-align: center;
	background: linear-gradient(160deg, var(--hk-navy-l), var(--hk-navy-d));
	color: rgb(255 255 255 / 78%);
}
.hk-bthub__cardplaceholdermark { font-family: var(--hk-font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.16em; color: var(--hk-gold); }
.hk-bthub__cardplaceholdertext { font-size: 0.625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; max-inline-size: 18ch; }
.hk-bthub__cardbody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.125rem 1.125rem 1rem; }
.hk-bthub__cardtitle { margin: 0; font-family: var(--hk-font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--hk-navy); }
.hk-bthub__cardtext { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }
.hk-bthub__cardexplore {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	align-self: flex-start;
	margin-block-start: 0.75rem;
	padding-block-start: 0.625rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hk-gold-onlight);
}
.hk-bthub__cardexplore .hk-icon { transition: transform var(--hk-t); }
.hk-bthub__card:hover .hk-bthub__cardexplore .hk-icon, .hk-bthub__card:focus-visible .hk-bthub__cardexplore .hk-icon { transform: translateX(3px); }

.hk-bthubcta { padding-block: 0 3.5rem; }
.hk-bthubcta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--hk-navy);
	border-radius: var(--hk-r);
}
.hk-bthubcta__title { margin: 0 0 0.4rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: #fff; }
.hk-bthubcta__body { margin: 0; max-inline-size: 46ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255,255,255,0.8); }

@media (min-width: 48rem) {
	.hk-bthubhero { padding-block: 2.5rem 2.75rem; }
	.hk-bthub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
	.hk-bthubcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

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

/* ==========================================================================
   Buying Guides hub (Session 5AG.1) — inc/buying-guides-page.php
   Reuses the Policies hub's group/link-list pattern exactly (same content
   shape: grouped links to existing documents, not peer destinations).
   ========================================================================== */

.hk-bghub { padding-block-end: 0; }

.hk-bghubhero { padding-block: 1.5rem 2rem; }
.hk-bghubhero__inner { max-inline-size: 52rem; }
.hk-bghubhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-bghubhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-bghubsec { padding-block: 1rem 3.5rem; }
.hk-bghub__groups { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.hk-bghub__grouptitle {
	margin: 0 0 1rem;
	font-family: var(--hk-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--hk-navy);
	padding-block-end: 0.625rem;
	border-block-end: 1px solid var(--hk-border);
}
.hk-bghub__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.hk-bghub__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	text-decoration: none;
	font-family: var(--hk-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hk-navy);
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-bghub__link:hover, .hk-bghub__link:focus-visible {
	border-color: var(--hk-navy);
	background: #fff;
}
.hk-bghub__link .hk-icon { color: var(--hk-gold-onlight); flex: 0 0 auto; }

@media (min-width: 48rem) {
	.hk-bghubhero { padding-block: 2.5rem 2.75rem; }
	.hk-bghub__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}

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

/* ==========================================================================
   Restaurant Equipment Financing page (Session 5AG.1) — inc/financing-page.php
   Same hero/section rhythm as the Payments page; a small terms grid for the
   five real Rent-Try-Buy program mechanics instead of a calculator, since no
   verified rate formula exists to calculate with.
   ========================================================================== */

.hk-finhero { padding-block: 1.5rem 2rem; }
.hk-finhero__inner { max-inline-size: 52rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.hk-finhero__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-finhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-finsec { padding-block: 2.5rem; }
.hk-finsec--alt { background: var(--hk-surface); }
.hk-finsec__inner { max-inline-size: 62rem; }
.hk-finsec__title { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 1.375rem; color: var(--hk-navy); }
.hk-finsec__prose { margin-block-end: 1.25rem; }

.hk-fintermsgrid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
.hk-fintermsgrid__item { padding: 1rem 1.125rem; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-fintermsgrid__title { margin: 0 0 0.35rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-fintermsgrid__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

.hk-finlinks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.hk-fin__disclaimer { margin: 0; padding: 1.5rem 0 3rem; max-inline-size: 62rem; margin-inline: auto; padding-inline: 1.25rem; font-size: 0.75rem; line-height: 1.55; color: var(--hk-muted); }

@media (min-width: 48rem) {
	.hk-finhero { padding-block: 2.5rem 2.75rem; }
	.hk-finsec { padding-block: 3.25rem; }
	.hk-fintermsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ==========================================================================
   Delivery Options page (Session 5AH.1) — inc/delivery-page.php
   Same hero/glance/section rhythm as Payments and Financing — the last of
   the six core policy pages to get a native V2 template.
   ========================================================================== */

.hk-delhero { padding-block: 1.5rem 2rem; }
.hk-delhero__inner { max-inline-size: 52rem; }
.hk-delhero__title {
	margin: 0 0 0.85rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}
.hk-delhero__lede {
	margin: 0;
	max-inline-size: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--hk-muted);
}

.hk-delglance { padding-block: 1rem 0.5rem; }
.hk-delglance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.hk-delglance__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hk-delglance__icon { color: var(--hk-gold-onlight); flex: 0 0 auto; padding-block-start: 0.125rem; }
.hk-delglance__label {
	margin: 0 0 0.2rem;
	font-family: var(--hk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hk-muted);
}
.hk-delglance__value { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--hk-navy); }

.hk-delsec { padding-block: 2.5rem; }
.hk-delsec--alt { background: var(--hk-surface); }
.hk-delsec__inner { max-inline-size: 62rem; }
.hk-delsec__title { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 1.375rem; color: var(--hk-navy); }
.hk-delsec__prose { margin-block-end: 1.25rem; }
.hk-delsec__prose:last-child { margin-block-end: 0; }

.hk-delgrid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-block-end: 1.25rem; }
.hk-delgrid__item { padding: 1rem 1.125rem; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-delgrid__title { margin: 0 0 0.35rem; font-family: var(--hk-font-display); font-size: 0.9375rem; color: var(--hk-navy); }
.hk-delgrid__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

.hk-dellinks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

@media (min-width: 48rem) {
	.hk-delhero { padding-block: 2.5rem 2.75rem; }
	.hk-delglance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
	.hk-delsec { padding-block: 3.25rem; }
	.hk-delgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ==========================================================================
   Local landing pages (Session 5AI.1) — inc/local-page.php
   Shared by every city/regional page (Vancouver, the Lower Mainland pilot
   cities, Vancouver Island hub, Victoria, Nanaimo, Tofino, and any future
   local page). Narrower hero than the other hubs — no lede paragraph here,
   since the real narrative lede lives in the page's own post_content
   (.hk-local__body) immediately below it, not duplicated in the header.
   ========================================================================== */

.hk-localhero { padding-block: 1.5rem 1.25rem; }
.hk-localhero__inner { max-inline-size: 52rem; }
.hk-localhero__title {
	margin: 0;
	font-family: var(--hk-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hk-navy);
}

.hk-local__body { max-inline-size: 62rem; padding-block-end: 1.5rem; }

.hk-localsec { padding-block: 2.25rem; }
.hk-localsec--alt { background: var(--hk-surface); }
.hk-localsec__inner { max-inline-size: 62rem; }
.hk-localsec__title { margin: 0 0 1rem; font-family: var(--hk-font-display); font-size: 1.375rem; color: var(--hk-navy); }
.hk-localsec__prose { margin-block-end: 1rem; }

.hk-localcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.hk-localcats__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	text-decoration: none;
	font-family: var(--hk-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--hk-navy);
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-localcats__item:hover, .hk-localcats__item:focus-visible { border-color: var(--hk-navy); background: #fff; }
.hk-localcats__item .hk-icon { color: var(--hk-gold-onlight); flex: 0 0 auto; }

.hk-localbiz { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-block-end: 1.25rem; }
.hk-localbiz__item { display: block; padding: 1rem 1.125rem; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-r); text-decoration: none; transition: border-color var(--hk-t), background var(--hk-t); }
.hk-localbiz__item:hover, .hk-localbiz__item:focus-visible { border-color: var(--hk-navy); background: #fff; }
.hk-localbiz__label { display: block; margin-block-end: 0.3rem; font-family: var(--hk-font-display); font-weight: 700; font-size: 0.9375rem; color: var(--hk-navy); }
.hk-localbiz__body { display: block; font-size: 0.8125rem; line-height: 1.5; color: var(--hk-muted); }

.hk-locallinks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.hk-localnearby { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.hk-localnearby__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 1px solid var(--hk-border);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hk-navy);
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-localnearby__item:hover, .hk-localnearby__item:focus-visible { border-color: var(--hk-navy); background: var(--hk-surface); }

/* Grouped regional navigation (Session 5AI.2) — hub-tier pages only, e.g. the
   British Columbia provincial hub's "Explore British Columbia" block. Same
   card language as .hk-localcats, grouped under a labeled sub-heading rather
   than a flat pill list, since a province has too many links for that. */
.hk-localregions { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hk-localregions__group { padding: 1.125rem; background: #fff; border: 1px solid var(--hk-border); border-radius: var(--hk-r); }
.hk-localregions__label { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 1rem; color: var(--hk-navy); }
.hk-localregions__links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hk-localregions__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hk-navy);
	transition: border-color var(--hk-t), background var(--hk-t);
}
.hk-localregions__links a:hover, .hk-localregions__links a:focus-visible { border-color: var(--hk-navy); background: #fff; }

.hk-localcta { padding-block: 0 3rem; }
.hk-localcta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--hk-navy);
	border-radius: var(--hk-r);
	max-inline-size: 62rem;
}
.hk-localcta__title { margin: 0 0 0.4rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: #fff; }
.hk-localcta__body { margin: 0; max-inline-size: 46ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255,255,255,0.8); }

@media (min-width: 48rem) {
	.hk-localhero { padding-block: 2.5rem 1.5rem; }
	.hk-localsec { padding-block: 3rem; }
	.hk-localcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-localbiz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-localregions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-localcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

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

/* ==========================================================================
   Business Type V2 detail page (Session 5AJ.1) — inc/business-type-detail.php
   Curated buying/discovery pages, not the local-page architecture. Reuses
   the exact same hero/section/CTA/FAQ/minilink visual language as the
   local-page family (.hk-localhero, .hk-localsec, .hk-localcta, .hk-faq,
   .hk-minilink, .hk-locallinks, .hk-localbiz all already cover this shape),
   so only the genuinely new part — the compact equipment-group product
   showcase — gets new CSS below.
   ========================================================================== */

.hk-bthero { padding-block: 1.5rem 1.25rem; }
.hk-bthero__inner { max-inline-size: 52rem; }
.hk-bthero__title {
	margin: 0 0 0.6rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-bthero__lede { margin: 0; max-inline-size: 62ch; font-size: 1rem; line-height: 1.6; color: var(--hk-muted); }

.hk-bt__body { max-inline-size: 62rem; padding-block-end: 1.5rem; }
.hk-bt__needstitle { margin: 0 0 0.75rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: var(--hk-navy); }

.hk-btsec { padding-block: 2.25rem; }
.hk-btsec--alt { background: var(--hk-surface); }
.hk-btsec__inner { max-inline-size: 62rem; }
.hk-btsec__title { margin: 0 0 1rem; font-family: var(--hk-font-display); font-size: 1.375rem; color: var(--hk-navy); }
.hk-btsec__prose { margin-block-end: 1rem; }

.hk-btcta { padding-block: 0 3rem; }
.hk-btcta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--hk-navy);
	border-radius: var(--hk-r);
	max-inline-size: 62rem;
}
.hk-btcta__title { margin: 0 0 0.4rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: #fff; }
.hk-btcta__body { margin: 0; max-inline-size: 46ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255,255,255,0.8); }

/*
 * Equipment group — CURATED EQUIPMENT, not a category-archive clone (brief
 * §14). Compact cards (husky_render_product_card($product, true)) in a
 * 2-across row on mobile, scrolling horizontally with snap so a 3rd/4th card
 * peeks rather than stacking into a long scroll (brief §24); a real grid from
 * tablet up, since there is room for it there.
 */
.hk-btgroup { padding-block: 1.75rem; border-block-end: 1px solid var(--hk-border); }
.hk-btgroup:last-of-type { border-block-end: 0; }
.hk-btgroup__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-end: 1rem;
	max-inline-size: 62rem;
}
.hk-btgroup__title { margin: 0; font-family: var(--hk-font-display); font-size: 1.1875rem; color: var(--hk-navy); }
.hk-btgroup__lede { margin: 0.35rem 0 0; max-inline-size: 60ch; font-size: 0.875rem; line-height: 1.55; color: var(--hk-muted); }
.hk-btgroup__link { flex: 0 0 auto; }
.hk-btgroup__link--mobile { display: inline-flex; margin-block-start: 0.875rem; }

.hk-btgroup__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 44%);
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 0.25rem;
	margin-inline: -1rem;
	padding-inline: 1rem;
	scrollbar-width: thin;
}
.hk-btgroup__cards > .hk-card { scroll-snap-align: start; }

@media (min-width: 40rem) {
	.hk-btgroup__cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
	.hk-btgroup__link--mobile { display: none; }
}

@media (min-width: 48rem) {
	.hk-bthero { padding-block: 2.5rem 1.5rem; }
	.hk-btsec { padding-block: 3rem; }
	.hk-btgroup { padding-block: 2.5rem; }
	.hk-btgroup__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.hk-btcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

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

/* ==========================================================================
   BUYING GUIDE V2 DETAIL (Session 5AK.1)
   Compact hero + quick-answer summary + inline TOC + narrow editorial prose
   column (.hk-prose's own 74ch cap), with commerce/FAQ/related-guide
   sections breaking out to the full container width. Card grids and the
   product row reuse .hk-bthub__grid/.hk-bthub__card and .hk-btgroup__cards
   verbatim (styled above) — no new grid system.
   ========================================================================== */

.hk-bghero { padding-block: 1.5rem 0.75rem; }
.hk-bghero__inner { max-inline-size: 52rem; }
.hk-bghero__title {
	margin: 0 0 0.6rem;
	font-family: var(--hk-font-display);
	font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--hk-navy);
}
.hk-bghero__lede { margin: 0; max-inline-size: 62ch; font-size: 1rem; line-height: 1.6; color: var(--hk-muted); }

.hk-bgqa {
	margin-block: 0.25rem 0;
	padding: 1.125rem 1.25rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r-lg);
	max-inline-size: 62rem;
}
.hk-bgqa__title { margin: 0 0 0.875rem; font-family: var(--hk-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-gold-onlight); }
.hk-bgqa__grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem 1.5rem; }
.hk-bgqa__item { border-inline-start: 2px solid var(--hk-gold); padding-inline-start: 0.75rem; }
.hk-bgqa__label { margin: 0 0 0.2rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hk-muted); }
.hk-bgqa__value { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--hk-ink); }

.hk-bg__layout { padding-block: 0.75rem 0; }

.hk-bgtoc {
	margin-block-end: 1.25rem;
	padding: 0.875rem 1.125rem;
	background: var(--hk-surface);
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-r);
	max-inline-size: 62rem;
}
.hk-bgtoc__title { margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hk-muted); }
.hk-bgtoc__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem; }
.hk-bgtoc__list a { font-size: 0.875rem; color: var(--hk-navy); text-decoration: none; }
.hk-bgtoc__list a:hover, .hk-bgtoc__list a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* No max-inline-size here — .hk-prose's own 74ch cap is the intentional narrow
   editorial reading column (brief §12); this class only adds spacing. */
.hk-bg__body { padding-block-end: 1.5rem; }

.hk-bgsec { padding-block: 2.25rem; }
.hk-bgsec--alt { background: var(--hk-surface); }
.hk-bgsec__inner { max-inline-size: 62rem; }
.hk-bgsec__title { margin: 0 0 1rem; font-family: var(--hk-font-display); font-size: 1.375rem; color: var(--hk-navy); }

.hk-bgcta { padding-block: 0 3rem; }
.hk-bgcta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--hk-navy);
	border-radius: var(--hk-r);
	max-inline-size: 62rem;
}
.hk-bgcta__title { margin: 0 0 0.4rem; font-family: var(--hk-font-display); font-size: 1.25rem; color: #fff; }
.hk-bgcta__body { margin: 0; max-inline-size: 46ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255,255,255,0.8); }

@media (min-width: 40rem) {
	.hk-bgqa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-bgtoc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.hk-bghero { padding-block: 2.5rem 1rem; }
	.hk-bgsec { padding-block: 3rem; }
	.hk-bgcta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 64rem) {
	/* Session 5AK.1A: the "Shop Related Equipment" card reuses the Business
	   Types hub's full-scale .hk-bthub__card verbatim (no new card design),
	   but inside an article that card read oversized relative to its
	   supporting role (measured 371x376px at 1280px width for a 3-card row).
	   One extra grid column at desktop brings it down to a size proportional
	   to a secondary module — same component, same styling, just denser. */
	#shop-related-equipment .hk-bthub__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.hk-bgqa__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-bgtoc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}