/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* Two layers: raw brand values, then role aliases. Sections reference  */
/* roles, so a brand refresh is one line. Values come from the Figma    */
/* variables in 8KEBNaad9gZUFhecWGEEFG ("Design Stage 1"); frames are   */
/* 1920 wide, so a px value there is (px / 19.2)vw here.                */
/* ------------------------------------------------------------------ */

@font-face {
	font-family: "Avenir Next";
	src: url( "../fonts/avenir-next-300.woff2" ) format( "woff2" );
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Avenir Next";
	src: url( "../fonts/avenir-next-400.woff2" ) format( "woff2" );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Avenir Next";
	src: url( "../fonts/avenir-next-500.woff2" ) format( "woff2" );
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Avenir Next";
	src: url( "../fonts/avenir-next-600.woff2" ) format( "woff2" );
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Avenir Next";
	src: url( "../fonts/avenir-next-700.woff2" ) format( "woff2" );
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand: FWDirect (red, slate, the site's green buttons) */
	--color-red:        #fd3434;
	--color-red-dark:   #e02424;
	--color-red-tint:   #fff1f1;
	--color-slate:      #364245;
	--color-slate-2:    #4a585c;
	--color-green:      #15c42a;
	--color-green-dark: #10a322;
	--color-grey:       #f3f3f3;
	--color-line:       #dfe3e4;
	--color-muted:      #6b7678;
	--color-white:      #ffffff;
	--color-grey-mid:   #8a9496; /* placeholder text in the search pill */

	/* Aliases, so the rules forked from Insulation Plus keep resolving. */
	--color-orange:     var( --color-red );
	--color-dark:       var( --color-slate );
	--color-grey-light: var( --color-grey );
	--color-grey-logo:  var( --color-slate );

	/* Roles */
	--color-primary:   var( --color-orange );
	--color-body:      var( --color-dark );
	--color-heading:   var( --color-dark );
	--color-surface:   var( --color-white );
	--color-surface-2: var( --color-grey-light );

	/* Type — Figma text styles. Size on a class, never the tag. */
	--font-base: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-sans: var( --font-base );
	--radius:    6px;

	--text-heading:      clamp( 2rem, 2.6042vw, 3.125rem );   /* Heading 50/60 Bold */
	--text-heading-lh:   1.2;
	--text-subheading:   clamp( 1.5rem, 1.6667vw, 2rem );     /* Sub Heading 32/34 Light|Bold */
	--text-subheading-lh: 1.0625;
	--text-body:         1.0625rem;                            /* Body Copy 17/20 */
	--text-body-lh:      1.1765;
	--text-nav:          1rem;                                 /* Nav 16/18 */
	--text-nav-lh:       1.125;
	--text-small:        0.875rem;                             /* 14/16 */
	--text-xs:           0.75rem;                              /* 12/14 */

	/* Layout — 1920 comp. Header/hero gutter is 60; content columns sit
	   on a 1720 measure (100 each side). */
	--edge-pad:      max( 1.25rem, 3.125vw );   /* 60 @ 1920 */
	--container:     120rem;                    /* 1920 incl. the 100 pads → 1720 content */
	--container-pad: max( 1.25rem, 5.2083vw );  /* 100 @ 1920 */
	--section-pad:   clamp( 3rem, 5.2083vw, 6.25rem );

	/* Controls — everything is a pill */
	--radius-pill: 100px;
	--button-h:    3.125rem;  /* 50 body buttons */
	--button-h-lg: 3.625rem;  /* 58 header CTA + search */
	--input-h:     2.375rem;  /* 38 footer newsletter */
}

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

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var( --font-base );
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	color: var( --color-body );
	background: var( --color-surface );
}

img,
svg {
	max-width: 100%;
	height: auto;
}

