/**
 * Howell Print - structural CSS.
 *
 * Only layout and rhythm live here; colour and type come from theme.json tokens so a client
 * skin never has to touch this file.
 *
 * The breakpoints come from the measured page-type spec (specs/pagetypes.md): the reference
 * product grid runs 4 columns at 1440, KEEPS 4 at 768, and drops to 2 at 390 - it never
 * collapses to a single column. So the breakpoint that matters sits between 768 and 390, not
 * at 768, and WooCommerce's default 1-column mobile grid would be visibly wrong against it.
 */

:root {
	/* One reading measure shared by every prose child on a page, so a heading's rule and the
	   paragraph beneath it end at the same x. Deliberately a length, not `ch`. */
	--hp-measure: 42rem;
}

/* ----------------------------------------------------------------- off-canvas containment
 *
 * WooCommerce's mini-cart drawer parks itself off-canvas to the RIGHT while closed. Nothing
 * clips it, so at 390px it pushed the document to ~810px wide and every page scrolled
 * sideways - 24 overflowing elements on the category page, all of them the drawer.
 *
 * `clip` rather than `hidden`: overflow:hidden on an ancestor silently kills position:sticky
 * on descendants, which would break the sticky buybox below.
 */

html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- product grid: 4 / 4 / 2 */

.hp-product-grid .wp-block-post-template,
.hp-product-grid .wc-block-product-template {
	display: grid;
	/* Measured: reference product cards are 258px wide, i.e. FIVE across - not four. The
	 * earlier "4 columns" reading came from counting grid-template-columns tokens rather than
	 * measuring the cards, and 4-across at our 1320 wide-size gives 322px cards, visibly
	 * chunkier than the reference. Card width is the reliable signal. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1100px) {
	.hp-product-grid .wp-block-post-template,
	.hp-product-grid .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* the carousel overrides the grid columns entirely - keep it out of these steps */
.hp-carousel .wp-block-post-template,
.hp-carousel .wc-block-product-template {
	grid-template-columns: none;
}

/* 768 keeps a multi-column grid - the reference does not step down here */
@media (max-width: 600px) {
	.hp-product-grid .wp-block-post-template,
	.hp-product-grid .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}
}

/* WooCommerce's own `is-flex-container columns-4` sets a width on each <li> that assumes a
 * FLEX parent. Against the grid above it computed to 26.7px and every card collapsed to a
 * single character per line. Neutralise the width and let the grid track own the sizing. */
.hp-product-grid .wc-block-product-template > li,
.hp-product-grid .wp-block-post-template > li {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
}

/* Card treatment, measured off the reference: NO border, NO radius, NO shadow. Image-led with
 * text beneath, 20px gap, 1:1 imagery. My first pass used bordered 8px-radius boxes, which is
 * the opposite of what the reference actually does and is most of why it read as "not at that
 * level". See specs/designsystem.json. */
.hp-product-grid li.wc-block-product,
.hp-product-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
}

.hp-product-grid .wc-block-components-product-image,
.hp-product-grid .wp-block-woocommerce-product-image {
	margin: 0 0 8px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}

.hp-product-grid img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	transition: transform 260ms ease;
	background: var(--wp--preset--color--surface);
}

.hp-product-grid li:hover img {
	transform: scale(1.035);
}

.hp-product-grid .wp-block-post-title,
.hp-product-grid .wc-block-components-product-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.hp-product-grid .wp-block-post-title a,
.hp-product-grid .wc-block-components-product-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hp-product-grid li:hover .wp-block-post-title a {
	text-decoration: underline;
}

