/*
 * Scalpels & Blades — theme styles.
 * Built from the 2026 homepage design. Tokens first, then components.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand */
	--sb-blue: #0b4ea2;
	--sb-blue-dark: #073771;
	--sb-blue-mid: #1f6fc0;
	--sb-blue-light: #3f8fd6;
	--sb-amber: #e0a137;
	--sb-amber-ink: #3a2600;

	/* Neutrals */
	--sb-ink: #16202b;
	--sb-body: #4a5763;
	--sb-muted: #6b7a89;
	--sb-faint: #8b98a5;
	--sb-nav: #3c4a58;

	/* Surfaces & lines */
	--sb-white: #ffffff;
	--sb-panel: #f7f9fb;
	--sb-chip: #eaf1f9;
	--sb-canvas: #eceff2;
	--sb-on-blue: #cfe0f2;
	--sb-on-blue-muted: #dbe9f8;
	--sb-border: #e6ebf0;
	--sb-divider: #f1f4f7;
	--sb-card-border: #d3dae1;
	--sb-hover-border: #a8c6e6;

	/* Shadows */
	--sb-shadow-card: 0 18px 40px rgba(16, 32, 48, .10);
	--sb-shadow-upsell: 0 14px 30px rgba(11, 78, 162, .28);
	--sb-shadow-hover: 0 10px 24px rgba(11, 78, 162, .12);

	/* Gradient */
	--sb-gradient: linear-gradient(105deg, #0b4ea2 0%, #1f6fc0 62%, #3f8fd6 100%);

	/* Type */
	--sb-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sb-font-head: "Archivo Narrow", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Layout */
	--sb-container: 1240px;
	--sb-gutter: 40px;
	--sb-radius: 12px;
	--sb-radius-lg: 16px;
	--sb-header-h: 132px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--sb-white);
	color: var(--sb-body);
	font-family: var(--sb-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--sb-blue);
	text-decoration: none;
	transition: color .18s ease;
}
a:hover { color: var(--sb-blue-dark); }

h1, h2, h3, h4 {
	margin: 0;
	color: var(--sb-ink);
	font-family: var(--sb-font-head);
	font-weight: 700;
	line-height: 1.15;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; }

:focus-visible {
	outline: 3px solid var(--sb-blue-light);
	outline-offset: 2px;
	border-radius: 4px;
}

.container {
	width: 100%;
	max-width: var(--sb-container);
	margin-inline: auto;
	padding-inline: var(--sb-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--sb-white);
	color: var(--sb-blue);
	padding: 12px 18px;
	font-weight: 700;
	box-shadow: var(--sb-shadow-card);
}
.skip-link:focus { left: 12px; top: 12px; }

/* Shared bits ------------------------------------------------------------ */

.eyebrow {
	margin: 0 0 10px;
	color: var(--sb-muted);
	font-family: var(--sb-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}
.eyebrow--blue { color: var(--sb-blue); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 15px 32px;
	font-family: var(--sb-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn--blue {
	background: var(--sb-blue);
	border-color: var(--sb-blue);
	color: var(--sb-white);
}
.btn--blue:hover {
	background: var(--sb-blue-dark);
	border-color: var(--sb-blue-dark);
	color: var(--sb-white);
	box-shadow: var(--sb-shadow-hover);
}

.btn--amber {
	background: var(--sb-amber);
	border-color: var(--sb-amber);
	color: var(--sb-amber-ink);
}
.btn--amber:hover {
	background: #edb154;
	color: var(--sb-amber-ink);
	transform: translateY(-1px);
	box-shadow: var(--sb-shadow-upsell);
}

.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .85);
	color: var(--sb-white);
}
.btn--ghost:hover {
	background: var(--sb-white);
	border-color: var(--sb-white);
	color: var(--sb-blue);
}

/* Ghost button for light sections — .btn--ghost is white-on-white here. */
.btn--outline {
	background: transparent;
	border-color: var(--sb-blue);
	color: var(--sb-blue);
}
.btn--outline:hover {
	background: var(--sb-blue);
	border-color: var(--sb-blue);
	color: var(--sb-white);
	box-shadow: var(--sb-shadow-hover);
}

.rich-text a { text-decoration: underline; text-underline-offset: 2px; }
.rich-text p { margin-bottom: 1.15em; }

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 30;
	background: var(--sb-white);
	border-bottom: 1px solid var(--sb-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--sb-header-h);
}

.site-branding { flex: 0 0 auto; }

.site-logo,
.site-branding .custom-logo-link { display: block; }

.site-logo img,
.site-branding .custom-logo {
	display: block;
	width: auto;
	height: 60px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
}

.primary-menu li { position: relative; }

