/*
Theme Name: Steadfast
Theme URI: https://steadfastherambh.com/
Author: Steadfast
Author URI: https://steadfastherambh.com/
Description: A clean, minimal block theme for Steadfast — note counting machines, mix value counters and paper shredders. Full-site editing, WooCommerce ready, and built to play nicely with both the core Gutenberg editor and Kadence Blocks.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steadfast
Tags: e-commerce, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, wide-blocks, block-styles, accessibility-ready
*/

/* ==========================================================================
   Steadfast — table of contents
   --------------------------------------------------------------------------
   01. Tokens & base
   02. Typography helpers
   03. Buttons & links
   04. Announcement bar
   05. Header, navigation, mega menu
   06. Mobile drawer & search overlay
   07. Hero
   08. Product cards & grids (WooCommerce)
   09. Split category banners
   10. Editorial sections & stats
   11. Accordion (FAQ) & spec tables
   12. Single product
   12c. Catalogue toolbar, breadcrumbs & notices
   13. Footer
   14. Utilities
   15. Motion, focus & reduced-motion
   16. Responsive
   ========================================================================== */

/* 01. Tokens & base
   ========================================================================== */

:root {
	--sf-line: var( --wp--preset--color--line, #e2dfd9 );
	--sf-contrast: var( --wp--preset--color--contrast, #141414 );
	--sf-base: var( --wp--preset--color--base, #fff );
	--sf-surface: var( --wp--preset--color--surface, #f5f4f1 );
	--sf-muted: var( --wp--preset--color--muted, #6b6b6b );
	--sf-accent: var( --wp--preset--color--accent, #c8451e );
	--sf-ease: 220ms cubic-bezier( 0.4, 0, 0.2, 1 );
	--sf-header-h: 72px;
	--sf-announce-h: 36px;
	--sf-header-total: calc( var( --sf-header-h ) + var( --sf-announce-h ) );
	--sf-gutter: clamp( 1rem, 0.5rem + 2vw, 2.5rem );
	--sf-z-header: 1000;
	--sf-z-float: 990;
}

/* Padding and borders count inside an element's width. Without this, a
   full-width button — 100% wide plus its own padding — spills out of its
   column, which is what pushed buttons off the edge of product pages and
   product cards. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

/* Header, page and footer sit flush. WordPress spaces the site's top-level
   blocks with the global block gap, which would otherwise open a white strip
   under the header and between the dark enquiry band and the dark footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Tabular, aligned numerals wherever figures line up. */
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price,
.sf-spec-table td,
.sf-stat__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

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

/* 02. Typography helpers
   ========================================================================== */

.sf-eyebrow {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --sf-muted );
	margin: 0 0 1rem;
	display: block;
}

.sf-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sf-lead {
	font-size: clamp( 1rem, 0.95rem + 0.35vw, 1.1875rem );
	line-height: 1.6;
	color: var( --sf-muted );
}

.sf-balance {
	text-wrap: balance;
}

.sf-mono {
	font-family: var( --wp--preset--font-family--display );
	letter-spacing: -0.01em;
}

/* Section headings sit centred with a measured max-width, like the reference. */
.sf-section-head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.sf-section-head > * {
	margin-inline: auto;
}

/* Interior pages (About, Contact, FAQs) open one size down from the home
   hero, so a two-line headline stays two lines. */
.sf-page-intro h1 {
	font-size: var( --wp--preset--font-size--xx-large );
	line-height: 1.08;
}

/* 03. Buttons & links
   ========================================================================== */

/* Block buttons (core/button) take their base look from theme.json. `.sf-btn`
   is the same button for markup the theme writes itself — WhatsApp, call,
   the mobile menu — so every button on the site shares one set of metrics. */
.wp-block-button__link,
.sf-btn {
	transition: background-color var( --sf-ease ), color var( --sf-ease ),
		border-color var( --sf-ease );
	text-decoration: none;
}

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.875rem 1.5rem;
	border: 1px solid var( --sf-contrast );
	border-radius: 0;
	background: transparent;
	color: var( --sf-contrast );
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.sf-btn:hover,
.sf-btn:focus-visible {
	background-color: var( --sf-contrast );
	color: var( --sf-base );
	text-decoration: none;
}

.sf-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: currentColor;
	transition: fill var( --sf-ease );
}

/* Fills its container — the product page's action stack, the mobile menu. */
.sf-btn--block {
	display: flex;
	width: 100%;
}

.sf-btn--solid {
	background-color: var( --sf-contrast );
	color: var( --sf-base );
}

.sf-btn--solid:hover,
.sf-btn--solid:focus-visible {
	background-color: transparent;
	color: var( --sf-contrast );
}

/* Outline — the default CTA over imagery. */
.wp-block-button.is-style-sf-outline .wp-block-button__link {
	background-color: transparent;
	color: var( --sf-contrast );
	border: 1px solid var( --sf-contrast );
}

.wp-block-button.is-style-sf-outline .wp-block-button__link:hover,
.wp-block-button.is-style-sf-outline .wp-block-button__link:focus-visible {
	background-color: var( --sf-contrast );
	color: var( --sf-base );
}

/* Outline, light — for use on dark imagery. */
.wp-block-button.is-style-sf-outline-light .wp-block-button__link,
.sf-btn--outline-light {
	background-color: transparent;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.85 );
}

.wp-block-button.is-style-sf-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-sf-outline-light .wp-block-button__link:focus-visible,
.sf-btn--outline-light:hover,
.sf-btn--outline-light:focus-visible {
	background-color: #fff;
	color: var( --sf-contrast );
	border-color: #fff;
}

/* Solid white — for dark sections. */
.wp-block-button.is-style-sf-light .wp-block-button__link {
	background-color: #fff;
	color: var( --sf-contrast );
	border-color: #fff;
}

.wp-block-button.is-style-sf-light .wp-block-button__link:hover,
.wp-block-button.is-style-sf-light .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}

/* Underlined text link with an animated rule — used for "Read more". */
.wp-block-button.is-style-sf-link .wp-block-button__link,
.sf-link {
	background: none;
	border: 0;
	padding: 0;
	color: var( --sf-contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9375rem;
	font-weight: 500;
	position: relative;
	display: inline-block;
}

.wp-block-button.is-style-sf-link .wp-block-button__link::after,
.sf-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transition: transform var( --sf-ease );
}

.wp-block-button.is-style-sf-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-sf-link .wp-block-button__link:focus-visible::after,
.sf-link:hover::after,
.sf-link:focus-visible::after {
	transform: scaleX( 0 );
	transform-origin: left;
}

/* WhatsApp — full width wherever it appears, with the green glyph as the only
   brand cue, so it sits inside the minimal palette. */
.sf-btn--whatsapp {
	display: flex;
	width: 100%;
}

.sf-btn--whatsapp svg {
	fill: #25d366;
}

.sf-btn--whatsapp:hover svg,
.sf-btn--whatsapp:focus-visible svg {
	fill: currentColor;
}

/* Solid — the primary action on a product page, in place of Add to cart. */
.sf-btn--whatsapp.is-style-solid {
	background-color: var( --sf-contrast );
	color: var( --sf-base );
}

.sf-btn--whatsapp.is-style-solid:hover,
.sf-btn--whatsapp.is-style-solid:focus-visible {
	background-color: transparent;
	color: var( --sf-contrast );
}

.sf-btn--whatsapp.is-style-solid:hover svg,
.sf-btn--whatsapp.is-style-solid:focus-visible svg {
	fill: #25d366;
}

/* Floating WhatsApp bubble. Sits below the header layer so the open mobile
   menu covers it. */
.sf-whatsapp-float {
	position: fixed;
	right: clamp( 1rem, 2vw, 1.75rem );
	bottom: clamp( 1rem, 2vw, 1.75rem );
	z-index: var( --sf-z-float );
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 20px rgba( 20, 20, 20, 0.18 );
	transition: transform var( --sf-ease );
}

.sf-whatsapp-float:hover {
	transform: scale( 1.06 );
}

.sf-whatsapp-float svg {
	width: 27px;
	height: 27px;
	fill: #fff;
}

/* 04. Announcement bar
   ========================================================================== */

.sf-announce {
	background: var( --sf-contrast );
	color: #fff;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	height: var( --sf-announce-h );
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.sf-announce a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Rotating messages: one visible at a time, cross-faded by JS. */
.sf-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 500ms ease, transform 500ms ease, visibility 500ms;
	text-align: center;
}

.sf-announce__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* 05. Header, navigation, mega menu
   ========================================================================== */

.sf-header {
	position: sticky;
	top: 0;
	z-index: var( --sf-z-header );
	background: var( --sf-base );
	border-bottom: 1px solid transparent;
	transition: background-color var( --sf-ease ), border-color var( --sf-ease ),
		color var( --sf-ease );
}

.sf-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: var( --sf-header-h );
	padding-inline: var( --sf-gutter );
}

.sf-header__nav {
	justify-self: start;
}

.sf-header__brand {
	justify-self: center;
}

.sf-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: clamp( 0.75rem, 1.4vw, 1.25rem );
}