svg {
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var( --color-orange );
	outline-offset: 2px;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

legend {
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: var( --text-heading-lh );
	color: var( --color-heading );
	text-wrap: balance;
}

p {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

[hidden] {
	display: none !important;
}

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

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	clip-path: none;
	background: var( --color-white );
}

/* Anchor markers printed by the section dispatcher. */
.section-anchor {
	display: block;
	height: 0;
	scroll-margin-top: calc( var( --header-height, 5rem ) + 1.5rem );
}

/* ------------------------------------------------------------------ */
/* Type utilities                                                      */
/* ------------------------------------------------------------------ */

.text-heading    { font-size: var( --text-heading ); line-height: var( --text-heading-lh ); font-weight: 700; }
.text-subheading { font-size: var( --text-subheading ); line-height: var( --text-subheading-lh ); font-weight: 300; }
.text-subheading.is-bold { font-weight: 700; }
.text-body       { font-size: var( --text-body ); line-height: var( --text-body-lh ); }
.text-nav        { font-size: var( --text-nav ); line-height: var( --text-nav-lh ); }
.text-small      { font-size: var( --text-small ); line-height: 1.15; }
.text-xs         { font-size: var( --text-xs ); line-height: 1.17; }

/* Text that goes bold on a state (selected tab, checked pill, open filter)
   keeps its bold width throughout, so nothing beside it moves: a zero-height,
   invisible bold copy of the label (data-label) sets the width. Needs a
   shrink-to-fit box (flex item, inline-block); works on bare text, where
   the old grid stack dropped the text to a second row (Chris, 1 Oct 2026). */
.hold-bold::before {
	content: attr( data-label );
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */

.section__inner,
.site-footer__inner {
	max-width: var( --container );
	margin-inline: auto;
	padding-inline: var( --container-pad );
}

.section {
	padding-block: var( --section-pad );
}

/* Full-bleed sections use the edge pad instead of the centred column. */
.section--bleed {
	padding-inline: var( --edge-pad );
}

/* ------------------------------------------------------------------ */
/* Background utilities (mapped from the ACF Background select)        */
/* ------------------------------------------------------------------ */

.bg--white  { background: var( --color-white ); }
.bg--grey   { background: var( --color-grey-light ); }
.bg--orange,
.bg--red    { background: var( --color-red ); color: var( --color-white ); }
.bg--dark,
.bg--slate  { background: var( --color-slate ); color: var( --color-white ); }

.bg--orange :is( h1, h2, h3, h4, h5, h6 ),
.bg--red :is( h1, h2, h3, h4, h5, h6 ),
.bg--slate :is( h1, h2, h3, h4, h5, h6 ),
.bg--dark :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --color-white );
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* Green pill (FWD's buy colour), 50 tall, 17/20, 30 side padding.     */
/* ------------------------------------------------------------------ */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --button-h );
	padding: 0 1.875rem;
	border-radius: var( --radius-pill );
	background: var( --color-green );
	color: var( --color-white );
	font-weight: 600;
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover fills come from the surface (see "Buttons on dark surfaces"). */
.button:hover,
.button:focus-visible {
	text-decoration: none;
	background: var( --button-hover-bg, var( --color-green-dark ) );
	color: var( --button-hover-fg, var( --color-white ) );
}

.button--lg {
	min-height: var( --button-h-lg );
}

.button--white {
	background: var( --color-white );
	color: var( --color-orange );
}

.button--white:hover,
.button--white:focus-visible {
	background: var( --button-white-hover-bg, var( --color-dark ) );
	color: var( --color-white );
}

.button--outline {
	background: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}

/* Inverts like the white button: the generic hover paints the fill dark
   but left the text (currentColor) dark too, so the label vanished. */
.button--outline:hover,
.button--outline:focus-visible {
	background: var( --button-outline-hover-bg, var( --color-dark ) );
	color: var( --button-outline-hover-fg, var( --color-white ) );
	box-shadow: inset 0 0 0 1px var( --button-outline-hover-bg, var( --color-dark ) );
}

/* Buttons on dark surfaces: the dark hover fill vanished into the panel
   (Eleanor, 2 Oct 2026 — Expert Advice "Email Us"), so on dark they invert
   against white / orange instead. Lighter surfaces reset the properties, so a
   card nested in a dark band (photo card) takes its own surface's hover. */
.bg--dark,
.bg--slate {
	--button-hover-bg: var( --color-white );
	--button-hover-fg: var( --color-green-dark );
	--button-white-hover-bg: var( --color-orange );
	--button-outline-hover-bg: var( --color-white );
	--button-outline-hover-fg: var( --color-dark );
}

.bg--white,
.bg--grey,
.bg--orange,
.bg--red {
	--button-hover-bg: initial;
	--button-hover-fg: initial;
	--button-white-hover-bg: initial;
	--button-outline-hover-bg: initial;
	--button-outline-hover-fg: initial;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* Laid out like the live Elementor header (Chris, 5 Oct 2026): red    */
/* top bar 41 · white masthead 74 · slate nav 51, on the page's        */
/* content measure. Then the service ribbon.                           */
/* ------------------------------------------------------------------ */

.site-header {
	position: relative;
	z-index: 50;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

.site-header__inner {
	display: flex;
	align-items: center;
	max-width: var( --container );
	margin-inline: auto;
	padding-inline: var( --container-pad );
}

/* Top bar: opening hours left, the cut-off countdown centred; phone,
   account and sign out right. 14px Medium white on red in sentence case
   (Chris, 5 Oct 2026: not all caps). */

.topbar {
	background: var( --color-red );
	color: var( --color-white );
	font-size: var( --text-small );
	font-weight: 500;
}

.topbar__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	min-height: 2.5625rem; /* 41 */
	gap: 1.5rem;
}

.topbar__hours,
.topbar__message {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
}

.topbar__hours {
	grid-column: 1;
	white-space: nowrap;
}

.topbar__message {
	grid-column: 2;
	justify-content: center;
}

.topbar__hours svg {
	flex: none;
	width: 1.0625rem;
	height: 1.0625rem;
}

/* The van is drawn 37×24 with preserveAspectRatio none: keep its shape. */
.topbar__van {
	display: flex;
	flex: none;
}

.topbar__message svg {
	width: 1.5rem;
	height: 0.985rem;
}

/* …and filled in brand red, which vanishes on the bar. */
.topbar__message svg [fill="#fd3434"] {
	fill: currentColor;
}

.topbar__cutoff {
	font-variant-numeric: tabular-nums;
}

.topbar__right {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
	white-space: nowrap;
}

/* Each link after the first sits behind a hairline. */
.topbar__right > * + * {
	padding-left: 1.25rem;
	border-left: 1px solid rgba( 255, 255, 255, 0.4 );
}

.topbar .tool-link {
	gap: 0.5rem;
	color: inherit;
}

.topbar .tool-link:hover,
.topbar .tool-link:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.topbar .tool-link__icon {
	width: 1.0625rem;
	height: 1.0625rem;
	color: inherit;
}

/* VAT toggle: labels 16px, pill 67×31 orange, 20px white knob. In the
   masthead at 1419–1618, 122 before the basket. */

.vat-toggle {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex: none;
	white-space: nowrap;
}

/* The switch itself is the Tax Switch for WooCommerce plugin's control
   (a checkbox + slider span React mounts into .vat-toggle__switch, the
   shortcode's container); its own stylesheet is dequeued and the markup
   is dressed as the comp's 67×31 pill with a 20px white knob.
   Checked = prices including VAT = knob right, orange pill. Unchecked
   (ex VAT, the default) greys the pill and the Inc label, so it reads as
   a switch that's off (Josh, 23 Sep 2026, after FWD's). The product
   page's buy box (.pdp-vat) uses the same pill. */

.vat-toggle__switch,
.pdp-vat__switch {
	position: relative;
	width: 4.1875rem;
	height: 1.9375rem;
	flex: none;
}

/* Until the plugin's script mounts (or without JS) draw the resting
   pill so nothing jumps. */
.vat-toggle__switch:empty::before,
.pdp-vat__switch:empty::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var( --radius-pill );
	background: var( --color-grey-mid );
}

.vat-toggle__switch:empty::after,
.pdp-vat__switch:empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.375rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var( --color-white );
	transform: translateY( -50% );
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch {
	display: block;
	height: 100%;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-label {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	cursor: pointer;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-checkbox {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-slider {
	position: absolute;
	inset: 0;
	border-radius: var( --radius-pill );
	background: var( --color-grey-mid );
	transition: background-color 0.15s ease;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-checkbox:checked + .wdevs-tax-switch-slider {
	background: var( --color-orange );
}

/* The labels either side: the one in force full strength, the other faded. */
.vat-toggle > span {
	transition: opacity 0.15s ease;
}

.vat-toggle > span:last-child,
.vat-toggle:has( .wdevs-tax-switch-checkbox:checked ) > span:first-child {
	opacity: 0.45;
}

.vat-toggle:has( .wdevs-tax-switch-checkbox:checked ) > span:last-child {
	opacity: 1;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-slider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.375rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var( --color-white );
	transform: translateY( -50% );
	transition: transform 0.15s ease;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-checkbox:checked + .wdevs-tax-switch-slider::before {
	transform: translate( 2.1875rem, -50% ); /* 67 − 20 − 6 − 6 */
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-checkbox:focus-visible + .wdevs-tax-switch-slider {
	outline: 2px solid var( --color-orange );
	outline-offset: 2px;
}

:is( .vat-toggle, .pdp-vat ) .wdevs-tax-switch-label-text {
	display: none; /* the labels are the theme's, either side */
}

/* Masthead ---------------------------------------------------------- */

.masthead {
	background: var( --color-white );
}

.masthead__inner {
	position: relative;
	min-height: 4.625rem; /* 74 */
	gap: 1.5rem;
}

/* The logo at live's 150 with the site tagline under it (13 Bold slate). */
.masthead__logo {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	color: var( --color-slate );
}

.masthead__logo:hover,
.masthead__logo:focus-visible {
	text-decoration: none;
}

.masthead__logo svg {
	width: 9.375rem; /* 150 */
	height: auto;
}

.masthead__tagline {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* The search pill sits centred between the logo and the VAT switch (or
   the basket, on basket/checkout where the plugin hides the switch), up
   to 600 wide. In the flow so it can never run under "Ex VAT". */

.masthead__search {
	flex: 0 1 37.5rem;
	min-width: 0;
	margin-inline: auto;
}

.masthead__search .search-form {
	height: 2.75rem; /* 44, to sit in the 74 band */
}

.masthead__tools {
	display: flex;
	align-items: center;
	gap: 1.875rem; /* 30 */
	flex: none;
	margin-inline-start: clamp( 1.5rem, 4vw, 3.75rem );
}

.tool-link {
	display: flex;
	align-items: center;
	gap: 0.8125rem; /* 13 */
	color: var( --color-dark );
	line-height: var( --text-nav-lh );
}

.tool-link:hover,
.tool-link:focus-visible {
	text-decoration: none;
	color: var( --color-orange );
}

.tool-link__icon {
	position: relative;
	flex: none;
	width: 1.4375rem;
	height: 1.4375rem;
	color: var( --color-orange );
}

.tool-link__icon svg {
	width: 100%;
	height: 100%;
}

/* Live's basket: a 32 slate basket with the item count in a 16 red
   bubble over its top-right corner; "Basket" and the subtotal beside it. */
.tool-link__icon--basket {
	width: 2rem;
	height: 2rem;
	color: var( --color-slate );
}

.tool-link__count {
	position: absolute;
	top: -0.4375rem;
	right: -0.4375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.25rem;
	border-radius: var( --radius-pill );
	background: var( --color-red );
	color: var( --color-white );
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1;
}

.tool-link__label {
	display: block;
}

.tool-link--basket .tool-link__label {
	font-size: var( --text-small );
	line-height: 1.25;
}

.tool-link__title,
.tool-link--basket [data-basket-total] {
	display: block;
}

.tool-link__title {
	font-weight: 700;
}

.masthead__menu-toggle {
	display: none;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	color: var( --color-dark );
}

.masthead__menu-toggle svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Search pill: 709×58, 1px dark border, placeholder #949393 28 in, icon 23 right 24 in. */

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	height: var( --button-h-lg );
	border: 1px solid var( --color-dark );
	border-radius: var( --radius-pill );
	background: var( --color-white );
}

.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 3.5rem 0 1.75rem;
	border: 0;
	border-radius: inherit;
	background: transparent;
	font-size: var( --text-nav );
	color: var( --color-dark );
	-webkit-appearance: none;
	appearance: none;
}

.search-form__input::placeholder {
	color: var( --color-grey-mid );
	opacity: 1;
}

/* Chrome/Safari draw a blue clear × inside type="search"; off-brand, and
   it sat against the search icon. */
.search-form__input::-webkit-search-cancel-button {
	display: none;
}

.search-form__input:focus-visible {
	outline: none;
}

.search-form:focus-within {
	box-shadow: 0 0 0 2px var( --color-orange );
}

.search-form__submit {
	position: absolute;
	top: 50%;
	right: 1.5rem;
	width: 1.4375rem;
	height: 1.4375rem;
	transform: translateY( -50% );
	color: var( --color-dark );
}

.search-form__submit:hover,
.search-form__submit:focus-visible {
	color: var( --color-orange );
}

/* Primary nav: 51 tall slate band as live, uppercase items 16/18 Medium
   white 80 apart, the row centred. Active item Bold with a 3px red rule
   under the text. Customer Services is a plain item now, not the Stage 3
   orange pill (Chris, 5 Oct 2026). */

.primary-nav {
	background: var( --color-dark );
	color: var( --color-white );
}

.primary-nav__inner {
	justify-content: center;
	min-height: 3.1875rem; /* 51 */
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 5rem; /* 80 */
}

.nav-menu > li > a {
	position: relative;
	display: inline-grid;
	padding-block: 0.375rem;
	color: var( --color-white );
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Bold on hover/open/current without shifting the row: an invisible bold
   copy of the label (data-label) sits under the text in the same grid
   cell, so the link is always the bold width (the filter-label trick). */
.nav-menu > li > a > .nav-menu__text,
.nav-menu > li > a::before {
	grid-area: 1 / 1;
}

.nav-menu > li > a::before {
	content: attr( data-label );
	font-weight: 700;
	visibility: hidden;
	pointer-events: none;
}

.nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var( --color-red );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.15s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus-visible {
	text-decoration: none;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus-visible,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current_page_parent > a {
	font-weight: 700;
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a:focus-visible::after,
.nav-menu .current-menu-item > a::after,
.nav-menu .current-menu-ancestor > a::after,
.nav-menu .current_page_parent > a::after {
	transform: scaleX( 1 );
}

/* Service ribbon: 66 tall light-grey band, four icon + two-line items
   with 1px dark hairlines between (41 tall). */

.ribbon {
	background: var( --color-grey-light );
	color: var( --color-dark );
}

.ribbon__inner {
	justify-content: center;
	min-height: 4.125rem; /* 66 */
	padding-inline: 0;
}

.ribbon__list {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.ribbon__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-inline: clamp( 1.25rem, 4vw, 5rem );
	border-inline-start: 1px solid var( --color-line );
	line-height: var( --text-nav-lh );
}

.ribbon__item:first-child {
	border-inline-start: 0;
}

.ribbon__item a {
	display: inherit;
	align-items: inherit;
	gap: inherit;
}

.ribbon__icon {
	flex: none;
	display: flex;
	align-items: center;
	color: var( --color-orange );
}

/* FWD's ribbon icons are 24-unit line icons drawn at 32. */
.ribbon__icon img,
.ribbon__icon svg {
	width: 2rem;
	height: 2rem;
}

.ribbon__title {
	display: block;
	font-weight: 700;
}

/* Header — narrow ---------------------------------------------------- */

@media ( max-width: 63.99em ) {
	/* Two rows: the countdown, then the hours and the links, centred. */
	.topbar__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem 1.25rem;
		padding-block: 0.5rem;
	}

	.topbar__message {
		order: -1;
		flex-basis: 100%;
		justify-content: center;
		text-align: center;
	}

	.topbar__right {
		margin-inline: 0;
	}

	.topbar__phone-lead {
		display: none;
	}

	/* Two rows: logo · basket + menu button, then search · VAT switch. */
	.masthead__inner {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		grid-template-areas:
			"logo tools"
			"search vat";
		column-gap: 1.5rem;
		row-gap: 0.75rem;
		padding-block: 0.75rem;
		min-height: 0;
	}

	.masthead__logo {
		grid-area: logo;
		justify-self: start;
	}

	.masthead__search {
		grid-area: search;
		margin: 0;
	}

	/* Basket / checkout: no switch, so the search takes the row. */
	.masthead__inner:not( :has( .vat-toggle ) ) .masthead__search {
		grid-column: 1 / -1;
	}

	.vat-toggle {
		grid-area: vat;
		font-size: var( --text-small );
	}

	.masthead__tools {
		grid-area: tools;
		margin: 0;
		gap: 1.25rem;
	}

	.masthead__menu-toggle {
		display: flex;
	}

	/* The nav becomes a drawer under the masthead. */
	.primary-nav__inner {
		display: block;
		padding-block: 0.5rem 1rem;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-menu > li > a {
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	.nav-menu > li > a::after {
		display: none;
	}

	.ribbon__inner {
		justify-content: flex-start;
	}

	/* ul.ribbon__list beats the ul[class] reset above. */
	ul.ribbon__list {
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var( --edge-pad ); /* or the first snap hides the padding */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var( --edge-pad );
	}

	.ribbon__list::-webkit-scrollbar {
		display: none;
	}

	.ribbon__item {
		flex: none;
		scroll-snap-align: start;
		padding-inline: 1.25rem;
		font-size: var( --text-small );
	}

	.ribbon__item:first-child {
		padding-inline-start: 0;
	}
}

@media ( max-width: 47.99em ) {
	/* Two rows on a phone: the countdown (no van, so it fits one line),
	   then the hours, the phone icon and the account link. */
	.topbar {
		font-size: 0.8125rem;
	}

	.topbar__inner {
		column-gap: 0.75rem;
		padding-inline: 0.625rem;
	}

	.topbar__van {
		display: none;
	}

	.topbar__right {
		gap: 0.75rem;
	}

	.topbar__right > * + * {
		padding-left: 0.75rem;
	}

	/* The phone keeps its icon; the number stays for screen readers. */
	.tool-link--phone .tool-link__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	/* Three rows: the search gets the full width, the switch under it. */
	.masthead__inner {
		grid-template-areas:
			"logo tools"
			"search search"
			"vat vat";
	}

	.vat-toggle {
		justify-self: start;
	}

	.masthead__tools .tool-link__label {
		display: none;
	}

	.masthead__tagline {
		font-size: 0.6875rem;
	}

	.vat-toggle {
		gap: 0.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Live search panel                                                   */
/* Full width straight under the masthead (over the nav + ribbon),      */
/* opened                                                               */
/* from the search pill. No Figma frame: the comp's language — white    */
/* panel on a 3px orange rule, 1720 measure, uppercase orange labels,   */
/* hairline rows, pill chips, the dark card for "can't find it".        */
/* ------------------------------------------------------------------ */

.live-search {
	position: absolute;
	top: var( --live-search-offset, 100% );
	left: 0;
	right: 0;
}

/* Fixed and z-index −1 inside the header's stacking context: it covers the
   page but paints under the header bands, so the pill stays usable. */
.live-search__scrim {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba( 54, 66, 69, 0.6 );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.live-search__panel {
	position: relative;
	max-height: calc( 100vh - var( --live-search-top, 0px ) );
	max-height: calc( 100dvh - var( --live-search-top, 0px ) );
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 3px solid var( --color-orange );
	background: var( --color-white );
	box-shadow: 0 1.5rem 3rem rgba( 54, 66, 69, 0.18 );
	opacity: 0;
	transform: translateY( -0.5rem );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.live-search.is-open .live-search__scrim { opacity: 1; }

.live-search.is-open .live-search__panel {
	opacity: 1;
	transform: none;
}

html.has-live-search {
	overflow: hidden;
}

/* Loading: a dark sweep along the orange rule, results dimmed. */
.live-search__progress {
	position: absolute;
	top: -3px;
	left: 0;
	width: 100%;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
}

.live-search__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 30%;
	background: var( --color-dark );
	opacity: 0;
}

.live-search.is-loading .live-search__progress::after {
	opacity: 1;
	animation: fwd-search-sweep 0.9s ease-in-out infinite;
}

@keyframes fwd-search-sweep {
	from { transform: translateX( -100% ); }
	to   { transform: translateX( 340% ); }
}

.live-search.is-loading .live-search__results {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.live-search__inner {
	position: relative;
	max-width: var( --container );
	margin-inline: auto;
	padding: 3.125rem var( --container-pad ) 3.75rem; /* 50 / 60 */
}

.live-search mark {
	padding: 0 0.05em;
	border-radius: 2px;
	background: var( --color-red-tint );
	color: inherit;
}

.live-search__label {
	margin: 0 0 1.125rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --color-orange );
}

/* Idle: popular searches + top-level categories as pills. */
.live-search__idle {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 5rem;
}

ul.live-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.live-search__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.625rem; /* 42 */
	padding: 0 1.25rem;
	border: 1px solid var( --color-dark );
	border-radius: var( --radius-pill );
	font-size: var( --text-nav );
	color: var( --color-dark );
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.live-search__chip svg {
	width: 0.9375rem;
	height: 0.9375rem;
	color: var( --color-grey-mid );
}

.live-search__chip--category {
	border-color: var( --color-grey-light );
	background: var( --color-grey-light );
}

.live-search__chip:hover,
.live-search__chip:focus-visible {
	text-decoration: none;
	border-color: var( --color-orange );
	background: var( --color-orange );
	color: var( --color-white );
}

.live-search__chip:hover svg,
.live-search__chip:focus-visible svg {
	color: currentColor;
}

/* Results. */
.live-search__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: 1.5625rem; /* 25 */
	margin-bottom: 2.1875rem;  /* 35 */
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.live-search__summary {
	margin: 0;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.live-search__summary strong {
	font-weight: 700;
}

.live-search__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 30rem; /* products · 480 aside */
	gap: 3.75rem;
	align-items: start;
}

.live-search__grid--no-products {
	grid-template-columns: minmax( 0, 1fr );
}

.live-search__aside {
	display: grid;
	gap: 2.1875rem;
}

.live-search__grid--no-products .live-search__aside {
	grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
	gap: 2.1875rem 3.75rem;
}

/* ul. prefix: the ul[class] reset outranks a bare class. */
ul.search-products {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 2.5rem;
	border-top: 1px solid rgba( 54, 66, 69, 0.15 );
}

/* The basket lists its lines in one column: they carry a remove button and
   long FWD product names, which wrapped word by word at half width. */
.mini-basket ul.search-products {
	grid-template-columns: minmax( 0, 1fr );
}

ul.search-products > li {
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.search-product {
	display: grid;
	grid-template-columns: 6rem minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1.25rem;
	padding-block: 0.875rem;
	color: var( --color-dark );
}

.search-product:hover,
.search-product:focus-visible {
	text-decoration: none;
}

.search-product__media {
	display: block;
	aspect-ratio: 1;
	background: rgba( 54, 66, 69, 0.02 );
}

.search-product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.search-product:hover .search-product__media img {
	transform: scale( 1.05 );
}

.search-product__text {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.search-product__title {
	font-size: var( --text-body );
	line-height: 1.3;
	font-weight: 600;
	transition: color 0.15s ease;
}

.search-product:hover .search-product__title,
.search-product:focus-visible .search-product__title {
	color: var( --color-orange );
}

.search-product__meta {
	font-size: var( --text-small );
	line-height: 1.15;
	color: rgba( 54, 66, 69, 0.7 );
}

.search-product__price {
	font-size: var( --text-body );
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.search-product__price .price__suffix {
	display: block;
	font-size: var( --text-xs );
	font-weight: 300;
}

ul.search-links {
	border-top: 1px solid rgba( 54, 66, 69, 0.15 );
}

ul.search-links > li {
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.search-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.8125rem;
	color: var( --color-dark );
}

.search-link:hover,
.search-link:focus-visible {
	text-decoration: none;
}

.search-link__text {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.search-link__title {
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	transition: color 0.15s ease;
}

.search-link:hover .search-link__title,
.search-link:focus-visible .search-link__title {
	color: var( --color-orange );
}

.search-link__meta {
	font-size: var( --text-small );
	line-height: 1.15;
	color: rgba( 54, 66, 69, 0.7 );
}

.search-link__meta--type {
	font-size: var( --text-xs );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --color-orange );
}

.search-link__excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: var( --text-small );
	line-height: 1.3;
	color: rgba( 54, 66, 69, 0.7 );
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.search-link__arrow {
	flex: none;
	width: 0.75rem;
	height: auto;
	color: var( --color-orange );
	transform: rotate( -90deg );
	transition: transform 0.15s ease;
}

.search-link:hover .search-link__arrow {
	transform: rotate( -90deg ) translateY( 0.25rem );
}

/* Help card (elements/help-card.php): white on a hairline under the
   product page's 4px red rule (its buy box), the open / closed status, a
   question, the phone number large, the hours and one text link. Replaced
   the Insulation Plus dark card (Chris, 5 Oct 2026). */
.help-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.5rem 1.5rem 1.375rem;
	border: 1px solid var( --color-line );
	border-top: 4px solid var( --color-red );
	border-radius: 0 0 var( --radius ) var( --radius );
	background: var( --color-white );
	color: var( --color-slate );
}

.help-card__title {
	margin: 0.25rem 0 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

.help-card__text {
	margin: 0;
	font-size: var( --text-small );
	line-height: 1.5;
	color: var( --color-muted );
}

.help-card__phone {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	align-self: stretch;
	margin-top: 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid var( --color-line );
	color: var( --color-slate );
	text-decoration: none;
}

.help-card__phone-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var( --color-red );
	border-radius: 50%;
	color: var( --color-red );
	transition: background-color 0.15s, color 0.15s;
}

.help-card__phone-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.help-card__phone:hover .help-card__phone-icon,
.help-card__phone:focus-visible .help-card__phone-icon {
	background: var( --color-red );
	color: var( --color-white );
}

.help-card__phone-text {
	display: grid;
	gap: 0.125rem;
}

.help-card__phone-label {
	font-size: var( --text-xs );
	color: var( --color-muted );
}

.help-card__phone-number {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.help-card__hours {
	margin: -0.25rem 0 0 3.5rem; /* under the number, past the icon */
	font-size: var( --text-small );
	color: var( --color-muted );
}

.help-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: var( --text-small );
	font-weight: 600;
	color: var( --color-red-dark );
	text-decoration: none;
}

.help-card__link svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.15s ease;
}

.help-card__link:hover,
.help-card__link:focus-visible {
	text-decoration: underline;
}

.help-card__link:hover svg {
	transform: translateX( 0.1875rem );
}

/* Open / closed status (inc/hours.php): a dot and a line, green while the
   phones are open. */
.open-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem 0.25rem 0.625rem;
	border-radius: var( --radius-pill );
	background: var( --color-grey );
	font-size: var( --text-xs );
	font-weight: 600;
	color: var( --color-slate-2 );
}

.open-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var( --color-grey-mid );
}

.open-status.is-open {
	background: #e8f8ea;
	color: var( --color-green-dark );
}

.open-status.is-open .open-status__dot {
	background: var( --color-green );
	box-shadow: 0 0 0 3px rgba( 21, 196, 42, 0.2 );
}

.live-search__error {
	margin: 0;
	font-size: var( --text-subheading );
	font-weight: 300;
}

/* A full postcode: its delivery answer leads the results. */
.live-search__postcode {
	max-width: 50rem;
	margin-bottom: 2.1875rem;
}

.live-search__postcode .postcode-result {
	background: var( --color-grey-light );
}

@media ( max-width: 63.99em ) {
	.live-search__inner {
		padding: 1.5rem var( --edge-pad ) 2rem;
	}

	.live-search__idle {
		flex-direction: column;
		gap: 1.75rem;
	}

	.live-search__summary {
		font-size: 1.25rem;
	}

	.live-search__grid,
	.live-search__grid--no-products .live-search__aside {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2rem;
	}

	ul.search-products {
		grid-template-columns: minmax( 0, 1fr );
	}

	.search-product {
		grid-template-columns: 4rem minmax( 0, 1fr ) auto;
		gap: 0.875rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.live-search__scrim,
	.live-search__panel,
	.search-product__media img,
	.search-link__arrow {
		transition: none;
	}

	.live-search.is-loading .live-search__progress::after {
		animation: none;
		width: 100%;
		opacity: 0.35;
	}
}

/* ------------------------------------------------------------------ */
/* Mini basket                                                         */
/* The live search panel's shell (.live-search classes) with the       */
/* basket in it: search product rows plus a remove button in the wide  */
/* column; a light-grey summary card over the dark help card in the    */
/* aside. main.js opens it from the header basket and after an add.    */
/* ------------------------------------------------------------------ */

html.has-mini-basket {
	overflow: hidden;
}

/* Opened with the masthead scrolled out of view: pinned to the viewport. */
.live-search.is-floating {
	position: fixed;
	top: 0;
}

/* After an add: the product photo on a white card, flown from the gallery
   to the header basket by main.js (positions and timing set there). Over
   the header; never in the way of a click. */
.basket-flyer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	pointer-events: none;
}

.basket-flyer__y,
.basket-flyer__card {
	width: 100%;
	height: 100%;
}

.basket-flyer__card {
	padding: 0.375rem;
	border-radius: var( --radius );
	background: var( --color-white );
	box-shadow: 0 0.75rem 2rem rgba( 54, 66, 69, 0.28 );
}

.basket-flyer__card img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc( var( --radius ) - 2px );
	object-fit: cover;
}

.mini-basket.is-loading .mini-basket__body {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Focus lands on the summary heading when the panel opens. */
.mini-basket [tabindex="-1"]:focus {
	outline: none;
}

.mini-basket__notices {
	display: grid;
	gap: 0.625rem;
	max-width: 50rem;
	margin-bottom: 2.1875rem;
}

.mini-basket__notices[hidden] {
	display: none;
}

.mini-basket__notice {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var( --color-orange );
	background: rgba( 253, 52, 52, 0.08 );
}

/* The summary heading already draws the hairline above the rows. */
ul.search-products.mini-basket__items {
	border-top: 0;
}

.mini-basket-item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1.25rem;
	transition: opacity 0.2s ease;
}

/* The basket page's mobile rows name a "remove" grid area; this row has none
   (without the reset the button fell onto a row of its own at 440). */
.mini-basket-item .mini-basket-item__remove {
	grid-area: auto;
	justify-self: auto;
}

.mini-basket-item.is-removing {
	opacity: 0.4;
}

.mini-basket-item.is-added {
	animation: fwd-basket-added 2.4s ease-out;
}

@keyframes fwd-basket-added {
	from { background: rgba( 253, 52, 52, 0.1 ); }
	to   { background: transparent; }
}

.mini-basket-item__added {
	display: none;
	justify-self: start;
	margin-bottom: 0.25rem;
	padding: 0.1875rem 0.625rem;
	border-radius: var( --radius-pill );
	background: var( --color-orange );
	font-size: var( --text-xs );
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --color-white );
}

.mini-basket-item.is-added .mini-basket-item__added {
	display: inline-block;
}

span.mini-basket-item__link .search-product__title {
	color: inherit;
}

.mini-basket__summary {
	display: grid;
	gap: 1.25rem;
	padding: 1.875rem;
	background: var( --color-grey-light );
}

.mini-basket__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.mini-basket__total dt {
	font-weight: 700;
}

.mini-basket__total dd {
	margin: 0;
	font-size: var( --text-subheading );
	line-height: 1.1;
	font-weight: 600;
	text-align: right;
}

.mini-basket__total .price__suffix {
	display: block;
	margin-top: 0.25rem;
	font-size: var( --text-xs );
	font-weight: 300;
}

/* Free delivery nudge (elements/delivery-nudge.php): "You're only £X away
   from free delivery" over a meter. Lives in the mini basket summary, the
   basket summary card and the checkout order card. */
.delivery-nudge {
	display: grid;
	gap: 0.625rem;
}

.delivery-nudge__text {
	margin: 0;
	font-size: var( --text-small );
	line-height: 1.3;
}

.delivery-nudge__amount .price__suffix {
	font-weight: 300;
}

.delivery-nudge__link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.delivery-nudge__meter {
	display: block;
	height: 0.375rem;
	overflow: hidden;
	border-radius: var( --radius-pill );
	background: rgba( 54, 66, 69, 0.12 );
}

.delivery-nudge__meter span {
	display: block;
	width: var( --progress, 0% );
	height: 100%;
	border-radius: inherit;
	background: var( --color-orange );
	transition: width 0.4s ease;
}

.delivery-nudge.is-free .delivery-nudge__meter span {
	background: var( --color-dark );
}

.mini-basket__note {
	margin: 0;
	font-size: var( --text-small );
	line-height: 1.3;
	color: rgba( 54, 66, 69, 0.7 );
}

.mini-basket__actions {
	display: grid;
	gap: 0.625rem;
}

@media ( max-width: 63.99em ) {
	.mini-basket-item {
		gap: 0.75rem;
	}

	.mini-basket__summary {
		padding: 1.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mini-basket-item,
	.delivery-nudge__meter span {
		transition: none;
	}

	.mini-basket-item.is-added {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mega menu                                                           */
/* The live search panel's shell hung off the primary nav: each top-   */
/* level item with children carries a full-width panel (columns headed */
/* By Type / By Application / By Brand, the help card in the aside —   */
/* Fwd_Mega_Menu_Walker) that main.js opens on                     */
/* hover intent or the item's toggle button. In the mobile drawer the  */
/* same panel sits inline as an accordion.                             */
/* ------------------------------------------------------------------ */

.nav-menu > li {
	display: flex;
	align-items: center;
}

.nav-menu > li.is-open > a {
	font-weight: 700;
}

.nav-menu > li.is-open > a::after {
	transform: scaleX( 1 );
}

.nav-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: inherit;
}

.nav-menu__toggle svg {
	width: 0.625rem;
	height: auto;
	transition: transform 0.15s ease;
}

.nav-menu > li.is-open > .nav-menu__toggle svg {
	transform: rotate( 180deg );
}

/* The nav band is white-on-dark; the panel is the search panel's dark-on-white. */
.mega-menu .live-search__panel {
	color: var( --color-dark );
}

.mega-menu__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 30rem; /* columns · 480 aside, as the search results */
	gap: 3.75rem;
	align-items: start;
}

/* ul. prefix: the ul[class] reset outranks a bare class. */
ul.mega-menu__columns {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 2.5rem 3.75rem;
}

ul.mega-menu__list {
	display: grid;
	gap: 0.625rem;
}

.mega-menu__link {
	display: inline-block;
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	color: var( --color-dark );
	transition: color 0.15s ease;
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
	color: var( --color-orange );
	text-decoration: none;
}

.mega-menu__item.is-current > .mega-menu__link {
	font-weight: 700;
	color: var( --color-orange );
}

@media ( min-width: 64em ) {
	/* Items fill the 66 band, so the pointer's trip down to the panel never leaves them. */
	.nav-menu {
		min-height: 4.125rem;
	}

	.nav-menu > li {
		align-self: stretch;
	}

	/* The toggle is for the keyboard: hidden until it takes focus. */
	.nav-menu__toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.nav-menu__toggle:focus-visible {
		position: static;
		width: 2rem;
		height: 2rem;
		margin-inline-start: 0.375rem;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.mega-menu__inner {
		padding-block: 2.8125rem 3.125rem; /* 45 / 50 */
	}
}

@media ( max-width: 63.99em ) {
	.nav-menu > li {
		flex-wrap: wrap;
	}

	.nav-menu > li > a {
		flex: 1 1 auto;
	}

	.nav-menu__toggle {
		flex: none;
		align-self: stretch;
		width: 3rem;
		height: auto;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	/* Inline in the drawer: no scrim, shadow or aside, white-on-dark. */
	.mega-menu {
		position: static;
		flex-basis: 100%;
		width: 100%;
	}

	.mega-menu .live-search__scrim,
	.mega-menu__aside {
		display: none;
	}

	.mega-menu .live-search__panel {
		max-height: none;
		overflow: visible;
		border-top: 0;
		background: transparent;
		box-shadow: none;
		color: var( --color-white );
		opacity: 1;
		transform: none;
	}

	.mega-menu__inner {
		padding: 0.75rem 0 1rem 1rem;
	}

	.mega-menu__grid,
	ul.mega-menu__columns {
		display: block;
	}

	.mega-menu__group + .mega-menu__group {
		margin-top: 1.25rem;
	}

	ul.mega-menu__list {
		gap: 0.5rem;
	}

	.mega-menu__link {
		color: rgba( 255, 255, 255, 0.85 );
	}

	.mega-menu__link:hover,
	.mega-menu__link:focus-visible,
	.mega-menu__item.is-current > .mega-menu__link {
		color: var( --color-orange );
	}
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* Customer logos strip on white, then the slate footer: brand column  */
/* + three menus, a hairline, the company line and payment marks.      */
/* ------------------------------------------------------------------ */

.customer-logos {
	padding-block: 2.5rem;
	border-top: 1px solid var( --color-line );
	background: var( --color-white );
}

.customer-logos__inner {
	max-width: var( --container );
	margin-inline: auto;
	padding-inline: var( --container-pad );
	text-align: center;
}

.customer-logos__heading {
	margin-bottom: 1.5rem;
	color: var( --color-muted );
	font-size: var( --text-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

ul.customer-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem 3rem;
}

.customer-logos__list img {
	width: auto;
	max-width: 8rem;
	max-height: 3rem;
	object-fit: contain;
	filter: grayscale( 1 );
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.customer-logos__list li:hover img {
	filter: none;
	opacity: 1;
}

.site-footer {
	background: var( --color-slate );
	color: var( --color-white );
	font-size: var( --text-body );
	line-height: 1.6;
}

.site-footer__inner {
	max-width: var( --container );
	margin-inline: auto;
	padding: 4rem var( --container-pad ) 2.5rem;
}

.site-footer a {
	color: inherit;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var( --color-white );
	text-decoration: underline;
	text-decoration-color: var( --color-red );
	text-underline-offset: 0.2em;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: minmax( 0, 1.3fr ) repeat( 3, minmax( 0, 1fr ) );
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
}

.footer-col p + p {
	margin-top: 1rem;
}

.footer-col__logo {
	display: inline-block;
	margin-bottom: 1.25rem;
}

/* The logo's slate letters go white on the slate band; the red stays. */
.footer-col__logo svg {
	display: block;
	width: 12rem;
	height: auto;
}

.footer-col__logo svg [class*="3d6f6859"] {
	fill: var( --color-white );
}

.footer-col__reviews img {
	width: 10rem;
	height: auto;
	border-radius: var( --radius );
}

.footer-col__heading {
	display: block;
	margin-bottom: 1rem;
	color: var( --color-white );
	font-weight: 700;
	list-style: none;
}

.footer-col__heading::-webkit-details-marker {
	display: none;
}

.footer-col__heading::after {
	content: "";
	display: block;
	width: 2rem;
	height: 3px;
	margin-top: 0.625rem;
	background: var( --color-red );
}

ul.footer-menu li + li {
	margin-top: 0.5rem;
}

.footer-menu a {
	color: rgba( 255, 255, 255, 0.85 );
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 2rem;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: var( --text-small );
	line-height: 1.5;
}

.site-footer__legal {
	max-width: 52rem;
}

.site-footer__copyright {
	margin-top: 0.5rem;
}

.site-footer__payments img {
	width: auto;
	max-height: 2.25rem;
	border-radius: 4px;
}

@media ( min-width: 64em ) {
	/* The menus are plain columns on desktop; the summary is just a heading. */
	.footer-col__heading {
		pointer-events: none;
	}
}

@media ( max-width: 63.99em ) {
	.site-footer__columns {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.footer-col--about {
		padding-bottom: 1.5rem;
	}

	.footer-col__details {
		border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	.footer-col__heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding-block: 1rem;
		cursor: pointer;
	}

	.footer-col__heading::after {
		width: 0.625rem;
		height: 0.625rem;
		margin: 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		background: none;
		transform: rotate( 45deg );
		transition: transform 0.2s ease;
	}

	.footer-col__details[open] .footer-col__heading::after {
		transform: rotate( 225deg );
	}

	.footer-col__details .footer-menu {
		padding-bottom: 1rem;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ------------------------------------------------------------------ */
/* Section head: centred 50/60 heading with an optional button pinned  */
/* to the right, tops aligned (Figma y1042: heading 60, button 50).    */
/* ------------------------------------------------------------------ */

.section-head {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.section-head--centred {
	justify-content: center;
	text-align: center;
}

.section-head--centred .section-head__button {
	position: absolute;
	top: 0;
	right: 0;
}

@media ( max-width: 63.99em ) {
	.section-head--centred {
		flex-wrap: wrap;
	}

	.section-head--centred .section-head__button {
		position: static;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Section: features ("Why FWDirect?")                          */
/* 844 orange band: heading 50/60 at +92, three 434² tiles (white 20%) */
/* at +216, 60 apart with a 25 plus centred in each gap, white button  */
/* 43 below the tiles, 102 bottom.                                     */
/* ------------------------------------------------------------------ */

.section--features {
	padding-block: clamp( 3rem, 4.7917vw, 5.75rem ) clamp( 3rem, 5.3125vw, 6.375rem ); /* 92 / 102 */
	text-align: center;
}

.section--features__heading {
	color: inherit;
}

ul.section--features__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 0.75rem, 0.9115vw, 1.09375rem ); /* 17.5 either side of the plus */
	margin-top: clamp( 2.5rem, 3.3333vw, 4rem ); /* 1878 → 1942 = 64 */
}

.section--features__item {
	flex: 0 1 clamp( 14rem, 22.6042vw, 27.125rem ); /* 434 */
	min-width: 0;
}

.section--features__plus {
	flex: none;
	width: 1.5625rem; /* 25 */
	height: 1.5625rem;
	color: var( --color-white );
}

.section--features__plus svg {
	width: 100%;
	height: 100%;
}

.feature-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	/* 60 sides (text is 314 in 434); the comp's content sits ~23 above
	   centre, so the bottom pad carries an extra 46. */
	padding: clamp( 1.5rem, 3.125vw, 3.75rem ) clamp( 1.5rem, 3.125vw, 3.75rem ) clamp( 2.5rem, 5.5208vw, 6.625rem );
	background: rgba( 255, 255, 255, 0.2 );
	color: var( --color-white );
	text-align: center;
	transition: background-color 0.15s ease;
}

a.feature-tile:hover,
a.feature-tile:focus-visible {
	text-decoration: none;
	background: rgba( 255, 255, 255, 0.3 );
}

.feature-tile__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 4.25rem; /* 68 — the tallest icon */
	margin-bottom: clamp( 1.25rem, 2.0833vw, 2.5rem ); /* 40 */
}

.feature-tile__icon img,
.feature-tile__icon svg {
	max-height: 100%;
	width: auto;
}

.feature-tile__title {
	display: block;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.feature-tile__text {
	display: block;
	margin-top: 0.9375rem; /* 15 */
}

.section--features__action {
	margin-top: clamp( 1.5rem, 2.2396vw, 2.6875rem ); /* 43 */
}

/* Stats style (About Us 460:7130, y978–1796): 125 top, intro line 26
   under the heading, 434×360 tiles 69 below, 138 bottom. */
.section--features--stats {
	padding-block: clamp( 3rem, 6.5104vw, 7.8125rem ) clamp( 3rem, 7.1875vw, 8.625rem );
}

.section--features__text {
	max-width: 57.5rem; /* 920 */
	margin: clamp( 1rem, 1.3542vw, 1.625rem ) auto 0; /* 26 */
}

.section--features--stats ul.section--features__list {
	margin-top: clamp( 2.5rem, 3.5938vw, 4.3125rem ); /* 69 */
}

.feature-tile--compact {
	aspect-ratio: auto;
	min-height: clamp( 12rem, 18.75vw, 22.5rem ); /* 360 */
	padding: clamp( 2rem, 4.3229vw, 5.1875rem ) clamp( 1rem, 1.5625vw, 1.875rem ) clamp( 2.5rem, 5.2604vw, 6.3125rem ); /* 83 · 30 (the fleet title runs 372 wide) · 101 */
	justify-content: flex-start;
}

.feature-tile--compact .feature-tile__icon {
	height: 4.375rem; /* 70 */
}

@media ( max-width: 63.99em ) {
	ul.section--features__list {
		flex-direction: column;
		gap: 0.75rem;
	}

	.section--features__item {
		flex-basis: auto;
		width: min( 100%, 27.125rem );
	}

	.feature-tile {
		aspect-ratio: auto;
		padding: 2rem 1.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Carousel primitives: native scroll-snap track + round arrow buttons */
/* (56 orange circle, white arrow) pinned at the gutters.              */
/* ------------------------------------------------------------------ */

.carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
	display: none;
}

.carousel-track > * {
	flex: none;
	scroll-snap-align: start;
}

.carousel-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem; /* 56 */
	height: 3.5rem;
	border-radius: 50%;
	background: var( --color-orange );
	color: var( --color-white );
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.carousel-arrow svg {
	width: 1.125rem;
	height: auto;
}

.carousel-arrow--prev svg {
	transform: scaleX( -1 );
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
	background: var( --color-dark );
}

.carousel-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* No arrows unless the track actually overflows — main.js adds
   is-scrollable after measuring (and on resize). */
[data-carousel]:not( .is-scrollable ) .carousel-arrow {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Section: brands                                                     */
/* 431 white band: heading at +97, logos row centred ~+255 (tallest    */
/* logo 74), arrows 56 at x84 / x1780, track on the 1720 measure with  */
/* four logos spread across 265–1657.                                  */
/* ------------------------------------------------------------------ */

.section--brands {
	padding-block: clamp( 3rem, 5.0521vw, 6.0625rem ) clamp( 3rem, 7.2917vw, 8.75rem ); /* 97 / 140 */
}

.section--brands__carousel {
	position: relative;
	margin-top: clamp( 2rem, 3.1771vw, 3.8125rem ); /* head bottom 2727 → tallest logo 2788 = 61 */
	padding-inline: var( --container-pad );
}

.section--brands__carousel .carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
}

.section--brands__carousel .carousel-arrow--prev {
	left: clamp( 1rem, 4.375vw, 5.25rem ); /* 84 */
}

.section--brands__carousel .carousel-arrow--next {
	right: clamp( 1rem, 4.375vw, 5.25rem );
}

ul.section--brands__track {
	align-items: center;
	justify-content: space-between;
	gap: clamp( 2rem, 6.25vw, 7.5rem );
	max-width: 80.93%; /* 1392 of 1720 → 264…1656 */
	margin-inline: auto;
	min-height: 4.625rem; /* 74 */
}

.section--brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.section--brands__logo {
	display: block;
	color: var( --color-dark );
}

.section--brands__logo img,
.section--brands__logo svg {
	display: block;
	max-height: 4.625rem; /* 74 */
	width: auto;
	max-width: clamp( 8rem, 12.7604vw, 15.3125rem ); /* 245 */
}

@media ( max-width: 63.99em ) {
	.section--brands__carousel {
		padding-inline: var( --edge-pad );
	}

	.section--brands__carousel .carousel-arrow {
		display: none;
	}

	ul.section--brands__track {
		justify-content: flex-start;
		gap: 2.5rem;
		max-width: none;
		scroll-padding-inline: var( --edge-pad );
	}

	.section--brands__logo img,
	.section--brands__logo svg {
		max-height: 3rem;
		max-width: 10rem;
	}
}

/* ------------------------------------------------------------------ */
/* Product tabs + grid + card (bestsellers, later the shop loop)       */
/* Tabs 17/20 100 apart centred, active Bold with a 4px orange rule    */
/* 7 below, on a 1px hairline across the measure. Cards 400 wide on a  */
/* 440 pitch: image box 400×369, text 26 below, button 30 below.       */
/* ------------------------------------------------------------------ */

.product-tabs {
	display: flex;
	justify-content: center;
	gap: clamp( 1.5rem, 5.2083vw, 6.25rem ); /* 100 */
	margin-top: 3rem; /* heading bottom 3924 → tabs 3972 */
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
	overflow-x: auto;
	scrollbar-width: none;
}

.product-tabs::-webkit-scrollbar {
	display: none;
}

.product-tabs__tab {
	position: relative;
	flex: none;
	padding: 0 0 0.5rem; /* text 20 + 7 → rule */
	white-space: nowrap;
	color: var( --color-dark );
}

.product-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 4px;
	background: var( --color-orange );
	opacity: 0;
	transition: opacity 0.15s ease;
}

.product-tabs__tab:hover::after,
.product-tabs__tab:focus-visible::after,
.product-tabs__tab[aria-selected="true"]::after {
	opacity: 1;
}

.product-tabs__tab[aria-selected="true"] {
	font-weight: 700;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 2.5rem; /* 40 */
	margin-top: clamp( 1.5rem, 2.0833vw, 2.5rem ); /* 40 under the tab hairline (Chris, 15 Sep 2026 — the comp's cutouts carried their own headroom) */
}

.product-grid__empty {
	margin-top: 2rem;
	text-align: center;
}

.product-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var( --color-dark );
}

.product-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 400 / 369;
	overflow: hidden;
	margin-bottom: 1.625rem; /* 26 */
}

/* The box owns the ratio; the photo fits inside it whatever its shape. */
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__title {
	margin-top: 0.46875rem; /* 7.5 */
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
}

.product-card__title a:hover,
.product-card__title a:focus-visible {
	color: var( --color-orange );
	text-decoration: none;
}

.product-card__meta,
.product-card__price {
	margin-top: 0.46875rem;
}

.product-card__price {
	font-weight: 700;
}

.product-card__button {
	margin-top: auto; /* bottom-align across a row when a title wraps */
	padding-top: 0;
}

.product-card__meta:last-of-type,
.product-card__price:last-of-type,
.product-card__title:last-of-type {
	margin-bottom: 1.875rem; /* 30 to the button */
}

/* Section: bestsellers — 880 white band: 88 top, 107 bottom. */

.section--bestsellers {
	padding-block: clamp( 3rem, 4.5833vw, 5.5rem ) clamp( 3rem, 5.5729vw, 6.6875rem );
}

@media ( max-width: 63.99em ) {
	.product-tabs {
		justify-content: flex-start;
		gap: 1.5rem;
		padding-inline: 0.25rem;
	}

	.product-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 2rem 1.25rem;
	}
}

@media ( max-width: 39.99em ) {
	.product-card__button {
		align-self: stretch;
	}
}

/* ------------------------------------------------------------------ */
/* Section: advice panel ("Expert Advice")                             */
/* 968 light-grey band; dark panel 1720×574 at +163. House device      */
/* 629×768 from (180, −55) relative to the panel (its plus overhangs   */
/* the panel by 139); photo window 430×552 at (60, 76) of the device,  */
/* so the window's bottom edge sits on the panel's bottom edge.        */
/* Copy column 658 wide from x909, top-aligned at +93: 50/60 heading,  */
/* 15, 32/34 Light sub, 15, 17/20 Light text, 15, bold close, 15,      */
/* buttons 50 (gap 15); 124 left under them (Stage 3 460:4718 —        */
/* the 80/80 heading and 50 paragraph gaps were Stage 1's).            */
/* ------------------------------------------------------------------ */

.section--advice {
	padding-block: clamp( 3rem, 8.4896vw, 10.1875rem ) clamp( 4rem, 12.0833vw, 14.5rem ); /* 163 / 232 */
}

.advice-panel {
	position: relative;
	display: grid;
	grid-template-columns: 47.0349% 1fr; /* copy starts at 809 of 1720 */
	align-items: start;
	min-height: clamp( 20rem, 29.8958vw, 35.875rem ); /* 574 */
}

.advice-panel__device {
	position: relative;
	width: clamp( 14rem, 32.7604vw, 39.3125rem ); /* 629 */
	aspect-ratio: 629 / 768;
	margin-inline-start: clamp( 1rem, 9.375vw, 11.25rem ); /* 180 */
	margin-block: calc( -1 * clamp( 1rem, 2.8646vw, 3.4375rem ) ) calc( -1 * clamp( 2rem, 7.2396vw, 8.6875rem ) ); /* −55 top, −139 bottom */
	/* Anchored to the panel's bottom edge, not its top: the comp puts the
	   house window's bottom on the panel's bottom (the orange base wall and
	   the plus sit on the band below). The device scales with vw but the
	   copy doesn't, so below 1920 the copy column makes the panel taller
	   than the device — anchored at the top the house drifted up into the
	   panel (83px at 1440; Chris, 15 Sep 2026). */
	align-self: end;
	color: var( --color-orange );
}

.advice-panel__device > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* The photo sits in the house's window (430×552 at 60/76 of the 629×768
   device), clipped to the same pentagon. The box is 8px taller than the
   window (560) so the photo tucks under the base wall — at the exact size
   a hairline of panel showed between them (Chris, 17 Sep 2026) — but the
   wall only runs to x363 of the device; right of that is the notch before
   the plus, where the comp shows background, so the clip steps back up to
   the window line there (x301 of the box, 2px inside the wall's end). */
.advice-panel__photo {
	position: absolute;
	left: 9.5389%;  /* 60 / 629 */
	top: 9.8958%;   /* 76 / 768 */
	width: 68.3625%; /* 430 / 629 */
	height: 72.9167%; /* 560 / 768 */
	clip-path: polygon( 50% 0, 100% 41.2%, 100% 98.64%, 70% 98.64%, 70% 100%, 0 100%, 0 41.2% );
	overflow: hidden;
}

.advice-panel__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.advice-panel__copy {
	max-width: 41.125rem; /* 658 */
	padding-block: clamp( 2rem, 4.8438vw, 5.8125rem ) 2rem; /* 93 from the panel top, ~34 below */
	color: var( --color-white );
}

.advice-panel__heading {
	font-size: var( --text-heading ); /* 50/60 */
	line-height: var( --text-heading-lh );
	color: inherit;
}

.advice-panel__sub {
	margin-top: 0.9375rem; /* 15 */
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.advice-panel__text {
	margin-top: 0.9375rem; /* 15 */
	font-weight: 300; /* the comp's body is Light; the bold closer keeps its <strong> */
}

.advice-panel__text p + p {
	margin-top: 0.9375rem; /* 15 */
}

.advice-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem; /* 15 */
	margin-top: 0.9375rem;
}

/* Intro variant (About Us 460:7130, y273–982): 709 grey band with the
   panel 63 down / 116 up (530 tall); device 541×661 at x150, −71 top /
   −60 bottom; copy 786 wide from 42.4% of the panel, vertically centred:
   50/60 heading, 15, 17/20 text. */

.section--advice--intro {
	padding-block: clamp( 2rem, 3.6979vw, 4.4375rem ) clamp( 3rem, 6.0417vw, 7.25rem ); /* 71 (comp 63 — the device's apex would sit under the header) / 116 */
}

.advice-panel--intro {
	grid-template-columns: 42.3659% 1fr; /* 727 / 1716 */
	align-items: center;
	min-height: clamp( 18rem, 27.6042vw, 33.125rem ); /* 530 */
}

.advice-panel--intro .advice-panel__device {
	width: clamp( 12rem, 28.1771vw, 33.8125rem ); /* 541 */
	margin-inline-start: clamp( 1rem, 7.8125vw, 9.375rem ); /* 150 */
	/* −71 top puts the house's feet on the panel's bottom edge with the plus
	   overhanging 60; the band's top padding matches the 71 so the apex
	   lands on the band edge, not under the header (Chris, 15 Sep 2026). */
	margin-block: calc( -1 * clamp( 2rem, 3.6979vw, 4.4375rem ) ) calc( -1 * clamp( 1.5rem, 3.125vw, 3.75rem ) ); /* −71 / −60 */
}

.advice-panel--intro .advice-panel__copy {
	max-width: 49.125rem; /* 786 */
	padding-block: 2rem;
}

.advice-panel--intro .advice-panel__heading {
	font-size: var( --text-heading );
	line-height: var( --text-heading-lh );
}

.advice-panel--intro .advice-panel__text {
	margin-top: 0.9375rem; /* 15 */
}

.advice-panel--intro .advice-panel__text p + p {
	margin-top: 1.25rem;
}

@media ( max-width: 63.99em ) {
	.section--advice {
		padding-block: 3rem 4rem;
	}

	.advice-panel {
		grid-template-columns: 1fr;
		padding: 2rem 1.5rem 2.5rem;
		gap: 2rem;
	}

	.advice-panel__device,
	.advice-panel--intro .advice-panel__device {
		width: min( 100%, 20rem );
		margin: 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Section: link cards ("More From FWDirect")                   */
/* 912 white band: heading at +94, cards 49 below the head, 101 bottom.*/
/* Card 547: grey head 267 (arrow 56 at 18/18, title 32/34 at +102 and */
/* x58, text 17/20 397 wide), photo 547×341.                           */
/* ------------------------------------------------------------------ */

.section--link-cards {
	padding-block: clamp( 3rem, 4.8958vw, 5.875rem ) clamp( 3rem, 5.2604vw, 6.3125rem ); /* 94 / 101 */
}

ul.section--link-cards__list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2.5rem; /* 40 */
	margin-top: 3.0625rem; /* 49 */
}

.link-card {
	display: flex;
	flex-direction: column;
	color: var( --color-dark );
}

.link-card:hover,
.link-card:focus-visible {
	text-decoration: none;
}

.link-card__head {
	position: relative;
	display: block;
	min-height: clamp( 12rem, 13.9063vw, 16.6875rem ); /* 267 */
	padding: clamp( 3.5rem, 5.3125vw, 6.375rem ) clamp( 1.5rem, 3.0208vw, 3.625rem ) 2rem; /* 102 / 58 */
	background: var( --color-grey-light );
}

.link-card__arrow {
	position: absolute;
	top: 1.125rem; /* 18 */
	right: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var( --color-orange );
	color: var( --color-white );
	transition: transform 0.15s ease;
}

.link-card__arrow svg {
	width: 1.125rem;
	height: auto;
}

.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
	transform: translateX( 0.25rem );
}

.link-card__title {
	display: block;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.link-card__text {
	display: block;
	max-width: 24.8125rem; /* 397 */
	margin-top: 0.9375rem; /* 5963 → 5978 */
}

.link-card__media {
	display: block;
	aspect-ratio: 547 / 341;
	overflow: hidden;
}

.link-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 63.99em ) {
	ul.section--link-cards__list {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.link-card__head {
		min-height: 0;
		padding: 4.5rem 1.5rem 1.5rem;
	}
}

/* Posts page (home.php): the basket's page head, posts as link cards, or
   a "coming soon" card in the advice panel's language until there are
   any. No Figma frame. */

.blog-index {
	padding-block: clamp( 2rem, 2.7083vw, 3.25rem ) clamp( 4rem, 6.25vw, 7.5rem ); /* 52 / 120, as the basket */
}

ul.blog-index__list {
	margin-top: 0;
	row-gap: 3.75rem;
}

.blog-soon {
	max-width: 56rem;
	padding: clamp( 2rem, 4.6875vw, 5.625rem ); /* 90 */
	background: var( --color-grey-light );
}

.blog-soon__eyebrow {
	margin-bottom: 0.9375rem;
	font-weight: 700;
	color: var( --color-orange );
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.blog-soon__title {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.blog-soon__text {
	max-width: 41.125rem; /* 658, the advice panel's copy */
	margin-top: 0.9375rem;
	font-weight: 300;
}

.blog-soon__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem;
	margin-top: 1.875rem;
}

/* ------------------------------------------------------------------ */
/* Section: split list (About Us 460:7130, y1796–3504)                 */
/* Photo 786×627 at x172 (72 in from the measure), points column 628   */
/* wide from x1117 with a 25 plus 37 to its left; hairlines 726 wide,  */
/* ~36 above / 40 below; button 36 under the last point. Two in a row  */
/* sit 172 apart; 177 above the first, 105 below the last.             */
/* ------------------------------------------------------------------ */

.section--split-list {
	padding-block: clamp( 3rem, 8.9583vw, 10.75rem ) clamp( 3rem, 5.4688vw, 6.5625rem ); /* 172 / 105 */
}

.section--split-list + .section--split-list {
	padding-top: clamp( 0rem, 3.4896vw, 4.1875rem ); /* 172 − 105 */
}

.section--split-list__inner {
	display: grid;
	grid-template-columns: 49.8837% 1fr; /* 858 (72 pad + 786 photo) · 97 · 765 */
	align-items: end; /* the comp bottom-aligns the photo with the button */
	gap: 5.6395%;
}

.section--split-list--right .section--split-list__inner {
	grid-template-columns: 1fr 48.8372%; /* 798 (72 pad + 726 list) · 82 · 840 photo */
	gap: 4.7674%;
}

.section--split-list__media {
	padding-inline-start: clamp( 0rem, 3.75vw, 4.5rem ); /* 72 */
}

.section--split-list--right .section--split-list__media {
	order: 2;
	padding-inline: 0;
}

.section--split-list--right .section--split-list__copy {
	max-width: 49.875rem; /* 726 + the 72 pad */
	padding-inline-start: clamp( 0rem, 3.75vw, 4.5rem ); /* hairline and plus 72 in (the comp's plus sits at 114, its line at 72) */
}

.section--split-list--right .section--split-list__media img {
	aspect-ratio: 840 / 627; /* the comp crops the right-hand photo wider */
}

.section--split-list__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 627;
	object-fit: cover;
}

.section--split-list__copy {
	max-width: 45.375rem; /* 726 */
}

.section--split-list__heading {
	margin-bottom: 1.5rem;
}

ul.plus-list {
	display: block;
}

.plus-list__item {
	position: relative;
	padding: clamp( 1.5rem, 2.0833vw, 2.5rem ) 0 clamp( 1.5rem, 1.875vw, 2.25rem ) clamp( 2.5rem, 3.2292vw, 3.875rem ); /* 40 · 36 · 62 (25 plus + 37) */
	border-top: 1px solid var( --color-orange );
}

.plus-list__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.plus-list__plus {
	position: absolute;
	left: 0;
	top: calc( clamp( 1.5rem, 2.0833vw, 2.5rem ) + 0.28125rem ); /* centred on the title's 34 line */
	width: 1.5625rem; /* 25 */
	height: 1.5625rem;
	color: var( --color-orange );
}

.plus-list__item:first-child .plus-list__plus {
	top: 0.28125rem;
}

.plus-list__plus svg {
	width: 100%;
	height: 100%;
}

.plus-list__title {
	font-size: clamp( 1.5rem, 1.5625vw, 1.875rem ); /* 30/34 SemiBold */
	line-height: 1.1333;
	font-weight: 600;
	color: var( --color-orange );
}

.plus-list__text {
	max-width: 36.8125rem; /* 589 */
	margin-top: 0.9375rem; /* 15 */
}

.plus-list__text p + p {
	margin-top: 0.75rem;
}

.section--split-list__action {
	margin-top: clamp( 1.5rem, 1.875vw, 2.25rem ); /* 36 */
}

/* Plain style (category "Additional Information", 460:6642 y3871–4743,
   orange): heading 50/60 + 45, headed paragraphs 72 apart without the
   plus or hairlines, white on orange, copy centred on the photo, button
   55 below; 126 top / 119 bottom. */
.section--split-list--plain {
	padding-block: clamp( 3rem, 6.5625vw, 7.875rem ) clamp( 3rem, 6.1979vw, 7.4375rem );
}

.section--split-list--plain .section--split-list__inner {
	align-items: center;
}

.section--split-list--plain .section--split-list__heading {
	margin-bottom: clamp( 1.5rem, 2.3438vw, 2.8125rem ); /* 45 */
}

.section--split-list--plain .plus-list__item {
	padding: 0;
	border-top: 0;
}

.section--split-list--plain .plus-list__item + .plus-list__item {
	margin-top: clamp( 2rem, 3.7292vw, 4.475rem ); /* 71.6 */
}

.section--split-list--plain .plus-list__plus {
	display: none;
}

.section--split-list--plain .section--split-list__action {
	margin-top: clamp( 2rem, 2.8646vw, 3.4375rem ); /* 55 */
}

.section--split-list.bg--orange .plus-list__title,
.section--split-list.bg--orange .section--split-list__heading {
	color: var( --color-white );
}

.section--split-list.bg--orange .plus-list__item {
	border-color: rgba( 255, 255, 255, 0.5 );
}

.section--split-list.bg--orange .plus-list__plus {
	color: var( --color-white );
}

.section--split-list.bg--orange .button {
	background: var( --color-white );
	color: var( --color-orange );
}

.section--split-list.bg--orange .button:hover,
.section--split-list.bg--orange .button:focus-visible {
	background: var( --color-dark );
	color: var( --color-white );
}

@media ( max-width: 63.99em ) {
	.section--split-list__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.section--split-list__media,
	.section--split-list--right .section--split-list__copy {
		padding-inline: 0;
	}

	.section--split-list--right .section--split-list__media {
		order: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Section: photo card (About Us 460:7130, y3504–4273)                 */
/* 769 photo band; 583×571 card centred, 99 top and bottom: icon 87 at */
/* 126, heading 50/60 16 below, text 450 wide 15 below, 44 side pad.   */
/* ------------------------------------------------------------------ */

.section--photo-card {
	position: relative;
	overflow: hidden;
	padding-block: clamp( 3rem, 5.1563vw, 6.1875rem ); /* 99 */
}

.section--photo-card__media {
	position: absolute;
	inset: 0;
}

.section--photo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.section--photo-card__inner {
	position: relative;
	display: flex;
	justify-content: center;
}

.photo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* About's shorter copy lands ~20 under the comp's 126; the category card's longer copy sits ~65 like its comp */
	width: min( 100%, 36.4375rem ); /* 583 */
	min-height: clamp( 20rem, 29.7396vw, 35.6875rem ); /* 571 */
	padding: clamp( 2.5rem, 3.3854vw, 4.0625rem ) clamp( 1.5rem, 2.2917vw, 2.75rem ); /* 65 · 44 */
	text-align: center;
}

.photo-card__icon {
	display: flex;
	justify-content: center;
	height: 5.4375rem; /* 87 */
	margin-bottom: 1rem; /* 16 */
}

.photo-card__icon svg,
.photo-card__icon img {
	height: 100%;
	width: auto;
}

.photo-card__heading {
	color: inherit;
}

.photo-card__text {
	max-width: 28.125rem; /* 450 */
	margin: 0.9375rem auto 0; /* 15 */
}

.photo-card__text p + p {
	margin-top: 0.75rem;
}

.photo-card__text a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.photo-card__action {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Shop archives (category / shop / search) — Figma 460:6642           */
/* Grey band: intro panel (the About intro panel + a delivery-promise   */
/* note) 63 down, sub-category roundels 96 under it, 55 bottom.         */
/* Toolbar: filter labels 16/18 with chevrons, 37 down, hairline 32     */
/* below; "40 Items" / sort row 20 / 21 around 18px text; grid 24 below.*/
/* ------------------------------------------------------------------ */

.shop-intro {
	padding-block: clamp( 2rem, 3.6979vw, 4.4375rem ) 1.25rem; /* 71 (comp 63, see .section--advice--intro) / 19.5 under two-line roundel labels */
}

/* Intro panel: slate copy card beside the category's banner photo, which
   is rounded with a red corner tab (FWD's nod to the Insulation Plus panel). */
.shop-hero {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	min-height: 22rem;
	border-radius: var( --radius );
	background: var( --color-slate );
	color: var( --color-white );
	overflow: hidden;
}

.shop-hero--no-image {
	grid-template-columns: minmax( 0, 1fr );
	min-height: 0;
}

.shop-hero__copy {
	align-self: center;
	padding: clamp( 1.75rem, 4vw, 4rem );
}

.shop-hero__heading {
	margin-bottom: 1rem;
	color: var( --color-white );
	font-size: var( --text-heading );
	line-height: var( --text-heading-lh );
	font-weight: 700;
}

.shop-hero__heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: 0.875rem;
	background: var( --color-red );
}

.shop-hero__text {
	max-width: 40rem;
	color: rgba( 255, 255, 255, 0.88 );
	line-height: 1.6;
}

.shop-hero__text p + p {
	margin-top: 0.875rem;
}

.shop-hero__text a {
	color: var( --color-white );
	text-decoration: underline;
}

.shop-hero__note {
	max-width: 40rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.2 );
	font-size: var( --text-small );
}

.shop-hero__media {
	position: relative;
	min-height: 16rem;
}

.shop-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-hero__media::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 0.5rem;
	background: var( --color-red );
}

@media ( max-width: 63.99em ) {
	.shop-hero {
		grid-template-columns: minmax( 0, 1fr );
	}

	.shop-hero__media {
		order: -1;
		min-height: 12rem;
	}
}

/* The legacy category copy under the grid. */
.shop-bottom-copy .rich-text {
	max-width: 52rem;
	line-height: 1.65;
}

.shop-bottom-copy .rich-text :is( h2, h3 ) {
	margin: 1.5rem 0 0.75rem;
	font-weight: 700;
}

.shop-bottom-copy .rich-text :is( h2 ) {
	font-size: var( --text-subheading );
}

.shop-bottom-copy .rich-text p + p,
.shop-bottom-copy .rich-text ul {
	margin-top: 0.875rem;
}

.shop-bottom-copy .rich-text ul {
	padding-left: 1.25rem;
	list-style: disc;
}

/* Sub-categories (Chris, 5 Oct 2026 — the roundels read as Insulation
   Plus): chips on the grey band — a 56 square photo, the name and its
   product count, an arrow — wrapping onto as many rows as they need. */
.shop-subcats {
	margin-top: clamp( 2rem, 3vw, 3rem );
}

.shop-subcats__title {
	margin: 0 0 0.875rem;
	font-size: var( --text-small );
	font-weight: 600;
	color: var( --color-slate );
}

ul.shop-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.subcat-chip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 100%;
	padding: 0.375rem 1rem 0.375rem 0.375rem;
	border: 1px solid var( --color-line );
	border-radius: var( --radius );
	background: var( --color-white );
	color: var( --color-slate );
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.subcat-chip:hover,
.subcat-chip:focus-visible {
	border-color: var( --color-slate );
	box-shadow: 0 6px 16px rgba( 54, 66, 69, 0.08 );
	text-decoration: none;
}

.subcat-chip__media {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	border-radius: 4px;
	background: var( --color-grey );
}

/* Packshots on white sit whole; the grey shows round a photo that doesn't fill. */
.subcat-chip__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var( --color-white );
}

.subcat-chip__text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.subcat-chip__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
}

.subcat-chip__count {
	font-size: var( --text-xs );
	color: var( --color-muted );
}

.subcat-chip__arrow {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-left: 0.25rem;
	color: var( --color-red );
	transition: transform 0.15s ease;
}

.subcat-chip:hover .subcat-chip__arrow {
	transform: translateX( 0.1875rem );
}

/* Toolbar --------------------------------------------------------- */

.shop-archive .product-grid,
.shop-archive .woocommerce-pagination {
	transition: opacity 0.2s ease;
}

/* main.js sets aria-busy while it fetches the next set of results. */
.shop-archive[aria-busy="true"] .product-grid,
.shop-archive[aria-busy="true"] .woocommerce-pagination {
	opacity: 0.4;
	pointer-events: none;
}

.shop-toolbar__count:focus {
	outline: none;
}

.shop-archive {
	padding-bottom: clamp( 2rem, 1.8229vw, 2.1875rem ); /* 35 to the next band */
}

/* "Products below" cue: an orange pill fixed at the foot of the viewport
   while the grid is still below the fold and the page hasn't scrolled
   (Josh, 23 Sep 2026). main.js drops [hidden] and toggles .is-visible. */

.scroll-cue {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var( --button-h );
	padding: 0 0.5rem 0 1.5rem;
	border-radius: var( --radius-pill );
	background: var( --color-orange );
	box-shadow: 0 0.5rem 1.5rem rgba( 54, 66, 69, 0.25 );
	color: var( --color-white );
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	opacity: 0;
	transform: translate( -50%, 1rem );
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.scroll-cue[hidden] {
	display: none;
}

.scroll-cue.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
	pointer-events: auto;
}

.scroll-cue:focus-visible {
	outline: 2px solid var( --color-dark );
	outline-offset: 3px;
}

.scroll-cue__arrow {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var( --color-white );
	color: var( --color-orange );
}

.scroll-cue__arrow svg {
	width: 0.875rem;
	height: auto;
	transform: rotate( 90deg );
}

@media ( prefers-reduced-motion: no-preference ) {
	.scroll-cue.is-visible .scroll-cue__arrow svg {
		animation: fwd-cue 1.6s ease-in-out infinite;
	}
}

@keyframes fwd-cue {
	0%, 60%, 100% { translate: 0 0; }
	30% { translate: 0 0.25rem; }
}

.shop-toolbar {
	padding-top: clamp( 1.5rem, 1.9271vw, 2.3125rem ); /* 37 */
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

.shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem clamp( 1.5rem, 5.7292vw, 6.875rem ); /* 110 */
	padding-bottom: 2rem; /* 18 text + 32 = the hairline at 50 */
	border-bottom: 1px solid rgba( 54, 66, 69, 0.2 );
}

.filter {
	position: relative;
}

.filter__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem; /* label → chevron ~7 */
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	color: var( --color-dark );
}

.filter__summary::-webkit-details-marker {
	display: none;
}

/* Open / active labels go bold without shifting their neighbours
   (.hold-bold — Chris, 17 Sep 2026). */
.filter__label {
	display: inline-block;
}

.filter[open] > .filter__summary,
.filter[data-active] > .filter__summary {
	font-weight: 700;
}

.filter__chevron {
	width: 0.5625rem;
	height: 0.375rem;
	flex: none;
	color: var( --color-dark );
	transition: transform 0.15s ease;
}

.filter[open] .filter__chevron {
	transform: rotate( 180deg );
}

/* The dropdown panel eases in rather than popping. */
@media ( prefers-reduced-motion: no-preference ) {
	.filter[open] > .filter__panel {
		animation: fwd-drop 0.18s ease both;
	}
}

@keyframes fwd-drop {
	from {
		opacity: 0;
		transform: translateY( -0.375rem );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.filter__panel {
	position: absolute;
	z-index: 20;
	top: calc( 100% + 0.75rem );
	left: 0;
	min-width: 14rem;
	padding: 1rem;
	background: var( --color-white );
	box-shadow: 0 0.5rem 1.5rem rgba( 54, 66, 69, 0.15 );
}

ul.filter__options {
	display: grid;
	gap: 0.5rem;
	max-height: 18rem;
	overflow-y: auto;
}

.filter__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
	white-space: nowrap;
}

.filter__option input {
	accent-color: var( --color-orange );
	width: 1rem;
	height: 1rem;
	margin: 0;
}

.filter__range {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.filter__range input {
	width: 6rem;
	height: 2.375rem;
	padding: 0 0.75rem;
	border: 1px solid var( --color-dark );
	border-radius: var( --radius-pill );
	font: inherit;
}

.filter__apply {
	min-height: 2.375rem;
	margin-top: 0.75rem;
	padding-inline: 1.25rem;
}

/* Option counts and the active-filter chips (Chris, 17 Sep 2026). */
.filter__count {
	font-weight: 300;
	opacity: 0.6;
}

.filter__count::before {
	content: "(";
}

.filter__count::after {
	content: ")";
}

ul.shop-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	padding-top: 1rem;
}

.shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.125rem; /* 34 */
	padding: 0 0.875rem;
	border: 1px solid var( --color-dark );
	border-radius: var( --radius-pill );
	font-size: var( --text-small );
	line-height: 1.15;
	color: var( --color-dark );
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shop-chip__label {
	font-weight: 300;
}

.shop-chip__value {
	font-weight: 700;
}

.shop-chip__remove {
	margin-inline-start: 0.125rem;
	font-size: 1.125rem;
	line-height: 1;
}

.shop-chip:hover,
.shop-chip:focus-visible {
	text-decoration: none;
	border-color: var( --color-orange );
	background: var( --color-orange );
	color: var( --color-white );
}

.shop-chips__clear {
	margin-inline-start: 0.5rem;
	font-size: var( --text-small );
	font-weight: 300;
	text-decoration: underline;
}

.shop-toolbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0 1.3125rem; /* 20 / 21 */
	border-bottom: 1px solid rgba( 54, 66, 69, 0.2 );
}

.shop-toolbar__sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.shop-toolbar__select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 1.125rem 0 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var( --color-dark );
	cursor: pointer;
	text-align: right;
}

.shop-toolbar__sort .filter__chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
}

.shop-toolbar__go {
	min-height: 2.375rem;
	padding-inline: 1.25rem;
}

/* Grid ------------------------------------------------------------ */

ul.product-grid--archive {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); /* minmax(0) — the spec strip's nowrap labels must not widen a column */
	gap: clamp( 2.5rem, 3.0729vw, 3.6875rem ) 2.5rem; /* 59 between rows, 40 between cards */
	margin-top: 1.5rem; /* 24 */
}

/* Archive card (Chris, 5 Oct 2026 — the striped spec rows and the SKU
   read as Insulation Plus): the product page's language at card size. A
   square photo on a hairline, brand, name and size line, the key specs as
   divided tiles (the product page's spec strip), swatches or the sizes a
   group comes in, then the price on the foot so a row's prices line up. */
ul.product-grid--archive > li {
	display: flex;
}

.product-card--archive {
	flex: 1 1 auto;
	min-width: 0;
}

.product-card--archive .product-card__media {
	aspect-ratio: 1;
	margin-bottom: 1rem;
	border: 1px solid var( --color-line );
	border-radius: var( --radius );
	background: var( --color-white );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-card__media--photo img {
	object-fit: cover;
}

.product-card--archive:hover .product-card__media {
	border-color: var( --color-slate );
	box-shadow: 0 6px 16px rgba( 54, 66, 69, 0.08 );
}

.product-card__body {
	width: 100%;
}

.product-card__brand {
	margin: 0 0 0.25rem;
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var( --color-red-dark );
}

.product-card--archive .product-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.product-card--archive .product-card__meta {
	margin: 0.25rem 0 0;
	font-size: var( --text-small );
	line-height: 1.4;
	color: var( --color-muted );
}

.product-card--archive .product-card__title:last-of-type,
.product-card--archive .product-card__meta:last-of-type {
	margin-bottom: 0;
}

/* Key specs: up to three tiles side by side on hairlines, a hairline
   between each; label over value as on the product page. */
.card-specs {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	width: 100%;
	margin: 0.875rem 0 0;
	border-top: 1px solid var( --color-line );
	border-bottom: 1px solid var( --color-line );
}

.card-specs--1 {
	grid-template-columns: minmax( 0, 1fr );
}

.card-specs--2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.card-specs__item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	padding: 0.625rem 0.625rem 0.625rem 0;
}

.card-specs__item + .card-specs__item {
	padding-left: 0.625rem;
	border-left: 1px solid var( --color-line );
}

.card-specs__icon {
	display: flex;
	width: 1.125rem;
	height: 1.125rem;
	margin-bottom: 0.25rem;
	color: var( --color-red );
}

.card-specs__icon svg {
	max-width: 100%;
	max-height: 100%;
}

.card-specs__label {
	font-size: 0.6875rem; /* 11 */
	line-height: 1.25;
	color: var( --color-muted );
}

.card-specs__value {
	margin: 0;
	font-size: var( --text-small );
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* A group card: its colours as swatches, or the sizes it comes in as
   small pills linking to each. */
.product-card__group-label {
	margin: 0 0 0.375rem;
	font-size: var( --text-xs );
	color: var( --color-muted );
}

.product-card__options {
	margin-top: 0.75rem;
}

ul.product-card__options-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.product-card__options-list a {
	display: block;
	padding: 0.25rem 0.625rem;
	border: 1px solid var( --color-line );
	border-radius: var( --radius-pill );
	font-size: var( --text-xs );
	font-weight: 500;
	color: var( --color-slate );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.product-card__options-list a:hover,
.product-card__options-list a:focus-visible {
	border-color: var( --color-slate );
}

.product-card__options-more a {
	border-style: dashed;
	color: var( --color-muted );
}

/* Price on the foot: "From" small over the amount, the price per m² as
   the product page's red-tint pill. */
.product-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	width: 100%;
	margin-top: auto;
	padding-top: 1rem;
}

.product-card--archive .product-card__price--split {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.375rem;
	margin: 0;
	line-height: 1.1;
}

.product-card__from {
	flex-basis: 100%;
	margin-bottom: 0.125rem;
	font-size: var( --text-xs );
	color: var( --color-muted );
}

.product-card__amount {
	font-size: 1.375rem; /* 22 */
	font-weight: 700;
}

.product-card__suffix {
	font-size: 0.8125rem; /* 13 */
	color: var( --color-muted );
}

/* Pagination: WooCommerce's list, as pills. */
.woocommerce-pagination {
	margin-top: 3rem;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap; /* 264 insulation products = 17 pages, which overflowed 440 */
	justify-content: center;
	gap: 0.5rem;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: var( --radius-pill );
	color: var( --color-dark );
}

.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus-visible {
	text-decoration: none;
	background: var( --color-grey-light );
}

.woocommerce-pagination .page-numbers.current {
	background: var( --color-orange );
	color: var( --color-white );
}

@media ( max-width: 63.99em ) {
	.shop-intro {
		padding-block: 2rem 2.5rem;
	}

	.advice-panel__note {
		margin-inline-start: 0;
	}

	/* One swipeable line of chips, running to the screen's edges. */
	ul.shop-subcats__list {
		flex-wrap: nowrap;
		margin-inline: calc( -1 * var( --container-pad ) );
		padding: 0.25rem var( --container-pad ) 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var( --container-pad );
		scrollbar-width: none;
	}

	ul.shop-subcats__list::-webkit-scrollbar {
		display: none;
	}

	.shop-subcats__item {
		flex: none;
		scroll-snap-align: start;
	}

	.subcat-chip__name {
		white-space: nowrap;
	}

	.shop-filters {
		gap: 0.75rem 1.5rem;
	}

	ul.product-grid--archive {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 2rem 1.25rem;
	}

	.product-card--archive {
		min-width: 0;
	}

	/* Dropdown panels sit in the flow under their label rather than
	   floating off the edge of a narrow screen. */
	.filter__panel {
		position: static;
		min-width: 0;
		padding: 0.75rem 0 0.25rem;
		box-shadow: none;
	}

	.filter[open] {
		flex-basis: 100%;
	}
}

@media ( max-width: 47.99em ) {
	.advice-panel__note {
		flex-direction: column;
		align-items: flex-start;
	}

	.advice-panel__note-icon {
		margin-inline-start: 0;
	}

	/* Two cards a row is too narrow for tiles side by side: the specs
	   become label / value lines on hairlines. */
	.card-specs,
	.card-specs--2,
	.card-specs--3 {
		grid-template-columns: minmax( 0, 1fr );
	}

	.card-specs__item,
	.card-specs__item + .card-specs__item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0 0.5rem;
		padding: 0.375rem 0;
		border-left: 0;
	}

	.card-specs__item + .card-specs__item {
		border-top: 1px solid var( --color-line );
	}

	.card-specs__icon {
		display: none;
	}

	.product-card__amount {
		font-size: 1.1875rem;
	}
}

/* WooCommerce notices (its stylesheet is not loaded): a pill-cornered bar
   in the brand colours, the "View basket" link as a small button. Errors
   are a ul: ul. prefix, as the ul[class] reset outranks a bare class. */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
ul.woocommerce-error,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.5rem;
	border-left: 4px solid var( --color-orange );
	background: rgba( 253, 52, 52, 0.06 );
	list-style: none;
}

.woocommerce-error {
	border-left-color: var( --color-dark );
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	min-height: 2.375rem;
	padding-inline: 1.25rem;
	font-size: var( --text-nav );
}

/* ------------------------------------------------------------------ */
/* Section: hero                                                       */
/* 680-tall photo band. White card 574×574 at (100, 55): 52 side pad,  */
/* heading 80/80 from y45, copy 17/20, button 50; the plus device      */
/* (230) overlaps the card's bottom-right corner and is clipped by the */
/* band. Badge 236 top-right, 41 down / 89 in (Stage 3, 460:4718).     */
/* ------------------------------------------------------------------ */

.section--hero {
	position: relative;
	overflow: hidden;
	min-height: clamp( 30rem, 35.4167vw, 42.5rem ); /* 680 */
	background: var( --color-dark );
	color: var( --color-dark );
}

.section--hero__media {
	position: absolute;
	inset: 0;
}

.section--hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 80%; /* the Stage 3 warehouse shot is cropped low: forklift on the right, roof mostly out */
}

/* More than one photo: stacked, main.js "Hero rotation" crossfades them.
   Without JS (or with reduced motion) the first simply stays. */
[data-hero-rotate] .section--hero__image {
	opacity: 0;
	transition: opacity 1.2s ease;
}

[data-hero-rotate] .section--hero__image.is-active {
	opacity: 1;
}

.section--hero__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: inherit;
	padding: clamp( 2rem, 2.9688vw, 3.5625rem ) var( --container-pad ) clamp( 2rem, 2.6042vw, 3.125rem ); /* 57 / 50 */
}

/* Card on the right: the photo's subject stays clear on the left. */
.section--hero--card-right .section--hero__inner {
	justify-content: flex-end;
}

.section--hero--card-right .section--hero__image {
	object-position: 20% 60%;
}

.section--hero__card {
	position: relative;
	width: clamp( 20rem, 29.8438vw, 35.8125rem ); /* 573 */
	min-height: clamp( 20rem, 29.8438vw, 35.8125rem );
	padding: clamp( 2rem, 2.3438vw, 2.8125rem ) clamp( 1.75rem, 2.7083vw, 3.25rem ) clamp( 2.5rem, 2.6042vw, 3.125rem ); /* 45 · 52 · 50 */
	background: var( --color-white );
}

.section--hero__heading {
	font-size: clamp( 2.75rem, 4.1667vw, 5rem ); /* 80 */
	line-height: 1;
	font-weight: 700;
	text-wrap: wrap; /* keep the comp's breaks rather than balancing */
}

.section--hero__heading-main,
.section--hero__heading-accent {
	display: block;
}

.section--hero__heading-accent {
	color: var( --color-orange );
}

.section--hero__text {
	max-width: 27.375rem; /* 438 */
	margin-top: clamp( 1.25rem, 1.3542vw, 1.625rem ); /* 695 → 721 */
}

.section--hero__text p + p {
	margin-top: 0.75rem;
}

.section--hero__card .button {
	margin-top: clamp( 1rem, 1.1458vw, 1.375rem ); /* 781 → 803 */
}

.section--hero__badge {
	position: absolute;
	top: clamp( 1.25rem, 2.1354vw, 2.5625rem ); /* 41 */
	right: clamp( 1.25rem, 4.6354vw, 5.5625rem ); /* 89 */
	width: clamp( 7rem, 12.2917vw, 14.75rem ); /* 236 */
	display: block;
}

.section--hero__badge-image {
	width: 100%;
	height: auto;
}

@media ( max-width: 63.99em ) {
	.section--hero {
		min-height: 0;
	}

	.section--hero__inner {
		padding-inline: var( --edge-pad );
		padding-top: clamp( 4rem, 22vw, 8rem ); /* let some photo show above the card */
	}

	.section--hero__card {
		width: 100%;
		min-height: 0;
	}

	.section--hero__badge {
		width: 5rem;
		top: 1rem;
		right: var( --edge-pad );
	}
}

/* ------------------------------------------------------------------ */
/* Basket · Checkout · Account                                         */
/* No Figma frames — the Stage 3 language: 50/60 page heading, 1720    */
/* measure, hairline rows, light-grey cards, pill fields and buttons.  */
/* ------------------------------------------------------------------ */

.woocommerce-cart .site-main > .section,
.woocommerce-checkout .site-main > .section,
.woocommerce-account .site-main > .section {
	padding-block: clamp( 2rem, 2.7083vw, 3.25rem ) clamp( 4rem, 6.25vw, 7.5rem ); /* 52 / 120 */
}

/* Page head: heading left, count / back link right, on the baseline. */
.shop-page__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: clamp( 1.5rem, 2.6042vw, 3.125rem ); /* 50 */
}

.shop-page__title {
	font-size: var( --text-heading );
	line-height: var( --text-heading-lh );
}

.shop-page__count {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.shop-page__back {
	font-weight: 300;
}

.shop-page__back::before {
	content: "\2190\00a0";
}

/* Forms (WooCommerce markup: p.form-row > label + [wrapper] > input) -- */

.woocommerce .form-row {
	margin: 0 0 1.25rem;
}

.woocommerce .form-row label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
	font-weight: 700;
}

.woocommerce .form-row .required {
	color: var( --color-orange );
	text-decoration: none;
}

.woocommerce .form-row .optional {
	font-weight: 300;
}

.woocommerce .woocommerce-input-wrapper {
	display: block;
}

/* Selects are scoped to Woo's p.form-row fields: a bare `.woocommerce select`
   also caught the archive toolbar's sort select and the product card's
   variation select (both live on pages with the woocommerce body class)
   and outranked their own rules, drawing them as 50-tall white pills with
   the chevron sat on the border (bit once). */
.woocommerce .input-text,
.woocommerce .form-row select,
.woocommerce textarea {
	display: block;
	width: 100%;
	min-height: var( --button-h );
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	background: var( --color-white );
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	color: var( --color-dark );
}

.woocommerce textarea {
	min-height: 8rem;
	border-radius: 1.5rem;
	resize: vertical;
}

.woocommerce .input-text::placeholder,
.woocommerce textarea::placeholder {
	color: var( --color-grey-mid );
}

.woocommerce .input-text:focus,
.woocommerce .form-row select:focus,
.woocommerce textarea:focus {
	outline: none;
	border-color: var( --color-orange );
	box-shadow: 0 0 0 1px var( --color-orange );
}

.woocommerce .form-row.woocommerce-invalid .input-text,
.woocommerce .form-row.woocommerce-invalid select {
	border-color: var( --color-orange );
}

/* The stepper's number input carries Woo's .qty class; keep it the
   stepper's 39px cell (width: auto here let it grow and pushed the +
   button under the line total, bit once). */
.woocommerce .input-text.qty {
	display: inline-block;
	width: 2.4375rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Two-column field pairs (Woo's form-row-first / form-row-last). */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 1.25rem;
}

.woocommerce .form-row-wide,
.woocommerce .form-row.notes {
	grid-column: 1 / -1;
}

.woocommerce .form-row.form-row-first,
.woocommerce .form-row.form-row-last {
	float: none;
	width: auto;
}

/* Checkbox rows (remember me, ship elsewhere, create account, terms). */
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce .form-row label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	font-weight: 400;
}

.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var( --color-orange );
}

.woocommerce .form-row .button {
	margin: 0;
}

/* Country: WooCommerce prints a single ship-to country as text. */
.woocommerce .form-row strong {
	display: block;
	min-height: var( --button-h );
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	background: var( --color-grey-light );
	font-weight: 400;
}

/* select2 / selectWoo (state dropdowns), styled as the same pill. */
.woocommerce .select2-container .select2-selection--single {
	height: var( --button-h );
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	background: var( --color-white );
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 1.5rem;
	line-height: var( --button-h );
	color: var( --color-dark );
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: var( --button-h );
	right: 1rem;
}

/* Basket ------------------------------------------------------------ */

.basket__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 33.9375rem; /* 543 (the area card) */
	gap: clamp( 2rem, 3.125vw, 3.75rem );
	align-items: start;
}

ul.basket-items {
	border-top: 1px solid rgba( 54, 66, 69, 0.15 );
}

.basket-item {
	display: grid;
	grid-template-columns: 7.5rem minmax( 0, 1fr ) 9rem 8.5625rem 8rem 2.5rem; /* image · text · price · stepper · total · remove */
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.basket-item__media {
	display: block;
	aspect-ratio: 1;
	background: rgba( 0, 0, 0, 0.02 );
}

.basket-item__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.basket-item__title {
	font-weight: 700;
}

.basket-item__title a {
	color: inherit;
}

.basket-item__meta,
.basket-item .variation {
	margin-top: 0.25rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
	font-weight: 300;
}

.basket-item .variation {
	display: block;
}

.basket-item .variation p {
	display: inline;
}

/* Item data ("Bulk price: 10% off (100–199)") as one line: WooCommerce's
   dl.variation puts the key in a dt and the value in a dd (which the browser
   indents 40px). */
.basket-item .variation dt,
.basket-item .variation dd,
.checkout-review .variation dt,
.checkout-review .variation dd {
	display: inline;
	margin: 0;
}

.basket-item .variation dd,
.checkout-review .variation dd {
	margin-inline-start: 0.25rem;
}

.checkout-review .variation,
.checkout-review .wc-item-meta {
	display: block;
	font-size: var( --text-small );
	line-height: 1.1429;
	font-weight: 300;
}

.checkout-review .variation p,
.checkout-review .wc-item-meta p {
	display: inline;
}

/* The pay page's item meta (form-pay.php): one line per entry, label at
   the body weight like the basket's. */
.checkout-review .wc-item-meta li {
	display: block;
}

.checkout-review .wc-item-meta-label {
	font-weight: 400;
}

.basket-item__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
}

.basket-item__suffix {
	font-size: var( --text-small );
	font-weight: 300;
}

.basket-item__total {
	font-size: 1.375rem; /* 22 Bold, like the archive card */
	line-height: 1.1;
	font-weight: 700;
	text-align: right;
}

.basket-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: 50%;
	color: var( --color-dark );
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.basket-item__remove svg {
	width: 0.8125rem;
	height: 0.8125rem;
	transform: rotate( 45deg ); /* the plus icon, turned into an × */
}

.basket-item__remove:hover,
.basket-item__remove:focus-visible {
	background: var( --color-orange );
	border-color: var( --color-orange );
	color: var( --color-white );
}

/* Under the rows: coupon pill left, Continue shopping / Update basket right. */
.basket__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
}

.basket-coupon {
	display: flex;
	align-items: stretch;
	width: min( 100%, 22rem );
	height: var( --button-h );
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	overflow: hidden;
}

.basket-coupon:focus-within {
	border-color: var( --color-orange );
	box-shadow: 0 0 0 1px var( --color-orange );
}

.woocommerce .basket-coupon__input {
	min-height: 0;
	min-width: 0;
	border: 0;
	border-radius: 0;
	padding-right: 0.5rem;
	box-shadow: none;
}

.woocommerce .basket-coupon__input:focus {
	box-shadow: none;
}

.basket-coupon__submit {
	padding: 0 1.5rem;
	font-weight: 700;
	color: var( --color-orange );
}

.basket-coupon__submit:hover,
.basket-coupon__submit:focus-visible {
	color: var( --color-dark );
}

.basket__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem;
}

/* Summary card: light grey, sticky beside the rows. */
.basket-summary,
.checkout-summary {
	position: sticky;
	top: 1.5rem;
	padding: clamp( 1.5rem, 2.0833vw, 2.5rem );
	background: var( --color-grey-light );
}

.basket-summary__title,
.checkout-summary__title {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.basket-summary__table,
.checkout-review {
	width: 100%;
	margin-top: 1.25rem;
	border-collapse: collapse;
}

.basket-summary__table th,
.basket-summary__table td,
.checkout-review th,
.checkout-review td {
	padding: 0.875rem 0;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.basket-summary__table td,
.checkout-review td {
	text-align: right;
	font-weight: 700;
}

/* Amounts never break; the labels and notes around them may. */
.basket-summary__table .woocommerce-Price-amount,
.checkout-review .woocommerce-Price-amount {
	white-space: nowrap;
}

.basket-summary__table .order-total th,
.basket-summary__table .order-total td,
.checkout-review .order-total th,
.checkout-review .order-total td {
	padding-top: 1.25rem;
	border-bottom: 0;
	font-size: clamp( 1.5rem, 1.5625vw, 1.875rem ); /* 30/34 */
	line-height: 1.1333;
	font-weight: 600;
}

.basket-summary__table .order-total .tax_label,
.basket-summary__table .order-total .includes_tax,
.checkout-review .order-total .includes_tax {
	display: block;
	font-size: var( --text-small );
	line-height: 1.15;
	font-weight: 300;
}

.basket-summary__table small,
.checkout-review .shipped_via {
	display: block;
	font-size: var( --text-small );
	font-weight: 300;
}

/* Shipping methods list inside the totals (radios when more than one). */
ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

ul.woocommerce-shipping-methods li {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
}

ul.woocommerce-shipping-methods label {
	font-weight: 700;
}

ul.woocommerce-shipping-methods li + li {
	margin-top: 0.375rem;
}

.woocommerce-shipping-destination,
.woocommerce-shipping-contents {
	margin-top: 0.5rem;
	font-size: var( --text-small );
	line-height: 1.3;
	font-weight: 300;
}

.woocommerce-shipping-destination strong {
	font-weight: 700;
}

/* Shipping calculator (basket): the link, then a stacked form. */
.woocommerce-shipping-calculator {
	text-align: right;
}

.shipping-calculator-button {
	font-weight: 400;
	text-decoration: underline;
}

.shipping-calculator-form {
	margin-top: 1rem;
	text-align: left;
	font-weight: 400;
}

.shipping-calculator-form .form-row {
	margin-bottom: 0.75rem;
}

.shipping-calculator-form .button {
	width: 100%;
}

/* Basket card type (Chris, 5 Oct 2026: it read as squashed at 416 wide).
   One step down from the shared checkout sizes: 24 title, 16 rows, 24 total;
   labels nowrap so "Estimated Delivery" keeps to one line. */
.basket-summary {
	padding: clamp( 1.5rem, 1.6667vw, 2rem );
}

.basket-summary .basket-summary__title {
	font-size: 1.5rem;
	line-height: 1.2;
}

.basket-summary .basket-summary__table {
	margin-top: 1rem;
}

.basket-summary__table th,
.basket-summary__table td {
	padding: 0.75rem 0;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

.basket-summary__table th {
	padding-right: 1rem;
	white-space: nowrap;
}

.basket-summary .basket-summary__table .order-total th,
.basket-summary .basket-summary__table .order-total td {
	padding-top: 1rem;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
}

/* Delivery, in the basket card and the checkout's order card: one
   full-width cell (woocommerce/cart/cart-shipping.php) with the label, a
   pill dropdown, then (basket only) the address line. */
.basket-summary__table .order-delivery td,
.checkout-review .order-delivery td {
	text-align: left;
	font-weight: 400;
}

.order-delivery__label {
	display: block;
	margin-bottom: 0.5rem;
}

.order-delivery__field {
	position: relative;
}

.order-delivery__select {
	display: block;
	width: 100%;
	height: 2.75rem;
	padding: 0 2.75rem 0 1.25rem;
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	background: var( --color-white );
	-webkit-appearance: none;
	appearance: none;
	font-size: var( --text-nav );
	font-weight: 600;
	color: var( --color-dark );
	text-overflow: ellipsis;
	cursor: pointer;
}

.order-delivery__select:focus {
	outline: none;
	border-color: var( --color-orange );
	box-shadow: 0 0 0 1px var( --color-orange );
}

.order-delivery__chevron {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.6875rem;
	height: 0.4375rem;
	transform: translateY( -50% );
	color: var( --color-dark );
	pointer-events: none;
}

.order-delivery__single {
	font-weight: 700;
}

/* Checkout card: label and dropdown on one line like the other rows
   (Chris, 5 Oct 2026); the basket card keeps them stacked. */
.checkout-review .order-delivery td {
	padding-block: 0.5rem;
}

.checkout-review .order-delivery__row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.checkout-review .order-delivery__label {
	flex: none;
	margin-bottom: 0;
}

.checkout-review .order-delivery__field {
	flex: 1;
	min-width: 0;
}

.checkout-review .order-delivery__single {
	flex: 1;
	text-align: right;
}

.order-delivery .woocommerce-shipping-destination {
	margin-top: 0.625rem;
	line-height: 1.4;
}

.order-delivery .woocommerce-shipping-destination strong {
	font-weight: 400;
}

.order-delivery .woocommerce-shipping-calculator {
	margin-top: 0.25rem;
	text-align: left;
}

.order-delivery .shipping-calculator-button {
	font-size: var( --text-small );
}

.basket-summary .ppcp-messages {
	margin-bottom: 0.75rem;
}

.basket-summary__proceed {
	margin-top: 1.5rem;
}

/* Free delivery nudge under the totals, above Proceed / inside the checkout
   table's last row (a plain cell, not a totals row). */
.basket-summary .delivery-nudge {
	margin-top: 1.25rem;
}

.checkout-review .delivery-nudge-row td {
	padding: 0 0 0.25rem;
	border-bottom: 0;
	text-align: left;
	font-weight: 400;
}

.basket-summary__checkout {
	width: 100%;
}

/* Cross-sells: "You may also need", four cards under the layout. */
.basket-cross {
	margin-top: clamp( 3rem, 5.2083vw, 6.25rem ); /* 100 */
}

.basket-cross__heading {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

ul.basket-cross__grid {
	margin-top: 2rem;
}

ul.basket-cross__grid > li {
	display: flex;
}

ul.basket-cross__grid .product-card {
	flex: 1;
}

/* Empty basket. */
.basket__empty-text {
	margin-bottom: 1.5rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

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

.checkout-page__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 38.75rem; /* 620 */
	gap: clamp( 2rem, 3.125vw, 3.75rem );
	align-items: start;
}

.checkout-page__customer .col-1,
.checkout-page__customer .col-2 {
	float: none;
	width: auto;
}

.checkout-page__shipping,
.woocommerce-additional-fields {
	margin-top: 1.5rem;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-account-fields h3 {
	margin-bottom: 1.5rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

/* "Ship to a different address?" is an h3 holding a checkbox label. */
.woocommerce-shipping-fields h3 label {
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	font-weight: 700;
}

.woocommerce-account-fields {
	margin-top: 1rem;
}

.woocommerce-account-fields .create-account {
	margin-top: 1rem;
}

/* The "Already registered? / Have a coupon?" toggles WooCommerce prints
   above the form, and the forms they reveal. */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
	margin-bottom: 1rem;
}

.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
}

/* Scoped to the checkout: the account page's Sign in card uses the same
   WooCommerce form class, and these rules indented and narrowed it there
   (Chris, 17 Sep 2026). */
.checkout-page form.woocommerce-form-login,
.checkout-page form.checkout_coupon {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var( --color-grey-light );
}

.woocommerce form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}

.woocommerce form.checkout_coupon .form-row {
	flex: 1 1 14rem;
	margin: 0;
}

.woocommerce form.checkout_coupon p:first-child {
	flex-basis: 100%;
	margin: 0;
}

.checkout-page form.woocommerce-form-login .form-row {
	max-width: 30rem;
}

/* Order review rows: SKU small orange over the name, quantity in orange. */
.checkout-review thead th {
	padding-top: 0;
	font-size: var( --text-small );
	line-height: 1.15;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.checkout-review thead th.product-total {
	text-align: right;
}

.checkout-review__qty {
	color: var( --color-orange );
	white-space: nowrap;
}

.checkout-review tbody td.product-name {
	text-align: left;
	font-weight: 400;
}

/* Payment methods: one per row on hairlines, description in a white box. */
.woocommerce-checkout-payment {
	margin-top: 1.5rem;
}

ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.wc_payment_methods > li {
	padding: 1rem 0;
	border-top: 1px solid rgba( 54, 66, 69, 0.15 );
}

ul.wc_payment_methods > li:first-child {
	border-top: 0;
}

ul.wc_payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	cursor: pointer;
}

ul.wc_payment_methods label img {
	max-height: 1.5rem;
	width: auto;
}

ul.wc_payment_methods .payment_box {
	margin-top: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	background: var( --color-white );
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

ul.wc_payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout-payment .place-order {
	margin: 1.25rem 0 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1.25rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

.woocommerce-privacy-policy-text {
	font-size: var( --text-small );
	line-height: 1.3;
	font-weight: 300;
}

/* Register card: the privacy note WooCommerce prints before the button
   needs room above the button (it had none, Chris, 15 Sep 2026). */
.woocommerce-form-register .woocommerce-privacy-policy-text {
	margin: 0 0 1.5rem;
}

.woocommerce-terms-and-conditions-wrapper .form-row {
	margin-bottom: 0;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
	margin: 0 0 0.875rem;
}

/* The terms tick: box beside the first line, the asterisk straight after the
   words. WooCommerce puts an &nbsp; between them, which in a flex row became
   its own item and pushed the asterisk off to the right. */
.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox {
	display: block;
	position: relative;
	padding-left: 2rem;
	font-size: var( --text-nav );
	line-height: 1.375;
}

.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox input[type="checkbox"] {
	position: absolute;
	top: 0.0625rem;
	left: 0;
}

.woocommerce-checkout-payment #place_order {
	width: 100%;
	min-height: var( --button-h-lg );
}

/* checkout.js dims the summary while it recalculates (blockUI). */
.blockUI.blockOverlay {
	background: var( --color-grey-light ) !important;
	opacity: 0.6 !important;
}

/* Order received. */
.order-received__lead {
	max-width: 44rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

ul.order-received__overview {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 1.25rem;
	margin-top: 2rem;
}

ul.order-received__overview li {
	padding: 1.25rem 1.5rem;
	background: var( --color-grey-light );
}

ul.order-received__overview li > span {
	display: block;
	font-size: var( --text-small );
	line-height: 1.15;
	font-weight: 300;
}

ul.order-received__overview strong {
	display: block;
	margin-top: 0.375rem;
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
}

ul.order-received__overview .email strong {
	overflow-wrap: anywhere;
}

ul.order-received__overview .woocommerce-Price-amount {
	white-space: nowrap;
}

.order-received__actions {
	display: flex;
	gap: 0.9375rem;
}

/* Order / account tables (order details, orders list, view order):
   the tech-table pattern — hairlines, even rows tinted 5% orange. */
.woocommerce table.woocommerce-table,
.woocommerce table.woocommerce-orders-table {
	width: 100%;
	margin-top: 1.5rem;
	border-collapse: collapse;
}

.woocommerce table.woocommerce-table th,
.woocommerce table.woocommerce-table td,
.woocommerce table.woocommerce-orders-table th,
.woocommerce table.woocommerce-orders-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.woocommerce-table thead th,
.woocommerce table.woocommerce-orders-table thead th {
	padding-top: 0;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
	font-weight: 700;
}

.woocommerce table.woocommerce-table tbody tr:nth-child( even ),
.woocommerce table.woocommerce-orders-table tbody tr:nth-child( even ) {
	background: rgba( 253, 52, 52, 0.05 );
}

.woocommerce table.woocommerce-table tfoot th,
.woocommerce table.woocommerce-table tfoot td {
	font-weight: 700;
}

.woocommerce table td.woocommerce-table__product-total,
.woocommerce table td.woocommerce-orders-table__cell-order-total,
.woocommerce table th.woocommerce-table__product-total,
.woocommerce table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.woocommerce table .woocommerce-orders-table__cell-order-actions .button {
	min-height: 2.375rem;
	padding-inline: 1.25rem;
	font-size: var( --text-nav );
}

.woocommerce table .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 0.5rem;
}

.woocommerce-order-details__title,
.woocommerce-customer-details h2,
.woocommerce-column__title,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin-top: 2.5rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.woocommerce-customer-details .woocommerce-columns,
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 18rem, 1fr ) );
	gap: 2.5rem;
}

.woocommerce-customer-details .woocommerce-column,
.woocommerce-Address {
	float: none;
	width: auto;
}

.woocommerce-customer-details address,
.woocommerce-Address address {
	margin-top: 1rem;
	padding: 1.5rem;
	background: var( --color-grey-light );
	font-style: normal;
	line-height: 1.6;
	font-weight: 300;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0.5rem 0 0;
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin-top: 0;
}

.woocommerce-Address-title .edit {
	font-weight: 300;
	text-decoration: underline;
}

.woocommerce-column--1 h2,
.woocommerce-column--2 h2 {
	margin-top: 0;
}

/* Account ----------------------------------------------------------- */

/* Signed out: Sign in / Create an account cards. */
.account-auth__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2.5rem;
}

.account-auth__grid .col-1,
.account-auth__grid .col-2 {
	float: none;
	width: auto;
}

.account-auth__card {
	padding: clamp( 1.5rem, 2.5vw, 3rem );
	background: var( --color-grey-light );
}

.account-auth__heading {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.account-auth__intro,
.account-auth__note {
	margin: 0.75rem 0 1.5rem;
	font-weight: 300;
}

.account-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.account-auth__lost {
	font-size: var( --text-nav );
	font-weight: 300;
	text-decoration: underline;
}

/* Signed in: nav card left, content right. */
.account__layout {
	display: grid;
	grid-template-columns: 18.75rem minmax( 0, 1fr ); /* 300 */
	gap: clamp( 2rem, 3.125vw, 3.75rem );
	align-items: start;
}

.account-nav {
	position: sticky;
	top: 1.5rem;
	padding: 1rem 0;
	background: var( --color-grey-light );
}

ul.account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-nav__link {
	display: block;
	padding: 0.75rem 2rem;
	border-left: 3px solid transparent;
	color: var( --color-dark );
	transition: border-color 0.15s ease;
}

.account-nav__link:hover,
.account-nav__link:focus-visible,
.account-nav__item.is-active .account-nav__link {
	border-left-color: var( --color-orange );
	font-weight: 700;
	text-decoration: none;
}

.account__section {
	margin-bottom: 1.5rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.account__content > p {
	margin-bottom: 1rem;
}

.account-dashboard__greeting {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.account-dashboard__greeting a {
	text-decoration: underline;
}

/* Dashboard tiles: the link-card head (arrow, title, text) without the photo. */
ul.account-tiles {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 2.5rem;
	margin-top: 2rem;
}

.account-tile__link {
	position: relative;
	display: block;
	min-height: 14rem;
	padding: 1.125rem 1.5rem 1.5rem;
	background: var( --color-grey-light );
	color: var( --color-dark );
}

.account-tile__link:hover,
.account-tile__link:focus-visible {
	text-decoration: none;
}

.account-tile__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var( --color-orange );
	color: var( --color-white );
	transition: transform 0.2s ease;
}

.account-tile__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.account-tile__link:hover .account-tile__arrow,
.account-tile__link:focus-visible .account-tile__arrow {
	transform: translateX( 0.25rem );
}

.account-tile__title {
	display: block;
	margin-top: 2rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 300;
}

.account-tile__text {
	display: block;
	margin-top: 0.75rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
}

/* Account forms (edit account, edit address, lost password). */
.woocommerce-EditAccountForm fieldset {
	margin-top: 2rem;
}

.woocommerce-EditAccountForm legend {
	margin-bottom: 1rem;
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 700;
}

.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
	max-width: 40rem;
}

.woocommerce-address-fields__field-wrapper {
	max-width: 40rem;
}

.woocommerce-EditAccountForm .form-row > span:not(.required):not(.optional),
.woocommerce-EditAccountForm .form-row em {
	display: block;
	margin-top: 0.375rem;
	font-size: var( --text-small );
	font-weight: 300;
}

.woocommerce-ResetPassword,
.woocommerce-form-lost-password-confirmation {
	max-width: 30rem;
}

.woocommerce-ResetPassword p:first-child {
	margin-bottom: 1.5rem;
	font-weight: 300;
}

.woocommerce-Pagination {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.woocommerce-order-details .order-again,
.woocommerce-MyAccount-content .order-again {
	margin-top: 1.5rem;
}

.woocommerce-Message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* Tablet / mobile --------------------------------------------------- */

@media ( max-width: 79.99em ) {
	.basket__layout,
	.checkout-page__layout {
		grid-template-columns: minmax( 0, 1fr ) 22rem;
	}

	.basket-item {
		grid-template-columns: 5.5rem minmax( 0, 1fr ) 7rem 8.5625rem 6.5rem 2.5rem;
		gap: 1rem;
	}
}

@media ( max-width: 63.99em ) {
	.basket__layout,
	.checkout-page__layout,
	.account__layout,
	.account-auth__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.basket-summary,
	.checkout-summary,
	.account-nav {
		position: static;
	}

	/* Rows reflow: image spans, text + remove on the first line, price on
	   the second, stepper + total on the third. */
	.basket-item {
		grid-template-columns: 5rem minmax( 0, 1fr ) auto; /* auto: the line total shares the remove column */
		grid-template-areas:
			"media text remove"
			"media price price"
			"media qty total";
		gap: 0.75rem 1rem;
		align-items: start;
	}

	.basket-item__media { grid-area: media; }
	.basket-item__text  { grid-area: text; }
	.basket-item__price { grid-area: price; }
	.basket-item__qty   { grid-area: qty; }
	.basket-item__total { grid-area: total; align-self: center; }
	.basket-item__remove { grid-area: remove; justify-self: end; }

	.basket__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.basket-coupon {
		width: 100%;
	}

	.basket__buttons .button {
		flex: 1;
	}

	ul.account-tiles {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.25rem;
	}

	.account-tile__link {
		min-height: 0;
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Account tables stack into label / value rows. */
	.woocommerce table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce table.woocommerce-orders-table tr {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
	}

	.woocommerce table.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.25rem 0.5rem;
		border: 0;
		text-align: right;
	}

	.woocommerce table.woocommerce-orders-table td::before {
		content: attr( data-title );
		font-weight: 700;
		text-align: left;
	}

	.woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}
}

/* ------------------------------------------------------------------ */
/* Section: rich text — policy pages (Delivery, Returns & Refunds)     */
/* No Figma frame: 50/60 heading left, long copy right on the 1720     */
/* measure; lists take the About points' orange plus and hairlines.    */
/* ------------------------------------------------------------------ */

.section--rich-text__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 57.5rem ); /* copy 920 */
	gap: 1.5rem clamp( 2rem, 5.2083vw, 6.25rem );
	align-items: start;
}

.section--rich-text__heading {
	max-width: 36rem;
}

.prose--long {
	font-size: var( --text-body );
	line-height: 1.5294; /* 17/26 — long copy needs more than the comp's 17/20 */
}

.prose--long > * + * {
	margin-top: 1.25rem;
}

.prose--long h3,
.prose--long h4 {
	margin-top: 2.5rem;
	font-size: clamp( 1.25rem, 1.3021vw, 1.5625rem ); /* 25/30 */
	line-height: 1.2;
	font-weight: 600;
}

.prose--long :is( h3, h4 ):first-child {
	margin-top: 0;
}

.prose--long strong {
	font-weight: 700;
}

.prose--long a,
.info-tabs__panel .prose a {
	text-decoration: underline;
	text-decoration-color: var( --color-orange );
	text-underline-offset: 0.2em;
}

.prose--long a:hover,
.prose--long a:focus-visible,
.info-tabs__panel .prose a:hover,
.info-tabs__panel .prose a:focus-visible {
	color: var( --color-orange );
}

/* Bullets: the About points' 25 orange plus (drawn smaller) on orange hairlines. */
.prose--long ul {
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba( 253, 52, 52, 0.35 );
}

.prose--long ul > li {
	position: relative;
	padding: 1.125rem 0 1.125rem 2.625rem;
	border-bottom: 1px solid rgba( 253, 52, 52, 0.35 );
}

.prose--long ul > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: calc( 1.125rem + 0.3em );
	width: 1rem;
	height: 1rem;
	background: var( --color-orange );
	-webkit-mask: url( ../img/icons/icon-plus.svg ) center / contain no-repeat;
	mask: url( ../img/icons/icon-plus.svg ) center / contain no-repeat;
}