.primary-menu a {
	display: block;
	padding: 6px 0;
	color: var(--sb-nav);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.primary-menu a:hover { color: var(--sb-blue); }

.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-menu-ancestor > a {
	color: var(--sb-blue);
	box-shadow: inset 0 -3px 0 0 var(--sb-blue);
}

/* Sub-menus */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 20;
	min-width: 240px;
	margin-top: 12px;
	padding: 10px 0;
	list-style: none;
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu a {
	padding: 9px 20px;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: none;
	white-space: normal;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.currency-pill {
	display: inline-flex;
	align-items: center;
	background: var(--sb-chip);
	border-radius: 999px;
	padding: 11px 22px;
	color: var(--sb-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
}

.header-cart {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--sb-blue);
	border-radius: 999px;
	padding: 12px 24px;
	color: var(--sb-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .18s ease, box-shadow .18s ease;
}
.header-cart:hover {
	background: var(--sb-blue-dark);
	color: var(--sb-white);
	box-shadow: var(--sb-shadow-hover);
}
.header-cart__dot { opacity: .6; }

/* Mobile toggle */
.menu-toggle {
	display: none;
	position: relative;
	width: 46px;
	height: 46px;
	background: var(--sb-chip);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	background: var(--sb-blue);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle__bars { top: 50%; margin-top: -1px; }
.menu-toggle__bars::before { content: ""; margin-left: -10px; transform: translateY(-6px); }
.menu-toggle__bars::after { content: ""; margin-left: -10px; transform: translateY(6px); }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: rotate(-45deg); }

/* ==========================================================================
   4. Hero
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sb-gradient);
	color: var(--sb-white);
}

.hero__backdrops {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__backdrop {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .7s ease;
}
.hero__backdrop.is-active { opacity: 1; }
.hero__backdrop--plain { background: var(--sb-gradient); }

/* Photographic slides get a blue wash so the type stays readable. */
.hero__backdrop:not(.hero__backdrop--plain)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(11, 78, 162, .94) 0%, rgba(31, 111, 192, .86) 55%, rgba(63, 143, 214, .72) 100%);
}

/* One column: the band holds the featured product and nothing else. Search and
   payment logos live in .searchbar below, because a third element in here had
   nowhere to go once the viewport dropped under a large desktop. */
.hero__inner { padding-block: 52px 58px; }

.hero__lead { min-width: 0; }

/* Slides are stacked in one grid cell so the hero never jumps height. */
.hero__slides {
	display: grid;
	grid-template-areas: "slide";
}

.hero__slide {
	grid-area: slide;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hero__eyebrow {
	margin: 0 0 14px;
	color: var(--sb-on-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hero__title {
	margin: 0;
	color: var(--sb-white);
	font-family: var(--sb-font);
	font-size: clamp(1.85rem, 3.07vw, 2.375rem);
	max-width: 9.6em;
	font-weight: 800;
	letter-spacing: .002em;
	line-height: 1.125;
	text-transform: uppercase;
}

.hero__text {
	max-width: 30.6em;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .94);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}

.hero__actions { margin: 30px 0 0; }

/* Carousel controls */
.hero__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
}

.hero__arrow,
.hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 50%;
	color: var(--sb-white);
	font-size: 17px;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hero__arrow:hover,
.hero__pause:hover {
	background: var(--sb-white);
	border-color: var(--sb-white);
	color: var(--sb-blue);
}
.hero__arrow:active { transform: scale(.95); }

.hero__pause { margin-left: 4px; }
.hero__pause-icon {
	width: 12px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.hero__pause[aria-pressed="true"] .hero__pause-icon {
	width: 0;
	height: 0;
	border: 0;
	border-left: 11px solid currentColor;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 3px;
}

.hero__dots {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-inline: 6px;
}

.hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	background: rgba(255, 255, 255, .42);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, .75); }
.hero__dot.is-active {
	width: 30px;
	background: var(--sb-white);
	border-radius: 999px;
}

/* Search + payments strip, directly under the hero. */
.searchbar {
	background: var(--sb-blue-dark);
	/* Deep enough that the pill's shadow doesn't spill onto the white below. */
	padding-block: 22px;
}

/* Wraps on its own rather than at a fixed breakpoint: the search field is the
   thing that must never truncate, so it keeps the row and the payment logos
   drop beneath when there isn't room for both. */
.searchbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

/* Both children are given a real flex-basis: left to `auto`, the payment
   logos' intrinsic 896px width wins the space and squeezes the search field
   until its placeholder truncates. */
.hero-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 440px;
	min-width: 0;
	max-width: 620px;
	background: var(--sb-white);
	border-radius: 999px;
	padding: 4px 4px 4px 18px;
	box-shadow: 0 8px 20px rgba(3, 26, 56, .3);
}

.hero-search__field {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 9px 6px;
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 16px;
	font-weight: 500;
}
.hero-search__field::placeholder { color: var(--sb-faint); }
.hero-search__field:focus { outline: none; }
.hero-search:focus-within {
	box-shadow: var(--sb-shadow-upsell), 0 0 0 3px rgba(255, 255, 255, .55);
}

.hero-search__submit {
	flex: 0 0 auto;
	background: var(--sb-blue);
	border: 0;
	border-radius: 999px;
	padding: 11px 26px;
	color: var(--sb-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .11em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease;
}
.hero-search__submit:hover { background: var(--sb-blue-dark); }

.secure-payments {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 1 500px;
	min-width: 0;
	background: var(--sb-white);
	border-radius: var(--sb-radius);
	padding: 5px 16px;
	box-shadow: 0 6px 16px rgba(3, 26, 56, .22);
}

.secure-payments__label {
	flex: 0 0 auto;
	margin: 0;
	color: var(--sb-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.35;
	text-transform: uppercase;
}

.secure-payments__logos {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	max-height: 34px;
	margin-left: auto;
	object-fit: contain;
	object-position: right center;
}

/* ==========================================================================
   5. Browse by range
   ========================================================================== */

.browse { padding-block: 56px 76px; }

/* The range grid runs full width — the old sidebar listed the same ranges the
   cards already show, so it was the page saying itself twice. */
.browse__inner {
	display: grid;
	grid-template-columns: 221px minmax(0, 1fr);
	column-gap: 42px;
	align-items: start;
}

.browse__sidebar {
	position: sticky;
	top: 24px;
	padding-right: 20px;
	border-right: 1px solid var(--sb-border);
}

.range-list { list-style: none; }

.range-list__item + .range-list__item { border-top: 1px solid var(--sb-divider); }

.range-list__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 0;
	color: var(--sb-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}
.range-list__link:hover { color: var(--sb-blue); }

.range-list__count {
	flex: 0 0 auto;
	color: var(--sb-faint);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.filter-group { margin-top: 34px; }
.filter-list { list-style: none; }

.filter-check {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	color: var(--sb-body);
	font-size: 15px;
	font-weight: 500;
}
.filter-check:hover { color: var(--sb-blue); }

.filter-check__box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--sb-white);
	border: 1.5px solid #cfd8e0;
	border-radius: 5px;
	transition: background-color .16s ease, border-color .16s ease;
}
.filter-check:hover .filter-check__box { border-color: var(--sb-hover-border); }

.filter-check.is-checked .filter-check__box {
	position: relative;
	background: var(--sb-blue);
	border-color: var(--sb-blue);
}
.filter-check.is-checked .filter-check__box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--sb-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.browse__all-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.browse__main { min-width: 0; }

.browse__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--sb-border);
	margin-bottom: 30px;
}

.browse__title {
	margin: 0;
	font-family: var(--sb-font-head);
	font-size: clamp(1.5rem, 2.4vw, 1.86rem);
	font-weight: 700;
	line-height: 1.12;
}