.sf-header__brand .wp-block-site-logo img {
	max-height: 34px;
	width: auto;
}

.sf-header__brand .wp-block-site-title a {
	text-decoration: none;
	letter-spacing: -0.03em;
}

/* Transparent over a hero image, then solid once scrolled or hovered. */
body.sf-has-hero .sf-header:not( .is-solid ) {
	background: transparent;
	color: #fff;
}

body.sf-has-hero .sf-header:not( .is-solid ) a,
body.sf-has-hero .sf-header:not( .is-solid ) .sf-icon-btn {
	color: #fff;
}

body.sf-has-hero .sf-header:not( .is-solid ) .sf-icon-btn svg {
	stroke: #fff;
}

body.sf-has-hero .sf-header:not( .is-solid ) .sf-icon-btn--whatsapp svg {
	stroke: none;
	fill: #fff;
}

body.sf-has-hero .sf-header:not( .is-solid ) .sf-header__brand img {
	filter: brightness( 0 ) invert( 1 );
}

.sf-header.is-solid {
	border-bottom-color: var( --sf-line );
}

/* Primary nav links */
.sf-nav {
	display: flex;
	align-items: center;
	gap: clamp( 1rem, 2vw, 2rem );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-nav__link {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	padding-block: 0.5rem;
	position: relative;
	white-space: nowrap;
	display: inline-block;
}

.sf-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 1px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform var( --sf-ease );
}

.sf-nav__link:hover::after,
.sf-nav__link:focus-visible::after,
.sf-nav__item.is-open .sf-nav__link::after,
.sf-nav__link[aria-current="page"]::after {
	transform: scaleX( 1 );
}

.sf-nav__link--sale {
	color: var( --sf-accent );
}

/* Also style the core Navigation block when it is used instead. */
.sf-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.sf-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var( --sf-line );
	border-radius: 0;
	background: var( --sf-base );
	padding: 0.5rem 0;
	min-width: 16rem;
	box-shadow: 0 12px 32px rgba( 20, 20, 20, 0.07 );
}

.sf-header
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding: 0.5rem 1.25rem;
	font-size: 0.9375rem;
}

/* --- Mega menu panel --- */

.sf-nav__item {
	position: static;
}

.sf-megamenu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var( --sf-base );
	color: var( --sf-contrast );
	border-top: 1px solid var( --sf-line );
	border-bottom: 1px solid var( --sf-line );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity var( --sf-ease ), transform var( --sf-ease ),
		visibility var( --sf-ease );
	z-index: 70;
}

.sf-nav__item.is-open .sf-megamenu,
.sf-megamenu:hover,
.sf-megamenu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sf-megamenu__inner {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) repeat( 2, minmax( 0, 1.1fr ) );
	gap: clamp( 1.5rem, 3vw, 3.5rem );
	max-width: var( --wp--style--global--wide-size, 87.5rem );
	margin-inline: auto;
	padding: clamp( 2rem, 3vw, 3.25rem ) var( --sf-gutter );
}

.sf-megamenu__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.0625rem;
	font-weight: 500;
	margin: 0 0 1.5rem;
}

