/*
Theme Name: CV Sensor
Description: Custom catalogue theme for a distributor of isolated current and voltage sensors and transducers.
Version: 1.0.0
Requires PHP: 8.1
*/

/* ==========================================================================
   1. Custom properties
   ========================================================================== */

:root {
	--bg: #F6F9FA;
	--panel: #FFFFFF;
	--ink: #22323F;
	--ink-2: #4B6070;
	--muted: #7E92A0;
	--edge: #E4ECF0;
	--blue: #2E7FA8;
	--blue-soft: #EAF4F9;
	--amber: #D98A34;
	--amber-soft: #FDF3E8;
	--green: #3A9A6B;
	--green-soft: #EBF6F1;
	--lead: #2E93A0;
	--error: #B54B42;
	--error-soft: #FBECEA;

	--radius-btn: 8px;
	--radius-input: 10px;
	--radius-card-lg: 16px;
	--shadow-soft: 0 10px 30px rgba(34, 50, 63, .05);
	--shadow-hover: 0 16px 40px rgba(34, 50, 63, .09);
	--transition: 0.17s ease;
	--content-max: 1180px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, blockquote {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

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

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

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

button {
	cursor: pointer;
	background: none;
	border: 0;
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
	background: var(--bg);
}

.cvs-main {
	flex: 1;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	overflow-wrap: break-word;
}

h1 {
	/* Was clamp(32px, 4vw, 46px); reduced to the value the Brands page used, now
	   applied globally so every page h1 is one consistent size. Still a clamp so
	   it scales down on narrow screens. The front-page hero h1 keeps its own
	   (smaller) size via .cvs-hero-heading. */
	font-size: clamp(22px, 2.5vw, 31px);
	font-weight: 700;
}

h2 {
	font-size: 31px;
	font-weight: 700;
}

h3 {
	font-size: 20px;
}

a {
	transition: color var(--transition);
}

a:hover {
	color: var(--blue);
}

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.cvs-container {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 24px;
}

.cvs-nowrap {
	white-space: nowrap;
}

.cvs-section {
	padding: 48px 0;
}

.cvs-section-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 32px;
}

.cvs-section-sub {
	font-size: 16.5px;
	font-weight: 400;
	color: var(--ink-2);
	margin-top: 12px;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.cvs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-btn);
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.cvs-btn-primary {
	background: var(--blue);
	color: #fff;
}

.cvs-btn-primary:hover {
	background: #276E92;
	color: #fff;
}

.cvs-btn-outline {
	background: var(--panel);
	border-color: var(--edge);
	color: var(--ink);
}

.cvs-btn-outline:hover {
	border-color: var(--blue);
	color: var(--blue);
}

/* ==========================================================================
   6. Cards (shared)
   ========================================================================== */

.cvs-card {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-soft);
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.cvs-card:hover {
	border-color: var(--blue);
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}

/* ==========================================================================
   6b. Page content (static pages)
   ========================================================================== */

.cvs-page-content {
	max-width: 760px;
	margin: 0 auto;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-soft);
	padding: 36px;
}

.cvs-page-content p {
	color: var(--ink-2);
	margin-top: 18px;
}

.cvs-page-content p:first-child {
	margin-top: 0;
}

.cvs-page-content ul {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cvs-page-content li {
	position: relative;
	padding-left: 20px;
	color: var(--ink-2);
}

.cvs-page-content li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
}

/* Ordered lists show blue numbers instead of the bullet dot (the global reset
   removes list markers). Applies to any numbered list in page content. */
.cvs-page-content ol {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: cvs-ol;
}

.cvs-page-content ol li {
	padding-left: 28px;
	counter-increment: cvs-ol;
}

.cvs-page-content ol li::before {
	content: counter(cvs-ol) ".";
	top: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--blue);
	font-weight: 600;
}

.cvs-page-content strong {
	color: var(--ink);
	font-weight: 600;
}

.cvs-page-content h2 {
	font-size: 23px;
	font-weight: 700;
	margin-top: 32px;
}

.cvs-page-content a {
	color: var(--blue);
}

.cvs-page-content a:hover {
	color: var(--blue);
	text-decoration: underline;
}

.cvs-feature-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

.cvs-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background: var(--bg);
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
}

.cvs-feature-number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.cvs-feature-text {
	color: var(--ink-2);
}

/* ==========================================================================
   7. Top strip
   ========================================================================== */

.cvs-topbar {
	height: 52px;
	background: var(--panel);
	border-bottom: 1px solid var(--edge);
	font-size: 14px;
	color: var(--muted);
}

.cvs-topbar .cvs-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* auto/auto/auto + space-between rather than 1fr/auto/1fr: the three
   items are very different widths (a small dot, the search field, the
   email link), and equal-fr columns can force the widest item to overflow
   its own track at narrow widths even with min-width:0. Sizing each column
   to its own content and letting space-between position them keeps the
   search field roughly centred between the other two without ever being
   squeezed narrower than what's actually in it. */