.browse__meta {
	margin: 0;
	color: var(--sb-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Range cards */
.range-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 24px;
	list-style: none;
}

/* Every range is represented by one of its own products, and those run from a
   15:1 handle to a 0.3:1 carded blister pack (measured across all 34). No
   aspect ratio suits both, so the box is a fixed height and the image is
   contained inside it — long items fill the width, upright ones the height. */
.range-grid:not(.product-grid) .range-card__media {
	aspect-ratio: auto;
	height: 130px;
	/* The catalogue mixes transparent PNGs with legacy JPEGs shot on white; a
	   grey panel frames the latter in a visible pale rectangle. */
	background: var(--sb-white);
}
.range-grid:not(.product-grid) .range-card__media img { padding: 12px 18px; }

/* Range names run long ("Swann Morton NON STERILE Surgical Blades and Handles -
   No 4 Fitment"). Clamping keeps every card in a row the same height without
   truncating the names the client navigates by on his current site. */
.range-grid:not(.product-grid) .range-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.range-card { display: flex; }

.range-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius-lg);
	overflow: hidden;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.range-card__link:hover {
	border-color: var(--sb-hover-border);
	box-shadow: var(--sb-shadow-card);
	transform: translateY(-3px);
	color: inherit;
}

.range-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--sb-panel);
	border-bottom: 1px solid var(--sb-divider);
	overflow: hidden;
}
.range-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
	transition: transform .35s ease;
}
.range-card__link:hover .range-card__media img { transform: scale(1.035); }

.range-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 20px 22px 22px;
}

.range-card__eyebrow {
	color: var(--sb-faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.range-card__title {
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.42;
	text-wrap: pretty;
}

.range-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--sb-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.range-card__cta span { transition: transform .2s ease; }
.range-card__link:hover .range-card__cta span { transform: translateX(4px); }

/* Product cards — range cards carrying a price. */

/* Blades and handles are long and shallow, so a squarer box would be mostly
   empty. A wider box lets the product read larger and keeps the grid short. */
.product-grid .range-card__media { aspect-ratio: 16 / 9; }
.product-grid .range-card__media img { padding: 14px 16px; }

.product-grid .range-card__body { gap: 7px; padding: 18px 20px 20px; }

.product-grid .range-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.product-card__price {
	color: var(--sb-ink);
	font-family: var(--sb-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}
.product-card__price del {
	margin-right: 6px;
	color: var(--sb-faint);
	font-weight: 600;
}
.product-card__price ins { text-decoration: none; }
.product-card__price small {
	display: block;
	margin-top: 3px;
	color: var(--sb-muted);
	font-family: var(--sb-font);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: none;
}

.browse__more {
	margin: 34px 0 0;
	text-align: center;
}

/* ==========================================================================
   6. Help CTA band
   ========================================================================== */

.help-cta {
	background: var(--sb-gradient);
	color: var(--sb-white);
}

.help-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: 39px;
}

.help-cta__title {
	margin: 0 0 8px;
	color: var(--sb-white);
	font-family: var(--sb-font-head);
	font-size: clamp(1.5rem, 2.4vw, 1.86rem);
	font-weight: 700;
	line-height: 1.15;
}

.help-cta__sub {
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font-size: 16px;
	font-weight: 500;
}

.help-cta .btn { flex: 0 0 auto; }

/* ==========================================================================
   7. Mail order info
   ========================================================================== */

.mail-order { padding-block: 66px 78px; }

.mail-order__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 449px;
	column-gap: 49px;
	row-gap: 40px;
	align-items: start;
}

.mail-order__title {
	margin: 0 0 22px;
	color: var(--sb-blue);
	font-family: var(--sb-font-head);
	font-size: clamp(1.35rem, 2.09vw, 1.62rem);
	font-weight: 700;
	line-height: 1.2;
}

.mail-order__copy {
	color: var(--sb-body);
	font-size: 16px;
	line-height: 1.65;
}
.mail-order__copy strong { color: var(--sb-ink); }

.mail-order__aside {
	padding-left: 27px;
	border-left: 3px solid var(--sb-blue);
	color: var(--sb-ink);
	font-size: 16px;
	line-height: 1.6;
}
.mail-order__aside p { margin-bottom: 1.05em; }

.mail-order__vat {
	margin-top: 26px;
	color: var(--sb-ink);
	font-family: var(--sb-font-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.mail-order__aside .eyebrow { margin-top: 26px; margin-bottom: 2px; }

.mail-order__phone {
	display: inline-block;
	color: var(--sb-blue);
	font-family: var(--sb-font-head);
	font-size: clamp(1.9rem, 3.35vw, 2.6rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
}
.mail-order__phone:hover { color: var(--sb-blue-dark); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
	background: var(--sb-blue);
	color: var(--sb-on-blue);
}

.site-footer__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-block: 34px;
}

.site-footer__logo { flex: 0 0 auto; }
.site-footer__logo img {
	display: block;
	width: auto;
	height: 46px;
}

.site-footer__payments {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.site-footer__accept {
	margin: 0;
	flex: 0 0 auto;
	color: var(--sb-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.site-footer__cards {
	flex: 0 1 auto;
	min-width: 0;
	width: 100%;
	max-width: 458px;
	height: auto;
	background: var(--sb-white);
	border-radius: 8px;
	padding: 3px 8px;
	object-fit: contain;
}

.site-footer__meta {
	flex: 0 0 auto;
	text-align: right;
	font-size: 14px;
	line-height: 1.6;
}

.site-footer__copyright {
	margin: 0 0 2px;
	color: var(--sb-on-blue-muted);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 0;
	list-style: none;
}
.footer-menu li + li::before {
	content: "·";
	margin: 0 9px;
	color: rgba(255, 255, 255, .5);
}
.footer-menu a { color: var(--sb-white); }
.footer-menu a:hover { color: var(--sb-white); text-decoration: underline; }

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	padding-block: 8px 36px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	margin-top: 4px;
}
.site-footer__widgets a { color: var(--sb-white); }
.footer-widget__title { color: var(--sb-white); font-size: 15px; margin-bottom: 10px; }
.site-footer__widgets ul { list-style: none; }
.site-footer__widgets li { padding: 3px 0; font-size: 14px; }

/* ==========================================================================
   9. Interior pages & WooCommerce
   ========================================================================== */

.site-main { padding-block: 48px 72px; }
.site-main--home { padding-block: 0; }

.entry-title,
.page-title {
	font-family: var(--sb-font-head);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin-bottom: 18px;
}

.entry-content { font-size: 16px; line-height: 1.7; }

.shop-sidebar { margin-top: 40px; }

.woocommerce-content .woocommerce-breadcrumb {
	color: var(--sb-muted);
	font-size: 14px;
}

/* Shop / category product loop.
   WooCommerce floats these li's at a fixed percentage width, which leaves cards
   ragged and their buttons at different heights. Laying the loop out as a grid
   with each card a flex column lets every card in a row match height, so the
   prices and Add to basket / Select options buttons line up. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's clearfix would otherwise become two empty grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius-lg);
	overflow: hidden;
	clear: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--sb-hover-border);
	box-shadow: var(--sb-shadow-card);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
}

/* Blades are long and shallow — contain them so the whole blade is visible
   rather than cropped to the middle of the frame. White rather than the panel
   grey: the catalogue still mixes transparent PNGs with legacy JPEGs shot on
   white, and grey would frame the latter in a visible pale rectangle. */
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	margin: 0;
	padding: 14px 16px;
	background: var(--sb-white);
	border-bottom: 1px solid var(--sb-divider);
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	padding: 18px 20px 0;
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.42;
	text-wrap: pretty;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	margin-top: auto;
	padding: 10px 20px 0;
	font-size: 17px;
}
.woocommerce ul.products li.product .price del { opacity: .6; font-weight: 600; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	align-self: start;
	margin: 16px 20px 20px;
	padding: 12px 22px;
	font-size: 13px;
}

.woocommerce ul.products li.product .onsale {
	top: 12px;
	right: 12px;
	left: auto;
	margin: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sb-blue);
	font-family: var(--sb-font-head);
	font-weight: 700;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--sb-blue);
	border-radius: 999px;
	color: var(--sb-white);
	font-family: var(--sb-font);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--sb-blue-dark);
	color: var(--sb-white);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--sb-amber);
	color: var(--sb-amber-ink);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #cf9230;
	color: var(--sb-amber-ink);
}