.sf-megamenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.sf-megamenu__list a {
	font-size: 0.9375rem;
	color: var( --sf-contrast );
	text-decoration: none;
	transition: opacity var( --sf-ease );
}

.sf-megamenu__list a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sf-megamenu__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sf-megamenu__card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var( --sf-surface );
	transition: opacity var( --sf-ease );
}

.sf-megamenu__card:hover img {
	opacity: 0.88;
}

.sf-megamenu__card span {
	display: block;
	margin-top: 0.875rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Icon buttons (search / account / cart) */
.sf-icon-btn {
	background: none;
	border: 0;
	padding: 0.35rem;
	cursor: pointer;
	color: var( --sf-contrast );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: 1;
	text-decoration: none;
}

.sf-icon-btn svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The WhatsApp glyph is a solid shape, not a stroked outline. */
.sf-icon-btn--whatsapp svg {
	fill: currentColor;
	stroke: none;
}

.sf-icon-btn__count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --sf-contrast );
	color: var( --sf-base );
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.625rem;
	display: grid;
	place-items: center;
}

/* WooCommerce mini-cart / account blocks, when used in the header. */
.sf-header__actions .wp-block-woocommerce-mini-cart,
.sf-header__actions .wp-block-woocommerce-customer-account {
	margin: 0;
}

.sf-header__actions .wc-block-mini-cart__button {
	padding: 0.35rem;
}

/* Hamburger */
.sf-burger {
	display: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	color: inherit;
}

.sf-burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform var( --sf-ease ), opacity var( --sf-ease );
}

.sf-burger span + span {
	margin-top: 5px;
}

.sf-burger[aria-expanded="true"] span:nth-child( 1 ) {
	transform: translateY( 6.5px ) rotate( 45deg );
}

.sf-burger[aria-expanded="true"] span:nth-child( 2 ) {
	opacity: 0;
}

.sf-burger[aria-expanded="true"] span:nth-child( 3 ) {
	transform: translateY( -6.5px ) rotate( -45deg );
}

/* 06. Mobile drawer & search overlay
   ========================================================================== */

.sf-drawer {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: var( --sf-base );
	transform: translateX( 100% );
	transition: transform 320ms cubic-bezier( 0.4, 0, 0.2, 1 );
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
}

.sf-drawer.is-open {
	transform: none;
	visibility: visible;
}

.sf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var( --sf-header-h );
	padding-inline: var( --sf-gutter );
	border-bottom: 1px solid var( --sf-line );
	flex: none;
}

.sf-drawer__body {
	padding: 1.5rem var( --sf-gutter ) 3rem;
}

.sf-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-drawer__list > li {
	border-bottom: 1px solid var( --sf-line );
}

.sf-drawer__list a,
.sf-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.05rem 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: none;
	color: var( --sf-contrast );
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.sf-drawer__toggle svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	transition: transform var( --sf-ease );
	flex: none;
}

.sf-drawer__toggle[aria-expanded="true"] svg {
	transform: rotate( 45deg );
}

.sf-drawer__sub {
	display: none;
	padding: 0 0 0.75rem 0.25rem;
	list-style: none;
	margin: 0;
}

.sf-drawer__sub.is-open {
	display: block;
}

.sf-drawer__sub a {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9375rem;
	font-weight: 400;
	padding: 0.55rem 0;
	color: var( --sf-muted );
	border: 0;
}

.sf-drawer__foot {
	margin-top: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Search overlay */
.sf-search {
	position: fixed;
	inset: 0;
	z-index: 96;
	background: rgba( 255, 255, 255, 0.98 );
	backdrop-filter: blur( 6px );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --sf-ease ), visibility var( --sf-ease );
	padding-top: clamp( 4rem, 14vh, 9rem );
}

.sf-search.is-open {
	opacity: 1;
	visibility: visible;
}

.sf-search__inner {
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: var( --sf-gutter );
}

.sf-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid var( --sf-contrast );
	border-radius: 0;
	background: transparent;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.25rem, 3vw, 2rem );
	padding: 0.75rem 0;
}

.sf-search .wp-block-search__input:focus {
	outline: none;
}

.sf-search .wp-block-search__button {
	background: none;
	border: 0;
	color: var( --sf-contrast );
}

.sf-search__close {
	position: absolute;
	top: 1.5rem;
	right: var( --sf-gutter );
}

body.sf-locked {
	overflow: hidden;
}

/* 07. Hero
   ========================================================================== */

/* The hero is a core Cover block, so the image or video can be swapped in the
   editor like any other block. `.sf-hero` only adjusts scale and rhythm. */
.sf-hero.wp-block-cover {
	min-height: clamp( 30rem, 88vh, 54rem );
	padding: clamp( 3rem, 8vh, 6rem ) var( --sf-gutter );
	align-items: center;
	justify-content: center;
}

/* Pull the hero up so the transparent nav bar floats over the artwork. The
   announcement bar above it keeps its own solid background. */
body.sf-has-hero .sf-hero.wp-block-cover {
	/* The extra pixel covers the header's 1px bottom rule, which would
	   otherwise show as a white hairline above the footage. */
	margin-top: calc( -1 * var( --sf-header-h ) - 1px );
	padding-top: calc( var( --sf-header-h ) + 1px + clamp( 3rem, 8vh, 6rem ) );
}

.sf-hero .wp-block-cover__inner-container {
	max-width: 48rem;
	text-align: center;
}

.sf-hero :where( h1, h2 ) {
	color: #fff;
	margin: 0 0 1rem;
}

.sf-hero p {
	color: rgba( 255, 255, 255, 0.92 );
	font-size: clamp( 1rem, 0.95rem + 0.4vw, 1.25rem );
	margin: 0 0 2rem;
	max-width: 36rem;
	margin-inline: auto;
}

.sf-hero .wp-block-buttons {
	justify-content: center;
}

/* A gentle top-and-bottom scrim on top of the Cover overlay, so the headline
   and the transparent header both stay legible over busy footage. */