.prose--long ol {
	padding-left: 1.25rem;
	list-style: decimal;
}

/* Delivery rates: service rows × price either side of the free threshold. */
.delivery-rates {
	overflow-x: auto;
}

.prose--long > .delivery-rates {
	margin-block: 2rem;
}

.info-tabs__panel .prose .delivery-rates {
	margin-block: 1.25rem;
}

.delivery-rates__table {
	width: 100%;
	min-width: 26rem;
	border-collapse: collapse;
	border-top: 1px solid rgba( 54, 66, 69, 0.2 );
	font-size: var( --text-body );
	line-height: 1.3;
}

.delivery-rates__table th,
.delivery-rates__table td {
	padding: 0.875rem 1.25rem;
	text-align: left;
	vertical-align: middle;
	font-weight: 400;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.delivery-rates__table thead th {
	background: rgba( 253, 52, 52, 0.1 );
	font-weight: 700;
}

.delivery-rates__table tbody tr:nth-child( even ) {
	background: rgba( 253, 52, 52, 0.05 );
}

.delivery-rates__name {
	display: block;
	font-weight: 700;
}

.delivery-rates__lead {
	display: block;
	margin-top: 0.125rem;
	font-size: var( --text-small );
	font-weight: 300;
}

.delivery-rates__table td {
	font-size: clamp( 1.0625rem, 1.0417vw, 1.25rem ); /* 20 */
	font-weight: 600;
	white-space: nowrap;
}

.delivery-rates__suffix,
.delivery-rates__table thead .delivery-rates__suffix {
	font-size: var( --text-small );
	font-weight: 300;
}

.delivery-rates__free {
	color: var( --color-orange );
	font-weight: 700;
}

/* Product tab: tighter, on the band's 5% orange. */
.delivery-rates--compact .delivery-rates__table {
	font-size: var( --text-nav );
	background: var( --color-white );
}

.delivery-rates--compact .delivery-rates__table th,
.delivery-rates--compact .delivery-rates__table td {
	padding: 0.625rem 0.875rem;
}

.delivery-rates--compact .delivery-rates__table td {
	font-size: var( --text-body );
}

.delivery-tab__intro {
	font-weight: 700;
}

/* Postcode checker in the tab: between the rates and the shared copy,
   the header search pill's dress (white, dark hairline, orange focus). */
.delivery-tab__check {
	margin-block: 1.75rem 2rem;
}

.delivery-tab__check-heading {
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	font-weight: 700;
}

.postcode-check--light .postcode-form {
	margin-top: 0.75rem;
	border-color: var( --color-dark );
	background: var( --color-white );
	color: var( --color-dark );
}

.postcode-check--light .postcode-form__input::placeholder {
	color: var( --color-grey-mid );
}

.postcode-check--light .postcode-form:focus-within {
	box-shadow: 0 0 0 2px var( --color-orange );
}

.postcode-check--light .postcode-form__submit:hover,
.postcode-check--light .postcode-form__submit:focus-visible {
	color: var( --color-orange );
}

/* The answer card is white; on the pale band it needs an edge. */
.postcode-check--light .postcode-result {
	border: 1px solid rgba( 54, 66, 69, 0.12 );
}

@media ( max-width: 64em ) {
	.section--rich-text__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 48em ) {
	.delivery-rates__table {
		min-width: 0;
	}

	.delivery-rates__table th,
	.delivery-rates__table td {
		padding: 0.625rem 0.5rem;
	}

	.delivery-rates__table td {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Section: contact — Customer Services (no Figma frame)               */
/* Copy + details left, the form on a light-grey card right, on the    */
/* 1720 measure. Details are rows on hairlines with the link card's    */
/* orange circles (48 here); fields are the checkout's 50 pills.       */
/* ------------------------------------------------------------------ */

.section--contact__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 51.25rem ); /* form card 820 */
	gap: 2.5rem clamp( 2rem, 5.2083vw, 6.25rem );
	align-items: start;
}

.section--contact__inner--single {
	grid-template-columns: minmax( 0, 57.5rem );
}

.section--contact__copy {
	max-width: 48rem;
}

.section--contact__text {
	margin-top: 1.5rem;
}

/* ul. prefix: the ul[class] reset outranks a bare class. */
ul.contact-details {
	margin-top: 2.5rem;
	border-top: 1px solid rgba( 54, 66, 69, 0.15 );
}

.contact-details__row {
	display: grid;
	grid-template-columns: 3rem minmax( 0, 1fr );
	grid-template-areas:
		"icon label"
		"icon value";
	column-gap: 1.25rem;
	align-items: start; /* a multi-line address keeps its icon by the label */
	padding-block: 1.125rem;
	border-bottom: 1px solid rgba( 54, 66, 69, 0.15 );
}

.contact-details__icon {
	grid-area: icon;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var( --color-orange );
	color: var( --color-white );
}

.contact-details__icon svg {
	width: 1.375rem;
	height: auto;
}

.contact-details__label {
	grid-area: label;
	font-size: var( --text-small );
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-orange );
}

