/* Centi Shop - main stylesheet.
 * Brand tokens sourced from the main site theme (VERIFIED).
 * See shop-v1/materials/brand/brand-tokens.md
 */

:root {
	--color-primary: #0b51c8;
	--color-primary-hover: #2d6ae0;
	--color-primary-active: #083ea3;
	--color-primary-light: #e8eefc;
	--color-heading: #1e2a38;
	--color-text: #2d3a4a;
	--color-text-secondary: #5a6a7a;
	--color-nav: #3d4f63;
	--color-bg: #ffffff;
	--color-bg-muted: #f5f6f8;
	--color-border: #e8ecf0;
	--color-danger: #c0392b;
	--color-focus: #0b51c8;
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--radius: 8px;
	--space-unit: 4px;
	--content-max: 1400px;
	--header-height: 96px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Honour the user's reduced-motion preference globally.
 * Also disables the html-level smooth scroll declared below.
 * Expanded from the generic transition/animation block to also
 * cover smooth-scroll, carousel transforms, and any inline
 * transitions a third-party plugin may set.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
}

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

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
}

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

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Inline (running) text links must be distinguishable from
 * surrounding text without relying on colour alone (WCAG 1.4.1).
 * We restrict the underline to <main> prose contexts so that
 * navigation / button / chip / footer elements keep their
 * design-forward look.
 */
main p a,
main li a,
main dd a,
main dt a,
main .cs-page-intro a,
main .cs-page-pending a,
main .cs-faq a,
main .home-oem__lede a,
main .woocommerce-Tabs-panel a,
main .product_meta a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
main p a:hover,
main li a:hover,
main dd a:hover,
main dt a:hover {
	text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	font-weight: 600;
	line-height: 1.25;
}

/* Accessibility helpers */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--color-heading);
	color: #fff;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
	left: 0;
}

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

:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.site-header__row {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 56px;
}

.site-header__row--top {
	justify-content: space-between;
}

.site-header__row--bottom {
	gap: 1rem;
}

.site-header__brand {
	flex-shrink: 0;
}

.site-header__brand-link {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-heading);
}

/* Custom Logo (uploaded via Customizer) -- match the bundled SVG dimensions. */
.site-header__brand .custom-logo,
.site-header__brand .custom-logo img,
.site-header__brand .site-logo {
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
	max-width: 200px;
}

.site-header__brand-link--image {
	display: inline-flex;
	align-items: center;
}

.site-header__brand-link--image:hover,
.site-header__brand-link--image:focus-visible {
	text-decoration: none;
}

.site-header__brand-link--image:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 2px;
}

.site-header__nav {
	flex-shrink: 0;
}

.site-header__menu,
.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.site-header__menu a {
	color: var(--color-nav);
	font-weight: 500;
}

.site-header__menu a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.site-header__account {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.site-header__account a {
	color: var(--color-nav);
	font-weight: 500;
}

.site-header__account a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.site-header__account--register {
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	color: var(--color-primary) !important;
}

.site-header__account--register:hover {
	background: var(--color-primary);
	color: #fff !important;
}

.site-header__cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--color-heading);
	position: relative;
}

.site-header__cart-link:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.site-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4375rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border-radius: 999px;
}

@media (max-width: 768px) {
	.site-header__account {
		gap: 0.5rem;
		font-size: 0.8125rem;
	}
	.site-header__account a span {
		display: none;
	}
}

/* R16 — Product-loop inline quantity stepper. */
.cs-loop-cart {
	margin-top: 0.75rem;
}

.cs-loop-cart__add.is-hidden,
.cs-loop-cart__stepper:not(.is-visible) {
	display: none;
}

.cs-loop-cart__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

/* V24.2 — Per-card View cart container (sibling to stepper). Holds the
 * fragment-inserted "View cart" link so it can be toggled independently
 * of the Add-to-cart button / stepper state. */
.cs-loop-cart__viewcart {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}
.cs-loop-cart__viewcart.is-hidden {
	display: none;
}
.cs-loop-cart__viewcart a.added_to_cart.wc-forward {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--color-border, #d4d4d4);
	border-radius: var(--radius, 6px);
	color: var(--color-heading, #111);
	text-decoration: none;
	background: #fff;
}
.cs-loop-cart__viewcart a.added_to_cart.wc-forward:hover {
	background: var(--color-background-alt, #f5f5f5);
}

.cs-loop-cart__btn {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-heading);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cs-loop-cart__btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.cs-loop-cart__btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.cs-loop-cart__qty {
	width: 3rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-heading);
	background: #fff;
	-moz-appearance: textfield;
}

.cs-loop-cart__qty::-webkit-outer-spin-button,
.cs-loop-cart__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cs-loop-cart__feedback {
	min-height: 1.25rem;
	font-size: 0.8125rem;
	color: var(--color-danger);
	margin-top: 0.25rem;
}

.cs-term-description {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.cs-term-description h2 {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin: 0 0 0.75rem;
	color: var(--color-heading);
}

.cs-term-description__body {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 2rem;
	-moz-column-gap: 2rem;
	column-gap: 2rem;
}

.cs-term-description p {
	color: var(--color-text);
	max-width: none;
	margin: 0 0 0.5rem;
	line-height: 1.55;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

.cs-term-description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.cs-term-description__body {
		-webkit-columns: 1;
		-moz-columns: 1;
		columns: 1;
	}
}

/* Layout */
.site-main {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 3rem 1.5rem 3rem;
}

.shop-page-header {
	margin-bottom: 1.25rem;
}

.shop-page-header__title {
	margin: 0 0 0.5rem;
	font-size: 2rem;
}

.shop-page-header__subtitle {
	margin: 0;
	color: var(--color-text-secondary);
	max-width: 60ch;
}

.page-header {
	margin-bottom: 1.25rem;
}

.entry-content p,
.entry-content li {
	line-height: 1.55;
}

.entry-content p {
	margin: 0 0 0.5rem;
}

.entry-content p:last-child {
	margin-bottom: 0;
}

/* Buttons */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	background: var(--color-primary);
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
}

.button:active,
.woocommerce button.button:active {
	background: var(--color-primary-active);
	border-color: var(--color-primary-active);
	transform: scale(0.98);
}

.button--secondary {
	background: var(--color-bg);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.button--secondary:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-active);
	border-color: var(--color-primary);
}

/* Product grid */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--color-primary);
}

.woocommerce ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-bg-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0.75rem 1rem 0.25rem;
	font-size: 1rem;
	color: var(--color-heading);
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	margin: 0.25rem 1rem 0.75rem;
	color: var(--color-heading);
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	margin: auto 1rem 1rem;
}

/* Product detail */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
	gap: 2.5rem;
	align-items: start;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: auto;
	float: none;
}

.woocommerce div.product .product_title {
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
}

.woocommerce div.product p.price {
	color: var(--color-heading);
	font-size: 1.5rem;
}

.woocommerce div.product form.cart {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce div.product form.cart input.qty {
	width: 4.5rem;
	height: 44px;              /* WCAG 2.5.5 (AAA) target-size minimum */
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-sizing: border-box;
}

/* Right-column summary card */
.woocommerce div.product div.summary {
	/* V21.8 (2026-09-10): the summary card no longer pins to the
	   viewport. The user feedback was: "COLOR / SPECIFICATION should
	   not float in the window — when I scroll down it should hide".
	   The .cs-v21-summary rule (L4605) and this rule both target the
	   same element, so both have to flip to position:static for the
	   override to land — the per-class rule alone is too low
	   specificity (0,1,0) and would be beaten by the 0,3,1 selector
	   here. With the card un-pinned, the variant picker / B2B price /
	   three action buttons all flow with the page; the user can scroll
	   past the card just like the mobile / single-column layout.
	   The bookmark-index tab nav inside .cs-v21-content still pins
	   (z-index 50) so the section navigation stays reachable. */
	position: static;
	align-self: start;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: 0 2px 12px rgba(30, 42, 56, 0.06);
}

.woocommerce div.product .cs-product-eyebrow {
	margin: 0 0 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.woocommerce div.product .woocommerce-product-rating {
	display: none;
}

/* MOQ / lead-time list */
.cs-b2b-meta-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cs-b2b-meta-list__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9375rem;
}

.cs-b2b-meta-list__item:last-child {
	border-bottom: none;
}

.cs-b2b-meta-list__label {
	color: var(--color-text-secondary);
	font-weight: 500;
}

.cs-b2b-meta-list__value {
	color: var(--color-heading);
	font-weight: 600;
	text-align: right;
}

/* Sales agent contact card */
.cs-sales-card {
	margin-top: 1.25rem;
	padding: 1rem;
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cs-sales-card__title {
	margin: 0 0 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-heading);
}

.cs-sales-card__body {
	margin: 0 0 0.875rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.cs-sales-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.cs-sales-card__button {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.cs-sales-card__tel {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-heading);
	text-decoration: none;
}

.cs-sales-card__tel:hover,
.cs-sales-card__tel:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Forms */
.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
}

.woocommerce form .form-row label {
	color: var(--color-heading);
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: var(--color-danger);
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	padding: 0.875rem 1rem;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: var(--color-bg-muted);
	list-style: none;
}

.woocommerce-message {
	border-color: var(--color-primary-light);
	background: var(--color-primary-light);
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-muted);
	color: var(--color-text);
}

.site-footer__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 2rem 3rem;
}

.site-footer__contact {
	font-size: 0.9375rem;
	font-style: normal;
}

.site-footer__heading {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-heading);
	line-height: 1.35;
}

.site-footer__alternate {
	margin: 0 0 0.75rem;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.site-footer__address {
	margin: 0 0 0.75rem;
	font-style: normal;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	line-height: 1.55;
}

.site-footer__address-line {
	display: block;
}

.site-footer__phone {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--color-text);
}

.site-footer__phone a {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.site-footer__phone a:hover,
.site-footer__phone a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.site-footer__label {
	color: var(--color-text-secondary);
	margin-right: 0.35rem;
}

.site-footer__icp {
	margin: 0.25rem 0 0;
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
}

.site-footer__icp a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.site-footer__icp a:hover,
.site-footer__icp a:focus {
	color: var(--color-primary);
	text-decoration: underline;
}

.site-footer__meta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}

.site-footer__nav {
	min-width: 0;
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 1.5rem;
}

.site-footer__menu a {
	color: var(--color-nav);
	font-size: 0.9375rem;
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
	color: var(--color-primary);
	text-decoration: underline;
}

.site-footer__legal {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

/* Add-to-cart toast */
.centi-toast {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 2000;
	max-width: calc(100vw - 3rem);
	padding: 0.75rem 1.25rem;
	background: var(--color-heading);
	color: #fff;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	box-shadow: 0 4px 16px rgba(30, 42, 56, 0.2);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.centi-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------
 * Single product — B2B layout additions
 * ----------------------------------------------------------*/

/* 1688-style product gallery: vertical thumbs left, stage right. */
.cs-product-gallery {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.cs-product-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 560px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 0.25rem;
	scrollbar-width: thin;
}

.cs-product-gallery__thumbs::-webkit-scrollbar {
	width: 4px;
}

.cs-product-gallery__thumbs::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 999px;
}

.cs-product-gallery__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--color-bg-muted);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.12s ease;
}

.cs-product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-product-gallery__thumb.is-active,
.cs-product-gallery__thumb:hover,
.cs-product-gallery__thumb:focus-visible {
	border-color: var(--color-primary);
}

.cs-product-gallery__thumb:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.cs-product-gallery__thumb--video .cs-product-gallery__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 42, 56, 0.35);
	color: #fff;
	font-size: 1.25rem;
	transition: background 0.12s ease;
}

.cs-product-gallery__thumb--video:hover .cs-product-gallery__thumb-play,
.cs-product-gallery__thumb--video:focus-visible .cs-product-gallery__thumb-play {
	background: rgba(30, 42, 56, 0.5);
}

.cs-product-gallery__thumb-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.25rem 0;
	background: rgba(30, 42, 56, 0.75);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* V26.0 / G26 — 1688-style "Parameters" placeholder thumb.
   Last tab in the strip when `_centi_param_image_id` is configured.
   No <img> inside; replaced by an SVG icon + "Parameters" label.
   Scoped under `.cs-v21-detail` so it wins the specificity tie-break
   against `.cs-v21-detail .cs-product-gallery__thumb` (which sets a
   white background on every thumb slot). */
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: #f4f7fa;
	border: 1px solid #d9dee5;
	border-radius: 4px;
	color: #1a1a1a;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 4px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* V26.1 / G26 v2 — match other thumbs' hover/active style: blue border,
   no black fill. Kept scoped under `.cs-v21-detail` so it wins the
   specificity tie-break against the bare `.cs-product-gallery__thumb`
   rule (which sets the same `border-color: var(--color-primary)` on
   hover). */
/* V26.2 / G26 v4 — REMOVED `transform: scale(1.08)` from hover/focus.
   The 2-col grid cells are fixed 88px tall with `overflow: auto` on
   the strip; a scaled child extends past the cell boundary and the
   top + left edges of the border get clipped (you see only the bottom
   + right edges). User asked for a clean rectangular border, so the
   "enlarge" feedback is now delivered by the main stage switching to
   the parameters diagram on hover (see main.js → activatePlaceholder). */
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder:hover,
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder:focus-visible {
	background: #fff;
	border-color: rgba(11, 81, 200, 0.35);
	color: #1a1a1a;
	outline: none;
}
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder.is-active {
	background: #f4f7fa;
	border-color: var(--color-primary, #0b51c8);
	color: #1a1a1a;
	box-shadow: 0 0 0 1px var(--color-primary, #0b51c8) inset;
}
/* G29 — Params (TBD) fallback. Rendered when a product has no
   `_centi_param_image_id` configured. Visual differences from the
   active placeholder:
     - grey muted background + reduced opacity
     - dashed border (signals "pending")
     - question-mark icon instead of pencil
     - disabled cursor; pointer-events: none to suppress any click
     - no hover transition, no active state
   Scope: `.cs-v21-detail` so it wins against the bare thumb rule. */
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder-tbd,
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder.cs-product-gallery__thumb--params-placeholder-tbd {
	background: #eef0f3;
	border-style: dashed;
	border-color: #c0c5cc;
	color: #6a7079;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.65;
}
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder-tbd:hover,
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder-tbd:focus,
.cs-v21-detail .cs-product-gallery__thumb--params-placeholder-tbd:focus-visible {
	background: #eef0f3;
	border-color: #c0c5cc;
	color: #6a7079;
	box-shadow: none;
	outline: none;
}
.cs-product-gallery__params-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: inherit;
}
.cs-product-gallery__params-label {
	font-size: 10px;
	line-height: 1;
}

.cs-product-gallery__stage {
	position: relative;
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

/* V25.6 / G24c (rev 2) — thumb-less mode exposes a "View parameters"
 * button between the thumb strip and the main stage so the buyer can
 * reach the parameter diagram (tail slide) without a dedicated thumb.
 */
.cs-product-gallery__params-bar {
	margin: 12px 0 14px;
	display: flex;
	justify-content: flex-start;
}
.cs-product-gallery__view-params {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #ffffff;
	border: 1px solid var(--color-border, #d9dde2);
	border-radius: 999px;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.cs-product-gallery__view-params:hover {
	background: #f4f7fa;
	border-color: #1a1a1a;
	transform: translateY(-1px);
}
.cs-product-gallery__view-params-icon {
	font-size: 15px;
	line-height: 1;
}

.cs-product-gallery__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	display: none;
	justify-content: center;
	align-items: center;
}

.cs-product-gallery__figure.is-active {
	display: flex;
}

.cs-product-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--color-bg-muted);
}

.cs-product-gallery__video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.cs-product-gallery__video-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-product-gallery__video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 42, 56, 0.35);
	color: #fff;
	font-size: 3rem;
	transition: background 0.12s ease;
}