.sf-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 0, 0, 0, 0.38 ) 0%,
		rgba( 0, 0, 0, 0.08 ) 38%,
		rgba( 0, 0, 0, 0.08 ) 62%,
		rgba( 0, 0, 0, 0.3 ) 100%
	);
}

.sf-hero.wp-block-cover .wp-block-cover__inner-container {
	z-index: 2;
}

/* Compact hero for interior pages. */
.sf-hero--compact.wp-block-cover {
	min-height: clamp( 18rem, 44vh, 26rem );
}

/* 08. Product cards & grids (WooCommerce)
   ========================================================================== */

/* Column counts are set here outright — four across, three on tablets, two on
   phones — instead of being left to WooCommerce's auto-fill formula. That
   formula assumes WooCommerce's own 1.25em gap, so any wider gap makes the
   fourth column no longer fit and the grid silently drops to three. */
.wc-block-product-template.wc-block-product-template__responsive {
	gap: clamp( 2.25rem, 1.5rem + 2vw, 3.5rem ) clamp( 0.875rem, 0.5rem + 1vw, 1.5rem );
}

.wc-block-product-template__responsive.columns-6 {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
}

.wc-block-product-template__responsive.columns-5 {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
}

.wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.wc-block-product-template__responsive.columns-3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.wc-block-product-template__responsive.columns-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/* Each card is a column, so the enquiry buttons line up along the bottom of a
   row however long the name or description above them runs. It is also a
   size container, which lets the button shorten its label on narrow cards. */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	margin: 0;
	text-align: left;
	container-type: inline-size;
}

/* In the grid layouts the column sets each card's width, so a card may shrink
   below its content. This must NOT reach the carousel layout: WooCommerce
   sizes carousel cards purely through min-width (42.5% of the row on phones
   down to 15% on wide screens), and zeroing it collapses every card to
   nothing — titles then stack one letter per line. */
.wc-block-product-template__responsive .wc-block-product {
	min-width: 0;
}

/* Image tile. The machines are photographed on white, so the photo blends into
   the soft tile and each product appears to stand on the page. */
.wc-block-product-template .wc-block-components-product-image {
	margin: 0 0 1.125rem;
	background: var( --sf-surface );
	overflow: hidden;
}

.wc-block-product-template .wc-block-components-product-image a {
	display: block;
}

/* Products are always shown whole. The Product Image block defaults to
   "cover", which crops machines at the edges, and writes it as an inline
   style — hence the !important. */
.wc-block-product-template .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	padding: 9%;
	mix-blend-mode: multiply;
	transition: transform 420ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale( 1.035 );
}

/* Name */
.wc-block-product-template .wp-block-post-title {
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: var( --sf-contrast );
}

.wc-block-product-template .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Cards with no description (related products) still keep air above the
   button. */
.wc-block-product-template .wp-block-post-title:has( + .sf-btn ) {
	margin-bottom: 1rem;
}

.wc-block-product-template .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Two-line descriptor under the name. */
.wc-block-product-template .wp-block-woocommerce-product-summary {
	margin: 0 0 1.125rem;
}

.sf-product-card__desc,
.sf-product-card__desc p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var( --sf-muted );
}

.sf-product-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* Enquiry button, pinned to the foot of the card. Quieter than on the product
   page: a hairline rule that fills on hover. */
.wc-block-product-template .sf-btn--whatsapp {
	margin-top: auto;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	gap: 0.5rem;
	font-size: 0.8125rem;
	border-color: var( --sf-line );
}

.wc-block-product-template .sf-btn--whatsapp:hover,
.wc-block-product-template .sf-btn--whatsapp:focus-visible {
	border-color: var( --sf-contrast );
}

.wc-block-product-template .sf-btn--whatsapp svg {
	width: 16px;
	height: 16px;
}

/* On a narrow card the label shortens to "Enquire"; the glyph says WhatsApp. */
@container ( max-width: 15rem ) {
	.sf-btn__more {
		display: none;
	}
}

/* Carousel previous / next buttons (Product Collection set to Carousel). By
   default they are borderless white squares, so only a tiny chevron shows. */
.wc-block-next-previous-buttons {
	gap: 0.5rem;
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var( --sf-line );
	border-radius: 0;
	background: var( --sf-base );
	color: var( --sf-contrast );
	cursor: pointer;
	transition: background-color var( --sf-ease ), color var( --sf-ease ),
		border-color var( --sf-ease ), opacity var( --sf-ease );
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:hover:not( :disabled ),
.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:focus-visible {
	background: var( --sf-contrast );
	border-color: var( --sf-contrast );
	color: var( --sf-base );
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Horizontal scroll rail for "Most popular" on phones. */
.sf-rail {
	scrollbar-width: none;
}

.sf-rail::-webkit-scrollbar {
	display: none;
}

/* Category chips on the shop archive. */
.sf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-chips a {
	display: inline-block;
	border: 1px solid var( --sf-line );
	padding: 0.55rem 1.1rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8125rem;
	text-decoration: none;
	color: var( --sf-contrast );
	transition: border-color var( --sf-ease ), background-color var( --sf-ease ),
		color var( --sf-ease );
	white-space: nowrap;
}

.sf-chips a:hover,
.sf-chips a[aria-current="page"],
.sf-chips a.is-active {
	background: var( --sf-contrast );
	border-color: var( --sf-contrast );
	color: var( --sf-base );
	text-decoration: none;
}

/* Pagination */
.wp-block-query-pagination,
.woocommerce-pagination ul {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.875rem;
	gap: 0.75rem;
	justify-content: center;
	border: 0;
}

.wp-block-query-pagination .page-numbers,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
	border: 0;
	padding: 0.35rem 0.6rem;
	text-decoration: none;
	color: var( --sf-muted );
	min-width: auto;
}

.wp-block-query-pagination .page-numbers.current,
.woocommerce-pagination ul li span.current {
	color: var( --sf-contrast );
	border-bottom: 1px solid var( --sf-contrast );
}

/* ---- Commerce styling (dormant in catalogue mode) ----
   The site shows no prices, sale badges or Add to cart buttons: see the
   catalogue-mode section of functions.php. These rules are kept so that
   turning the shop back on restores the styling with it, and cost nothing
   while the markup they target is never rendered. */

/* Price */
.wc-block-product-template .wp-block-woocommerce-product-price,
ul.products li.product .price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --sf-contrast );
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	flex-wrap: wrap;
}