.cvs-topbar-grid {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.cvs-topbar-grid > * {
	min-width: 0;
}

.cvs-topbar-status {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cvs-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	flex-shrink: 0;
}

.cvs-topbar-links {
	display: flex;
	align-items: center;
	gap: 20px;
}

.cvs-topbar-links a:hover {
	color: var(--blue);
}

/* ==========================================================================
   8. Main header
   ========================================================================== */

.cvs-header {
	height: 78px;
	background: var(--panel);
	border-bottom: 1px solid var(--edge);
	position: sticky;
	top: 0;
	z-index: 100;
}

.cvs-header .cvs-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.cvs-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.cvs-logo-mark {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

/* An uploaded logo (vs. the built-in square SVG mark) can be any aspect
   ratio — size it by height and let the width follow so it isn't squashed
   into the 42x42 box. */
.cvs-logo-img {
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.cvs-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.cvs-wordmark {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.cvs-tagline {
	font-size: 14px;
	color: var(--muted);
}

.cvs-header-mid {
	flex: 1;
	display: flex;
	justify-content: center;
}

.cvs-header-right {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	/* The mobile nav panel is position:fixed with its own z-index — as a
	   flex item this keeps the quote button and hamburger painting above
	   it, so the header row (and the hamburger-turned-close-button) never
	   ends up hidden behind the open panel. */
	position: relative;
	z-index: 101;
}

.cvs-btn-label-short {
	display: none;
}

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

/* ==========================================================================
   9. Header search
   ========================================================================== */

.cvs-header-search {
	position: relative;
}

.cvs-header-search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cvs-header-search-icon {
	position: absolute;
	left: 12px;
	width: 14px;
	height: 14px;
	color: var(--muted);
	pointer-events: none;
}

.cvs-header-search-input {
	width: 170px;
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
	background: var(--bg);
	padding: 7px 12px 7px 32px;
	font-size: 14px;
	color: var(--ink);
	transition: width var(--transition), border-color var(--transition), background var(--transition);
}

.cvs-header-search-input::placeholder {
	color: var(--muted);
}

.cvs-header-search-input:focus {
	width: 210px;
	outline: 0;
	border-color: var(--blue);
	background: var(--panel);
}

.cvs-header-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: min(340px, calc(100vw - 32px));
	max-height: 420px;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 12px;
	box-shadow: var(--shadow-hover);
	z-index: 110;
}

.cvs-header-search-results[hidden] {
	display: none;
}

.cvs-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	background: none;
	text-align: left;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.cvs-search-result:hover,
.cvs-search-result:focus,
.cvs-search-result.is-active {
	background: var(--blue-soft);
	outline: 0;
}

.cvs-search-result-thumb {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cvs-search-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cvs-search-result-body {
	min-width: 0;
}

.cvs-search-result-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cvs-search-result-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--muted);
	margin-top: 2px;
}

.cvs-search-result-meta .cvs-availability {
	font-size: 14px;
	gap: 5px;
}

.cvs-search-result-meta .cvs-dot {
	width: 7px;
	height: 7px;
}

.cvs-search-empty,
.cvs-search-loading {
	padding: 20px 14px;
	text-align: center;
	font-size: 14px;
	color: var(--muted);
}

/* ==========================================================================
   10. Primary navigation
   ========================================================================== */

.cvs-nav {
	position: relative;
}

.cvs-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cvs-nav-list > li {
	position: relative;
}

.cvs-nav-list > li > a,
.cvs-nav-list > li > .cvs-nav-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	color: var(--ink-2);
	padding: 9px 14px;
	border-radius: var(--radius-btn);
	transition: background var(--transition), color var(--transition);
}

.cvs-nav-list > li > a:hover,
.cvs-nav-list > li:hover > .cvs-nav-toggle,
.cvs-nav-list > li.cvs-nav-open > .cvs-nav-toggle {
	background: var(--blue-soft);
	color: var(--blue);
}

.cvs-nav-caret {
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--transition);
}

.cvs-nav-item-has-children:hover .cvs-nav-caret,
.cvs-nav-item-has-children:focus-within .cvs-nav-caret {
	transform: rotate(-135deg) translateY(1px);
}

/* Dropdown panel */

.cvs-nav-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 100%;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-hover);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 110;
}

.cvs-nav-item-has-children:hover .cvs-nav-panel,
.cvs-nav-item-has-children:focus-within .cvs-nav-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cvs-nav-panel-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-radius: 10px;
	transition: background var(--transition);
}

.cvs-nav-panel-row:hover,
.cvs-nav-panel-row:focus {
	background: var(--blue-soft);
}