.cs-product-gallery__video-poster:hover .cs-product-gallery__video-play,
.cs-product-gallery__video-poster:focus-visible .cs-product-gallery__video-play {
	background: rgba(30, 42, 56, 0.5);
}

.cs-product-gallery__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Product image (used when placeholder fills in for missing gallery). */
.cs-product-image-placeholder {
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.cs-product-image-placeholder__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Force WC's default <img> on single-product page to fall back style. */
.woocommerce div.product div.images,
.single-product div.product .woocommerce-product-gallery {
	width: 100%;
}

.woocommerce div.product div.images .cs-product-image-placeholder,
.woocommerce div.product div.images img.cs-product-image-placeholder__img {
	width: 100%;
	max-width: 600px;
}

/* B2B info banner (above the title or within summary). */
.cs-b2b-banner {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background: var(--color-primary-light);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
}
.cs-b2b-banner:hover {
	background: #e0ecff;
}
.cs-b2b-banner:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.cs-b2b-banner__badge {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
	text-transform: uppercase;
}

.cs-b2b-banner__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-heading);
	line-height: 1.5;
}

/* B2B pricing meta — appears right after WC's price element. */
.cs-b2b-pricing-meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.5rem 0 1rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-bg-muted);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	font-size: 0.9375rem;
}

.cs-b2b-pricing-meta__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-secondary);
	font-weight: 600;
}

.cs-b2b-pricing-meta__value {
	font-weight: 700;
	color: var(--color-heading);
	font-variant-numeric: tabular-nums;
}

/* Quote CTA card under the Add to Cart. */
.cs-quote-cta {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.25rem 1.5rem;
	background: linear-gradient(135deg, var(--color-primary-light), #ffffff);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cs-quote-cta__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-heading);
}

.cs-quote-cta__body {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.55;
}

.cs-quote-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	border-radius: var(--radius);
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.12s ease, transform 0.12s ease;
}

.cs-quote-cta__button:hover,
.cs-quote-cta__button:focus-visible {
	background: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.cs-quote-cta__button:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Reduced motion: a fuller block lives near :root and also covers
 * scroll-behavior + animation-delay + transition-delay. Do NOT add
 * another block here — adjust the one near :root instead. */

/* Responsive */
@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		min-height: auto;
	}

	.site-header__nav {
		order: 3;
		flex-basis: 100%;
	}

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

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

	.woocommerce div.product div.summary {
		position: static;
		box-shadow: none;
		padding: 1.25rem;
	}

	.cs-product-gallery {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.cs-v21-detail .cs-product-gallery__thumbs {
		order: 2;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72px;
		flex-direction: row;
		gap: 0.5rem;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 0.25rem;
	}

	.cs-v21-detail .cs-product-gallery__thumb {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
	}

	.cs-v21-detail .cs-product-gallery__thumb--params {
		grid-column: auto;
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
		margin-top: 0;
	}

	.cs-product-gallery__stage {
		order: 1;
		aspect-ratio: 1 / 1;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 2rem 1.5rem;
	}

	.site-header__brand .custom-logo,
	.site-header__brand .custom-logo img,
	.site-header__brand .site-logo {
		max-height: 32px;
		max-width: 140px;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
 * Price placeholder for EXW-only products (public price
 * not yet approved). Driven by price_basis=EXW + empty
 * regular_price in centi-shop/woocommerce/{loop,single-product}/price.php.
 * --------------------------------------------------------- */
.price--on-request {
	display: inline-block;
	padding: 0.35em 0.7em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1f2a44;
	background: transparent;
	white-space: nowrap;
}

.woocommerce-loop-product__price .price--on-request {
	display: block;
	text-align: center;
	padding: 0.5em 0.75em;
	margin-top: 0.5em;
}

.price__exw {
	display: block;
	margin-top: 0.35em;
	font-size: 0.78em;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #555;
}

/* ----------------------------------------------------------
 * Home page — hero / categories / featured / OEM
 * (02 §5 limits: single hero, no carousel, ≤6 category cards,
 * ≤8 featured products, OEM/ODM paragraph.)
 * ----------------------------------------------------------*/

.home-hero {
	background: linear-gradient(180deg, var(--color-primary-light, #e8eefc) 0%, var(--color-bg-muted, #f5f6f8) 100%);
	padding: clamp(2rem, 5vw, 4rem) 1.5rem;
	text-align: center;
}

.home-hero__inner {
	max-width: 880px;
	margin: 0 auto;
}

.home-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	color: var(--color-primary);
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.home-hero__title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0 0 1rem;
}

.home-hero__subhead {
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	color: var(--color-text);
	line-height: 1.55;
	margin: 0 auto 1.5rem;
	max-width: 720px;
}

.home-hero__subhead .home-hero__extlink {
	display: inline-block;
	margin-left: 0.35em;
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 600;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.home-hero__subhead .home-hero__extlink:hover,
.home-hero__subhead .home-hero__extlink:focus-visible {
	color: var(--color-primary-hover);
	text-decoration-thickness: 2px;
}

.home-hero__subhead .home-hero__extlink::after {
	content: " \2197";
	font-weight: 400;
	margin-left: 0.15em;
	opacity: 0.85;
}

.home-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.home-hero .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.home-hero .button--primary {
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
}
.home-hero .button--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.home-hero .button--primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.home-hero .button--ghost {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.home-hero .button--ghost:hover { background: var(--color-primary-light); }

/* Categories */

.home-categories {
	max-width: var(--content-max, 1400px);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem) 1.5rem;
}

.home-categories__title,
.home-featured__title,
.home-oem__title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	color: var(--color-heading);
	margin: 0 0 0.5rem;
}

.home-categories__lede,
.home-featured__lede,
.home-oem__lede {
	color: var(--color-text);
	line-height: 1.55;
	margin: 0 0 0.75rem;
	max-width: 720px;
}

.home-oem__lede + .home-oem__lede {
	margin-top: 0.5rem;
}

.home-categories__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.category-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.category-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 14px rgba(11, 81, 200, 0.08);
	transform: translateY(-2px);
}

.category-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1rem;
	text-decoration: none;
	color: var(--color-heading);
}

.category-card__icon {
	font-size: 1.5rem;
}

.category-card__label {
	font-weight: 600;
	font-size: 1rem;
}

.category-card__use {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

/* Featured products (8 items grid) */

.home-featured {
	max-width: var(--content-max, 1400px);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem) 1.5rem;
}

.home-featured__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.home-featured__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.home-featured__cart-summary {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.home-featured__quote-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	border-radius: var(--radius);
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.home-featured__quote-cta:hover,
.home-featured__quote-cta:focus {
	background-color: var(--color-primary-hover);
	transform: translateY(-1px);
}

.home-featured__quote-cta:active {
	transform: translateY(0);
}

@media (max-width: 600px) {
	.home-featured__header {
		flex-direction: column;
	}
	.home-featured__cart-summary {
		width: 100%;
		justify-content: flex-start;
	}
}

.home-featured .products {
	/* V24.14.9 — 3 columns to align with the 6/page × 2-rows pagination spec.
	   Each home section now renders 3-up × 2-row grids (page 1 = 6, page 2 = 6). */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* V24.14.13 — Revert: home Featured loop cards now share the exact
   cs-loop-cart treatment used by /shop/ archive (where the body has
   `woocommerce` class so `.woocommerce ul.products li.product` selects the
   li.product). On the home page the body lacks that class, so we mirror
   the same box, title, price, button rules under `.home-featured` so the
   two loops render identically. */
.home-featured .products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.home-featured .products li.product:hover {
	border-color: var(--color-primary);
}
.home-featured .products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-bg-muted);
}
.home-featured .products li.product .woocommerce-loop-product__title {
	margin: 0.75rem 1rem 0.25rem;
	font-size: 1rem;
	color: var(--color-heading);
	line-height: 1.35;
}
.home-featured .products li.product .price {
	margin: 0.25rem 1rem 0.75rem;
	color: var(--color-heading);
	font-weight: 600;
}

/* OEM/ODM */

.home-oem {
	max-width: var(--content-max, 1400px);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem) 1.5rem 2rem;
}

.home-oem {
	border-top: 1px solid var(--color-border);
}