.contact-details__value {
	grid-area: value;
	margin-top: 0.25rem;
	font-size: clamp( 1.0625rem, 1.1458vw, 1.375rem ); /* 22 */
	line-height: 1.3;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.contact-details__value a:hover,
.contact-details__value a:focus-visible {
	color: var( --color-orange );
}

.contact-details__note {
	display: block;
	margin-top: 0.375rem;
	font-size: var( --text-small );
	line-height: 1.3;
	font-weight: 300;
}

/* The form card. Gravity Forms ships no CSS here (gform_disable_css). */
.contact-form {
	padding: clamp( 1.5rem, 3.125vw, 3.75rem ); /* 60 */
	background: var( --color-grey-light );
}

.contact-form__heading {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.contact-form__text {
	margin-top: 0.75rem;
	font-weight: 300;
}

.contact-form .gform_wrapper {
	margin-top: 1.875rem;
}

.contact-form .gform_heading,
.contact-form .gform_required_legend {
	display: none;
}

.contact-form .gform_fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.25rem;
}

.contact-form .gfield {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact-form .gfield--width-half {
	grid-column: auto / span 1;
}

.contact-form .gfield_label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var( --text-nav );
	line-height: var( --text-nav-lh );
	font-weight: 700;
}

.contact-form .gfield_required {
	margin-inline-start: 0.25rem;
	color: var( --color-orange );
	font-weight: 400;
}

.contact-form .gfield input:not( [type="checkbox"] ):not( [type="radio"] ),
.contact-form .gfield textarea {
	display: block;
	width: 100%;
	min-height: var( --button-h );
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba( 54, 66, 69, 0.3 );
	border-radius: var( --radius-pill );
	background: var( --color-white );
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	color: var( --color-dark );
}

.contact-form .gfield textarea {
	min-height: 10rem;
	border-radius: 1.5rem;
	resize: vertical;
}

.contact-form .gfield input:focus,
.contact-form .gfield textarea:focus {
	outline: none;
	border-color: var( --color-orange );
	box-shadow: 0 0 0 1px var( --color-orange );
}

.contact-form .gfield_error input:not( [type="checkbox"] ):not( [type="radio"] ),
.contact-form .gfield_error textarea {
	border-color: var( --color-orange );
}

.contact-form .gfield_description {
	margin-top: 0.375rem;
	font-size: var( --text-small );
	line-height: 1.3;
}

.contact-form .gfield_validation_message,
.contact-form .validation_message {
	color: var( --color-orange );
	font-weight: 700;
}

.contact-form .gform_validation_errors {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var( --color-orange );
	background: var( --color-white );
}

.contact-form .gform_validation_errors h2 {
	font-size: var( --text-body );
	line-height: var( --text-body-lh );
	font-weight: 700;
}

/* Honeypot: Gravity Forms' own CSS normally hides it. */
.contact-form .gform_validation_container,
.contact-form .gfield--type-honeypot {
	position: absolute !important;
	left: -9000px;
}

.contact-form .gform_footer {
	margin-top: 1.875rem;
}

.contact-form .gform_button {
	min-width: 12rem;
}

.contact-form .gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var( --color-orange );
	background: var( --color-white );
	font-weight: 700;
}