.hp-product-grid .wc-block-components-product-price,
.hp-product-grid .wp-block-woocommerce-product-price {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* the reference does not put a button on every card - the whole card is the target */
.hp-product-grid .wp-block-button__link,
.hp-product-grid .wc-block-components-product-button a {
	margin-top: 4px;
	font-size: 14px;
	padding: 9px 16px;
}

/* ---------------------------------------------------------------- PDP: 2 col -> 1 col */

/* The buybox is far taller than the gallery (configurator + options + upload ~1000px vs a
   ~400px image), so a two-COLUMN hero left a ~630px void under the picture and pushed "About
   this product" right to the bottom of the page. One grid instead: the description and artwork
   spec stack under the gallery in column one and fill that space, while the buybox spans the
   full height of column two.
   DOM order is gallery -> buybox -> about -> artwork, which is deliberately also the correct
   MOBILE order once the grid collapses to block flow - so no reordering is needed there. */
.hp-pdp-top {
	display: grid;
	grid-template-columns: 52fr 48fr;
	/* 🚨 The FOURTH row is load-bearing. The buybox spans the full height of column two, and a
	   spanning grid item forces the rows it crosses to grow to fit it - so with only three rows
	   the buybox's ~1019px was distributed across them as ~92px of dead space above the
	   description and again above the artwork spec. That is the same void as before, merely
	   split into three bands. An empty trailing `1fr` row soaks up the overhang instead, leaving
	   rows 1-3 sized purely by their own content. */
	grid-template-rows: auto auto auto 1fr;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: 32px;
	align-items: start;
}

.hp-pdp-gallery   { grid-column: 1; grid-row: 1; }
.hp-about         { grid-column: 1; grid-row: 2; max-width: 68ch; }
.hp-artwork-spec  { grid-column: 1; grid-row: 3; max-width: 68ch; }

.hp-buybox {
	grid-column: 2;
	grid-row: 1 / -1;
	position: sticky;
	top: 1.5rem;
}

/* Woo's gallery wrapper carries a bottom margin that reads as slack under the image. */
.hp-pdp-gallery .woocommerce-product-gallery {
	margin-bottom: 0;
}

/* 🚨 WordPress flow-layout margins SURVIVE a display:grid override - core puts
   margin-block-start on every child after the first, which reopens the gap that grid `row-gap`
   is already handling. Zero them and let the grid own the spacing. */
.hp-pdp-top > * {
	margin-block: 0;
}

.hp-pdp-gallery > *,
.hp-about > :first-child,
.hp-artwork-spec > :first-child {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	.hp-pdp-top {
		display: block;
	}

	.hp-buybox {
		position: static;
	}

	/* block flow, so restore the rhythm the grid gap was providing */
	.hp-pdp-top > * + * {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

.hp-buybox .wp-block-post-title {
	margin-top: 0;
}

/* The configurator is the buying surface on a trade store, so give it room to breathe. */
.hp-buybox .hpp-configurator {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------- archive head */

.hp-archive-head .wp-block-query-title {
	margin-bottom: 0.4rem;
}

.hp-archive-head .wp-block-term-description {
	max-width: 68ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- misc */

.wc-block-components-notice-banner {
	margin-block: var(--wp--preset--spacing--20);
}

.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.woocommerce-breadcrumb a {
	color: inherit;
}

/* =========================================================================
 * Page composition - the measured section sequences from specs/pagetypes.md.
 * Structure is taken from the reference; colour and type come from tokens, so
 * a client skin restyles all of this without touching the layout.
 * ====================================================================== */

/* ---- department tiles (home) ---- */

.hp-dept-tiles ul,
.hp-dept-tiles .wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-dept-tiles li {
	margin: 0;
}

.hp-dept-tiles a {
	display: block;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	font-weight: 600;
}

.hp-dept-tiles a:hover {
	border-color: var(--wp--preset--color--brand);
}

/* Departments only. The nested <ul> carries the SAME class as the outer one, so the grid rule
 * above applied to it too and every child category rendered as a broken thumbnail inside its
 * parent tile. The hide rule must OUT-SPECIFY the show rule - the identical trap as .hp-chiprow. */
.hp-dept-tiles li .wc-block-product-categories-list,
.hp-dept-tiles li ul {
	display: none;
}

@media (max-width: 900px) {
	.hp-dept-tiles ul,
	.hp-dept-tiles .wc-block-product-categories-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- archive hero + chip row ---- */

.hp-archive-hero h1 {
	margin: 0.3rem 0 0.4rem;
}

.hp-archive-hero .woocommerce-breadcrumb {
	margin-bottom: 0.2rem;
}

/* 🚨 Core centres this with `!important`, so NO amount of specificity wins:
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 *     { margin-left: auto !important; margin-right: auto !important }
 * `alignwide` is not in that exclusion list, so a description capped to a reading measure gets
 * auto margins and sits centred under a left-aligned h1. Matching !important is the only way
 * to left-anchor it - warranted here precisely because core reached for it first. */
.hp-archive-hero .wp-block-term-description {
	max-width: var(--hp-measure);
	margin-block: 0;
	/* Not `0` - the parent is the FULL-BLEED hero, so a zero left margin sits flush to the
	   viewport while the alignwide h1 above starts one wide-gutter in. Reproduce that gutter
	   exactly, and collapse it to 0 once the viewport is narrower than the wide size. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

.hp-chiprow ul,
.hp-chiprow .wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-chiprow li {
	margin: 0;
}

.hp-chiprow a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--background);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.hp-chiprow a:hover {
	border-color: var(--wp--preset--color--brand);
}

/* The chip row is a flat set of entry points, so hide the nested tree.
 * ⚠️ Specificity trap of my own making: the nested <ul> carries the SAME class as the outer
 * one, so `.hp-chiprow .wc-block-product-categories-list {display:flex}` (0,2,0) beat a plain
 * `.hp-chiprow li ul` (0,1,2) and the whole 45-term tree rendered as chips, 380px tall. The
 * hide rule has to out-specify the show rule, not just come later. */
.hp-chiprow li .wc-block-product-categories-list,
.hp-chiprow li ul {
	display: none;
}

/* ---- editorial + trust ---- */

.hp-editorial {
	max-width: 68ch;
}

.hp-editorial h2 {
	margin-bottom: 0.5rem;
}

.hp-trust h3 {
	margin: 0 0 0.3rem;
}

.hp-trust p {
	margin: 0;
}

@media (max-width: 781px) {
	.hp-hero h1 {
		max-width: none;
	}
}

/* ---------------------------------------------------------------- full-bleed bands
 *
 * ⚠️ `alignfull` alone does NOT work for these bands. WordPress implements full-bleed as
 * `.is-layout-constrained > .alignfull`, which needs alignfull to be a DIRECT child of the
 * constrained container - and `wp:template-part` renders its own wrapper <div> in between, so
 * the selector never matches and the band renders at content width (measured: 760px inside a
 * 1440px main).
 *
 * These bands are template parts precisely so they can be reused across templates, so the
 * breakout is done here instead. Safe against the scrollbar because html/body carry
 * overflow-x: clip above.
 */
.hp-hero,
.hp-samplebar,
.hp-locations,
.hp-footer-main,
.hp-footer-legal,
.hp-utility,
.hp-mainbar,
.hp-navbar,
.hp-trust,
.hp-cta,
.hp-archive-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* their inner content must still respect the site's measure */
.hp-cta > *,
.hp-samplebar > *,
.hp-archive-hero > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* the hero copy should not run to a 1320px measure */
/* ---------------------------------------------------------------- brand lockup */

.hp-brand {
	gap: 0.75rem;
	align-items: center;
}

.hp-brand .wp-block-site-logo img {
	height: auto;
	max-height: 54px;
	width: auto;
}

/* When a logo is set it carries the brand, so the text title would just repeat it.
   Kept in the DOM for accessibility rather than removed from the template. */
.hp-brand:has(.wp-block-site-logo img) .hp-sitetitle-fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =========================================================================
 * Carousel — the reference runs 4–5 horizontal scrollers per page and it is
 * the single most reused component in the measured spec. Pure CSS scroll-snap
 * with a deliberate "peek" so the row visibly continues; no JS, no library.
 * ====================================================================== */

.hp-carousel .wp-block-post-template,
.hp-carousel .wc-block-product-template {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 1fr);
	grid-template-columns: none;
	gap: 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-left: 2px;
	padding-bottom: 8px;
	/* thin, unobtrusive scrollbar rather than the OS default slab */
	scrollbar-width: thin;
}

.hp-carousel .wp-block-post-template > li,
.hp-carousel .wc-block-product-template > li {
	scroll-snap-align: start;
	width: auto !important;
	min-width: 0;
}

@media (min-width: 782px) {
	/* 5.5 across on desktop: the half card is the affordance that says "scroll me" */
	.hp-carousel .wp-block-post-template,
	.hp-carousel .wc-block-product-template {
		grid-auto-columns: calc((100% - (5 * 20px)) / 5.5);
	}
}

@media (max-width: 781px) {
	.hp-carousel .wp-block-post-template,
	.hp-carousel .wc-block-product-template {
		grid-auto-columns: 45%;
	}
}

/* section headers sit on one line with a "view all" link, as the reference does */
.hp-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.hp-sechead h2 {
	margin: 0;
}

.hp-sechead a {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- image-led department tiles (categories now carry images) ---- */

.hp-dept-tiles a {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}

.hp-dept-tiles a:hover {
	border: 0;
}

.hp-dept-tiles a:hover .wc-block-product-categories-list-item__name {
	text-decoration: underline;
}

.hp-dept-tiles .wc-block-product-categories-list-item__image {
	display: block;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.hp-dept-tiles .wc-block-product-categories-list-item__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 260ms ease;
}

.hp-dept-tiles li:hover .wc-block-product-categories-list-item__image img {
	transform: scale(1.035);
}

.hp-dept-tiles .wc-block-product-categories-list-item__name {
	display: block;
	line-height: 1.4;
}

/* ---- department tiles: override WooCommerce's fixed 50px thumbnail ----
 * The block ships `.wc-block-product-categories-list-item__image { width: 50px }` on the SPAN,
 * so setting width on the <img> alone does nothing - the span is the constraint. Measured:
 * span 52px, img 50px, inside a 125px tile. */
.hp-dept-tiles ul.wc-block-product-categories-list {
	display: grid;
	/* measured: reference tiles are ~210px wide, i.e. 6 across at 1320 with 20px gaps */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-dept-tiles ul.wc-block-product-categories-list > li {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
}

.hp-dept-tiles .wc-block-product-categories-list-item__image {
	width: 100% !important;
	max-width: none !important;
	display: block;
	margin: 0 0 8px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.hp-dept-tiles .wc-block-product-categories-list-item__image img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.hp-dept-tiles ul.wc-block-product-categories-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Nested categories, hidden LAST and scoped to descendants only.
 * ⚠️ Third time this exact collision has bitten: the nested <ul> shares its parent's class, so
 * `.hp-dept-tiles ul.wc-block-product-categories-list {display:grid}` (0,2,1) tied with the
 * earlier hide rule (0,2,1) and won on source order. Target the DESCENDANT list explicitly. */
.hp-dept-tiles > ul > li ul,
.hp-chiprow > ul > li ul,
.hp-dept-tiles > .wc-block-product-categories-list > li ul {
	display: none !important;
}

/* =========================================================================
 * Header — three tiers, matching the reference's measured 203px structure:
 * utility bar (contact + promise), main bar (logo | search | account+cart),
 * nav bar. Mine was a single 69px row with no search at all.
 * Built from CORE blocks (wp:search) rather than WooCommerce's, so the layout
 * is not constrained by what the commerce blocks happen to offer.
 * ====================================================================== */

.hp-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--background);
}

.hp-utility {
	padding-block: 7px;
}

.hp-utility p {
	margin: 0;
}

.hp-utility a {
	color: inherit;
	text-decoration: none;
}

.hp-utility a:hover {
	text-decoration: underline;
}

.hp-mainbar {
	padding-block: 14px;
}

.hp-mainbar-inner {
	gap: 32px;
	align-items: center;
}

.hp-mainbar-inner > .hp-brand {
	flex: 0 0 auto;
}

/* the search field is the middle column and should take the slack */
.hp-mainbar-inner > .wp-block-search {
	flex: 1 1 auto;
	margin: 0;
	max-width: 620px;
}

.hp-search .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
}

.hp-search .wp-block-search__input {
	border: 0;
	padding: 11px 14px;
	font-size: 16px;
	background: transparent;
}

.hp-search .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: -2px;
}

.hp-search .wp-block-search__button {
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0 16px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
}

.hp-useractions {
	flex: 0 0 auto;
	gap: 20px;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
}

.hp-useractions a,
.hp-useractions button {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hp-navbar {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: 4px;
}

.hp-navbar .wp-block-navigation {
	gap: 24px;
	font-size: 15px;
	font-weight: 700;
}

.hp-navbar .wp-block-navigation a {
	text-decoration: none;
	padding-block: 10px;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--ink);
}

.hp-navbar .wp-block-navigation a:hover {
	border-bottom-color: var(--wp--preset--color--brand);
}

@media (max-width: 781px) {
	.hp-utility { display: none; }
	.hp-mainbar-inner { flex-wrap: wrap; gap: 12px; }
	.hp-mainbar-inner > .wp-block-search { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 1100px) {
	.hp-dept-tiles ul.wc-block-product-categories-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.hp-dept-tiles ul.wc-block-product-categories-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* tile labels sit tighter at this density */
.hp-dept-tiles .wc-block-product-categories-list-item__name {
	font-size: 14px;
	line-height: 1.35;
}

/* ---- footer: five columns of real wayfinding, matching the reference's link density ---- */

.hp-footer-main .wp-block-column .wp-block-heading {
	margin: 0 0 10px;
}

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

.hp-footer-list li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.45;
}

.hp-footer-list a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hp-footer-list a:hover {
	text-decoration: underline;
}

.hp-footer-main .wp-block-site-logo img {
	max-height: 46px;
	width: auto;
	height: auto;
}

.hp-footer-legal {
	border-top: 1px solid var(--wp--preset--color--line);
}

.hp-footer-legal p {
	margin: 0;
}

.hp-footer-legal a {
	color: inherit;
}

@media (max-width: 781px) {
	.hp-footer-main .wp-block-columns {
		gap: 24px;
	}
}

/* ---- home: industry chips, locations ---- */

.hp-locations h2 {
	margin-top: 0;
	margin-bottom: 20px;
}

.hp-locations h3 {
	margin: 0 0 4px;
}

.hp-locations p {
	margin: 0;
}

/* =========================================================================
 * Hero — full-bleed image strip with a floating card centred over it, which
 * is what the reference actually does. My first version was a two-column
 * text block with a white info card beside it: structurally a different
 * component, and the single biggest reason the page did not read like theirs.
 * ====================================================================== */

.hp-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--wp--preset--color--surface);
}

.hp-herostrip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 10px;
	padding: 10px;
	height: 460px;
}

.hp-herostrip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.hp-herocard {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(620px, calc(100% - 48px));
	background: var(--wp--preset--color--background);
	border-radius: 10px;
	padding: 36px 40px 34px;
	text-align: center;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

.hp-herocard h1 {
	margin: 0 0 12px;
	line-height: 1.15;
}

.hp-herocard p {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
	margin-inline: auto;
}

.hp-samplebar {
	padding-block: 14px;
}

.hp-samplebar p {
	margin: 0;
	font-size: 15px;
}

@media (max-width: 900px) {
	.hp-herostrip { height: 380px; }
	.hp-herostrip img:nth-child(n + 4) { display: none; }
	.hp-herocard { padding: 26px 22px 24px; }
}

@media (max-width: 600px) {
	.hp-herostrip { height: 340px; gap: 6px; padding: 6px; }
	.hp-herostrip img:nth-child(n + 3) { display: none; }
}

/* ---- department tiles get the same tile treatment, 8 across as the reference ---- */

.hp-dept-tiles ul.wc-block-product-categories-list {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

.hp-dept-tiles .wc-block-product-categories-list-item__image {
	border-radius: 8px;
}

.hp-dept-tiles .wc-block-product-categories-list-item__image img {
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 1200px) {
	.hp-dept-tiles ul.wc-block-product-categories-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.hp-dept-tiles ul.wc-block-product-categories-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- carousel: a circular control on the right edge, as the reference has on every row ---- */

.hp-section {
	position: relative;
}

.hp-carousel {
	position: relative;
}

.hp-carousel::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 26px;
	width: 56px;
	pointer-events: none;
	background: linear-gradient(to right, transparent,
		var(--wp--preset--color--background) 78%);
}

.hp-scrollbtn {
	position: absolute;
	right: -18px;
	top: 38%;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--background);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.hp-scrollbtn:hover {
	border-color: var(--wp--preset--color--brand);
}

.hp-scrollbtn[hidden] {
	display: none;
}

@media (max-width: 781px) {
	.hp-scrollbtn { display: none; }
	.hp-carousel::after { display: none; }
}

.hp-scrollbtn--prev {
	right: auto;
	left: -18px;
}

/* =========================================================================
 * Card internals must align ACROSS the row, not just have equal card height.
 *
 * Measured: cards were all 360px tall, but titles ran 1 line (24px) or 2
 * (48px), so price sat at 266px on some cards and 290px on others, and the
 * buttons at 297 vs 321. Equal card height is not enough - every element
 * below a variable-height one has to be pinned.
 *
 * Title reserves two lines always; price and button are pushed to a shared
 * baseline so a 1-line and a 2-line card agree.
 * ====================================================================== */

.hp-product-grid li.wc-block-product,
.hp-product-grid .wp-block-post {
	min-height: 100%;
}

.hp-product-grid .wp-block-post-title,
.hp-product-grid .wc-block-components-product-title {
	/* always occupy two lines: 16px * 1.5 line-height * 2 */
	min-height: 48px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hp-product-grid .wc-block-components-product-price,
.hp-product-grid .wp-block-woocommerce-product-price {
	min-height: 21px;
	margin-top: 2px;
}

/* the button sits on the card's floor, so every button in a row shares a baseline */
.hp-product-grid .wc-block-components-product-button,
.hp-product-grid .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 8px;
}

/* =========================================================================
 * "Ordering takes about a minute"
 *
 * The previous version was structurally broken, not just plain: the section
 * was alignwide (1320px) but its columns wrapper fell back to contentSize
 * (760px), so three 240px columns crammed into the middle third of a full
 * width band. Children of a wide group do NOT inherit its width - the inner
 * columns block has to be alignwide too.
 * ====================================================================== */

.hp-steps {
	text-align: center;
}

.hp-steps > h2 {
	margin: 0 0 10px;
}

.hp-steps-lead {
	margin: 0 auto 40px;
	max-width: 52ch;
	color: var(--wp--preset--color--muted);
}

.hp-steprow {
	gap: 56px;
	text-align: left;
	margin-bottom: 40px;
}

.hp-steprow .wp-block-column {
	position: relative;
	padding-left: 76px;
}

/* the numeral is a badge, and a hairline runs from it toward the next step */
.hp-stepnum {
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	font-size: 22px;
	font-weight: 700;
	line-height: 52px;
	text-align: center;
}

/* No connector rule between steps: at badge height it ran straight through the heading text,
 * which reads as noise rather than as a stepper. The numbered badges carry the sequence on
 * their own. */

.hp-steprow h3 {
	margin: 6px 0 8px;
	line-height: 1.3;
}

.hp-steprow p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 900px) {
	.hp-steprow {
		gap: 28px;
	}
	.hp-steprow .wp-block-column {
		padding-left: 64px;
	}
	.hp-stepnum {
		width: 44px;
		height: 44px;
		line-height: 44px;
		font-size: 19px;
	}
}

/* =========================================================================
 * Industries — a real card grid, not a line of text chips.
 *
 * ⚠️ Same trap as the steps section and the New-in-catalogue rail: the inner
 * grid must be alignwide too, or it collapses to contentSize (760px) inside a
 * 1320px section and everything crams into the middle.
 * ====================================================================== */

.hp-indgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hp-indcard {
	padding: 22px 24px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--background);
	transition: border-color 180ms ease, transform 180ms ease;
}

.hp-indcard:hover {
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-2px);
}

.hp-indcard h3 {
	margin: 0 0 6px;
	line-height: 1.3;
}

.hp-indcard p {
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 1000px) {
	.hp-indgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.hp-indgrid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Width guard.
 *
 * 🚨 Four separate sections shipped visually broken from the SAME cause: a
 * block inside an `alignwide` group does NOT inherit that width - WordPress's
 * constrained layout re-applies contentSize (760px) to every child. It hit the
 * ordering steps, the New-in-catalogue rail, the industries grid and two
 * section heads, each time reading as "cramped in the middle".
 *
 * The markup now carries align:wide where it should, and this is the backstop
 * so a future section cannot silently collapse for the same reason.
 * ====================================================================== */

.hp-section > .hp-sechead,
.hp-section > .hp-indgrid,
.hp-section > .wp-block-woocommerce-product-collection,
.hp-steps > .hp-steprow {
	max-width: none;
}

/* Equal card height, with the slack at the BOTTOM.
 * ⚠️ `grid-auto-rows: 1fr` does not equalise rows in an auto-height container. Reserving
 * min-heights on the heading and paragraph separately DID equalise them, but it parked the
 * spare space in the MIDDLE of short cards - a visible gap between title and description.
 * Reserving on the card instead keeps every card the same height and lets short entries
 * simply end early. */
.hp-indcard {
	min-height: 168px;
}

/* =========================================================================
 * 🚨 WordPress flow-layout margins survive a display:grid override.
 *
 * A `wp:group` with the default layout renders `is-layout-flow`, whose core CSS
 * puts `margin-block-start` on every child after the first. Restyling that group
 * as a CSS grid does NOT remove those margins - measured: industry cards 2-9 each
 * carried margin-top:20px, which pushed them 20px down inside their grid row while
 * card 1 stretched to fill it (188px vs 168px). The row looked misaligned for a
 * reason that never appears in the card's own styles.
 *
 * Any element this theme converts to grid must therefore zero its children's
 * block margins and let `gap` own the spacing.
 * ====================================================================== */

.hp-indgrid > *,
.hp-dept-tiles ul > li,
.hp-product-grid .wp-block-post-template > *,
.hp-product-grid .wc-block-product-template > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* =========================================================================
 * Locations — a dark anchor band near the foot of the page.
 *
 * The previous version was 138px of identical "Production & collection" lines,
 * and the trust band directly beneath repeated the same cities verbatim.
 * Two thin sections saying the same thing back to back.
 *
 * Orlando removed 2026-08-13 (Patrick) - three locations now, so the grid is
 * repeat(3) and stays 3 across on tablet rather than orphaning a card. */
 * ====================================================================== */

.hp-locheader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 36px;
}

.hp-locheader h2 {
	margin: 0;
}


.hp-loclead {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.78;
}

.hp-locgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hp-locgrid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hp-loccard {
	padding: 24px 22px 22px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 180ms ease, background 180ms ease;
}

.hp-loccard h3 {
	margin: 0 0 2px;
	line-height: 1.2;
}

.hp-locstate {
	margin: 0 0 16px !important;
	color: rgba(255, 255, 255, 0.90) !important;
	opacity: 1;
	font-size: 15px;
}

/* the repeated line reads as a tag rather than a sentence said once per city */
.hp-loctag {
	margin: 0 !important;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 700;
}

@media (max-width: 1000px) {
	.hp-locheader { grid-template-columns: 1fr; gap: 12px; align-items: start; }
	.hp-locgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.hp-locgrid { grid-template-columns: 1fr; }
}

/* ---- trust band: give the four points room ---- */

.hp-trust .wp-block-columns {
	gap: 40px;
}

.hp-trust h3 {
	margin: 0 0 6px;
}

.hp-trust p {
	margin: 0;
	line-height: 1.55;
}

/* ---- trust rail: give it presence without competing with the dark band above ----
 * It sits directly after the locations band, so it stays light and typographic; a short
 * brand rule above each heading supplies the structure the plain strip was missing. */

.hp-trust {
	background: var(--wp--preset--color--background);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: 48px !important;
}

.hp-trust .wp-block-column {
	position: relative;
	padding-top: 20px;
}

.hp-trust .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
}

.hp-trust h3 {
	margin: 0 0 8px;
	line-height: 1.3;
}

.hp-trust p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	max-width: 34ch;
}