/* ==========================================================================
   10. Featured products hero
   ========================================================================== */

.hero__brand {
	margin: 0 0 26px;
	color: var(--sb-on-blue);
	font-family: var(--sb-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Copy and photo are one pair that scales together — a percentage column
   rather than a fixed one, so it needs no breakpoint of its own until the
   photo would be too small to read. */
.hero-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 40%, 480px);
	align-items: center;
	gap: 40px;
}

.hero-product__text { min-width: 0; }

.hero-product__name {
	margin: 0;
	color: var(--sb-white);
	font-family: var(--sb-font);
	font-size: clamp(1.55rem, 2.5vw, 2rem);
	font-weight: 800;
	letter-spacing: .002em;
	line-height: 1.15;
	text-wrap: balance;
	/* Catalogue names run long; three lines keeps every slide the same height. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.hero-product__price {
	margin: 16px 0 0;
	color: var(--sb-white);
	font-family: var(--sb-font-head);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.hero-product__price del {
	margin-right: 8px;
	color: var(--sb-on-blue-muted);
	font-weight: 600;
	opacity: .8;
}
.hero-product__price ins { text-decoration: none; }
.hero-product__price small {
	display: block;
	margin-top: 4px;
	color: var(--sb-on-blue);
	font-family: var(--sb-font);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
}

.hero--products .hero__actions { margin-top: 26px; }

/* The 2026 packshots are transparent PNGs, so they need a light panel to sit
   on — they disappear against the blue. 16/9 rather than a squarer box because
   blades run ~3.7:1 and handles up to 15:1: a tall panel is mostly empty. */
.hero-product__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--sb-white);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow-upsell);
	overflow: hidden;
	padding: 16px 18px;
}

.hero-product__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero--products .hero__controls { margin-top: 30px; }

/* ==========================================================================
   11. Homepage range filter
   ========================================================================== */

.range-list__link.is-current {
	color: var(--sb-blue);
	font-weight: 700;
}
.range-list__link.is-current .range-list__count {
	color: var(--sb-blue);
	opacity: .75;
}

/* A blue rule marks the chosen range without moving anything. */
.range-list__item { position: relative; }
.range-list__link.is-current::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: var(--sb-blue);
}

.browse__main {
	transition: opacity .18s ease;
}
.browse__main.is-loading {
	opacity: .45;
	pointer-events: none;
}

.browse__empty {
	margin: 0;
	padding: 40px 0;
	color: var(--sb-muted);
	font-size: 15px;
	text-align: center;
}

/* Cards while product pages are switched off for the preview. */
.range-card__link--static {
	cursor: default;
}
.range-card__link--static:hover {
	border-color: var(--sb-card-border);
	box-shadow: none;
	transform: none;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.browse__inner { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
}

@media (max-width: 1024px) {
	:root { --sb-gutter: 28px; --sb-header-h: 96px; }

	.menu-toggle { display: block; order: 3; }

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--sb-white);
		border-bottom: 1px solid var(--sb-border);
		box-shadow: var(--sb-shadow-card);
		padding: 8px 28px 22px;
		display: none;
	}
	.site-nav.is-open { display: flex; }

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.primary-menu > li + li { border-top: 1px solid var(--sb-divider); }
	.primary-menu a { padding: 14px 0; font-size: 15px; }
	.primary-menu .current-menu-item > a,
	.primary-menu .current_page_item > a { box-shadow: none; }

	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 14px;
		border: 0;
		border-left: 2px solid var(--sb-border);
		border-radius: 0;
		box-shadow: none;
	}
	.primary-menu .sub-menu a { padding: 9px 0; }

	.site-header__actions {
		gap: 12px;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--sb-divider);
	}
	.header-cart { flex: 1 1 auto; justify-content: center; }

	.hero__inner { padding-block: 46px 50px; }
	.hero__title { max-width: 18ch; }
	.hero-search { max-width: none; }

	.browse__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.browse__sidebar {
		position: static;
		padding-right: 0;
		padding-bottom: 30px;
		border-right: 0;
		border-bottom: 1px solid var(--sb-border);
	}
	.range-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 0 28px;
	}
	.range-list__item + .range-list__item { border-top: 0; }
	.range-list__item { border-bottom: 1px solid var(--sb-divider); }

	.filter-group {
		display: inline-block;
		vertical-align: top;
		min-width: 200px;
		margin-right: 40px;
	}

	.mail-order__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.mail-order__aside { padding-left: 24px; }

	.site-footer__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
		text-align: center;
	}
	.site-footer__payments { flex: 1 1 100%; justify-content: center; }
	.site-footer__meta { flex: 1 1 100%; text-align: center; }
	.footer-menu { justify-content: center; }
}