.cvs-nav-panel-icon {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--blue-soft);
	color: var(--blue);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvs-nav-panel-icon svg {
	width: 14px;
	height: 14px;
}

.cvs-nav-panel-row.cvs-icon-amber .cvs-nav-panel-icon {
	background: var(--amber-soft);
	color: var(--amber);
}

.cvs-nav-panel-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cvs-nav-panel-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.cvs-nav-panel-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.45;
}

/* Mobile hamburger */

.cvs-hamburger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
}

.cvs-hamburger span {
	width: 20px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.cvs-hamburger.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.cvs-hamburger.is-open span:nth-child(2) {
	opacity: 0;
}

.cvs-hamburger.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.cvs-footer {
	background: var(--panel);
	border-top: 1px solid var(--edge);
}

.cvs-footer-main {
	padding-top: 28px;
	padding-bottom: 24px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
}

.cvs-footer-col h4 {
	font-size: 15px;
	color: var(--ink);
	margin-bottom: 16px;
}

.cvs-footer-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.cvs-footer-col p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

.cvs-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cvs-footer-address {
	margin-bottom: 23px;
}

.cvs-footer-col .cvs-footer-contact-list {
	gap: 23px;
}

.cvs-footer-col .cvs-footer-contact-list li,
.cvs-footer-col .cvs-footer-contact-list li a {
	margin: 0;
}

.cvs-footer-col a {
	font-size: 14px;
	color: var(--ink-2);
}

.cvs-footer-col a:hover {
	color: var(--blue);
}

.cvs-footer-bottom {
	border-top: 1px solid var(--edge);
	padding-top: 14px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--muted);
}

.cvs-footer-bottom ul {
	display: flex;
	gap: 20px;
}

.cvs-footer-bottom a:hover {
	color: var(--blue);
}

/* ==========================================================================
   12. Availability indicator (shared component)
   ========================================================================== */

.cvs-availability {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
}

.cvs-availability .cvs-dot {
	width: 9px;
	height: 9px;
}

.cvs-availability-in-stock .cvs-dot {
	background: var(--green);
}

.cvs-availability-in-stock {
	color: var(--green);
}

.cvs-availability-running-order .cvs-dot {
	background: var(--amber);
}

.cvs-availability-running-order {
	color: var(--amber);
}

.cvs-availability-factory-lead-time .cvs-dot {
	background: var(--lead);
}

.cvs-availability-factory-lead-time {
	color: var(--lead);
}

/* ==========================================================================
   13. Home — hero
   ========================================================================== */

.cvs-hero {
	background: linear-gradient(to bottom, #FFFFFF, var(--bg));
}

.cvs-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: start;
	padding-top: 56px;
	padding-bottom: 56px;
}

.cvs-hero-grid > * {
	min-width: 0;
}

.cvs-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--green-soft);
	color: var(--green);
	font-size: 14px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.cvs-hero-pill .cvs-dot {
	background: var(--green);
}

.cvs-hero h1 {
	margin-bottom: 16px;
}

.cvs-hero h1.cvs-hero-heading {
	font-size: clamp(24px, 3.2vw, 27px);
}

.cvs-hero-lede {
	font-size: 17.5px;
	color: var(--ink-2);
	max-width: 520px;
	margin-bottom: 28px;
}

.cvs-hero-search {
	position: relative;
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.cvs-hero-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 420px;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 12px;
	box-shadow: var(--shadow-hover);
	z-index: 20;
}

.cvs-hero-search-results[hidden] {
	display: none;
}

.cvs-hero-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
	padding: 0 16px;
}

.cvs-hero-search-field svg {
	width: 18px;
	height: 18px;
	color: var(--muted);
	flex-shrink: 0;
}

.cvs-hero-search-field input {
	border: 0;
	outline: 0;
	background: none;
	padding: 14px 0;
	width: 100%;
	font-size: 15px;
}

.cvs-hero-brands h3 {
	margin-bottom: 14px;
	text-align: center;
}

.cvs-hero-brand-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cvs-hero-brand-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 24px 16px;
	color: inherit;
	text-decoration: none;
}

.cvs-hero-brand-card:hover {
	color: inherit;
}

.cvs-hero-brand-logo {
	width: 48px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvs-hero-brand-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cvs-hero-brand-logo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--edge);
	border-radius: 8px;
	background: var(--bg);
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
}

.cvs-hero-brand-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cvs-hero-brand-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}

.cvs-hero-brand-desc {
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}

/* ==========================================================================
   14. Home — what we supply
   ========================================================================== */

.cvs-supply-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.cvs-supply-card {
	padding: 32px;
}

.cvs-supply-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.cvs-supply-icon svg {
	width: 26px;
	height: 26px;
}

.cvs-supply-card.cvs-current .cvs-supply-icon {
	background: var(--amber-soft);
	color: var(--amber);
}