@media (max-width: 781px) {
	.hp-trust { padding-block: 34px !important; }
	.hp-trust .wp-block-columns { gap: 26px; }
}

/* =========================================================================
 * Locations — glass cards over a production-floor photograph.
 *
 * Legibility first: the image sits under a strong ink-tinted gradient so white
 * text keeps a high contrast ratio regardless of what the photo is doing behind
 * it. The glass effect is decoration on top of that, never the thing carrying
 * the contrast — a translucent card over a bright photo is exactly how these
 * designs become unreadable.
 * ====================================================================== */

/* Without backdrop-filter the translucent fill alone reads as washed-out, so give
   those browsers a solid tinted card instead of a broken-looking one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hp-loccard {
		background: rgba(10, 24, 46, 0.86);
	}
}

/* Not a filled pill: as a solid lozenge it out-shouted the city name, which is the thing that
 * matters on this card. A hairline rule and a quiet uppercase label sit inside the glass instead
 * of on top of it. White at 0.72 keeps it above 4.5:1 on the brightest part of the photo. */
.hp-loctag {
	margin: 0 !important;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	background: none;
	border-radius: 0;
	display: block;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 11px;
}

.hp-loclead {
	opacity: 1;
}

/* =========================================================================
 * Pricing explainer — replaces a 622px centred wall of prose.
 *
 * The old version was the weakest band on the page: a narrow text block sitting
 * between the glass locations band and the CTA. The content is also the most
 * useful thing the store can say about itself, so it earns real structure -
 * the three pricing models the engine actually implements, each with a concrete
 * worked example taken from live product data.
 * ====================================================================== */

