/* =============================================================================
   Super Rack 2026 - theme styles
   Design tokens are taken from the approved F+ direction.
   ========================================================================== */

:root {
	--srk-ink:        #17171A;
	--srk-ink-soft:   #22252A;
	--srk-ink-line:   #33383E;
	--srk-paper:      #F1EEE7;
	--srk-white:      #FFFFFF;
	--srk-red:        #C8281E;
	--srk-red-dark:   #A42119;
	--srk-yellow:     #F2B22E;
	--srk-line:       #DED9CF;
	--srk-muted:      #5E656B;
	/* Steel from the identity pack. It is 2.8:1 on the cream and must never
	   carry text there; on graphite it is 5.5:1 and is the right secondary grey. */
	--srk-steel:      #8C8F94;
	--srk-muted-dark: #A3A9AE;
	/* Reading copy on an ink band. `--srk-muted-dark` is the right grey for meta - a
	   branch's opening hours, a nav sub-item, a card's part number - and too dim for a
	   paragraph somebody has to actually read. 12.5:1 on ink, against the grey's 7.5:1,
	   and short of pure white, which shimmers at this size on a near-black ground. */
	--srk-dark-body:  #D5D9DC;
	--srk-dim:        #646B71;
	--srk-dim-dark:   #8A9197;
	--srk-red-light:  #D86862;
	--srk-red-ink:    #FBE7E5;
	--srk-yellow-ink: #5C4304;

	/*
	 * Four roles rather than four colours. Each resolves to the light-ground value here
	 * and is redefined on dark grounds further down, so a rule can say what a piece of text
	 * IS - accent, quiet, secondary, emphasised - without knowing what it is sitting on.
	 *
	 * `--srk-eyebrow` is the label above a heading. On paper it is the brand red; on an ink
 * band it turns yellow, so the kicker over a page title reads as a different thing from the
 * breadcrumb sitting above it rather than as two reds a few pixels apart. The home page has
 * always used a yellow eyebrow on its dark sections - this makes that the rule.
 *
 * The brand red is Rack Red #C8281E, from the 2026 identity pack. On the graphite band
	 * that is 3.2:1 against #17171A - better than the old red's 2.6:1 but still short of
	 * WCAG AA for body-size text. `--srk-red-light` is the same hue opened up until it
	 * clears 5:1 there. On the cream the brand red is 4.8:1 and passes as it stands.
	 */
	--srk-red-text:    var(--srk-red);
	--srk-eyebrow:     var(--srk-red);
	--srk-quiet:       var(--srk-dim);
	--srk-soft:        var(--srk-muted);
	--srk-text-strong: var(--srk-ink);

	--srk-font:  Arial, "Helvetica Neue", Helvetica, sans-serif;
	--srk-mono:  "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

	--srk-wrap:    1600px;
	--srk-gutter:  52px;
	--srk-section: 78px;

	--srk-display: clamp(44px, 7vw, 106px);
	--srk-h2:      clamp(30px, 3.4vw, 46px);
	--srk-h3:      clamp(22px, 2.2vw, 34px);

	/*
	 * ---- stacking order -------------------------------------------------------------
	 *
	 * WHY THIS IS A SCALE AND NOT A NUMBER PER COMPONENT
	 *
	 * The catalogue panel used to sit at 40, which lost to WooCommerce's gallery
	 * magnifier at 99: open the Products menu on a product page and a white circle
	 * punched through the middle of it. Sam's screenshot, 23 Sep. Picking 100 would have
	 * fixed that one icon and left the next collision to be found the same way.
	 *
	 * So the layers are named, and the third-party numbers we have to live beside are
	 * written down. Measured across the home page, cart, checkout, a category and a
	 * product, these are every z-index above 50 that is not ours:
	 *
	 *      99          WooCommerce's gallery magnifier
	 *     999          Advanced Woo Search's loading spinner
	 *    1500-1620     PhotoSwipe, WooCommerce's image lightbox
	 *  999999999       Advanced Woo Search's results drop-down
	 * 2147483647       Advanced Woo Search's filter drop-down
	 *
	 * Header chrome therefore has to clear 999 and stay under 1500 - PhotoSwipe is a
	 * lightbox and a lightbox belongs over the header. The two Advanced Woo Search
	 * drop-downs sit above everything and there is nothing to be done about it; they are
	 * both search UI in the masthead, so in practice they are where they need to be.
	 *
	 * ADDING A LAYER: use one of these, or add one here with the reason. A bare number
	 * in a component rule is how this build got the bug in the first place.
	 */
	--srk-z-content:   4;       /* badges, gallery arrows, thumbnail chevrons */
	--srk-z-float:   600;       /* back to top - over the page, under the header */
	--srk-z-header: 1000;       /* masthead drop-downs, catalogue panel, part finder */
	--srk-z-drawer: 1100;       /* the mobile filter drawer */
	--srk-z-modal:  1200;       /* the freight zones dialog */
	--srk-z-skip:   1300;       /* the skip link outranks all of it, or it is unusable */
	/* PhotoSwipe's 1500 sits here, deliberately above everything above. */
	--srk-z-lightbox: 100000;   /* our own lightbox, which has to clear PhotoSwipe */
}

@media (max-width: 900px) {
	:root { --srk-gutter: 20px; --srk-section: 48px; }
}

/* ---------------------------------------------------------------- base ---- */

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

body {
	margin: 0;
	background: var(--srk-paper);
	color: var(--srk-ink);
	font-family: var(--srk-font);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
.srk-content a { color: var(--srk-red-text); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

/*
 * PROSE
 *
 * The reset above exists for navigation lists, card grids and footers, where a browser's
 * default list indent is a nuisance. Editor content is the opposite case: a product
 * description written in WordPress arrives as real `<ul>`, `<h3>` and `<strong>`, and with
 * the reset in force it renders as a wall of flush-left lines with no bullets and headings
 * no heavier than body text. It looks exactly like HTML that failed to render, and on this
 * catalogue that is most of the selling copy.
 *
 * So anywhere editor content is printed, put the defaults back deliberately.
 */
.srk-prose h1, .srk-prose h2, .srk-prose h3, .srk-prose h4, .srk-prose h5, .srk-prose h6 {
	font-weight: 700;
	line-height: 1.25;
	margin: 1.5em 0 0.45em;
}
.srk-prose > *:first-child { margin-top: 0; }
.srk-prose h2 { font-size: 1.45em; }
.srk-prose h3 { font-size: 1.2em; }
.srk-prose h4, .srk-prose h5, .srk-prose h6 { font-size: 1.05em; }
.srk-prose p { margin: 0 0 1em; }
.srk-prose ul, .srk-prose ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.srk-prose ul { list-style: disc; }
.srk-prose ol { list-style: decimal; }
.srk-prose li { margin-bottom: 0.4em; }
.srk-prose li > ul, .srk-prose li > ol { margin: 0.4em 0 0.2em; }
.srk-prose strong, .srk-prose b { font-weight: 700; }
.srk-prose em, .srk-prose i { font-style: italic; }
.srk-prose img { max-width: 100%; height: auto; margin: 0.6em 0; }
.srk-prose blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 3px solid var(--srk-line); }
.srk-prose > *:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--srk-yellow); outline-offset: 2px; }

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

.srk-skip {
	position: absolute; left: -9999px; top: 0; z-index: var(--srk-z-skip);
	background: var(--srk-yellow); color: var(--srk-ink);
	padding: 12px 20px; font-weight: 700;
}
.srk-skip:focus { left: 0; }

/* ------------------------------------------------------------- helpers ---- */

.srk-wrap {
	max-width: var(--srk-wrap);
	margin-inline: auto;
	padding-inline: var(--srk-gutter);
}

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