.contact-form .gform_ajax_spinner {
	margin-inline-start: 0.75rem;
	vertical-align: middle;
}

@media ( max-width: 64em ) {
	.section--contact__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 48em ) {
	.contact-form .gfield--width-half {
		grid-column: 1 / -1;
	}
}

/* Pages without sections (page.php fallback — the legal pages). */
.page-fallback__body {
	max-width: 57.5rem; /* 920, the rich text section's copy */
}

.page-fallback__body h2 {
	margin-top: 2.5rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

/* Archive card: price per m² and a colour group's swatches. */
.product-card__m2 {
	margin: 0;
	padding: 0.25rem 0.625rem;
	border-radius: var( --radius );
	background: var( --color-red-tint );
	color: var( --color-red-dark );
	font-size: var( --text-small );
	font-weight: 600;
	white-space: nowrap;
}

.product-card__m2 span {
	font-size: var( --text-xs );
	font-weight: 500;
}

.product-card__swatches {
	margin-top: 0.75rem;
}

ul.product-card__swatches-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.product-card__swatches-list a {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var( --color-white );
	border-radius: 50%;
	background: var( --color-grey ) center / cover no-repeat;
	box-shadow: 0 0 0 1px var( --color-line );
	transition: box-shadow 0.15s ease;
}

.product-card__swatches-list a:hover,
.product-card__swatches-list a:focus-visible {
	box-shadow: 0 0 0 2px var( --color-red );
}

.product-card__swatches-list .product-card__swatches-more a {
	display: grid;
	place-items: center;
	width: auto;
	min-width: 1.75rem;
	padding: 0 0.375rem;
	border: 0;
	border-radius: var( --radius-pill );
	box-shadow: none;
	color: var( --color-muted );
	font-size: var( --text-xs );
	font-weight: 600;
	text-decoration: none;
}

/* Toolbar in FWD colours: ticked values as red-tint chips, active filters underlined red. */
ul.shop-chips a,
.shop-chips a {
	border-color: var( --color-red );
	background: var( --color-red-tint );
	color: var( --color-slate );
}

ul.shop-chips a:hover,
ul.shop-chips a:focus-visible {
	background: var( --color-red );
	color: var( --color-white );
}

.shop-toolbar details.filter[data-active] > summary .filter__label,
.shop-toolbar details.filter[open] > summary .filter__label {
	text-decoration: underline;
	text-decoration-color: var( --color-red );
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45em;
}

.shop-toolbar__count {
	color: var( --color-muted );
}

/* Section: call to action band. */
.section--cta-band {
	padding-block: clamp( 2.5rem, 4vw, 4rem );
}

.section--cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
}