.home-oem__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.home-oem .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.home-oem .button--primary {
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
}
.home-oem .button--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.home-oem .button--ghost {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.home-oem .button--ghost:hover { background: var(--color-primary-light); }

/* Responsive */
@media (max-width: 768px) {
	.home-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-featured .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.home-categories__grid { grid-template-columns: 1fr; }
	.home-featured .products { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
 * Shop list page (R2)
 * - 02 §6 + §19.1
 *   · Filter chip row (server-rendered, no JS dependency)
 *   · 300-450-word procurement guide below the product grid
 * ---------------------------------------------------------- */

.shop-filter-row {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.shop-filter-row__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shop-filter-row__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-bg);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.shop-filter-row__chip a {
	color: inherit;
	text-decoration: none;
}

.shop-filter-row__chip a:hover,
.shop-filter-row__chip a:focus-visible {
	color: var(--color-primary);
}

.shop-filter-row__chip--active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/**
 * Shop toolbar: sort dropdown + result count + cart entry.
 * R17g — three sections sit left → right with gap between them.
 */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0;
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.shop-toolbar .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.shop-toolbar .woocommerce-ordering .orderby {
	min-width: 180px;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6a7a' d='M1 4l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	cursor: pointer;
}

.shop-toolbar .woocommerce-ordering .orderby:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/**
 * R17g — Reuse the home-page featured summary visual identity
 * (cart icon + count badge + Go to cart button) on the shop toolbar.
 */
.shop-toolbar__cart-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.shop-toolbar__go-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	border-radius: var(--radius);
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.shop-toolbar__go-to-cart:hover,
.shop-toolbar__go-to-cart:focus {
	background-color: #0a469c;
	transform: translateY(-1px);
}

.shop-toolbar__go-to-cart:active {
	transform: translateY(0);
}

@media (max-width: 600px) {
	.shop-toolbar {
		gap: 0.75rem;
	}

	.shop-toolbar__cart-summary {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 480px) {
	.shop-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.shop-toolbar .woocommerce-ordering .orderby {
		width: 100%;
	}

	.shop-toolbar__go-to-cart {
		width: 100%;
	}
}

.shop-procurement-guide {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.shop-procurement-guide__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	color: var(--color-heading);
}

.shop-procurement-guide__body {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 2rem;
	-moz-column-gap: 2rem;
	column-gap: 2rem;
}

.shop-procurement-guide p {
	margin: 0 0 0.5rem;
	max-width: none;
	line-height: 1.55;
	color: var(--color-text);
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

.shop-procurement-guide p:last-child {
	margin-bottom: 0;
}

.shop-procurement-guide a {
	color: var(--color-primary);
}

@media (max-width: 768px) {
	.shop-procurement-guide__body {
		-webkit-columns: 1;
		-moz-columns: 1;
		columns: 1;
	}
}

/* ----------------------------------------------------------
 * Single-product additions (R2)
 * - 02 §7 / §19.3
 *   · Model eyebrow above title
 *   · "Need volume pricing? Request a quote." link after BUY IT NOW
 *   · Related products block (4 deterministic slugs)
 * ---------------------------------------------------------- */

.cs-product-eyebrow {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.cs-volume-pricing-link {
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: 0.875rem;
}

.cs-volume-pricing-link a {
	color: var(--color-primary);
	text-decoration: none;
}

.cs-volume-pricing-link a:hover,
.cs-volume-pricing-link a:focus-visible {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Deterministic related-products block emitted by single-product.php */
.cs-related-products {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.cs-related-products__title {
	margin: 0 0 1rem;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	color: var(--color-heading);
}

.cs-related-products__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.cs-related-product {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.cs-related-product:hover {
	border-color: var(--color-primary);
}

.cs-related-product__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.875rem;
	color: var(--color-heading);
	text-decoration: none;
}

.cs-related-product__link:hover,
.cs-related-product__link:focus-visible {
	text-decoration: none;
	color: var(--color-heading);
}

.cs-related-product__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-bg-muted);
	border-radius: var(--radius);
}

.cs-related-product__title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.cs-related-product__price {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
	.cs-related-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.cs-related-products__grid {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
 * Product post_content (built by cs-fill-product-content.php)
 * - 02 §7 specs / applications / installation / FAQ / related list
 * ---------------------------------------------------------- */

.cs-product-body {
	margin: 2rem 0 0;
}

.cs-product-body__heading {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.0625rem;
	color: var(--color-heading);
	scroll-margin-top: calc(var(--header-height) + 1rem);
}

.cs-product-body__opener {
	margin: 0 0 1rem;
	color: var(--color-text);
	line-height: 1.65;
	max-width: 70ch;
}

.cs-product-body__bullets {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	color: var(--color-text);
	line-height: 1.6;
}

.cs-spec-table {
	width: 100%;
	max-width: 60ch;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
}

.cs-spec-table th,
.cs-spec-table td {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.cs-spec-table th {
	background: var(--color-bg-muted);
	color: var(--color-heading);
	font-weight: 600;
	width: 38%;
}

.cs-spec-table td {
	color: var(--color-text);
}

.cs-product-body__faq {
	margin: 0;
	padding: 0;
}

.cs-product-body__faq dt {
	margin: 0.75rem 0 0.25rem;
	font-weight: 600;
	color: var(--color-heading);
}

.cs-product-body__faq dd {
	margin: 0 0 0.5rem;
	padding-left: 1rem;
	color: var(--color-text);
	line-height: 1.6;
}

.cs-product-body__related {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.cs-product-body__related li::before {
	content: "·";
	color: var(--color-text-secondary);
	margin-right: 0.5rem;
}

.cs-product-body__related li:first-child::before {
	content: "";
	margin: 0;
}

/* ----------------------------------------------------------
 * Quick responsive for the new product body on tablets / mobile
 * ---------------------------------------------------------- */

@media (max-width: 768px) {
	.shop-procurement-guide {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}

	.cs-related-products {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}
}

/* ----------------------------------------------------------
 * R3 static pages — /contact/, /scent-diffuser-manufacturer/,
 * /cold-air-diffusion/, /privacy-policy/, /terms/
 *
 * Shared layout for the three B2B capability pages, plus the
 * dedicated contact-page channel cards.
 * ---------------------------------------------------------- */

.cs-page-intro {
	margin: 0 0 2rem;
	max-width: 70ch;
}

.cs-page-intro p {
	margin: 0 0 0.75rem;
	line-height: 1.55;
	color: var(--color-text);
}

.cs-page-pending {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	background: #fff7e0;
	border-left: 3px solid #d99a00;
	border-radius: var(--radius);
	color: #5a4500;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cs-faq {
	margin: 1rem 0 0;
	padding: 0;
}

.cs-faq dt {
	margin: 1rem 0 0.25rem;
	font-weight: 600;
	color: var(--color-heading);
}

.cs-faq dd {
	margin: 0 0 0.75rem;
	padding-left: 0.5rem;
	color: var(--color-text);
	line-height: 1.6;
}

/* Contact page */

.cs-contact-intro {
	margin: 0 0 2rem;
	max-width: 70ch;
}

.cs-contact-intro p {
	margin: 0 0 0.75rem;
	line-height: 1.55;
	color: var(--color-text);
}

.cs-contact-channels {
	margin: 0 0 2rem;
}

.cs-contact-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.cs-contact-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-contact-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 14px rgba(11, 81, 200, 0.08);
}

.cs-contact-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--color-heading);
}

.cs-contact-card p {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.5;
}

.cs-contact-card__detail {
	font-weight: 700;
	color: var(--color-heading);
	font-variant-numeric: tabular-nums;
}

.cs-contact-card__note {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.cs-contact-quote-cta {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-bg));
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cs-contact-quote-cta h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.cs-contact-quote-cta p {
	margin: 0 0 0.75rem;
	line-height: 1.6;
	color: var(--color-text);
}

.cs-contact-fineprint {
	margin: 0 0 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.cs-contact-fineprint h2 {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
}

.cs-contact-fineprint address {
	margin: 0 0 1rem;
	font-style: normal;
	color: var(--color-text);
	line-height: 1.6;
}

.cs-contact-fineprint__note {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
	max-width: 70ch;
}

.cs-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--radius);
	text-decoration: none;
	min-height: 44px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cs-cta-button:hover,
.cs-cta-button:focus-visible {
	background: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.cs-cta-button:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Responsive: stack the channel cards on tablet / mobile */
@media (max-width: 768px) {
	.cs-contact-cards {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
 * Contact page — main-site layout (info left / form right / map below)
 * ---------------------------------------------------------- */

.site-main--contact .entry-content,
.site-main--contact .page-header {
	margin-bottom: 1.5rem;
}

.cs-contact-main {
	margin: 0 0 2rem;
}

.cs-contact-main__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.cs-contact-main__info {
	color: var(--color-text);
}

.cs-contact-main__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	line-height: 1.25;
	color: var(--color-heading);
}

.cs-contact-main__intro {
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

.cs-contact-main__intro p {
	margin: 0 0 0.75rem;
}

.cs-contact-main__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cs-contact-main__list li {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.cs-contact-main__list a {
	color: var(--color-primary);
	text-decoration: none;
}

.cs-contact-main__list a:hover,
.cs-contact-main__list a:focus-visible {
	text-decoration: underline;
}

.cs-contact-main__address-title {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.cs-contact-main__address-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.cs-contact-main__address-title a:hover,
.cs-contact-main__address-title a:focus-visible {
	color: var(--color-primary);
}

.cs-contact-main__address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.cs-contact-main__address a {
	color: var(--color-text);
	text-decoration: none;
}

.cs-contact-main__address a:hover,
.cs-contact-main__address a:focus-visible {
	color: var(--color-primary);
}

.cs-contact-main__form {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: 0 4px 20px rgba(11, 81, 200, 0.06);
}

.cs-contact-main__form-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	color: var(--color-heading);
}

.cs-contact-main__form-hint {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.cs-contact-main__notice {
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cs-contact-main__notice--success {
	background: #e8f5e9;
	color: #1b5e20;
	border-left: 3px solid #2e7d32;
}

.cs-contact-main__notice--error {
	background: #ffebee;
	color: #c62828;
	border-left: 3px solid #c62828;
}

.cs-contact-form {
	display: grid;
	gap: 1.125rem;
}

.cs-contact-form__field {
	display: grid;
	gap: 0.4rem;
}

.cs-contact-form__field--submit {
	margin-top: 0.75rem;
}

.cs-contact-form__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-heading);
}

.cs-contact-form__required {
	color: #c62828;
	margin-left: 0.15rem;
}

.cs-contact-form__input,
.cs-contact-form__textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #d0d7de;
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cs-contact-form__input::placeholder,
.cs-contact-form__textarea::placeholder {
	color: #9aa5b1;
}

.cs-contact-form__input:hover,
.cs-contact-form__textarea:hover {
	border-color: #b0bcca;
}

.cs-contact-form__input:focus,
.cs-contact-form__textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(11, 81, 200, 0.1);
	background-color: #fff;
	outline: none;
}

.cs-contact-form__input:required:invalid:not(:placeholder-shown),
.cs-contact-form__textarea:required:invalid:not(:placeholder-shown) {
	border-color: #c62828;
}

.cs-contact-form__textarea {
	resize: vertical;
	min-height: 130px;
}

.cs-contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.875rem 1.5rem;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	min-height: 52px;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.cs-contact-form__submit:hover,
.cs-contact-form__submit:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	box-shadow: 0 4px 14px rgba(11, 81, 200, 0.2);
}

.cs-contact-form__submit:active {
	transform: translateY(1px);
}

.cs-contact-form__submit:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.cs-contact-map {
	margin: 0 0 2rem;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: #e8ecf0;
}

.cs-contact-map__embed {
	width: 100%;
	height: 380px;
	border: 0;
	display: block;
}

@media (max-width: 900px) {
	.cs-contact-main__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.cs-contact-main__form {
		padding: 1.5rem;
	}

	.cs-contact-map__embed {
		height: 280px;
	}
}

/* ----------------------------------------------------------
 * R4 — Cart + Quote Checkout UI
 * - 02 §8: B2B quote semantics, no B2C affordances
 * ---------------------------------------------------------- */

/* Cart layout (Quipzo-style 2-col on desktop) */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Cart table */
.woocommerce-cart table.shop_table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: middle;
}

.woocommerce-cart table.shop_table thead th {
	background: var(--color-bg-muted);
	color: var(--color-heading);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce-cart table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--color-bg-muted);
}

.woocommerce-cart table.shop_table .product-name a {
	color: var(--color-heading);
	font-weight: 600;
}

.woocommerce-cart table.shop_table .product-name .variation {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.woocommerce-cart table.shop_table .product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.woocommerce-cart table.shop_table .product-quantity input.qty {
	width: 4rem;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
}

.woocommerce-cart table.shop_table .product-remove a {
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.woocommerce-cart table.shop_table .product-remove a:hover,
.woocommerce-cart table.shop_table .product-remove a:focus-visible {
	color: var(--color-danger);
}

/* Cart actions row (Update cart) */
.woocommerce-cart .actions {
	margin: 1rem 0 0;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Cart collaterals (right column: shipping + total) */
.woocommerce-cart .cart-collaterals {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
}

.woocommerce-cart .cart_totals .cart-all-subtotal th,
.woocommerce-cart .cart_totals .cart-all-subtotal td {
	font-weight: 700;
	color: var(--color-heading);
	border-top: 1px solid var(--color-border);
	padding-top: 0.75rem;
}

.woocommerce-cart .cart_totals .shipping-note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

/* Proceed-to-quote button — match the primary CTA styling */
.woocommerce-cart .wc-proceed-to-checkout {
	margin: 1rem 0 0;
	text-align: center;
}

.woocommerce-cart .wc-proceed-to-checkout a.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 14rem;
	min-height: 48px;
	padding: 0.75rem 2rem;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-cart .wc-proceed-to-checkout a.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button:focus-visible,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
}

.woocommerce-cart .continue-shopping-link {
	margin: 0.75rem 0 0;
	text-align: center;
}

/* V21.x — Anchor target: smooth-scroll lands with a small top offset. */
#quote-summary {
	scroll-margin-top: 1rem;
}

/* V21.x — Proceed-to-quote loading / disabled states. */
.cs-proceed-to-quote.is-loading,
.cs-proceed-to-quote.is-disabled {
	opacity: 0.7;
	cursor: progress;
	pointer-events: none;
}

.cs-proceed-to-quote.is-disabled {
	cursor: not-allowed;
}

/* V21.x — Quote summary panel rendered at the top of the checkout form
   when ?quote=<id> is present and matches the buyer's session quote. */
.centi-checkout-quote-summary {
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--color-primary, #0b51c8) 25%, #fff);
	border-left: 4px solid var(--color-primary, #0b51c8);
	border-radius: var(--radius, 6px);
	background: color-mix(in srgb, var(--color-primary, #0b51c8) 6%, #fff);
	font-size: 0.9375rem;
}

.centi-checkout-quote-summary code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	background: #fff;
	padding: 0 0.35rem;
	border-radius: 3px;
	border: 1px solid #e6e8eb;
}

.centi-checkout-quote-summary__meta {
	margin-left: 0.75rem;
	color: var(--color-text-secondary);
}

.centi-checkout-quote-summary__lines {
	width: 100%;
	margin-top: 0.75rem;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.centi-checkout-quote-summary__lines th,
.centi-checkout-quote-summary__lines td {
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid #e6e8eb;
	text-align: left;
}

.centi-checkout-quote-summary__lines thead th {
	background: #fff;
	font-weight: 600;
}

.centi-checkout-quote-summary__lines tfoot th,
.centi-checkout-quote-summary__lines tfoot td {
	border-bottom: none;
	font-size: 0.9375rem;
}

@media (max-width: 640px) {
	.centi-checkout-quote-summary__lines thead {
		display: none;
	}
	.centi-checkout-quote-summary__lines tr {
		display: block;
		padding: 0.5rem 0;
		border-bottom: 1px solid #e6e8eb;
	}
	.centi-checkout-quote-summary__lines td {
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0;
		border: none;
	}
}

.woocommerce-cart .continue-shopping-link a {
	color: var(--color-primary);
	font-size: 0.9375rem;
	text-decoration: none;
}

.woocommerce-cart .continue-shopping-link a:hover,
.woocommerce-cart .continue-shopping-link a:focus-visible {
	text-decoration: underline;
}

/* Empty cart (R4 override template) */
.cs-cart-empty {
	margin: 2rem 0;
	padding: 2rem;
	background: var(--color-bg);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	text-align: center;
}

.cs-cart-empty__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: var(--color-heading);
}

.cs-cart-empty__lede {
	margin: 0 auto 1.5rem;
	max-width: 60ch;
	color: var(--color-text);
	line-height: 1.6;
}

.cs-cart-empty__cta {
	margin: 0 0 1.5rem;
}

.cs-cart-empty__hint {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

/* Checkout — submit button text uses the filter, but make sure the
 * primary CTA matches our token styling.
 */

/* V12 + V14 — Compact input / dropdown width on the checkout page.
 * - Default width: 25% (one quarter) of the form-row container.
 * - The box itself NEVER lengthens on hover / focus — the field stays
 *   compact at 25% throughout the whole interaction.
 * - `overflow: visible` + `text-overflow: clip` ensure that long text
 *   the user types (emails, company names, addresses, country names)
 *   is never visually blocked: it scrolls within the field and the
 *   end-of-text caret always remains reachable.
 * - `min-width: 25%` keeps the field usable on narrow viewports;
 *   `max-width: 100%` prevents overflow on small screens.
 * - The mobile breakpoint below forces the field to 100% width so
 *   on phones it is still fully usable.
 */
/* V24.12 — Wrapper / select2-container.
 *
 * We let the `.woocommerce-input-wrapper` and `.select2-container`
 * both render at 100% of their form-row container. That means:
 *
 *   - form-row-first/last wrappers are ≈ 48% of the page (two
 *     side-by-side pairs each fill their half).
 *   - form-row-wide wrappers are 100% of the page (one input per
 *     row).
 *
 * This is the natural WC layout; the visible input / select below
 * also runs at 100% of its wrapper so the decoration matches the
 * input exactly.
 *
 * selectWoo derives the dropdown width from
 * `.select2-container.outerWidth(false)` (see selectWoo.full.js),
 * which means a 100%-of-form-row-wide select would open a dropdown
 * spanning the entire page. To prevent that without sacrificing the
 * roomy form-row-wide layout for inputs, we apply the 50% cap ONLY
 * to `.select2-container` instances that live in `form-row-wide`
 * (i.e. centi_role / centi_scenario / centi_quantity_band), and
 * leave form-row-first selects (billing_country) un-capped so the
 * dropdown is roomy and proportional.
 */
.woocommerce-checkout form .form-row .woocommerce-input-wrapper,
.woocommerce-checkout form .form-row .select2-container {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* V24.12 — Cap the select2 dropdown width to 50% of the form-row
 * for full-width selects (form-row-wide: centi_role, centi_scenario,
 * centi_quantity_band). Without this, the dropdown would span the
 * whole page (~1170px), which is hard to scan and would push the
 * floating V14 preview past the page edge.
 */
.woocommerce-checkout form .form-row-wide .select2-container {
	max-width: 50%;
}

/* V24.12 — Inputs / textareas / select2-selection render at 100% of
 * their form-row container so WC's natural two-up / one-up layout
 * (form-row-first/last vs form-row-wide) gives us the right width
 * without any per-field overrides.
 *
 * G95 (2026-09-13) — B2B quote checkout: cap input width to 1/3 of
 * the form-row container (`max-width: 33.333%`) so the form reads as
 * a compact lead form rather than a wide address form. The visitor
 * only needs to leave an email; full shipping address is collected
 * by sales on reply. Original 100% width is preserved on the mobile
 * breakpoint below so phones remain usable.
 */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row .select2-selection {
	width: 100%;
	max-width: 33.333%;
	box-sizing: border-box;
	overflow: visible;
	text-overflow: clip;
}

/* V24.12 — Country-specific: billing_country is rendered as
 * form-row-wide on this shop (it sits alone on its own row because WC
 * 11.x's checkout layout promotes the country dropdown to full-width
 * when address fields are configured as optional). Without an explicit
 * cap the selectWoo dropdown would span the entire page (~92% of the
 * viewport), which is hard to scan. Cap at 50% of form-row so the
 * dropdown is a comfortable medium width matching the other
 * form-row-wide selects (centi_role / centi_scenario / centi_quantity_band).
 */
.woocommerce-checkout form #billing_country_field .select2-container {
	max-width: 50%;
}

/* V24.11 — Country search overlay was removed (V13 dropped). The
 * leftover `.cs-country-search` rule is preserved as a no-op so any
 * lingering styling from the user's cache is harmless; new pages no
 * longer emit the overlay input.
 */
.woocommerce-checkout form .form-row .cs-country-search {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
	text-overflow: clip;
	display: none;
}

/* V24.11 — Floating text preview for compact checkout inputs/selects.
 * When a field is focused or hovered and its value overflows the
 * 25%-wide box, a small preview appears below the field so the user
 * can read the complete text without the box itself widening.
 *
 * V24.11 — bounded width:
 *   - `max-width: 50%` caps the preview at half the form-row instead of
 *     the previous 100% (which made the preview appear to span half the
 *     page on hover).
 *   - `width: max-content` lets the box shrink to the actual text width
 *     so a short value stays compact.
 *   - `opacity: 0` + `transition: opacity 100ms` lets JS animate
 *     show/hide without a hard reflow.
 *
 * V24.12 — preview width raised to 80% of form-row because inputs are
 * now wider (100% of form-row instead of 25%); a 50% preview cap
 * would feel narrower than the field itself.
 */
.cs-input-text-preview {
	display: none;
	position: absolute;
	z-index: 1000;
	max-width: 80%;
	width: max-content;
	min-width: 220px;
	opacity: 0;
	transition: opacity 100ms ease-out;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #e8ecf0;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #222;
	word-break: break-word;
	pointer-events: none;
}

@media (max-width: 600px) {
	.woocommerce-checkout form .form-row input.input-text,
	.woocommerce-checkout form .form-row select,
	.woocommerce-checkout form .form-row textarea,
	.woocommerce-checkout form .form-row .cs-country-search,
	.woocommerce-checkout form .form-row .select2-container,
	.woocommerce-checkout form .form-row .select2-selection {
		width: 100%;
		max-width: 100%;
	}
}
.woocommerce-checkout #payment,
.woocommerce-checkout .wc-payment-methods {
	/* Hide the legacy payment-methods panel: V1 only ships the
	 * "Request a Quote" gateway, so the radio list is noise.
	 * However if Centi Quote gateway is the ONLY option, WC will
	 * still render the heading; we keep it minimal.
	 */
}

.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	margin-top: 1.25rem;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 0.625rem 0.75rem;
}

/* V24.9 — Anything else? textarea: single-line appearance by default
   (width 25% ≈ 1/4 of the row, height ≈ 1 line). When the buyer types
   more content, `field-sizing: content` makes the textarea grow BOTH
   horizontally (longest line wins) and vertically (wrapping adds rows)
   automatically. No manual resize grip (resize: none). No JS height
   recompute needed. The selector is chained with form-row-wide +
   centi-input to outrank the theme's
   `.woocommerce-checkout form .form-row textarea { width: 25% }` rule.

   V24.9 difference from V24.6: removed the explicit `:hover/:focus` 50%
   expansion rule. With `field-sizing: content`, the textarea already
   grows as content grows — manual focus-driven widening is no longer
   needed and would conflict with content-driven sizing. `max-width`
   bumped 50% → 100% so a really long single line can use the full row. */

.woocommerce-checkout form .form-row-wide textarea.centi-input {
	field-sizing: content;
	width: 25%;
	min-width: 25%;
	max-width: 100%;
	min-height: 2.5rem;
	resize: none;
	overflow: hidden;
	transition: width 160ms ease-out, height 160ms ease-out;
}

/* V24.9 — Hide the now-orphaned "Additional information" section.
   Anything else? moved out via woocommerce_checkout_after_customer_details
   (see class-cs-checkout-fields.php), leaving only the default Woo
   Order notes textarea inside .woocommerce-additional-fields. We hide the
   whole section so the buyer doesn't see a redundant Order notes box
   that does nothing our Anything else? doesn't already do. */
.woocommerce-checkout .woocommerce-additional-fields {
	display: none;
}

/* Thank-you page (order-received endpoint) */
.woocommerce-thankyou-order-received {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	color: var(--color-heading);
	font-weight: 600;
}

.woocommerce-order-overview {
	margin: 0 0 1.5rem;
}

/* Responsive: stack cart on tablet / mobile */
@media (max-width: 1024px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.woocommerce-cart table.shop_table,
	.woocommerce-cart table.shop_table thead,
	.woocommerce-cart table.shop_table tbody,
	.woocommerce-cart table.shop_table tr,
	.woocommerce-cart table.shop_table th,
	.woocommerce-cart table.shop_table td {
		display: block;
	}

	.woocommerce-cart table.shop_table thead {
		display: none;
	}

	.woocommerce-cart table.shop_table tr {
		border-bottom: 1px solid var(--color-border);
		padding: 0.75rem 0;
	}

	.woocommerce-cart table.shop_table td {
		border-bottom: 0;
		padding: 0.25rem 1rem;
	}

	.woocommerce-cart table.shop_table td::before {
		content: attr(data-title);
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--color-text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-bottom: 0.25rem;
	}
}

/* Hide elements that should never appear in B2B quote context */
.woocommerce-cart .woocommerce-form-coupon,
.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .cross-sells,
.woocommerce-checkout .woocommerce-info--pay,
.woocommerce-checkout .payment_methods li.payment_method_paypal,
.woocommerce-checkout .payment_methods li.payment_method_stripe,
.woocommerce-checkout .payment_methods li.payment_method_amazon_payments,
.woocommerce-checkout .payment_methods li.payment_method_applepay,
.woocommerce-checkout .payment_methods li.payment_method_googlepay,
.woocommerce-checkout .payment_box,
.woocommerce-checkout .wc_payment_methods,
.woocommerce-checkout ul.payment_methods {
	display: none !important;
}

/* Keep the payment wrapper visible so the place-order submit button is rendered.
 * The quote gateway has no actual payment UI, only the CTA.
 */
.woocommerce-checkout .woocommerce-checkout-payment#payment,
.woocommerce-checkout #payment.woocommerce-checkout-payment {
	display: block !important;
}

/* Custom 404 template — keep it actionable. */
.cs-404 {
	max-width: 720px;
	margin: 4rem auto;
	padding: 2rem 1.5rem;
}

.cs-404 .entry-title {
	font-size: 2rem;
	margin: 0 0 0.75rem;
	color: var(--color-text);
}

.cs-404-lede {
	font-size: 1.05rem;
	color: var(--color-text-muted);
	margin: 0 0 2rem;
}

.cs-404-section {
	font-size: 1.1rem;
	margin: 1.75rem 0 0.75rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--color-border);
}

.cs-404-list {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0 0 1.25rem;
}

.cs-404-list li {
	margin: 0.35rem 0;
}

.cs-404-list a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.cs-404-cta {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius, 4px);
	font-weight: 600;
	text-decoration: none;
}

.cs-404-cta:hover,
.cs-404-cta:focus-visible {
	background: var(--color-primary-hover, var(--color-primary));
	text-decoration: none;
}

/* ----------------------------------------------------------
 * R8 — Shop loop "Has video" pill + "View details" CTA
 * ---------------------------------------------------------- */

.cs-card-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--color-primary);
	color: #fff;
	line-height: 1.4;
}

.cs-card-pill--video {
	background: var(--color-primary);
}

.cs-card-pill--video::before {
	content: "▶";
	font-size: 0.625rem;
}

.woocommerce ul.products li.product {
	position: relative;
	overflow: visible;
}

.cs-card-pill--video {
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(11, 81, 200, 0.25);
}

.cs-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.625rem;
	padding: 0.5rem 0.875rem;
	min-height: 36px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.cs-card-cta:hover,
.cs-card-cta:focus-visible {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
	text-decoration: none;
}

.cs-card-cta:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--color-focus, var(--color-primary));
	outline-offset: var(--focus-ring-offset, 2px);
}

@media (max-width: 480px) {
	.cs-card-cta {
		font-size: 0.75rem;
		padding: 0.5rem 0.625rem;
	}
}

/* ----------------------------------------------------------
 * R8 — Single product video block
 * ---------------------------------------------------------- */

.cs-video-block {
	margin: 2rem 0 0;
	padding: 1.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cs-video-block__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	color: var(--color-heading);
}

.cs-video-block__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: #000;
}

.cs-video-block__iframe,
.cs-video-block__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.cs-video-block__poster-btn {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}

.cs-video-block__poster-btn:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--color-focus, var(--color-primary));
	outline-offset: -2px;
}