.lbl {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.4;
}

.mono { font-family: var(--srk-mono); letter-spacing: 0.04em; }

.srk-btn {
	display: inline-block;
	padding: 16px 26px;
	font: inherit;
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.srk-btn--red  { background: var(--srk-red);  color: #fff; }
.srk-btn--red:hover  { background: var(--srk-red-dark); }
.srk-btn--ink  { background: var(--srk-ink);  color: #fff; }
.srk-btn--ink:hover  { background: #000; }
.srk-btn--yellow { background: var(--srk-yellow); color: var(--srk-ink); }
.srk-btn--outline { border: 2px solid var(--srk-ink); color: var(--srk-ink); padding: 14px 24px; background: none; }
.srk-btn--outline-light { border: 2px solid #fff; color: #fff; padding: 14px 24px; background: none; }

/* ------------------------------------------------- colour on a dark ground --- */

/*
 * Everything below has an ink, near-black or dark-image background. Rather than chasing
 * every `color:` rule inside them, the three text roles are redefined once here and the
 * rules underneath inherit the right value.
 *
 * This is deliberately NOT a redefinition of `--srk-red` itself: that token is a background
 * as often as it is a colour, and a lightened red behind white text would fail in the other
 * direction. Only the text role moves.
 *
 * Adding a new dark section means adding its selector here, and its text is legible.
 */
.srk-utility,
.srk-nav__list .sub-menu,
.srk-mega,
.srk-toolbar,
.srk-search,
.srk-pagehero,
.srk-footer,
.srk-vbox__inner,
.srk-archhead,
.srk-chip,
.srk-hero,
.srk-finder,
.srk-services,
.srk-ware__panel,
.srk-tile--ink .srk-tile__body,
.srk-product__pricebar,
.srk-reorder,
.woocommerce div.product.srk-product .woocommerce-tabs,
.srk-pcta,
.srk-cta,
.srk-cside__block--call {
	--srk-red-text:    var(--srk-red-light);
	--srk-eyebrow:     var(--srk-yellow);
	--srk-quiet:       var(--srk-dim-dark);
	--srk-soft:        var(--srk-muted-dark);
	--srk-text-strong: #fff;
}

/*
 * ...and a light surface sitting inside one of them puts the roles back. The services
 * band is the case that proves the rule: an ink section holding four paper cards. The
 * roles are separate tokens from the colours they point at precisely so this reset can
 * exist - `--srk-quiet: var(--srk-dim)` is a reference, not a cycle.
 */
.srk-services .srk-servicecard,
.srk-footer .srk-pcard,
.srk-archhead .srk-pcard,
/* The part-number dropdown: a paper panel hanging out of the ink toolbar. Without this
   the names and stock lines inherit the dark-surface roles and land at 2.07:1 on paper. */
.srk-toolbar .srk-partfinder {
	--srk-red-text:    var(--srk-red);
	--srk-eyebrow:     var(--srk-red);
	--srk-quiet:       var(--srk-dim);
	--srk-soft:        var(--srk-muted);
	--srk-text-strong: var(--srk-ink);
}

/*
 * Two plugins print a grey note at 4.4:1 on a near-white panel in the cart - close enough
 * to pass by eye and not close enough to pass an audit. The colour actually comes from
 * WooCommerce's own `.woocommerce-cart .cart-collaterals .cart_totals table small`, which
 * is (0,3,1), so the class-only rule below never had a chance; the body class in front of
 * it is what wins the cascade. Count the elements in the selector, not just the classes.
 */
.srk-theme.woocommerce-cart .cart-collaterals .cart_totals table small,
.srk-theme.woocommerce-checkout .cart-collaterals .cart_totals table small,
.srfq-fallback-note,
.wcdsd-ship-note { color: var(--srk-soft); }

/* ---------------------------------------------------------------- logo ---- */

.srk-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}
.srk-logo img { height: auto; }
/* Both of these have to be written at `.srk-logo .srk-logo__x` weight: a bare
   `.srk-logo__icon` is 0,1,0 and loses to the `.srk-logo img` rule above it.

   The phone used to get the square icon on its own, because the v1 lockup was 10.4:1
   and there was no honest way to fit it beside a cart and a menu button. The v2 lockup
   is 714 x 129 - 5.5:1 - so at 30px tall it is about 166px wide, which does fit, and
   the wordmark is worth far more than the 60px it costs. The icon is kept for the
   narrowest phones only, where that margin runs out. */
.srk-logo .srk-logo__lockup { display: block; }
.srk-logo .srk-logo__icon   { display: none; }

@media (max-width: 900px) {
	/* Width-led, not height-led: the lockup renders at 8.4:1 once its width and height
	   attributes are taken into account, so fixing the height is what lets it run into
	   the cart and the menu button. 200px is what is left on a 390px phone after those
	   two and the gutters; the vw ceiling keeps it honest on anything narrower. */
	.srk-logo .srk-logo__lockup { display: block; width: min(200px, 50vw); height: auto; }
	.srk-logo .srk-logo__icon   { display: none; }
}

@media (max-width: 360px) {
	.srk-logo .srk-logo__lockup { display: none; }
	.srk-logo .srk-logo__icon   { display: block; width: 36px; height: 36px; }
}

/* ------------------------------------------------------- utility strip ---- */

.srk-utility { background: var(--srk-ink); color: var(--srk-muted-dark); }
.srk-utility__inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 38px;
	flex-wrap: wrap;
}
.srk-utility__est { color: var(--srk-yellow); }
.srk-utility .lbl { font-weight: 600; }
.srk-utility__phone { margin-left: auto; color: #fff; font-weight: 700; }

@media (max-width: 900px) {
	.srk-utility__branches, .srk-utility__promise { display: none; }
	.srk-utility__inner { gap: 14px; }
}

/* ------------------------------------------------------------ masthead ---- */

.srk-masthead { background: var(--srk-paper); border-bottom: 1px solid var(--srk-line); }
.srk-masthead__inner {
	position: relative;   /* the catalogue panel spans this, not the menu item */
	display: flex;
	align-items: center;
	gap: 44px;
	min-height: 78px;
}

/*
 * `flex-shrink: 0` is the whole fix for the menu wrapping onto two rows at 1280px.
 *
 * `margin-inline: auto` centres the menu, but auto margins only absorb space that is left
 * over AFTER flex sizing. With the default `flex-shrink: 1` the nav was squeezed below its
 * own content first - at 1280 it collapsed to 627px when 731px was available, wrapped
 * "Finance" onto a second row, and left 104px sitting unused in the auto margins. Measured,
 * not guessed: the row needs 700px and the masthead had 731px to give.
 *
 * Refusing to shrink means the gaps below have to guarantee the row actually fits, or it
 * would overflow instead of wrapping. See the 1300px band.
 */
.srk-nav { margin-inline: auto; flex-shrink: 0; }
.srk-nav__list { display: flex; align-items: center; gap: 30px; list-style: none; flex-wrap: wrap; }
.srk-nav__list a {
	display: inline-block;
	font-size: 15.5px;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.srk-nav__list a:hover,
.srk-nav__list .current-menu-item > a,
.srk-nav__list .current-menu-ancestor > a {
	border-bottom-color: var(--srk-red-text);
	font-weight: 700;
}
.srk-nav__empty { margin: 0; font-size: 13px; color: var(--srk-soft); }

/* Drop-downs. Any menu with children would otherwise render its sub-items inline
   and blow the masthead apart - which is exactly what the legacy 28-item menu did. */
.srk-nav__list li { position: relative; }
.srk-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--srk-z-header);
	min-width: 240px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--srk-ink);
	border-top: 3px solid var(--srk-red);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.srk-nav__list li:hover > .sub-menu,
.srk-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.srk-nav__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: var(--srk-muted-dark);
	border-bottom: 0;
	white-space: nowrap;
}
.srk-nav__list .sub-menu a:hover {
	color: #fff;
	background: var(--srk-ink-soft);
	border-bottom: 0;
	font-weight: 400;
}
.srk-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
}

/* ---- the catalogue panel.
   Nineteen categories and twenty-six children will not fit a 240px drop-down, and a
   scrolling column of forty-five links is the old flat list with extra steps. So it is a
   grid across the masthead: each category a heading with its own children under it, which is
   the same shape the filter rail uses.

   The item goes `position: static` so the panel positions against `.srk-masthead__inner`
   instead of against the word "Products". */
/* `.srk-nav__list li { position: relative }` above is (0,1,1) and beats a bare
   single-class rule, so this is written at (0,2,1) to actually win. Fifth time this
   arithmetic has cost a round trip on this build: when a rule does nothing, count the
   elements in the selector, not just the classes. */
.srk-nav__list li.srk-nav__item--catalogue { position: static; }

.srk-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--srk-z-header);
	background: var(--srk-ink);
	border-top: 3px solid var(--srk-red);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