@media (max-width: 720px) {
	:root { --sb-gutter: 20px; }

	body { font-size: 15px; }

	.site-logo img,
	.site-branding .custom-logo { height: 44px; }

	.hero__inner { padding-block: 34px 38px; }

	.searchbar { padding-block: 16px; }
	.secure-payments { flex: 1 1 100%; max-width: none; }

	.hero__title { font-size: clamp(1.85rem, 8vw, 2.4rem); max-width: none; }
	.hero__text { font-size: 16px; margin-top: 18px; }
	.hero__controls { margin-top: 26px; gap: 10px; }
	.hero__arrow, .hero__pause { width: 38px; height: 38px; }

	.hero-search {
		flex-wrap: wrap;
		border-radius: var(--sb-radius-lg);
		padding: 10px;
		gap: 10px;
	}
	.hero-search__field {
		flex: 1 1 100%;
		padding: 8px 8px 0;
		font-size: 16px; /* keeps iOS from zooming on focus */
	}
	.hero-search__submit { flex: 1 1 100%; padding: 14px 20px; }

	.secure-payments {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}
	.secure-payments__label { max-width: none; }
	.secure-payments__logos { height: 30px; object-position: left center; }

	.browse { padding-block: 40px 52px; }
	.browse__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.range-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
	.range-list { grid-template-columns: minmax(0, 1fr); }
	.filter-group { display: block; margin-right: 0; }

	.help-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding-block: 36px;
	}
	.help-cta .btn { width: 100%; }

	.mail-order { padding-block: 44px 52px; }
	.mail-order__aside { padding-left: 18px; }
	.mail-order__vat { font-size: 21px; }

	.site-footer__payments { flex-wrap: wrap; gap: 10px; }
	.site-footer__accept { flex: 1 1 100%; }
	.site-footer__cards { max-width: 100%; }
}

@media (max-width: 420px) {
	.range-grid { grid-template-columns: minmax(0, 1fr); }
	.btn { width: 100%; }
}

/* Featured-products hero, responsive.
   The copy/photo pair is a percentage split, so it needs far fewer breakpoints
   than the old three-part band did. */

@media (max-width: 1024px) {
	/* The browse sidebar loses its right padding here, so the current-range
	   rule has to come inside the link rather than hang off its left edge. */
	.range-list__link { padding-left: 12px; }
	.range-list__link.is-current::before { left: 0; }
}

/* Below this the photo column would be too narrow to read the product, so the
   pair stacks instead of shrinking further. */
@media (max-width: 760px) {
	.hero__brand { margin-bottom: 18px; font-size: 12.5px; }

	.hero-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	/* Lead with the product photo on a phone. */
	/* Stacked, a 16/9 box is mostly white above and below a 3.7:1 blade. */
	.hero-product__media { order: -1; aspect-ratio: 5 / 2; padding: 12px 14px; }
	.hero-product__name { font-size: clamp(1.45rem, 6.6vw, 2rem); -webkit-line-clamp: 4; line-clamp: 4; }
	.hero-product__price { font-size: 24px; margin-top: 12px; }
	.hero__actions { margin-top: 20px; }
	.hero__controls { margin-top: 24px; }
}

/* ==========================================================================
   13. Motion preferences & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.range-card__link:hover { transform: none; }
}

@media print {
	.site-header, .site-footer, .hero__controls, .hero-search { display: none; }
	body { color: #000; }
}

/* Category / shop archive header: WooCommerce's result count and ordering
   select are otherwise the only unstyled controls left on the page. */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .page-title {
	margin: 0 0 6px;
	font-family: var(--sb-font-head);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.12;
}

.woocommerce .term-description {
	max-width: 70ch;
	margin: 10px 0 0;
	color: var(--sb-body);
	font-size: 16px;
	line-height: 1.7;
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	padding-block: 4px;
	color: var(--sb-muted);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce .woocommerce-ordering { margin: 0 0 4px; }
.woocommerce .woocommerce-ordering select {
	min-height: 42px;
	padding: 9px 40px 9px 14px;
	background-color: var(--sb-white);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b4ea2' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 17px;
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius);
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 14px;
	font-weight: 600;
	appearance: none;
}

/* The count and the sort control belong on one line, not stacked by floats. */
.woocommerce #primary .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce #primary .woocommerce-result-count { float: none; }
.woocommerce #primary .woocommerce-ordering { float: none; }
.woocommerce #primary .archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sb-border);
	margin-bottom: 28px;
}

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

.woocommerce div.product { position: relative; }

/* Gallery and buy panel are one pair. The gallery column is a percentage, not
   a fixed width, so it scales instead of stepping at breakpoints. */
.sb-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	align-items: start;
	gap: 48px;
	margin-bottom: 56px;
}
.sb-product::after { content: none; }

/* --- gallery ------------------------------------------------------------ */

/* WooCommerce floats these two at 48%/48% — and it ships an `#content`
   variant of that rule, which this theme's header.php satisfies. An ID beats
   any number of classes, so overriding it needs an ID of our own: #primary is
   the theme's main wrapper, always present on a WooCommerce page. Every rule
   below that fights a WooCommerce *layout* rule carries it for the same
   reason; the purely cosmetic ones do not need it. */
#primary.woocommerce-page div.product .sb-product div.images,
#primary.woocommerce-page div.product .sb-product div.summary,
.woocommerce #primary div.product .sb-product div.images,
.woocommerce #primary div.product .sb-product div.summary {
	width: auto;
	float: none;
	margin: 0;
	min-width: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Blades run ~3.7:1 and handles to 15:1; a square frame would show a hair
	   in a field of white. This box suits the range and stays put while the
	   summary column scrolls. */
	aspect-ratio: 4 / 3;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius-lg);
	margin: 0;
	overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image { width: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	max-height: 100%;
	object-fit: contain;
	padding: 34px;
}

/* WooCommerce's zoom trigger lands on the frame corner. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: 999px;
	box-shadow: var(--sb-shadow-hover);
	font-size: 15px;
	line-height: 34px;
	height: 34px;
	width: 34px;
	text-align: center;
	z-index: 3;
}

/* --- summary ------------------------------------------------------------ */