.cs-video-block__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	transition: opacity 0.15s ease;
}

.cs-video-block__poster-btn:hover .cs-video-block__poster-img,
.cs-video-block__poster-btn:focus-visible .cs-video-block__poster-img {
	opacity: 1;
}

.cs-video-block__poster-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.5rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	transition: background-color 0.15s ease;
	line-height: 1;
}

.cs-video-block__poster-btn:hover .cs-video-block__poster-play,
.cs-video-block__poster-btn:focus-visible .cs-video-block__poster-play {
	background: rgba(11, 81, 200, 0.6);
}

.cs-video-block__caption {
	margin: 0.75rem 0 0;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.cs-video-block__placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	background: linear-gradient(135deg, var(--color-primary-light, #e8eefc), var(--color-bg-muted, #f5f6f8));
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
}

.cs-video-block__placeholder-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-heading);
}

.cs-video-block__placeholder-body {
	margin: 0 auto;
	max-width: 60ch;
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.6;
}

.cs-video-block__placeholder-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	padding: 0.625rem 1.25rem;
	min-height: 40px;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #fff;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-video-block__placeholder-cta:hover,
.cs-video-block__placeholder-cta:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
}

/* ----------------------------------------------------------
 * R8 — Home video showcase strip
 * ---------------------------------------------------------- */

.home-videos {
	max-width: var(--content-max, 1400px);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem) 1.5rem;
}

.home-videos__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	color: var(--color-heading);
}

.home-videos__lede {
	margin: 0 0 0.75rem;
	max-width: 760px;
	color: var(--color-text);
	line-height: 1.55;
}

.home-videos__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.home-video-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.home-video-card:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.home-video-card__link {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	color: var(--color-heading);
	text-decoration: none;
}

.home-video-card__link:hover,
.home-video-card__link:focus-visible {
	text-decoration: none;
	color: var(--color-heading);
}

.home-video-card__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.home-video-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-video-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	transition: background-color 0.15s ease;
}

.home-video-card__link:hover .home-video-card__play,
.home-video-card__link:focus-visible .home-video-card__play {
	background: rgba(11, 81, 200, 0.55);
}

.home-video-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.875rem 1rem 1rem;
}

.home-video-card__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.home-video-card__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-heading);
	line-height: 1.35;
}