.wc-block-components-product-price__regular,
ul.products li.product .price del {
	color: var( --sf-muted );
	opacity: 1;
	text-decoration: line-through;
	font-weight: 400;
}

ul.products li.product .price ins {
	text-decoration: none;
}

/* Sale badge — a quiet rule-bordered label rather than a filled pill. */
.wc-block-components-product-sale-badge,
ul.products li.product .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var( --sf-base );
	color: var( --sf-accent );
	border: 1px solid var( --sf-accent );
	border-radius: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 0.5rem;
	margin: 0;
	min-height: 0;
	line-height: 1;
}

/* Add-to-cart in the grid: a full-width hairline button. */
.wc-block-product-template .wp-block-button__link,
ul.products li.product .button {
	background: transparent;
	color: var( --sf-contrast );
	border: 1px solid var( --sf-line );
	border-radius: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.8rem 1rem;
	width: 100%;
	margin-top: 0.85rem;
	text-align: center;
	display: block;
}

.wc-block-product-template .wp-block-button__link:hover,
ul.products li.product .button:hover {
	background: var( --sf-contrast );
	color: var( --sf-base );
	border-color: var( --sf-contrast );
}


/* 09. Split category banners
   ========================================================================== */

/* Each panel is a Cover block, so the artwork and the label button stay
   editable. The wrapper is a Columns block with a hairline gap. */
.sf-split.wp-block-columns {
	gap: 2px;
	margin-block: 0;
}

.sf-split__item.wp-block-cover {
	min-height: clamp( 18rem, 34vw, 30rem );
	padding: clamp( 1rem, 2vw, 2rem );
	overflow: hidden;
	background: var( --sf-surface );
}

.sf-split__item .wp-block-cover__image-background,
.sf-split__item .wp-block-cover__video-background {
	transition: transform 600ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.sf-split__item:hover .wp-block-cover__image-background,
.sf-split__item:hover .wp-block-cover__video-background {
	transform: scale( 1.03 );
}

/* The label sits flush in the corner rather than floating in the middle. */
.sf-split__item .wp-block-buttons {
	margin: 0;
}

.sf-split__item .wp-block-button__link {
	padding: 0.9rem 1.75rem;
}

/* 10. Editorial sections & stats
   ========================================================================== */

.sf-editorial {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

.sf-editorial p {
	color: var( --sf-muted );
	font-size: clamp( 0.9375rem, 0.9rem + 0.3vw, 1.0625rem );
	line-height: 1.7;
}

/* Media-and-text band. Core Media & Text does the layout; this only sets the
   breathing room and stops the image panel collapsing on tall copy. */
.sf-band.wp-block-media-text {
	grid-template-rows: auto;
}

.sf-band .wp-block-media-text__media {
	min-height: clamp( 20rem, 40vw, 34rem );
}

.sf-band .wp-block-media-text__content {
	padding: clamp( 2rem, 5vw, 5rem );
}

.sf-band .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

.sf-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1px;
	background: var( --sf-line );
	border-block: 1px solid var( --sf-line );
}

.sf-stat {
	background: var( --sf-base );
	padding: clamp( 1.75rem, 3vw, 3rem ) clamp( 1rem, 2vw, 2rem );
	text-align: center;
}

.sf-stat__value {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.75rem, 1.2rem + 2vw, 2.75rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	display: block;
	margin-bottom: 0.6rem;
}

.sf-stat__label {
	font-size: 0.8125rem;
	color: var( --sf-muted );
	line-height: 1.5;
	margin: 0;
}

/* Feature trio with hairline separators. */
.sf-features {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.5rem, 3vw, 3.5rem );
}

/* A mono index number instead of an icon keeps the set typographic. */
.sf-feature__num {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var( --sf-muted );
	display: block;
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var( --sf-line );
}

.sf-feature h3 {
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
}

.sf-feature p {
	font-size: 0.9375rem;
	color: var( --sf-muted );
	margin: 0;
	line-height: 1.6;
}

/* 11. Accordion (FAQ) & spec tables
   ========================================================================== */

.sf-accordion {
	max-width: 52rem;
	margin-inline: auto;
	border-top: 1px solid var( --sf-line );
}

.sf-accordion details {
	border-bottom: 1px solid var( --sf-line );
}

.sf-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 2.5rem 1.35rem 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.0625rem;
	font-weight: 500;
	position: relative;
	transition: color var( --sf-ease );
}

.sf-accordion summary::-webkit-details-marker {
	display: none;
}

/* Plus that rotates into a minus. */
.sf-accordion summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 13px;
	height: 1.5px;
	background: currentColor;
	transform: translateY( -50% );
}

.sf-accordion summary::before {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 13px;
	height: 1.5px;
	background: currentColor;
	transform: translateY( -50% ) rotate( 90deg );
	transition: transform var( --sf-ease ), opacity var( --sf-ease );
}

.sf-accordion details[open] summary::before {
	transform: translateY( -50% ) rotate( 0deg );
	opacity: 0;
}

/* Everything after the summary is the answer body. Works with the core
   Details block and with hand-written <details> alike. */
.sf-accordion details > :not( summary ) {
	color: var( --sf-muted );
	font-size: 0.9375rem;
	line-height: 1.7;
	padding-right: 2.5rem;
	margin-block: 0 0.9rem;
	max-width: 52rem;
}

.sf-accordion details > :not( summary ):last-child {
	margin-bottom: 1.6rem;
}

/* The core Details block adds its own margins; neutralise them. */
.sf-accordion .wp-block-details {
	margin-block: 0;
}

/* Specification table */
.sf-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sf-spec-table th,
.sf-spec-table td {
	text-align: left;
	padding: 0.95rem 0;
	border-bottom: 1px solid var( --sf-line );
	vertical-align: top;
}