.cvs-supply-card.cvs-voltage .cvs-supply-icon {
	background: var(--blue-soft);
	color: var(--blue);
}

.cvs-supply-card p {
	margin: 12px 0 4px;
}

.cvs-browse-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 0;
	color: var(--blue);
	font-weight: 600;
	font-size: 14.5px;
}

.cvs-browse-link svg {
	width: 14px;
	height: 14px;
	transition: transform var(--transition);
}

.cvs-browse-link:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   15. Home — how ordering works
   ========================================================================== */

.cvs-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.cvs-step-card {
	padding: 24px;
}

.cvs-step-number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 16px;
}

.cvs-step-card p {
	margin-top: 8px;
}

/* ==========================================================================
   16. Home — CTA
   ========================================================================== */

.cvs-cta-panel {
	background: var(--blue-soft);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	padding: 56px 40px;
	text-align: center;
}

.cvs-cta-panel p {
	max-width: 480px;
	margin: 12px auto 24px;
	color: var(--ink-2);
}

/* ==========================================================================
   17. Brand cards (Brands page)
   ========================================================================== */

.cvs-brands-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cvs-brand-card {
	display: block;
	padding: 28px;
	color: inherit;
	text-decoration: none;
}

.cvs-brand-card:hover {
	color: inherit;
}

.cvs-brand-card-logo {
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.cvs-brand-card-logo img {
	max-height: 56px;
	max-width: 160px;
	object-fit: contain;
}

.cvs-brand-card-logo-fallback {
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
}

.cvs-brand-card p {
	margin: 8px 0 20px;
}

.cvs-brand-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid var(--edge);
}

.cvs-brand-card-count {
	font-size: 14px;
	color: var(--muted);
}

.cvs-brands-empty {
	text-align: center;
	color: var(--muted);
}

/* ==========================================================================
   18. Brand archive header (logo + profile)
   ========================================================================== */

/*
 * The listing header (logo, heading, description) spans the full container
 * width and left-aligns, flush with the filter sidebar's left edge and the
 * product grid's right edge — unlike .cvs-section-head elsewhere on the
 * site, which stays centred and narrow (home page sections, simple pages).
 */
.cvs-listing .cvs-section-head {
	text-align: left;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Category archives (Current sensors, Voltage sensors) centre their
 * heading, unlike brand archives, which stay left-aligned throughout.
 */
.tax-product_cat .cvs-listing .cvs-section-head h1 {
	text-align: center;
}

.cvs-brand-archive-logo {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 20px;
}

.cvs-brand-archive-logo img {
	max-height: 64px;
	max-width: 220px;
	object-fit: contain;
}

/*
 * Shared by the brand archive's long-form profile and the category
 * archive's description (Current sensors / Voltage sensors) — both are
 * body copy beneath the listing heading, so they read with one rule and
 * cannot drift apart from each other again. Full container width, flush
 * with the sidebar/grid below.
 */
.cvs-listing-description {
	margin: 0 0 56px;
	color: var(--ink-2);
}

/* Brands page and category archives: centre the intro under the centred h1
   and hold it to a ~70-character reading width (matching the 620px section
   head above it). Brand archives (.tax-cvs_brand) keep the base rule —
   left-aligned, full width — because their profile runs several paragraphs. */
.cvs-brands-intro,
.tax-product_cat .cvs-listing-description {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.cvs-listing-description p {
	margin-bottom: 16px;
}

.cvs-listing-description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   19. Single product
   ========================================================================== */

.cvs-product-grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: start;
}

.cvs-product-grid > * {
	min-width: 0;
}

.cvs-product-image {
	width: 300px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.cvs-product-image:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-hover);
}

.cvs-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cvs-product-image-trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.cvs-product-brand {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	margin-bottom: 8px;
}

.cvs-product-info h1 {
	margin-bottom: 14px;
}