.sb-product__ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.sb-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background: var(--sb-chip);
	border-radius: 999px;
	color: var(--sb-blue-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.sb-chip:hover { background: var(--sb-hover-border); color: var(--sb-blue-dark); }

.woocommerce div.product .product_title {
	margin: 0 0 14px;
	color: var(--sb-ink);
	font-family: var(--sb-font-head);
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 700;
	line-height: 1.14;
	text-wrap: pretty;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 22px;
	font-size: 30px;
	line-height: 1.1;
}
.woocommerce div.product p.price del { margin-right: 8px; opacity: .55; font-size: 22px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product p.price small.woocommerce-price-suffix {
	display: block;
	margin-top: 4px;
	color: var(--sb-muted);
	font-family: var(--sb-font);
	font-size: 12.5px;
	font-weight: 600;
}

/* Specification list */
.sb-specs {
	margin: 0 0 24px;
	padding: 4px 0;
	border-top: 1px solid var(--sb-border);
	border-bottom: 1px solid var(--sb-border);
}
.sb-specs__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 9px 0;
}
.sb-specs__row + .sb-specs__row { border-top: 1px solid var(--sb-divider); }
.sb-specs dt {
	flex: 0 0 42%;
	color: var(--sb-muted);
	font-size: 13px;
	font-weight: 600;
}
.sb-specs dd {
	margin: 0;
	color: var(--sb-ink);
	font-size: 14.5px;
	font-weight: 700;
}

/* Variation picker and quantity */
.woocommerce div.product form.cart { margin-bottom: 20px; }
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; }

.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}
.woocommerce div.product form.cart table.variations tr { display: block; }
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}
.woocommerce div.product form.cart table.variations label {
	display: block;
	margin-bottom: 7px;
	color: var(--sb-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.woocommerce div.product form.cart .variations select {
	width: 100%;
	min-height: 50px;
	padding: 12px 42px 12px 15px;
	background-color: var(--sb-white);
	/* The native arrow sits differently in every browser; this one is ours. */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b4ea2' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius);
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	appearance: none;
}
.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--sb-blue);
	outline: 2px solid rgba(11, 78, 162, .18);
	outline-offset: 0;
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
	margin-bottom: 14px;
	font-size: 22px;
}
.woocommerce div.product form.cart .woocommerce-variation-availability p { margin: 0 0 12px; }

/* The buy row: quantity and button as one control pair, not two floated
   orphans. A simple product's whole form is the buy row; a variable product's
   is the inner add-to-cart block, below the variation picker. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.woocommerce div.product form.cart .quantity {
	float: none;
	display: inline-flex;
	margin: 0;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 88px;
	height: 52px;
	padding: 0 10px;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: var(--sb-radius);
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.woocommerce div.product form.cart .quantity .qty:focus {
	border-color: var(--sb-blue);
	outline: 2px solid rgba(11, 78, 162, .18);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 52px;
	padding: 15px 34px;
	font-size: 14px;
}
/* Until an option is chosen WooCommerce disables the button and paints it its
   own purple, from a `.alt.disabled` selector that outranks our button colour.
   Disabled should read as disabled, not as a second brand colour. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.alt.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.alt.disabled:hover {
	background: #c8d0d8;
	color: #5a6874;
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce div.product .stock { font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: #17754a; }
.woocommerce div.product .stock.out-of-stock { color: #a4262c; }

/* Assurance points */
.sb-assurance {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--sb-panel);
	border-radius: var(--sb-radius);
	list-style: none;
}
.sb-assurance li {
	position: relative;
	padding-left: 26px;
	color: var(--sb-body);
	font-size: 14px;
	line-height: 1.5;
}
.sb-assurance li + li { margin-top: 9px; }
.sb-assurance li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .32em;
	width: 11px;
	height: 6px;
	border: solid var(--sb-blue);
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