.sf-spec-table th {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 400;
	color: var( --sf-muted );
	width: 42%;
	padding-right: 1.5rem;
}

.sf-spec-table td {
	font-weight: 500;
}

/* 12. Single product
   ========================================================================== */

/* Gallery on the left, a sticky summary on the right. */
.sf-product {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	gap: clamp( 2rem, 1rem + 4vw, 5rem );
	align-items: start;
}

.sf-product__media {
	min-width: 0;
	position: relative;
}

/* --- Gallery ---
   WooCommerce's Product Image Gallery block prints the classic gallery markup
   and, on its own stylesheet, caps it at 512px and floats it. Here it fills
   the column instead. */
.sf-product__media .wp-block-woocommerce-product-image-gallery {
	width: 100%;
	max-width: none;
	margin: 0;
}

.sf-product__media .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	float: none;
}

.sf-product__media .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

/* The tile colour belongs on each slide, not on the column. The slider moves
   its track with a CSS transform, and a transformed parent cuts the photo off
   from any background further out — so its multiply blend has nothing to
   blend with and the photo's white backdrop shows as a box. */
.sf-product__media .woocommerce-product-gallery__image {
	margin: 0;
	background: var( --sf-surface );
}

.sf-product__media .woocommerce-product-gallery__image a {
	display: block;
	aspect-ratio: 1 / 1;
}

.sf-product__media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp( 1.5rem, 7%, 4rem );
	mix-blend-mode: multiply;
}

/* Thumbnails: one tidy row of small tiles, wrapping only when there are many. */
.sf-product__media .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 4.5rem, 1fr ) );
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sf-product__media .flex-control-thumbs li {
	margin: 0;
	background: var( --sf-surface );
}

.sf-product__media .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 0.35rem;
	mix-blend-mode: multiply;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var( --sf-ease ), box-shadow var( --sf-ease );
}

.sf-product__media .flex-control-thumbs img:hover,
.sf-product__media .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.sf-product__media .flex-control-thumbs img.flex-active {
	box-shadow: inset 0 0 0 1px var( --sf-contrast );
}

/* Full-screen lightbox trigger: a small, quiet button in the corner. It sits
   low in the stacking order so it can never ride over the header or the open
   mobile menu. */
.sf-product__media .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var( --sf-line );
	border-radius: 50%;
	background: var( --sf-base ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E" ) center / 1.1rem no-repeat;
	font-size: 0;
	transition: border-color var( --sf-ease );
}

.sf-product__media .woocommerce-product-gallery__trigger > * {
	display: none;
}

.sf-product__media .woocommerce-product-gallery__trigger:hover,
.sf-product__media .woocommerce-product-gallery__trigger:focus-visible {
	border-color: var( --sf-contrast );
}

/* --- Summary --- */
.sf-product__summary {
	position: sticky;
	top: calc( var( --sf-header-total ) + 1.5rem );
	min-width: 0;
	padding-top: 0.25rem;
}

.sf-product__summary .sf-eyebrow {
	margin-bottom: 1rem;
}

.sf-product__summary .wp-block-post-title {
	font-size: clamp( 1.875rem, 1.35rem + 1.6vw, 2.75rem );
	line-height: 1.08;
	margin: 0 0 1.25rem;
}

.sf-product__summary .wp-block-post-excerpt {
	margin: 0 0 2rem;
}

.sf-product__summary .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --sf-muted );
}

/* The action stack: Enquire on WhatsApp, then Call, full width. The call
   button arrives wrapped in a paragraph by the Shortcode block. */
.sf-product__summary > p:has( > .sf-btn ) {
	margin: 0.75rem 0 0;
}

.sf-product__summary .sf-note {
	margin: 1.125rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var( --sf-muted );
}

/* Trust bullets under the actions. */
.sf-usp {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var( --sf-line );
	display: grid;
	gap: 0.8rem;
}

.sf-usp li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.875rem;
	color: var( --sf-muted );
	line-height: 1.5;
}

.sf-usp svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 0.15rem;
	stroke: var( --sf-contrast );
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Full specification ---
   A narrow heading column beside a readable column of product copy. */
.sf-details {
	display: grid;
	grid-template-columns: minmax( 0, 4fr ) minmax( 0, 8fr );
	gap: clamp( 1.5rem, 1rem + 4vw, 5rem );
	align-items: start;
}

.sf-details__head {
	position: sticky;
	top: calc( var( --sf-header-total ) + 1.5rem );
}

.sf-details__head > :last-child {
	margin-bottom: 0;
}

/* Product descriptions were written in the old editor: headings carry inline
   font sizes and lists come straight from the description field. This gives
   them one consistent, readable treatment. */
.wc-block-product-description,
.sf-prose {
	max-width: 46rem;
	font-size: 1rem;
	line-height: 1.75;
	color: #3d3d3d;
}

.wc-block-product-description > :first-child,
.sf-prose > :first-child {
	margin-top: 0;
}

.wc-block-product-description :is( h2, h3, h4 ),
.sf-prose :is( h2, h3, h4 ) {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var( --sf-contrast );
	margin: 2.25rem 0 0.85rem;
}

.wc-block-product-description h2,
.sf-prose h2 {
	font-size: clamp( 1.25rem, 1.1rem + 0.6vw, 1.5rem );
}

.wc-block-product-description :is( h3, h4 ),
.sf-prose :is( h3, h4 ) {
	font-size: 1.125rem;
}

/* Neutralise sizes the old editor wrote inline on heading spans. */
.wc-block-product-description :is( h2, h3, h4 ) span[style] {
	font-size: inherit !important;
}

.wc-block-product-description p,
.sf-prose p {
	margin: 0 0 1.1rem;
}