.cvs-type-badge {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.cvs-badge-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.cvs-badge-row .cvs-type-badge {
	margin-bottom: 0;
}

.cvs-product-spec {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.cvs-product-spec-label {
	font-size: 15.5px;
	color: var(--ink-2);
}

.cvs-product-spec-value {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: break-word;
}

.cvs-product-price-value {
	font-size: 16.5px;
}

/* Only the "On request" state: shown in the primary blue, matching the quote
   button. A real price keeps the default ink colour so it never looks like a
   link. */
.cvs-product-price-value.cvs-price-on-request {
	color: var(--blue);
}

.cvs-product-info .cvs-availability {
	margin-bottom: 24px;
	gap: 10px;
	font-size: 17px;
}

.cvs-product-info .cvs-availability .cvs-dot {
	width: 11px;
	height: 11px;
}

.cvs-product-short-desc {
	color: var(--ink-2);
	margin-bottom: 28px;
}

.cvs-product-short-desc p:last-child {
	margin-bottom: 0;
}

.cvs-product-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   20. Product listing (shop, brand, type, category archives)
   ========================================================================== */

.cvs-listing-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.cvs-listing-layout > * {
	min-width: 0;
}

.cvs-filter-sidebar {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	padding: 24px;
	position: sticky;
	top: 96px;
	/* Stay in view while the products scroll; if the filters are taller than
	   the viewport, scroll inside the column instead of pushing the page. */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.cvs-filter-toggle {
	display: none;
}

.cvs-filter-search {
	margin-bottom: 20px;
}

.cvs-filter-search-field {
	position: relative;
}

.cvs-filter-search-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	color: var(--muted);
	pointer-events: none;
}

.cvs-filter-search-input {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
	background: var(--bg);
	padding: 9px 12px 9px 34px;
	font-size: 14px;
	color: var(--ink);
	transition: border-color var(--transition), background var(--transition);
}

.cvs-filter-search-input::placeholder {
	color: var(--muted);
}

.cvs-filter-search-input:focus {
	outline: 0;
	border-color: var(--blue);
	background: var(--panel);
}

.cvs-filter-group {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--edge);
}

.cvs-filter-group:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.cvs-filter-group h3 {
	font-size: 14px;
	margin-bottom: 12px;
}

.cvs-filter-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 4px;
	margin: 0 -4px;
	font-size: 14px;
	color: var(--ink-2);
	cursor: pointer;
}

.cvs-filter-checkbox input {
	width: 16px;
	height: 16px;
	accent-color: var(--blue);
}

.cvs-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.cvs-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--blue-soft);
	color: var(--blue);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}

.cvs-filter-chip:hover {
	background: var(--blue);
	color: #fff;
}

.cvs-filter-chip span {
	font-size: 15px;
	line-height: 1;
}

.cvs-filter-clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: underline;
}

.cvs-filter-clear:hover {
	color: var(--blue);
}

.cvs-listing-count {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 20px;
}

.cvs-listing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cvs-product-tile {
	display: block;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.cvs-product-tile:hover {
	color: inherit;
}

.cvs-product-tile-image {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	/* White well (matching the single product image and the LEM photos'
	   baked-in white margins) so a non-square photo letterboxes onto white,
	   not the grey page background. Applies to any non-square image, not just
	   these products. */
	background: var(--panel);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.cvs-product-tile-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cvs-product-tile-brand {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	margin-bottom: 4px;
}

.cvs-product-tile-body h3 {
	font-size: 16px;
	margin-bottom: 10px;
}

.cvs-product-tile-spec {
	font-size: 14px;
	color: var(--ink-2);
	margin-bottom: 6px;
	overflow-wrap: break-word;
}

.cvs-listing-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
}

.cvs-listing-empty p {
	color: var(--muted);
	margin-bottom: 16px;
	overflow-wrap: break-word;
}

.cvs-listing-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.cvs-listing-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--edge);
	border-radius: 8px;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition);
}

.cvs-listing-main .page-numbers.dots {
	border: 0;
}

.cvs-listing-main .page-numbers.current {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.cvs-listing-main .page-numbers:hover:not(.current):not(.dots) {
	border-color: var(--blue);
	color: var(--blue);
}

/* ==========================================================================
   21. Product image lightbox
   ========================================================================== */

body.cvs-lightbox-open {
	overflow: hidden;
}

.cvs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.cvs-lightbox[hidden] {
	display: none;
}

.cvs-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 50, 63, .8);
}

.cvs-lightbox-dialog {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
}

.cvs-lightbox-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.cvs-lightbox-image {
	max-width: min(calc(100vw - 48px), 900px);
	max-height: 80vh;
	object-fit: contain;
	border-radius: 10px;
	background: var(--panel);
	box-shadow: var(--shadow-hover);
}

.cvs-lightbox-close {
	position: fixed;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--panel);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-hover);
	transition: background var(--transition);
}

.cvs-lightbox-close:hover {
	background: var(--blue-soft);
}

.cvs-lightbox-close svg {
	width: 20px;
	height: 20px;
}

.cvs-lightbox-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--panel);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-hover);
	transition: background var(--transition);
}

.cvs-lightbox-nav:hover {
	background: var(--blue-soft);
}

.cvs-lightbox-nav svg {
	width: 22px;
	height: 22px;
}

.cvs-lightbox-prev {
	left: 24px;
}

.cvs-lightbox-next {
	right: 24px;
}

.cvs-lightbox-counter {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.cvs-lightbox-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
}

.cvs-lightbox-thumb {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--panel);
	cursor: pointer;
}

.cvs-lightbox-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cvs-lightbox-thumb.is-active {
	border-color: var(--blue);
}

/* ==========================================================================
   21b. Contact page
   ========================================================================== */

.cvs-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 24px;
	align-items: stretch;
}