/* Three ways in, because each covers what the others cannot: :hover for a mouse with
   scripting off, :focus-within for a keyboard, and `.is-open` from theme.js for touch,
   which has no hover and would otherwise get a dead link. */
.srk-nav__item--catalogue:hover > .srk-mega,
.srk-nav__item--catalogue:focus-within > .srk-mega,
.srk-nav__item--catalogue.is-open > .srk-mega { opacity: 1; visibility: visible; transform: none; }

.srk-mega__inner { padding: 26px 30px 20px; }
.srk-mega__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 4;
	column-gap: 34px;
}
.srk-mega__group { break-inside: avoid; margin: 0 0 18px; }
.srk-mega__top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	border-bottom: 0;
}
.srk-mega__top:hover { color: var(--srk-yellow); border-bottom: 0; }
.srk-mega__count { font-size: 11px; color: var(--srk-quiet); font-weight: 400; }

.srk-mega__sub { list-style: none; margin: 0; padding: 0 0 0 1px; }
.srk-mega__sub a {
	display: block;
	padding: 3px 0;
	font-size: 13px;
	color: var(--srk-muted-dark);
	border-bottom: 0;
	white-space: normal;
}
.srk-mega__sub a:hover { color: #fff; border-bottom: 0; font-weight: 400; }

.srk-mega__all { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--srk-ink-line); }
.srk-mega__all a { font-size: 12.5px; color: var(--srk-yellow); border-bottom: 0; }
.srk-mega__all a:hover { color: #fff; border-bottom: 0; }

@media (max-width: 1400px) { .srk-mega__grid { columns: 3; } }

/*
 * The tight band: wide enough for the inline menu, not wide enough for full gaps.
 *
 * The burger takes over at 1100px, so the menu has to fit every width above it. At 1201px
 * the row needs 700px with the default gaps and does not have it, so the masthead gap drops
 * from 44 to 20 and the menu gap from 30 to 20, which returns 108px and makes it fit. Above
 * 1300 the full gaps are affordable again.
 *
 * The burger moved from 1100 to 1200 at the same time. Below 1200 the row cannot be made to
 * fit without shrinking the menu into a squeeze, and a deliberate burger reads better than a
 * cramped row - measured at 1101, where refusing to shrink pushed the Get a Quote button
 * 21px past the edge of the page.
 */
@media (min-width: 1201px) and (max-width: 1300px) {
	.srk-masthead__inner { gap: 20px; }
	.srk-nav__list { gap: 20px; }
}

/* On mobile the drop-down becomes a plain indented list - no hover to rely on. */
@media (max-width: 1200px) {
	/*
	 * Put the light-surface roles back.
	 *
	 * `.srk-mega` and `.srk-nav__list .sub-menu` are both listed as dark surfaces further
	 * up, which is right on the desktop - they are ink panels hanging off the masthead.
	 * On mobile the rules below strip `background` off both, so the same markup sits on
	 * the cream drawer while still carrying `--srk-soft: var(--srk-muted-dark)`. That is
	 * #A3A9AE on #F5F2EC: 2.0:1, and it is why the category list read as barely-there
	 * grey on a phone (Sam, 28 Sep).
	 *
	 * Same reset as `.srk-services .srk-servicecard` and friends - a light surface inside
	 * a dark one puts the roles back. Here the surface did not change, the media query did.
	 */
	.srk-nav__list .sub-menu,
	.srk-mega {
		--srk-red-text:    var(--srk-red);
		--srk-eyebrow:     var(--srk-red);
		--srk-quiet:       var(--srk-dim);
		--srk-soft:        var(--srk-muted);
		--srk-text-strong: var(--srk-ink);
	}

	.srk-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		border-top: 0;
		background: none;
		padding: 0 0 0 16px;
	}
	.srk-nav__list .sub-menu a { color: var(--srk-text-strong); border-bottom: 1px solid var(--srk-line); }
	.srk-nav__list .menu-item-has-children > a::after { display: none; }

	/* The panel joins the same indented list. One column, and the sub-categories are left
	   out: on a phone the depth is the problem, not the discovery.

	   And it is closed until asked for. Left open it ran to 1,741px - nineteen categories
	   between "Super Deal" and "About Us", so everything below Products was off the bottom
	   of the phone and the menu read as broken. It is an accordion here; `.is-open` comes
	   from theme.js. Note `display` rather than the opacity/visibility the desktop panel
	   uses, because a hidden-but-laid-out panel would still take the height. */
	.srk-mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border-top: 0;
		display: none;
	}
	.srk-nav__list li.srk-nav__item--catalogue.is-open > .srk-mega { display: block; }

	/* The chevron the desktop menu hides on mobile is exactly what this one item needs,
	   because here it really does open something rather than link away. Written at (0,2,3)
	   to beat `.srk-nav__list .menu-item-has-children > a::after { display: none }`. */
	.srk-nav__list li.srk-nav__item--catalogue > a::after {
		display: inline-block;
		content: "";
		margin-left: 9px;
		border: 5px solid transparent;
		border-top-color: var(--srk-red-text);
		transform: translateY(3px);
		transition: transform 0.15s ease;
	}
	.srk-nav__list li.srk-nav__item--catalogue.is-open > a::after {
		transform: translateY(-2px) rotate(180deg);
	}
	.srk-mega__inner { padding: 0 0 0 16px; }
	.srk-mega__grid { columns: 1; }
	.srk-mega__group { margin: 0; }
	/* `.srk-nav__list a { display: inline-block }` is (0,1,1) and beats `.srk-mega__top`'s
	   own (0,1,0) flex - which is why the separator stopped at the end of the words instead
	   of running across the row. Sixth time this arithmetic has cost something on this build.
	   Written at (0,2,0) here, with the count pushed to the right edge. */
	.srk-nav__list .srk-mega__top {
		display: flex;
		color: var(--srk-text-strong);
		font-weight: 400;
		padding: 12px 0;
		border-bottom: 1px solid var(--srk-line);
	}
	.srk-mega__count { margin-left: auto; }
	.srk-mega__sub { display: none; }
	.srk-mega__all { border-top: 0; padding-top: 10px; }
}

.srk-masthead__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.srk-cart { display: inline-flex; align-items: center; gap: 7px; }
.srk-cart__count { font-weight: 600; }
.srk-masthead__quote { padding: 14px 22px; }

.srk-navtoggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.srk-navtoggle__bars,
.srk-navtoggle__bars::before,
.srk-navtoggle__bars::after {
	display: block; width: 24px; height: 2px; background: var(--srk-ink); position: relative;
}
.srk-navtoggle__bars::before { content: ""; position: absolute; top: -7px; }
.srk-navtoggle__bars::after  { content: ""; position: absolute; top: 7px; }