.wc-block-product-description :is( ul, ol ),
.sf-prose :is( ul, ol ) {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.wc-block-product-description li,
.sf-prose li {
	margin: 0.45rem 0;
	padding-left: 0.25rem;
}

.wc-block-product-description li::marker,
.sf-prose li::marker {
	color: var( --sf-muted );
}

.wc-block-product-description strong,
.sf-prose strong {
	color: var( --sf-contrast );
	font-weight: 600;
}

.wc-block-product-description table,
.sf-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

.wc-block-product-description :is( th, td ),
.sf-prose :is( th, td ) {
	text-align: left;
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: 1px solid var( --sf-line );
	vertical-align: top;
}

/* --- Commerce (dormant in catalogue mode) ---
   Price and quantity/add-to-cart styling, kept only so re-enabling the shop
   brings its styling back with it. */
.sf-product__summary .wp-block-woocommerce-product-price,
.sf-product__summary .price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.375rem;
	font-weight: 500;
	margin: 0 0 1.5rem;
}

.sf-product__summary form.cart {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 0.75rem;
}

.sf-product__summary .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3.25rem;
	border: 1px solid var( --sf-contrast );
	border-radius: 0;
	background: var( --sf-contrast );
	color: var( --sf-base );
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.875rem;
	font-weight: 500;
}

/* 12c. Catalogue toolbar, breadcrumbs & notices
   ========================================================================== */

.woocommerce-result-count {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	color: var( --sf-muted );
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 2.5rem;
	padding: 0.5rem 2.25rem 0.5rem 0.875rem;
	border: 1px solid var( --sf-line );
	border-radius: 0;
	background: var( --sf-base ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.4'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E" ) right 0.85rem center / 0.65rem no-repeat;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --sf-contrast );
	cursor: pointer;
	transition: border-color var( --sf-ease );
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
	border-color: var( --sf-contrast );
}

/* The results row: count on the left, sorting on the right, one line. */
.sf-toolbar {
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.sf-toolbar > * {
	margin: 0;
}

.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --sf-muted );
}

.wp-block-woocommerce-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var( --sf-contrast );
	text-decoration: none;
}

.wp-block-woocommerce-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 2px solid var( --sf-contrast );
	border-radius: 0;
	background: var( --sf-surface );
	font-size: 0.9375rem;
	list-style: none;
}

/* 12d. Contact page
   ========================================================================== */

/* Direct channels: a label column and a value column, divided by hairlines. */
.sf-channels {
	border-top: 1px solid var( --sf-line );
}

.sf-channel {
	display: grid;
	grid-template-columns: 7.5rem minmax( 0, 1fr );
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding: 1.25rem 0;
	border-bottom: 1px solid var( --sf-line );
}

.sf-channel > * {
	margin: 0;
}

.sf-channel .sf-eyebrow {
	margin: 0;
}

.sf-channel__value {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.sf-channel__value a {
	color: var( --sf-contrast );
	text-decoration: none;
}

.sf-channel__value a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sf-channel__note {
	grid-column: 2;
	font-size: 0.8125rem;
	color: var( --sf-muted );
}

/* WhatsApp enquiry form. It composes a message and opens WhatsApp, so there
   is no form plugin to configure and nothing stored on the site. */
.sf-wa-form {
	display: grid;
	gap: 1.125rem;
	padding: clamp( 1.25rem, 0.75rem + 2vw, 2.5rem );
	border: 1px solid var( --sf-line );
	background: var( --sf-base );
}

.sf-field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.sf-field-row {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.125rem;
}

.sf-field label {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --sf-muted );
}

.sf-field label span {
	letter-spacing: 0;
	text-transform: none;
}

/* 16px text stops iOS zooming the page when a field is tapped. */
.sf-field :is( input, select, textarea ) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var( --sf-line );
	border-radius: 0;
	background: var( --sf-base );
	color: var( --sf-contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var( --sf-ease ), box-shadow var( --sf-ease );
}

.sf-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background: var( --sf-base ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.4'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E" ) right 1rem center / 0.7rem no-repeat;
	cursor: pointer;
}

.sf-field textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.sf-field :is( input, select, textarea ):focus {
	outline: none;
	border-color: var( --sf-contrast );
	box-shadow: 0 0 0 1px var( --sf-contrast );
}

.sf-field ::placeholder {
	color: #9a9a9a;
}

.sf-form-note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --sf-muted );
}

/* Four steps in a row ("How buying works"). */
.sf-features.sf-features--4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

/* 12b. Dark bands
   --------------------------------------------------------------------------
   The enquiry band carries its colours as block attributes, which WordPress
   turns into generated CSS. These rules restate them so the band still reads
   correctly if that generated CSS is stripped, cached stale, or the block is
   copied somewhere else — a black heading on a black band is not a failure
   worth risking.
   ========================================================================== */

.sf-enquiry-band {
	color: rgba( 255, 255, 255, 0.78 );
}

.sf-enquiry-band :where( h1, h2, h3, h4, h5, h6 ) {
	color: #fff;
}

.sf-enquiry-band a:not( .wp-block-button__link ) {
	color: #fff;
}

/* 13. Footer
   ========================================================================== */

.sf-footer {
	background: var( --sf-contrast );
	color: rgba( 255, 255, 255, 0.72 );
}

.sf-footer :where( h1, h2, h3, h4, h5, h6 ) {
	color: #fff;
}

.sf-footer a {
	color: rgba( 255, 255, 255, 0.72 );
	text-decoration: none;
	transition: color var( --sf-ease );
}

.sf-footer a:hover {
	color: #fff;
	text-decoration: none;
}

.sf-footer__inner {
	max-width: var( --wp--style--global--wide-size, 87.5rem );
	margin-inline: auto;
	padding: clamp( 3rem, 6vw, 5.5rem ) var( --sf-gutter ) 2rem;
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 2rem, 4vw, 4rem );
}

.sf-footer__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	margin: 0 0 1.4rem;
}

.sf-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-size: 0.9375rem;
}

.sf-footer__blurb {
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 30rem;
	margin: 0 0 1.75rem;
}

.sf-footer__logo {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.03em;
	margin: 0 0 1.25rem;
	display: inline-block;
}

.sf-footer__logo img {
	max-height: 38px;
	width: auto;
	filter: brightness( 0 ) invert( 1 );
}

/* Newsletter */
.sf-newsletter {
	display: flex;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	max-width: 26rem;
	transition: border-color var( --sf-ease );
}

.sf-newsletter:focus-within {
	border-color: #fff;
}