.hp-pricehead {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
	margin-bottom: 36px;
}

.hp-pricehead h2 {
	margin: 0;
}

.hp-pricelead {
	/* optical: drop the lead to sit on the heading's first baseline rather than its cap line */
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
}

.hp-pricegrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hp-pricegrid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hp-pricecard {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--background);
}

.hp-pricekicker {
	margin: 0 0 8px !important;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hp-pricecard h3 {
	margin: 0 0 10px;
	line-height: 1.3;
}

.hp-pricecard > p:not(.hp-pricekicker):not(.hp-priceeg) {
	margin: 0 0 16px;
	line-height: 1.6;
	font-size: 15px;
}

/* the worked example is the proof, so it gets its own surface at the card's foot */
.hp-priceeg {
	margin: auto 0 0 !important;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--brand);
	line-height: 1.5;
}

.hp-pricefoot {
	margin: 32px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
}

@media (max-width: 1000px) {
	.hp-pricehead { grid-template-columns: 1fr; gap: 14px; align-items: start; }
	.hp-pricegrid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * GLASS BAND SYSTEM
 *
 * One treatment shared by every full-bleed strip, rather than per-section CSS.
 * Two rules learned building the locations band, and they hold for all of them:
 *
 *  1. The GRADIENT carries the contrast, never the glass. A frosted panel over a
 *     bright photo is how these designs become unreadable.
 *  2. Glass needs light DIRECTION - a gradient fill brighter at the top-left and
 *     a highlight on the top edge only. A flat translucent fill is just a slab.
 *
 * Each band gets its own backdrop so consecutive glass sections do not read as
 * the same panel repeated down the page.
 * ====================================================================== */

.hp-glassband {
	position: relative;
	isolation: isolate;
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
	color: #fff;
}

.hp-glassband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		120% 90% at 50% 40%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.32) 100%
	);
	pointer-events: none;
}