@media (max-width: 1200px) {
	/* The nav is `order: 4; flex-basis: 100%` so it drops below the logo and the actions -
	   but a flex row does not wrap unless it is told to, so without this it stayed on the
	   first line and was squeezed to 110px against the right edge, pushing the document
	   56px wider than the phone. */
	.srk-masthead__inner { gap: 16px; flex-wrap: wrap; }
	/* The 66px floor belongs to the top row, not to the container.
	   Left on the container it was satisfied by whichever rows existed, so opening the menu
	   added a second row and the first one collapsed from 66px to 33px - the logo and the
	   bar above it visibly jumped up 17px every time the menu opened. Sam caught it. */
	.srk-masthead__inner { min-height: 0; }
	.srk-masthead__inner > .srk-logo,
	.srk-masthead__inner > .srk-navtoggle,
	.srk-masthead__inner > .srk-masthead__actions {
		min-height: 66px;
		display: flex;
		align-items: center;
	}
	.srk-navtoggle { display: block; order: 3; }
	.srk-nav {
		order: 4;
		flex-basis: 100%;
		margin-inline: 0;
		display: none;
		border-top: 1px solid var(--srk-line);
	}
	.srk-nav.is-open { display: block; }
	.srk-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: 8px; }
	.srk-nav__list a { padding: 12px 0; border-bottom: 1px solid var(--srk-line); }
	/* The rule above draws the separator under the text rather than across the row, because
	   an anchor is inline. Only the top-level rows want to be full width - the panel's own
	   headings keep their flex layout so the count stays right-aligned. */
	.srk-nav__list > li > a { display: block; }
	.srk-masthead__quote { display: none; }
}

/* ------------------------------------------------------------- toolbar ---- */

.srk-toolbar { background: var(--srk-ink); }
.srk-toolbar__inner {
	display: flex;
	align-items: center;
	min-height: 60px;
	gap: 0;
	flex-wrap: wrap;
}
.srk-toolbar__divider {
	width: 1px; height: 26px;
	background: var(--srk-ink-line);
	margin: 0 30px 0 auto;
}