.section--cta-band__heading {
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.section--cta-band__text {
	max-width: 44rem;
	margin-top: 0.5rem;
}

/* Section: comparison table (the [comparison] shortcode). */
.section--comparison {
	padding-block: var( --section-pad );
}

.section--comparison__heading {
	margin-bottom: 1rem;
}

.section--comparison__intro {
	max-width: 48rem;
	margin-bottom: 2rem;
}

.section--comparison__table {
	overflow-x: auto;
}

/* Advice panel, FWD version: the photo fills the left half (no house
   device), rounded panel, red corner tab like the shop intro. */
.advice-panel {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr );
	align-items: stretch;
	min-height: 24rem;
	border-radius: var( --radius );
	overflow: hidden;
}

.advice-panel:not( :has( .advice-panel__media ) ) {
	grid-template-columns: minmax( 0, 1fr );
}

.advice-panel__media {
	position: relative;
	min-height: 16rem;
}

.advice-panel__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.advice-panel__media::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 0.5rem;
	background: var( --color-red );
}

.advice-panel .advice-panel__copy {
	align-self: center;
	max-width: none;
	padding: clamp( 2rem, 4vw, 4rem );
}

.section--features__list {
	gap: clamp( 1rem, 2vw, 2rem );
}

@media ( max-width: 63.99em ) {
	.advice-panel {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Section: team. */
.section--team {
	padding-block: var( --section-pad );
}

.section--team__heading {
	margin-bottom: 2rem;
	text-align: center;
}

ul.section--team__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );
	gap: 1.5rem;
}