.hp-glassband h2,
.hp-glassband h3,
.hp-glassband p,
.hp-glassband li {
	color: #fff;
}

/* ⚠️ Secondary text on glass is alpha-composited over whatever the photo is doing, so a low
 * alpha silently eats contrast in a way the declared colour never shows. 0.74 measured under
 * 4.5:1; 0.90 holds. */
.hp-glassband .has-muted-color {
	color: rgba(255, 255, 255, 0.90) !important;
}

/* the frosted panel itself */
.hp-glasspanel {
	background: linear-gradient(
		158deg,
		rgba(255, 255, 255, 0.16) 0%,
		rgba(255, 255, 255, 0.07) 46%,
		rgba(255, 255, 255, 0.04) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	box-shadow:
		0 10px 34px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.30),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.hp-glasspanel:hover {
	background: linear-gradient(
		158deg,
		rgba(255, 255, 255, 0.24) 0%,
		rgba(255, 255, 255, 0.11) 46%,
		rgba(255, 255, 255, 0.06) 100%
	);
	border-color: rgba(255, 255, 255, 0.32);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hp-glasspanel {
		background: rgba(10, 24, 46, 0.86);
	}
}

/* ---- per-band backdrops ---- */

.hp-steps.hp-glassband {
	background-image:
		linear-gradient(115deg, rgba(8,20,38,0.95) 0%, rgba(8,20,38,0.88) 45%, rgba(8,20,38,0.80) 100%),
		url("../assets/steps-bg.jpg");
}

.hp-cta.hp-glassband {
	background-image:
		linear-gradient(115deg, rgba(8,20,38,0.95) 0%, rgba(8,20,38,0.88) 45%, rgba(8,20,38,0.81) 100%),
		url("../assets/cta-bg.jpg");
}

/* ---- band-specific adjustments once they are glass ---- */

.hp-steps .wp-block-column {
	padding: 24px 24px 26px 88px;
}

.hp-steps .hp-stepnum {
	left: 24px;
	top: 24px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
}

.hp-cta .wp-block-button__link {
	background: #fff !important;
	color: var(--wp--preset--color--ink) !important;
}


/* =========================================================================
 * Locations + trust rail — LIGHT.
 * Both were dark (locations a solid ink band, trust a glass band). Patrick
 * asked for white, so they now read as ordinary light sections. Glass stays on
 * the ordering steps and the quote CTA only.
 * ====================================================================== */

.hp-locations {
	position: relative;
	background: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--ink);
	border-top: 1px solid var(--wp--preset--color--line);
}