.sf-newsletter input[type="email"] {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 0.95rem 1.1rem;
	font-size: 0.9375rem;
	font-family: inherit;
	min-width: 0;
}

.sf-newsletter input[type="email"]::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}

.sf-newsletter input[type="email"]:focus {
	outline: none;
}

.sf-newsletter button {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 0 1.1rem;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.sf-newsletter button svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

.sf-footer__fineprint {
	font-size: 0.75rem;
	color: rgba( 255, 255, 255, 0.5 );
	margin-top: 0.85rem;
	line-height: 1.55;
}

/* Footer base row */
.sf-footer__base {
	max-width: var( --wp--style--global--wide-size, 87.5rem );
	margin-inline: auto;
	padding: 1.75rem var( --sf-gutter ) 2.5rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: 0.8125rem;
}

.sf-footer__socials {
	display: flex;
	gap: 1.1rem;
	align-items: center;
}

.sf-footer__socials svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
	display: block;
}

.sf-payments {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.sf-payments span {
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	padding: 0.4rem 0.6rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: rgba( 255, 255, 255, 0.72 );
	line-height: 1;
}

/* 14. Utilities
   ========================================================================== */

/* WordPress adds the root gutter back onto `.alignfull` blocks that sit inside
   a constrained container (useRootPaddingAwareAlignments). These sections are
   meant to run edge to edge, so the gutter is removed again here. */
.sf-stats.alignfull,
.sf-split.wp-block-columns.alignfull,
.sf-band.wp-block-media-text.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.sf-hairline-top {
	border-top: 1px solid var( --sf-line );
}

.sf-hairline-bottom {
	border-bottom: 1px solid var( --sf-line );
}

.sf-center {
	text-align: center;
}

.sf-muted {
	color: var( --sf-muted );
}

.sf-narrow {
	max-width: 44rem;
	margin-inline: auto;
}

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var( --sf-contrast );
	color: #fff;
	padding: 0.85rem 1.25rem;
	font-size: 0.875rem;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* 15. Motion, focus & reduced-motion
   ========================================================================== */

:where( a, button, input, select, textarea, summary, details ):focus-visible {
	outline: 2px solid var( --sf-contrast );
	outline-offset: 3px;
}

body.sf-has-hero .sf-header:not( .is-solid ) :focus-visible {
	outline-color: #fff;
}

/* Sections fade up once, as they enter the viewport.
   Written so that content is visible by default and only hidden once the
   document is known to be scripted — if JavaScript never runs, nothing is
   left invisible. */
.sf-reveal {
	transition: opacity 620ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		transform 620ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.js .sf-reveal:not( .is-visible ) {
	opacity: 0;
	transform: translateY( 18px );
	will-change: opacity, transform;
}

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

	.js .sf-reveal:not( .is-visible ) {
		opacity: 1;
		transform: none;
	}
}

/* 16. Responsive
   ========================================================================== */

@media ( max-width: 1100px ) {
	.sf-megamenu__inner {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sf-megamenu__card {
		display: none;
	}

	.wc-block-product-template__responsive:is( .columns-4, .columns-5, .columns-6 ) {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sf-features.sf-features--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 2.5rem;
	}
}

@media ( max-width: 900px ) {
	:root {
		--sf-header-h: 62px;
	}

	.sf-header__nav {
		display: none;
	}

	.sf-burger {
		display: block;
	}

	.sf-header__bar {
		grid-template-columns: auto 1fr auto;
	}

	.sf-header__brand {
		justify-self: center;
	}

	.sf-stats {
		grid-template-columns: repeat( 2, 1fr );
	}

	.sf-features,
	.sf-features.sf-features--4 {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Product page: gallery, then summary, in one column. */
	.sf-product {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2rem;
	}

	.sf-product__summary,
	.sf-details__head {
		position: static;
	}

	.sf-details {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.25rem;
	}

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

	.sf-footer__brandcol {
		grid-column: 1 / -1;
	}

	/* Columns stack below this width, so let each panel breathe. */
	.sf-split__item.wp-block-cover {
		min-height: clamp( 15rem, 42vw, 22rem );
	}
}

@media ( max-width: 781px ) {
	.wc-block-product-template__responsive:is( .columns-3, .columns-4, .columns-5, .columns-6 ) {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.wc-block-product-template.wc-block-product-template__responsive {
		gap: 2.25rem 0.875rem;
	}

	.wc-block-product-template .wp-block-post-title {
		font-size: 0.9375rem;
	}

	.wc-block-product-template .sf-btn--whatsapp {
		min-height: 2.625rem;
		padding: 0.5rem;
		font-size: 0.75rem;
	}

	.sf-product__media .woocommerce-product-gallery__image img {
		padding: 1.25rem;
	}

	.sf-product__media .flex-control-thumbs {
		grid-template-columns: repeat( auto-fill, minmax( 3.5rem, 1fr ) );
		gap: 0.375rem;
		margin-top: 0.5rem;
	}

	.sf-product__media .woocommerce-product-gallery__trigger {
		top: 0.75rem;
		right: 0.75rem;
	}
}

@media ( max-width: 680px ) {
	.sf-split__item .wp-block-button__link {
		padding: 0.75rem 1.35rem;
		font-size: 0.8125rem;
	}

	.sf-hero.wp-block-cover {
		min-height: clamp( 26rem, 78vh, 40rem );
	}

	.sf-footer__inner {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.sf-footer__base {
		flex-direction: column;
		align-items: flex-start;
	}

	.sf-stats {
		grid-template-columns: 1fr;
	}

	.sf-accordion summary {
		font-size: 1rem;
	}

	/* Contact: stack the label over its value, and the paired fields. */
	.sf-channel {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sf-channel__note {
		grid-column: 1;
	}

	.sf-field-row {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* "Most popular" becomes a swipeable rail: cards peek in from the right
	   to show there is more. */
	.sf-rail {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.sf-rail .wc-block-product-template.wc-block-product-template__responsive {
		display: flex;
		gap: 0.875rem;
	}

	.sf-rail .wc-block-product-template > li {
		flex: 0 0 68%;
		scroll-snap-align: start;
	}
}