.cvs-contact-panel {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-soft);
	padding: 32px;
}

.cvs-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}

.cvs-contact-details > .cvs-field-label {
	margin-bottom: 20px;
}

.cvs-contact-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cvs-contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink-2);
}

.cvs-contact-list a {
	color: var(--ink-2);
}

.cvs-contact-list a:hover {
	color: var(--blue);
}

.cvs-contact-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--blue-soft);
	color: var(--blue);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvs-contact-icon svg {
	width: 18px;
	height: 18px;
}

.cvs-contact-map {
	position: relative;
	margin-top: 24px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-input);
	overflow: hidden;
	border: 1px solid var(--edge);
	background: var(--blue-soft);
}

.cvs-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cvs-enquiry-form {
	display: grid;
	gap: 20px;
}

.cvs-field {
	display: flex;
	flex-direction: column;
}

.cvs-field-static {
	font-size: 15.5px;
	color: var(--ink);
	font-weight: 600;
}

/* Generic field styling so every input type — text, email, tel, and any type
   added in future — inherits the tinted fill and soft border automatically,
   rather than being an explicit per-type list that new fields fall out of.
   Hidden inputs are excluded (they render nothing). */
.cvs-enquiry-form input:not([type="hidden"]),
.cvs-enquiry-form textarea {
	background: var(--bg);
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	resize: vertical;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.cvs-enquiry-form input:not([type="hidden"]):focus,
.cvs-enquiry-form textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-soft);
}

.cvs-field-error {
	margin-top: 6px;
	font-size: 13px;
	color: var(--error);
}

.cvs-btn-block {
	width: 100%;
}

/* Secondary "prefer email" line under the form's submit button — small, muted
   and centred so it reads as an alternative, not part of the form. */
.cvs-form-alt {
	margin-top: 16px;
	text-align: center;
	font-size: 13.5px;
	color: var(--muted);
}

.cvs-form-alt a {
	color: var(--blue);
}

.cvs-form-alt a:hover {
	text-decoration: underline;
}

.cvs-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cvs-form-notice {
	border: 1px solid var(--edge);
	border-radius: var(--radius-input);
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 14.5px;
}

.cvs-form-notice-success {
	background: var(--blue-soft);
	border-color: var(--blue);
	color: var(--ink);
}