.hp-locations h2,
.hp-locations h3 {
	color: var(--wp--preset--color--ink);
}

.hp-locations .hp-loclead {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.hp-locations .hp-loccard {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	transition: border-color 180ms ease, transform 180ms ease;
}

.hp-locations .hp-loccard:hover {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-2px);
}

.hp-locations .hp-locstate {
	color: var(--wp--preset--color--muted) !important;
}

.hp-locations .hp-loctag {
	color: var(--wp--preset--color--brand);
	border-top-color: var(--wp--preset--color--line);
}


/* =========================================================================
 * Trust rail — the one glass strip in this part of the page.
 * Locations directly above it stays WHITE (Patrick, 2026-08-13), so this band
 * is the single dark moment before the light pricing section and the CTA.
 * ====================================================================== */

.hp-trust.hp-glassband {
	background-image:
		linear-gradient(115deg, rgba(8,20,38,0.95) 0%, rgba(8,20,38,0.89) 50%, rgba(8,20,38,0.82) 100%),
		url("../assets/trust-bg.jpg");
	border-top: 0;
	padding-block: 56px !important;
}

.hp-trust.hp-glassband h3 {
	color: #fff;
	margin: 0 0 8px;
}

.hp-trust.hp-glassband p {
	color: rgba(255, 255, 255, 0.90);
	margin: 0;
}