/* Product meta (SKU / categories) reads as a footnote, not a paragraph. */
.woocommerce div.product .product_meta {
	padding-top: 18px;
	border-top: 1px solid var(--sb-border);
	color: var(--sb-muted);
	font-size: 13px;
	line-height: 1.7;
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { font-weight: 600; }

/* --- tabs --------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs { margin-bottom: 12px; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 26px;
	padding: 0;
	border-bottom: 1px solid var(--sb-border);
}
.woocommerce #primary div.product .woocommerce-tabs ul.tabs::before,
.woocommerce #primary div.product .woocommerce-tabs ul.tabs::after { content: none; }

.woocommerce #primary div.product .woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 13px 20px;
	border-bottom: 3px solid transparent;
	color: var(--sb-muted);
	font-family: var(--sb-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--sb-blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--sb-blue);
	color: var(--sb-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 78ch;
	margin: 0;
	color: var(--sb-body);
	font-size: 16px;
	line-height: 1.72;
}
/* Core prints an h2 that repeats the tab you just clicked. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 1em; }
.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }

/* The imported descriptions carry inline `font-family: Arial; font-size:
   medium` from the old site's editor, which fights the brand type. An inline
   style can only be beaten with !important. */
.woocommerce div.product .woocommerce-tabs .panel [style*="font"] {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th { width: 30%; }

/* --- related ------------------------------------------------------------ */

.woocommerce .related.products,
.woocommerce .upsells.products {
	padding-top: 44px;
	border-top: 1px solid var(--sb-border);
	clear: both;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	margin-bottom: 24px;
	font-family: var(--sb-font-head);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 700;
}

/* --- responsive --------------------------------------------------------- */

/* Below this the buy column is too narrow for the variation select and the
   quantity/button pair to sit side by side. */
@media (max-width: 900px) {
	.sb-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { aspect-ratio: 16 / 9; }
	.woocommerce div.product div.images .woocommerce-product-gallery__image img { padding: 24px; }
}

@media (max-width: 480px) {
	.woocommerce div.product form.cart .quantity { margin: 0 0 12px; width: 100%; }
	.woocommerce div.product form.cart .quantity .qty { width: 100%; }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
	.sb-specs dt { flex-basis: 48%; }
}


/* ==========================================================================
   Sterile / non-sterile wording
   The client asked for badges to go: the words themselves are coloured inside
   product titles, range names and the specification list. Green for sterile,
   fire engine red for non-sterile.
   ========================================================================== */

.sb-word {
	color: inherit;
	font-weight: 700;
	white-space: nowrap;
}

.sb-word--sterile { color: #ce2029; }                 /* fire engine red */
.sb-word--non     { color: var(--sb-blue-mid); }      /* brand blue */

/* The hero slide is white type on the blue gradient, so both colours are
   lifted there to stay readable. A brand blue would vanish into that
   background, hence the much paler blue. */
.hero .sb-word--sterile { color: #ff8a8f; }
.hero .sb-word--non     { color: #bfe0ff; }

.sb-specs .sb-word { font-weight: 700; }



/* ==========================================================================
   Interior pages: About, Terms, Contact
   The editor writes plain HTML into these pages, so the styling has to come
   from the element itself rather than from classes the client would have to
   remember to add.
   ========================================================================== */

.entry--page .entry-content > p,
.entry--page .entry-content > ul,
.entry--page .entry-content > ol,
.entry--page .entry-content > h2,
.entry--page .entry-content > h3,
.entry--page .entry-content > blockquote {
	max-width: 74ch;
}

.entry--page .entry-content h2 {
	margin: 40px 0 14px;
	font-family: var(--sb-font-head);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	color: var(--sb-ink);
}

.entry--page .entry-content h3 {
	margin: 28px 0 10px;
	font-size: 1.1rem;
	color: var(--sb-ink);
}

.entry--page .entry-content > p:first-of-type {
	font-size: 18px;
	color: var(--sb-ink);
}

.entry--page .entry-content ul { padding-left: 20px; }
.entry--page .entry-content li { margin-bottom: 8px; }

/* A panel for the facts worth pulling out of the prose. */
.sb-panel {
	margin: 32px 0;
	padding: 24px 26px;
	background: var(--sb-panel);
	border: 1px solid var(--sb-border);
	border-radius: 14px;
}

.sb-panel h2,
.sb-panel h3 { margin-top: 0; }
.sb-panel > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.sb-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
	margin-top: 8px;
}

.sb-contact__details > :last-child { margin-bottom: 0; }

.sb-contact__list {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	max-width: none;
}

.sb-contact__list li {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sb-divider);
	margin: 0;
}

.sb-contact__list li:first-child { border-top: 1px solid var(--sb-divider); }

.sb-contact__label {
	flex: 0 0 104px;
	font-family: var(--sb-font-head);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-muted);
	padding-top: 2px;
}

.sb-contact__value { color: var(--sb-ink); font-weight: 600; }
.sb-contact__value a { font-weight: 600; }

.sb-contact__form {
	padding: 28px 30px 32px;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 16px;
	box-shadow: var(--sb-shadow-card);
}

.sb-contact__form h2 {
	margin: 0 0 6px;
	font-size: 1.25rem;
}

.sb-contact__form p.sb-contact__intro {
	margin: 0 0 20px;
	color: var(--sb-body);
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Contact Form 7
   -------------------------------------------------------------------------- */

.wpcf7 form.wpcf7-form { margin: 0; }

.wpcf7-form label {
	display: block;
	margin-bottom: 16px;
	font-family: var(--sb-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sb-nav);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sb-ink);
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wpcf7-form textarea { min-height: 150px; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--sb-blue-mid);
	box-shadow: 0 0 0 3px rgba(31, 111, 192, .16);
}

.wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 4px;
	padding: 0 28px;
	font-family: var(--sb-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sb-white);
	background: var(--sb-blue);
	border: 1px solid var(--sb-blue);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--sb-blue-dark);
	border-color: var(--sb-blue-dark);
}

.wpcf7-form .wpcf7-spinner { margin-left: 12px; }

/* The form's own messages. WooCommerce styles nothing here, so they would
   otherwise arrive as unstyled red text with a stray border. */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--sb-border);
	border-left-width: 4px;
	border-radius: 8px;
	font-size: 15px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #b7e0c6;
	border-left-color: #0b7a34;
	background: #f1faf4;
	color: #0b5c2a;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #f0c4c6;
	border-left-color: #ce2029;
	background: #fdf3f3;
	color: #8c1219;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: var(--sb-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #ce2029;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { border-color: #ce2029; }

@media (max-width: 860px) {
	.sb-contact { grid-template-columns: 1fr; gap: 32px; }
	.sb-contact__form { padding: 24px 20px 26px; }
	.sb-contact__list li { flex-direction: column; gap: 2px; }
	.sb-contact__label { flex-basis: auto; }
}


/* ==========================================================================
   WooCommerce block buttons: Proceed to Checkout, Place Order
   These are rendered by the Cart and Checkout blocks, which style themselves
   and do not pick up the .button rules above. The theme's generic a:hover
   colour was winning on hover and painting the label dark blue on a dark
   button, so the text disappeared. Brought onto brand and pinned white.
   ========================================================================== */

.wc-block-components-button:not(.is-link),
.wc-block-components-button:not(.is-link):visited {
	background-color: var(--sb-blue);
	color: var(--sb-white);
	border-radius: 999px;
	font-family: var(--sb-font);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-button:not(.is-link):active {
	background-color: var(--sb-blue-dark);
	color: var(--sb-white);
}

/* The label sits in its own span, so colour that too or it can inherit. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button:not(.is-link):hover .wc-block-components-button__text,
.wc-block-components-button:not(.is-link):focus .wc-block-components-button__text {
	color: var(--sb-white);
}


/* ==========================================================================
   Header search
   Customers can search from any page, not only the home page band.
   ========================================================================== */

.header-search {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 999px;
	padding: 0 4px 0 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.header-search:focus-within {
	border-color: var(--sb-blue-mid);
	box-shadow: 0 0 0 3px rgba(31, 111, 192, .16);
}

.header-search__field {
	width: 180px;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--sb-ink);
}

.header-search__field::placeholder { color: var(--sb-faint); }
.header-search__field:focus { outline: none; }
.header-search__field::-webkit-search-cancel-button { cursor: pointer; }

.header-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--sb-blue);
	color: var(--sb-white);
	cursor: pointer;
	transition: background .15s ease;
}

.header-search__button:hover { background: var(--sb-blue-dark); }

/* Tablet: the field shrinks before anything else does. */
@media (max-width: 1180px) {
	.header-search__field { width: 120px; }
}

/* Phone: the header is tight enough already, and the home page band
   plus the shop's own search cover it. */