.team-card {
	overflow: hidden;
	border-radius: var( --radius );
	background: var( --color-white );
	box-shadow: 0 0 0 1px var( --color-line );
}

.team-card__photo {
	aspect-ratio: 4 / 3;
	background: var( --color-grey );
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.team-card__body {
	padding: 1.25rem 1.25rem 1.5rem;
}

.team-card__name {
	font-size: 1.25rem;
	font-weight: 700;
}

.team-card__role {
	margin-top: 0.25rem;
	color: var( --color-red );
	font-size: var( --text-small );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.team-card__text {
	margin-top: 0.75rem;
	color: var( --color-slate-2 );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.team-card__text p + p {
	margin-top: 0.625rem;
}

/* Long copy carried from the old pages: email addresses break rather than
   push the page sideways, and embedded video scales to the column. */
.prose {
	overflow-wrap: anywhere;
}

.prose iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-block: 1.5rem;
	border: 0;
	border-radius: var( --radius );
}

/* Section / element: FAQs — an accordion on a band (slate by default). */
.section--faqs {
	padding-block: var( --section-pad );
}

.section--faqs__inner,
.section--faqs .section__inner {
	max-width: 62rem;
}

.section--faqs__heading {
	margin-bottom: 1.5rem;
}

.faq-list {
	border-top: 1px solid var( --faq-line, var( --color-line ) );
}

.bg--slate .faq-list,
.bg--dark .faq-list,
.bg--red .faq-list {
	--faq-line: rgba( 255, 255, 255, 0.2 );
}

.faq {
	border-bottom: 1px solid var( --faq-line, var( --color-line ) );
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.125rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question:hover {
	color: var( --color-red );
}

.bg--slate .faq__question:hover,
.bg--red .faq__question:hover {
	color: inherit;
	text-decoration: underline;
}

.faq__chevron {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var( --color-red );
	transition: transform 0.2s ease;
}

.bg--red .faq__chevron {
	color: var( --color-white );
}

.faq[open] .faq__chevron {
	transform: rotate( 180deg );
}

.faq__answer {
	padding-bottom: 1.25rem;
	max-width: 52rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.faq__answer p + p,
.faq__answer ul,
.faq__answer ol {
	margin-top: 0.75rem;
}

.faq__answer ul {
	padding-left: 1.25rem;
	list-style: disc;
}

.bg--slate .faq__answer,
.bg--dark .faq__answer {
	color: rgba( 255, 255, 255, 0.85 );
}

.bg--slate .faq__answer a,
.bg--dark .faq__answer a {
	color: var( --color-white );
	text-decoration: underline;
}

.section--faqs__actions {
	margin-top: 2rem;
}

/* Rich text with no heading: one readable column, not the heading's slot. */
.section--rich-text__inner:not( :has( .section--rich-text__heading ) ) {
	display: block;
}

.section--rich-text__inner:not( :has( .section--rich-text__heading ) ) .section--rich-text__body {
	max-width: 52rem;
	margin-inline: auto;
}

/* [comparison]: the underlay comparison table. */
.comparison-table {
	overflow-x: auto;
	border-radius: var( --radius );
	box-shadow: 0 0 0 1px var( --color-line );
}

.comparison-table table {
	width: 100%;
	min-width: 48rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.comparison-table th,
.comparison-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --color-line );
}

.comparison-table thead th {
	background: var( --color-slate );
	color: var( --color-white );
	font-weight: 600;
	white-space: nowrap;
}

.comparison-table tbody tr:nth-child( even ) {
	background: var( --color-grey );
}

.comparison-table tbody th a {
	color: var( --color-slate );
	font-weight: 600;
}

.comparison-table tbody th a:hover {
	color: var( --color-red );
}

/* Blog listing and posts. */
.blog-index {
	padding-block: var( --section-pad );
}

.blog-index__head {
	max-width: 46rem;
	margin-bottom: 2.5rem;
}

.blog-index__intro {
	margin-top: 0.75rem;
	color: var( --color-muted );
}

ul.blog-index__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 18rem, 1fr ) );
	gap: 2rem 1.5rem;
}