.hp-trust.hp-glassband .wp-block-column {
	padding: 26px 24px 24px;
}

/* the brand rule reads as a highlight on glass rather than a coloured tick */
.hp-trust.hp-glassband .wp-block-column::before {
	left: 24px;
	top: 24px;
	background: rgba(255, 255, 255, 0.60);
}

/* =========================================================================
 * Quote CTA — a closing band, not a squeezed centred block.
 *
 * The previous version measured 254px tall with 24px of padding, and its
 * heading was capped at 24ch (384px) inside a 1440px band, so it wrapped to two
 * cramped lines with air on both sides. Now a two-column row: copy left, action
 * right, which uses the band width and gives the section real presence.
 * ====================================================================== */

.hp-ctarow {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	gap: 56px;
	align-items: center;
}

.hp-ctarow > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hp-cta h2 {
	margin: 0 0 14px;
	line-height: 1.15;
	/* let the heading use its column: an 18ch cap inside a ~745px column wrapped it to three
	 * lines, which is the same crowding the centred version had, just moved left. */
	max-width: none;
}

.hp-cta p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.90);
	max-width: 64ch;
}

.hp-ctaaction {
	justify-self: end;
	text-align: right;
}

.hp-ctaaction .wp-block-buttons {
	justify-content: flex-end;
}