.srk-search {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--srk-ink-soft);
	border: 1px solid var(--srk-ink-line);
	height: 38px;
	padding-inline: 15px;
	width: 520px;
	max-width: 100%;
	flex-shrink: 0;
	color: var(--srk-quiet);
}
.srk-search__icon { flex-shrink: 0; }
.srk-search__field {
	flex: 1; min-width: 0;
	background: none; border: 0; padding: 0;
	color: #fff; font: inherit; font-size: 14px;
}
.srk-search__field::placeholder { color: var(--srk-quiet); opacity: 1; }
.srk-search__submit {
	background: none; border: 0; padding: 0;
	color: var(--srk-quiet); font: inherit;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
	cursor: pointer;
}
.srk-search__submit:hover { color: #fff; }

.srk-quickorder { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.srk-quickorder__label { color: var(--srk-yellow); margin-right: 16px; }
.srk-quickorder__sku {
	background: #fff; border: 0;
	height: 38px; width: 300px; max-width: 100%;
	padding-inline: 14px;
	font-family: var(--srk-mono); font-size: 13px;
	color: var(--srk-ink);
}
.srk-quickorder__qty {
	height: 38px; width: 64px; border: 0; border-left: 1px solid var(--srk-line);
	padding-inline: 10px; font: inherit; font-size: 14px;
}
/* `padding-inline` alone left .srk-btn's 16px padding-block in place, which in a 38px-high
   button pushed the label below centre. Zero the padding and centre the content instead. */
.srk-quickorder__submit {
	height: 38px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/*
 * The note is the one flexible thing in this row, and the only one allowed to shrink.
 *
 * It doubles as the receipt for a chosen part, and "Garage Shelving 2m (H) x 3m (W) x 0.6m
 * (D) 3200kg Heavy Duty Adjustable Long Span Shelf" is a real product name. At 87 characters
 * it made the form 1057px wide against 729px for the default note, which was wider than the
 * space left beside the search box - so the whole form wrapped onto a line of its own and the
 * toolbar grew from 60px to 76px every time somebody picked a long part.
 *
 * Capped, allowed to shrink, and truncated with an ellipsis. The script also shortens the
 * name before writing it and puts the full one on the title, so this is a backstop rather
 * than the only defence.
 */
.srk-quickorder__label,
.srk-quickorder__sku,
.srk-quickorder__qty,
.srk-quickorder__submit { flex-shrink: 0; }
.srk-quickorder__note {
	font-size: 13px;
	color: var(--srk-quiet);
	margin-left: 16px;
	min-width: 0;
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srk-quickorder__note.is-chosen { color: var(--srk-yellow); }

/*
 * The part-number dropdown.
 *
 * `srk-partfinder`, NOT `srk-parts`: that one is already the "Parts in this system" section
 * on every product page. Giving the dropdown the same block class turned that section into
 * an absolutely positioned, 60vh, scrolling panel with a drop shadow, sitting on top of the
 * page - which is what a generic class name costs when it is only tested where it is new.
 *
 * The toolbar is ink; the panel is paper, because it is a list of products and every other
 * list of products on this site is read on paper. It is positioned by script against the
 * field rather than the form, since the form wraps to two rows below 1100px.
 */
.srk-quickorder { position: relative; min-width: 0; }
.srk-partfinder {
	position: absolute;
	z-index: var(--srk-z-header);
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--srk-paper);
	border: 1px solid var(--srk-line);
	box-shadow: 0 18px 40px rgba(23,23,26, 0.28);
	text-align: left;
}
.srk-partfinder__row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--srk-line);
	cursor: pointer;
}
.srk-partfinder__row:last-child { border-bottom: 0; }
.srk-partfinder__row.is-active { background: #fff; }
.srk-partfinder__img { width: 34px; height: 34px; object-fit: contain; }
.srk-partfinder__img--none { background: var(--srk-line); }
.srk-partfinder__text { min-width: 0; display: block; }
.srk-partfinder__sku { display: block; font-size: 12px; color: var(--srk-ink); font-weight: 600; }
.srk-partfinder__name {
	display: block;
	font-size: 12.5px;
	color: var(--srk-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srk-partfinder__meta { text-align: right; white-space: nowrap; }
.srk-partfinder__price { display: block; font-size: 13px; color: var(--srk-ink); }
.srk-partfinder__stock { display: block; font-size: 11px; color: var(--srk-soft); }
.srk-partfinder__row--order .srk-partfinder__stock { color: var(--srk-yellow-ink); }
.srk-partfinder__row--out .srk-partfinder__stock { color: var(--srk-red-text); }
.srk-partfinder__empty { padding: 12px; font-size: 13px; color: var(--srk-soft); }

/*
 * Quick-order notices on pages WooCommerce does not style - the home page, a landing page,
 * a post. Same shape as the cart's, which is the only other place a notice appears.
 */
.srk-notices { padding-top: 22px; }
.srk-notices .woocommerce-message,
.srk-notices .woocommerce-info,
.srk-notices .woocommerce-error {
	background: #fff;
	border: 1px solid var(--srk-line);
	border-left: 3px solid var(--srk-red);
	padding: 15px 20px;
	margin: 0 0 4px;
	font-size: 14.5px;
	color: var(--srk-ink);
	list-style: none;
}
.srk-notices .woocommerce-message::before,
.srk-notices .woocommerce-info::before,
.srk-notices .woocommerce-error::before { display: none; }
.srk-notices .button { display: none; }

@media (max-width: 1100px) {
	.srk-toolbar__inner { padding-block: 12px; gap: 10px; }
	.srk-toolbar__divider { display: none; }
	.srk-search { width: 100%; }
	.srk-quickorder { width: 100%; }
	.srk-quickorder__label { flex-basis: 100%; margin: 0 0 6px; }
	.srk-quickorder__sku { flex: 1; width: auto; }
	.srk-quickorder__note { display: none; }
}

/* ------------------------------------------------------------ page head --- */

.srk-pagehead { margin-bottom: 34px; }
.srk-pagehead--page { padding-top: var(--srk-section); }
.srk-pagehead__eyebrow { color: var(--srk-eyebrow); margin-bottom: 14px; }
.srk-pagehead__title { font-size: var(--srk-h2); }
.srk-pagehead__meta,
.srk-pagehead__desc { color: var(--srk-soft); margin-top: 12px; }

/* -------------------------------------------------------------- content --- */

/* ------------------------------------------------------------- page hero ---- */

/* The same ink band the catalogue uses, without the photograph - so an ordinary page reads as
   part of the site rather than as a title dropped on the paper colour. The heading comes out
   of the copy's own `h1` (see inc/pages.php), which is why there is no longer a second one
   below it. */
.srk-pagehero {
	background: var(--srk-ink);
	color: #fff;
	border-bottom: 8px solid var(--srk-yellow);
}
.srk-pagehero__inner { padding-block: 48px 40px; }
.srk-pagehero--nolead .srk-pagehero__inner { padding-block: 44px 36px; }
.srk-pagehero__crumbs { color: var(--srk-quiet); font-size: 9.5px; margin-bottom: 20px; }
.srk-pagehero__crumbs a:hover { color: #fff; }
.srk-pagehero__crumbsep { color: var(--srk-red-text); margin: 0 6px; }
.srk-pagehero__here { color: var(--srk-red-text); }
.srk-pagehero__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.04;
	text-transform: uppercase;
	margin: 0;
	max-width: 20ch;
}
.srk-pagehero__lead {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: 15.5px;
	color: var(--srk-dark-body);
}

.srk-content { padding-block: var(--srk-section); }
.srk-content > * { max-width: 760px; }

/* Editor content on a page gets the same treatment as a product description: the global
   `ul, ol { margin: 0; padding: 0 }` reset and `h1-h4 { font-weight: 400 }` are right for
   navigation and cards and wrong for prose, and without a counterpart here About Us rendered
   as flush-left lines with headings no heavier than the body. `.srk-prose` is that
   counterpart; the page template now carries it. */
/* `.srk-content h2 { font-size: var(--srk-h2) }` is the display size, written when this
   wrapper only ever held a short page title. It is (0,1,1), the same as `.srk-prose h2`, and
   later in the file - so it won, and About Us rendered its section headings at 46px and its
   h3s at 31px. These are (0,2,1) and set the sizes a body heading wants. */
.srk-content.srk-prose h2 { font-size: 26px; margin-top: 2em; }
.srk-content.srk-prose h3 { font-size: 20px; margin-top: 1.6em; }
.srk-content.srk-prose h4 { font-size: 17px; margin-top: 1.5em; }
.srk-content.srk-prose > h2:first-child,
.srk-content.srk-prose > h3:first-child { margin-top: 0; }
.srk-content.srk-prose p,
.srk-content.srk-prose li { font-size: 15.5px; line-height: 1.75; color: var(--srk-ink); }
.srk-content.srk-prose li::marker { color: var(--srk-red-text); }
.srk-content.srk-prose hr { border: 0; border-top: 1px solid var(--srk-line); margin: 2.4em 0; }
.srk-content > .alignwide  { max-width: 1496px; }
.srk-content > .alignfull  { max-width: none; margin-inline: calc(var(--srk-gutter) * -1); }
.srk-content h2 { font-size: var(--srk-h2); margin: 1.6em 0 0.5em; }
.srk-content h3 { font-size: var(--srk-h3); margin: 1.5em 0 0.4em; }
.srk-content ul, .srk-content ol { padding-left: 1.3em; margin-bottom: 1em; }
.srk-content li { margin-bottom: 0.35em; }

/* ------------------------------------------------------------- postlist --- */

.srk-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}
.srk-postcard { background: #fff; border: 1px solid var(--srk-line); }
.srk-postcard__media img { width: 100%; object-fit: cover; }
.srk-postcard__body { padding: 16px 18px 20px; }
.srk-postcard__title { font-size: 19px; margin-bottom: 8px; }
.srk-postcard__excerpt { font-size: 14px; color: var(--srk-soft); }

.srk-empty { font-size: 19px; margin-bottom: 24px; }

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

.srk-404 { max-width: 760px; }
.srk-404__eyebrow { color: var(--srk-eyebrow); margin-bottom: 18px; }
.srk-404__title { font-size: var(--srk-h2); margin-bottom: 20px; }
.srk-404__body { color: var(--srk-soft); margin-bottom: 30px; }
.srk-404__search .srk-search { background: #fff; border-color: var(--srk-line); color: var(--srk-soft); }
.srk-404__search .srk-search__field { color: var(--srk-ink); }
.srk-404__search .srk-search__submit { color: var(--srk-red-text); }
.srk-404__phone { font-size: 30px; margin-top: 26px; }

/* --------------------------------------------------------- woo notices ---- */

.woocommerce-notices-wrapper { max-width: var(--srk-wrap); margin-inline: auto; padding-inline: var(--srk-gutter); }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	list-style: none;
	margin: 20px 0 0;
	padding: 16px 20px;
	font-size: 14.5px;
	border-left: 4px solid var(--srk-ink);
	background: #fff;
}
.woocommerce-message { border-left-color: #2E8B57; }
.woocommerce-error   { border-left-color: var(--srk-red-text); }
.woocommerce-info    { border-left-color: var(--srk-yellow); }

/* --------------------------------------------------------------- footer --- */

.srk-footer { background: var(--srk-ink); color: #fff; }
.srk-footer__top {
	display: flex;
	flex-wrap: wrap;
	/* The leftover space is shared between the columns rather than pushed into one gap at
	   the end, so the five blocks sit evenly across the width. */
	justify-content: space-between;
	gap: 40px;
	padding-block: 64px 52px;
}
.srk-footer__brand { width: 300px; }
.srk-footer__blurb { font-size: 14px; color: var(--srk-muted-dark); margin-top: 18px; }
.srk-footer__abn { font-size: 11.5px; color: var(--srk-quiet); }
.srk-footer__cert {
	display: inline-block;
	border: 1px solid var(--srk-yellow);
	color: var(--srk-yellow);
	padding: 9px 14px;
	margin-top: 8px;
}
.srk-footer__heading { color: #fff; margin-bottom: 16px; }
/* 180px broke "Tiny Homes & Container Homes" (201px) and "Mesh Panels & Pet Enclosures"
   (193px) over two lines. `width: auto` with a floor means the three columns are equal at
   205px today, and a longer category added later widens its column rather than wrapping. */
.srk-footer__col { width: auto; min-width: 205px; }
.srk-footer__list { list-style: none; }
.srk-footer__list a { display: block; font-size: 14px; color: var(--srk-muted-dark); padding: 5px 0; white-space: nowrap; }
.srk-footer__list a:hover { color: #fff; }
.srk-footer__phone { display: block; font-size: 26px; margin-bottom: 12px; }
.srk-footer__email { display: block; font-size: 14px; color: var(--srk-muted-dark); margin-bottom: 22px; }
.srk-footer__branches { display: flex; gap: 40px; flex-wrap: wrap; }
.srk-footer__branchname { color: var(--srk-yellow); font-size: 9.5px; margin-bottom: 7px; }
.srk-footer__branch p { font-size: 13.5px; color: var(--srk-muted-dark); line-height: 1.6; margin: 0; }

.srk-footer__bottom { border-top: 1px solid #2B2F34; }
.srk-footer__bottominner {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
	min-height: 60px;
}
.srk-footer__legal { margin: 0; font-size: 12.5px; color: var(--srk-quiet); }
/* Terms, returns and privacy had no link anywhere on the site. They sit between the copyright
   and the payment marks, which is where people look for them. */
.srk-footer__legallinks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.srk-footer__legallinks a { font-size: 12.5px; color: var(--srk-muted-dark); }
.srk-footer__legallinks a:hover { color: #fff; }

.srk-footer__pay { display: flex; gap: 8px; margin-left: auto; list-style: none; flex-wrap: wrap; }
.srk-footer__pay li {
	border: 1px solid #383D43; color: var(--srk-quiet);
	padding: 6px 11px; font-size: 9.5px;
}

@media (max-width: 900px) {
	.srk-footer__top { gap: 32px; padding-block: 44px 32px; }
	.srk-footer__brand, .srk-footer__col, .srk-footer__contact { width: 100%; min-width: 0; margin-left: 0; }
}

/* ---------------------------------------------------------- back to top --- */

/* Replaces the `back-to-the-top-button` plugin. A link rather than a button, so it still
   goes to the top of the page if the script does not run. */
.srk-totop {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: var(--srk-z-float);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--srk-ink);
	border: 1px solid var(--srk-ink-line);
	border-bottom: 1px solid var(--srk-ink-line);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s,
		background-color 0.15s ease, border-color 0.15s ease;
}
.srk-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.srk-totop:hover,
.srk-totop:focus-visible {
	background: var(--srk-red);
	border-color: var(--srk-red-text);
	color: #fff;
}
.srk-totop__arrow {
	border: 6px solid transparent;
	border-bottom-color: currentColor;
	transform: translateY(-3px);
}
@media print { .srk-totop { display: none; } }
@media (prefers-reduced-motion: reduce) { .srk-totop { transition: none; } }

/* =============================================================================
   Cascade guard
   -----------------------------------------------------------------------------
   Elementor's site-wide kit stylesheet styles the document through a class:

       .elementor-kit-37222   { color:#000; font-family:Rubik; font-size:1em }
       .elementor-kit-37222 a { color:#000; font-family:Rubik; font-size:15px }

   A class beats a bare `body` or `a` selector regardless of load order, so on any
   page that still carries Elementor's kit the theme's typography loses. inc/elementor-diet.php
   removes those assets from pages the theme renders; this block covers the rest -
   legacy Elementor pages, where our header and footer still have to look right.

   Every rule below is scoped to `body.srk-builder`, a class set ONLY on pages that still
   carry Elementor's kit. That is the important part: on pages the theme renders itself the
   whole block is inert, so component styles - the homepage in particular - need nothing
   heavier than a single class and cannot be ambushed by a guard written for pages they
   have nothing to do with.

   `body.srk-builder` scores one class plus one element, so it outranks the kit's single
   class. Delete this whole section when Elementor is deactivated for good.
   ========================================================================== */

body.srk-builder {
	color: var(--srk-ink);
	background: var(--srk-paper);
	font-family: var(--srk-font);
	font-size: 15px;
	line-height: 1.7;
}

body.srk-builder h1,
body.srk-builder h2,
body.srk-builder h3,
body.srk-builder h4 {
	font-family: var(--srk-font);
	font-weight: 400;
	color: inherit;
}

/* Neutralise the kit's blanket link rule. Deliberately kept to one class and one
   element so every component rule below - same weight, declared later - still wins.
   An earlier attempt scoped this to `.srk-header a`, which outranked the component
   rules and turned the logo, the phone number and the quote button the wrong colour. */
body.srk-builder a {
	font-family: var(--srk-font);
	font-size: inherit;
	color: inherit;
}

body.srk-builder .srk-btn { font-family: var(--srk-font); }

/* The logo is artwork now, so the builder pages need nothing beyond keeping the
   images from inheriting a stray line-height. */
body.srk-builder .srk-logo { line-height: 0; }

body.srk-builder .srk-utility { color: var(--srk-muted-dark); }
body.srk-builder .srk-utility__est { color: var(--srk-yellow); }
body.srk-builder .srk-utility__phone { color: #fff; }

body.srk-builder .srk-nav__list a { color: var(--srk-ink); font-size: 15.5px; }
body.srk-builder .srk-nav__list .sub-menu a { color: var(--srk-muted-dark); font-size: 14px; }
body.srk-builder .srk-nav__list .sub-menu a:hover { color: #fff; }

body.srk-builder .srk-btn--red,
body.srk-builder .srk-btn--ink { color: #fff; }
body.srk-builder .srk-btn--yellow,
body.srk-builder .srk-btn--outline { color: var(--srk-ink); }
body.srk-builder .srk-btn--outline-light { color: #fff; }
body.srk-builder .srk-btn { font-size: 11.5px; }

body.srk-builder .srk-search__field { color: #fff; font-size: 14px; }
body.srk-builder .srk-search__submit { color: var(--srk-quiet); font-size: 11px; }
body.srk-builder .srk-quickorder__sku { font-family: var(--srk-mono); font-size: 13px; color: var(--srk-ink); }
body.srk-builder .srk-quickorder__label { color: var(--srk-yellow); font-size: 11px; }
body.srk-builder .srk-quickorder__note { color: var(--srk-quiet); font-size: 13px; }

body.srk-builder .srk-footer__list a { color: var(--srk-muted-dark); font-size: 14px; }
body.srk-builder .srk-footer__list a:hover { color: #fff; }
body.srk-builder .srk-footer__phone { color: #fff; font-size: 26px; }
body.srk-builder .srk-footer__email { color: var(--srk-muted-dark); font-size: 14px; }
body.srk-builder .srk-footer__cert { color: var(--srk-yellow); }
body.srk-builder .srk-footer__branchname { color: var(--srk-yellow); }

body.srk-builder .srk-content a { color: var(--srk-red-text); }
body.srk-builder .lbl { font-size: 11px; }


/* ===========================================================================
   Shared catalogue furniture
   Lives here rather than in home.css because the product card, the section
   heading and the quantity stepper are used by the homepage AND every archive.
   One definition, one place to change it.
   ========================================================================== */

.srk-h2 {
	font-size: var(--srk-h2);
	line-height: 1.0;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- section heading ---- */

.srk-secthead {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 34px;
}
.srk-secthead__eyebrow { color: var(--srk-eyebrow); margin: 0 0 16px; }
.srk-secthead__more {
	margin-left: auto;
	color: var(--srk-red-text);
	white-space: nowrap;
	padding-bottom: 4px;
}
.srk-secthead__more:hover { color: var(--srk-ink); }

.srk-pcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
/* The archive grid runs three across, with the filter rail taking the fourth column. */
.srk-pcards--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) {
	.srk-pcards, .srk-pcards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.srk-pcards, .srk-pcards--grid { grid-template-columns: minmax(0, 1fr); }
}
.srk-pcard {
	position: relative;
	background: #fff;
	border: 1px solid var(--srk-line);
	display: flex;
	flex-direction: column;
}

.srk-pcard__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--srk-z-content);
	padding: 6px 11px;
	font-size: 9.5px;
}
.srk-pcard__badge--in    { background: var(--srk-red); color: #fff; }
.srk-pcard__badge--order { background: var(--srk-yellow); color: var(--srk-ink); }
.srk-pcard__badge--sale  { background: var(--srk-ink);    color: var(--srk-yellow); }
.srk-pcard__media {
	display: block;
	height: 290px;
	background-color: #fff;
	overflow: hidden;
	padding: 14px;
}
/*
 * `contain` on a taller box with a little padding: these are white-background renders, so
 * the product gets as much of the card as it can without touching the border.
 *
 * The selector carries the element as well as the class on purpose. WooCommerce ships
 * `.woocommerce img { height: auto }` - a class and an element, so 0,1,1 - which beats a
 * plain `.srk-pcard__img` at 0,1,0 whatever the load order. On a product page, where that
 * wrapper class is present, the image ignored its box and overflowed it; on an archive,
 * where it is not, the same markup behaved. Anything setting a height on an image the
 * theme owns has to out-specify that rule.
 */
.srk-pcard__media img.srk-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.srk-pcard__media--empty { background-image: linear-gradient(135deg, #F4F1EB, #E8E3D9); }

.srk-pcard__body {
	padding: 16px 17px 18px;
	border-top: 1px solid var(--srk-line);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.srk-pcard__sku,
.srk-pcard__meta { font-size: 11px; color: var(--srk-quiet); margin: 0 0 12px; line-height: 1.5; }
.srk-pcard__title { font-size: 15.5px; line-height: 1.3; margin: 0 0 8px; min-height: 40px; }
.srk-pcard__title a:hover { color: var(--srk-red-text); }

.srk-pcard__stock {
	font-size: 12.5px;
	color: var(--srk-soft);
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
}
.srk-pcard__dot { width: 7px; height: 7px; border-radius: 50%; background: #2E8B57; display: inline-block; flex-shrink: 0; }
.srk-pcard__stock--out .srk-pcard__dot { background: var(--srk-yellow); }

/* The price follows the part number directly; it is the buy row that is pushed to the foot
   of the card, so cards of different title lengths still line their buttons up. */
.srk-pcard__price {
	font-size: 27px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 14px;
}
.srk-pcard__price del { font-size: 15px; color: var(--srk-soft); }
.srk-pcard__price ins { text-decoration: none; }
.srk-pcard__gst { font-size: 14px; color: var(--srk-soft); letter-spacing: 0; }

.srk-pcard__buy { display: flex; gap: 8px; margin-top: auto; }
.srk-pcard__add { flex: 1; padding: 0; height: 42px; line-height: 42px; font-size: 11px; }
.srk-pcard__add--full { width: 100%; margin-top: auto; }

.srk-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--srk-line);
	height: 42px;
	flex-shrink: 0;
}
.srk-qty__step {
	width: 22px;
	height: 40px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--srk-soft);
	cursor: pointer;
	padding: 0;
}
.srk-qty__step:hover { color: var(--srk-ink); }
.srk-qty__input {
	width: 28px;
	height: 40px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--srk-ink);
	text-align: center;
	padding: 0;
	appearance: textfield;
	-moz-appearance: textfield;
}
.srk-qty__input::-webkit-outer-spin-button,
.srk-qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* --------------------------------------------------- the floor-plan CTA ---- */
/*
 * Lives here, not in home.css, because every template ends with it - the homepage, the
 * catalogue archive, and the product page next. It was in home.css until the archive
 * rendered the markup with none of the styles and the red band came out as paper with
 * invisible white buttons on it.
 */
/* ----------------------------------------------------------- floor plan ---- */

.srk-cta { background: var(--srk-red); color: #fff; }
.srk-cta__inner { display: flex; gap: 60px; align-items: flex-start; }
.srk-cta__copy { flex: 1; }
.srk-cta__eyebrow { color: var(--srk-red-ink); margin: 0 0 22px; }
.srk-cta__title {
	font-size: clamp(38px, 4.4vw, 62px);
	line-height: 0.98;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.srk-cta__body { color: var(--srk-red-ink); max-width: 470px; margin: 0; }
.srk-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 280px;
	flex-shrink: 0;
	padding-top: 56px;
}


@media (max-width: 900px) {
	.srk-cta__inner { flex-direction: column; gap: 28px; }
	.srk-cta__actions { width: 100%; padding-top: 0; }
	.srk-cta__actions .srk-btn { width: 100%; }
}

/* ------------------------------------------- stray page-builder markup ---- */
/*
 * Elementor Pro injects its popup and floating-button documents into wp_footer on every
 * page, as siblings of our <footer>. Its own stylesheet is what normally keeps them
 * hidden; on pages where inc/elementor-diet.php has dequeued that stylesheet they
 * rendered as empty containers below the footer. `srk-builder` marks the pages that still
 * load Elementor's own CSS: those keep their working popups, everything else hides the
 * leftovers.
 */
body:not(.srk-builder) > .elementor,
body:not(.srk-builder) > .elementor-popup-modal,
body:not(.srk-builder) > [data-elementor-type="popup"],
body:not(.srk-builder) > [data-elementor-type="floating-buttons"] { display: none !important; }

/* --------------------------------------------- Advanced Woo Search in the bar ---- */
/*
 * AWS filters `get_search_form()` and replaces the theme's form with its own, which is the
 * right outcome - it is a real AJAX product search, which a plain WordPress search box is
 * not - but it arrives with its own markup and its own styling. These rules dress it as the
 * dark field the design calls for. Two classes each, so they beat AWS's own single-class
 * rules without resorting to !important.
 *
 * If AWS is ever deactivated, searchform.php renders again and .srk-search takes over.
 */
.srk-toolbar .aws-container { width: 430px; max-width: 100%; flex-shrink: 0; padding: 0; }
.srk-toolbar .aws-search-form {
	height: 38px;
	background: var(--srk-ink-soft);
	border: 1px solid var(--srk-ink-line);
	border-radius: 0;
	box-shadow: none;
}
.srk-toolbar .aws-wrapper { background: transparent; }
.srk-toolbar .aws-search-field {
	height: 36px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 14px;
	font-family: var(--srk-font);
	font-size: 14px;
	color: #fff;
}
.srk-toolbar .aws-search-field::placeholder { color: var(--srk-quiet); opacity: 1; }
.srk-toolbar .aws-search-btn { background: transparent; border: 0; }
.srk-toolbar .aws-search-btn svg { fill: var(--srk-quiet); }
.srk-toolbar .aws-search-clear span { color: var(--srk-quiet); }

/* The category dropdown is a second decision before the customer has typed anything.
   The design asks for one field; this keeps it to one.

   Four classes deep, matching AWS's own `.aws-container .aws-search-form .aws-form-btn`,
   which is three and beat the two-class version of this rule. Specificity, not !important:
   a plugin that raises its own selectors later should be able to win back. */
.srk-toolbar .aws-container .aws-search-form .aws-main-filter { display: none; }
.srk-toolbar .aws-container .aws-search-form .aws-search-btn { background: transparent; border: 0; }

@media (max-width: 1100px) {
	.srk-toolbar .aws-container { width: 100%; }
}

/* The part number in the results dropdown.
   AWS prints it once "Show product SKU" is on, and sets it in #aaa - about 2.3:1 on white,
   which fails contrast at 12px and reads as disabled text. On this catalogue the part number
   is the thing trade customers search by, so it is set like the part number on a product
   card: mono, and dark enough to read. AWS's own rule is `.aws-search-result
   .aws_result_sku` at (0,2,0), so this is written at (0,3,0) to win without !important. */
.srk-theme .aws-search-result .aws_result_sku {
	font-family: var(--srk-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--srk-soft);
	margin-top: 4px;
}

/* ============================================================================
 * REVIEWS — shared furniture, so it lives here rather than in a page stylesheet.
 * ==========================================================================*/

.srk-stars { position: relative; display: inline-block; line-height: 0; }
.srk-stars__off,
.srk-stars__on { display: flex; gap: 2px; }
.srk-stars svg {
	flex: 0 0 auto;
	display: block;
	height: var(--srk-star-size, 18px);
	width: calc(var(--srk-star-size, 18px) * 20 / 19);
}
.srk-stars__off svg { fill: var(--srk-line); }
.srk-stars__on {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--srk-star-fill, 100%);
	overflow: hidden;
}
.srk-stars__on svg { fill: var(--srk-yellow); }

/* The one-line rating. (.srk-trust is already the product page's delivery points.) */
.srk-rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--srk-soft);
}
.srk-rating__text strong { color: var(--srk-text-strong); font-size: 14px; }

/* The section. */
.srk-reviews__head {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--srk-line);
}
.srk-reviews__score {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding-right: 22px;
	border-right: 1px solid var(--srk-line);
}
.srk-reviews__value {
	font-size: clamp(40px, 5vw, 58px);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--srk-ink);
}
.srk-reviews__outof { font-size: 15px; color: var(--srk-quiet); }
.srk-reviews__count { margin: 8px 0 0; font-size: 13px; color: var(--srk-soft); }
.srk-reviews__count strong { color: var(--srk-ink); }
.srk-reviews__title {
	justify-self: end;
	margin: 0;
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--srk-ink);
}

.srk-reviews__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.srk-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 28px 24px;
	background: var(--srk-white);
	border: 1px solid var(--srk-line);
}
.srk-review__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--srk-ink);
	/* Long and short reviews sit in one row; clamping keeps the row from being set by the
	   one person who wrote an essay. */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.srk-review__by {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: auto 0 0;
	font-size: 12.5px;
}
.srk-review__name { font-weight: 700; color: var(--srk-ink); }
.srk-review__date { color: var(--srk-quiet); }

.srk-reviews__source {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 22px 0 0;
	font-size: 13px;
}
.srk-reviews__source a { color: var(--srk-red-text); font-weight: 700; }
.srk-reviews__via { color: var(--srk-quiet); }

@media (max-width: 1200px) {
	.srk-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.srk-reviews__list { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
	.srk-reviews__head { grid-template-columns: auto 1fr; gap: 0 18px; }
	.srk-reviews__title { grid-column: 1 / -1; justify-self: start; margin-bottom: 18px; order: -1; }
}

/* ============================================================================
 * LIGHTBOX — used by the product gallery and by the installation photographs on a
 * category, so it belongs here rather than in a page stylesheet.
 * ==========================================================================*/

/* A photograph that opens in the overlay says so with the cursor, and shows a focus ring
   when it is reached by keyboard - theme.js gives these images a tabindex. */
.srk-pshot a,
.srk-cshots__grid img,
.srk-about__body img,
.srk-prose a[href$=".jpg"] img,
.srk-prose a[href$=".jpeg"] img,
.srk-prose a[href$=".png"] img,
.srk-prose a[href$=".webp"] img { cursor: zoom-in; }
img[data-srk-zoom]:focus-visible { outline: 3px solid var(--srk-yellow); outline-offset: 2px; }

.srk-vbox {
	position: fixed;
	inset: 0;
	z-index: var(--srk-z-lightbox);
	background: rgba(10, 11, 12, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.srk-vbox__inner {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	max-height: 100%;
	background: #000;
}
.srk-vbox__frame { width: 100%; height: 100%; border: 0; display: block; }
.srk-vbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.srk-vbox__close::before,
.srk-vbox__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 2px;
	margin: -1px 0 0 -12px;
	background: #fff;
}
.srk-vbox__close::before { transform: rotate(45deg); }
.srk-vbox__close::after  { transform: rotate(-45deg); }
.srk-vbox__close:hover::before,
.srk-vbox__close:hover::after { background: var(--srk-yellow); }


.srk-vbox--photo .srk-vbox__inner {
	aspect-ratio: auto;
	width: auto;
	max-width: min(1300px, 100%);
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.srk-vbox__photo { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; }

@media (max-width: 620px) {
	.srk-vbox { padding: 12px; }
	.srk-vbox__close { top: 6px; right: 6px; }
}

/* ------------------------------------------------------- client logos ----
   Two rows that scroll sideways. Shared by the home page and About Us, so it
   lives here rather than in home.css or page.css.

   The row count is fixed at two - that is the design - and the overflow goes
   across instead of down. `--srk-logo-cols` is how many columns are visible;
   the track's column width is derived from it, so one number per breakpoint
   changes the whole thing. Native scrolling with snap points means it works by
   swipe and by keyboard with no script at all; theme.js only adds the arrows.
   ------------------------------------------------------------------------- */

.srk-logos {
	--srk-logo-cols: 7;
	--srk-logo-gap: 12px;
	padding-block: 56px;
}
.srk-logos__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 22px;
}
.srk-logos__title { color: var(--srk-soft); margin: 0; }
.srk-logos__nav { display: flex; gap: 8px; flex-shrink: 0; }
.srk-logos__btn {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--srk-line);
	background: #fff;
	color: var(--srk-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.srk-logos__btn:hover:not([disabled]) { border-color: var(--srk-ink); }
.srk-logos__btn[disabled] { opacity: 0.3; cursor: default; }

.srk-logos__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.srk-logos__viewport::-webkit-scrollbar { display: none; }
.srk-logos__viewport:focus-visible { outline: 2px solid var(--srk-red); outline-offset: 3px; }

.srk-logos__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	gap: var(--srk-logo-gap);
	grid-auto-columns: calc(
		(100% - (var(--srk-logo-cols) - 1) * var(--srk-logo-gap)) / var(--srk-logo-cols)
	);
}
.srk-logos__item {
	background: #fff;
	border: 1px solid var(--srk-line);
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin: 0;
	scroll-snap-align: start;
}
.srk-logos__item img { max-height: 44px; width: auto; }

@media (max-width: 1180px) { .srk-logos { --srk-logo-cols: 4; } }
@media (max-width: 700px)  { .srk-logos { --srk-logo-cols: 3; } }
@media (max-width: 480px)  { .srk-logos { --srk-logo-cols: 2; } }

/* The scroller does its own thing; a reduced-motion preference only asks that it
   not animate on the way. */
@media (prefers-reduced-motion: reduce) {
	.srk-logos__viewport { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ webp wrappers
 *
 * Imagify's "picture tag" WebP mode rewraps every <img> in a <picture> and carries the
 * element's class up onto the wrapper. Two consequences, both of which look like a broken
 * stylesheet rather than a plugin:
 *
 *   1. Rules written as `img.srk-pcard__img` stop matching altogether. Several of them are
 *      written that way on purpose - WooCommerce ships `.woocommerce img { height: auto }`
 *      at 0,1,1 and a bare class cannot beat it - so the fix for one problem is what makes
 *      this one bite.
 *   2. The inner <img> is left with no class at all, so it renders at its natural aspect
 *      inside a fixed-height box. On a square product cut-out in a 236px tile that reads as
 *      a photograph zoomed most of the way in.
 *
 * Staging never showed it because Imagify is not active there. Rather than turn the plugin's
 * WebP delivery off, every container the theme owns is told how to treat an <img> inside it,
 * whichever element ended up wearing the class.
 */
.srk-tile__media picture,
.srk-pcard__media picture,
.srk-showcase__tile picture,
.srk-archhead__media picture,
.srk-hero__media picture,
.srk-postcard__media picture,
.srk-relcard__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Cover: photographs that should fill their box and crop. */
.srk-tile__media picture > img,
.srk-showcase__tile picture > img,
.srk-archhead__media picture > img,
.srk-hero__media picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Contain: white-background product renders that must not be cropped. */
.srk-pcard__media picture > img,
.srk-relcard__media picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* No fixed height on this one, so the image keeps its own proportions. */
.srk-postcard__media picture {
	height: auto;
}
.srk-postcard__media picture > img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}