.home-video-card__price {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

.home-video-card__cta {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

@media (max-width: 1024px) {
	.home-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.home-videos__grid {
		grid-template-columns: 1fr;
	}
	.home-video-card__play {
		font-size: 2rem;
	}
}

/* =====================================================================
 * Breadcrumb (below the header on every page except the front page).
 * Keeps the same tokens / radii used elsewhere; small, quiet, clickable.
 * ===================================================================== */

.cs-breadcrumb {
	background: var(--color-bg-muted, #f5f6f8);
	border-bottom: 1px solid var(--color-border, #e8ecf0);
	font-size: 1rem;
	color: var(--color-text-secondary, #5a6a7a);
}

.cs-breadcrumb__list {
	list-style: none;
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	max-width: var(--content-max, 1400px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
}

.cs-breadcrumb__list li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.cs-breadcrumb__list li + li::before {
	content: '\203A';
	color: var(--color-border, #e8ecf0);
	margin: 0 0.6rem;
	font-weight: 600;
	font-size: 1.05em;
}

.cs-breadcrumb__list a {
	color: var(--color-primary, #0b51c8);
	text-decoration: none;
	font-weight: 500;
	transition: color 120ms ease;
}

.cs-breadcrumb__list a:hover,
.cs-breadcrumb__list a:focus-visible {
	color: var(--color-primary-hover, #2d6ae0);
	text-decoration: underline;
}

.cs-breadcrumb__list [aria-current="page"] {
	color: var(--color-text, #2d3a4a);
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cs-breadcrumb__list {
		padding: 0.6rem 1rem;
		font-size: 0.9rem;
	}
}

/* ============================================================
 * V9 — Quote checkout confirmation page (G104 refresh)
 * ============================================================
 * Aligned to the same white-card, 560px-wide visual language as
 * the self-built quote form on /checkout/.
 */

.centi-order-confirmation {
	max-width: 560px;
	margin: 0 auto;
}

.centi-confirmation-banner {
	text-align: center;
	padding: 1.75rem 1.25rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
	border: 1px solid #c8ddf7;
	border-radius: 8px;
}

.centi-confirmation-banner__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1f6feb;
	color: #fff;
	font-size: 1.75rem;
	border-radius: 50%;
}

.centi-confirmation-banner__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	color: var(--color-heading, #1e2a38);
}

.centi-confirmation-banner__lead {
	margin: 0;
	color: var(--color-text-secondary, #5a6a7a);
	font-size: 0.95rem;
}

.centi-confirmation-card {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 32px 28px;
	margin-bottom: 1.25rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.centi-confirmation-card__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--color-heading, #1e2a38);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border, #e8ecf0);
}

.centi-confirmation-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.centi-confirmation-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.95rem;
}

.centi-confirmation-list li span {
	color: var(--color-text-secondary, #5a6a7a);
	flex-shrink: 0;
}

.centi-confirmation-list li strong {
	color: var(--color-text, #2d3a4a);
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

.centi-confirmation-list__block {
	flex-direction: column;
	gap: 0.35rem;
}

.centi-confirmation-list__block p {
	margin: 0;
	color: var(--color-text, #2d3a4a);
	line-height: 1.55;
}

.centi-confirmation-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.centi-confirmation-actions .button {
	display: block;
	width: 100%;
	padding: 14px 24px;
	font-size: 1.05em;
	font-weight: 600;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.centi-confirmation-actions .button:first-child {
	background: #1f6feb;
	color: #fff;
	border: none;
}

.centi-confirmation-actions .button:first-child:hover,
.centi-confirmation-actions .button:first-child:focus-visible {
	background: #1957c4;
}

.centi-confirmation-actions .button:not(:first-child) {
	background: #fff;
	color: #1f6feb;
	border: 1px solid #1f6feb;
}

.centi-confirmation-actions .button:not(:first-child):hover,
.centi-confirmation-actions .button:not(:first-child):focus-visible {
	background: #f0f7ff;
}

/* WooCommerce default order-details / billing-address blocks rendered by the
   woocommerce_thankyou hook are pulled into the same white-card stack. */
.centi-order-confirmation .woocommerce-order-details,
.centi-order-confirmation .woocommerce-columns .woocommerce-column--billing-address {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 32px 28px;
	margin-bottom: 1.25rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.centi-order-confirmation .woocommerce-order-details h2,
.centi-order-confirmation .woocommerce-column--billing-address h2 {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--color-heading, #1e2a38);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border, #e8ecf0);
}

.centi-order-confirmation .woocommerce-order-details table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.centi-order-confirmation .woocommerce-order-details table th,
.centi-order-confirmation .woocommerce-order-details table td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--color-border, #e8ecf0);
	font-size: 0.95rem;
}

.centi-order-confirmation .woocommerce-order-details tfoot th {
	text-align: right;
	font-weight: 600;
}

.centi-order-confirmation .woocommerce-order-details__actions .button {
	padding: 8px 16px;
	font-size: 0.9em;
	border-radius: 4px;
	background: #fff;
	color: #1f6feb;
	border: 1px solid #1f6feb;
}

.centi-order-confirmation .woocommerce-order-details__actions .button:hover,
.centi-order-confirmation .woocommerce-order-details__actions .button:focus-visible {
	background: #f0f7ff;
}

.centi-order-confirmation .woocommerce-column--billing-address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--color-text, #2d3a4a);
}

@media print {
	.site-header,
	.site-footer,
	.cs-breadcrumb,
	.centi-confirmation-actions,
	.centi-site-dock {
		display: none !important;
	}

	.centi-confirmation-banner {
		background: #fff;
		border: 2px solid #1f6feb;
	}

	.centi-confirmation-card {
		break-inside: avoid;
		border: 1px solid #ccc;
	}
}

@media (max-width: 600px) {
	.centi-confirmation-card {
		padding: 24px 20px;
	}

	.centi-confirmation-list li {
		flex-direction: column;
		gap: 0.15rem;
	}

	.centi-confirmation-list li strong {
		text-align: left;
	}
}

/* ===========================================================================
   V16 — Demo / new product / upcoming card grids + pagination
   =========================================================================== */

.cs-demos__grid,
.cs-samples__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.cs-demo-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cs-demo-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cs-demo-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cs-demo-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #f3f3f3;
	overflow: hidden;
}

.cs-demo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cs-demo-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #888;
	font-size: 0.95rem;
}

.cs-demo-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	line-height: 1;
}

.cs-demo-card__body {
	padding: 0.9rem 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cs-demo-card__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #c25e2c;
	font-weight: 600;
}

.cs-demo-card--new_product .cs-demo-card__eyebrow {
	color: #1b6b3a;
}

.cs-demo-card--upcoming .cs-demo-card__eyebrow {
	color: #5a4ccd;
}

.cs-demo-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.35;
}

.cs-demo-card__lede {
	font-size: 0.88rem;
	color: #555;
	line-height: 1.45;
}

.cs-demo-card__cta {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.9rem;
	color: #c25e2c;
	font-weight: 500;
}

.cs-samples__grid {
	/* V24.14.9 — 3 columns to align with the 6/page × 2-rows pagination spec. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-sample-card {
	background: #f9f9f9;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.cs-sample-card:hover {
	transform: translateY(-2px);
}

.cs-sample-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cs-sample-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	/* G49 — light letterbox bg for non-4:3 sources (FC12 is 3:4 portrait). */
	background: #f4f4f5;
}

.cs-sample-card__img {
	width: 100%;
	height: 100%;
	/* G49 — contain: certificates keep their full frame/seal; 4:3 factory shots
	   are unaffected (contain == cover in a 4:3 box); FC12 portrait letterboxes. */
	object-fit: contain;
}

.cs-sample-card__logo {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 64px;
	height: 64px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 6px;
	padding: 4px;
	object-fit: contain;
}

.cs-sample-card__body {
	padding: 0.8rem 1rem 1rem;
}

.cs-sample-card__eyebrow {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}

.cs-sample-card__title {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-top: 4px;
	color: #1f2937;
}

.cs-sample-card__lede {
	font-size: 0.84rem;
	color: #555;
	margin-top: 4px;
	line-height: 1.45;
}

/* Pagination for archives */

.cs-pagination {
	margin: 2.5rem 0;
	display: flex;
	justify-content: center;
}

.cs-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.cs-pagination__item {
	display: inline-flex;
}

.cs-pagination__link {
	padding: 0.5rem 0.85rem;
	border: 1px solid #c25e2c;
	color: #c25e2c;
	text-decoration: none;
	border-radius: 4px;
	background: #fff;
	font-size: 0.9rem;
}

.cs-pagination__link:hover,
.cs-pagination__link:focus {
	background: #c25e2c;
	color: #fff;
}

.cs-pagination__link.current,
.cs-pagination__item .current {
	background: #c25e2c;
	color: #fff;
	border-color: #c25e2c;
}

/* New homepage sections */

.home-news,
.home-samples {
	max-width: 1280px;
	margin: 3rem auto;
	padding: 0 2rem;
}

.home-news__title,
.home-samples__title {
	font-size: 1.6rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 0.5rem;
}

.home-news__lede,
.home-samples__lede {
	color: #555;
	margin: 0 0 1.4rem;
	line-height: 1.55;
	max-width: 720px;
}
.home-news__lede-link {
	color: #555;
	text-decoration: none;
	border-bottom: 1px solid #c9c9c9;
	transition: color .15s ease, border-color .15s ease;
}
.home-news__lede-link:hover,
.home-news__lede-link:focus {
	color: #111;
	border-bottom-color: #111;
}

@media (max-width: 1024px) {
	.home-featured .products,
	.cs-demos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (max-width: 600px) {
	.cs-demos__grid,
	.cs-samples__grid {
		grid-template-columns: 1fr;
	}

	.home-news,
	.home-samples {
		padding: 0 1rem;
	}
}

/* ----------------------------------------------------------
 * R18 — Unified homepage tabs
 *
 * Goal: align 5 content sections (Featured / Browse by use
 * case / Product demos / New & Upcoming / Sample deployments)
 * into one consistent boxed shell so the page stops drifting
 * left/right. Clicking a tab switches the visible panel via
 * main.js — no full page reload, no SEO loss (all five
 * sections remain in the rendered HTML; only one is visible
 * at a time).
 *
 * OEM/ODM section stays outside this shell because it's a
 * full-width prose block, not a card grid.
 * ---------------------------------------------------------- */

:root {
	--home-section-max: 1280px;
	--home-section-pad-x: clamp(1rem, 3vw, 1.75rem);
	--home-section-pad-y: 1.25rem;
	--home-section-border: 1px solid var(--color-border, #e5e7eb);
	--home-section-radius: 0.75rem;
	--home-section-bg: #fff;
	--home-section-bg-soft: #f7f8fa;
	--home-section-gap: 1rem;
}

/* V17.1 — 5 home sections rendered as siblings instead of tab panels.
   Same max-width + padding + border + radius across all five so they
   visually align as a vertical stack. `data-section="..."` is reserved
   for future per-section AJAX hooks (load more / in-place video swap). */

.home-featured.home-section,
.home-categories.home-section,
.home-videos.home-section,
.home-news.home-section,
.home-samples.home-section {
	display: block;
	max-width: var(--home-section-max);
	margin: 1.5rem auto 0;
	padding: var(--home-section-pad-y) var(--home-section-pad-x);
	background-color: var(--home-section-bg);
	border: var(--home-section-border);
	border-radius: var(--home-section-radius);
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.home-featured.home-section + .home-section,
.home-categories.home-section + .home-section,
.home-videos.home-section + .home-section,
.home-news.home-section + .home-section,
.home-samples.home-section + .home-section {
	margin-top: var(--home-section-gap);
}

/* Featured header (cart summary on the right) inside the section. */
.home-featured.home-section .home-featured__header {
	margin-bottom: 1rem;
}

/* Categories grid keeps its columns inside the new section box. */
.home-categories.home-section .home-categories__grid {
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.home-featured.home-section,
	.home-categories.home-section,
	.home-videos.home-section,
	.home-news.home-section,
	.home-samples.home-section {
		padding: 1rem 0.75rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		max-width: calc(100% - 1rem);
	}
}

/* ============================================================
 * Cart row thumbnail placeholder (V19).
 * Replaces the empty `<img>` that WC shows when a product has no
 * featured image. Renders a per-category SVG icon + label.
 * Keeps the `<td class="product-thumbnail">` cell layout intact.
 * ============================================================ */

td.product-thumbnail .cs-cart-thumb-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 88px;
	height: 88px;
	padding: 0.45rem;
	border-radius: 0.5rem;
	background: linear-gradient(135deg, var(--color-bg-muted, #f5f6f8) 0%, #eef2fb 100%);
	border: 1px dashed var(--color-border, #e8ecf0);
	color: var(--color-primary, #0b51c8);
	text-align: center;
	flex-shrink: 0;
}

td.product-thumbnail .cs-cart-thumb-placeholder__icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}

td.product-thumbnail .cs-cart-thumb-placeholder__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

td.product-thumbnail .cs-cart-thumb-placeholder__label {
	font-size: 0.65rem;
	line-height: 1.15;
	color: var(--color-text-secondary, #5a6a7a);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Constrain the cart thumbnail cell so the placeholder doesn't blow up the row. */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail {
	width: 88px !important;
	min-width: 88px !important;
	max-width: 88px !important;
	padding: 0.75rem 0.25rem;
	vertical-align: middle;
	text-align: center;
}

/* The remove column gets blown out by the long "Remove item" header text.
   Use fixed table layout so explicit column widths are respected. */
.woocommerce-cart table.cart {
	table-layout: fixed;
}

.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove {
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	padding-left: 0.25rem !important;
	padding-right: 0.25rem !important;
	text-align: center;
	vertical-align: middle;
}

/* Hide verbose headers visually but keep them for screen readers. */
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart th.product-thumbnail {
	font-size: 0;
	overflow: hidden;
	white-space: nowrap;
}
.woocommerce-cart table.cart th.product-remove .screen-reader-text,
.woocommerce-cart table.cart th.product-remove .screen-reader-text::before,
.woocommerce-cart table.cart th.product-remove .screen-reader-text::after,
.woocommerce-cart table.cart th.product-thumbnail .screen-reader-text,
.woocommerce-cart table.cart th.product-thumbnail .screen-reader-text::before,
.woocommerce-cart table.cart th.product-thumbnail .screen-reader-text::after {
	font-size: 1rem;
}

/* Give the product name more breathing room; let price/quantity/subtotal share the rest. */
.woocommerce-cart table.cart th.product-name,
.woocommerce-cart table.cart td.product-name {
	width: 32%;
}

/* Make the placeholder slightly smaller so it fits the tightened 88px cell. */
.woocommerce-cart table.cart td.product-thumbnail .cs-cart-thumb-placeholder {
	width: 80px;
	height: 80px;
	margin: 0 auto;
}

.woocommerce-cart table.cart td.product-thumbnail .cs-cart-thumb-placeholder__icon {
	width: 30px;
	height: 30px;
}

/* ============================================================
 * Cart coupon section — V20.
 * Inline the coupon input + "Apply coupon" button on one row,
 * drop the separate "Update cart" button. Clicking "Apply coupon"
 * submits the whole cart form (so cart quantities also update).
 * ============================================================ */

.woocommerce-cart table.cart td.actions {
	padding: 1rem 0.75rem;
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
}

.woocommerce-cart table.cart td.actions .cs-coupon-inline__field {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 240px;
	max-width: 420px;
}

.woocommerce-cart table.cart td.actions #coupon_code {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.625rem 0.875rem;
	font-size: 1rem;
	line-height: 1.2;
	border: 1px solid var(--color-border, #e8ecf0);
	border-radius: 0.5rem;
	background: var(--color-bg, #fff);
	color: var(--color-text, #1f2937);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-cart table.cart td.actions #coupon_code:focus {
	outline: none;
	border-color: var(--color-primary, #0b51c8);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0b51c8) 15%, transparent);
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline button[name="apply_coupon"] {
	flex: 0 0 auto;
	min-width: 130px;
	padding: 0.625rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--color-primary, #0b51c8);
	border: 1px solid var(--color-primary, #0b51c8);
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline button[name="apply_coupon"]:hover {
	background: color-mix(in srgb, var(--color-primary, #0b51c8) 88%, #000);
	border-color: color-mix(in srgb, var(--color-primary, #0b51c8) 88%, #000);
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline button[name="apply_coupon"]:active {
	transform: translateY(1px);
}

/* V24.14.6 — In the inline coupon row, the "Check out" anchor must visually
 * match the "Apply coupon" submit button (same height, same width, same
 * font-size). Without this rule, the <a class="button checkout-button …"> falls
 * back to the global .button rule (font-size 0.9375rem, no min-width) and
 * renders noticeably smaller than the adjacent <button name="apply_coupon">.
 * Also enforce white-space: nowrap so the label never breaks across lines. */
.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline a.cs-proceed-to-quote {
	flex: 0 0 auto;
	min-width: 130px;
	padding: 0.625rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #fff;
	background: var(--color-primary, #0b51c8);
	border: 1px solid var(--color-primary, #0b51c8);
	border-radius: 0.5rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline a.cs-proceed-to-quote:hover {
	background: color-mix(in srgb, var(--color-primary, #0b51c8) 88%, #000);
	border-color: color-mix(in srgb, var(--color-primary, #0b51c8) 88%, #000);
	color: #fff;
	text-decoration: none;
}

.woocommerce-cart table.cart td.actions .coupon.cs-coupon-inline a.cs-proceed-to-quote:active {
	transform: translateY(1px);
}

/* Ensure the legacy "Update cart" button never reappears (defensive). */
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	display: none !important;
}


/* =========================================================================
 * V21 — Product detail page 1688-ification
 * ========================================================================= */

.cs-v21-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px;
}

.cs-v21-detail .cs-product-gallery {
	display: grid;
	grid-template-columns: 192px 1fr;
	gap: 16px;
	align-items: start;
}

.cs-v21-detail .cs-product-gallery__thumbs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 88px;
	gap: 8px;
	/* V26.0 / G26 — bumped from 560 to 760 so the appended "Parameters"
	   placeholder (per 1688-style 15-tab layout) is visible without the
	   user having to scroll inside the thumb strip. 760 = 8 rows × 88 +
	   7 × 8 gap. */
	max-height: 760px;
	overflow-y: auto;
	padding-right: 2px;
}

.cs-v21-detail .cs-product-gallery__thumb {
	display: block;
	width: 100%;
	height: 80px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.05s ease;
}

.cs-v21-detail .cs-product-gallery__thumb:hover {
	border-color: rgba(11, 81, 200, 0.35);
}

.cs-v21-detail .cs-product-gallery__thumb.is-active {
	border-color: var(--color-primary, #0b51c8);
	box-shadow: 0 0 0 1px var(--color-primary, #0b51c8);
}

.cs-v21-detail .cs-product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-v21-detail .cs-product-gallery__thumb--params {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0;
	background: #f5f6f8;
	border-color: #d8dde3;
	color: #4a5560;
	font-size: 9px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	height: 80px;
	margin-top: 0;
}

.cs-v21-detail .cs-product-gallery__thumb--params:hover {
	background: #eaeef3;
}

.cs-v21-detail .cs-product-gallery__thumb--params img {
	display: none;
}

.cs-v21-detail .cs-product-gallery__thumb--params::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5560' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='12' y2='16'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cs-v21-detail .cs-product-gallery__thumb--params::after {
	content: "Parameters";
	font-size: 9px;
}

.cs-v21-detail .cs-product-gallery__stage {
	position: relative;
	min-height: 480px;
	background: #f6f7f8;
	border-radius: 8px;
	overflow: hidden;
}

.cs-v21-detail .cs-product-gallery__slide {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.cs-v21-detail .cs-product-gallery__slide.is-active {
	display: flex;
}

.cs-v21-detail .cs-product-gallery__slide img {
	max-width: 100%;
	max-height: 520px;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
}

.cs-v21-summary {
	/* V21.8 (2026-09-10): see the .woocommerce div.product div.summary
	   rule above — the right-column summary card is un-pinned so the
	   user can scroll past it. This rule is the lower-specificity
	   (0,1,0) companion; both rules have to flip to position:static
	   for the override to land. */
	position: static;
	align-self: start;
	background: #fff;
	border: 1px solid #e7eaef;
	border-radius: 10px;
	padding: 18px 20px 20px;
}

.cs-v21-summary .cs-product-eyebrow {
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--color-primary, #0b51c8);
	margin: 0 0 6px;
	font-weight: 600;
}

.cs-v21-summary .product_title,
.cs-v21-summary h1.product_title {
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 12px;
}

.cs-v21-summary .cs-b2b-pricing {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 14px;
}

.cs-v21-summary .cs-b2b-pricing__label {
	font-size: 13px;
	color: #5a6173;
}

.cs-v21-summary .cs-b2b-pricing__value {
	font-size: 22px;
	font-weight: 700;
	color: #14233f;
}

.cs-v21-summary .cs-b2b-moq {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 13px;
}

.cs-v21-summary .cs-b2b-moq__label {
	color: #5a6173;
	margin-right: 4px;
}

.cs-v21-summary .cs-b2b-moq__value {
	color: #14233f;
	font-weight: 600;
}

.cs-v21-summary .woocommerce-product-details__short-description,
.cs-v21-summary .product .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 1.55;
	color: #2b2f3a;
	margin: 0 0 16px;
}

.cs-three-actions {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto;
	gap: 10px;
	margin: 12px 0 18px;
	align-items: stretch;
}

.cs-three-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

/* V24.14.7 — All three action buttons share a uniform ghost style.
   No primary/secondary distinction. Whitespace stays nowrap, font-size 15px. */
.cs-three-actions__btn--primary {
	background: #1668e3;
	color: #ffffff;
	border: 1px solid #1668e3;
}

.cs-three-actions__btn--primary:hover {
	background: #1259c9;
	border-color: #1259c9;
	color: #ffffff;
}

.cs-three-actions__btn--ghost {
	background: #1668e3;
	color: #ffffff;
	border: 1px solid #1668e3;
}

.cs-three-actions__btn--ghost:hover {
	background: #1259c9;
	border-color: #1259c9;
	color: #ffffff;
}

.cs-three-actions__btn:active {
	transform: translateY(1px);
}

.cs-three-actions__favorite {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 44px;
	padding: 0 6px;
	border: 1px solid #e7eaef;
	background: #fff;
	border-radius: 6px;
	color: #5a6173;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cs-three-actions__favorite svg {
	color: inherit;
}

.cs-three-actions__favorite[aria-pressed="true"] {
	color: #d2a02a;
}

.cs-three-actions__favorite-count {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1;
}

.cs-product-params {
	margin-top: 32px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid #e7eaef;
	border-radius: 10px;
}

.cs-product-params__title {
	margin: 0 0 14px;
	font-size: 18px;
}

.cs-product-params__diagram {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 16px;
	background: transparent;
	border: 0;
	cursor: zoom-in;
}

.cs-product-params__diagram img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
	border-radius: 6px;
	background: #f6f7f8;
}

.cs-product-params__diagram-label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #5a6173;
	text-align: center;
}

.cs-product-params__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid #eef0f4;
}

.cs-product-params__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #eef0f4;
	background: #fafbfc;
}

.cs-product-params__row:nth-child(even) {
	background: #f3f5f9;
}

.cs-product-params__row--extra {
	display: none;
}

.cs-product-params.is-expanded .cs-product-params__row--extra {
	display: grid;
}

.cs-product-params__label {
	font-weight: 600;
	color: #5a6173;
	font-size: 13px;
}

.cs-product-params__value {
	color: #14233f;
	font-size: 14px;
	margin: 0;
}

.cs-product-params__toggle {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #d6dae3;
	border-radius: 6px;
	cursor: pointer;
	color: var(--color-primary, #0b51c8);
	font-weight: 600;
}

.cs-product-params__toggle:hover {
	border-color: var(--color-primary, #0b51c8);
}

.cs-product-detail-long-images {
	margin-top: 24px;
}

.cs-product-detail-long-images__title {
	margin: 0 0 12px;
	font-size: 18px;
}

.cs-product-detail-long-images__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Reviews tab — V21 keeps WC defaults; just tidy the layout. */
.cs-v21-detail + .woocommerce-tabs,
.single-product-wrapper .woocommerce-tabs {
	margin-top: 28px;
}

.cs-v21-detail .lightbox,
.cs-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(8, 12, 24, 0.85);
	z-index: 9999;
	padding: 24px;
}

.cs-lightbox.is-open {
	display: flex;
}

.cs-lightbox__img {
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}

.cs-lightbox__close,
.cs-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.85);
	color: #14233f;
	border: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
}

.cs-lightbox__close {
	top: 16px;
	right: 16px;
}

.cs-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.cs-lightbox__nav--prev {
	left: 16px;
}

.cs-lightbox__nav--next {
	right: 16px;
}

@media (max-width: 880px) {
	.cs-v21-detail {
		grid-template-columns: 1fr;
	}
	.cs-v21-detail .cs-product-gallery {
		grid-template-columns: 1fr;
	}
	.cs-v21-detail .cs-product-gallery__thumbs {
		flex-direction: row;
		flex-wrap: nowrap;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 6px;
	}
	.cs-three-actions {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cs-three-actions__favorite {
		grid-column: 1 / -1;
		justify-self: end;
		max-width: 96px;
	}
	.cs-three-actions__btn--primary {
		grid-column: auto;
	}
	.cs-product-params__list {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
 * V21.2 — Bookmark-index nav, variant selector, packaging info, reviews anchor
 * ========================================================================= */

/* Right column is sticky; left column gets the bookmark-index nav that pins
   to the top of the viewport while the user scrolls the content area. */
.cs-v21-content {
	position: relative;
	/* V21.6 (2026-09-10): span the full grid width. The bookmark-index
	   nav and the per-anchor sections are page-wide content, not a
	   third hero-column. Previously auto-placed into row 2 / col 1,
	   which left col 2 of row 2 as empty grid space. */
	grid-column: 1 / -1;
}

.cs-bookmark-index {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid #e7eaef;
	margin: 0 0 24px;
	padding: 0;
}

.cs-bookmark-index__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: visible;
	scrollbar-width: auto;
	row-gap: 6px;
}

.cs-bookmark-index__item {
	flex: 0 0 auto;
}

.cs-bookmark-index__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 18px;
	font-size: 15px;
	font-weight: 500;
	color: #2b2f3a;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.cs-bookmark-index__link:hover {
	color: var(--color-primary, #0b51c8);
}

.cs-bookmark-index__link.is-active {
	color: var(--color-primary, #0b51c8);
	border-bottom-color: var(--color-primary, #0b51c8);
	font-weight: 600;
}

/* 1688-style variant selector — sits inside the right summary panel. */
.cs-variants {
	margin: 14px 0 18px;
	padding: 14px 14px 12px;
	border: 1px solid #e7eaef;
	border-radius: 8px;
	background: #fafbfc;
}

.cs-variants__title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
	color: #5a6173;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cs-variants__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* V21.7 (2026-09-10): let the picker scroll internally once the
	   variant count grows tall. ~5.5 rows fit (max-height 540 = 6 × 89
	   rows minus 1 gap) so 1–4 row products show no chrome change;
	   5+ row products (SI01 has 6) get an internal scrollbar inside
	   the picker only, capping the sticky summary at ~770 instead of
	   ~883 and shrinking the left-column void from ~323 to ~210. */
	max-height: 540px;
	overflow-y: auto;
	padding-right: 2px;
}

.cs-variants__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 116px;
	gap: 12px;
	align-items: center;
	padding: 8px 8px 8px 12px;
	border: 1px solid #e7eaef;
	border-radius: 6px;
	background: #fff;
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* V21.3 — qty>0 leaves a small visual hint via a 4px blue dot on the row's
 * leading edge plus a tinted qty input. No full-row border so the row never
 * reads as "selected" — qty IS the selection. */
.cs-variants__row::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: transparent;
	transition: background 0.15s ease;
}
.cs-variants__row--active {
	border-color: #c5d6f5;
	background: #fafcff;
}
.cs-variants__row--active::before {
	background: var(--color-primary, #0b51c8);
}

.cs-variants__swatch {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	border: 1px solid #d1d6dd;
	object-fit: cover;
}

.cs-variants__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cs-variants__label {
	font-size: 14px;
	color: #14233f;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs-variants__price {
	font-size: 16px;
	font-weight: 700;
	color: #d23a3a;
}

.cs-variants__price-unit {
	font-size: 11px;
	color: #5a6173;
	font-weight: 500;
	margin-left: 2px;
}

.cs-variants__stock {
	font-size: 12px;
	color: #5a6173;
}

.cs-variants__qty {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.cs-variants__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #d1d6dd;
	background: #fff;
	border-radius: 4px;
	color: #2b2f3a;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.cs-variants__qty-btn:hover {
	background: #f0f3f8;
}

.cs-variants__qty-input {
	width: 48px;
	height: 28px;
	text-align: center;
	border: 1px solid #d1d6dd;
	border-radius: 4px;
	font-size: 14px;
	-moz-appearance: textfield;
}

.cs-variants__qty-input::-webkit-outer-spin-button,
.cs-variants__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* V21.3 — Tinted qty input when this row is in the cart. */
.cs-variants__row--active .cs-variants__qty-input {
	border-color: var(--color-primary, #0b51c8);
	background: #f0f6ff;
}

/* V21.3 — Disabled state for the action buttons when no variants have qty>0. */
.cs-three-actions__btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: grayscale(0.2);
	pointer-events: none;
}

/* V21.3 — Cart line label for the SKU + variant name under the product title. */
.cs-cart-item-variant {
	display: inline-block;
	margin-top: 2px;
	padding: 1px 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #5a6173;
	background: #f4f6f9;
	border-radius: 3px;
	word-break: break-all;
}

/* V21.3 — Cart empty state nudge when the selector was just emptied via mirror. */
.woocommerce-cart .cart-empty.centi-just-emptied::after {
	content: '';
}

/* Packaging info — anchor target "包装信息 / Packaging info". */
.cs-packaging-info {
	margin: 32px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e7eaef;
	border-radius: 8px;
}

.cs-packaging-info__title {
	font-size: 18px;
	margin: 0 0 12px;
	color: #14233f;
}

.cs-packaging-info__body {
	font-size: 14px;
	line-height: 1.6;
	color: #2b2f3a;
}

.cs-packaging-info__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0;
}

.cs-packaging-info__body th,
.cs-packaging-info__body td {
	padding: 6px 10px;
	border: 1px solid #e7eaef;
	text-align: left;
	font-size: 14px;
}

/* Product details description inside bookmark area. */
.cs-product-description {
	margin: 0 0 32px;
}

.cs-product-description__title {
	font-size: 18px;
	margin: 0 0 14px;
	color: #14233f;
}

.cs-product-description__excerpt,
.cs-product-description__body {
	font-size: 15px;
	line-height: 1.7;
	color: #2b2f3a;
}

.cs-product-description__excerpt {
	margin: 0 0 14px;
}

.cs-product-reviews {
	margin: 32px 0;
	padding-top: 24px;
	border-top: 1px solid #e7eaef;
}

.cs-product-reviews__title {
	font-size: 18px;
	margin: 0 0 14px;
	color: #14233f;
}

/* On mobile, drop the sticky bookmark-index and let the tabs scroll naturally. */
@media (max-width: 880px) {
	.cs-bookmark-index {
		position: static;
	}
	.cs-variants__row {
		grid-template-columns: 48px minmax(0, 1fr) 108px;
		gap: 8px;
	}
	.cs-variants__swatch,
	.cs-variants__swatch img {
		width: 48px;
		height: 48px;
	}
}

/* =========================================================================
 * V21.4 — Star rating display + reviews block + "View all reviews" modal
 * ========================================================================= */

/* Star rating display — Unicode stars with filled/empty variants. */
.cs-rating-stars {
	display: inline-flex;
	gap: 1px;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1px;
	vertical-align: middle;
}
.cs-rating-stars__star--filled {
	color: #f5a623;
}
.cs-rating-stars__star--empty {
	color: #d6d9e0;
}

/* Reviews anchor — V21.4 redesigned with stars, summary, view-all button. */
.cs-product-reviews {
	margin: 32px 0;
	padding-top: 24px;
	border-top: 1px solid #e7eaef;
}
.cs-product-reviews__title {
	font-size: 18px;
	margin: 0 0 12px;
	color: #14233f;
}
.cs-product-reviews__summary {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0 0 16px;
	color: #2b2f3a;
	font-size: 14px;
}
.cs-product-reviews__count {
	font-weight: 600;
}
.cs-product-reviews__average {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}
.cs-product-reviews__average-num {
	color: #f5a623;
	font-weight: 700;
}
.cs-product-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cs-product-reviews__item {
	border: 1px solid #e7eaef;
	border-radius: 8px;
	padding: 14px 16px;
	background: #ffffff;
}
.cs-product-reviews__item-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: #5a6173;
	margin-bottom: 6px;
}
.cs-product-reviews__author {
	font-weight: 600;
	color: #14233f;
}
.cs-product-reviews__date {
	color: #8c93a4;
}
.cs-product-reviews__stars {
	margin-bottom: 6px;
}
.cs-product-reviews__content {
	font-size: 14px;
	line-height: 1.6;
	color: #2b2f3a;
}
.cs-product-reviews__price {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #e7eaef;
	font-size: 13px;
	color: #2b2f3a;
}
.cs-product-reviews__price-label {
	color: #5a6173;
	margin-right: 6px;
}
.cs-product-reviews__price-value {
	font-weight: 600;
	color: #14233f;
}

/* "View all reviews / 查看全部评价" trigger — red circle as in user's reference. */
.cs-product-reviews__view-all {
	margin: 18px auto 4px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 22px;
	background: #ffffff;
	border: 2px solid #e23b3b;
	border-radius: 999px;
	color: #e23b3b;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 10px rgba(226, 59, 59, 0.08);
}
.cs-product-reviews__view-all:hover,
.cs-product-reviews__view-all:focus {
	background: #e23b3b;
	color: #ffffff;
	outline: none;
}
.cs-product-reviews__view-all-count {
	background: #e23b3b;
	color: #ffffff;
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 12px;
	font-weight: 700;
}
.cs-product-reviews__view-all:hover .cs-product-reviews__view-all-count,
.cs-product-reviews__view-all:focus .cs-product-reviews__view-all-count {
	background: #ffffff;
	color: #e23b3b;
}
.cs-product-reviews__form {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid #e7eaef;
}
.cs-product-reviews__form-title {
	font-size: 15px;
	margin: 0 0 10px;
	color: #14233f;
}
.cs-product-reviews__empty {
	color: #5a6173;
	font-size: 14px;
	margin: 6px 0 18px;
}

/* Reviews modal — V21.4. */
.cs-reviews-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.cs-reviews-modal[hidden] {
	display: none;
}
.cs-reviews-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 15, 22, 36, 0.6 );
}
.cs-reviews-modal__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 80vh;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba( 15, 22, 36, 0.35 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cs-reviews-modal__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid #e7eaef;
	background: #fafbfc;
}
.cs-reviews-modal__title {
	margin: 0;
	font-size: 18px;
	color: #14233f;
}
.cs-reviews-modal__close {
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #5a6173;
	cursor: pointer;
	padding: 0 4px;
}
.cs-reviews-modal__close:hover,
.cs-reviews-modal__close:focus {
	color: #14233f;
	outline: none;
}
.cs-reviews-modal__body {
	padding: 18px 22px 24px;
	overflow-y: auto;
}

/* Detail long-image strip — V21.4 — display flex column, max 10 images. */
.cs-product-detail-long-images {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 12px 0 16px;
}
.cs-product-detail-long-images__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
}

@media (max-width: 640px) {
	.cs-product-reviews__view-all {
		font-size: 13px;
		padding: 6px 16px;
	}
	.cs-reviews-modal {
		padding: 0;
	}
	.cs-reviews-modal__panel {
		max-height: 100vh;
		border-radius: 0;
	}
	.cs-reviews-modal__head,
	.cs-reviews-modal__body {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* V21.4 — Lock body scroll when reviews modal is open. */
html.cs-modal-open,
html.cs-modal-open body {
	overflow: hidden;
}

/* V21.x — Review-form 1-to-5 star picker. Renders 5 clickable Unicode stars
 * that the JS in `assets/js/main.js` swaps between ☆ (empty) and ★ (filled).
 * The original radio inputs are kept for accessibility + WC submission. */
.cs-comment-form-rating .cs-rating-select {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 0.75rem;
}

.cs-rating-select__stars {
	display: inline-flex;
	gap: 0.125rem;
}

.cs-star-label {
	position: relative;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem 0.25rem;
	line-height: 1;
}

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

.cs-star-label:focus-within {
	outline: 2px solid var(--color-primary, #2266cc);
	outline-offset: 2px;
	border-radius: 4px;
}

.cs-star-icon {
	display: inline-block;
	font-size: 1.5rem;
	color: #d6d6d6;
	transition: color 0.15s ease, transform 0.1s ease;
}

.cs-star-label:hover .cs-star-icon {
	transform: scale(1.08);
}

.cs-star-label.is-filled .cs-star-icon {
	color: #f5b301;
}

.cs-rating-text {
	font-size: 0.875rem;
	color: var(--color-heading, #222);
	min-width: 8rem;
}

.cs-rating-text:empty {
	min-width: 0;
}

/* =========================================================================
 * V22 — Visitor id badge (right of header) + Certifications Tab
 * Loaded after all V21 styles so selectors can override without !important.
 * ========================================================================= */
.cs-visitor-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	margin-right: 12px;
	border: 1px solid var(--cs-color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--cs-color-surface-muted, #f8fafc);
	color: var(--cs-color-text, #0f172a);
	font-size: 13px;
	line-height: 1.2;
	vertical-align: middle;
}
.cs-visitor-badge--user {
	border-color: var(--cs-color-primary, #0b51c8);
	background: rgba(11, 81, 200, 0.06);
}
.cs-visitor-badge__label {
	color: var(--cs-color-text-muted, #475569);
	font-weight: 500;
}
.cs-visitor-badge__code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--cs-color-text, #0f172a);
	letter-spacing: 0.4px;
}
.cs-visitor-badge__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--cs-color-text-muted, #475569);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.cs-visitor-badge__copy:hover {
	background: var(--cs-color-border, #e5e7eb);
	color: var(--cs-color-text, #0f172a);
}
.cs-visitor-badge__toast {
	font-size: 11px;
	color: var(--cs-color-primary, #0b51c8);
	min-width: 0;
}
@media (max-width: 768px) {
	[data-cs-vid-hide-mobile="1"] {
		display: none !important;
	}
}

/* V22 — Certifications tab */
.cs-product-certifications {
	margin: 32px auto;
	padding: 24px 28px;
	border: 1px solid var(--cs-color-border, #e5e7eb);
	border-radius: 12px;
	background: var(--cs-color-surface, #ffffff);
}
.cs-product-certifications__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--cs-color-text, #0f172a);
}
.cs-product-certifications__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.cs-cert-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--cs-color-border, #e5e7eb);
	background: var(--cs-color-surface-muted, #f8fafc);
	font-size: 14px;
}
.cs-cert-badge__abbr {
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--cs-color-primary, #0b51c8);
}
.cs-cert-badge--ce   .cs-cert-badge__abbr { color: #1d4ed8; }
.cs-cert-badge--cb   .cs-cert-badge__abbr { color: #047857; }
.cs-cert-badge--rohs .cs-cert-badge__abbr { color: #b45309; }
.cs-cert-badge--fcc  .cs-cert-badge__abbr { color: #0f766e; } /* G75 — teal */
.cs-cert-badge--msds .cs-cert-badge__abbr { color: #be185d; } /* G75 — magenta */
.cs-cert-badge__name {
	color: var(--cs-color-text-muted, #475569);
	font-size: 13px;
}
.cs-product-certifications__patents-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--cs-color-text, #0f172a);
}
.cs-product-certifications__patent-list {
	margin: 0 0 20px;
	padding: 0 0 0 18px;
	list-style: disc;
	color: var(--cs-color-text, #0f172a);
}
.cs-product-certifications__patent-link {
	color: var(--cs-color-link, #0b51c8);
	text-decoration: underline;
}
.cs-product-certifications__view-cert {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--cs-color-primary, #0b51c8);
	color: #ffffff !important;
	font-size: 14px;
	text-decoration: none;
}
.cs-product-certifications__view-cert:hover {
	background: var(--cs-color-primary-hover, #084399);
}
.cs-product-certifications__evidence {
	margin: 16px 0 0;
}

/* V23.x — Compact, embedded review form (#reviews / .comment-form inside Reviews Tab). */
/* G121 P2p — submit acknowledgement line (success + guard-error variant),
   injected by main.js showReviewStatus() as the last child of #commentform. */
.cs-product-reviews__form #reviews .cs-review-status {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: #0f766e;
}
.cs-product-reviews__form #reviews .cs-review-status--error {
	color: #b91c1c;
	font-weight: 500;
}

/* G121 P2q — review feedback animations. Everything here is additive:
   the classes are toggled by main.js and removed after the animation
   finishes, so a no-JS or prefers-reduced-motion visitor just sees the
   static (P2p) behaviour. */
@keyframes csStatusIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
@keyframes csStatusOut {
	to { opacity: 0; }
}
@keyframes csFormShake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-3px); }
	40%, 60% { transform: translateX(3px); }
}
@keyframes csSectionPulse {
	0%   { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.30); background: rgba(185, 28, 28, 0.04); }
	70%  { box-shadow: 0 0 0 14px rgba(185, 28, 28, 0); }
	100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); background: transparent; }
}
@keyframes csMineFlash {
	0%, 30%  { background: rgba(253, 230, 138, 0.85); }
	100%     { background: transparent; }
}
@keyframes csRowNew {
	from { opacity: 0; transform: translateY(-10px); background: rgba(253, 230, 138, 0.85); }
	to   { opacity: 1; transform: none; background: transparent; }
}
.cs-review-status.cs-review-status--in {
	animation: csStatusIn 0.35s ease both;
}
.cs-review-status.cs-review-status--out {
	animation: csStatusOut 0.45s ease both;
}
.cs-review-form--shake {
	animation: csFormShake 0.45s ease both;
}
.cs-product-reviews--pulse {
	animation: csSectionPulse 2.2s ease both;
	border-radius: 10px;
}
.cs-product-reviews__item.cs-product-reviews__item--mine {
	animation: csMineFlash 2.4s ease both;
}
.cs-product-reviews__item.cs-product-reviews__item--new {
	animation: csRowNew 0.5s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.cs-review-status.cs-review-status--in,
	.cs-review-status.cs-review-status--out,
	.cs-review-form--shake,
	.cs-product-reviews--pulse,
	.cs-product-reviews__item.cs-product-reviews__item--mine,
	.cs-product-reviews__item.cs-product-reviews__item--new {
		animation: none;
	}
}
/* G121 P2r — review failure modal. Lazily created by main.js showReviewModal()
   and appended to <body>; states the rejection reason and needs an explicit
   "Got it". Palette matches the P2p status line (#b91c1c error / #14233f ink). */
.cs-review-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 17, 21, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.cs-review-modal.cs-review-modal--open {
	opacity: 1;
	visibility: visible;
}
.cs-review-modal__card {
	background: #ffffff;
	color: #14233f;
	max-width: 420px;
	width: 100%;
	border-radius: 10px;
	padding: 24px 24px 20px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
	transform: translateY(10px) scale(0.97);
	transition: transform 0.2s ease;
}
.cs-review-modal.cs-review-modal--open .cs-review-modal__card {
	transform: translateY(0) scale(1);
}
.cs-review-modal__msg {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.cs-review-modal__btn {
	display: inline-block;
	border: 0;
	cursor: pointer;
	background: #14233f;
	color: #ffffff;
	font: inherit;
	font-size: 0.875rem;
	padding: 10px 22px;
	border-radius: 6px;
}
.cs-review-modal__btn:hover,
.cs-review-modal__btn:focus-visible {
	background: #2b3d5c;
}
@media (prefers-reduced-motion: reduce) {
	.cs-review-modal,
	.cs-review-modal__card {
		transition: none;
		transform: none;
	}
}
.cs-product-reviews__form #reviews .comment-form-comment {
	margin: 1rem 0 1.25rem;
}
.cs-product-reviews__form #reviews .comment-form-comment label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #14233f;
}
.cs-product-reviews__form #reviews .comment-form-comment textarea {
	display: block;
	width: 100%;
	max-width: 640px;
	min-height: 3.5rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	background: #ffffff;
	color: #14233f;
	font-size: 0.9375rem;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-product-reviews__form #reviews .comment-form-comment textarea:hover {
	border-color: #b0bcca;
}
.cs-product-reviews__form #reviews .comment-form-comment textarea:focus {
	border-color: #2266cc;
	outline: none;
	box-shadow: 0 0 0 3px rgba( 34, 102, 204, 0.12 );
}
.cs-product-reviews__form #reviews .comment-form-author,
.cs-product-reviews__form #reviews .comment-form-email {
	margin-top: 0.875rem;
	max-width: 360px;
}
.cs-product-reviews__form #reviews .comment-form-author label,
.cs-product-reviews__form #reviews .comment-form-email label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	color: #5a6173;
	font-weight: 400;
}
.cs-product-reviews__form #reviews .comment-form-author input,
.cs-product-reviews__form #reviews .comment-form-email input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	background: #ffffff;
	color: #14233f;
	font-size: 0.9375rem;
	font-family: inherit;
}
.cs-product-reviews__form #reviews .comment-form-author input:focus,
.cs-product-reviews__form #reviews .comment-form-email input:focus {
	border-color: #2266cc;
	outline: none;
	box-shadow: 0 0 0 3px rgba( 34, 102, 204, 0.12 );
}

/* V23.x — Single review row in the comment list. §10 display rule. */
.cs-product-reviews__list,
#reviews ol.commentlist {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.cs-review-list__item {
	padding: 14px 0;
	border-bottom: 1px solid #eef1f6;
}
.cs-review-list__item:first-child {
	padding-top: 4px;
}
.cs-review-list__item:last-child {
	border-bottom: 0;
}
.cs-review-list__row {
	display: block;
}
.cs-review-list__rating {
	margin-bottom: 4px;
	line-height: 1.2;
	font-size: 15px;
}
.cs-review-list__star--filled {
	color: #f5a623;
}
.cs-review-list__star--empty {
	color: #d6d6d6;
}
.cs-review-list__row .meta {
	margin: 0 0 6px;
	font-size: 13px;
	color: #5a6173;
}
.cs-review-list__row .description {
	margin: 0;
	font-size: 14px;
	color: #14233f;
	line-height: 1.55;
}
.cs-review-meta__id {
	color: #14233f;
	font-weight: 600;
}
.cs-review-meta__time {
	color: #5a6173;
	font-weight: 400;
}

/* ===== V23.x-rev2 — Collapse duplicate reviews rendering =====
 * (kept: drop "Submit your review" h3 / "X reviews for ..." h2 / WC
 * default "Rated N out of 5" duplicate rating)
 * NOTE: V23.x-rev4 removed the `cs-product-reviews__list:not(--all)`
 * rule because that list now legitimately holds today's reviews.
 */
.cs-product-reviews__form-title {
	display: none;            /* drop "Submit your review" h3 */
}
.woocommerce-Reviews-title {
	display: none;            /* drop "X reviews for ..." h2 */
}
.cs-review-list__item .star-rating {
	display: none;            /* drop WC default "Rated N out of 5" 冗余评分控件 */
}

/* ===== V24.x-rev2 — Reviews dropdown toggle (replaces V23.x-rev4 split) ===== */
/* We render every approved review inside a single `<ul data-cs-reviews-list>`
 * and gate visibility per-item via JS (`li.hidden = i >= shown`). The list
 * intentionally has NO `max-height` / `overflow` — the page body grows
 * naturally as items are revealed, and the browser main scrollbar handles
 * all scrolling (no in-list frame, no inner scrollbar). */
#reviews ol.commentlist {
	display: none;
}

/* ============================================================ V24.8 — History Quote Request ============================================================ */

/**
 * Below Quote summary on the cart page. Renders a buyer-specific list of
 * every quote previously submitted (filtered by user_id or user_ip). The
 * first 3 rows are visible by default; rows 4+ are hidden behind a toggle
 * that reveals 2 additional rows per click (mirroring the reviews dropdown
 * pattern on product pages).
 */
.cs-quote-history {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid #e2e4ec;
	border-radius: 0.5rem;
	background: #fafbfd;
}

.cs-quote-history__title {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #14233f;
	letter-spacing: 0.02em;
}

.cs-quote-history__list {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.cs-quote-history__row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #ecedf2;
	font-size: 0.9375rem;
	color: #14233f;
}
.cs-quote-history__row:last-child {
	border-bottom: none;
}
.cs-quote-history__row[hidden] {
	display: none;
}

.cs-quote-history__id {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 0.8125rem;
	color: #1a3354;
	letter-spacing: 0.01em;
}

.cs-quote-history__date {
	font-size: 0.8125rem;
	color: #5b6378;
}

.cs-quote-history__total {
	font-weight: 600;
	color: #14233f;
	min-width: 5rem;
	text-align: right;
}

.cs-quote-history__view {
	font-size: 0.8125rem;
	color: #1f4ea1;
	text-decoration: underline;
	text-underline-offset: 2px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.cs-quote-history__view:hover,
.cs-quote-history__view:focus-visible {
	color: #14233f;
}

.cs-quote-history__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	margin: 0;
	border: 1px solid #d4d8e0;
	border-radius: 0.375rem;
	background: #ffffff;
	color: #1a3354;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.cs-quote-history__toggle:hover,
.cs-quote-history__toggle:focus-visible {
	background: #eef2fa;
	border-color: #1f4ea1;
	color: #14233f;
	outline: none;
}
.cs-quote-history__toggle-count {
	color: #5b6378;
	font-size: 0.8125rem;
	font-weight: 400;
}

/* Modal — same markup reused on every quote view. Hidden by default
 * via the `hidden` attribute so screen readers and JS-free viewers
 * stay both at zero accessibility cost until explicitly opened. */
.cs-quote-history-modal[hidden] {
	display: none !important;
}
.cs-quote-history-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.cs-quote-history-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 35, 63, 0.55);
}
.cs-quote-history-modal__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 3rem);
	overflow: auto;
	background: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(20, 35, 63, 0.25);
	padding: 1.75rem 1.75rem 1.5rem;
	color: #14233f;
}
.cs-quote-history-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
	color: #5b6378;
	background: transparent;
	border: 0;
	border-radius: 0.25rem;
	cursor: pointer;
}
.cs-quote-history-modal__close:hover,
.cs-quote-history-modal__close:focus-visible {
	background: #f0f2f7;
	color: #14233f;
	outline: none;
}
.cs-quote-history-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
}
.cs-quote-history-modal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.875rem;
	color: #5b6378;
	margin-bottom: 1rem;
}
.cs-quote-history-modal__id {
	font-family: 'Menlo', 'Consolas', monospace;
	color: #14233f;
}
.cs-quote-history-modal__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.cs-quote-history-modal__table th,
.cs-quote-history-modal__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid #ecedf2;
	text-align: left;
	vertical-align: top;
}
.cs-quote-history-modal__table th {
	background: #fafbfd;
	color: #5b6378;
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.cs-quote-history-modal__col-qty,
.cs-quote-history-modal__col-total {
	text-align: right;
	width: 80px;
}
.cs-quote-history-modal__empty {
	margin: 0;
	font-size: 0.875rem;
	color: #5b6378;
}
.cs-quote-history-modal__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #d4d8e0;
	font-size: 0.9375rem;
}
.cs-quote-history-modal__subtotal-value {
	font-weight: 600;
}

/* V24.14.12 — Home page section pagination nav.
   Aligned visually with archive /shop pagination (`.cs-pagination`):
     · Orange #c25e2c border + text on idle buttons
     · Hover and `.current` flip to filled orange + white text
     · Prev / Next show only arrows (‹ / ›), no Prev/Next word label
     · No greyed-out disabled state — page 1 prev still renders,
       page N next still renders, both stay clickable
   Used by all 4 sections (Featured / Demos / News / Samples). */
.home-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 28px 0 8px;
    padding: 0;
    list-style: none;
}
.home-pagination__link,
.home-pagination__page,
.home-pagination__prev,
.home-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border: 1px solid #c25e2c;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #c25e2c;
    background: #fff;
    text-decoration: none;
    min-width: 36px;
    height: auto;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}
.home-pagination__link:hover,
.home-pagination__link:focus,
.home-pagination__page:hover,
.home-pagination__page:focus,
.home-pagination__prev:hover,
.home-pagination__prev:focus,
.home-pagination__next:hover,
.home-pagination__next:focus {
    background: #c25e2c;
    color: #fff;
}
.home-pagination__page.current,
.home-pagination__page.current:hover,
.home-pagination__page.current:focus {
    background: #c25e2c;
    color: #ffffff;
    border-color: #c25e2c;
    cursor: default;
}
/* V24.14.12 — `is-disabled` markup still emitted by `centi_shop_render_section_pagination()`
   for paging-state awareness, but its visual now matches a normal button so the UI
   matches `/shop` pagination exactly. */
.home-pagination__prev.is-disabled,
.home-pagination__next.is-disabled {
    cursor: pointer;
}


/* =============================================================================
 * V24.15 — Multilingual availability strip in the header.
 *
 * 13 hreflang'd anchor links (English/Español/Deutsch/Français/العربية/
 * Português Brasileiro/Italiano/Nederlands/Polski/日本語/한국어/简体中文/
 * 繁體中文), single row on desktop, wraps to multiple rows on narrow viewports.
 * Pure visual availability declaration — site is single-language English in V1,
 * but hreflang signals intent to AI crawlers and prepares for future translations.
 * ========================================================================== */
.site-header__languages {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	padding: 8px 18px;
	background: #f5f7fa;
	border: 1px solid #e2e8ef;
	border-radius: 10px;
}

.site-header__languages-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	align-items: baseline;
	flex: 1;
	justify-content: space-between;
}

.site-header__languages-list li {
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.site-header__languages-list a {
	color: var(--color-nav);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0, 0, 0, 0.25);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
	white-space: nowrap;
}

.site-header__languages-list a:hover,
.site-header__languages-list a:focus-visible {
	color: var(--color-primary);
	text-decoration-color: var(--color-primary);
}

.site-header__languages-list a[dir="rtl"] {
	font-size: 14px;
	letter-spacing: 0;
}

/* V25 — active language marker: bold + brand color underline. */
.site-header__languages-list a.is-active {
	color: var(--color-primary);
	text-decoration-color: var(--color-primary);
	font-weight: 700;
}

/* V24.15 — Give the homepage hero more breathing room above and below. */
.home-hero {
	padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(2rem, 5vw, 4rem);
}

.home-hero__inner {
	max-width: 920px;
	margin: 0 auto;
}

/* G40 — Demo video modal.
 *
 * Inline <video> (or YouTube iframe) overlay shown when a homepage demo
 * card is clicked. Closing the modal (button / backdrop / Esc / video
 * ended) hands off to window.location.assign(productUrl) so the user
 * lands on the matching product page (user decision §6). The layout is
 * tuned for products up to 16:9 while keeping the close affordance
 * accessible on phones.
 */
.cs-demo-modal[hidden] {
	display: none !important;
}

.cs-demo-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(15, 17, 21, 0.86);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.cs-demo-modal.cs-demo-modal--open {
	opacity: 1;
}

.cs-demo-modal.cs-demo-modal--closing {
	opacity: 0;
}

.cs-demo-modal__backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.cs-demo-modal__content {
	position: relative;
	z-index: 1;
	max-width: 960px;
	width: 100%;
	max-height: 100%;
	background: #111;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(12px);
	transition: transform 0.24s ease;
}

.cs-demo-modal.cs-demo-modal--open .cs-demo-modal__content {
	transform: translateY(0);
}

.cs-demo-modal__title {
	margin: 0;
	padding: 1rem 1.25rem;
	font-size: 1.05rem;
	color: #fafafa;
	background: rgba(0, 0, 0, 0.6);
	font-weight: 500;
}

.cs-demo-modal__title[hidden] {
	display: none;
}

.cs-demo-modal__media {
	position: relative;
	width: 100%;
	background: #000;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* G60k — image lightbox (FC sample cards). Drop the 16/9 video aspect and let
   the picture's intrinsic ratio drive sizing, so portrait/square gallery shots
   don't get cropped by the video aspect lock. Toggled from main.js openModal(). */
.cs-demo-modal.cs-demo-modal--image-mode .cs-demo-modal__media {
	aspect-ratio: auto;
	background: transparent;
	width: auto;
	max-width: 90vw;
	max-height: 90vh;
}

.cs-demo-modal__image {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.cs-demo-modal__media-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs-demo-modal__video,
.cs-demo-modal__iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
	border: 0;
}

.cs-demo-modal__fallback {
	color: #fafafa;
	padding: 1rem;
}

.cs-demo-modal__fallback a {
	color: #7ec4ff;
	text-decoration: underline;
}

.cs-demo-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	transition: background 0.15s ease, transform 0.15s ease;
}

.cs-demo-modal__close:hover,
.cs-demo-modal__close:focus {
	background: rgba(0, 0, 0, 0.85);
	transform: scale(1.05);
	outline: none;
}

.cs-demo-modal__hint {
	margin: 0;
	padding: 0.6rem 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	color: #d8d8d8;
	font-size: 0.78rem;
	text-align: center;
}

.cs-demo-modal__hint kbd {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 3px;
	padding: 0 0.3em;
	font-size: 0.95em;
}

html.cs-demo-modal-open,
html.cs-demo-modal-open body {
	overflow: hidden;
}

/* G40 — Visual hint that the demo card has a playable video. */
.cs-demo-card.has-video .cs-demo-card__play {
	animation: cs-demo-card-pulse 2.4s ease-in-out infinite;
}

@keyframes cs-demo-card-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.45); }
	50%      { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}

.cs-demo-card.has-video .cs-demo-card__link:hover .cs-demo-card__play {
	background: rgba(0, 0, 0, 0.78);
}


/* G79 C4 — Mobile product gallery width fix (2026-09-13)
 *
 * Three layers of defense:
 * (a) .site-main { overflow-x: clip } caps the document-level horizontal
 *     scroll even if any descendant computes slightly wider than viewport
 *     (subpixel rounding: 390.844px width in a 390px viewport).
 * (b) The stacked mobile gallery grid uses minmax(0, 1fr) so the column
 *     can shrink below the intrinsic min-content of the 10 thumb buttons.
 * (c) The thumbs row (overflow-x: auto) is the only horizontal-scroll
 *     surface the user can interact with on small screens.
 */
.site-main {
	overflow-x: clip;
}

@media (max-width: 880px) {
	.cs-v21-detail .cs-product-gallery,
	.cs-v21-detail .cs-product-gallery__stage,
	.cs-v21-detail .cs-product-gallery__thumbs {
		min-width: 0;
		max-width: 100%;
	}
	.cs-v21-detail .cs-product-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
	.cs-v21-detail .cs-product-gallery__stage {
		min-height: 320px;
	}
	.cs-v21-detail .cs-product-gallery__slide img {
		max-height: 420px;
	}
}


/* =================================================================
 * G98 Phase 3 - 评论表单「同意接收规格邮件」勾选框
 * -----------------------------------------------------------------
 * 合规铁律（G98 SPEC 5.1 #6）：
 *   1) 绝不预勾（预勾 = 非明示同意）
 *   2) 绝不 required（必须可自由拒绝）
 *   3) 功能未开启时服务端根本不渲染本块
 * 只在样式上做「小而清楚」，不抢评论表单的视觉重心。
 * ================================================================= */
.cs-welcome-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--cs-text-muted, #5b6470);
}

.cs-welcome-consent input[type="checkbox"] {
	margin: 2px 0 0;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.cs-welcome-consent .cs-welcome-consent__label {
	cursor: pointer;
	margin: 0;
	font-weight: 400;
}

/* 勾选后的强调色（与主题链接色一致） */
.cs-welcome-consent input[type="checkbox"]:checked + .cs-welcome-consent__label {
	color: var(--cs-accent, #1a7f5a);
}