.hp-cta .wp-block-button__link {
	padding: 16px 34px;
	font-size: 17px;
}

.hp-ctanote {
	margin: 12px 0 0 !important;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
	.hp-ctarow {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.hp-ctaaction {
		justify-self: start;
		text-align: left;
	}
	.hp-ctaaction .wp-block-buttons {
		justify-content: flex-start;
	}
	.hp-cta h2 { max-width: none; }
}


/* =========================================================================
 * Utility pages (quote, contact, artwork, terms, shipping, privacy)
 *
 * These were bare: an h1 dropped straight onto white, then one 760px column of
 * text. A shared header band gives every page an entrance and keeps the title
 * aligned with the content beneath it, which the old template did not.
 * ====================================================================== */

.hp-pagehead {
	background: var(--wp--preset--color--accent, #eaf2fb);
	border-bottom: 1px solid var(--wp--preset--color--line, #d8e3f0);
	padding-block: clamp(28px, 4vw, 52px);
	margin-bottom: var(--wp--preset--spacing--50);
}

.hp-pagehead .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display, 34px);
	line-height: 1.15;
}

/* ---- quote page: form beside a reassurance panel ---- */

.hp-quote-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 900px) {
	.hp-quote-layout { grid-template-columns: 1fr; }
}

.hp-quote-panel {
	background: var(--wp--preset--color--accent, #eaf2fb);
	border: 1px solid var(--wp--preset--color--line, #d8e3f0);
	border-radius: 10px;
	padding: 24px 26px;
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 900px) {
	.hp-quote-panel { position: static; }
}

.hp-quote-panel h2 {
	font-size: 19px;
	margin-top: 0;
	margin-bottom: 10px;
}

.hp-quote-panel h3 {
	font-size: 15px;
	margin: 20px 0 6px;
}

.hp-quote-panel p,
.hp-quote-panel li { font-size: 15px; }

.hp-quote-panel ol { padding-left: 1.1em; margin: 0; }

.hp-quote-panel ol li { margin-bottom: 8px; }

/* The page head sits at the WIDE edge, so the body must start there too. A constrained
   post-content centres its children at contentSize, which put the title at x=60 and the first
   paragraph at x=340 - a misalignment that reads as a broken page. Flow layout instead, with a
   reading measure applied per child so long text never runs the full 1320px. */
main > .wp-block-post-content > * {
	/* ⚠️ NOT `ch`. The ch unit is relative to the element's OWN font size, so 72ch on a 28px
	   heading is ~1150px while 72ch on 16px body text is ~660px - the heading's underline then
	   runs 500px past the paragraph it belongs to. One shared measure keeps the column square. */
	max-width: var(--hp-measure);
}

/* Anything that is deliberately a layout, not prose, keeps the full width. */
main > .wp-block-post-content > .alignwide,
main > .wp-block-post-content > .alignfull,
main > .wp-block-post-content > .hp-quote-layout,
main > .wp-block-post-content > .wp-block-columns,
main > .wp-block-post-content > .wp-block-group {
	max-width: none;
}

/* Headings inside a long document need air above them or the page reads as one slab. */
main > .wp-block-post-content > h2 {
	margin-top: 2.2em;
	padding-top: 0.6em;
	border-top: 1px solid var(--wp--preset--color--line, #d8e3f0);
}

main > .wp-block-post-content > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

main > .wp-block-post-content > h3 { margin-top: 1.8em; }

/* =========================================================================
 * Cart line items
 * ====================================================================== */

/* The block cart prints the product's short description on every line. On a print store the
   line's meaning is its SPEC - size, sides, quantity - and a paragraph of marketing copy pushes
   that below the fold and makes two lines of the same product look identical at a glance.
   Hidden rather than filtered: this is presentation, and the description is still correct
   everywhere it belongs. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* ---- my-account: what an account is for ---- */

.hp-account-intro {
	max-width: var(--hp-measure);
	margin-bottom: var(--wp--preset--spacing--40);
}

.hp-account-lead { margin: 0 0 10px; }

.hp-account-benefits {
	margin: 0;
	padding-left: 1.1em;
	color: var(--wp--preset--color--muted, #5a6b80);
}

.hp-account-benefits li { margin-bottom: 4px; }

/* ---- 404 ---- */

.hp-404 { max-width: var(--hp-measure); }

.hp-404 .hp-404-search { margin-bottom: 8px; }

.hp-404 .wp-block-search { margin-bottom: var(--wp--preset--spacing--40); }

.hp-404 li { margin-bottom: 6px; }