@media (max-width: 900px) {
	.header-search { display: none; }
}


/* ==========================================================================
   Shop notice
   The bar the client switches on from Shop notice when they are closed.
   ========================================================================== */

.sb-banner {
	padding: 11px 0;
	font-family: var(--sb-font-head);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.sb-banner--closed { background: var(--sb-amber); color: var(--sb-amber-ink); }
.sb-banner--notice { background: var(--sb-blue-dark); color: var(--sb-white); }

@media (max-width: 700px) {
	.sb-banner { font-size: 14px; padding: 10px 0; }
}


/* ==========================================================================
   Reviews
   WooCommerce puts these in a tab panel at the foot of the product page. Left
   alone they inherit nothing and look like a 2012 comment form.
   ========================================================================== */

.woocommerce div.product .woocommerce-tabs {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--sb-border);
}

/* The tab strip stays: Description, Additional information and Reviews, which
   is how the rest of the product page was designed. Only the reviews panel's
   contents are restyled below. */
.woocommerce div.product .woocommerce-tabs .panel { max-width: 760px; }

#reviews .woocommerce-Reviews-title {
	font-family: var(--sb-font-head);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	margin: 0 0 20px;
	color: var(--sb-ink);
}

#reviews .commentlist {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

#reviews .commentlist li.review,
#reviews .commentlist li.comment {
	margin: 0 0 14px;
	padding: 18px 20px;
	background: var(--sb-panel);
	border: 1px solid var(--sb-border);
	border-radius: 12px;
	list-style: none;
}

#reviews .commentlist li .avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	float: left;
	margin: 0 14px 8px 0;
	border: 0;
	padding: 0;
	position: static;
}

#reviews .comment-text { margin: 0; overflow: hidden; }
#reviews .comment-text p.meta { margin: 0 0 6px; font-size: 14px; color: var(--sb-muted); }
#reviews .comment-text p.meta strong { color: var(--sb-ink); font-size: 15px; }
#reviews .comment-text .description p:last-child { margin-bottom: 0; }

/* Stars, in the shop's amber rather than WooCommerce's purple. */
.woocommerce .star-rating,
.woocommerce p.stars a { color: var(--sb-amber); }
.woocommerce .star-rating::before { color: var(--sb-card-border); }

#review_form_wrapper {
	padding: 24px 26px;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 14px;
	box-shadow: var(--sb-shadow-card);
}

#review_form_wrapper .comment-reply-title {
	display: block;
	font-family: var(--sb-font-head);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--sb-ink);
}

#review_form_wrapper .comment-form-rating label,
#review_form_wrapper .comment-form-comment label,
#review_form_wrapper .comment-form-author label,
#review_form_wrapper .comment-form-email label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sb-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sb-nav);
}

#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
	width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 16px;
	color: var(--sb-ink);
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 10px;
}

#review_form_wrapper textarea { min-height: 130px; resize: vertical; }

#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
	outline: none;
	border-color: var(--sb-blue-mid);
	box-shadow: 0 0 0 3px rgba(31, 111, 192, .16);
}

#review_form_wrapper .form-submit input[type="submit"] {
	min-height: 48px;
	padding: 0 28px;
	font-family: var(--sb-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sb-white);
	background: var(--sb-blue);
	border: 1px solid var(--sb-blue);
	border-radius: 999px;
	cursor: pointer;
}

#review_form_wrapper .form-submit input[type="submit"]:hover {
	background: var(--sb-blue-dark);
	border-color: var(--sb-blue-dark);
}

.woocommerce-noreviews {
	padding: 18px 20px;
	background: var(--sb-panel);
	border: 1px solid var(--sb-border);
	border-radius: 12px;
	color: var(--sb-body);
}


/* ==========================================================================
   Predictive search
   The dropdown under both search boxes. Position is relative to the form, so
   it lines up with whichever box it belongs to.
   ========================================================================== */

.sb-suggest-host { position: relative; }

.sb-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 60vh;
	overflow-y: auto;
	padding: 6px;
	background: var(--sb-white);
	border: 1px solid var(--sb-card-border);
	border-radius: 14px;
	box-shadow: 0 22px 44px rgba(16, 32, 48, .18);
	text-align: left;
}

.sb-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-suggest__item:hover,
.sb-suggest__item.is-active {
	background: var(--sb-chip);
	color: var(--sb-ink);
}

.sb-suggest__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	background: var(--sb-panel);
	border: 1px solid var(--sb-divider);
	border-radius: 8px;
	overflow: hidden;
}

.sb-suggest__media img { width: 100%; height: 100%; object-fit: contain; }

.sb-suggest__text { min-width: 0; }

.sb-suggest__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	/* Catalogue names run long; two lines keeps every row the same height. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.sb-suggest__price {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sb-blue);
}

.sb-suggest__none {
	margin: 0;
	padding: 12px 10px;
	font-size: 14px;
	color: var(--sb-muted);
}

/* In the home page band the form sits on the dark blue strip. */
.hero-search .sb-suggest { top: calc(100% + 10px); }


/* ==========================================================================
   Checkout: the "guest" notice
   WooCommerce tells the customer "You are currently checking out as a guest",
   which on this shop reads as though there is an account route they have
   missed. There is not: registration, the login reminder and signup from the
   checkout are all off, so every order is a guest order and the line only
   invites the question. Hidden rather than switched off, because the setting
   behind it is guest checkout itself.
   ========================================================================== */

.wc-block-checkout__guest-checkout-notice {
	display: none;
}


/* ==========================================================================
   Single product: one price, and it follows the option
   The headline price under the title now tracks the option the customer has
   chosen (see inc/product-pricing.php), so WooCommerce's second copy of the
   same figure above the basket button is redundant. "Clear" goes with it:
   the dropdown still carries "Choose an option", so nothing is lost.
   ========================================================================== */

.single-product .woocommerce-variation-price,
.single-product .reset_variations {
	display: none !important;
}


/* ==========================================================================
   Shop listing: the out-of-stock note
   A third of the catalogue carries a hand-set out-of-stock flag, and
   WooCommerce gives a variable product the same "Select options" button
   whether or not anything behind it can be bought. The note (printed by
   sb_loop_out_of_stock_note in inc/product-pricing.php) sits under the price
   so the customer reads it before clicking, not after.
   ========================================================================== */

.sb-loop-stock {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sb-muted, #6b7a89);
}