.cvs-form-notice-error {
	background: var(--error-soft);
	border-color: var(--error);
	color: var(--ink);
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.cvs-topbar-links {
		gap: 12px;
	}

	/* Centring the dropdown on the search field itself only works when the
	   field sits near the middle of the strip. With auto-sized flanking
	   columns (a small dot vs. a longer email link) the field's own box
	   drifts off-centre, and a fixed-width dropdown centred on it can run
	   past the viewport edge. Anchor to the viewport instead. */
	.cvs-header-search-results {
		position: fixed;
		top: 52px;
		left: 16px;
		right: 16px;
		width: auto;
		transform: none;
	}

	.cvs-header-mid {
		position: fixed;
		/* Set from JS (cvs-navigation.js) to the header's actual current
		   bottom edge on screen — not just its height, since .cvs-header
		   is position:sticky and isn't pinned to the viewport top until
		   the visitor scrolls past the top strip. A hardcoded value here
		   would let the panel overlap the header row instead of sitting
		   cleanly below it. The 78px fallback only matters before that
		   JS runs. */
		top: var(--cvs-header-height, 78px);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--panel);
		/* Row flex (the desktop default) only shrinks .cvs-nav to its own
		   content width, leaving the rest of the panel empty — column flex
		   plus the default align-items:stretch gives it the full width. */
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: auto;
		padding: 16px 24px;
		transform: translateX(100%);
		transition: transform var(--transition);
		z-index: 99;
	}

	.cvs-header-mid.cvs-nav-mobile-open {
		transform: translateX(0);
	}

	/* While the panel is open the header row shows only the close (X)
	   button — the logo and the quote button are hidden outright rather
	   than kept visible and stacked above the panel, so there's nothing
	   for the panel or its first item to overlap. Both come back exactly
	   as they were the moment cvs-nav-mobile-open is removed on close.
	   Scoped off .cvs-header (not .cvs-header-mid) because .cvs-brand
	   sits earlier in the DOM than .cvs-header-mid, where a `~` sibling
	   selector could never reach it. */
	.cvs-header.cvs-nav-mobile-open .cvs-brand,
	.cvs-header.cvs-nav-mobile-open .cvs-header-right .cvs-btn-primary {
		display: none;
	}

	/* .cvs-header-right is normally kept at the right edge by
	   justify-content:space-between working against .cvs-brand on the
	   other end. With .cvs-brand hidden it's the only in-flow child left,
	   and space-between collapses a single item to the start (left) —
	   pin it to the right explicitly instead. */
	.cvs-header.cvs-nav-mobile-open .cvs-header-right {
		margin-left: auto;
	}

	.cvs-nav-list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.cvs-nav-list > li {
		border-bottom: 1px solid var(--edge);
	}

	.cvs-nav-list > li > a,
	.cvs-nav-list > li > .cvs-nav-toggle {
		width: 100%;
		padding: 16px 4px;
		justify-content: center;
	}

	.cvs-nav-panel {
		position: static;
		min-width: 0;
		width: 100%;
		box-shadow: none;
		border: none;
		padding: 0 0 12px;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	/*
	 * The accordion panel is already full width here, so it never had the
	 * desktop dropdown's fit problem — keep the original, roomier row
	 * sizing rather than inheriting the tightened desktop values above.
	 * Centred, and bordered like the top-level rows, so the icon+label
	 * pair reads as just another row in the same list rather than a
	 * left-hugging block underneath it.
	 */
	.cvs-nav-panel-row {
		gap: 14px;
		padding: 8px 12px;
		justify-content: center;
		border-bottom: 1px solid var(--edge);
	}

	/* The parent <li>'s own border-bottom already closes the section right
	   after this one — an extra divider here would double it up. */
	.cvs-nav-panel-row:last-child {
		border-bottom: none;
	}

	.cvs-nav-panel-icon {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.cvs-nav-panel-icon svg {
		width: 20px;
		height: 20px;
	}

	.cvs-nav-item-has-children.cvs-nav-open .cvs-nav-panel {
		display: block;
	}

	.cvs-nav-item-has-children:hover .cvs-nav-panel,
	.cvs-nav-item-has-children:focus-within .cvs-nav-panel {
		display: none;
	}

	.cvs-nav-item-has-children.cvs-nav-open:hover .cvs-nav-panel,
	.cvs-nav-item-has-children.cvs-nav-open:focus-within .cvs-nav-panel {
		display: block;
	}

	.cvs-hamburger {
		display: flex;
	}

	.cvs-topbar-grid {
		gap: 8px;
	}

	.cvs-header-search-input {
		width: 110px;
	}

	.cvs-header-search-input:focus {
		width: 140px;
	}

	.cvs-footer-main {
		grid-template-columns: 1fr 1fr;
	}

	.cvs-hero-grid {
		grid-template-columns: 1fr;
	}

	.cvs-product-grid {
		grid-template-columns: 1fr;
	}

	.cvs-listing-layout {
		grid-template-columns: 1fr;
	}

	.cvs-contact-grid {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.cvs-filter-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 48px;
		padding: 12px 16px;
		background: var(--panel);
		border: 1px solid var(--edge);
		border-radius: var(--radius-card-lg);
		color: var(--ink);
		font-size: 15px;
		font-weight: 600;
	}

	.cvs-filter-toggle svg:first-child {
		width: 18px;
		height: 18px;
		color: var(--ink-2);
		flex-shrink: 0;
	}

	.cvs-filter-toggle span {
		flex: 1;
		text-align: left;
	}

	.cvs-filter-toggle-caret {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		transition: transform var(--transition);
	}

	.cvs-filter-toggle[aria-expanded="true"] .cvs-filter-toggle-caret {
		transform: rotate(180deg);
	}

	.cvs-filter-sidebar {
		position: static;
		display: none;
		margin-top: 12px;
		/* Drawer on mobile — drop the desktop sticky scroll box. */
		max-height: none;
		overflow: visible;
	}

	.cvs-filter-sidebar.is-open {
		display: block;
	}

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

	.cvs-supply-grid {
		grid-template-columns: 1fr;
	}

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

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

@media (max-width: 620px) {
	.cvs-product-image {
		width: 100%;
		max-width: 300px;
	}

	/* Three items (status, search, email) cannot all fit in one row at this
	   width. Drop search and stack status and email on two centred lines
	   instead of squeezing all three in. */
	.cvs-topbar {
		height: auto;
	}

	.cvs-topbar .cvs-container {
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
	}

	.cvs-topbar-grid {
		gap: 4px;
		text-align: center;
		font-size: 12.5px;
	}

	.cvs-header-search {
		display: none;
	}

	/* Below this width, brand + gap + quote button + hamburger no longer
	   fit at their desktop sizes (a fixed ~432px minimum regardless of
	   viewport) and the row overflows, pushing the hamburger off the
	   right edge entirely — it's still display:flex, just off-screen.
	   The hamburger is the only way into the menu, so it's the one
	   thing here that must never shrink or drop: everything else gives
	   way first. */
	.cvs-header .cvs-container {
		gap: 12px;
	}

	.cvs-brand {
		flex-shrink: 1;
		min-width: 0;
	}

	.cvs-brand-text {
		min-width: 0;
	}

	.cvs-wordmark {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The tagline is the biggest single contributor to the brand block's
	   width — dropping it buys back more room than shrinking the logo or
	   wordmark would, and "CVSensor" alone is still clearly the brand. */
	.cvs-tagline {
		display: none;
	}

	.cvs-header-right {
		gap: 8px;
	}

	.cvs-hamburger {
		flex-shrink: 0;
	}

	/* A blue rectangle with no visible label is worse than a shorter one —
	   swap the full label for a compact one instead of hiding it. */
	.cvs-header-right .cvs-btn-label-full {
		display: none;
	}

	.cvs-header-right .cvs-btn-label-short {
		display: inline;
	}

	/* The quote button is the one thing allowed to shrink further still,
	   never the hamburger — tighter padding on top of the already-short
	   label. */
	.cvs-header-right .cvs-btn-primary {
		flex-shrink: 1;
		min-width: 0;
		padding: 8px 12px;
	}

	.cvs-footer-main {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cvs-footer-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Everything else in the column centres, but the logo block (mark +
	   wordmark + tagline) reads better pinned to the left, as a normal
	   brand lockup rather than centred with the rest of the prose. */
	.cvs-footer-brand {
		align-self: flex-start;
		text-align: left;
	}

	.cvs-footer-col ul {
		align-items: center;
	}

	.cvs-footer-bottom {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.cvs-steps-grid {
		grid-template-columns: 1fr;
	}

	.cvs-brands-grid {
		grid-template-columns: 1fr;
	}

	.cvs-listing-grid {
		grid-template-columns: 1fr;
	}

	/* Below this point the card is full-width but the source image (WP
	   "medium" size) isn't — cap the display size to what it renders at in
	   the two-column layout just above this breakpoint, so it isn't
	   upscaled past its natural resolution. */
	.cvs-product-tile-image {
		max-width: 180px;
		margin-left: auto;
		margin-right: auto;
	}

	.cvs-hero-search {
		flex-direction: column;
	}

	.cvs-hero-search .cvs-btn {
		width: 100%;
	}

	.cvs-product-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cvs-product-actions .cvs-btn {
		width: 100%;
	}

	/* On a narrow screen the image can be nearly full-width, so viewport-
	   edge-pinned arrows would sit on top of it. Anchor them to the image's
	   own box instead, inset over its corners, so they never overlap it. */
	.cvs-lightbox-stage {
		position: relative;
		width: 100%;
	}

	.cvs-lightbox-nav {
		position: absolute;
		top: 50%;
		width: 44px;
		height: 44px;
	}

	.cvs-lightbox-prev {
		left: 8px;
	}

	.cvs-lightbox-next {
		right: 8px;
	}

	.cvs-lightbox-dialog {
		padding: 16px;
	}
}

/* Breadcrumbs (Rank Math) — product + archive pages, above the heading.
   Small and muted; links in blue, current page plain, light separators.
   Below 620px the full trail collapses to a single "‹ parent" back link. */
.cvs-breadcrumbs {
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted);
}

.cvs-breadcrumbs .rank-math-breadcrumb,
.cvs-breadcrumbs .rank-math-breadcrumb p {
	margin: 0;
	padding: 0;
}

.cvs-breadcrumbs a {
	color: var(--blue);
	text-decoration: none;
}

.cvs-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Current page (Rank Math marks the last crumb with .last) — plain text. */
.cvs-breadcrumbs .last {
	color: var(--ink-2);
}

.cvs-breadcrumbs .separator {
	color: var(--muted);
}

@media (max-width: 620px) {
	/* Collapse to one step back: hide the full trail and show only the
	   parent (always the last linked crumb) as a "‹ parent" back link. */
	.cvs-breadcrumbs .separator,
	.cvs-breadcrumbs .last,
	.cvs-breadcrumbs a {
		display: none;
	}

	.cvs-breadcrumbs a:last-of-type {
		display: inline;
		font-size: 14px;
	}

	.cvs-breadcrumbs a:last-of-type::before {
		content: "\2039\00a0"; /* ‹ + non-breaking space */
	}
}

/* Pagination windows: a fixed 6-box window above 620px, and WordPress's own
   default window below 620px. Both are rendered together (server and AJAX) and
   toggled by width. display:contents lets the surviving window's boxes sit
   directly in the .nav-links flex row. */
.cvs-pages-wide {
	display: contents;
}

.cvs-pages-narrow {
	display: none;
}

/* Previous/Next kept in place but inert at the first/last page. */
.cvs-listing-main .page-numbers.cvs-disabled {
	color: var(--muted);
	opacity: 0.45;
	pointer-events: none;
}

@media (max-width: 620px) {
	.cvs-pages-wide {
		display: none;
	}

	.cvs-pages-narrow {
		display: contents;
	}

	/* Comfortable tap targets on phones. */
	.cvs-listing-main .page-numbers {
		min-width: 44px;
		height: 44px;
	}
}