.post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var( --radius );
	background: var( --color-white );
	box-shadow: 0 0 0 1px var( --color-line );
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.post-card__link:hover,
.post-card__link:focus-visible {
	box-shadow: 0 0 0 2px var( --color-red );
	text-decoration: none;
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var( --color-grey );
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	display: grid;
	gap: 0.5rem;
	padding: 1.25rem;
}

.post-card__date {
	color: var( --color-red );
	font-size: var( --text-small );
	font-weight: 600;
}

.post-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.post-card__excerpt {
	color: var( --color-slate-2 );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.post-single__head {
	padding-block: clamp( 2.5rem, 5vw, 4.5rem );
}

.post-single__inner {
	max-width: 52rem;
}

.post-single__meta {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	color: var( --color-muted );
	font-size: var( --text-small );
}

.post-single__meta a {
	color: var( --color-red );
	font-weight: 600;
}

.post-single__image {
	margin-block: 2rem;
}

.post-single__image img {
	width: 100%;
	height: auto;
	border-radius: var( --radius );
}

.post-single .entry-content {
	padding-block: 1rem 2.5rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.entry-content :is( h2, h3 ) {
	margin: 2rem 0 0.75rem;
	font-weight: 700;
	line-height: 1.25;
}

.entry-content h2 {
	font-size: var( --text-subheading );
}

.entry-content :is( p, ul, ol ) + :is( p, ul, ol ) {
	margin-top: 1rem;
}

.entry-content ul {
	padding-left: 1.25rem;
	list-style: disc;
}

.entry-content ol {
	padding-left: 1.25rem;
	list-style: decimal;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var( --radius );
}

.entry-content a {
	color: var( --color-red );
	text-decoration: underline;
}

ul.post-single__gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.post-single__gallery img {
	width: 100%;
	height: auto;
	border-radius: var( --radius );
}

.post-single__products {
	padding-block: var( --section-pad );
}

.post-single__products h2 {
	margin-bottom: 1.5rem;
}

.post-single__nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 2rem 3rem;
	font-weight: 600;
}

.post-single__nav a {
	color: var( --color-slate );
}

.post-single__nav a:hover {
	color: var( --color-red );
}

/* Stripe reads input styles from a hidden probe field it sizes wider than
   the payment box; keep it inside the column (it only needs the styles). */
#wc-stripe-upe-form {
	position: relative;
}

#wc-stripe-hidden-style-input {
	left: 0 !important;
	max-width: 100% !important;
}

/* Checkout order review on phones: long product names wrap inside the
   table instead of pushing the totals off the screen. */
.woocommerce-checkout-review-order-table {
	width: 100%;
	table-layout: fixed;
}

.woocommerce-checkout-review-order-table .product-name {
	overflow-wrap: anywhere;
}

.woocommerce-checkout-review-order-table .product-total {
	width: 7.5rem;
	text-align: right;
}

/* Stripe's card fields sit 4px wider than their box on each side. */
#payment .wc-stripe-upe-element {
	overflow-x: clip;
}

/* Stripe's express buttons (Apple / Google Pay, Link) draw 4px outside
   their box on each side; give the box that room. */
#wc-stripe-express-checkout-element {
	padding-inline: 4px;
}

/* Basket, checkout and account pages (rendered by page.php). */
.shop-page {
	max-width: var( --container );
	margin-inline: auto;
	padding: clamp( 2rem, 4vw, 3.5rem ) var( --container-pad ) clamp( 3rem, 5vw, 5rem );
}

.basket__actions {
	flex-wrap: wrap;
}

.basket-coupon {
	flex: 1 1 18rem;
	min-width: 0;
}

/* Phones stack the actions in a column, where that 18rem basis became the
   pill's height (288 tall, bit once). */
@media ( max-width: 63.99em ) {
	.basket-coupon {
		flex: none;
	}
}

.basket-coupon__input {
	flex: 1 1 auto;
	min-width: 8rem;
}

/* Basket rows on FWD's narrower page: the Insulation Plus columns (sized
   for a 1720 measure) left the product name 13px wide. */
@media ( min-width: 64em ) {
	.basket__layout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 18rem, 26rem );
	}

	.basket-item {
		grid-template-columns: 5.5rem minmax( 0, 1fr ) auto 7.5rem auto 2.5rem;
		gap: 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* Homepage (Chris, 5 Oct 2026: the first build copied Insulation Plus) */
/* Built in the product page's language: left-aligned headings with a   */
/* short red rule, 6px photos, hairline cards, red line icons, pills.   */
/* ------------------------------------------------------------------ */

/* Section head: heading left with the red rule; a text link right. */
.section-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp( 1.5rem, 2.2vw, 2.25rem );
}

.section-title {
	position: relative;
	margin: 0;
	padding-bottom: 0.875rem;
	font-size: clamp( 1.5rem, 2.2vw, 2rem );
	font-weight: 600;
	line-height: 1.2;
	color: var( --color-slate );
}

.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.5rem;
	height: 4px;
	border-radius: 2px;
	background: var( --color-red );
}

.bg--slate .section-title {
	color: var( --color-white );
}

.section-title-row__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.875rem;
	font-size: var( --text-small );
	font-weight: 600;
	color: var( --color-red-dark );
	text-decoration: none;
}

.bg--slate .section-title-row__link {
	color: var( --color-white );
}

.section-title-row__link svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.15s ease;
}

.section-title-row__link:hover,
.section-title-row__link:focus-visible {
	text-decoration: underline;
}

.section-title-row__link:hover svg {
	transform: translateX( 0.1875rem );
}

/* Categories: photo tiles ------------------------------------------ */
ul.cat-tiles {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1.75rem, 2.5vw, 2.5rem ) clamp( 1rem, 1.8vw, 1.75rem );
}

.cat-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cat-tile__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var( --radius );
	background: var( --color-grey );
}

.cat-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cat-tile:hover .cat-tile__media img {
	transform: scale( 1.03 );
}

.cat-tile__title {
	margin: 1rem 0 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

.cat-tile__title a {
	color: inherit;
	text-decoration: none;
}

.cat-tile__title a:hover,
.cat-tile__title a:focus-visible {
	color: var( --color-red-dark );
}

/* Shortcuts: a two-column link list on hairlines, like a mega menu column. */
ul.cat-tile__links {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 1.25rem;
	margin-top: 0.625rem;
}

.cat-tile__links li {
	border-bottom: 1px solid var( --color-line );
}

.cat-tile__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5625rem 0;
	font-size: 0.875rem;
	color: var( --color-slate );
	text-decoration: none;
}

.cat-tile__chevron {
	flex: none;
	width: 0.5625rem;
	height: auto;
	color: var( --color-red );
	transform: rotate( -90deg );
	transition: transform 0.15s ease;
}

.cat-tile__links a:hover,
.cat-tile__links a:focus-visible {
	color: var( --color-red-dark );
}

.cat-tile__links a:hover .cat-tile__chevron {
	transform: rotate( -90deg ) translateY( 0.1875rem );
}

@media ( max-width: 63.99em ) {
	ul.cat-tiles {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 39.99em ) {
	ul.cat-tiles,
	ul.cat-tile__links {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Favourites: the category page's cards on the grey band. */
.section--bestsellers .product-grid {
	gap: 2.5rem clamp( 1rem, 2vw, 2.5rem );
	margin-top: 0;
}

.section--bestsellers .product-card--archive .product-card__media {
	background: var( --color-white );
}

/* Why buy: intro + help card left, the points 2×2 right ------------ */
.why-points__inner {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	gap: clamp( 2rem, 5vw, 6rem );
	align-items: start;
}

.why-points__text {
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --color-slate-2 );
}

.why-points .help-card {
	max-width: 26rem;
}

ul.why-points__list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	border-top: 1px solid var( --color-line );
}

.why-point {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.75rem 1.75rem 1.75rem 0;
	border-bottom: 1px solid var( --color-line );
}

.why-point:nth-child( even ) {
	padding-left: 1.75rem;
	padding-right: 0;
	border-left: 1px solid var( --color-line );
}

.why-point__icon {
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.25rem;
	color: var( --color-red );
}

.why-point__icon svg {
	max-width: 100%;
	max-height: 100%;
}

.why-point__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.why-point__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --color-muted );
}

.why-point__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: var( --text-small );
	font-weight: 600;
	color: var( --color-red-dark );
	text-decoration: none;
}

.why-point__link svg {
	width: 0.875rem;
	height: 0.875rem;
}

.why-point__link:hover,
.why-point__link:focus-visible {
	text-decoration: underline;
}

@media ( max-width: 63.99em ) {
	.why-points__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 39.99em ) {
	ul.why-points__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.why-point,
	.why-point:nth-child( even ) {
		padding: 1.5rem 0;
		border-left: 0;
	}
}

/* Guides: compact rows, as the product page's "To finish the job" -- */
ul.link-rows__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 20rem ), 1fr ) );
	gap: 1rem;
}

.link-row {
	display: grid;
	grid-template-columns: 6rem minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 0.75rem 1.25rem 0.75rem 0.75rem;
	border: 1px solid var( --color-line );
	border-radius: var( --radius );
	background: var( --color-white );
	color: var( --color-slate );
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-row:hover,
.link-row:focus-visible {
	border-color: var( --color-slate );
	box-shadow: 0 6px 16px rgba( 54, 66, 69, 0.08 );
	text-decoration: none;
}

.link-row__media {
	display: block;
	width: 6rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 4px;
	background: var( --color-grey );
}

.link-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.link-row__body {
	display: grid;
	gap: 0.25rem;
}

.link-row__title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.link-row__text {
	font-size: var( --text-small );
	line-height: 1.45;
	color: var( --color-muted );
}

.link-row__arrow {
	width: 1rem;
	height: 1rem;
	color: var( --color-red );
	transition: transform 0.15s ease;
}

.link-row:hover .link-row__arrow {
	transform: translateX( 0.1875rem );
}

/* FAQs, split: heading left, questions right, as on the product page. */
.section--faqs--split .faqs-split {
	display: grid;
	grid-template-columns: minmax( 0, 4fr ) minmax( 0, 8fr );
	gap: 1.5rem clamp( 2rem, 5vw, 5rem );
	max-width: var( --container );
}

.faqs-split__head .section-title-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

@media ( max-width: 63.99em ) {
	.section--faqs--split .faqs-split {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ------------------------------------------------------------------ */
/* Address book: checkout sections, saved-address cards, the          */
/* postcode-first form and My Account Addresses. Cards take the        */
/* product page's option look (pdp.css .pdp-variations__option):       */
/* hairline, 6px, red border and tint when chosen.                     */
/* ------------------------------------------------------------------ */

/* ~ not +: the hidden fwd_address_form input sits between Contact and Delivery. */
.checkout-section ~ .checkout-section {
	margin-top: 2.5rem;
}

.checkout-section__title {
	margin-bottom: 1.25rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.checkout-section__fields,
.address-form__fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 1.25rem;
}

.address-form__fields .form-row-wide,
.address-form__fields .wc-address-validation-results {
	grid-column: 1 / -1;
}

.address-cards {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.address-card {
	display: flex;
	gap: 0.875rem;
	padding: 1.25rem;
	border: 1px solid var( --color-line );
	border-radius: var( --radius );
	background: var( --color-white );
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

label.address-card {
	cursor: pointer;
}

label.address-card:hover {
	border-color: var( --color-slate );
}

label.address-card:has( .address-card__input:checked ) {
	border-color: var( --color-red );
	background: var( --color-red-tint );
}

.address-card__input {
	margin-top: 0.125rem;
}

.address-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	min-width: 0;
	font-size: var( --text-nav );
	line-height: 1.4;
}

.address-card__address {
	font-style: normal;
	font-weight: 300;
}

.address-card__address::first-line {
	font-weight: 600;
}

.address-card__phone {
	font-weight: 300;
}

.address-card__tag {
	padding: 0.125rem 0.625rem;
	border-radius: var( --radius-pill );
	background: var( --color-slate );
	color: var( --color-white );
	font-size: var( --text-xs );
	line-height: 1.5;
	font-weight: 600;
}

.address-card--new {
	align-items: center;
	border-style: dashed;
}

.address-card--new .address-card__body {
	font-weight: 600;
}

.address-same {
	margin-bottom: 1.25rem;
}

@media ( max-width: 39.99em ) {
	.checkout-section__fields,
	.address-form__fields,
	.address-cards {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Hiding happens only once address-book.js has run, so without it every
   field and the billing section stay usable. */
.address-form__manual {
	display: none;
}

.fwd-address-enhanced .address-section.is-card .address-form,
.fwd-address-enhanced [data-billing-address].is-hidden {
	display: none;
}

.fwd-address-enhanced .address-form:not( .is-open ) .address-form__detail {
	display: none !important; /* address-i18n shows rows with inline styles */
}

.fwd-address-enhanced .address-form:not( .is-open ) .address-form__manual {
	display: block;
	margin: 0.25rem 0 1.25rem;
}

.address-form__manual-link {
	padding: 0;
	font-weight: 400;
	text-decoration: underline;
}

/* Stripe's "– OR –" under the express buttons sat on the Contact heading. */
.checkout-page #wc-stripe-express-checkout-button-separator {
	margin-bottom: 1.5rem;
}

/* Contact: email and phone side by side on desktop (Woo marks both wide). */
@media ( min-width: 40em ) {
	.checkout-section--contact .checkout-section__fields .form-row-wide {
		grid-column: auto;
	}
}

/* My Account › Addresses. */
.address-book__intro,
.address-book__empty {
	margin-bottom: 1.5rem;
	font-weight: 300;
}

.address-book__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.address-card--account {
	flex-direction: column;
	justify-content: space-between;
}

.address-card--account.is-default {
	border-color: var( --color-slate );
}

.address-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	padding-top: 0.875rem;
	border-top: 1px solid var( --color-line );
	font-size: var( --text-small );
}

.address-card__form {
	display: contents;
}

.address-card__link {
	padding: 0;
	font-weight: 400;
	text-decoration: underline;
}

.address-card__link--delete {
	color: var( --color-red );
}

.address-card__confirm {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.address-card__confirm[hidden] {
	display: none;
}

.address-book-form__title {
	margin-bottom: 1.25rem;
	font-size: var( --text-subheading );
	line-height: var( --text-subheading-lh );
	font-weight: 700;
}

.address-book-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.5rem;
}

.address-book-form__cancel {
	text-decoration: underline;
}