/*
 * Samir Product Page Builder — front-end styles.
 * Colors/fonts/sizes come from CSS custom properties compiled by
 * SPB_Settings::compile_css() (loaded as a separate, cached "spb-design"
 * stylesheet) — this file only contains structure + animation.
 */

/*
 * Self-contained sizing: the plugin can't rely on the active theme's own
 * grid/column/spacing classes (every theme names and sizes these
 * differently), so everything the custom layout needs — width ceiling,
 * gutters, box-sizing — is declared explicitly here instead of assumed from
 * inherited theme CSS.
 */
.spb-product,
.spb-product * {
	box-sizing: border-box;
}

/*
 * Browsers apply their own non-zero default margin to <button> (Safari's UA
 * stylesheet in particular adds a few extra pixels on more than one side) —
 * without this reset, every custom button here (.spb-price-tab,
 * .spb-swatch-btn, .spb-more-info-btn, etc.) inherits that stray spacing
 * unpredictably per-browser instead of the exact padding/gap each one
 * actually declares.
 */
.spb-product button {
	margin: 0;
}

.spb-product {
	--spb-gap: 24px;
	font-family: var(--spb-font-body, inherit);
	/* Verified live on the real site: this theme applies NO max-width to the
	   product template at all (confirmed via getBoundingClientRect on a
	   2560px-wide monitor — .shop-container/main were full viewport width,
	   0 padding). Without our own cap, a square-aspect gallery image scales
	   to match — e.g. 1260x1260px on that screen — which is also why the
	   sticky gallery felt broken: it wasn't sticking wrong, it was just
	   taller than the viewport. 1600px matches both the reference mockup's
	   own .shell width and what the site owner wants on desktop. */
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px 32px 48px;
}

@media ( max-width: 760px ) {
	.spb-product {
		padding: 16px 16px 32px;
	}
}

/* 1.9.58 — Keep comparison dimensions balanced and predictable. The
 * footprint occupies line one; height/depth always occupies line two, so
 * browsers cannot orphan the H label or its number at narrow widths. */
.spb-size-dim .spb-size-dim-line {
	display: block;
	white-space: nowrap !important;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

.spb-size-dim .spb-size-dim-depth {
	margin-top: 2px;
}

.spb-compare-accessories {
	width: 105px;
	min-width: 0;
	max-width: 105px;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
}

.spb-summary .product_title,
.spb-summary p.price,
.spb-summary .price,
.spb-sticky-price,
.spb-compare-toolbar h2,
.spb-spec h2 {
	font-family: var(--spb-font-heading, inherit);
}

/* ---------- Layout: gallery + summary side by side ----------
 * This grid contains ONLY the gallery + summary — nothing else. See the
 * comment in content-single-product.php: a sticky item inside an auto-sized
 * grid row isn't reliably bounded to that row, so compare/spec tables are
 * deliberately NOT part of this grid (they're plain block siblings below
 * spb-hero-grid, inside spb-product). That structural separation is what
 * actually stops the sticky gallery from floating over them, verified live.
 */
.spb-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spb-gap);
	align-items: start;
}

.spb-hero-grid .spb-gallery {
	grid-column: 1;
}

.spb-hero-grid .spb-summary {
	grid-column: 2;
	float: none !important;
	width: auto !important;
}

@media ( min-width: 981px ) {
	.spb-hero-grid .spb-gallery {
		position: sticky;
		top: 24px;
	}
}

@media ( max-width: 760px ) {
	.spb-hero-grid {
		grid-template-columns: 1fr;
	}
	.spb-hero-grid .spb-summary {
		grid-column: 1;
	}
}

/* ---------- Gallery (stage + thumbnails share one padded card) ---------- */
.spb-gallery {
	position: relative;
	padding: 8px;
	background: var(--spb-color-card-bg, #fff);
	border: 1px solid var(--spb-color-border, #e2e8f0);
	border-radius: var(--spb-radius, 12px);
}

.spb-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--spb-color-badge-bg, #dc2626);
	color: var(--spb-color-badge-text, #fff);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--spb-radius, 12px);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.spb-stage {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--spb-radius, 12px) * 0.7);
	background: #f5faff;
	aspect-ratio: 1 / 1;
}

.spb-stage-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.spb-stage-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}

.spb-stage-slide.show {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.spb-stage-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.spb-stage-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Lock a perfect 36px square so the border-radius:50% is always a true
	   circle — min/max + box-sizing + flex:none guard against theme button
	   rules stretching the height into an oval. */
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--spb-color-border, #e2e8f0);
	/* Solid white + soft shadow (was rgba .9, which read as an uneven, faint
	   half-circle over a busy photo) so it lifts off any image as a clean disc. */
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(15, 17, 20, .16);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
	z-index: 2;
	/* Center the ‹ / › glyph in the circle both ways — a plain button leaves
	   the glyph sitting off-center on the text baseline with default padding. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-align: center;
}
.spb-stage-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.spb-stage-prev { left: 12px; }
.spb-stage-next { right: 12px; }

.spb-zoom-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--spb-color-border, #e2e8f0);
	background: rgba(255,255,255,.9);
	opacity: .85;
	cursor: pointer;
	transition: opacity .25s ease;
	z-index: 2;
}
.spb-zoom-hint:hover { opacity: 1; }

.spb-thumb-row {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
}

.spb-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: calc(var(--spb-radius, 12px) * 0.6);
	border: 2px solid transparent;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
	background: var(--spb-color-card-bg, #fff);
}
.spb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spb-thumb.active,
.spb-thumb:hover { border-color: var(--spb-color-primary, #1d4ed8); }

/* ---------- Summary spacing ----------
 * Deliberately self-contained: the active theme's own spacing rules are
 * almost always keyed to ITS OWN wrapper class (e.g. Flatsome uses
 * .product-summary, not WooCommerce's default .summary), so nothing here
 * can be assumed inherited — every gap between title/price/variations/cart
 * is set explicitly instead of relying on theme or WooCommerce-core CSS.
 */
.spb-summary > * {
	margin: 0 0 16px;
}
.spb-summary > *:last-child {
	margin-bottom: 0;
}

.spb-summary table.variations {
	width: 100%;
	margin-bottom: 4px; /* the swatch group right below already carries its own spacing */
}
.spb-summary table.variations tr {
	display: block;
}
.spb-summary table.variations th,
.spb-summary table.variations td {
	display: block;
	padding: 0;
	text-align: left;
}
.spb-summary table.variations label {
	font-size: 13px;
	font-weight: 600;
	color: var(--spb-color-heading, #0f172a);
	margin-bottom: 6px;
	display: block;
}

/*
 * Quantity + Add to cart button sit at different DOM depths depending on
 * product type: direct siblings in form.cart for a simple product, but
 * nested inside .single_variation_wrap > .woocommerce-variation-add-to-cart
 * for a variable one. Rather than assume one specific nesting, both are
 * aligned as inline-flex items — works no matter which structure WooCommerce
 * actually rendered.
 */
.spb-summary .quantity,
.spb-summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 10px 10px 0;
}
.spb-summary .quantity .qty {
	width: 64px;
	padding: 10px;
	border: 1.5px solid var(--spb-color-border, #e2e8f0);
	border-radius: var(--spb-button-radius, 10px);
}

/* Quantity dropdown enhancement: hide the native number input (and any
   theme-added +/- buttons inside the same .quantity wrapper) once our
   <select> is inserted — see frontend.js initQuantityDropdown(). */
.spb-summary .quantity.spb-qty-enhanced .qty,
.spb-summary .quantity.spb-qty-enhanced > a,
.spb-summary .quantity.spb-qty-enhanced .plus,
.spb-summary .quantity.spb-qty-enhanced .minus {
	display: none !important;
}
.spb-qty-select {
	padding: 10px 30px 10px 14px;
	border: 1.5px solid var(--spb-color-border, #dceaf7);
	border-radius: var(--spb-button-radius, 10px);
	font-size: 14px;
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
	background: var(--spb-color-card-bg, #fff);
	cursor: pointer;
}
.spb-qty-select:focus { outline: none; border-color: var(--spb-color-primary, #0878e8); }

.spb-summary .product_meta {
	font-size: 13px;
	color: var(--spb-color-body, #475569);
	padding-top: 12px;
	border-top: 1px solid var(--spb-color-border, #e2e8f0);
}
.spb-summary .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* ---------- Summary / typography ---------- */
.spb-summary .product_title {
	color: var(--spb-color-heading, #0f172a);
	font-size: var(--spb-heading-size, 28px);
	font-weight: var(--spb-heading-weight, 700);
	line-height: 1.2;
}

.spb-summary .woocommerce-product-details__short-description,
.spb-summary p {
	color: var(--spb-color-body, #475569);
	font-size: var(--spb-body-size, 15px);
	font-weight: var(--spb-body-weight, 400);
	line-height: 1.6;
}

.spb-summary p.price,
.spb-summary .price {
	color: var(--spb-color-price, #0f172a) !important;
	font-size: var(--spb-price-size, 24px) !important;
	font-weight: var(--spb-price-weight, 700) !important;
	display: block;
}

/* ---------- Brand row + rating (both sit above the title) ---------- */
.spb-brand-row { margin-bottom: 4px !important; }
.spb-brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--spb-color-accent, #0878e8);
}
.spb-brand-logo {
	height: 18px;
	width: auto;
	max-width: 70px;
	object-fit: contain;
	display: block;
}
.spb-brand-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--spb-color-accent, #0878e8);
}
.spb-summary .woocommerce-product-rating {
	margin-bottom: 4px !important;
	font-size: 12px;
	color: var(--spb-color-body, #475569);
}

/* ---------- Meta chips (category/attribute capsules) ---------- */
.spb-meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.spb-meta-chip {
	font-size: 11.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	color: var(--spb-color-chip-text, #0878e8);
	background: var(--spb-color-chip-bg, #eaf6ff);
}

/* ---------- Selected-bar confirmation ---------- */
.spb-selected-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: var(--spb-color-chip-bg, #eaf6ff);
	border: 1px solid var(--spb-color-swatch-selected-bg, #eaf6ff);
	border-radius: var(--spb-radius, 10px);
	padding: 12px 16px;
	font-size: 12.5px;
	color: var(--spb-color-body, #475569);
}
.spb-selected-bar strong,
.spb-selected-bar b {
	font-weight: 600;
	color: var(--spb-color-heading, #0f172a);
}
.spb-sb-sep { color: var(--spb-color-border, #dceaf7); }
.spb-sb-check { color: var(--spb-color-accent, #0878e8); font-weight: 700; }

/* ---------- Retail / Wholesale price tabs ---------- */
.spb-price-tabs-card {
	background: var(--spb-color-card-bg, #fff);
	border: 1px solid var(--spb-color-border, #dceaf7);
	border-radius: var(--spb-radius, 12px);
	padding: 16px;
}
.spb-price-tabs {
	position: relative;
	display: flex;
	border: 1.5px solid var(--spb-color-border, #dceaf7);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
	margin-bottom: 12px;
}
.spb-price-tab {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	border: none;
	background: transparent;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--spb-color-body, #475569);
	cursor: pointer;
	border-radius: 999px;
	transition: color .2s ease;
}
.spb-price-tab.active { color: #fff; }
.spb-price-tab-indicator {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc(50% - 5px);
	background: var(--spb-color-primary, #0878e8);
	border-radius: 999px;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	z-index: 0;
}
.spb-price-tabs-amount {
	font-family: var(--spb-font-heading, inherit);
	color: var(--spb-color-price, #0b1736);
	font-size: var(--spb-price-size, 32px);
	font-weight: var(--spb-price-weight, 700);
}
.spb-price-tabs-note {
	margin-top: 8px !important;
	font-size: 11.5px !important;
	color: var(--spb-color-body, #475569);
}

/* ---------- Add to cart button ---------- */
.spb-summary .single_add_to_cart_button,
.spb-sticky-btn {
	background: var(--spb-color-primary, #1d4ed8) !important;
	border-color: var(--spb-color-primary, #1d4ed8) !important;
	color: #fff !important;
	font-size: var(--spb-button-size, 16px) !important;
	font-weight: var(--spb-button-weight, 600) !important;
	border-radius: var(--spb-button-radius, 10px) !important;
	transition: background .15s ease, transform .1s ease;
}
.spb-summary .single_add_to_cart_button:hover,
.spb-sticky-btn:hover {
	background: var(--spb-color-primary-hover, #1e40af) !important;
	border-color: var(--spb-color-primary-hover, #1e40af) !important;
}
.spb-summary .single_add_to_cart_button:active,
.spb-sticky-btn:active { transform: scale(.98); }

/* ---------- Variation swatches (progressive enhancement over the native <select>) ---------- */
.spb-summary table.variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.spb-swatch-group {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	align-items: start;
	gap: 6px;
	margin: 6px 0 16px;
}

.spb-swatch-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	text-align: center;
	/* Real SKUs run much longer than the mockup's short numeric codes
	   (e.g. "INTEX-EASYSET-7FT" vs "28101") — without a hard height cap +
	   single-line clamp on the model text below, one long SKU wrapping
	   across many lines stretched the ENTIRE swatch row to it (CSS Grid
	   items stretch to the tallest sibling by default). */
	height: 52px;
	overflow: hidden;
	border: 1px solid var(--spb-color-border, #e2e8f0);
	border-radius: var(--spb-swatch-radius, 8px);
	padding: 9px 5px;
	background: transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.spb-swatch-btn:hover { border-color: var(--spb-color-accent, #0878e8); background: var(--spb-color-swatch-selected-bg, #eaf6ff); }
.spb-swatch-btn:active { transform: scale(.97); }
.spb-swatch-btn .spb-sw-thumb {
	width: var(--spb-swatch-thumb-size, 44px);
	height: var(--spb-swatch-thumb-size, 44px);
	margin-bottom: 5px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--spb-color-swatch-thumb-bg, #f3f6fa);
	border: 1px solid var(--spb-color-swatch-thumb-border, #e2e8f0);
}
.spb-swatch-btn .spb-sw-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Size/model/added live inside this wrapper so they can be centered as ONE
 * group next to the thumbnail (see the "thumbnail on the left" layout in
 * SPB_Settings) using plain flexbox `align-items: center` on the button —
 * the button's own padding then only ever pushes this whole block in from
 * the edge, it can never reach in and squeeze the gap between the lines
 * inside it. Default (thumbnail-on-top) layout: stack + center, matching
 * how these lines rendered before the wrapper existed. */
.spb-swatch-btn .spb-sw-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.spb-swatch-btn .spb-sw-stock-dot {
	position: absolute;
	/* Sits at the card's own padding line — never closer to the edge than
	 * 6px even at 0 padding (see the max() below) — nudged a further 2px
	 * up/left from that line per request. */
	right: calc(max(var(--spb-swatch-padding-right, 12px), 6px) + 2px);
	bottom: calc(max(var(--spb-swatch-padding-bottom, 14px), 6px) + 2px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	z-index: 2;
	pointer-events: none;
	animation: spbDotBlink 1.8s ease-in-out infinite;
}
/* LED-style ripple: a ring of the dot's own color expands outward and fades,
 * looping behind it. `background: inherit` picks up whichever in-stock/
 * on-order color the dot itself was given below. */
.spb-swatch-btn .spb-sw-stock-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: spbDotRipple 1.8s ease-out infinite;
}
@keyframes spbDotBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: .5; }
}
@keyframes spbDotRipple {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-swatch-btn .spb-sw-stock-dot { animation: none; }
	.spb-swatch-btn .spb-sw-stock-dot::after { display: none; }
}
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-instock { background: var(--spb-color-swatch-dot-instock, #16a34a); }
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-onorder { background: #f59e0b; }
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-outofstock { background: var(--spb-color-swatch-dot-onorder, #dc2626); }

.spb-swatch-status-legend {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px 16px;
	width:100%;
	margin:10px 0 2px;
	color:var(--spb-color-muted,#607089);
	font:600 11px/1.3 var(--spb-font-body,inherit);
}
.spb-swatch-status-legend span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.spb-swatch-status-legend i {
	position:relative;
	display:block;
	flex:0 0 8px;
	width:8px;
	height:8px;
	border-radius:50%;
	animation:spbDotBlink 1.8s ease-in-out infinite;
}
.spb-swatch-status-legend i::after {
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:inherit;
	animation:spbDotRipple 1.8s ease-out infinite;
}
.spb-swatch-status-legend .spb-dot-instock { background:var(--spb-color-swatch-dot-instock,#16a34a); }
.spb-swatch-status-legend .spb-dot-onorder { background:#f59e0b; }
.spb-swatch-status-legend .spb-dot-outofstock { background:var(--spb-color-swatch-dot-onorder,#dc2626); }
@media (max-width:600px) {
	.spb-swatch-status-legend { justify-content:flex-start; gap:8px 14px; padding:0 4px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
	.spb-swatch-status-legend i { animation:none; }
	.spb-swatch-status-legend i::after { display:none; }
}
.spb-swatch-btn .spb-sw-size {
	font-size: var(--spb-swatch-size-font-size, 12px);
	font-weight: 400;
	color: var(--spb-color-heading, #0f172a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.spb-swatch-btn .spb-sw-model {
	font-size: var(--spb-swatch-model-font-size, 9px);
	font-weight: 400;
	color: var(--spb-color-body, #475569);
	opacity: .75;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.spb-swatch-btn.active {
	border-color: var(--spb-color-accent, #0878e8);
	background: var(--spb-color-swatch-selected-bg, #eaf6ff);
}
.spb-swatch-btn.active .spb-sw-size { color: var(--spb-color-accent, #0878e8); }
.spb-swatch-btn.disabled { opacity: .4; cursor: not-allowed; }
.spb-swatch-btn.disabled .spb-sw-size { text-decoration: line-through; }

/* One-shot stronger blink when a shopper tries to check out before picking a size. */
.spb-swatch-btn.spb-needs-attention {
	animation: spbSwatchPulse 1.1s ease-in-out 2;
}
@keyframes spbSwatchPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
	50% { box-shadow: 0 0 0 4px rgba(220,38,38,.25); }
}

/* Quiet, continuous hint on every swatch until a size is first picked — not
   an error state, just "there's a choice to make here." Removed the moment
   .spb-swatch-group gets .active-chosen (see frontend.js). */
.spb-swatch-group.spb-needs-selection .spb-swatch-btn {
	animation: spbSwatchIdlePulse 2.2s ease-in-out infinite;
}
/* Blink the swatch BORDER a soft, subtle blue (inset ring reads as the border
   turning blue — animating border-color itself would lose to the swatch's
   !important border-color), with a faint outer halo. */
@keyframes spbSwatchIdlePulse {
	0%, 100% { box-shadow: inset 0 0 0 0 rgba(8,120,232,0), 0 0 0 0 rgba(8,120,232,0); }
	50%      { box-shadow: inset 0 0 0 1.5px rgba(8,120,232,.45), 0 0 0 3px rgba(8,120,232,.10); }
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-swatch-group.spb-needs-selection .spb-swatch-btn {
		animation: none;
		box-shadow: inset 0 0 0 1.5px rgba(8,120,232,.4);
	}
}

/* Select-flash removed: picking a size no longer flashes the container
   background. The sliding selection indicator + the swatch's own active state
   are the only selection feedback now (frontend.js stopped adding .spb-flash). */

/* ---------- Sticky add-to-cart bar ---------- */
.spb-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(100%);
	transition: transform .25s cubic-bezier(.4,0,.2,1);
	background: var(--spb-color-sticky-bg, #fff);
	border-top: 1px solid var(--spb-color-border, #e2e8f0);
	box-shadow: 0 -4px 16px rgba(0,0,0,.08);
	z-index: 100;
}
.spb-sticky-bar.show { transform: translateY(0); }

.spb-sticky-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
}
.spb-sticky-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.spb-sticky-info { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.spb-sticky-title { font-size: 13px; color: var(--spb-color-body, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spb-sticky-price { font-size: var(--spb-price-size, 24px); font-weight: var(--spb-price-weight, 700); color: var(--spb-color-price, #0f172a); }
.spb-sticky-btn { flex: 0 0 auto; border: none; padding: 10px 22px; cursor: pointer; }

/* ---------- Comparison table ---------- */
.spb-compare {
	margin-top: 40px;
	background: var(--spb-color-card-bg, #fff);
	border: 1px solid var(--spb-color-border, #e2e8f0);
	border-radius: var(--spb-radius, 12px);
	padding: 20px;
}
.spb-compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.spb-compare-toolbar h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--spb-color-heading, #0f172a); }
.spb-compare-search {
	padding: 8px 14px;
	border: 1.5px solid var(--spb-color-border, #dceaf7);
	border-radius: 999px;
	min-width: 220px;
	font-size: 13px;
}
.spb-compare-search:focus { outline: none; border-color: var(--spb-color-primary, #0878e8); }
.spb-compare-scroll { overflow-x: auto; border-radius: var(--spb-radius, 12px); border: 1px solid var(--spb-color-border, #dceaf7); }
.spb-compare-table {
	width: 100%;
	min-width: 640px;
	margin: 0 !important;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
}

.spb-compare-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background: #0878e8;
	padding: 12px;
	white-space: normal;
	border-bottom: 1px solid #0878e8;
	vertical-align: middle;
}

.spb-compare-table td {
	padding: 12px;
	border-bottom: 1px solid #e7edf5;
	text-align: center;
	white-space: normal;
	color: #4f5d73;
	font-size: 13px;
	vertical-align: middle;
}

.spb-compare-table tbody tr:nth-child(even) { background: rgba(8,120,232,.03); }
.spb-compare-table tbody tr:hover { background: var(--spb-color-swatch-selected-bg, #eaf6ff); }
.spb-compare-table tbody tr:last-child td { border-bottom: none; }

/* Size column stays visible while scrolling a wide table sideways on mobile. */
.spb-compare-table th:first-child,
.spb-compare-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--spb-color-card-bg, #fff);
}
.spb-compare-table thead th:first-child { z-index: 3; }
.spb-compare-table tbody tr:nth-child(even) td:first-child { background: #f7fbff; }

/* Compare-table product thumbnail — larger, framed and product-fitting
 * (contain, so the whole product shows instead of a cropped corner). */
.spb-compare-thumb { text-align: center; }
.spb-compare-thumb img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e6ecf3;
	border-radius: 10px;
	padding: 4px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
	transition: transform .12s ease, box-shadow .12s ease;
}
.spb-compare-row:hover .spb-compare-thumb img {
	transform: scale(1.04);
	box-shadow: 0 4px 12px rgba(16, 24, 40, .16);
}

/* Sortable headers — pointer, subtle icon, and a highlighted active state
 * with a direction-aware arrow (▲ ascending / ▼ descending). */
.spb-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.spb-sortable:hover { color: #1d4ed8; }
.spb-sort-icon { opacity: .45; font-size: .9em; margin-left: 2px; }
.spb-sortable:hover .spb-sort-icon { opacity: .8; }
.spb-sortable.spb-sort-active { color: #1d4ed8; }
.spb-sortable.spb-sort-active .spb-sort-icon { opacity: 1; }
.spb-sortable.spb-sort-asc .spb-sort-icon::before { content: "\25B2"; }
.spb-sortable.spb-sort-desc .spb-sort-icon::before { content: "\25BC"; }
.spb-sortable.spb-sort-active .spb-sort-icon { font-size: 0; }
.spb-sortable.spb-sort-active .spb-sort-icon::before { font-size: 11px; }

.spb-compare-select-btn,
.spb-compare-notify-btn {
	background: var(--ref-btn-blue, #0878e8);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}
.spb-compare-select-btn:hover,
.spb-compare-notify-btn:hover { background: var(--ref-btn-blue-hover, #056acb); }

.spb-stock-pill { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.spb-stock-pill.in-stock { background: #dcfce7; color: #166534; }
.spb-stock-pill.made-to-order { background: #eef2f7; color: #475569; }
.spb-stock-pill.out-stock { background: #fee2e2; color: #991b1b; }
.spb-compare-row.spb-row-hidden { display: none; }

/* Brief highlight when a row is clicked-to-select (see initCompareTable). */
.spb-compare-row.spb-row-selected td {
	animation: spbCompareRowBlink 1s ease-in-out 2;
}
@keyframes spbCompareRowBlink {
	0%, 100% { box-shadow: inset 0 2px 0 0 rgba(8,120,232,0), inset 0 -2px 0 0 rgba(8,120,232,0); }
	25%, 75% { box-shadow: inset 0 2px 0 0 rgba(8,120,232,.5), inset 0 -2px 0 0 rgba(8,120,232,.5); }
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-compare-row.spb-row-selected td { animation: none; }
}

@media ( max-width: 760px ) {
	.spb-compare-table thead { display: none; }
	.spb-compare-table, .spb-compare-table tbody, .spb-compare-table tr, .spb-compare-table td { display: block; width: 100%; }
	.spb-compare-row { border: 1px solid var(--spb-color-border, #e2e8f0); border-radius: 10px; margin-bottom: 10px; padding: 8px; }
	.spb-compare-table td { border: none; padding: 4px 6px; white-space: normal; }
}

/* ---------- Spec table ---------- */
.spb-spec { margin-top: 32px; }
.spb-spec h2 { font-size: 20px; color: var(--spb-color-heading, #0f172a); margin-bottom: 12px; }
.spb-spec-table { width: 100%; border-collapse: collapse; }
.spb-spec-table th, .spb-spec-table td { padding: 10px 14px; border-bottom: 1px solid var(--spb-color-border, #e2e8f0); text-align: left; font-size: 14px; }
.spb-spec-table th { width: 220px; color: var(--spb-color-body, #475569); font-weight: 600; }

/* ---------- About this item ---------- */
.spb-about-items {
	margin-top: 12px;
	padding: 18px;
	background: #ffffff;
	border: 1px solid #e7edf5;
	border-radius: 10px;
	box-shadow: none;
}
.spb-about-items h3 {
	font-size: 13px;
	font-family: var(--spb-font-heading, inherit);
	color: #0b1736;
	margin: 0 0 10px;
	font-weight: 700;
}
.spb-about-items ul {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.spb-about-items li {
	color: #4f5d73;
	font-size: 12.5px;
	line-height: 1.55;
}

/* ---------- Get Quote button + modal ---------- */
.spb-get-quote-btn {
	width: 100%;
	margin-top: 10px;
	padding: 12px;
	border: 1.5px solid var(--spb-color-heading, #0b1736);
	border-radius: var(--spb-button-radius, 10px);
	background: var(--spb-color-heading, #0b1736);
	color: #fff;
	font-size: var(--spb-button-size, 14px);
	font-weight: var(--spb-button-weight, 700);
	cursor: pointer;
	transition: opacity .15s ease;
}
.spb-get-quote-btn:hover { opacity: .85; }

.spb-quote-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.spb-quote-modal.open { display: flex; }
.spb-quote-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,.8);
	backdrop-filter: blur(3px);
}
.spb-quote-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	background: var(--spb-color-card-bg, #fff);
	border-radius: var(--spb-radius, 12px);
	padding: 28px 24px 24px;
}
.spb-quote-content h3 {
	margin: 0 0 4px;
	font-family: var(--spb-font-heading, inherit);
	font-size: 19px;
	color: var(--spb-color-heading, #0b1736);
}
.spb-quote-subtext { margin: 0 0 18px; font-size: 12.5px; color: var(--spb-color-body, #475569); }
.spb-quote-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,.05);
	font-size: 18px;
	cursor: pointer;
}
#spb-quote-form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
	margin: 12px 0 5px;
}
#spb-quote-form input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--spb-color-border, #dceaf7);
	border-radius: var(--spb-button-radius, 10px);
	font-size: 14px;
}
#spb-quote-form input:focus { outline: none; border-color: var(--spb-color-primary, #0878e8); }
.spb-quote-submit {
	width: 100%;
	margin-top: 18px;
	padding: 12px;
	border: none;
	border-radius: var(--spb-button-radius, 10px);
	background: var(--spb-color-primary, #0878e8);
	color: #fff;
	font-size: var(--spb-button-size, 14px);
	font-weight: var(--spb-button-weight, 700);
	cursor: pointer;
}
.spb-quote-submit:disabled { opacity: .6; cursor: not-allowed; }
.spb-quote-status { margin: 10px 0 0; font-size: 12.5px; text-align: center; }
.spb-quote-status.is-success { color: #166534; }
.spb-quote-status.is-error { color: #991b1b; }

/* ---------- Zoom modal ---------- */
.spb-zoom-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}
.spb-zoom-modal.open { display: flex; }
.spb-zoom-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,.8);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}
.spb-zoom-modal.open .spb-zoom-backdrop { opacity: 1; }
.spb-zoom-content { position: relative; max-width: 90vw; max-height: 90vh; z-index: 1; }
.spb-zoom-content img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.spb-zoom-close, .spb-zoom-nav {
	position: absolute;
	background: rgba(255,255,255,.9);
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	font-size: 22px;
}
.spb-zoom-close { top: -16px; right: -16px; }
.spb-zoom-prev { left: -56px; top: 50%; transform: translateY(-50%); }
.spb-zoom-next { right: -56px; top: 50%; transform: translateY(-50%); }
.spb-zoom-caption { text-align: center; color: #fff; margin-top: 10px; font-size: 13px; }

/* ---------- Reduced motion & data ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.spb-stage-slide,
	.spb-thumb,
	.spb-swatch-btn,
	.spb-sticky-bar,
	.spb-zoom-backdrop,
	.spb-summary .single_add_to_cart_button {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Click-to-edit highlight (only relevant inside the admin's preview iframe) ---------- */
[data-spb-section].spb-editor-focus {
	outline: 2px solid var(--spb-color-accent, #16a34a);
	outline-offset: 4px;
	animation: spbEditorPulse .6s ease-in-out 2;
}
@keyframes spbEditorPulse {
	0%, 100% { outline-color: rgba(22,163,74,.3); }
	50% { outline-color: rgba(22,163,74,1); }
}
/* ============================================================
   DESIGN OVERRIDES v1.2.5 - PIXEL-PERFECT REFERENCE MATCHING
   Extracted from: product_v4_koko.html
   ============================================================ */

/* ========== COLOR TOKENS (from reference — verified against the reference
   file's ACTUAL rendered getComputedStyle output, not just its source text:
   product_v4_koko.html layers three separate ":root" token passes, and the
   LAST one to define each property wins the cascade regardless of where in
   the file a rule that consumes it appears. Values below are what the
   browser really uses. ) ========== */
:root {
  --ref-btn-blue: #0878e8;
  --ref-btn-blue-hover: #056acb;
  --ref-blue-700: #0b1736;
  --ref-blue-50: #eaf6ff;
  --ref-blue-100: #d9eeff;
  --ref-ink-900: #0b1736;
  --ref-ink-700: #4f5d73;
  --ref-ink-500: #667085;
  --ref-ink-400: #98a2b3;
  --ref-line-soft: #e7edf5;
  --ref-surface: #ffffff;
  --ref-bg: #ffffff;
  --ref-emerald-500: #16a34a;
  --ref-radius-lg: 12px;
  --ref-radius-md: 10px;
  --ref-radius-sm: 12px;
  --ref-shadow-card: none;
}

/* ========== BRAND ROW ========== */
.spb-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.spb-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ref-blue-700);
}

.spb-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3e7cb1;
  flex-shrink: 0;
}

.spb-brand-logo {
  height: 22px;
  width: auto;
  max-width: 70px;
  object-fit: contain;
  display: block;
}

/* ========== PRICE RANGE LINE ========== */
.spb-price-range {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ref-ink-500);
  font-weight: 500;
}

.spb-price-range svg {
  width: 15px;
  height: 15px;
  color: var(--ref-ink-500);
  flex-shrink: 0;
}

.spb-price-range-badge {
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  background: var(--ref-btn-blue);
  padding: 5px 14px;
  border-radius: 999px;
  line-height: 1.4;
  display: inline-block;
  white-space: nowrap;
}

/* ========== META CHIPS ========== */
.spb-meta-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.spb-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ref-blue-700);
  background: var(--ref-blue-50);
  border: none;
  white-space: nowrap;
}

.spb-meta-chip-logo {
  height: 22px;
  width: auto;
  max-width: 70px;
  object-fit: contain;
  display: block;
}

/* ========== SELECTED BAR ========== */
.spb-selected-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--ref-blue-50);
  border: 1px solid var(--ref-blue-100);
  border-radius: var(--ref-radius-md);
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--ref-ink-700);
  font-weight: 400;
  margin-top: 12px;
}

.spb-selected-bar b {
  font-weight: 600;
  color: var(--ref-ink-900);
}

.spb-selected-bar .spb-sep {
  color: var(--ref-ink-400);
}

.spb-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ref-emerald-500);
}

.spb-check-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* ========== COMPARE TABLE STYLING ========== */
.spb-compare-table thead th {
  background: var(--ref-btn-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--ref-btn-blue);
}

.spb-compare-table td {
  font-size: 13px;
  font-weight: 400;
  color: var(--ref-ink-700);
  text-align: center;
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--ref-line-soft);
  white-space: normal;
}

.spb-compare-table tbody tr:nth-child(even) {
  background: #f7f7f8;
}

.spb-compare-table tbody tr:hover {
  background: var(--ref-blue-50);
}

.spb-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* First column sticky */
.spb-compare-table th:first-child,
.spb-compare-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ref-surface);
  text-align: left;
}

.spb-compare-table thead th:first-child {
  z-index: 3;
  background: var(--ref-btn-blue);
}

.spb-compare-table tbody tr:nth-child(even) td:first-child {
  background: #f7f7f8;
}

/* ========== ABOUT THIS ITEM ========== */
.spb-about-items {
  margin-top: 12px;
  padding: 18px;
  background: var(--ref-surface);
  border: 1px solid var(--ref-line-soft);
  border-radius: var(--ref-radius-md);
  box-shadow: var(--ref-shadow-card);
}

.spb-about-items h3 {
  font-size: 13px;
  font-family: inherit;
  color: var(--ref-ink-900);
  margin: 0 0 10px;
  font-weight: 700;
}

.spb-about-items ul {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spb-about-items li {
  color: var(--ref-ink-700);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ========== SWATCH SIZING ========== */
.spb-swatch-btn {
  height: 52px;
  overflow: hidden;
}

.spb-sw-size {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ref-ink-900);
}

.spb-sw-model {
  font-size: 9px;
  font-weight: 400;
  color: var(--ref-ink-500);
  opacity: 1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ========== SWATCH SECTION HEADER ========== */
.spb-swatch-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e7edf5;
}

.spb-swatch-title {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #667085;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.spb-swatch-title svg {
	width: 13px;
	height: 13px;
	color: #3e7cb1;
	flex-shrink: 0;
}

.spb-size-chart-btn {
	border: none;
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10.5px;
	font-weight: 700;
	color: #0b1736;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.spb-size-chart-btn:hover {
	color: #0878e8;
}

.spb-size-chart-btn svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.2;
}

/* ========== SWATCH BUTTON UPDATES ========== */
.spb-swatch-btn {
	border: 2px solid #e7edf5;
	background: #ffffff;
}

.spb-swatch-btn:hover,
.spb-swatch-btn.active {
	border-color: #0878e8;
	background: #eaf6ff;
}

/* ========== COMPREHENSIVE DESIGN SYNC v1.3.0 ========== */

/* PRODUCT TITLE */
.spb-summary .product_title {
	color: var(--ref-ink-900);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 8px;
}

/* PRODUCT DESCRIPTION */
.spb-summary .woocommerce-product-details__short-description {
	color: var(--ref-ink-700);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 16px;
}

/* RATING */
.spb-summary .woocommerce-product-rating {
	color: var(--ref-ink-500);
	font-size: 12px;
	margin-bottom: 8px;
}

/* PRICE - Main section */
.spb-summary p.price,
.spb-summary .price {
	color: var(--ref-ink-900) !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin-top: 4px !important;
	margin-bottom: 12px !important;
	display: block !important;
}

/* PRICE RANGE BADGE */
.spb-price-range-badge {
	background: var(--ref-btn-blue);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
	line-height: 1.4;
	display: inline-block;
	white-space: nowrap;
	margin-left: 8px;
}

/* META CHIPS */
.spb-meta-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
	margin-bottom: 16px;
}

.spb-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	color: var(--ref-blue-700);
	background: var(--ref-blue-50);
	border: none;
	white-space: nowrap;
}

/* SELECTED BAR */
.spb-selected-bar {
	background: var(--ref-blue-50);
	border: 1px solid var(--ref-blue-100);
	border-radius: var(--ref-radius-md);
	color: var(--ref-ink-700);
	font-size: 12.5px;
	font-weight: 400;
	padding: 12px 16px;
	margin-top: 12px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.spb-selected-bar b,
.spb-selected-bar strong {
	color: var(--ref-ink-900);
	font-weight: 600;
}

.spb-selected-bar .spb-sb-sep {
	color: var(--ref-ink-400);
}

/* SWATCH HEADER */
.spb-swatch-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ref-line-soft);
}

.spb-swatch-title {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ref-ink-500);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.spb-swatch-title svg {
	width: 13px;
	height: 13px;
	color: #3e7cb1;
	flex-shrink: 0;
}

.spb-size-chart-btn {
	border: none;
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ref-blue-700);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.spb-size-chart-btn:hover {
	color: var(--ref-btn-blue);
}

.spb-size-chart-btn svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.2;
}

/* SWATCH BUTTONS */
.spb-swatch-group {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	align-items: start;
	gap: 8px;
	margin: 0 0 16px;
}

.spb-swatch-btn {
	border: 2px solid var(--ref-line-soft);
	background: var(--ref-surface);
	border-radius: var(--ref-radius-sm);
	height: 52px;
	padding: 9px 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.spb-swatch-btn:hover {
	border-color: var(--ref-btn-blue);
	background: var(--ref-blue-50);
}

.spb-swatch-btn.active {
	border-color: var(--ref-btn-blue);
	background: var(--ref-blue-50);
}

.spb-swatch-btn.active .spb-sw-size {
	color: var(--ref-btn-blue);
}

.spb-sw-size {
	color: var(--ref-ink-900);
	font-size: 11.5px;
	font-weight: 600;
}

.spb-sw-model {
	color: var(--ref-ink-500);
	font-size: 9px;
	font-weight: 400;
	opacity: 1;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* PRICE TABS (RETAIL/WHOLESALE) */
.spb-price-tabs-card {
	background: var(--ref-surface);
	border: 1px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-lg);
	padding: 20px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.spb-price-tabs {
	display: flex;
	border: 2px solid var(--ref-line-soft);
	border-radius: 999px;
	background: transparent;
	padding: 2px;
	gap: 2px;
	margin-bottom: 16px;
	position: relative;
}

.spb-price-tab {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	border: none;
	background: transparent;
	color: var(--ref-ink-700);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
	border-radius: 999px;
	transition: color 0.15s ease;
}

.spb-price-tab.active {
	color: #ffffff;
}

.spb-price-tab-indicator {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(50% - 4px);
	background: var(--ref-btn-blue);
	border-radius: 999px;
	transition: transform 0.3s cubic-bezier(.4,0,.2,1);
	z-index: 0;
}

.spb-price-tabs-amount {
	color: var(--ref-ink-900);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 8px;
}

.spb-price-tabs-note {
	color: var(--ref-ink-700);
	font-size: 12px;
	font-weight: 400;
	margin-top: 8px;
}

/* ADD TO CART BUTTON */
.spb-summary .single_add_to_cart_button,
.spb-sticky-btn {
	background: var(--ref-btn-blue) !important;
	border-color: var(--ref-btn-blue) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	border-radius: var(--ref-radius-md) !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.15s ease;
}

.spb-summary .single_add_to_cart_button:hover,
.spb-sticky-btn:hover {
	background: var(--ref-btn-blue-hover) !important;
}

/* QUANTITY INPUT */
.spb-summary .quantity .qty {
	border: 2px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-md);
	color: var(--ref-ink-900);
	font-size: 14px;
	padding: 10px 12px;
	background: var(--ref-surface);
}

.spb-summary .quantity .qty:focus {
	outline: none;
	border-color: var(--ref-btn-blue);
}

.spb-qty-select {
	border: 2px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-md);
	color: var(--ref-ink-900);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	background: var(--ref-surface);
}

.spb-qty-select:focus {
	outline: none;
	border-color: var(--ref-btn-blue);
}

/* STICKY BAR */
.spb-sticky-bar {
	background: var(--ref-surface);
	border-top: 1px solid var(--ref-line-soft);
	box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

.spb-sticky-title {
	color: var(--ref-ink-700);
	font-size: 13px;
}

.spb-sticky-price {
	color: var(--ref-ink-900);
	font-size: 24px;
	font-weight: 700;
}

/* COMPARE TABLE */
.spb-compare {
	background: var(--ref-surface);
	border: 1px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-lg);
	padding: 24px;
	margin-top: 32px;
}

.spb-compare-toolbar h2 {
	color: var(--ref-ink-900);
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.spb-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.spb-compare-table thead th {
	background: var(--ref-btn-blue);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	padding: 12px;
	border-bottom: 1px solid var(--ref-btn-blue);
	text-align: center;
	vertical-align: middle;
	border: none;
}

.spb-compare-table td {
	border-bottom: 1px solid var(--ref-line-soft);
	color: var(--ref-ink-700);
	font-size: 13px;
	padding: 12px;
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
}

.spb-compare-table tbody tr:nth-child(even) {
	background: #f8fafb;
}

.spb-compare-table tbody tr:hover {
	background: var(--ref-blue-50);
}

.spb-compare-table tbody tr:last-child td {
	border-bottom: none;
}

.spb-compare-table th:first-child,
.spb-compare-table td:first-child {
	text-align: left;
	background: var(--ref-surface);
	position: sticky;
	left: 0;
	z-index: 1;
}

.spb-compare-table thead th:first-child {
	z-index: 3;
	background: var(--ref-btn-blue);
}

.spb-compare-table tbody tr:nth-child(even) td:first-child {
	background: #f8fafb;
}

/* SPEC TABLE */
.spb-spec {
	margin-top: 32px;
}

.spb-spec h2 {
	color: var(--ref-ink-900);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 16px;
}

.spb-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.spb-spec-table th {
	background: var(--ref-bg);
	color: var(--ref-ink-900);
	font-size: 13px;
	font-weight: 600;
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ref-line-soft);
	width: 220px;
}

.spb-spec-table td {
	color: var(--ref-ink-700);
	font-size: 13px;
	font-weight: 400;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ref-line-soft);
	text-align: left;
}

.spb-spec-table tr:last-child td {
	border-bottom: none;
}

/* PRODUCT META */
.spb-summary .product_meta {
	color: var(--ref-ink-700);
	font-size: 13px;
	border-top: 1px solid var(--ref-line-soft);
	padding-top: 12px;
	margin-top: 16px;
}

.spb-summary .product_meta span {
	display: block;
	margin-bottom: 6px;
}

.spb-summary .product_meta span:last-child {
	margin-bottom: 0;
}

/* ABOUT THIS ITEM */
.spb-about-items {
	margin-top: 12px;
	padding: 18px;
	background: var(--ref-surface);
	border: 1px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-md);
	box-shadow: var(--ref-shadow-card);
}

.spb-about-items h3 {
	font-size: 13px;
	font-family: inherit;
	color: var(--ref-ink-900);
	margin: 0 0 10px;
	font-weight: 700;
}

.spb-about-items ul {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.spb-about-items li {
	color: var(--ref-ink-700);
	font-size: 12.5px;
	line-height: 1.55;
}

/* GALLERY */
.spb-gallery {
	background: var(--ref-surface);
	border: 1px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-lg);
	padding: 12px;
}

.spb-stage {
	background: #f5faff;
	border-radius: var(--ref-radius-lg);
	aspect-ratio: 1 / 1;
}

.spb-thumb-row {
	gap: 8px;
	margin-top: 12px;
}

.spb-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--ref-radius-sm);
	border: 2px solid transparent;
}

.spb-thumb.active,
.spb-thumb:hover {
	border-color: var(--ref-btn-blue);
}

/* BADGE */
.spb-badge {
	background: #dc2626;
	border-radius: 6px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	top: 12px;
	left: 12px;
}

/* QUOTE MODAL */
.spb-quote-content {
	background: var(--ref-surface);
	border-radius: var(--ref-radius-lg);
	box-shadow: 0 10px 40px rgba(0,0,0,.2);
}

.spb-quote-content h3 {
	color: var(--ref-ink-900);
	font-size: 19px;
	font-weight: 700;
}

.spb-quote-subtext {
	color: var(--ref-ink-700);
	font-size: 13px;
}

#spb-quote-form label {
	color: var(--ref-ink-900);
	font-size: 13px;
	font-weight: 600;
}

#spb-quote-form input {
	border: 2px solid var(--ref-line-soft);
	border-radius: var(--ref-radius-md);
	color: var(--ref-ink-900);
	font-size: 14px;
	padding: 10px 12px;
}

#spb-quote-form input:focus {
	outline: none;
	border-color: var(--ref-btn-blue);
}

.spb-quote-submit {
	background: var(--ref-btn-blue);
	border-radius: var(--ref-radius-md);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 20px;
}

.spb-quote-submit:hover {
	background: var(--ref-btn-blue-hover);
}

/* GET QUOTE BUTTON */
.spb-get-quote-btn {
	background: transparent;
	border: 2px solid var(--ref-ink-900);
	border-radius: var(--ref-radius-md);
	color: var(--ref-ink-900);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 20px;
	width: 100%;
	margin-top: 12px;
}

.spb-get-quote-btn:hover {
	background: var(--ref-ink-900);
	color: #ffffff;
}

/* ZOOM MODAL */
.spb-zoom-close,
.spb-zoom-nav {
	background: rgba(255,255,255,.95);
	border: none;
	border-radius: 50%;
}

.spb-zoom-close:hover,
.spb-zoom-nav:hover {
	background: #ffffff;
}

/* FORCED REFERENCE DESIGN OVERRIDES - bypassing cached CSS */
.spb-summary .single_add_to_cart_button,
.spb-sticky-btn,
.spb-price-tab-indicator,
.spb-compare-table thead th {
	background-color: #0878e8 !important;
	background: #0878e8 !important;
	border-color: #0878e8 !important;
}

.spb-summary .single_add_to_cart_button:hover,
.spb-sticky-btn:hover {
	background-color: #056acb !important;
	background: #056acb !important;
	border-color: #056acb !important;
}

.spb-summary .product_title,
.spb-compare-toolbar h2,
.spb-spec h2 {
	color: #0b1736 !important;
}

.spb-summary p.price,
.spb-summary .price {
	color: #0b1736 !important;
}

.spb-summary .woocommerce-product-details__short-description {
	color: #4f5d73 !important;
}

.spb-meta-chip {
	background-color: #eaf6ff !important;
	color: #0b1736 !important;
}

.spb-swatch-btn {
	border-color: #e7edf5 !important;
	background-color: #ffffff !important;
}

.spb-swatch-btn:hover,
.spb-swatch-btn.active {
	border-color: #0878e8 !important;
	background-color: #eaf6ff !important;
}

.spb-selected-bar {
	background-color: #eaf6ff !important;
	border-color: #d9eeff !important;
	color: #4f5d73 !important;
}

.spb-selected-bar b,
.spb-selected-bar strong {
	color: #0b1736 !important;
}

.spb-gallery {
	border-color: #e7edf5 !important;
	background-color: #ffffff !important;
}

.spb-compare-table td {
	border-color: #e7edf5 !important;
	color: #4f5d73 !important;
}

.spb-compare-table tbody tr:nth-child(even) {
	background-color: #f8fafb !important;
}

.spb-compare-table tbody tr:hover {
	background-color: #eaf6ff !important;
}

.spb-spec-table th {
	background-color: #f2f2f1 !important;
	color: #667085 !important;
}

.spb-spec-table td {
	color: #4f5d73 !important;
	border-color: #e7edf5 !important;
}

.spb-about-items {
	background-color: #ffffff !important;
	border-color: #e7edf5 !important;
	box-shadow: none !important;
}

.spb-about-items h3 {
	color: #0b1736 !important;
}

.spb-about-items li {
	color: #4f5d73 !important;
}

/* RESPONSIVE TWEAKS */
@media (max-width: 760px) {
	.spb-summary .product_title {
		font-size: 24px;
	}

	.spb-summary p.price,
	.spb-summary .price {
		font-size: 28px !important;
	}

	.spb-swatch-btn {
		height: auto;
		min-height: 48px;
	}

	.spb-price-tabs-amount {
		font-size: 28px;
	}
}

/* ============================================================
   v1.3.1 CORRECTIONS — authoritative, last in cascade on purpose:
   fixes retail/wholesale tab color+centering, add-to-cart/qty sizing,
   adds the More Info button, and restyles the Product Information /
   Specifications section. Placed last, with !important where earlier
   duplicate blocks in this file would otherwise win.
   ============================================================ */

/* ---------- Retail / Wholesale price tabs: correct color + centered text ---------- */
.spb-price-tabs-card {
	background: #ffffff !important;
	border: 1px solid #e7edf5 !important;
	border-radius: 12px !important;
	padding: 18px !important;
	box-shadow: none !important;
}

.spb-price-tabs {
	display: flex !important;
	background: #eaf6ff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 4px !important;
	gap: 4px !important;
	margin-bottom: 12px !important;
	position: relative;
}

.spb-price-tab {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	height: 46px !important;
	border: none !important;
	background: transparent !important;
	color: #667085 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	padding: 0 12px !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: color .15s ease;
	text-align: center;
	line-height: 1.2;
}

.spb-price-tab.active {
	color: #0878e8 !important;
	background: transparent !important;
}

.spb-price-tab-indicator {
	position: absolute !important;
	top: 3px !important;
	bottom: 3px !important;
	left: 3px !important;
	width: calc(50% - 5px) !important;
	background: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(11,23,54,.07) !important;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	z-index: 0;
}

.spb-price-tabs-amount {
	color: #0b1736 !important;
}

.spb-price-tabs-note {
	color: #4f5d73 !important;
}

/* ---------- Add to cart button: fixed height, no oversized padding ---------- */
.spb-summary .single_add_to_cart_button,
.spb-sticky-btn {
	background: #0878e8 !important;
	border-color: #0878e8 !important;
	color: #ffffff !important;
	height: 50px !important;
	min-height: 44px !important;
	padding: 0 20px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100%;
	line-height: 1.2;
	box-sizing: border-box;
}
.spb-summary .single_add_to_cart_button:hover,
.spb-sticky-btn:hover {
	background: #056acb !important;
	border-color: #056acb !important;
}

/* ---------- Quantity: compact size, no cropping ---------- */
.spb-summary .quantity,
.spb-summary .single_add_to_cart_button {
	margin: 0 0 10px 0;
}
.spb-summary .quantity {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}
.spb-qty-select {
	width: auto !important;
	min-width: 96px;
	height: 44px !important;
	padding: 0 28px 0 14px !important;
	border: 1.5px solid #e7edf5 !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0b1736 !important;
	background: #ffffff !important;
	line-height: 1;
}
.spb-qty-select:focus { border-color: #0878e8 !important; }

/* ---------- More Info button (new — scrolls to the compare table) ---------- */
.spb-more-info-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 2px;
	height: 50px;
	background: #ffffff;
	border: 1.5px solid #0878e8;
	border-radius: 12px;
	color: #0878e8;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.spb-more-info-btn:hover { background: #eaf6ff; }
.spb-more-info-btn svg { width: 14px; height: 14px; flex: none; }

/* ---------- Product Information / Specifications: two-column layout ---------- */
.spb-spec {
	margin-top: 32px !important;
	padding-top: 24px;
	border-top: 1px solid #e7edf5;
}
.spb-spec h2 {
	font-size: 20px !important;
	font-weight: 700;
	letter-spacing: -.015em;
	color: #0b1736 !important;
	margin-bottom: 18px !important;
}
.spb-spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}
.spb-spec-grid > div {
	display: flex;
	flex-direction: column;
}
.spb-spec-subhead {
	font-size: 11px;
	font-weight: 700;
	color: #667085;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.spb-spec-drawing-box,
.spb-spec-table-wrap {
	flex: 1;
	background: #f3f4f6;
	border: 1px solid #e7edf5 !important;
	border-radius: 14px !important;
	overflow: hidden;
}
.spb-spec-drawing-box {
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 240px;
}
.spb-spec-drawing-box svg {
	width: 100%;
	max-width: 240px;
	height: auto;
	color: #0b1736;
	margin: 0 auto 12px;
}
.spb-spec-drawing-caption {
	font-size: 12px;
	color: #667085;
	margin: 0;
}
.spb-spec-table-wrap {
	padding: 18px 22px;
}
.spb-spec-table {
	width: 100% !important;
	border-collapse: collapse !important;
}
.spb-spec-table th,
.spb-spec-table td {
	padding: 9px 2px !important;
	border-bottom: 1px solid #e4e7ec !important;
	font-size: 12.5px !important;
	text-align: left !important;
	vertical-align: top;
}
.spb-spec-table tr:last-child th,
.spb-spec-table tr:last-child td {
	border-bottom: none !important;
}
.spb-spec-table th {
	width: 42% !important;
	background: transparent !important;
	color: #667085 !important;
	font-weight: 500 !important;
}
.spb-spec-table td {
	color: #0b1736 !important;
	font-weight: 600 !important;
}
.spb-spec-note {
	font-size: 11.5px;
	color: #98a2b3;
	margin: 14px 0 0;
	line-height: 1.5;
}

@media (max-width: 760px) {
	.spb-spec-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   v1.3.2 SWATCH CORRECTIONS — verified against the reference file's
   actual rendered computed styles (same method as the v1.3.1 pass):
   swatch box fused with its header into one outlined card, model text
   no longer clipped, real sliding selection indicator, single-line
   clickable Size Chart link.
   ============================================================ */

/* The swatch header and the actual swatch table both now render INSIDE
   .spb-price-tabs-card (see price-tabs.php) — the card itself supplies the
   border/background/radius/padding, so these are plain content blocks, not
   their own separate boxes. A thin divider marks where the header ends. */
.spb-swatch-header {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #e7edf5 !important;
	border-radius: 0 !important;
	padding: 0 0 10px !important;
	margin: 0 0 12px !important;
	justify-content: flex-start !important;
	gap: 16px;
}
.spb-summary table.variations {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 0 !important;
}

.spb-swatch-title {
	color: #667085 !important;
}

.spb-size-chart-btn {
	white-space: nowrap !important;
	flex-shrink: 0;
	color: #0b1736 !important;
}
.spb-size-chart-btn:hover { color: #0878e8 !important; }

/* The native WooCommerce <label> ("Size" / "Size & Model") is redundant now
   that .spb-swatch-header already shows an equivalent, better-styled title
   right above it — without this it prints twice. */
.spb-summary table.variations label {
	display: none !important;
}

/* WooCommerce's own "Clear" (reset_variations) link — put on its own line,
   left-aligned to the card edge and given real top breathing room so it no
   longer reads as cramped against the swatch grid directly above it. */
.spb-summary table.variations .reset_variations {
	display: block !important;
	float: none !important;
	width: fit-content;
	text-align: left;
	margin: 16px 0 2px !important;
	padding: 2px 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #667085;
}
.spb-summary table.variations .reset_variations:hover {
	color: #0878e8;
}

/* Swatch grid: real height (no clipping), room for the sliding indicator */
.spb-swatch-group {
	position: relative !important;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
	gap: 8px !important;
	margin: 0 !important;
}

.spb-swatch-indicator {
	position: absolute;
	top: 0;
	left: 0;
	background: #eaf6ff;
	border: 1.5px solid #0878e8;
	border-radius: 12px;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s ease, height .25s ease, opacity .2s ease;
}

.spb-swatch-btn {
	position: relative !important;
	z-index: 1;
	height: auto !important;
	min-height: 54px !important;
	overflow: hidden !important;
	border: 1px solid #e7edf5 !important;
	border-radius: 12px !important;
	background: transparent !important;
	padding: 9px 4px !important;
	gap: 2px !important;
}
.spb-swatch-btn:hover {
	border-color: #98a2b3 !important;
	background: transparent !important;
}
.spb-swatch-btn.active,
.spb-swatch-btn.active:hover {
	background: transparent !important;
	border-color: transparent !important;
}

.spb-sw-size {
	color: #0b1736 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}
.spb-sw-model {
	color: #98a2b3 !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	opacity: 1 !important;
	/* Real SKUs (e.g. "INTEX-EASYSET-7FT") run far longer than a swatch is
	   wide — single line + ellipsis, never wrapped, so one long SKU can't
	   stretch every swatch in its CSS Grid row taller than the rest. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100%;
	display: block;
}
.spb-swatch-btn.active .spb-sw-model {
	color: #667085 !important;
}

/* ============================================================
   v1.3.3 — price card gains the variant spec-glance line, stock
   line, and B2B note (all live inside .spb-price-tabs-card now that
   the quantity input + Add to Cart button also render inside it —
   see price-tabs.php/price-tabs-close.php).
   ============================================================ */

.spb-variant-spec-line {
	font-size: 11.5px;
	color: #667085;
	line-height: 1.5;
	margin: 0 0 10px;
}

.spb-stock-line {
	font-size: 12.5px;
	font-weight: 600;
	margin: 4px 0 0;
}
.spb-stock-line .stock.in-stock { color: #16a34a; }
.spb-stock-line .stock.out-of-stock { color: #dc2626; }

.spb-b2b-note {
	font-size: 11.5px;
	color: #667085;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px dashed #e7edf5;
}

/* Quantity + Add to Cart button now render INSIDE .spb-price-tabs-card
   (see price-tabs.php) — give them the card's own internal top spacing
   instead of the summary-wide 16px every direct child gets. */
.spb-price-tabs-card .quantity {
	margin-top: 14px !important;
}

/* ============================================================
   v1.5.2 — spacing between the moved-in swatches and the price
   tabs, the "select a size" prompt state, and the disabled
   quantity dropdown (see frontend.js).
   ============================================================ */

/* The swatch table (moved into the card by frontend.js) needs its own
   bottom spacing before the Retail/Wholesale tabs start — it previously
   only had margin-bottom:4px, sized for sitting directly above the native
   Add to Cart form, not above another card section. */
.spb-summary table.variations {
	margin-bottom: 16px !important;
}

.spb-price-tabs-amount.is-prompt {
	color: #0878e8;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.spb-qty-select:disabled {
	opacity: .55;
	cursor: not-allowed;
	background: #f6f8fc !important;
}

/* The wrapper (not the disabled <select> itself, which browsers block
   pointer events on inconsistently) is what actually catches the click
   that nudges the swatches — see initQuantityDropdown(). */
.spb-summary .quantity.spb-qty-enhanced {
	cursor: default;
}

/* =====================================================================
 * Reference-mockup port — Phase 1 (visual parity, no new interactivity)
 * Colors intentionally use the plugin's own --spb-* tokens (not the
 * mockup's raw hexes) so these sections track the design dashboard.
 * ===================================================================== */

/* Gallery "Bestseller" ribbon (mockup .stage-badge). Sits top-left over the
   image; the conditional Sale badge is pushed to the top-right so the two
   never overlap. */
.spb-stage-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--spb-color-badge-bg, #f4b740);
}
.spb-stage-badge .spb-badge-text {
	color: var(--spb-color-badge-text, #3d2900);
}
.spb-badge--sale {
	left: auto;
	right: 12px;
}

/* Compare-table heading + intro (mockup .table-panel-head / .table-intro) */
.spb-compare-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.spb-compare-head h2 {
	margin: 0;
	font-family: var(--spb-font-heading, inherit);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--spb-color-heading, #0b1736);
}
.spb-compare-intro {
	margin: 6px 0 16px;
	max-width: 640px;
	font-size: 13px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--spb-color-body, #5f6673);
}

/* "See more product details" link inside "About this item" (mockup .see-more-link) */
.spb-see-more-link {
	margin-top: 10px;
	border: none;
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--spb-color-primary, #0878e8);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.spb-see-more-link:hover {
	text-decoration: underline;
}
.spb-see-more-link svg {
	width: 12px;
	height: 12px;
}

/* Trust chips row below the hero (mockup .below-price-row / .trust-chips) */
.spb-below-price-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.spb-trust-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.spb-trust-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--spb-color-body, #4f5d73);
	background: var(--spb-color-card-bg, #fff);
	border: 1px solid var(--spb-color-border, #e7edf5);
	padding: 7px 10px;
	border-radius: 8px;
}
.spb-trust-chip svg {
	width: 12px;
	height: 12px;
	color: var(--spb-color-primary, #0878e8);
	flex: none;
}

/* =====================================================================
 * Reference-mockup port — Phase 2 (T&C links + modal, toast)
 * ===================================================================== */

/* T&C link at the bottom of the price card (mockup .tc-link) */
.spb-tc-link {
	display: block;
	width: 100%;
	margin-top: 10px;
	border: none;
	background: none;
	padding: 2px 0;
	text-align: right;
	color: var(--spb-color-primary, #0878e8);
	font-size: 11px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.spb-tc-link:hover {
	color: var(--spb-color-primary-hover, #056acb);
}

/* Toast (mockup .toast) — fixed dark pill, deliberately theme-independent. */
.spb-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #181f2b;
	color: #fff;
	padding: 12px 20px;
	border-radius: 0;
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	z-index: 100000;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.spb-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.spb-toast svg {
	width: 16px;
	height: 16px;
	color: #5b9df5;
	flex: none;
}

/* =====================================================================
 * Reference-mockup port — Phase 3 (compare filters + unit toggle + expand)
 * ===================================================================== */

/* Toolbar becomes a stacked filter panel (was: single flex row) */
.spb-compare-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.spb-filter-groups {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	flex-wrap: wrap;
}
@media ( min-width: 761px ) {
	.spb-filter-groups {
		border-bottom: 1px solid var(--spb-color-border, #e7edf5);
		padding-bottom: 14px;
	}
	.spb-filter-group:not(:first-child) {
		border-left: 1px solid var(--spb-color-border, #e7edf5);
		padding-left: 22px;
	}
}
.spb-filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.spb-filter-group-price {
	min-width: 220px;
}
.spb-filter-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--spb-color-body, #5f6673);
}
.spb-filter-label svg {
	width: 13px;
	height: 13px;
	color: var(--spb-color-primary, #0878e8);
	flex: none;
}

.spb-filter-chip-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.spb-filter-chip {
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	background: var(--spb-color-card-bg, #fff);
	color: var(--spb-color-body, #4f5d73);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.spb-filter-chip:hover {
	border-color: var(--spb-color-primary, #0878e8);
}
.spb-filter-chip.active {
	border-color: var(--spb-color-primary, #0878e8);
	background: var(--spb-color-chip-bg, #eaf6ff);
	color: var(--spb-color-heading, #0b1736);
	font-weight: 600;
}
.spb-filter-clear {
	border: none;
	background: none;
	color: var(--spb-color-primary, #0878e8);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 4px;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.spb-filter-clear:hover {
	color: var(--spb-color-primary-hover, #056acb);
}

/* Price range slider (dual handle) */
.spb-price-slider-values {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
}
.spb-price-slider-sep {
	color: var(--spb-color-body, #a6abb3);
	font-weight: 400;
}
.spb-price-slider-track-wrap {
	position: relative;
	height: 28px;
	margin-top: 2px;
}
.spb-price-slider-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	margin-top: -2px;
	background: var(--spb-color-border, #e7edf5);
	border-radius: 3px;
}
.spb-price-slider-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	background: var(--spb-color-primary, #0878e8);
	border-radius: 3px;
}
.spb-price-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.spb-price-range-input::-webkit-slider-runnable-track {
	background: transparent;
	height: 28px;
}
.spb-price-range-input::-moz-range-track {
	background: transparent;
	height: 28px;
}
.spb-price-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--spb-color-card-bg, #fff);
	border: 2.5px solid var(--spb-color-primary, #0878e8);
	box-shadow: 0 1px 4px rgba(24, 31, 43, .25);
	margin-top: 5px;
	cursor: pointer;
}
.spb-price-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--spb-color-card-bg, #fff);
	border: 2.5px solid var(--spb-color-primary, #0878e8);
	box-shadow: 0 1px 4px rgba(24, 31, 43, .25);
	cursor: pointer;
}

/* Row 2: search + unit toggle */
.spb-compare-toolbar-row2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 18px;
}
.spb-filter-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--spb-color-card-bg, #fff);
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	border-radius: 10px;
	padding: 0 14px;
	height: 40px;
	flex: 1;
	min-width: 200px;
	max-width: 340px;
}
.spb-filter-search:focus-within {
	border-color: var(--spb-color-primary, #0878e8);
}
.spb-filter-search svg {
	width: 15px;
	height: 15px;
	color: #a6abb3;
	flex: none;
}
.spb-filter-search input {
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	font-weight: 400;
	color: var(--spb-color-heading, #0b1736);
	width: 100%;
	font-family: inherit;
}

.spb-unit-toggle {
	display: inline-flex;
	align-items: center;
	background: #f2f4f7;
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
.spb-unit-btn {
	border: none;
	background: none;
	color: var(--spb-color-body, #4f5d73);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
.spb-unit-btn:hover {
	color: var(--spb-color-heading, #0b1736);
}
.spb-unit-btn.active {
	color: #fff;
	background: var(--spb-color-primary, #0878e8);
}

.spb-filter-result {
	font-size: 12px;
	color: var(--spb-color-body, #5f6673);
	font-weight: 400;
}
.spb-filter-result b {
	color: var(--spb-color-heading, #0b1736);
	font-weight: 600;
}

/* Expand-to-fullscreen + scroll hint (positioned within .spb-compare-scroll) */
.spb-compare-scroll {
	position: relative;
	/* Make sure the wide table actually scrolls horizontally inside its box on
	   narrow / tablet widths (native touch panning + momentum), and give mouse
	   users a grab affordance (JS adds click-drag scrolling). */
	width: 100%;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	cursor: grab;
}
.spb-compare-scroll.spb-dragging {
	cursor: grabbing;
	user-select: none;
}
.spb-expand-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 6;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--spb-color-border, #e7edf5);
	background: var(--spb-color-card-bg, #fff);
	color: var(--spb-color-body, #4f5d73);
	cursor: pointer;
	box-shadow: 0 8px 30px rgba(15, 17, 20, .16);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, color .15s ease;
}
.spb-expand-btn:hover {
	border-color: var(--spb-color-primary, #0878e8);
	color: var(--spb-color-primary, #0878e8);
}
.spb-expand-btn svg {
	width: 16px;
	height: 16px;
}
.spb-scroll-hint {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 56px;
	pointer-events: none;
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ), var(--spb-color-card-bg, #fff) 78% );
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 6px;
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 4;
}
.spb-scroll-hint.show {
	opacity: 1;
}
.spb-scroll-hint svg {
	width: 20px;
	height: 20px;
	color: var(--spb-color-primary, #0878e8);
	animation: spbScrollHintNudge 1.6s ease-in-out infinite;
	/* Padding enlarges the tap target while box-sizing keeps the icon at 20px. */
	box-sizing: content-box;
	padding: 8px;
}
/* The overlay stays click-through; only the chevron is tappable, and only while
 * the hint is actually shown (so an invisible icon never blocks cell taps at the
 * right edge once the table is fully scrolled). Clicking it scrolls right. */
.spb-scroll-hint.show svg {
	pointer-events: auto;
	cursor: pointer;
}
@keyframes spbScrollHintNudge {
	0%, 100% { transform: translateX( 0 ); opacity: .55; }
	50% { transform: translateX( 5px ); opacity: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-scroll-hint svg { animation: none; opacity: .8; }
}

.spb-compare-scroll.spb-fullscreen {
	position: fixed;
	inset: 16px;
	z-index: 99998;
	overflow: auto;
	background: var(--spb-color-card-bg, #fff);
	box-shadow: 0 8px 30px rgba(15, 17, 20, .16);
	border-radius: var(--spb-radius, 12px);
}
.spb-fs-backdrop {
	display: none;
}
.spb-fs-backdrop.show {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(24, 31, 43, .45);
	z-index: 99997;
}

/* =====================================================================
 * Reference-mockup port — Phase 4 (wholesale bulk-order cart builder)
 * ===================================================================== */

/* The builder shows only in Wholesale mode; the retail buy controls hide there. */
.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-wholesale-builder {
	display: none;
}
.spb-price-tabs-card.spb-mode-wholesale .quantity,
.spb-price-tabs-card.spb-mode-wholesale .single_add_to_cart_button,
.spb-price-tabs-card.spb-mode-wholesale .woocommerce-variation-add-to-cart .quantity {
	display: none !important;
}

.spb-wholesale-builder {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.spb-wholesale-add-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
.spb-wholesale-qty-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: none;
}
.spb-wholesale-qty-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--spb-color-body, #5f6673);
}
.spb-wholesale-qty {
	width: 96px;
	height: 44px;
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	border-radius: 10px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
	background: var(--spb-color-card-bg, #fff);
}
.spb-wholesale-qty:focus {
	outline: none;
	border-color: var(--spb-color-primary, #0878e8);
}
.spb-add-size-btn {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: none;
	border-radius: var(--spb-button-radius, 10px);
	background: var(--spb-color-primary, #0878e8);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.spb-add-size-btn:hover:not(:disabled) {
	background: var(--spb-color-primary-hover, #056acb);
}
.spb-add-size-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.spb-lot-hint {
	display: block;
	font-size: 11px;
	color: var(--spb-color-body, #5f6673);
}
.spb-wholesale-empty {
	font-size: 11.5px;
	color: var(--spb-color-body, #5f6673);
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}
.spb-wholesale-cart-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 160px;
	overflow-y: auto;
}
.spb-wholesale-cart-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--spb-color-body, #4f5d73);
	background: var(--spb-color-card-bg, #fff);
	border: 1px solid var(--spb-color-border, #e7edf5);
	border-radius: 8px;
	padding: 6px 8px;
}
.spb-wc-size {
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
}
.spb-wc-size .spb-wc-model {
	font-weight: 400;
	color: #a6abb3;
	font-size: 10px;
}
.spb-wc-qty {
	color: var(--spb-color-body, #5f6673);
}
.spb-wc-subtotal {
	font-weight: 700;
	color: var(--spb-color-heading, #0b1736);
}
.spb-wc-remove {
	border: none;
	background: none;
	color: #a6abb3;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
}
.spb-wc-remove:hover {
	color: var(--spb-color-primary, #0878e8);
}
.spb-wholesale-cart-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--spb-color-body, #4f5d73);
	font-weight: 500;
	padding-top: 8px;
	border-top: 1px solid var(--spb-color-border, #e7edf5);
}
.spb-wholesale-cart-total b {
	font-size: 15px;
	color: var(--spb-color-heading, #0b1736);
	font-weight: 700;
}

/* Get Quote badge (count of sizes in the order) */
.spb-get-quote-btn {
	position: relative;
}
.spb-get-quote-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.spb-quote-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #e5484d;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	border: 2px solid var(--spb-color-card-bg, #fff);
	line-height: 1;
}
.spb-quote-badge[hidden] {
	display: none;
}

/* =====================================================================
 * Reference-mockup port — Phase 5 (mobile transposed comparison view)
 * ===================================================================== */

/* Desktop: mobile view hidden entirely. */
.spb-mct-hint,
.spb-mobile-compare-outer {
	display: none;
}

@media ( max-width: 760px ) {
	/* Swap the wide desktop table for the transposed mobile one. */
	.spb-compare-scroll,
	.spb-expand-btn {
		display: none;
	}
	.spb-mct-hint {
		display: block;
		font-size: 11.5px;
		color: #a6abb3;
		font-weight: 400;
		margin: 0 0 10px;
		padding-top: 10px;
	}
	.spb-mobile-compare-outer {
		display: block;
		position: relative;
		margin-left: -16px;
		margin-right: -16px;
		width: calc( 100% + 32px );
	}
	.spb-mobile-compare-wrap {
		display: block;
		position: relative;
		overflow: auto;
		max-height: 78vh;
		border-top: 1px solid var(--spb-color-border, #e7edf5);
		background: var(--spb-color-card-bg, #fff);
		-webkit-overflow-scrolling: touch;
	}
	.spb-mobile-compare-outer .spb-scroll-hint {
		top: 0;
		bottom: 0;
		right: 0;
	}

	.spb-mobile-compare-table {
		border-collapse: separate;
		border-spacing: 0;
		width: max-content;
		min-width: 100%;
	}
	.spb-mobile-compare-table th,
	.spb-mobile-compare-table td {
		border-bottom: 1px solid var(--spb-color-border, #e7edf5);
		border-right: 1px solid var(--spb-color-border, #e7edf5);
		padding: 10px 12px;
		font-size: 12px;
		font-weight: 400;
		color: var(--spb-color-body, #4f5d73);
		white-space: nowrap;
		text-align: center;
		vertical-align: middle;
	}
	.spb-mobile-compare-table td {
		min-width: 96px;
		cursor: default;
	}
	/* Zebra striping by attribute row. */
	.spb-mobile-compare-table tbody tr:nth-child( even ) td,
	.spb-mobile-compare-table tbody tr:nth-child( even ) th {
		background: #f7fbff;
	}

	/* Sticky header row (sizes). */
	.spb-mobile-compare-table thead th {
		position: sticky;
		top: 0;
		z-index: 3;
		background: var(--spb-color-primary, #0878e8);
		color: #fff;
		font-weight: 700;
		padding: 8px 10px;
	}
	/* Sticky first column (attribute names). */
	.spb-mobile-compare-table tbody th {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #eef3f9;
		text-align: left;
		font-weight: 600;
		color: var(--spb-color-body, #5f6673);
		font-size: 10.5px;
		min-width: 76px;
		max-width: 96px;
		white-space: normal;
		line-height: 1.25;
	}
	/* Corner cell stays put in both directions. */
	.spb-mobile-compare-table thead th.spb-mct-corner {
		left: 0;
		z-index: 5;
		text-align: left;
		background: var(--spb-color-primary, #0878e8);
		color: #fff;
	}

	.spb-mct-size-btn {
		all: unset;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1px;
		width: 100%;
	}
	.spb-mct-size-btn .spb-mct-size {
		font-size: 13px;
		font-weight: 700;
		color: #fff;
	}
	.spb-mct-size-btn .spb-mct-model {
		font-size: 9px;
		font-weight: 400;
		color: rgba( 255, 255, 255, .75 );
	}
	/* Keep price/stock markup copied from the desktop cells readable. */
	.spb-mobile-compare-table td .spb-stock-pill {
		font-size: 10px;
	}
	.spb-mobile-compare-table td .woocommerce-Price-amount {
		white-space: nowrap;
	}
}

/* =====================================================================
 * Fixes (1.5.6) — remove WooCommerce's native duplicate variation block.
 * It rendered its own price / availability / description ABOVE the price
 * card, duplicating everything the card already shows. The reference
 * design has a single pricing area, so the native block is suppressed and
 * the plugin's card is the one source of price + stock + specs.
 * ===================================================================== */
.spb-summary .single_variation {
	display: none !important;
}

/* Guided validation (#7): attention pulse on the swatches when a shopper tries
   to add to cart without choosing a size. */
@keyframes spbPromptBlink {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 8, 120, 232, 0 ); }
	50% { box-shadow: 0 0 0 3px rgba( 8, 120, 232, .55 ); }
}
.spb-swatch-group.spb-prompt-blink {
	animation: spbPromptBlink .5s ease-in-out 2;
	border-radius: var(--spb-radius, 12px);
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-swatch-group.spb-prompt-blink {
		animation: none;
		box-shadow: 0 0 0 3px rgba( 8, 120, 232, .5 );
	}
}

/* Sticky-bar size · model sub-line (#12). */
.spb-sticky-sub {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: var(--spb-color-body, #5f6673);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Technical-details diagram (#18) — generated top-view/side-view drawing from
   the selected size's real dimensions. */
.spb-tech-drawing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--spb-color-heading, #0b1736);
}
.spb-tech-drawing svg {
	width: 100%;
	max-width: 260px;
	height: auto;
}
.spb-tech-drawing:empty {
	min-height: 120px;
}

/* Feature parity additions (1.5.9) */

/* Wholesale quantity is now a lot dropdown (#3) — needs room for "2 lots (20 units)". */
select.spb-wholesale-qty {
	width: auto;
	min-width: 150px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 15px;
	padding-right: 30px;
	cursor: pointer;
}

/* Compare-table Action cell: Select + More Info + Compare Price (#2). */
.spb-compare-actions {
	white-space: nowrap;
}
.spb-compare-action-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}
.spb-compare-moreinfo-btn,
.spb-compare-price-link {
	border: none;
	background: none;
	padding: 0;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--spb-color-primary, #0878e8);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	white-space: nowrap;
}
.spb-compare-moreinfo-btn:hover,
.spb-compare-price-link:hover {
	color: var(--spb-color-primary-hover, #056acb);
}

/* ✓ / ✗ accessory columns (#2) — only appear when the data is per-variation. */
.spb-acc-cell {
	text-align: center;
}
.spb-acc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Included → blue check-in-circle; not included → grey slash-in-circle
 * (matches product_v4_koko_sd.html .acc-yes / .acc-no). */
.spb-acc-check {
	color: #0878e8;
}
.spb-acc-check svg {
	width: 16px;
	height: 16px;
	display: block;
}
.spb-acc-x {
	color: #98a2b3;
}
.spb-acc-x svg {
	width: 15px;
	height: 15px;
	display: block;
}
.spb-acc-dash {
	color: #a6abb3;
}

/* =====================================================================
 * Card / gallery polish (1.6.0) — reference parity
 * ===================================================================== */

/* Swatches: the theme was inflating the height (~89px) and forcing UPPERCASE.
   Reset to the reference's compact box + normal casing. */
.spb-summary .spb-swatch-btn {
	height: 56px !important;
	min-height: 0 !important;
	padding: 8px 6px !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
}
.spb-summary .spb-swatch-btn .spb-sw-size,
.spb-summary .spb-swatch-btn .spb-sw-model {
	text-transform: none !important;
	letter-spacing: normal !important;
}
.spb-summary .spb-swatch-btn .spb-sw-size {
	font-size: 12.5px !important;
	font-weight: 600 !important;
}
.spb-summary .spb-swatch-btn .spb-sw-model {
	font-size: 9px !important;
	font-weight: 400 !important;
}

/* Gallery zoom button: centre the icon inside its circle. */
.spb-zoom-hint {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Brand logo chips in the label row (placeholders until real logos exist). */
.spb-meta-logo {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--spb-color-border, #e7edf5);
	border-radius: 6px;
	background: var(--spb-color-card-bg, #fff);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--spb-color-heading, #0b1736);
	text-transform: uppercase;
}

/* Placeholder thumbnail strip under the main image (shown until real gallery
   images are uploaded, so the layout matches the reference). */
.spb-thumb-row--placeholder {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}
.spb-thumb--placeholder {
	width: 64px;
	height: 64px;
	border: 1px solid var(--spb-color-border, #e7edf5);
	border-radius: 8px;
	background: repeating-linear-gradient( 45deg, #f3f5f8, #f3f5f8 6px, #eef1f5 6px, #eef1f5 12px );
	flex: none;
}

/* =====================================================================
 * Compare-table restyle to match the reference (1.6.1)
 * ===================================================================== */

/* Header: light blue background + dark text (was solid #0878e8 + white). */
.spb-compare-table thead th {
	background: #e9f1fc !important;
	color: #1e3a5f !important;
	border-bottom: 1px solid #d3e3f7 !important;
	border-right: 1px solid #dce8f8 !important;
	font-weight: 700 !important;
}
.spb-compare-table thead th:first-child {
	background: #e9f1fc !important;
}
.spb-compare-table .spb-sort-icon {
	color: #6f8db5;
}

/* Search box: strip the theme's border / shadow / background from the inner
   input so the whole control reads as ONE clean box with the icon inside. */
.spb-filter-search input {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}
.spb-filter-search {
	height: 44px !important;
}

/* "Buy Now ↑" action button — arrow after the label. */
.spb-compare-select-btn svg,
.spb-compare-notify-btn svg {
	width: 12px;
	height: 12px;
	margin-left: 5px;
	vertical-align: -1px;
}

/* B2B column: "₹X/unit" + "MOQ n". */
.spb-compare-wholesale-unit {
	font-weight: 700;
	color: var(--spb-color-heading, #0b1736);
	white-space: nowrap;
}
.spb-compare-wholesale-unit .spb-unit-sfx {
	font-weight: 400;
	font-size: 10px;
	color: var(--spb-color-body, #5f6673);
}
.spb-compare-moq {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	color: var(--spb-color-primary, #0878e8);
}

/* Row image placeholder thumbnail (until real images exist). */
.spb-compare-thumb-ph {
	display: inline-block;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	border: 1px solid var(--spb-color-border, #e7edf5);
	background: repeating-linear-gradient( 45deg, #f3f5f8, #f3f5f8 5px, #eef1f5 5px, #eef1f5 10px );
}

/* Stock column: pill + lead-time lines. */
.spb-compare-stock {
	white-space: nowrap;
}
.spb-stock-lead {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.3;
	color: var(--spb-color-body, #5f6673);
}

/* "Filters" toggle button. */
.spb-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	background: var(--spb-color-card-bg, #fff);
	color: var(--spb-color-heading, #0b1736);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	flex: none;
}
.spb-filters-toggle svg {
	width: 15px;
	height: 15px;
	color: var(--spb-color-body, #5f6673);
}
.spb-filters-toggle:hover,
.spb-filters-toggle.active {
	border-color: var(--spb-color-primary, #0878e8);
}
.spb-filters-toggle.active {
	background: var(--spb-color-chip-bg, #eaf6ff);
	color: var(--spb-color-primary, #0878e8);
}

/* "Sort by" dropdown. */
.spb-sort-by {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--spb-color-body, #5f6673);
	white-space: nowrap; /* keep the "Sort by" label on one line, never wrapped */
}
.spb-sort-by > span {
	white-space: nowrap;
	flex: 0 0 auto;
}
.spb-sort-select {
	height: 44px;
	border: 1.5px solid var(--spb-color-border, #e7edf5);
	border-radius: 10px;
	padding: 0 32px 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--spb-color-heading, #0b1736);
	background-color: var(--spb-color-card-bg, #fff);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 15px;
}

/* Collapsible filter groups (toggled by the Filters button). */
.spb-filter-groups.spb-collapsed {
	display: none;
}

/* Selected-size highlight in the mobile transposed compare view (reverse sync). */
.spb-mobile-compare-table td.spb-mct-selected,
.spb-mobile-compare-table tbody th.spb-mct-selected {
	background: var(--spb-color-chip-bg, #eaf6ff) !important;
}
.spb-mobile-compare-table thead th.spb-mct-selected {
	box-shadow: inset 0 0 0 2px var(--spb-color-primary, #0878e8);
}

/* =====================================================================
 * Sticky purchase bar — clean single row matching the reference (1.6.5).
 * Fixes the full-width button that was eating the whole row.
 * Layout: thumb -> details -> price -> compact CTA.
 * ===================================================================== */
.spb-sticky-inner {
	max-width: 1600px !important;
	gap: 14px !important;
	padding: 10px 32px !important;
	align-items: center !important;
}
.spb-sticky-thumb {
	width: 46px !important;
	height: 46px !important;
	flex: 0 0 auto !important;
	border-radius: 8px;
	border: 1px solid var(--spb-color-border, #e7edf5);
	background: #fff;
	object-fit: contain;
}
.spb-sticky-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.spb-sticky-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--spb-color-heading, #0b1736) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.25;
}
.spb-sticky-sub {
	font-size: 12px;
	color: var(--spb-color-body, #5f6673);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
.spb-sticky-price {
	flex: 0 0 auto !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--spb-color-heading, #0b1736) !important;
	white-space: nowrap;
	margin-right: 4px;
}
.spb-sticky-price del,
.spb-sticky-price .woocommerce-Price-amount del {
	font-size: 13px;
	font-weight: 400;
	color: #98a2b3;
	margin-right: 4px;
}
/* The critical fix: compact button, NOT full width. */
.spb-sticky-btn {
	width: auto !important;
	flex: 0 0 auto !important;
	min-width: 148px;
	height: 46px !important;
	padding: 0 26px !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

@media ( max-width: 760px ) {
	.spb-sticky-inner {
		padding: 8px 14px !important;
		gap: 10px !important;
	}
	.spb-sticky-price {
		font-size: 15px !important;
	}
	/* Keep the row: on phones the model sub-line can drop, but image, title,
	   price and CTA stay in one line. */
	.spb-sticky-sub {
		display: none;
	}
	.spb-sticky-btn {
		min-width: 0;
		padding: 0 18px !important;
		height: 42px !important;
	}
}

/* =====================================================================
 * Price card — reference visual hierarchy (1.6.6)
 * size·model note (top-right) -> price -> In-Stock -> sub-note -> qty -> CTA
 * ===================================================================== */
.spb-price-card-head {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 16px;
	margin-bottom: 2px;
}
.spb-selected-note {
	font-size: 12px;
	font-weight: 500;
	color: var(--spb-color-body, #5f6673);
	text-align: right;
}
/* Wholesale "/unit" suffix on the amount. */
.spb-price-tabs-amount .spb-unit-sfx {
	font-size: 15px;
	font-weight: 400;
	color: var(--spb-color-body, #5f6673);
}
/* "In Stock" — small, blue, with a check-circle icon (was green "25 in stock"). */
.spb-stock-line {
	margin: 6px 0 0 !important;
}
.spb-stock-ok {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--spb-color-primary, #0878e8);
}
.spb-stock-ok svg {
	width: 15px;
	height: 15px;
	flex: none;
}
.spb-stock-no {
	font-size: 12.5px;
	font-weight: 600;
	color: #e5484d;
}
.spb-sub-note {
	font-size: 11.5px;
	color: #98a2b3;
	margin: 8px 0 0;
	line-height: 1.5;
}
/* Retail QUANTITY label — the native WooCommerce quantity has none. */
.spb-price-tabs-card:not(.spb-mode-wholesale) .quantity::before {
	content: "Quantity";
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--spb-color-body, #5f6673);
	margin: 14px 0 6px;
}

/* Rating beside the brand name (1.6.7). */
.spb-brand-row {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.spb-rating-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.spb-stars {
	display: inline-flex;
	gap: 1px;
	line-height: 1;
}
.spb-star {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #f4b740;
	stroke-width: 1.5;
}
.spb-star.is-filled {
	fill: #f4b740;
	stroke: none;
}
.spb-rating-text {
	font-size: 12px;
	font-weight: 500;
	color: var(--spb-color-body, #5f6673);
}

/* =====================================================================
 * Retail/Wholesale tabs with icons + wholesale hierarchy (1.6.8)
 * ===================================================================== */
.spb-price-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.spb-price-tab svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Wholesale amount: same hierarchy/sizes as the Retail tab (.spb-price-mrp /
   .spb-price-off / .spb-price-now) so both tabs read identically — struck price
   13px, pill "Save" badge 10.5px, big price 32px. */
.spb-wh-was {
	font-size: 13px;
	font-weight: 500;
	color: #a6abb3;
	text-decoration: line-through;
}
.spb-wh-save {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eafbf1;
	color: #15803d;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .01em;
	vertical-align: middle;
}
.spb-wh-now {
	display: block;
	margin-top: 2px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--spb-color-heading, #0b1736);
	line-height: 1;
}
.spb-wh-now .spb-unit-sfx {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--spb-color-body, #5f6673);
}

/* Wholesale quantity dropdown = its own full-width row. */
.spb-wholesale-qty-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--spb-color-body, #5f6673);
	margin: 12px 0 6px;
}
select.spb-wholesale-qty {
	/* Content-width, not full-width — just wide enough for "1 lot (10 units)".
	   The chevron + padding-right come from the rule above (select.spb-wholesale-qty). */
	width: auto !important;
	min-width: 150px !important;
	max-width: 100%;
}

/* The two CTAs side by side (Add Size to Order | Get Quote). */
.spb-wholesale-action-row {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.spb-wholesale-action-row .spb-add-size-btn,
.spb-wholesale-action-row .spb-get-quote-btn {
	flex: 1 1 0;
	min-width: 0;
	height: 50px;
	margin-top: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.spb-add-size-btn svg,
.spb-get-quote-btn svg,
.spb-wholesale-add-more-btn svg {
	width: 15px;
	height: 15px;
	flex: none;
}
/* Get Quote = secondary (light) button, distinct from the blue Add Size. */
.spb-get-quote-btn {
	background: #f2f4f7 !important;
	border: 1px solid var(--spb-color-border, #e7edf5) !important;
	color: var(--spb-color-heading, #0b1736) !important;
}
/* Dim the disabled Get Quote via muted text/icon rather than opacity, so the
   red count badge in the corner stays fully saturated even while locked. */
.spb-get-quote-btn:disabled {
	opacity: 1;
	background: #f2f4f7 !important;
	color: #98a2b3 !important;
	cursor: not-allowed;
}

/* "Add more products" — full-width light-blue button below the cart. */
.spb-wholesale-add-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	margin-top: 10px;
	border-radius: var(--spb-button-radius, 10px);
	background: var(--spb-color-chip-bg, #eaf6ff);
	border: 1.5px solid #d2e7f6;
	color: var(--spb-color-primary, #0878e8);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}
.spb-wholesale-add-more-btn[hidden] {
	display: none;
}

/* =====================================================================
 * Compare toolbar: contained card + evenly-spaced row (1.6.9)
 * Heading + intro stay ABOVE; the Filters/Search/Sort/Unit row sits INSIDE
 * a light rounded container, matching the reference.
 * ===================================================================== */
.spb-compare-toolbar {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
	padding: 18px 20px !important;
	background: #f4f7fc !important;
	border: 1px solid #e3ebf6 !important;
	border-radius: 14px !important;
}
.spb-compare-toolbar-row2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	width: 100%;
}
.spb-compare-toolbar-row2 .spb-filter-search {
	flex: 1 1 240px;
	max-width: 420px;
	height: 44px !important;
	background: var(--spb-color-card-bg, #fff);
}
.spb-filters-toggle,
.spb-sort-by,
.spb-unit-toggle {
	flex: 0 0 auto;
}
.spb-sort-select {
	min-width: 180px;
}
.spb-filter-result {
	width: 100%;
	margin-top: 10px !important;
	font-size: 12px;
	color: var(--spb-color-body, #5f6673);
}
/* Filter groups (price slider / chips) sit full-width above the row when expanded. */
.spb-compare-toolbar .spb-filter-groups {
	width: 100%;
	margin-bottom: 2px;
}

/* Vertical column dividers + first-column Diameter/Model styling (1.7.0). */
.spb-compare-table th,
.spb-compare-table td {
	border-right: 1px solid #eef2f7;
}
.spb-compare-table th:last-child,
.spb-compare-table td:last-child {
	border-right: none;
}
/* First-column header: shape word (Diameter/Size) stacked over "Model",
 * matching product_v4_koko_sd.html .th-size-stack. */
.spb-th-size-stack {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
}
.spb-th-size-stack .spb-th-sz {
	font-size: 9.5px;
}
.spb-th-size-stack .spb-th-md {
	font-size: 8.5px;
	font-weight: 600;
	opacity: .7;
}
/* Legacy inline sub-label kept for safety if referenced elsewhere. */
.spb-th-sub {
	display: block;
	font-size: 8.5px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: .7;
	margin-top: 1px;
}
/* First-column body cell: size value over "Model 28101", matching
 * product_v4_koko_sd.html .size-cell. */
.spb-size-cell {
	display: flex;
	align-items: flex-start;
}
.spb-size-cell .spb-size-txt {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.spb-size-cell .spb-sz {
	font-size: 12.5px;
	font-weight: 600;
	color: #101828;
}
.spb-td-model {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: #98a2b3;
	margin-top: 1px;
}

/* =====================================================================
 * 1.7.2 — Compare-table alignment pass. Matches product_v4_koko_sd.html:
 * tighter cell spacing, smaller uppercase headers, a padded + left-aligned
 * first (Size/Model) column, the reference steel-blue "Buy Now" CTA, and a
 * left-aligned green In-Stock cell with a check icon. Appended last so it
 * wins over the earlier stacked compare-table override blocks above.
 * ===================================================================== */

/* Body cells — 12px text on tighter 10px padding (ref .variant-table td). */
.spb-compare-table td {
	padding: 10px 12px !important;
	font-size: 12px !important;
	color: #494e57 !important;
}

/* Header cells — small uppercase labels (ref .variant-table thead th). */
.spb-compare-table thead th {
	padding: 14px 12px !important;
	font-size: 10px !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
}

/* First column (Size / Model): real left padding + left alignment, with a
   bold dark size value over the muted model line (ref .size-cell). */
.spb-compare-table th:first-child,
.spb-compare-table td:first-child {
	text-align: left !important;
	padding-left: 18px !important;
	padding-right: 14px !important;
}
.spb-compare-table td:first-child {
	font-weight: 600 !important;
	color: #0b1736 !important;
}

/* Stock cell: left-aligned, green In-Stock chip (with check icon) + gray leads. */
.spb-compare-table td.spb-compare-stock {
	text-align: left !important;
}
.spb-compare-stock .spb-stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 700;
}
.spb-compare-stock .spb-stock-pill svg {
	width: 12px;
	height: 12px;
	flex: none;
}
.spb-stock-pill.in-stock {
	background: #e7f7ee !important;
	color: #16a34a !important;
}

/* "Buy Now" CTA: smaller, reference steel-blue square-radius button
   (was a large bright-blue pill). */
.spb-compare-select-btn,
.spb-compare-notify-btn {
	background: #2f5d8c !important;
	border-radius: 6px !important;
	padding: 6px 14px !important;
	font-size: 11.5px !important;
	text-transform: none !important;
}
.spb-compare-select-btn:hover,
.spb-compare-notify-btn:hover {
	background: #244a70 !important;
}
/* Left-align the Buy Now + More Info + Compare Price stack (ref .buy-cell). */
.spb-compare-table td.spb-compare-actions {
	text-align: left !important;
}
.spb-compare-action-links {
	align-items: flex-start;
}

/* =====================================================================
 * 1.7.2 (cont.) — Retail price stacked onto two lines, action links kept
 * title-case, and the "Specifications" card restyled to the reference
 * .info-table (product_v4_koko_sd.html). Appended last to win the cascade.
 * ===================================================================== */

/* Retail price: sale amount bold on top, struck MRP below (ref .price-compact).
   WooCommerce prints <del> (regular) then <ins> (sale); order:-1 lifts the sale
   above it. Non-sale rows just show the single amount, unchanged. */
.spb-price-stack {
	display: inline-flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.25;
}
.spb-price-stack ins {
	order: -1;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 700;
	color: #0b1736;
}
.spb-price-stack del {
	font-size: 10px;
	font-weight: 500;
	color: #a6abb3;
	text-decoration: line-through;
}

/* Action links: keep "More Info" / "Compare Price" title-case (the theme was
   upper-casing the <button>), 500 weight, with a little more room under the CTA. */
.spb-compare-moreinfo-btn,
.spb-compare-price-link {
	text-transform: none !important;
	font-weight: 500;
}
.spb-compare-action-links {
	margin-top: 8px;
	gap: 3px;
}

/* "Specifications" table → reference .info-table: a white, bordered, rounded
   inner card with a grey label column and dark bold values, sitting on the
   grey wrap card. */
.spb-spec-table-wrap {
	background: #f2f2f1 !important;
	padding: 22px !important;
}
.spb-spec-table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid #e7edf5 !important;
	border-radius: 10px !important;
	overflow: hidden;
	background: #ffffff;
}
.spb-spec-table th,
.spb-spec-table td {
	padding: 10px 16px !important;
	font-size: 12.5px !important;
	border-right: 1px solid #e7edf5 !important;
	border-bottom: 1px solid #e7edf5 !important;
	vertical-align: top;
}
.spb-spec-table th:last-child,
.spb-spec-table td:last-child {
	border-right: none !important;
}
.spb-spec-table tr:last-child th,
.spb-spec-table tr:last-child td {
	border-bottom: none !important;
}
.spb-spec-table th {
	width: 220px !important;
	background: #f2f2f1 !important;
	color: #5f6673 !important;
	font-weight: 500 !important;
	text-transform: none !important;
}
.spb-spec-table td {
	background: #ffffff !important;
	color: #0b1736 !important;
	font-weight: 600 !important;
}
.spb-spec-note {
	color: #5f6673 !important;
	line-height: 1.6;
}

/* IDEAL FOR: constrain the value into a compact ~two-line block instead of one
   long line (ref .idealfor-cell). The inline-block wrapper respects max-width
   and wraps; the <td> itself would ignore it without table-layout:fixed. */
.spb-compare-idealfor .spb-idealfor-wrap {
	display: inline-block;
	max-width: 100px;
	white-space: normal;
	line-height: 1.35;
	text-align: center;
}

/* =====================================================================
 * 1.7.2 (cont.) — Retail buy-box price hierarchy to match the reference
 * fmtPriceLarge: small struck MRP + green "X% off" pill on top, then the
 * big current price. (frontend.js retailAmountHtml builds this markup.)
 * ===================================================================== */
.spb-price-tabs-amount .spb-price-mrp-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.spb-price-tabs-amount .spb-price-mrp {
	font-size: 13px;
	font-weight: 500;
	color: #a6abb3;
	text-decoration: line-through;
	letter-spacing: normal;
}
.spb-price-tabs-amount .spb-price-off {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 700;
	color: #15803d;
	background: #eafbf1;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: .01em;
}
.spb-price-tabs-amount .spb-price-now {
	display: block;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: #0b1736;
	line-height: 1;
}

/* =====================================================================
 * 1.7.5 — Clear link moved to the top-right of the swatch grid, and the
 * compare toolbar controls forced onto one vertically-centered line.
 * ===================================================================== */

/* WooCommerce's "Clear" link sits in the last variation value cell, after the
   swatch grid. Make that cell a flex column and order the link to the TOP,
   right-aligned, so it reads as a header-level "CLEAR" above the swatches
   (the hidden native <select> is position:absolute, so it's not a flex item). */
.spb-summary table.variations td.value {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
}
.spb-summary table.variations td.value .reset_variations {
	order: -1;
	align-self: flex-end;
	position: static !important;
	width: auto !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #667085 !important;
}

/* Compare toolbar: every control on one line, uniform 44px height, centered. */
.spb-compare-toolbar-row2 {
	align-items: center !important;
}
.spb-compare-toolbar-row2 > .spb-filters-toggle,
.spb-compare-toolbar-row2 > .spb-filter-search,
.spb-compare-toolbar-row2 > .spb-sort-by,
.spb-compare-toolbar-row2 > .spb-unit-toggle {
	height: 44px !important;
	box-sizing: border-box;
	align-self: center;
}
.spb-compare-toolbar-row2 > .spb-sort-by {
	display: inline-flex;
	align-items: center;
}

/* =====================================================================
 * 1.7.6 — Compare-table availability = reference fmtAvailability: colored
 * text + icon (NO pill background), left-aligned. in-stock blue (same as the
 * buy-box), made-to-order grey, out-of-stock red.
 * ===================================================================== */
.spb-compare-stock .spb-stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	font-size: 11.5px;
	font-weight: 700;
}
.spb-compare-stock .spb-stock-pill svg {
	width: 12px;
	height: 12px;
	flex: none;
}
.spb-compare-stock .spb-stock-pill.in-stock { color: #0878e8 !important; }
.spb-compare-stock .spb-stock-pill.made-to-order { color: #5f6673 !important; }
.spb-compare-stock .spb-stock-pill.out-stock { color: #e5484d !important; }

/* =====================================================================
 * 1.7.8 — Bigger image-zoom lightbox with proper, inside-the-frame nav
 * circles; and a clearly-visible ⤢ icon on the compare-table zoom button.
 * ===================================================================== */

/* Zoom lightbox: enlarge the image (it IS the zoomed view). */
.spb-zoom-content {
	max-width: 94vw !important;
	max-height: 94vh !important;
}
.spb-zoom-content img {
	height: 84vh !important;
	width: auto !important;
	max-width: 92vw !important;
	max-height: 88vh !important;
	object-fit: contain;
	border-radius: 10px;
}
/* Close + prev/next: real centered circles, moved INSIDE the frame edges
   (were floating outside at -56px with off-centre glyphs). */
.spb-zoom-close,
.spb-zoom-nav {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	/* Locked 36px square so border-radius:50% is always a true circle. */
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
	aspect-ratio: 1 / 1;
	flex: none;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 10px rgba(15, 17, 20, .28);
	color: #0b1736;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.spb-zoom-close { top: 12px !important; right: 12px !important; }
.spb-zoom-prev  { left: 12px !important; right: auto; top: 50%; transform: translateY(-50%); }
.spb-zoom-next  { right: 12px !important; left: auto; top: 50%; transform: translateY(-50%); }

/* Compare-table expand/zoom button (bottom-right): make its ⤢ icon clearly
   visible (was reading as an empty white square). */
.spb-expand-btn { color: #0b1736 !important; }
.spb-expand-btn svg {
	width: 18px !important;
	height: 18px !important;
	display: block;
	stroke: #0b1736 !important;
	fill: none !important;
}
.spb-expand-btn svg polyline,
.spb-expand-btn svg line,
.spb-expand-btn svg path {
	stroke: #0b1736 !important;
	fill: none !important;
}

/* =====================================================================
 * 1.7.10 — Compare toolbar: lock every control (Filters, Search, Sort by +
 * its dropdown, Feet/Meters) to one vertically-centered baseline. The
 * "Sort by" label now lives in its own 44px centered box so its text lines
 * up exactly with the dropdown's text.
 * ===================================================================== */
.spb-compare-toolbar-row2 {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
}
.spb-compare-toolbar-row2 > * {
	align-self: center !important;
}
.spb-compare-toolbar-row2 > .spb-filters-toggle,
.spb-compare-toolbar-row2 > .spb-filter-search,
.spb-compare-toolbar-row2 > .spb-sort-by,
.spb-compare-toolbar-row2 > .spb-unit-toggle {
	height: 44px !important;
	box-sizing: border-box;
}
.spb-sort-by {
	display: inline-flex !important;
	align-items: center !important;
	height: 44px !important;
}
.spb-sort-by > span {
	display: inline-flex;
	align-items: center;
	height: 44px;
	line-height: 1;
}
.spb-sort-select {
	height: 44px !important;
	line-height: normal;
}

/* =====================================================================
 * 1.7.13 — Mobile compare stock chip matches desktop (small icon, colored
 * text, no green pill); gallery + zoom nav arrows now use SVG chevrons that
 * center perfectly in their circles.
 * ===================================================================== */
@media ( max-width: 760px ) {
	.spb-mobile-compare-table td .spb-stock-pill {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		background: none;
		border-radius: 0;
		font-size: 10px;
		font-weight: 700;
	}
	.spb-mobile-compare-table td .spb-stock-pill svg {
		width: 11px;
		height: 11px;
		flex: none;
	}
	.spb-mobile-compare-table td .spb-stock-pill.in-stock { color: #0878e8; }
	.spb-mobile-compare-table td .spb-stock-pill.made-to-order { color: #5f6673; }
	.spb-mobile-compare-table td .spb-stock-pill.out-stock { color: #e5484d; }
}
.spb-stage-nav svg { width: 16px; height: 16px; }
.spb-zoom-nav svg { width: 18px; height: 18px; }

/* =====================================================================
 * 1.7.14 — Quantity-picker blink guide + a baked-in (background-image)
 * expand icon on the compare-table full-screen button.
 * ===================================================================== */

/* After a size is chosen, blink the quantity control's border blue (JS adds
   .spb-qty-blink for a moment). Works for the wholesale lot dropdown and the
   retail native qty input alike. */
@keyframes spbQtyBlink {
	0%, 100% { border-color: var(--spb-color-border, #e7edf5); box-shadow: 0 0 0 0 rgba( 8, 120, 232, 0 ); }
	50%      { border-color: #0878e8; box-shadow: 0 0 0 3px rgba( 8, 120, 232, .22 ); }
}
.spb-qty-blink {
	animation: spbQtyBlink 1s ease-in-out 2;
}

/* The compare-table full-screen button carries its ⤢ icon as a background
   image, so it shows even if a security/optimizer plugin strips inline SVGs
   (the likely reason the box kept rendering empty). */
.spb-expand-btn {
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1736' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 18px !important;
}
.spb-expand-btn:hover {
	background-color: #eaf3fb !important;
}

/* Retail quantity dropdown (.spb-qty-select, built from the native qty input):
   give it the same down-chevron as the wholesale lot dropdown. */
.spb-qty-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 15px !important;
	padding-right: 34px !important;
}

/* =====================================================================
 * 1.7.16 — Sticky bar price + CTA to match the reference (.sbb-price /
 * .sbb-cta): sale amount first (16px/700), struck MRP after (11.5px), no
 * decimals; "Add to Cart" title-case button.
 * ===================================================================== */
.spb-sticky-price {
	display: flex !important;
	align-items: baseline;
	gap: 6px;
	flex: none;
}
.spb-sticky-now {
	font-size: 16px;
	font-weight: 700;
	color: #0b1736;
}
.spb-sticky-was {
	font-size: 11.5px;
	font-weight: 400;
	color: #a6abb3;
	text-decoration: line-through;
}
.spb-sticky-btn {
	text-transform: none !important;
}

/* =====================================================================
 * 1.7.17 — The "Sort by" control is a <label>, and the theme adds a default
 * margin-bottom to labels. In a center-aligned flex row that bottom margin
 * pushes the label's content UP off the centre line (why the Sort by dropdown
 * sat higher than Filters / Search / Feet-Meters). Zero the margins on every
 * toolbar control so they share one horizontal line.
 * ===================================================================== */
.spb-compare-toolbar-row2 > .spb-filters-toggle,
.spb-compare-toolbar-row2 > .spb-filter-search,
.spb-compare-toolbar-row2 > .spb-sort-by,
.spb-compare-toolbar-row2 > .spb-unit-toggle {
	margin: 0 !important;
	align-self: center !important;
}
.spb-sort-by,
.spb-sort-by > span,
.spb-sort-by .spb-sort-select {
	margin: 0 !important;
}

/* =====================================================================
 * 1.7.18 — Restored product description section (rendered where the removed
 * WooCommerce tabs used to be).
 * ===================================================================== */
.spb-description {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e7edf5;
	color: #4f5d73;
	font-size: 14px;
	line-height: 1.7;
}
.spb-description > :first-child {
	margin-top: 0;
}
.spb-description img {
	max-width: 100%;
	height: auto;
}

/* =====================================================================
 * 1.7.20 — Batch UI refinements (appended last so these win over the
 * layered override blocks above).
 * ===================================================================== */

/* (1) "Specifications" card colour = "Technical Details" card colour (#f3f4f6). */
.spb-spec-table-wrap { background: #f3f4f6 !important; }
.spb-spec-table th { background: #f3f4f6 !important; }

/* (3) Sticky bar: price and CTA on one horizontally-centred row.
 * (4) Sticky bar thumbnail +20% (46px -> 55px). */
.spb-sticky-inner { align-items: center !important; flex-wrap: nowrap !important; }
.spb-sticky-thumb { width: 55px !important; height: 55px !important; }
.spb-sticky-price {
	align-self: center !important;
	align-items: center !important;
}
.spb-sticky-btn { align-self: center !important; }

/* (7) Wholesale quantity dropdown: compact like the retail one, not stretched
 * to the full card width (the builder is a column flex, so break the stretch). */
.spb-wholesale-builder > .spb-wholesale-qty,
select.spb-wholesale-qty {
	align-self: flex-start !important;
	width: auto !important;
	min-width: 96px !important;
}

/* (8) Retail/Wholesale toggle: symmetric sliding indicator so the inset is
 * equal on both sides whether Retail or Wholesale is active. Pairs with the
 * frontend.js transform: translateX(calc(100% + 4px)) for the wholesale tab. */
.spb-price-tab-indicator {
	top: 4px !important;
	bottom: 4px !important;
	left: 4px !important;
	width: calc(50% - 6px) !important;
}

/* (5) Not-selected / disabled state — retail "Add to Cart" (WooCommerce marks it
 * .disabled / .wc-variation-selection-needed until a variation is chosen) and
 * wholesale "Add Size to Order": medium grey instead of the active blue. */
.spb-summary .single_add_to_cart_button.disabled,
.spb-summary .single_add_to_cart_button.wc-variation-selection-needed,
.spb-summary .single_add_to_cart_button:disabled,
.spb-add-size-btn:disabled {
	background: #cbd5e1 !important;
	background-color: #cbd5e1 !important;
	border-color: #cbd5e1 !important;
	color: #475569 !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

/* (6) Wholesale "Get Quote" — reference dedicated navy (--btn-quote #0b1736),
 * disabled-grey until sizes are added. Only renders when Telegram quotes are
 * configured (SPB_Telegram::is_enabled); enable that in the plugin settings if
 * the button doesn't appear. */
.spb-wholesale-action-row .spb-get-quote-btn {
	background: #0b1736 !important;
	border: none !important;
	color: #ffffff !important;
	width: auto !important;
	margin-top: 0 !important;
}
.spb-wholesale-action-row .spb-get-quote-btn:hover:not(:disabled) {
	background: #16294a !important;
	color: #ffffff !important;
}
.spb-wholesale-action-row .spb-get-quote-btn:disabled {
	background: #cbd5e1 !important;
	border: none !important;
	color: #475569 !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

/* Compare table: tapping a row selects that size, and the row STAYS highlighted
 * afterwards (matching the reference aria-checked row) — light-blue fill across
 * the row plus a blue left accent on the sticky first (Diameter/Model) cell.
 * A 4px transparent left border is always reserved so selecting doesn't shift
 * the layout; only its colour changes. The brief blink above still plays. */
.spb-compare-table tbody td:first-child {
	border-left: 4px solid transparent;
}
.spb-compare-table tbody .spb-compare-row.spb-row-selected td {
	background: #eaf3fb !important;
}
.spb-compare-table tbody .spb-compare-row.spb-row-selected td:first-child {
	background: #eaf3fb !important;
	border-left-color: #1768c2 !important;
}

/* =====================================================================
 * 1.7.23 — Wholesale/B2B price alignment.
 * ===================================================================== */

/* Price-card, Wholesale tab: keep the price LEFT-aligned, identical to the
 * Retail tab (an earlier pass centred it, which made the two tabs inconsistent
 * — Retail left, Wholesale centred). Force left so both read the same. */
.spb-price-tabs-card.spb-mode-wholesale .spb-price-tabs-amount,
.spb-price-tabs-card.spb-mode-wholesale .spb-price-tabs-amount .spb-wh-now {
	text-align: left !important;
}

/* Sticky bar (reinforced): keep the price and the CTA — including the
 * wholesale "Get Quote" state — vertically centred on the same row and the
 * price always visible (no clipping/wrap). */
.spb-sticky-inner {
	align-items: center !important;
	flex-wrap: nowrap !important;
}
.spb-sticky-price {
	align-self: center !important;
	align-items: center !important;
	display: flex !important;
	white-space: nowrap;
	overflow: visible;
}
.spb-sticky-btn {
	align-self: center !important;
}

/* =====================================================================
 * 1.7.25 — Sticky bar price ↔ CTA vertical centring fix.
 * The button had a fixed height with padding:0 but no flex centring, so the
 * "Add to Cart" label rode high/low inside it and read as misaligned next to
 * the price. Make the button centre its own label, restore the price's
 * sale-over-MRP baseline, and zero any stray vertical margins so both blocks
 * sit on the exact same centre line as .spb-sticky-inner (align-items:center).
 * ===================================================================== */
.spb-sticky-inner {
	align-items: center !important;
}
.spb-sticky-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	line-height: 1 !important;
	margin: 0 !important;
	vertical-align: middle !important;
}
.spb-sticky-price {
	display: inline-flex !important;
	align-items: baseline !important;
	align-self: center !important;
	line-height: 1 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.spb-sticky-price .spb-sticky-now,
.spb-sticky-price .spb-sticky-was {
	line-height: 1 !important;
}

/* Row hover must tint the sticky first (Diameter/Model) column too — that cell
 * has its own opaque background (needed for the sticky column), which was
 * hiding the hover colour on it while the rest of the row highlighted. A
 * selected row still keeps its stronger selected colour (higher specificity). */
.spb-compare-table tbody tr:hover td:first-child {
	background: var(--spb-color-swatch-selected-bg, #eaf6ff) !important;
}

/* Phone view: gallery arrows should be smaller, more subtle (lower opacity),
 * and sit closer to each edge so they intrude less over the product photo. */
@media ( max-width: 760px ) {
	.spb-stage-nav {
		width: 27px !important;
		height: 27px !important;
		min-width: 27px !important;
		min-height: 27px !important;
		max-width: 27px !important;
		max-height: 27px !important;
		opacity: .6;
		box-shadow: 0 1px 4px rgba(15, 17, 20, .12);
	}
	.spb-stage-nav svg {
		width: 13px !important;
		height: 13px !important;
	}
	.spb-stage-prev { left: 3px !important; }
	.spb-stage-next { right: 3px !important; }
}

/* Mobile compare chart: frame the product thumbnail (the desktop framing is
 * scoped to .spb-compare-thumb, which the transposed cells don't carry) so the
 * image row looks the same as the desktop chart — a small, contained, framed
 * product photo instead of a raw full-width image. */
@media ( max-width: 760px ) {
	.spb-mobile-compare-table td img {
		display: block;
		margin: 0 auto;
		width: 54px;
		height: 54px;
		object-fit: contain;
		background: #fff;
		border: 1px solid #e7edf5;
		border-radius: 8px;
		padding: 3px;
	}
}

/* Retail and Wholesale quantity controls share one visual treatment. The
 * Retail prompt uses aria-disabled instead of the native disabled attribute,
 * allowing it to guide shoppers back to the size swatches when pressed. */
.spb-qty-select,
select.spb-wholesale-qty {
	width: auto !important;
	min-width: 190px !important;
	height: 44px !important;
	padding: 0 34px 0 14px !important;
	border: 1.5px solid var(--spb-color-border, #e7edf5) !important;
	border-radius: 10px !important;
	opacity: 1 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--spb-color-heading, #0b1736) !important;
	background-color: var(--spb-color-card-bg, #fff) !important;
	background-position: right 12px center !important;
	background-size: 15px !important;
	cursor: pointer !important;
}

/* Keep the wholesale actions concise and on one line at every width. */
.spb-wholesale-action-row .spb-add-size-btn,
.spb-wholesale-action-row .spb-get-quote-btn {
	height: 48px !important;
	padding: 0 14px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
}

/* Phone layout refinements. Keep these at the end so they override the
 * plugin's layered desktop/reference styles without affecting larger screens. */
@media ( max-width: 760px ) {
	/* Full-bleed, square gallery image; thumbnails retain a 12px breathing zone. */
	.spb-product {
		padding: 0 !important;
	}
	.spb-gallery {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.spb-stage,
	.spb-stage-slide,
	.spb-stage-slide img {
		border: 0 !important;
		border-radius: 0 !important;
	}
	.spb-thumb-row {
		margin: 12px !important;
	}
	.spb-thumb,
	.spb-thumb.active,
	.spb-thumb:hover,
	.spb-thumb img,
	.spb-thumb--placeholder {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Product copy and the below-price cards sit 12px from either phone edge. */
	.spb-hero-grid .spb-summary {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.spb-below-price-row {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}

	/* Full-width comparison panel/table with square corners and no side rails. */
	.spb-compare {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.spb-compare-head,
	.spb-compare-intro,
	.spb-compare-toolbar,
	.spb-filter-result,
	.spb-mct-hint,
	.spb-compare-empty {
		box-sizing: border-box;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.spb-mobile-compare-outer {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.spb-mobile-compare-wrap,
	.spb-mobile-compare-table {
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
	}
	.spb-mobile-compare-table tbody tr:last-child th,
	.spb-mobile-compare-table tbody tr:last-child td {
		border-bottom: 0 !important;
	}
	.spb-mobile-compare-table tbody tr:last-child td {
		min-width: 140px;
	}
	.spb-mobile-compare-table .spb-compare-actions {
		white-space: normal;
	}

	/* Product Information headings and copy get a deliberate 12px inset;
	 * both information cards and the inner table use square corners. */
	.spb-spec {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.spb-spec > h2,
	.spb-spec-subhead {
		box-sizing: border-box;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.spb-spec-drawing-box,
	.spb-spec-table-wrap,
	.spb-spec-table {
		border-radius: 0 !important;
	}
	.spb-spec-drawing-box {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.spb-spec-table-wrap {
		padding: 12px !important;
	}
}



@media ( max-width: 760px ) {
	.spb-mobile-compare-table tbody th {
		padding-left: 12px;
	}

	.spb-mobile-compare-table thead th {
		padding: 17px 12px;
	}
}

.spb-spec-drawing-box,
.spb-spec-table-wrap {
	background: #f8fbff !important;
}

.spb-spec-table th {
	background: #fcfdff !important;
}

/* Remove the separators immediately above and below Product Information. */
.spb-spec,
.spb-description {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

@media ( max-width: 760px ) {
	/* Give mobile row labels enough room to keep labels such as Weight (kg),
	 * Availability, Retail and Wholesale on one clean line. */
	.spb-mobile-compare-table tbody th,
	.spb-mobile-compare-table thead th.spb-mct-corner {
		width: 110px !important;
		min-width: 110px !important;
		max-width: 110px !important;
		white-space: nowrap !important;
	}
	.spb-mobile-compare-table tbody th .spb-sort-icon {
		display: none !important;
	}
	.spb-mobile-compare-table .spb-mct-size-btn {
		flex-direction: row !important;
		justify-content: center !important;
		gap: 5px !important;
		white-space: nowrap !important;
	}
	.spb-mobile-compare-table .spb-mct-size-btn .spb-mct-size {
		font-size: 12px !important;
	}
	.spb-mobile-compare-table .spb-mct-size-btn .spb-mct-model {
		font-size: 8.5px !important;
	}

	/* Centre the complete mobile Action stack, not only the Buy Now button. */
	.spb-mobile-compare-table td.spb-compare-actions,
	.spb-mobile-compare-table tbody tr:last-child td {
		text-align: center !important;
		vertical-align: middle !important;
	}
	.spb-mobile-compare-table td.spb-compare-actions .spb-compare-select-btn,
	.spb-mobile-compare-table td.spb-compare-actions .spb-compare-notify-btn,
	.spb-mobile-compare-table tbody tr:last-child td .spb-compare-select-btn,
	.spb-mobile-compare-table tbody tr:last-child td .spb-compare-notify-btn {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.spb-mobile-compare-table td.spb-compare-actions .spb-compare-action-links,
	.spb-mobile-compare-table tbody tr:last-child td .spb-compare-action-links {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}
}

/* Product Information has no outer separator or card-edge lines. */
.spb-spec,
.spb-spec-grid,
.spb-spec-grid > div,
.spb-spec-drawing-box,
.spb-spec-table-wrap {
	border: 0 !important;
}
.spb-spec::before,
.spb-spec::after {
	content: none !important;
	display: none !important;
}

/* Blend the desktop table's horizontal-scroll gutter into the table instead
 * of leaving a bright white strip below the final row. Keep a slim, visible
 * scrollbar so wide tables remain discoverable and keyboard/mouse friendly. */
.spb-compare-scroll {
	background: #f8fafb !important;
	scrollbar-width: thin;
	scrollbar-color: #b8c7da #f8fafb;
}
.spb-compare-scroll::-webkit-scrollbar {
	height: 8px;
}
.spb-compare-scroll::-webkit-scrollbar-track {
	background: #f8fafb;
}
.spb-compare-scroll::-webkit-scrollbar-thumb {
	background: #b8c7da;
	border: 2px solid #f8fafb;
	border-radius: 999px;
}

/* Quote modal polish: a thin, optically centred close icon and clean fields. */
.spb-quote-close {
	display: grid !important;
	place-items: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	padding: 0 !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}
.spb-quote-close::before,
.spb-quote-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 1px;
	background: currentColor;
	transform-origin: center;
}
.spb-quote-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.spb-quote-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

#spb-quote-form input {
	box-sizing: border-box !important;
	padding: 21px 12px !important;
	border: 1.3px solid #e1e1e1 !important;
	box-shadow: none !important;
}

.spb-compare-thumb img {
	box-shadow: none !important;
}

/* Match Wholesale spacing and control geometry to the approved Retail view. */
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-builder {
	gap: 0 !important;
	margin-top: 26px !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-qty-label {
	margin: 0 0 6px !important;
	padding: 0 !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-lot-hint:not(:empty) {
	margin-top: 6px !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
	width: 100% !important;
	margin-top: 14px !important;
	gap: 0 !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-add-size-btn {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 50px !important;
	padding: 0 20px !important;
	font-size: 14px !important;
	box-sizing: border-box;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-empty,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-cart-list,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-cart-total,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-add-more-btn {
	margin-top: 10px !important;
}

@media ( min-width: 761px ) {
	.spb-compare-toolbar { border-radius: 14px !important; }
}
.spb-compare-table thead th:first-child,
.spb-mobile-compare-table thead th:first-child,
.spb-mobile-compare-table thead th.spb-mct-corner {
	background: var(--spb-color-compare-header-bg, #3579e2) !important;
	color: var(--spb-color-compare-header-text, #fff) !important;
}
.spb-price-tab-indicator {
	background: var(--spb-color-tab-active-bg, #3579e2) !important;
	border-color: var(--spb-color-tab-active-bg, #3579e2) !important;
}

/* ========================================================================== */
/* Backend-editable design system                                             */
/* Keep this final: it intentionally normalises the older layered reference   */
/* styles so every shopper-facing colour, type weight, surface and outline is */
/* controlled by the Product Page Builder instead of a hidden hard-coded rule.*/
/* ========================================================================== */
.spb-product,
.spb-quote-modal,
.spb-zoom-modal {
	font-family: var(--spb-font-body, inherit) !important;
	color: var(--spb-color-body, #4f5d73);
	font-size: var(--spb-body-size, 15px);
	font-weight: var(--spb-body-weight, 400);
}
.spb-product { background: var(--spb-color-page-bg, #fff) !important; }
.spb-product .product_title,
.spb-product .spb-swatch-title,
.spb-product .spb-compare-head > h2,
.spb-product .spb-spec > h2,
.spb-product .spb-spec-subhead,
.spb-quote-content h3 {
	font-family: var(--spb-font-heading, inherit) !important;
	color: var(--spb-color-heading, #0b1736) !important;
	font-weight: var(--spb-heading-weight, 700) !important;
}
.spb-product button,
.spb-product .button,
.spb-quote-modal button {
	font-family: var(--spb-font-button, var(--spb-font-body, inherit)) !important;
}
.spb-product a,
.spb-product .spb-tc-link,
.spb-product .spb-compare-action-links a,
.spb-product .spb-compare-action-links button { color: var(--spb-color-link, #0878e8) !important; }
.spb-product a:hover,
.spb-product .spb-tc-link:hover,
.spb-product .spb-compare-action-links a:hover,
.spb-product .spb-compare-action-links button:hover { color: var(--spb-color-link-hover, #056acb) !important; }
.spb-product .star-rating,
.spb-product .star-rating::before,
.spb-product .star-rating span::before,
.spb-brand-stars { color: var(--spb-color-rating, #f4b740) !important; }
.spb-product :is(a, button, input, select, textarea):focus-visible,
.spb-quote-modal :is(button, input):focus-visible {
	outline: var(--spb-focus-outline-width, 2px) solid var(--spb-color-focus-outline, #0878e8) !important;
	outline-offset: 2px !important;
}

/* Gallery */
.spb-gallery,
.spb-stage,
.spb-stage-slide { background: var(--spb-color-gallery-bg, #fff) !important; }
.spb-stage-nav,
.spb-zoom-hint {
	background: var(--spb-color-gallery-control-bg, #fff) !important;
	color: var(--spb-color-gallery-control-text, #0b1736) !important;
}
.spb-thumb,
.spb-thumb img { background: var(--spb-color-thumb-bg, #fff) !important; }
.spb-stage-badge,
.spb-badge { background: var(--spb-color-badge-bg, #f4b740) !important; color: var(--spb-color-badge-text, #3d2900) !important; }
@media ( min-width: 761px ) {
	.spb-gallery,
	.spb-stage { border-color: var(--spb-color-gallery-border, #e7edf5) !important; }
	.spb-thumb { border-color: var(--spb-color-thumb-border, #e7edf5) !important; }
}

/* Chips, labels and trust badges */
.spb-meta-chip,
.spb-meta-logo,
.spb-chip {
	background: var(--spb-color-chip-bg, #eaf6ff) !important;
	color: var(--spb-color-chip-text, #0b1736) !important;
	border-color: var(--spb-color-chip-border, #dceaf7) !important;
	font-weight: var(--spb-chip-weight, 600) !important;
}
.spb-trust-chip {
	background: var(--spb-color-trust-bg, #fff) !important;
	color: var(--spb-color-trust-text, #4f5d73) !important;
	border-color: var(--spb-color-trust-border, #e7edf5) !important;
}
.spb-swatch-label,
.spb-wholesale-qty-label,
.spb-qty-label,
.spb-spec-subhead,
.spb-filter-label {
	color: var(--spb-color-label, #4f5d73) !important;
	font-weight: var(--spb-label-weight, 600) !important;
}

/* Variation swatches */
.spb-swatch-btn {
	background: var(--spb-color-swatch-bg, #fff) !important;
	border-color: var(--spb-color-swatch-border, #dceaf7) !important;
	border-width: var(--spb-border-width, 1px) !important;
	border-radius: var(--spb-swatch-radius, 12px) !important;
	font-weight: var(--spb-swatch-weight, 600) !important;
}
.spb-swatch-btn .spb-sw-size { color: var(--spb-color-swatch-text, #0b1736) !important; }
.spb-swatch-btn .spb-sw-model { color: var(--spb-color-swatch-muted, #7b8799) !important; }
.spb-swatch-btn:hover,
.spb-swatch-btn.active {
	background: var(--spb-color-swatch-selected-bg, #eaf6ff) !important;
	border-color: var(--spb-color-accent, #0878e8) !important;
}
.spb-swatch-btn.active .spb-sw-size,
.spb-swatch-btn.active .spb-sw-model { color: var(--spb-color-swatch-selected-text, #0878e8) !important; }

/* Price card and segmented pricing tabs */
.spb-price-tabs-card {
	background: var(--spb-color-price-card-bg, #fff) !important;
	border-color: var(--spb-color-price-card-border, #e7edf5) !important;
	border-width: var(--spb-border-width, 1px) !important;
}
.spb-price-tabs { background: var(--spb-color-tab-bg, #f1f5f9) !important; }
.spb-price-tab { color: var(--spb-color-tab-text, #4f5d73) !important; }
.spb-price-tab.active {
	background: var(--spb-color-tab-active-bg, #3579e2) !important;
	color: var(--spb-color-tab-active-text, #fff) !important;
}
.spb-price-tabs-amount,
.spb-price-now,
.spb-wh-now { color: var(--spb-color-price, #0b1736) !important; font-family: var(--spb-font-price, var(--spb-font-heading, inherit)) !important; font-weight: var(--spb-price-weight, 700) !important; }
.spb-price-mrp,
.spb-wh-was,
.spb-sticky-was { color: var(--spb-color-regular-price, #8b95a5) !important; }
.spb-price-off,
.spb-wh-save { background: var(--spb-color-saving-bg, #e9f8ef) !important; color: var(--spb-color-saving-text, #15803d) !important; }
.spb-stock-ok,
.spb-stock-pill.in-stock { color: var(--spb-color-stock, #0878e8) !important; }
.spb-stock-no,
.spb-stock-pill.out-stock { color: var(--spb-color-danger, #dc2626) !important; }
.spb-sub-note,
.spb-selected-note,
.spb-lot-hint,
.spb-tc-link { color: var(--spb-color-muted, #7b8799) !important; }

/* Buttons and form controls */
.spb-product :is(.single_add_to_cart_button, .spb-add-size-btn, .spb-get-quote-btn, .spb-compare-select-btn, .spb-compare-notify-btn, .spb-sticky-btn),
.spb-quote-submit {
	background: var(--spb-color-primary, #0878e8) !important;
	border-color: var(--spb-color-primary, #0878e8) !important;
	color: var(--spb-color-button-text, #fff) !important;
	font-size: var(--spb-button-size, 14px) !important;
	font-weight: var(--spb-button-weight, 700) !important;
	border-radius: var(--spb-button-radius, 10px) !important;
}
.spb-product :is(.single_add_to_cart_button, .spb-add-size-btn, .spb-get-quote-btn, .spb-compare-select-btn, .spb-compare-notify-btn, .spb-sticky-btn):hover,
.spb-quote-submit:hover {
	background: var(--spb-color-primary-hover, #056acb) !important;
	border-color: var(--spb-color-primary-hover, #056acb) !important;
	color: var(--spb-color-button-hover-text, #fff) !important;
}
.spb-product :is(button, .button):disabled {
	background: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	border-color: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	color: var(--spb-color-button-disabled-text, #526176) !important;
}
.spb-product :is(input, select, textarea),
#spb-quote-form input,
.spb-filter-search,
.spb-sort-select {
	background-color: var(--spb-color-input-bg, #fff) !important;
	color: var(--spb-color-input-text, #0b1736) !important;
	border-color: var(--spb-color-input-border, #e1e1e1) !important;
	border-width: var(--spb-input-border-width, 1.3px) !important;
	border-radius: var(--spb-input-radius, 10px) !important;
	box-shadow: none !important;
}

/* Comparison table, desktop and transposed mobile view */
.spb-compare { background: var(--spb-color-compare-panel-bg, #fff) !important; }
.spb-compare-toolbar { background: var(--spb-color-compare-toolbar-bg, #f5f8fc) !important; border-color: var(--spb-color-compare-border, #e2e8f0) !important; }
.spb-compare-table,
.spb-mobile-compare-table { font-family: var(--spb-font-table, var(--spb-font-body, inherit)) !important; }
.spb-compare-table thead th,
.spb-mobile-compare-table thead th {
	background: var(--spb-color-compare-header-bg, #3579e2) !important;
	color: var(--spb-color-compare-header-text, #fff) !important;
	font-size: var(--spb-table-header-size, 13px) !important;
	font-weight: var(--spb-table-header-weight, 700) !important;
	border-color: var(--spb-color-compare-border, #e2e8f0) !important;
}
.spb-compare-table tbody td,
.spb-mobile-compare-table tbody td {
	color: var(--spb-color-compare-cell-text, #4f5d73) !important;
	font-size: var(--spb-table-body-size, 14px) !important;
	font-weight: var(--spb-table-body-weight, 400) !important;
	border-color: var(--spb-color-compare-border, #e2e8f0) !important;
}
.spb-compare-table tbody tr:nth-child(odd):not(.spb-row-selected) td { background: var(--spb-color-compare-row-odd, #f8fbff) !important; }
.spb-compare-table tbody tr:nth-child(even):not(.spb-row-selected) td { background: var(--spb-color-compare-row-even, #fff) !important; }
.spb-compare-table tbody tr:hover:not(.spb-row-selected) td { background: var(--spb-color-compare-row-hover, #eaf6ff) !important; }
.spb-compare-table tbody tr.spb-row-selected td { background: var(--spb-color-compare-row-selected, #eaf3fb) !important; }
.spb-mobile-compare-table tbody th {
	background: var(--spb-color-compare-label-bg, #eef3f9) !important;
	color: var(--spb-color-compare-label-text, #4f5d73) !important;
	font-size: var(--spb-table-header-size, 13px) !important;
	font-weight: var(--spb-table-header-weight, 700) !important;
	border-color: var(--spb-color-compare-border, #e2e8f0) !important;
}
.spb-compare-scroll,
.spb-mobile-compare-wrap { background: var(--spb-color-compare-row-odd, #f8fbff) !important; border-color: var(--spb-color-compare-border, #e2e8f0) !important; }
.spb-compare-thumb img,
.spb-mobile-compare-table td img {
	background: var(--spb-color-thumb-bg, #fff) !important;
	border-color: var(--spb-color-thumb-border, #e7edf5) !important;
}
.spb-compare-scroll { scrollbar-color: var(--spb-color-compare-border, #b8c7da) var(--spb-color-compare-row-odd, #f8fbff) !important; }
.spb-compare-scroll::-webkit-scrollbar-track { background: var(--spb-color-compare-row-odd, #f8fbff) !important; }
.spb-compare-scroll::-webkit-scrollbar-thumb {
	background: var(--spb-color-compare-border, #b8c7da) !important;
	border-color: var(--spb-color-compare-row-odd, #f8fbff) !important;
}

/* Product Information */
.spb-spec-drawing-box,
.spb-spec-table-wrap { background: var(--spb-color-spec-panel-bg, #f8fbff) !important; }
.spb-spec-table th {
	background: var(--spb-color-spec-label-bg, #fcfdff) !important;
	color: var(--spb-color-spec-label-text, #4f5d73) !important;
	font-weight: var(--spb-label-weight, 600) !important;
	border-color: var(--spb-color-spec-border, #e7edf5) !important;
}
.spb-spec-table td {
	background: var(--spb-color-spec-value-bg, #fff) !important;
	color: var(--spb-color-spec-value-text, #0b1736) !important;
	border-color: var(--spb-color-spec-border, #e7edf5) !important;
}

/* Sticky purchase bar */
.spb-sticky-bar {
	background: var(--spb-color-sticky-bg, #fff) !important;
	border-color: var(--spb-color-sticky-bar-border, #e7edf5) !important;
	font-family: var(--spb-font-sticky, var(--spb-font-body, inherit)) !important;
}
.spb-sticky-title { color: var(--spb-color-sticky-title, #0b1736) !important; font-weight: var(--spb-sticky-weight, 600) !important; }
.spb-sticky-sub { color: var(--spb-color-sticky-subtext, #4f5d73) !important; font-weight: var(--spb-sticky-weight, 600) !important; }
.spb-sticky-price,
.spb-sticky-now { color: var(--spb-color-sticky-price, #0b1736) !important; }

/* Quote modal */
.spb-quote-backdrop { background: var(--spb-color-modal-overlay, #0b1736) !important; opacity: .58; }
.spb-quote-content { background: var(--spb-color-modal-bg, #fff) !important; font-family: var(--spb-font-modal, var(--spb-font-body, inherit)) !important; }
.spb-quote-content h3 { color: var(--spb-color-modal-heading, #0b1736) !important; font-family: var(--spb-font-modal, var(--spb-font-heading, inherit)) !important; font-weight: var(--spb-modal-heading-weight, 700) !important; }
.spb-quote-subtext,
#spb-quote-form label { color: var(--spb-color-modal-body, #4f5d73) !important; font-weight: var(--spb-modal-body-weight, 400) !important; }
.spb-quote-close { background: var(--spb-color-modal-close-bg, #f3f4f6) !important; color: var(--spb-color-modal-close-text, #0b1736) !important; }
.spb-quote-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.spb-compare-limit-note { margin: 0 0 14px; color: var(--spb-color-muted, #7b8799); font-size: 14px; }

/* Gallery gestures and consistently framed thumbnails. */
.spb-stage { touch-action: pan-y pinch-zoom; }
.spb-thumb,
.spb-thumb--placeholder {
	box-sizing: border-box !important;
	border: 1px solid var(--spb-color-thumb-border, #e7edf5) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
.spb-thumb img {
	border: 0 !important;
	border-radius: 7px !important;
	box-shadow: none !important;
}
.spb-thumb.active,
.spb-thumb:hover {
	border: 2px solid var(--spb-color-primary, #0878e8) !important;
}

/* The complete desktop filter panel is one rounded surface. */
@media ( min-width: 761px ) {
	.spb-product .spb-compare-toolbar {
		border-radius: 14px !important;
		background-clip: padding-box;
	}
}

/* =====================================================================
 * Swatch state system: selection and cart/order membership are separate.
 * All tones come from the merchant-configurable design variables above.
 * ===================================================================== */
.spb-summary .spb-swatch-group {
	isolation: isolate;
}

.spb-summary .spb-swatch-indicator {
	background: var(--spb-color-swatch-selected-bg, #eaf6ff) !important;
	border-color: var(--spb-color-accent, #0878e8) !important;
	border-radius: var(--spb-swatch-radius, 12px) !important;
}

.spb-summary .spb-swatch-btn {
	transition: background-color .16s ease, border-color .16s ease, color .16s ease,
		box-shadow .16s ease, opacity .16s ease !important;
}

.spb-summary .spb-swatch-btn .spb-sw-added {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	max-width: 100%;
	color: var(--spb-color-accent, #0878e8) !important;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.spb-summary .spb-swatch-btn .spb-sw-added[hidden] {
	display: none !important;
}
.spb-summary .spb-swatch-btn .spb-sw-added svg {
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.spb-summary .spb-swatch-btn.is-added .spb-sw-model {
	display: none !important;
}

/* LEGACY "Added" tint retired. These rules (pre-V2) mixed the accent color
 * into the card background for any card with quantity added but not
 * selected — with an orange/red accent that mix renders as the stray pastel
 * pink cards. V2's own mode-scoped in-cart rules are the single owner of
 * in-cart styling now; the card keeps its configured background here and the
 * "✓ N Added" label + stepper count carry the state. */
.spb-summary .spb-swatch-btn.is-added:not(.active):not(.disabled) {
	background: var(--spb-color-swatch-bg, #fff) !important;
	border-color: var(--spb-color-swatch-border, #dceaf7) !important;
}

/* Active is the strongest state. The sliding indicator supplies its fill and
 * outline; an inset success stripe preserves Added when both states apply. */
.spb-summary .spb-swatch-btn.active:not(.disabled),
.spb-summary .spb-swatch-btn.active:not(.disabled):hover {
	background: transparent !important;
	border-color: transparent !important;
	font-weight: var(--spb-swatch-weight, 600) !important;
}
.spb-summary .spb-swatch-btn.active:not(.disabled) .spb-sw-size,
.spb-summary .spb-swatch-btn.active:not(.disabled) .spb-sw-model {
	color: var(--spb-color-swatch-selected-text, #0878e8) !important;
}
.spb-summary .spb-swatch-btn.active.is-added:not(.disabled) {
	box-shadow: none !important;
}
.spb-summary .spb-swatch-btn.active.is-added:not(.disabled) .spb-sw-added {
	color: var(--spb-color-swatch-selected-text, #0878e8) !important;
}
/* Focus is independent of Active/Added and always wins over hover styling. */
.spb-summary .spb-swatch-btn:focus-visible {
	outline: var(--spb-focus-outline-width, 2px) solid var(--spb-color-focus-outline, #0878e8) !important;
	outline-offset: 3px !important;
	z-index: 4;
}

/* Unavailable is the highest-priority visual state and uses native disabled
 * semantics in addition to the existing class and strikethrough treatment. */
.spb-summary .spb-swatch-btn.disabled,
.spb-summary .spb-swatch-btn:disabled {
	background: var(--spb-color-swatch-bg, #fff) !important;
	border-color: var(--spb-color-swatch-border, #dceaf7) !important;
	box-shadow: none !important;
	opacity: .48 !important;
	cursor: not-allowed !important;
}
.spb-summary .spb-swatch-btn.disabled .spb-sw-added,
.spb-summary .spb-swatch-btn:disabled .spb-sw-added {
	display: none !important;
}

/* When a choice is required, each available swatch receives its own restrained
 * 2px outline pulse. No enclosing rectangle is drawn around the whole grid. */
.spb-swatch-group.spb-prompt-blink {
	animation: none !important;
	box-shadow: none !important;
}
.spb-swatch-group.spb-needs-selection::after,
.spb-swatch-group.spb-needs-attention::after,
.spb-swatch-group.spb-prompt-blink::after {
	display: none !important;
}
.spb-swatch-group.spb-needs-selection .spb-swatch-btn:not(.disabled),
.spb-swatch-group.spb-needs-attention .spb-swatch-btn:not(.disabled),
.spb-swatch-group.spb-prompt-blink .spb-swatch-btn:not(.disabled) {
	animation: spbSwatchIndividualAttention 2.4s ease-in-out infinite !important;
}
.spb-swatch-group.spb-needs-attention .spb-swatch-btn:not(.disabled),
.spb-swatch-group.spb-prompt-blink .spb-swatch-btn:not(.disabled) {
	animation-duration: .9s !important;
	animation-iteration-count: 2 !important;
}
@keyframes spbSwatchIndividualAttention {
	0%, 100% { box-shadow: 0 0 0 0 var(--spb-color-accent, #0878e8); }
	50% { box-shadow: 0 0 0 2px var(--spb-color-accent, #0878e8); }
}

@media ( prefers-reduced-motion: reduce ) {
	.spb-swatch-group.spb-needs-selection .spb-swatch-btn:not(.disabled),
	.spb-swatch-group.spb-needs-attention .spb-swatch-btn:not(.disabled),
	.spb-swatch-group.spb-prompt-blink .spb-swatch-btn:not(.disabled) {
		animation: none !important;
		box-shadow: 0 0 0 1px var(--spb-color-accent, #0878e8) !important;
	}
	.spb-summary .spb-swatch-indicator,
	.spb-summary .spb-swatch-btn {
		transition: none !important;
	}
}

@media ( max-width: 760px ) {
	/* Let the comparison table determine its own full height. The wrapper keeps
	 * horizontal size comparison, but no longer creates a second vertical
	 * viewport inside the page. */
	.spb-mobile-compare-wrap {
		height: auto !important;
		max-height: none !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
	}
	.spb-mobile-compare-table tbody td[data-variation-id] {
		cursor: pointer !important;
	}

	.spb-summary .spb-swatch-btn {
		min-width: 0;
	}
	.spb-summary .spb-swatch-btn .spb-sw-added {
		font-size: 8.5px;
	}
	/* Border-box keeps the phone image dimensions unchanged while the real
	 * 1px border remains visible above the image layer. */
	.spb-product .spb-stage {
		box-sizing: border-box !important;
		border: 1px solid var(--spb-color-gallery-border, #e7edf5) !important;
		box-shadow: none !important;
		background-clip: padding-box;
	}

	/* The phone comparison is transposed, so its zebra stripes run across
	 * specification rows. Include the sticky label cell to keep each stripe
	 * visually continuous, while preserving a selected variation highlight. */
	.spb-mobile-compare-table tbody tr:nth-child(odd) > th:not(.spb-mct-selected),
	.spb-mobile-compare-table tbody tr:nth-child(odd) > td:not(.spb-mct-selected) {
		background: var(--spb-color-compare-row-odd, #f8fbff) !important;
	}
	.spb-mobile-compare-table tbody tr:nth-child(even) > th:not(.spb-mct-selected),
	.spb-mobile-compare-table tbody tr:nth-child(even) > td:not(.spb-mct-selected) {
		background: var(--spb-color-compare-row-even, #fff) !important;
	}
}

/* Retail and Wholesale both present one primary purchase action and the
 * secondary More Info action on a single row at every viewport width. */
.spb-retail-action-row,
.spb-price-tabs-card .spb-wholesale-action-row {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px !important;
	width: 100% !important;
	box-sizing: border-box;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
	gap: 8px !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-retail-action-row {
	display: none !important;
}
.spb-retail-action-row > .single_add_to_cart_button,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row > .spb-add-size-btn {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
}
.spb-retail-action-row > .spb-more-info-btn,
.spb-price-tabs-card .spb-wholesale-action-row > .spb-wholesale-more-info-btn {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	background: var(--spb-color-input-bg, #fff) !important;
	border: var(--spb-input-border-width, 1.3px) solid var(--spb-color-accent, #0878e8) !important;
	border-radius: var(--spb-button-radius, 10px) !important;
	color: var(--spb-color-accent, #0878e8) !important;
	font-size: var(--spb-button-size, 14px) !important;
	font-weight: var(--spb-button-weight, 700) !important;
}
.spb-retail-action-row > .spb-more-info-btn:hover,
.spb-price-tabs-card .spb-wholesale-action-row > .spb-wholesale-more-info-btn:hover {
	background: var(--spb-color-primary, #0878e8) !important;
	border-color: var(--spb-color-primary, #0878e8) !important;
	color: var(--spb-color-button-hover-text, #fff) !important;
}

/* Add to Order remains a non-submitting guided control before selection, so
 * it can provide hover feedback and take the shopper to the required swatches. */
.spb-price-tabs-card .spb-add-size-btn.is-disabled {
	background: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	border-color: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	color: var(--spb-color-button-disabled-text, #526176) !important;
	cursor: pointer !important;
}
.spb-price-tabs-card .spb-add-size-btn.is-disabled:hover {
    background: var(--spb-color-primary, #0878e8) !important;
    border-color: var(--spb-color-accent, #0878e8) !important;
    color: var(--spb-color-button-hover-text, #fff) !important;
}

/* Keep the desktop wholesale quantity area aligned with the retail layout. */
@media (min-width: 761px) {
    .spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-builder {
        margin-top: 14px !important;
    }

    .spb-price-tabs-card:not(.spb-mode-wholesale) .quantity::before,
    .spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-qty-label {
        font-size: 11px !important;
        font-weight: var(--spb-label-weight, 600) !important;
        line-height: 1.5 !important;
        letter-spacing: .04em !important;
    }

    .spb-price-tabs-card:not(.spb-mode-wholesale) .spb-qty-select,
    .spb-price-tabs-card.spb-mode-wholesale select.spb-wholesale-qty {
        box-sizing: border-box !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 100% !important;
    }

    .spb-price-tabs-card.spb-mode-wholesale .spb-lot-hint:empty {
        display: none !important;
    }

    .spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
        margin-top: 14px !important;
    }
}

@media ( max-width: 760px ) {
	/* Filters and search retain their own rows. Sort uses a compact label above
	 * its select; the select and Feet/Meters toggle share the final row and
	 * align by their 44px controls rather than by the label text. */
	.spb-compare-toolbar-row2 {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end !important;
		gap: 10px 8px !important;
	}
	.spb-compare-toolbar-row2 > .spb-filters-toggle {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
	}
	.spb-compare-toolbar-row2 > .spb-filter-search {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
	}
	.spb-compare-toolbar-row2 > .spb-sort-by {
		grid-column: 1;
		grid-row: 3;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 6px;
		height: auto !important;
		min-width: 0;
	}
	.spb-compare-toolbar-row2 > .spb-sort-by > span {
		display: block !important;
		height: auto !important;
		line-height: 1.2 !important;
	}
	.spb-compare-toolbar-row2 .spb-sort-select {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		font-size: 12px !important;
		padding-left: 10px !important;
		padding-right: 26px !important;
	}
	.spb-compare-toolbar-row2 > .spb-unit-toggle {
		grid-column: 2;
		grid-row: 3;
		align-self: end !important;
		white-space: nowrap;
	}
	.spb-compare-toolbar-row2 .spb-unit-btn {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 11.5px;
	}
}

/* The main image itself receives the same low-weight configurable outline on
 * desktop as on phone; border-box prevents any dimension or layout change. */
@media ( min-width: 761px ) {
	.spb-product .spb-stage {
		box-sizing: border-box !important;
		border: 1px solid var(--spb-color-gallery-border, #e7edf5) !important;
		background-clip: padding-box;
	}
}

/* Inline lens icon does not depend on the admin-only Dashicons stylesheet. */
.spb-zoom-hint > svg {
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
}

/* =====================================================================
 * 1.9.16 — Distinct colours for the three size-chart CTAs so availability
 * reads at a glance: Buy Now = blue (primary, unchanged), Enquire (made to
 * order) = amber, Notify (out of stock) = violet. Appended last, with the
 * .spb-product prefix (specificity 0,3,0) + !important, so these win over the
 * shared blue primary-button rule the notify buttons otherwise inherit. Text
 * stays white/bold from that same shared rule.
 * ===================================================================== */
.spb-product .spb-compare-notify-btn[data-notify-mode="enquire"],
.spb-compare-notify-btn[data-notify-mode="enquire"] {
	background: #d97706 !important;
	border-color: #d97706 !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="enquire"]:hover,
.spb-compare-notify-btn[data-notify-mode="enquire"]:hover {
	background: #b45309 !important;
	border-color: #b45309 !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="notify"],
.spb-compare-notify-btn[data-notify-mode="notify"] {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="notify"]:hover,
.spb-compare-notify-btn[data-notify-mode="notify"]:hover {
	background: #6d28d9 !important;
	border-color: #6d28d9 !important;
}

/* =====================================================================
 * 1.9.17 — Compare-table type hierarchy. Every cell snaps to one of four
 * tiers so the row reads by importance instead of drifting between sizes:
 *   Tier 1 (anchor)  Size 15/700, Prices 14/700 — dark heading colour
 *   Tier 2 (data)    13px body colour — every attribute/number cell, one size
 *   Tier 3 (muted)   13px muted — soft text values (Ideal For)
 *   Tier 4 (meta)    11px muted — model no., units, struck MRP
 * Data numbers use tabular figures and cells centre vertically so columns
 * line up. Appended last so it wins over the earlier iterative td overrides.
 * ===================================================================== */
.spb-compare-table td {
	font-size: 13px !important;
	color: var(--spb-color-body, #4f5d73) !important;
	vertical-align: middle !important;
	font-variant-numeric: tabular-nums;
}
/* Tier 1 — Size value: the row's anchor. */
.spb-compare-table .spb-size-cell .spb-sz {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--spb-color-heading, #0b1736) !important;
}
/* Tier 1 — Retail + Wholesale prices: the other anchors. */
.spb-compare-table .spb-compare-price,
.spb-compare-table .spb-compare-price .spb-price-stack ins,
.spb-compare-table .spb-compare-price .price,
.spb-compare-table .spb-compare-wholesale-unit {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--spb-color-heading, #0b1736) !important;
}
/* Tier 3 — soft text value sits back so the numbers lead. */
.spb-compare-table .spb-compare-idealfor {
	color: var(--spb-color-muted, #7b8799) !important;
}
/* Tier 4 — meta: model no., struck MRP, per-unit suffix — smallest + muted. */
.spb-compare-table .spb-td-model,
.spb-compare-table .spb-price-stack del,
.spb-compare-table .spb-compare-wholesale-unit .spb-unit-sfx {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--spb-color-muted, #7b8799) !important;
}

/* =====================================================================
 * 1.9.19 — Unified lead forms, visible CAPTCHA, stock filter and compact
 * two-line comparison headers.
 * ===================================================================== */
.spb-quote-content {
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}
#spb-quote-form label,
#spb-notify-form label {
	display: block;
	margin: 12px 0 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--spb-color-modal-body, #4f5d73);
}
#spb-quote-form input,
#spb-notify-form input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1.5px solid var(--spb-color-input-border, #cbd5e1) !important;
	border-radius: var(--spb-input-radius, 10px) !important;
	background: var(--spb-color-input-bg, #fff) !important;
	color: var(--spb-color-input-text, #0f172a) !important;
	font-size: 16px;
	box-shadow: none !important;
}
#spb-quote-form input:focus,
#spb-notify-form input:focus {
	outline: 2px solid var(--spb-color-focus-outline, #0878e8) !important;
	outline-offset: 1px;
	border-color: var(--spb-color-primary, #0878e8) !important;
}
.spb-captcha-field {
	margin-top: 14px;
	padding: 12px;
	border: 1px solid var(--spb-color-border, #dceaf7);
	border-radius: var(--spb-input-radius, 10px);
	background: var(--spb-color-surface-soft, #f8fafc);
}
.spb-captcha-field label { margin-top: 0 !important; }
.spb-captcha-code {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin-bottom: 8px;
	padding: 0 12px;
	border: 1px dashed var(--spb-color-primary, #0878e8);
	border-radius: 8px;
	background: #fff;
	color: var(--spb-color-heading, #0b1736);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
}
.spb-captcha-field small {
	display: block;
	margin-top: 5px;
	color: var(--spb-color-body, #475569);
	font-size: 11.5px;
}

.spb-compare-table thead th {
	vertical-align: middle !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: left !important;
}
.spb-compare-table thead th .spb-th-size-stack {
	min-height: 32px;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	text-align: left;
}
.spb-compare-table thead th:first-child {
	text-align: left !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.spb-compare-table thead th:first-child .spb-th-size-stack {
	align-items: flex-start;
	text-align: left;
}
.spb-compare-table thead th .spb-th-size-stack .spb-th-sz {
	position: relative;
	display: block;
	width: max-content;
	max-width: 100%;
	white-space: nowrap;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.08;
}
.spb-compare-table thead th .spb-th-size-stack .spb-th-md {
	font-size: 9.5px !important;
	font-weight: 600 !important;
	line-height: 1.08;
	opacity: .78;
}
.spb-compare-table .spb-col-accessories {
	width: 105px !important;
	min-width: 105px !important;
	max-width: 105px !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
}

/* Keep sortable headings visually centred. The arrow sits beside the label
 * without taking a separate wrapped line inside narrow columns. */
.spb-compare-table thead .spb-sortable .spb-sort-icon {
	position: absolute;
	left: calc(100% + 5px);
	top: calc(50% + 5px);
	display: block;
	width: 7px;
	height: 8px;
	margin: 0;
	transform: translateY(-50%);
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff !important;
	font-size: 0 !important;
	opacity: .9 !important;
}
.spb-compare-table thead .spb-sortable .spb-sort-icon::before,
.spb-compare-table thead .spb-sortable .spb-sort-icon::after {
	content: "" !important;
	position: absolute;
	left: 1px;
	width: 0;
	height: 0;
	border-left: 2.5px solid transparent;
	border-right: 2.5px solid transparent;
	transition: opacity .15s ease;
}
.spb-compare-table thead .spb-sortable .spb-sort-icon::before {
	top: 0;
	border-bottom: 3px solid currentColor;
}
.spb-compare-table thead .spb-sortable .spb-sort-icon::after {
	bottom: 0;
	border-top: 3px solid currentColor;
}
.spb-compare-table thead th.spb-sortable {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.spb-compare-table thead th.spb-col-accessories .spb-th-md {
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.spb-compare-table thead .spb-sortable.spb-sort-asc .spb-sort-icon::before,
.spb-compare-table thead .spb-sortable.spb-sort-desc .spb-sort-icon::after {
	opacity: 1;
}
.spb-compare-table thead .spb-sortable.spb-sort-asc .spb-sort-icon::after,
.spb-compare-table thead .spb-sortable.spb-sort-desc .spb-sort-icon::before {
	opacity: .2;
}
.spb-compare-table thead .spb-sortable:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .95);
	outline-offset: -3px;
}

/* Compact comparison action only; larger checkout and quote CTAs retain the
 * configurable site-wide button size. */
.spb-product .spb-compare-table .spb-compare-select-btn,
.spb-product .spb-compare-table .spb-compare-notify-btn,
.spb-product .spb-mobile-compare-table .spb-compare-select-btn,
.spb-product .spb-mobile-compare-table .spb-compare-notify-btn {
	min-height: 30px !important;
	padding: 5px 10px !important;
	font-size: 10px !important;
	line-height: 1.1 !important;
	border-radius: 6px !important;
}
.spb-product .spb-compare-table .spb-compare-select-btn svg,
.spb-product .spb-compare-table .spb-compare-notify-btn svg,
.spb-product .spb-mobile-compare-table .spb-compare-select-btn svg,
.spb-product .spb-mobile-compare-table .spb-compare-notify-btn svg {
	width: 10px;
	height: 10px;
	margin-left: 3px;
}

/* Retail and B2B are peer price columns, so their primary amounts use one
 * identical type size on both desktop and the transposed phone table. */
.spb-compare-table td.spb-compare-price,
.spb-compare-table td.spb-compare-price .spb-price-stack,
.spb-compare-table td .spb-compare-wholesale-unit,
.spb-mobile-compare-table td.spb-compare-price,
.spb-mobile-compare-table td.spb-compare-price .spb-price-stack,
.spb-mobile-compare-table td .spb-compare-wholesale-unit {
	font-size: 14px !important;
	font-weight: 700 !important;
}
.spb-compare-table td.spb-compare-price .spb-price-stack ins,
.spb-compare-table td.spb-compare-price .spb-price-stack > .woocommerce-Price-amount,
.spb-compare-table td .spb-compare-wholesale-unit > .woocommerce-Price-amount,
.spb-mobile-compare-table td.spb-compare-price .spb-price-stack ins,
.spb-mobile-compare-table td.spb-compare-price .spb-price-stack > .woocommerce-Price-amount,
.spb-mobile-compare-table td .spb-compare-wholesale-unit > .woocommerce-Price-amount {
	font-size: 14px !important;
	font-weight: 700 !important;
}
.spb-compare-table td.spb-compare-accessories {
	font-size: 11.5px !important;
}
.spb-compare-table td.spb-compare-spec-value,
.spb-compare-table td.spb-compare-spec-value .spb-sz,
.spb-compare-table td.spb-compare-spec-value .spb-td-model,
.spb-compare-table td.spb-compare-spec-value .spb-idealfor-wrap {
	font-size: 11.5px !important;
}

@media ( max-width: 760px ) {
	.spb-compare-toolbar-row2 {
		grid-template-columns: minmax(0, 1fr) !important;
		align-items: stretch !important;
	}
	.spb-compare-toolbar-row2 > #spb-stock-filter-toggle {
		grid-column: 1 !important;
		grid-row: 3 !important;
		justify-self: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
		display: flex !important;
		box-sizing: border-box;
	}
	#spb-stock-filter-toggle .spb-stock-filter-btn {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 11px !important;
		text-align: center;
	}
	.spb-compare-toolbar-row2 > .spb-sort-by {
		grid-column: 1 !important;
		grid-row: 4 !important;
		width: 100% !important;
	}
	.spb-compare-toolbar-row2 > #spb-unit-toggle {
		grid-column: 1 !important;
		grid-row: 5 !important;
		justify-self: start !important;
		width: auto !important;
		max-width: 100%;
	}
	.spb-mobile-compare-table td.spb-compare-accessories {
		width: 132px !important;
		min-width: 132px !important;
		max-width: 132px !important;
		font-size: 10px !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere;
		line-height: 1.35;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.spb-mobile-compare-table td.spb-compare-spec-value,
	.spb-mobile-compare-table td.spb-compare-spec-value .spb-sz,
	.spb-mobile-compare-table td.spb-compare-spec-value .spb-td-model,
	.spb-mobile-compare-table td.spb-compare-spec-value .spb-idealfor-wrap {
		font-size: 10px !important;
	}
	/* Phone table labels always retain the desktop two-tier meaning: main
	 * heading on line one, subheading on line two. */
	.spb-mobile-compare-table tbody th {
		white-space: normal !important;
	}
	.spb-mobile-compare-table tbody th .spb-th-size-stack {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 1px !important;
		white-space: normal !important;
		text-align: left !important;
	}
	.spb-mobile-compare-table tbody th .spb-th-sz {
		display: block !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
	}
	.spb-mobile-compare-table tbody th .spb-th-md {
		display: block !important;
		font-size: 9px !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		opacity: .78;
	}
	.spb-mobile-compare-table .spb-mct-size-btn {
		flex-direction: column !important;
		align-items: center !important;
		gap: 1px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.spb-stock-filter-btn { transition: none; }
}

/* 1.9.26 — One deliberate dropdown-to-action gap in both price modes.
 * Reset theme/legacy select margins first so they cannot stack with the row. */
.spb-price-tabs-card .spb-qty-select,
.spb-price-tabs-card select.spb-wholesale-qty {
	margin: 0 !important;
}
.spb-price-tabs-card:not(.spb-mode-wholesale) .quantity {
	margin-bottom: 8px !important;
}
.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-retail-action-row {
	margin-top: 0 !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-builder {
	gap: 0 !important;
	row-gap: 0 !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-lot-hint:empty {
	display: none !important;
	margin: 0 !important;
	height: 0 !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
	margin-top: 8px !important;
}

/* 1.9.30 — Final comparison-header system: balanced widths, centred labels,
 * comfortable padding and subtle blue separators instead of white outlines. */
.spb-compare-table thead th {
	box-sizing: border-box;
	min-width: 100px;
	padding: 16px 18px !important;
	text-align: center !important;
	vertical-align: middle !important;
	border-right: 1px solid rgba(15, 61, 120, .34) !important;
	border-bottom: 2px solid rgba(15, 61, 120, .42) !important;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.spb-compare-table thead th:last-child {
	border-right: 0 !important;
}
.spb-compare-table thead th .spb-th-size-stack,
.spb-compare-table thead th:first-child .spb-th-size-stack {
	min-height: 36px;
	align-items: center;
	justify-content: center;
	gap: 1px;
	text-align: center;
}
.spb-compare-table thead th:first-child,
.spb-compare-table thead th.spb-sortable {
	padding-left: 18px !important;
	padding-right: 18px !important;
	text-align: center !important;
}
.spb-compare-table thead .spb-sortable .spb-sort-icon {
	left: calc(100% + 10px);
}
.spb-compare-table thead th[data-sort="size"] { min-width: 130px; }
.spb-compare-table thead th[data-column="image"] { min-width: 115px; }
.spb-compare-table thead th[data-sort="brand"],
.spb-compare-table thead th[data-sort="shape"] { min-width: 110px; }
.spb-compare-table thead th[data-sort="length"],
.spb-compare-table thead th[data-sort="width"],
.spb-compare-table thead th[data-sort="height"] { min-width: 105px; }
.spb-compare-table thead th[data-sort="space"],
.spb-compare-table thead th[data-sort="capacity"],
.spb-compare-table thead th[data-sort="weight"] { min-width: 110px; }
.spb-compare-table thead th.spb-col-accessories,
.spb-compare-table td.spb-col-accessories {
	width: 130px !important;
	min-width: 130px !important;
	max-width: 130px !important;
}
.spb-compare-table thead th[data-sort="ideal"] { min-width: 125px; }
.spb-compare-table thead th[data-sort="stock"] { min-width: 135px; }
.spb-compare-table thead th[data-sort="price"],
.spb-compare-table thead th[data-sort="wholesale"] { min-width: 120px; }
.spb-compare-table thead th[data-sort="action"] { min-width: 115px; }

/* 1.9.34 — Stock and Action are compact decision columns. Centre their
 * complete content stacks, overriding older reference styles that aligned
 * these two cells and the secondary action links to the left. */
.spb-compare-table tbody td.spb-compare-stock,
.spb-compare-table tbody td.spb-compare-actions {
	text-align: center !important;
	vertical-align: middle !important;
}
.spb-compare-table tbody td.spb-compare-actions .spb-compare-select-btn,
.spb-compare-table tbody td.spb-compare-actions .spb-compare-notify-btn {
	margin-left: auto !important;
	margin-right: auto !important;
}
.spb-compare-table tbody td.spb-compare-actions .spb-compare-action-links {
	align-items: center !important;
	text-align: center !important;
}

/* 1.9.35 — The SKU beneath the first-column size is secondary row data.
 * Keep it compact and exactly matched to the Brand value typography. */
.spb-compare-table tbody .spb-td-model,
.spb-compare-table tbody td.spb-compare-brand-value {
	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

/* 1.9.36 — Keep floating table controls anchored to the visible viewport,
 * not inside the horizontally scrolling content. This prevents the right-edge
 * fade/expand controls from travelling across columns during RTL-to-LTR drags. */
.spb-compare-shell {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: var(--spb-radius, 12px);
}
.spb-compare-shell > .spb-compare-scroll {
	direction: ltr;
}
.spb-compare-table th:first-child,
.spb-compare-table td:first-child {
	left: 0 !important;
	inset-inline-start: 0 !important;
	background-clip: padding-box;
	transform: translateZ(0);
}
.spb-compare-table thead th:first-child { z-index: 5 !important; }
.spb-compare-table tbody td:first-child { z-index: 3 !important; }

.spb-compare-shell.spb-fullscreen {
	position: fixed;
	inset: 16px;
	z-index: 99998;
	background: var(--spb-color-card-bg, #fff);
	box-shadow: 0 8px 30px rgba(15, 17, 20, .16);
	border-radius: var(--spb-radius, 12px);
}
.spb-compare-shell.spb-fullscreen > .spb-compare-scroll {
	height: 100%;
	max-height: 100%;
	overflow: auto;
}

/* Price-on-request rows stay compact: clear commercial state in the two price
 * columns, with the detailed sourcing explanation moved into the lead modal. */
.spb-price-unavailable,
.spb-price-request-label,
.spb-price-request-note {
	display: block;
	white-space: normal;
	overflow-wrap: anywhere;
}
.spb-price-unavailable {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--spb-color-muted, #7b8799);
}
.spb-price-request-label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--spb-color-heading, #0b1736);
}
.spb-price-request-note {
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--spb-color-muted, #7b8799);
}
.spb-product .spb-compare-request-price-btn {
	white-space: normal !important;
	line-height: 1.15 !important;
}
.spb-notify-quantity[hidden] {
	display: none !important;
}
.spb-notify-quantity small {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--spb-color-muted, #7b8799);
}

/* 1.9.37 — The product chooser is intentionally size-only. WooCommerce still
 * receives the companion variation attributes from the selected size behind
 * the scenes, while Shape, Ideal For, capacity, and similar rows stay out of
 * the customer-facing swatch interface. */
.spb-summary table.variations tr.spb-variation-row-secondary {
	display: none !important;
}

/* Clear, compact price-on-request states for products that are supplied only
 * through B2B sourcing. */
.spb-card-unavailable-title,
.spb-card-request-title,
.spb-card-request-copy {
	display: block;
	white-space: normal;
	overflow-wrap: break-word;
}
.spb-card-unavailable-title,
.spb-card-request-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--spb-color-heading, #0b1736);
}
.spb-card-request-title {
	color: var(--spb-color-primary, #0878e8);
}
.spb-card-request-copy {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--spb-color-muted, #667085);
}

/* A no-retail-price model remains informative in the Retail tab, but cannot
 * accidentally be added to the WooCommerce cart. */
.spb-price-tabs-card.spb-retail-unavailable:not(.spb-mode-wholesale) .quantity,
.spb-price-tabs-card.spb-retail-unavailable:not(.spb-mode-wholesale) .spb-retail-action-row > .single_add_to_cart_button {
	display: none !important;
}

/* In B2B mode, replace the lot builder with one focused Request Price action.
 * More Info stays beside it and both controls retain the established sizing. */
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-wholesale-empty,
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-wholesale-cart-list,
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-wholesale-cart-total,
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-wholesale-add-more-btn,
.spb-price-tabs-card .spb-wholesale-action-row > .spb-add-size-btn[hidden],
.spb-price-tabs-card .spb-price-card-request-btn[hidden],
.spb-price-tabs-card .spb-retail-request-btn[hidden] {
	display: none !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row > .spb-price-card-request-btn:not([hidden]) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--spb-button-radius, 10px) !important;
	background: var(--spb-color-primary, #0878e8) !important;
	color: #fff !important;
	font-size: var(--spb-button-size, 14px) !important;
	font-weight: var(--spb-button-weight, 700) !important;
	line-height: 1.2 !important;
	cursor: pointer;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row > .spb-price-card-request-btn:hover {
	filter: brightness(.94);
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row > .spb-price-card-request-btn:focus-visible {
	outline: 3px solid rgba(8, 120, 232, .28);
	outline-offset: 3px;
}

/* 1.9.38 — Sourced-to-order models are an informational availability state,
 * not an out-of-stock error. Use the same calm blue language in the price
 * card and comparison table. */
.spb-stock-order,
.spb-compare-stock .spb-stock-pill.available-on-order,
.spb-mobile-compare-table td .spb-stock-pill.available-on-order {
	color: var(--spb-color-primary, #0878e8) !important;
	font-weight: 700;
}

/* 1.9.39 — Professional dual-handle price filter. Insets keep both endpoint
 * handles fully visible, while labelled value chips make Min/Max unambiguous. */
.spb-filter-group-price {
	min-width: 260px !important;
}
.spb-price-slider-values {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center !important;
	gap: 8px !important;
}
.spb-price-slider-value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 6px 9px;
	border: 1px solid var(--spb-color-border, #e2e8f0);
	border-radius: 8px;
	background: var(--spb-color-card-bg, #fff);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.spb-price-slider-value small {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--spb-color-muted, #667085);
}
.spb-price-slider-value strong {
	min-width: 0;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--spb-color-heading, #0b1736);
	font-variant-numeric: tabular-nums;
}
.spb-price-slider-track-wrap {
	height: 34px !important;
	margin-top: 5px !important;
}
.spb-price-slider-track,
.spb-price-slider-fill {
	top: 50% !important;
	height: 5px !important;
	margin-top: -2.5px !important;
}
.spb-price-slider-track {
	left: 9px !important;
	right: 9px !important;
	background: var(--spb-color-border, #dbe4ef) !important;
}
.spb-price-slider-fill {
	margin-left: 0;
	max-width: none;
	background: var(--spb-color-primary, #0878e8) !important;
}
.spb-price-range-input,
.spb-product input.spb-price-range-input {
	position: absolute !important;
	top: 0 !important;
	left: 9px !important;
	width: calc(100% - 18px) !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	pointer-events: none;
	outline: none;
}
#spb-price-slider-min { z-index: 3; }
#spb-price-slider-max { z-index: 4; }
.spb-price-range-input:focus { z-index: 6 !important; }
.spb-price-range-input::-webkit-slider-runnable-track {
	height: 34px !important;
	border: 0 !important;
	background: transparent !important;
}
.spb-price-range-input::-moz-range-track {
	height: 34px !important;
	border: 0 !important;
	background: transparent !important;
}
.spb-price-range-input::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	margin-top: 7px !important;
	border: 3px solid var(--spb-color-primary, #0878e8) !important;
	border-radius: 50% !important;
	background: var(--spb-color-card-bg, #fff) !important;
	box-shadow: 0 2px 7px rgba(15, 23, 42, .22) !important;
	pointer-events: auto;
	cursor: grab;
}
.spb-price-range-input::-moz-range-thumb {
	width: 20px !important;
	height: 20px !important;
	border: 3px solid var(--spb-color-primary, #0878e8) !important;
	border-radius: 50% !important;
	background: var(--spb-color-card-bg, #fff) !important;
	box-shadow: 0 2px 7px rgba(15, 23, 42, .22) !important;
	pointer-events: auto;
	cursor: grab;
}
.spb-price-range-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(8, 120, 232, .18), 0 2px 7px rgba(15, 23, 42, .22) !important;
}
.spb-price-range-input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(8, 120, 232, .18), 0 2px 7px rgba(15, 23, 42, .22) !important;
}

/* Four-state stock filter: compact typography inside a calm segmented shell. */
#spb-stock-filter-toggle {
	display: inline-flex !important;
	align-items: stretch !important;
	gap: 2px !important;
	height: 40px !important;
	padding: 3px !important;
	border: 1px solid var(--spb-color-border, #dbe4ef) !important;
	border-radius: 10px !important;
	background: var(--spb-color-compare-toolbar-bg, #f3f6fa) !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
#spb-stock-filter-toggle .spb-stock-filter-btn {
	height: 32px !important;
	min-height: 32px !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: transparent !important;
	color: var(--spb-color-body, #526176) !important;
	font-size: 10px !important;
	font-weight: 650 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
}
#spb-stock-filter-toggle .spb-stock-filter-btn:hover {
	color: var(--spb-color-heading, #0b1736) !important;
	background: rgba(255, 255, 255, .7) !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn.active {
	color: #fff !important;
	background: var(--spb-color-primary, #0878e8) !important;
	box-shadow: 0 1px 4px rgba(8, 120, 232, .22);
}
#spb-stock-filter-toggle .spb-stock-filter-btn:focus-visible {
	outline: 2px solid var(--spb-color-primary, #0878e8);
	outline-offset: 2px;
}

/* Bidirectional desktop table controls. The left fade stays deliberately
 * narrow so it does not obscure the frozen Size column. */
.spb-scroll-hint-left {
	left: var(--spb-first-column-width, 180px) !important;
	right: auto !important;
	width: 38px !important;
	justify-content: flex-start !important;
	padding: 0 0 0 1px !important;
	background: linear-gradient(270deg, rgba(255,255,255,0), var(--spb-color-card-bg, #fff) 88%) !important;
	z-index: 7 !important;
}
.spb-scroll-hint-right {
	width: 48px !important;
}
.spb-scroll-hint-left svg {
	width: 15px !important;
	height: 15px !important;
	padding: 8px !important;
	animation-name: spbScrollHintNudgeLeft !important;
}
@keyframes spbScrollHintNudgeLeft {
	0%, 100% { transform: translateX(0); opacity: .55; }
	50% { transform: translateX(-3px); opacity: 1; }
}

/* Physical product gallery: slides sit side-by-side and the whole track moves,
 * replacing opacity fades. Mouse, touch, and pen can all drag the image. */
.spb-product .spb-stage {
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}
.spb-product .spb-stage-track {
	display: flex !important;
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 220ms cubic-bezier(.2,.75,.25,1) !important;
	will-change: transform;
}
.spb-product .spb-stage-track.spb-gallery-dragging {
	transition: none !important;
	cursor: grabbing;
}
.spb-product .spb-stage-slide,
.spb-product .spb-stage-slide.show {
	position: relative !important;
	inset: auto !important;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}
.spb-product .spb-stage-slide img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (max-width: 760px) {
	#spb-stock-filter-toggle {
		height: 44px !important;
	}
	#spb-stock-filter-toggle .spb-stock-filter-btn {
		height: 36px !important;
		min-height: 36px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: 9.5px !important;
	}
	.spb-filter-group-price {
		width: 100%;
		min-width: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spb-product .spb-stage-track {
		transition-duration: 1ms !important;
	}
	.spb-scroll-hint-left svg {
		animation: none !important;
	}
}

/* 1.9.40 — One segmented-control language for availability, units and the
 * accessory filters. The compact shell groups related choices without making
 * the toolbar feel like a collection of unrelated buttons. */
#spb-unit-toggle,
.spb-filter-chip-row[data-filter="accessories"] {
	display: inline-flex !important;
	align-items: stretch !important;
	gap: 2px !important;
	min-height: 40px !important;
	padding: 3px !important;
	border: 1px solid var(--spb-color-border, #dbe4ef) !important;
	border-radius: 10px !important;
	background: var(--spb-color-compare-toolbar-bg, #f3f6fa) !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
	box-sizing: border-box;
}
#spb-unit-toggle .spb-unit-btn,
.spb-filter-chip-row[data-filter="accessories"] .spb-filter-chip {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 32px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: transparent !important;
	color: var(--spb-color-body, #526176) !important;
	font-size: 10px !important;
	font-weight: 650 !important;
	line-height: 1.1 !important;
	white-space: nowrap;
	box-shadow: none !important;
}
#spb-unit-toggle .spb-unit-btn {
	flex: 1 1 0;
}
#spb-unit-toggle .spb-unit-btn:hover,
.spb-filter-chip-row[data-filter="accessories"] .spb-filter-chip:hover {
	color: var(--spb-color-heading, #0b1736) !important;
	background: rgba(255, 255, 255, .72) !important;
}
#spb-unit-toggle .spb-unit-btn.active,
.spb-filter-chip-row[data-filter="accessories"] .spb-filter-chip.active {
	color: #fff !important;
	background: var(--spb-color-primary, #0878e8) !important;
	box-shadow: 0 1px 4px rgba(8, 120, 232, .22) !important;
}
#spb-unit-toggle .spb-unit-btn:focus-visible,
.spb-filter-chip-row[data-filter="accessories"] .spb-filter-chip:focus-visible {
	outline: 2px solid var(--spb-color-primary, #0878e8);
	outline-offset: 2px;
}

/* Quantity stays selectable when the price is confirmed by enquiry. */
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale .spb-wholesale-qty-label,
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-wholesale-qty,
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-lot-hint {
	display: block !important;
}
.spb-price-tabs-card.spb-price-on-request.spb-mode-wholesale #spb-lot-hint {
	max-width: 430px;
}

/* An on-order model always retains an enquiry path, including when a shopper
 * manually returns to Retail after the automatic Wholesale switch. */
.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-retail-action-row > .spb-retail-request-btn:not([hidden]) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--spb-button-radius, 10px) !important;
	background: var(--spb-color-primary, #0878e8) !important;
	color: #fff !important;
	font-size: var(--spb-button-size, 14px) !important;
	font-weight: var(--spb-button-weight, 700) !important;
	line-height: 1.2 !important;
	cursor: pointer;
}
.spb-retail-request-btn:focus-visible {
	outline: 3px solid rgba(8, 120, 232, .28);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.spb-filter-chip-row[data-filter="accessories"] {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	.spb-filter-chip-row[data-filter="accessories"] .spb-filter-chip {
		width: 100%;
	}
}

/* 1.9.70 — Size cards: one horizontally-scrolling row (not a wrapping grid),
 * each card a self-contained mini product tile — real photo, price (+ struck
 * MRP when there's an actual saving), size, model, and a stock dot on the
 * image corner. Width is a fixed admin setting (--spb-swatch-card-width);
 * equalizeSwatchDimensions() in frontend.js only equalizes HEIGHT so every
 * card lines up evenly even though some carry a 2-line price (MRP row) and
 * others don't. */
.spb-swatch-scroller {
	position: relative;
	margin: 6px 0 16px;
	/* This sits inside WooCommerce's own <table class="variations"> cell,
	 * which (table-layout: auto, the default) sizes itself to fit its
	 * content's PREFERRED width — it has no flexbox-style "shrink to fit
	 * available space" behavior. Without this, a row of non-shrinking cards
	 * just grew the table (and the whole page) wider instead of scrolling
	 * internally. width:0 + min-width:100% decouples this element's own
	 * width from its content's intrinsic width, forcing it back to exactly
	 * the available space either way. */
	width: 0;
	min-width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.spb-summary table.variations {
	table-layout: fixed;
	width: 100%;
}
.spb-summary .spb-swatch-group {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Explicitly allow BOTH pan axes on the scroll container itself — the
	 * row pans sideways, a vertical gesture starting here scrolls the page. */
	touch-action: pan-x pan-y;
	scrollbar-width: none;
	gap: var(--spb-swatch-card-gap, 10px) !important;
	margin: 0 !important;
	/* This container clips anything past its own padding box (overflow-x:
	 * auto is what makes it scrollable) — a card's hover/active ring
	 * (box-shadow, up to 2px) needs real room here or it gets cropped
	 * exactly where there's nothing to visually back it up: the first
	 * card's left edge and the last card's right edge. 3px cut it too
	 * close; this is deliberately more generous than the ring itself needs. */
	padding: 10px 12px 10px !important;
	scroll-padding-inline: 12px;
	cursor: grab;
}
/* Touch devices: drop x-snap on this row. Mobile Safari/Chrome can let an
 * x-snap container capture mostly-vertical pans, which reads as "the page
 * won't scroll when my finger starts on a swatch" — free panning on touch,
 * snap kept for mouse/trackpad. */
@media (pointer: coarse) {
	.spb-summary .spb-swatch-group { scroll-snap-type: none !important; }
}
.spb-summary .spb-swatch-group::-webkit-scrollbar { display: none; height: 0; }
/* Click-and-drag scrolling (see the pointerdown/move/up handlers in
 * frontend.js) — "grabbing" cursor while dragging, and text/image selection
 * turned off for that moment so a fast drag doesn't select a price/size
 * label or trigger the browser's native "drag this image" ghost instead of
 * scrolling the row. */
.spb-swatch-scroller.spb-dragging .spb-swatch-group {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
}
.spb-summary .spb-swatch-btn .spb-sw-thumb img {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* Edge fade + arrow buttons — a discoverability hint on desktop/laptop that
 * this row scrolls. Manual drag/swipe/wheel-scroll always works regardless;
 * both the fade and the arrows only show on the side there's actually more
 * to see (see spb-can-scroll/spb-at-start/spb-at-end, toggled in JS). */
.spb-swatch-scroller::before,
.spb-swatch-scroller::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 6px;
	width: 32px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity .2s ease;
}
.spb-swatch-scroller::before {
	left: 0;
	background: linear-gradient(to right, var(--spb-color-page-bg, #fff), rgba(255,255,255,0));
}
.spb-swatch-scroller::after {
	right: 0;
	background: linear-gradient(to left, var(--spb-color-page-bg, #fff), rgba(255,255,255,0));
}
.spb-swatch-scroller.spb-can-scroll:not(.spb-at-start)::before,
.spb-swatch-scroller.spb-can-scroll:not(.spb-at-end)::after {
	opacity: 1;
}
/* Keep the first visible card fully crisp at every scroll position. The left
 * arrow already communicates that earlier sizes exist, so a white veil over
 * the extreme-left swatch is unnecessary and makes it appear disabled. */
.spb-swatch-scroller::before,
.spb-swatch-scroller.spb-can-scroll:not(.spb-at-start)::before {
	display: none !important;
	opacity: 0 !important;
}
.spb-swatch-scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--spb-color-swatch-border, #dceaf7);
	background: var(--spb-color-swatch-bg, #fff);
	box-shadow: 0 3px 10px rgba(15, 23, 42, .14);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--spb-color-heading, #0b1736);
	cursor: pointer;
	padding: 0;
	transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
/* An author `display` rule (even without !important) always wins over the
 * browser's own default `[hidden]{display:none}` — without this, the JS
 * toggling the `hidden` attribute at scroll-start/end had no visible effect
 * and the prev-arrow sat permanently on top of the first card's left edge,
 * which is almost certainly why that card's left border looked "missing". */
.spb-swatch-scroll-arrow[hidden] { display: none !important; }
.spb-swatch-scroll-arrow svg { width: 15px; height: 15px; }
.spb-swatch-scroll-arrow:hover {
	box-shadow: 0 5px 14px rgba(15, 23, 42, .2);
	background: var(--spb-color-swatch-selected-bg, #eaf6ff);
	color: var(--spb-color-accent, #0878e8);
}
.spb-swatch-scroll-arrow:active { transform: translateY(-50%) scale(.94); }
.spb-swatch-scroll-prev { left: -4px; }
.spb-swatch-scroll-next { right: -4px; }
@media ( max-width: 1024px ), ( hover: none ), ( pointer: coarse ) {
	/* Touch already scrolls natively (swipe) — arrow buttons would just be
	 * redundant chrome on phones/tablets. The fade hint stays: it's a
	 * lightweight cue, not an interactive control. */
	.spb-swatch-scroll-arrow { display: none !important; }
}

/* Phones that expose a desktop-sized CSS viewport (notably Samsung Internet
 * in some display modes) must still receive touch-safe swatch containment. */
@media ( max-width: 1024px ), ( pointer: coarse ) {
	.spb-swatch-scroller {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}
	.spb-summary .spb-swatch-group {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding-inline: 12px !important;
		overflow-x: auto !important;
	}
}

.spb-summary .spb-swatch-btn {
	box-sizing: border-box !important;
	flex: 0 0 var(--spb-swatch-card-width, 148px) !important;
	width: var(--spb-swatch-card-width, 148px) !important;
	scroll-snap-align: start;
	height: var(--spb-equal-swatch-height, auto) !important;
	/* Four independent sides — the admin's setting applies exactly as set,
	 * including 0, no floor. Flat border-only styling, no shadow (see
	 * below) — a shadow on the very first card in the scroller could read
	 * as a missing/uneven left border against the others. */
	padding: var(--spb-swatch-padding-top, 14px) var(--spb-swatch-padding-right, 12px) var(--spb-swatch-padding-bottom, 14px) var(--spb-swatch-padding-left, 12px) !important;
	overflow: visible !important;
	/* pan-x AND pan-y: a finger (or touchpad) starting on a card must still
	 * be able to scroll the PAGE vertically — pan-x alone blocked that. */
	touch-action: pan-x pan-y;
	box-shadow: none !important;
	transition: background-color .16s ease, border-color .16s ease !important;
}
/* Hover and active BOTH use a crisp, un-blurred ring (box-shadow, no offset/
 * blur) as the ONLY outline change — the actual `border` property never
 * changes color for either state. Changing border-color AND adding a
 * box-shadow ring at the same time rendered as two separate concentric
 * lines (a visible "double outline") since a solid border and a box-shadow
 * are two distinct painted strokes even when they're touching; one ring,
 * one mechanism, avoids that regardless of state. */
@media ( hover: hover ) {
	.spb-summary .spb-swatch-btn:not(.active):not(.disabled):hover {
		box-shadow: 0 0 0 1.5px var(--spb-color-accent, #0878e8) !important;
	}
}
/* Selected uses the exact same ring as hover (not a thicker one) — one
 * consistent outline effect for both states, per request. */
.spb-summary .spb-swatch-btn.active {
	box-shadow: 0 0 0 1.5px var(--spb-color-accent, #0878e8) !important;
	background: var(--spb-color-swatch-selected-bg, #eaf6ff) !important;
}

.spb-summary .spb-swatch-btn .spb-sw-size,
.spb-summary .spb-swatch-btn .spb-sw-model {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden !important;
	line-height: 1.3 !important;
}
.spb-summary .spb-swatch-btn .spb-sw-model {
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}
/* Compact single-line dimension language: L6.W6.H6. */
.spb-summary .spb-swatch-btn .spb-sw-size {
	white-space: nowrap !important;
	display: block !important;
	text-overflow: ellipsis !important;
	text-align: center;
	font-size: var(--spb-swatch-size-font-size, 12px) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}
/* Model line reads as secondary/meta purely through its own muted color
 * (--spb-color-swatch-muted, set below) and smaller size — no divider. */
.spb-summary .spb-swatch-btn .spb-sw-model {
	margin-top: 2px;
	font-size: var(--spb-swatch-model-font-size, 9.5px) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
}

/* Price row: the whole reason each card carries this much information — a
 * shopper compares sizes by price at a glance instead of tapping through
 * each one. The current price sits on its own small ribbon/badge (reusing
 * the existing Badge background/text colors, which already default to
 * yellow/dark-brown — see "Gallery & Badges" settings) rather than as plain
 * bold text — a struck MRP only appears when there's an actual saving
 * (spbSwatchPriceHtml() in frontend.js), same "MRP stroked only if it's
 * really a discount" rule the main price card already follows. */
.spb-summary .spb-swatch-btn .spb-sw-price {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 7px;
	row-gap: 3px;
	width: 100%;
	margin: 8px 0 6px;
}

/* 1.9.70 — Narrow-phone layout contract. No informational sentence or
 * purchase action is allowed to establish a width wider than the viewport.
 * Wide comparison data keeps its own horizontal scroller. */
@media ( max-width: 600px ) {
	.spb-product,
	.spb-product > *,
	.spb-hero-grid,
	.spb-summary,
	.spb-price-tabs-card,
	.spb-compare,
	.spb-spec {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.spb-summary,
	.spb-price-tabs-card,
	.spb-selected-bar,
	.spb-price-tabs-amount,
	.spb-selected-note,
	.spb-sub-note,
	.spb-stock-line {
		overflow-wrap: anywhere !important;
		word-break: normal !important;
		white-space: normal !important;
	}
	.spb-selected-bar {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 4px 7px !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 12px 14px !important;
	}
	.spb-price-tabs-amount.is-prompt {
		display: block !important;
		line-height: 1.4 !important;
	}
	.spb-retail-action-row,
	.spb-price-tabs-card .spb-wholesale-action-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.spb-retail-action-row > .single_add_to_cart_button,
	.spb-retail-action-row > .spb-more-info-btn,
	.spb-price-tabs-card .spb-wholesale-action-row > * {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	.spb-tc-link {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 14px 0 0 !important;
		text-align: left !important;
		white-space: normal !important;
	}
	.spb-trust-row,
	.spb-below-price-row {
		flex-wrap: wrap !important;
		width: 100% !important;
		min-width: 0 !important;
	}
	.spb-compare-head h2,
	.spb-compare-head p,
	.spb-spec h2 {
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}
	.spb-mobile-compare-wrap,
	.spb-compare-table-wrap {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}
.spb-summary .spb-swatch-btn .spb-sw-price-now {
	display: inline-flex;
	align-items: baseline;
	background: var(--spb-color-swatch-price-bg, #f4b740);
	color: var(--spb-color-swatch-price-text, #3d2900);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding: 3px 8px;
	border-radius: 6px;
	line-height: 1.35;
}
.spb-summary .spb-swatch-btn .spb-sw-price-unit {
	font-size: 9px;
	font-weight: 600;
	opacity: .8;
	margin-left: 2px;
}
.spb-summary .spb-swatch-btn .spb-sw-price-mrp {
	font-size: 11px;
	font-weight: 500;
	color: var(--spb-color-regular-price, #8b95a5);
	text-decoration: line-through;
	white-space: nowrap;
}
/* Always exactly ONE line, same reasoning as the size/model text — it was
 * wrapping to 2 lines on some cards and staying on 1 on others depending on
 * how much room the card's own width left, an inconsistent look card to
 * card. Color/size/weight are independently admin-configurable (separate
 * from any other swatch text), with a distinct color for when the card is
 * the selected one. */
.spb-summary .spb-swatch-btn .spb-sw-price-request {
	display: block;
	width: 100%;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--spb-swatch-price-request-font-size, 10.5px);
	font-weight: var(--spb-swatch-price-request-weight, 600);
	color: var(--spb-color-swatch-price-request, #7b8799);
	line-height: 1.3;
}
.spb-summary .spb-swatch-btn.active .spb-sw-price-request {
	color: var(--spb-color-swatch-price-request-active, #0878e8);
}

/* Real product photo, not a tiny badge — fills the card width at a square
 * aspect ratio and shows the whole item (object-fit: contain) rather than
 * cropping into it. --spb-swatch-thumb-size (a fixed px value) doesn't
 * apply to this card layout — the image scales with the card's own
 * (admin-configurable) width instead, so it always fills it cleanly. */
.spb-summary .spb-swatch-btn .spb-sw-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 0;
	border-radius: calc(var(--spb-swatch-radius, 12px) - 4px);
	/* No overflow: hidden here — the stock dot sits just inside this box's
	 * corner and its ripple animation expands OUTWARD past the dot itself;
	 * clipping the box would cut the ripple off right at the edge. The image
	 * doesn't need the clip anyway (object-fit: contain never overflows its
	 * box), so its own matching border-radius below is enough to keep the
	 * rounded-corner look. */
	flex-shrink: 0;
	/* Separate from the card's own background/border settings — see
	 * "Thumbnail box background" / "Thumbnail box outline" in Variation
	 * Swatches settings. */
	background: var(--spb-color-swatch-thumb-bg, #f8fafc);
	border: 1px solid var(--spb-color-swatch-thumb-border, #e7edf5);
}
.spb-summary .spb-swatch-btn .spb-sw-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}
/* The thumbnail's own border stays its normal color always — it no longer
 * changes on selection. The card's own outer ring (box-shadow, above) is the
 * ONLY selection indicator now: a colored outer ring plus a differently-
 * colored inner box around just the image read as two nested, conflicting
 * outlines rather than one clean one. */

/* Stock dot lives on the image itself (top-right corner), never on the card
 * body — it can't overlap the price/size/model text below it that way,
 * regardless of card size or how many lines the price row takes. */
.spb-summary .spb-swatch-btn .spb-sw-stock-dot {
	top: 6px;
	right: 6px;
	bottom: auto;
}

/* Variation-specific Shape stays absent until an exact model is selected. */
.spb-context-chip[hidden] {
	display: none !important;
}

/* 1.9.44 — Comparison toolbar controls share one 44px white input surface.
 * Availability and unit choices use quiet text separators instead of a tinted
 * segmented shell, while the selected choice remains clear and accessible. */
.spb-compare-toolbar-row2 > .spb-filters-toggle,
.spb-compare-toolbar-row2 > .spb-filter-search,
.spb-compare-toolbar-row2 > #spb-stock-filter-toggle,
.spb-compare-toolbar-row2 > #spb-unit-toggle {
	height: 44px !important;
	min-height: 44px !important;
	box-sizing: border-box !important;
	border: var(--spb-input-border-width, 1.3px) solid var(--spb-color-input-border, #e1e1e1) !important;
	border-radius: var(--spb-input-radius, 10px) !important;
	background: var(--spb-color-input-bg, #fff) !important;
	box-shadow: none !important;
}
#spb-stock-filter-toggle,
#spb-unit-toggle {
	align-items: center !important;
	gap: 0 !important;
	padding: 0 4px !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn,
#spb-unit-toggle .spb-unit-btn {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 11px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--spb-color-body, #526176) !important;
	box-shadow: none !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn + .spb-stock-filter-btn::before,
#spb-unit-toggle .spb-unit-btn + .spb-unit-btn::before {
	content: "|";
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translateY(-52%);
	color: var(--spb-color-input-border, #cbd5e1);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
}
#spb-stock-filter-toggle .spb-stock-filter-btn:hover,
#spb-unit-toggle .spb-unit-btn:hover {
	background: transparent !important;
	color: var(--spb-color-heading, #0b1736) !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn.active,
#spb-unit-toggle .spb-unit-btn.active {
	background: transparent !important;
	color: var(--spb-color-primary, #0878e8) !important;
	font-weight: 700 !important;
	box-shadow: inset 0 -2px 0 var(--spb-color-primary, #0878e8) !important;
}

@media (max-width: 760px) {
	#spb-stock-filter-toggle .spb-stock-filter-btn,
	#spb-unit-toggle .spb-unit-btn {
		height: 42px !important;
		min-height: 42px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
}

/* 1.9.46 — Keep one deliberate gap above every Retail and Wholesale action
 * row. Spacing belongs to the row (not individual buttons), so Add to Cart,
 * Request Price, Add to Order and More Info always remain vertically aligned. */
.spb-price-tabs-card:not(.spb-mode-wholesale) .quantity {
	margin-bottom: 0 !important;
}
.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-retail-action-row,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

/* 1.9.48 — Technical Details and Specifications use an integrated panel
 * header instead of a detached label. The subtle tint strengthens grouping
 * without competing with the main Product Information heading. */
.spb-spec-grid > div {
	box-sizing: border-box;
	border: 1px solid var(--spb-color-spec-border, #dce6f2) !important;
	border-radius: 14px !important;
	overflow: hidden;
	background: var(--spb-color-spec-panel-bg, #f8fbff) !important;
}
.spb-spec-grid > div > .spb-spec-subhead {
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 13px 18px !important;
	border-bottom: 1px solid var(--spb-color-spec-border, #dce6f2) !important;
	background: #eaf1f8 !important;
	background: color-mix(in srgb, var(--spb-color-spec-panel-bg, #f8fbff) 88%, var(--spb-color-heading, #0b1736)) !important;
	color: var(--spb-color-heading, #0b1736) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
}
.spb-spec-grid > div > .spb-spec-drawing-box,
.spb-spec-grid > div > .spb-spec-table-wrap {
	border: 0 !important;
	border-radius: 0 !important;
}

@media (max-width: 760px) {
	.spb-spec-grid > div {
		border-radius: 0 !important;
	}
	.spb-spec-grid > div > .spb-spec-subhead {
		padding: 12px 14px !important;
	}
}

/* 1.9.49 — Dedicated dashboard colours for summary labels, unavailable
 * purchase actions and the integrated Product Information panel headers. */
.spb-product .spb-price-range-badge {
	background: var(--spb-color-price-range-bg, #0878e8) !important;
	color: var(--spb-color-price-range-text, #fff) !important;
}
.spb-product .spb-context-chip {
	background: var(--spb-color-context-chip-bg, #eaf6ff) !important;
	color: var(--spb-color-context-chip-text, #0b1736) !important;
}
.spb-summary .single_add_to_cart_button.disabled,
.spb-summary .single_add_to_cart_button.wc-variation-selection-needed,
.spb-summary .single_add_to_cart_button:disabled,
.spb-price-tabs-card .spb-add-size-btn:disabled {
	background: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	background-color: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	border-color: var(--spb-color-button-disabled-bg, #d8e0ea) !important;
	color: var(--spb-color-button-disabled-text, #526176) !important;
}
.spb-spec-grid > div > .spb-spec-subhead {
	background: var(--spb-color-spec-header-bg, #eaf1f8) !important;
	color: var(--spb-color-spec-header-text, #0b1736) !important;
}

/* 1.9.50 — Calm, actionable guidance when purchase is attempted before a
 * variation is selected. This is intentionally informational (blue), has no
 * close/error icon, and moves no surrounding controls while it animates. */
.spb-selection-guide {
	display: flex;
	align-items: center;
	gap: 11px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;
	padding: 11px 13px;
	border: 1px solid #b9d9f7;
	border: 1px solid color-mix(in srgb, var(--spb-color-accent, #0878e8) 38%, #fff);
	border-radius: 10px;
	background: #f1f8ff;
	background: color-mix(in srgb, var(--spb-color-accent, #0878e8) 8%, #fff);
	color: var(--spb-color-heading, #0b1736);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
}
.spb-selection-guide.is-visible {
	opacity: 1;
	transform: translateY(0);
	animation: spbSelectionGuideGlow .45s ease-in-out 2;
}
.spb-selection-guide.is-leaving { opacity: 0; transform: translateY(-3px); }
.spb-selection-guide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--spb-color-accent, #0878e8);
	color: #fff;
}
.spb-selection-guide-icon svg { width: 19px; height: 19px; }
.spb-selection-guide strong,
.spb-selection-guide small { display: block; }
.spb-selection-guide strong { font-size: 13.5px; line-height: 1.35; font-weight: 700; }
.spb-selection-guide small { margin-top: 2px; color: var(--spb-color-body, #526176); font-size: 12px; line-height: 1.4; }
@keyframes spbSelectionGuideGlow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spb-color-accent, #0878e8) 0%, transparent); }
	50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--spb-color-accent, #0878e8) 14%, transparent); }
}
.spb-spec-dynamic-row td { transition: color .18s ease; }
@media ( prefers-reduced-motion: reduce ) {
	.spb-selection-guide,
	.spb-selection-guide.is-visible { animation: none !important; transition: none !important; }
}
@media ( max-width: 760px ) {
	.spb-selection-guide { padding: 10px 11px; gap: 9px; }
	.spb-selection-guide-icon { flex-basis: 30px; width: 30px; height: 30px; }
}

/* One measurement control language in both the swatch header and comparison
 * toolbar. JavaScript keeps their active state and displayed values in sync. */
.spb-swatch-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 20px;
	row-gap: 10px;
}
#spb-swatch-unit-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 1px solid var(--spb-color-input-border, #cbd5e1) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-sizing: border-box;
}
#spb-swatch-unit-toggle .spb-unit-btn {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--spb-color-body, #526176) !important;
	font-size: 11px !important;
	font-weight: 650 !important;
	line-height: 1 !important;
	box-shadow: none !important;
}
#spb-swatch-unit-toggle .spb-unit-btn + .spb-unit-btn::before {
	content: "|";
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translateY(-52%);
	color: var(--spb-color-input-border, #cbd5e1);
	font-weight: 400;
}
#spb-swatch-unit-toggle .spb-unit-btn.active {
	color: var(--spb-color-primary, #0878e8) !important;
	font-weight: 700 !important;
	box-shadow: inset 0 -2px 0 var(--spb-color-primary, #0878e8) !important;
}
@media ( max-width: 760px ) {
	.spb-swatch-header { align-items: flex-start; }
	.spb-swatch-header-actions { flex-wrap: wrap; column-gap: 14px; row-gap: 10px; }
	#spb-swatch-unit-toggle { height: 36px !important; min-height: 36px !important; }
	#spb-swatch-unit-toggle .spb-unit-btn { height: 34px !important; min-height: 34px !important; padding: 0 7px !important; font-size: 10.5px !important; }
}

/* Do not animate unselected choices continuously. Attention is requested only
 * after an attempted purchase, for two short pulses, then the UI becomes still. */
.spb-swatch-group.spb-needs-selection:not(.spb-needs-attention):not(.spb-prompt-blink) .spb-swatch-btn:not(.disabled) {
	animation: none !important;
}
.spb-swatch-group.spb-needs-attention .spb-swatch-btn:not(.disabled),
.spb-swatch-group.spb-prompt-blink .spb-swatch-btn:not(.disabled) {
	animation-duration: .65s !important;
	animation-iteration-count: 2 !important;
}

/* 1.9.52 — Clear vertical rhythm through both purchase modes: label → select
 * → action row. The row owns the final gap so paired buttons stay aligned. */
.spb-price-tabs-card:not(.spb-mode-wholesale) .quantity::before,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-qty-label {
	margin-bottom: 10px !important;
}
.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-retail-action-row,
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
	margin-top: 18px !important;
}
.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-builder {
	row-gap: 0 !important;
}
@media ( max-width: 760px ) {
	.spb-price-tabs-card:not(.spb-mode-wholesale) .quantity::before,
	.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-qty-label {
		margin-bottom: 9px !important;
	}
	.spb-price-tabs-card:not(.spb-mode-wholesale) .spb-retail-action-row,
	.spb-price-tabs-card.spb-mode-wholesale .spb-wholesale-action-row {
		margin-top: 16px !important;
	}
}

/* 1.9.60 — Comparison table Size/Model cell: exactly ONE line for the
 * dimension value. renderCompactTableSize() in frontend.js used to give a row
 * with a Height value a deliberate 2nd line while a row without Height
 * stayed on 1 — combined with the Model line below, that read as an
 * inconsistent 2-vs-3-line mix. It now always renders one string; nowrap
 * here keeps it on one line (the column simply sizes to fit, same as any
 * other auto-layout table column — the table already scrolls horizontally).
 *
 * 1.9.62 — Tied to the existing "Cell text size (px)" backend setting
 * (--spb-table-body-size) instead of a hardcoded 13px, so that control
 * actually governs this column too — it's the most prominent text in the
 * table, so a previous hardcoded value made the setting look like it did
 * nothing. Size stays a touch larger than plain body text (it's the row's
 * anchor) and Model a touch smaller (it's meta); both scale with the one
 * setting. Appended last so it wins over every earlier compare-table
 * text-size pass above. */
.spb-compare-table .spb-size-cell .spb-sz,
.spb-compare-table td.spb-compare-spec-value .spb-sz {
	font-size: calc(var(--spb-table-body-size, 14px) + 1px) !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
.spb-compare-table .spb-td-model,
.spb-compare-table td.spb-compare-spec-value .spb-td-model {
	font-size: calc(var(--spb-table-body-size, 14px) - 3px) !important;
	white-space: nowrap !important;
}

/* Comparison-table and swatch thumbnail size are both admin-configurable
 * (see the "Variation Swatches" and "Comparison Table" settings sections —
 * SPB_Settings compiles the chosen px values to these two custom properties). */
.spb-compare-thumb img {
	width: var(--spb-compare-thumb-size, 64px) !important;
	height: var(--spb-compare-thumb-size, 64px) !important;
}
@media ( max-width: 760px ) {
	.spb-mobile-compare-table td img {
		width: min(var(--spb-compare-thumb-size, 64px), 60px) !important;
		height: min(var(--spb-compare-thumb-size, 64px), 60px) !important;
	}
}

/* 1.9.74 — Retail/B2B and Feet/Meters are TWO SEPARATE bordered boxes (each
 * its own .spb-price-tabs / #spb-swatch-unit-toggle container, with normal
 * spacing between them), not one shared bar — and Size Chart stays outside
 * both, as a plain link. Every active choice is a filled highlight chip on
 * the choice itself, not an underline. Pure visual reset: the underlying
 * #spb-price-tabs delegated click handlers and the Feet/Meters
 * unit-conversion logic are completely untouched.
 *
 * Connected segmented-control look inside EACH box: a rectangle, a small
 * corner radius, and `overflow: hidden` clipping its own two options to that
 * shape — both stay perfectly SQUARE (border-radius: 0), and only whichever
 * one sits at that box's own left/right edge visually picks up the
 * container's rounding where it's clipped — "first active → rounded left
 * only, last active → rounded right only" — without hand-tuning radii. */
.spb-swatch-header-actions {
	flex-wrap: nowrap !important;
	column-gap: 14px !important;
	row-gap: 0 !important;
	align-items: center !important;
}
.spb-swatch-header-actions .spb-price-tabs,
.spb-swatch-header-actions #spb-swatch-unit-toggle {
	position: static !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: stretch !important;
	height: 40px !important;
	border: 1px solid var(--spb-color-input-border, #dceaf7) !important;
	border-radius: 8px !important;
	background: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: none !important;
	box-shadow: none !important;
	overflow: hidden !important;
}
.spb-swatch-header-actions .spb-price-tab-indicator {
	display: none !important;
}
.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn + .spb-unit-btn::before {
	display: none !important;
}
.spb-swatch-header-actions .spb-price-tab,
.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn {
	position: relative !important;
	z-index: 1 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: 100% !important;
	min-height: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	border: none !important;
	border-right: 1px solid var(--spb-color-input-border, #e5e9f0) !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--spb-color-body, #4f5d73) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	padding: 0 13px !important;
	border-radius: 0 !important;
	transition: background-color .15s ease, color .15s ease !important;
}
/* Each box's own last option gets no trailing divider (nothing after it
 * inside that box) — the divider between the two BOXES themselves is just
 * the normal gap from .spb-swatch-header-actions' column-gap above. */
.spb-swatch-header-actions .spb-price-tab:last-child,
.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn:last-child {
	border-right: none !important;
}
.spb-swatch-header-actions .spb-price-tab svg,
.spb-swatch-header-actions #spb-swatch-unit-toggle svg { display: none !important; }
@media ( hover: hover ) {
	.spb-swatch-header-actions .spb-price-tab:not(.active):hover,
	.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn:not(.active):hover {
		color: var(--spb-color-heading, #0b1736) !important;
		background: none !important;
	}
}
.spb-swatch-header-actions .spb-price-tab.active,
.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn.active {
	/* Its own color (Price Card & Tabs → "Active tab background/text"), not
	 * the Add to Cart button's — a theme can legitimately want those to
	 * differ (e.g. navy toggles with a coral button), and hard-wiring both
	 * to the same color made that impossible. */
	color: var(--spb-color-tab-active-text, #fff) !important;
	background: var(--spb-color-tab-active-bg, #0878e8) !important;
	box-shadow: none !important;
}
.spb-swatch-header-actions > .spb-size-chart-btn {
	flex: 0 0 auto !important;
}
@media ( max-width: 760px ) {
	.spb-swatch-header-actions .spb-price-tabs,
	.spb-swatch-header-actions #spb-swatch-unit-toggle {
		height: 38px !important;
	}
	.spb-swatch-header-actions .spb-price-tab,
	.spb-swatch-header-actions #spb-swatch-unit-toggle .spb-unit-btn {
		padding: 0 9px !important;
		font-size: 10.5px !important;
	}
}

/* Same segmented-control treatment for the comparison table's own Stock
 * filter and Feet/Meters toggles (All / In Stock / Out of Stock / On Order,
 * and Feet / Meters) — "all toggles should look the same", not just the
 * swatch header ones. */
#spb-stock-filter-toggle,
#spb-unit-toggle {
	overflow: hidden !important;
	gap: 0 !important;
	padding: 0 !important;
	border-radius: 8px !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn + .spb-stock-filter-btn::before,
#spb-unit-toggle .spb-unit-btn + .spb-unit-btn::before {
	display: none !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn,
#spb-unit-toggle .spb-unit-btn {
	height: 100% !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	border-right: 1px solid var(--spb-color-input-border, #cbd5e1) !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn:last-child,
#spb-unit-toggle .spb-unit-btn:last-child {
	border-right: none !important;
}
#spb-stock-filter-toggle .spb-stock-filter-btn.active,
#spb-unit-toggle .spb-unit-btn.active {
	background: var(--spb-color-tab-active-bg, #0878e8) !important;
	color: var(--spb-color-tab-active-text, #fff) !important;
	box-shadow: none !important;
}

/* A selected card that also gains keyboard/right-click focus was showing
 * TWO rings at once: its own selection ring (box-shadow, touching the card
 * edge) plus the separate :focus-visible outline (offset 3px further out).
 * The selection ring already makes it obvious which card this is, so the
 * extra offset ring is redundant here — suppressed only when already
 * selected; an unselected card tabbed/right-clicked into focus still gets
 * the normal focus outline, that accessibility signal is untouched. */
.spb-summary .spb-swatch-btn.active:focus-visible {
	outline: none !important;
}

/* 1.9.59 — Final, single-owner swatch state model.
 * The moving indicator alone paints selection. The button paints neutral,
 * hover, focus and unavailable states, so two concentric borders can never
 * be produced when active + hover/focus/context-menu overlap. */
.spb-summary .spb-swatch-indicator {
	box-sizing: border-box !important;
	border: 2px solid var(--spb-color-swatch-highlight, #ff5a3c) !important;
	box-shadow: none !important;
	pointer-events: none !important;
}
.spb-summary .spb-swatch-btn,
.spb-summary .spb-swatch-btn:not(.active) {
	border: var(--spb-border-width, 1px) solid var(--spb-color-swatch-border, #d5dfec) !important;
	background: var(--spb-color-swatch-bg, #fff) !important;
	box-shadow: none !important;
	outline: none;
}
.spb-summary .spb-swatch-btn.active,
.spb-summary .spb-swatch-btn.active:hover,
.spb-summary .spb-swatch-btn.active:active,
.spb-summary .spb-swatch-btn.active:focus,
.spb-summary .spb-swatch-btn.active:focus-visible {
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}
@media ( hover: hover ) {
	/* .spb-v2-in-cart excluded: a card with quantity added keeps its
	 * persistent in-cart background — without this, hovering it (which is
	 * exactly where the mouse is right after tapping its + button, or when
	 * passing over it on the way to another card) repainted it with this
	 * temporary pastel highlight mix. */
	.spb-summary .spb-swatch-btn:not(.active):not(.spb-v2-in-cart):not(.disabled):not(:disabled):hover {
		border-color: var(--spb-color-swatch-highlight, #ff5a3c) !important;
		background: color-mix(in srgb, var(--spb-color-swatch-bg, #fff) 94%, var(--spb-color-swatch-highlight, #ff5a3c)) !important;
		box-shadow: none !important;
	}
}
.spb-summary .spb-swatch-btn:not(.active):not(.disabled):not(:disabled):focus-visible {
	outline: var(--spb-focus-outline-width, 2px) solid var(--spb-color-focus-outline, #0147ca) !important;
	outline-offset: 3px !important;
}
.spb-summary .spb-swatch-btn.disabled,
.spb-summary .spb-swatch-btn:disabled {
	border-color: color-mix(in srgb, var(--spb-color-swatch-border, #d5dfec) 72%, #fff) !important;
	background: var(--spb-color-surface-soft, #f6f9fd) !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: .52 !important;
	filter: grayscale(.18);
}
.spb-summary .spb-swatch-btn.disabled .spb-sw-size,
.spb-summary .spb-swatch-btn.disabled .spb-sw-model,
.spb-summary .spb-swatch-btn:disabled .spb-sw-size,
.spb-summary .spb-swatch-btn:disabled .spb-sw-model {
	color: var(--spb-color-muted, #64748b) !important;
}

/* B2B comparison cue: every wholesale swatch states the exact lot minimum. */
.spb-summary .spb-swatch-btn .spb-sw-moq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--spb-color-swatch-moq-bg, #edf4ff);
	color: var(--spb-color-swatch-moq-text, #071a3d);
	font-size: var(--spb-swatch-moq-font-size, 9.5px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
}
.spb-summary .spb-swatch-btn.active .spb-sw-moq {
	background: var(--spb-color-swatch-moq-bg, #edf4ff);
	color: var(--spb-color-swatch-moq-text, #071a3d);
}

/* More Info owns an independent palette; changing swatch highlights cannot
 * recolor this action and vice versa. */
.spb-retail-action-row > .spb-more-info-btn,
.spb-price-tabs-card .spb-wholesale-action-row > .spb-wholesale-more-info-btn {
	background: var(--spb-color-more-info-bg, #fff) !important;
	border-color: var(--spb-color-more-info-border, #ff5a3c) !important;
	color: var(--spb-color-more-info-text, #ff5a3c) !important;
}
.spb-retail-action-row > .spb-more-info-btn:hover,
.spb-price-tabs-card .spb-wholesale-action-row > .spb-wholesale-more-info-btn:hover {
	background: var(--spb-color-more-info-hover-bg, #ff5a3c) !important;
	border-color: var(--spb-color-more-info-hover-bg, #ff5a3c) !important;
	color: var(--spb-color-more-info-hover-text, #fff) !important;
}

/* Cross-browser mobile containment. Samsung Internet is especially strict
 * about intrinsic table/flex widths; every wide component scrolls internally
 * instead of widening the page canvas. */
@media ( max-width: 980px ) {
	html, body { max-width: 100%; overflow-x: hidden; }
	.spb-product { width: 100%; max-width: 100%; min-width: 0; margin-left: auto; margin-right: auto; overflow-x: hidden; overflow-x: clip; }
	.spb-hero-grid { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
	.spb-hero-grid .spb-gallery,
	.spb-hero-grid .spb-summary { grid-column: 1; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
	.spb-summary table.variations,
	.spb-summary table.variations tbody,
	.spb-summary table.variations tr,
	.spb-summary table.variations td { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
	.spb-swatch-scroller { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
	.spb-summary .spb-swatch-group { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; }
}

/* 1.9.61 — One physical border per state. The old translated indicator is
 * intentionally not painted: combining that layer with the button's border
 * was the source of the two concentric outlines on hover/focus/right-click. */
.spb-summary .spb-swatch-indicator {
	display: none !important;
}
.spb-summary .spb-swatch-btn,
.spb-summary .spb-swatch-btn:not(.active) {
	-webkit-appearance: none !important;
	appearance: none !important;
	border-style: solid !important;
	border-width: var(--spb-swatch-border-width, 1px) !important;
	border-color: var(--spb-color-swatch-border, #dceaf7) !important;
	outline: 0 !important;
	box-shadow: none !important;
}
@media ( hover: hover ) {
	/* Hover consumes its OWN "Hover outer border" / "Hover background"
	 * fields — previously this hardwired the selected color, leaving the
	 * hover fields with no visible effect. Selected cards are excluded:
	 * with hover and selected now allowed to differ per mode, a selected
	 * card must keep its selected colors under the pointer instead of
	 * flipping to the hover set. */
	.spb-summary .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled):not(:disabled):hover {
		border-width: var(--spb-swatch-hover-border-width, var(--spb-swatch-selected-border-width, 2px)) !important;
		border-color: var(--spb-color-swatch-hover-border, var(--spb-color-swatch-highlight, #ff5a3c)) !important;
		background: var(--spb-color-swatch-hover-bg, var(--spb-color-swatch-selected-bg, #edf4ff)) !important;
		outline: 0 !important;
		box-shadow: none !important;
	}
}
.spb-summary .spb-swatch-btn.active,
.spb-summary .spb-swatch-btn[aria-pressed="true"],
.spb-summary .spb-swatch-btn.is-selected-persistent,
.spb-summary .spb-swatch-btn.active:hover,
.spb-summary .spb-swatch-btn[aria-pressed="true"]:hover,
.spb-summary .spb-swatch-btn.is-selected-persistent:hover,
.spb-summary .spb-swatch-btn.active:active {
	border-width: var(--spb-swatch-selected-border-width, 2px) !important;
	border-color: var(--spb-color-swatch-highlight, #ff5a3c) !important;
	background: var(--spb-color-swatch-selected-bg, #edf4ff) !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* Persistent selection wins after mouse focus leaves and over any incidental
 * WooCommerce active-class reset. It still uses one physical border only. */
.spb-summary .spb-swatch-btn.is-selected-persistent,
.spb-summary .spb-swatch-btn.is-selected-persistent:hover,
.spb-summary .spb-swatch-btn.is-selected-persistent:focus,
.spb-summary .spb-swatch-btn.is-selected-persistent:focus-visible {
	border-style: solid !important;
	border-width: var(--spb-swatch-selected-border-width, 2px) !important;
	border-color: var(--spb-color-swatch-highlight, #ff5a3c) !important;
	background: var(--spb-color-swatch-selected-bg, #edf4ff) !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* The selected-summary check is part of the sentence, not an independent
 * accent badge. It inherits the same navy text color as the full message. */
.spb-selected-bar .spb-sb-check {
	color: inherit !important;
}
/* Keyboard focus only (:focus-visible), and never on a selected card — a
 * plain :focus match meant every MOUSE CLICK left the just-clicked card
 * painted with the blue focus border instead of its configured selected
 * colors ("a blue color out of nowhere") until focus moved elsewhere. */
.spb-summary .spb-swatch-btn:focus-visible:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent) {
	border-width: var(--spb-swatch-focus-border-width, 2px) !important;
	border-color: var(--spb-color-swatch-focus-border, #0147ca) !important;
	outline: 0 !important;
	box-shadow: none !important;
}
.spb-summary .spb-swatch-btn:focus {
	outline: 0 !important;
}
.spb-summary .spb-swatch-btn.disabled,
.spb-summary .spb-swatch-btn:disabled,
.spb-summary .spb-swatch-btn.disabled:hover,
.spb-summary .spb-swatch-btn:disabled:hover,
.spb-summary .spb-swatch-btn.disabled:focus,
.spb-summary .spb-swatch-btn:disabled:focus {
	border-width: var(--spb-swatch-disabled-border-width, 1px) !important;
	border-color: var(--spb-color-swatch-disabled-border, #dce5f0) !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* 1.9.62 — Quiet information architecture inside each swatch card. Price/MRP
 * and MOQ form the commerce zone; dimensions and model form the identity
 * zone. Hairline separators create structure without turning every line into
 * another badge or adding visual weight around the card. */
.spb-summary .spb-swatch-btn .spb-sw-text {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}
.spb-summary .spb-swatch-btn .spb-sw-thumb {
	margin-bottom: 10px !important;
}
.spb-summary .spb-swatch-btn .spb-sw-thumb::after {
	display: none !important;
}
.spb-summary .spb-swatch-btn .spb-sw-thumb-separator {
	display: block !important;
	flex: 0 0 1px;
	width: 100%;
	height: 1px;
	margin: -4px 0 5px;
	background: var(--spb-color-swatch-border, #dceaf7);
	opacity: .82;
	pointer-events: none;
}
.spb-summary .spb-swatch-btn .spb-sw-price {
	min-height: 54px;
	margin: 4px 0 0;
	padding: 0 2px 10px;
	border-bottom: 1px solid color-mix(in srgb, var(--spb-color-swatch-border, #dceaf7) 78%, transparent);
}
.spb-summary .spb-swatch-btn .spb-sw-size {
	margin-top: 9px;
	padding: 0 2px 7px;
}
.spb-summary .spb-swatch-btn .spb-sw-model {
	position: relative;
	margin-top: 0 !important;
	padding: 7px 3px 0;
	border-top: 1px solid color-mix(in srgb, var(--spb-color-swatch-border, #dceaf7) 62%, transparent);
	font-weight: 600 !important;
}
.spb-summary .spb-swatch-btn .spb-sw-moq {
	margin-top: 3px;
}

/* Final phone overrides — deliberately last in this layered stylesheet. */
@media ( max-width: 600px ) {
	.spb-product,
	.spb-product > *,
	.spb-hero-grid,
	.spb-summary,
	.spb-price-tabs-card,
	.spb-compare,
	.spb-spec {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.spb-summary,
	.spb-price-tabs-card { overflow: hidden !important; }
	.spb-selected-bar,
	.spb-price-tabs-amount,
	.spb-selected-note,
	.spb-stock-line,
	.spb-sub-note,
	.spb-compare-head h2,
	.spb-compare-head p {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}
	.spb-selected-bar {
		display: flex !important;
		flex-wrap: wrap !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 4px 7px !important;
		padding: 12px 14px !important;
	}
	.spb-retail-action-row,
	.spb-price-tabs-card .spb-wholesale-action-row {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.spb-retail-action-row > *,
	.spb-price-tabs-card .spb-wholesale-action-row > * {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.spb-tc-link {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 14px 0 0 !important;
		text-align: left !important;
		white-space: normal !important;
	}
	.spb-trust-row,
	.spb-below-price-row { flex-wrap: wrap !important; width: 100% !important; min-width: 0 !important; }
	.spb-mobile-compare-wrap,
	.spb-compare-table-wrap { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; }
}

/* Final action palette layer: intentionally follows legacy compatibility rules. */
.spb-product .spb-compare-select-btn {
	background: var(--spb-color-buy-now-bg, #0147ca) !important;
	color: var(--spb-color-buy-now-text, #fff) !important;
	border: 1px solid var(--spb-color-buy-now-border, #0147ca) !important;
}
.spb-product .spb-compare-select-btn:hover,
.spb-product .spb-compare-select-btn:focus-visible {
	background: var(--spb-color-buy-now-hover-bg, #00389f) !important;
	color: var(--spb-color-buy-now-hover-text, #fff) !important;
	border-color: var(--spb-color-buy-now-hover-bg, #00389f) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="enquire"] {
	background: var(--spb-color-enquire-bg, #d97706) !important;
	color: var(--spb-color-enquire-text, #fff) !important;
	border: 1px solid var(--spb-color-enquire-border, #d97706) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="enquire"]:hover,
.spb-product .spb-compare-notify-btn[data-notify-mode="enquire"]:focus-visible {
	background: var(--spb-color-enquire-hover-bg, #b45309) !important;
	color: var(--spb-color-enquire-hover-text, #fff) !important;
	border-color: var(--spb-color-enquire-hover-bg, #b45309) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="notify"] {
	background: var(--spb-color-notify-bg, #7c3aed) !important;
	color: var(--spb-color-notify-text, #fff) !important;
	border: 1px solid var(--spb-color-notify-border, #7c3aed) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="notify"]:hover,
.spb-product .spb-compare-notify-btn[data-notify-mode="notify"]:focus-visible {
	background: var(--spb-color-notify-hover-bg, #6d28d9) !important;
	color: var(--spb-color-notify-hover-text, #fff) !important;
	border-color: var(--spb-color-notify-hover-bg, #6d28d9) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="price"],
.spb-product .spb-compare-request-price-btn {
	background: var(--spb-color-request-price-bg, #0f766e) !important;
	color: var(--spb-color-request-price-text, #fff) !important;
	border: 1px solid var(--spb-color-request-price-border, #0f766e) !important;
}
.spb-product .spb-compare-notify-btn[data-notify-mode="price"]:hover,
.spb-product .spb-compare-notify-btn[data-notify-mode="price"]:focus-visible,
.spb-product .spb-compare-request-price-btn:hover,
.spb-product .spb-compare-request-price-btn:focus-visible {
	background: var(--spb-color-request-price-hover-bg, #115e59) !important;
	color: var(--spb-color-request-price-hover-text, #fff) !important;
	border-color: var(--spb-color-request-price-hover-bg, #115e59) !important;
}
.spb-product .spb-sticky-btn {
	background: var(--spb-color-sticky-button-bg, #0147ca) !important;
	color: var(--spb-color-sticky-button-text, #fff) !important;
	border: 1px solid var(--spb-color-sticky-button-border, #0147ca) !important;
}
.spb-product .spb-sticky-btn:hover,
.spb-product .spb-sticky-btn:focus-visible {
	background: var(--spb-color-sticky-button-hover-bg, #00389f) !important;
	color: var(--spb-color-sticky-button-hover-text, #fff) !important;
	border-color: var(--spb-color-sticky-button-hover-bg, #00389f) !important;
}

/* Geometry-safe swatch states. The physical border always stays at the
 * normal width; thicker hover/selected/focus treatments grow outward as a
 * ring, so neither the card's content box nor its thumbnail can resize. */
.spb-summary .spb-swatch-btn,
.spb-summary .spb-swatch-btn:hover,
.spb-summary .spb-swatch-btn:active,
.spb-summary .spb-swatch-btn:focus,
.spb-summary .spb-swatch-btn:focus-visible {
	box-sizing: border-box !important;
	border-width: var(--spb-swatch-border-width, 1px) !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
.spb-summary .spb-swatch-btn .spb-sw-thumb,
.spb-summary .spb-swatch-btn .spb-sw-thumb img {
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
@media ( hover: hover ) {
	/* .spb-v2-in-cart (a swatch with quantity added — see initPurchaseV2() in
	 * frontend.js) was missing from this exclusion list, so hovering a card
	 * that already had quantity added would repaint it with the temporary
	 * hover color (a light pink/peach by default) instead of keeping its
	 * persistent in-cart background — the swatch "turning pink after adding
	 * quantity" was this: the mouse is still over the card right after
	 * clicking its own + button. */
	.spb-summary .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.spb-v2-in-cart):not(.disabled):not(:disabled):hover {
		border-color: var(--spb-color-swatch-hover-border, var(--spb-color-swatch-highlight, #ff5a3c)) !important;
		background: var(--spb-color-swatch-hover-bg, #fff7f4) !important;
		box-shadow: 0 0 0 max(0px, calc(var(--spb-swatch-hover-border-width, 2px) - var(--spb-swatch-border-width, 1px))) var(--spb-color-swatch-hover-border, var(--spb-color-swatch-highlight, #ff5a3c)) !important;
	}
}
.spb-summary .spb-swatch-btn:focus,
.spb-summary .spb-swatch-btn:focus-visible {
	border-color: var(--spb-color-swatch-focus-border, #0147ca) !important;
	box-shadow: 0 0 0 max(0px, calc(var(--spb-swatch-focus-border-width, 2px) - var(--spb-swatch-border-width, 1px))) var(--spb-color-swatch-focus-border, #0147ca) !important;
	outline: 0 !important;
}
.spb-summary .spb-swatch-btn.active,
.spb-summary .spb-swatch-btn[aria-pressed="true"],
.spb-summary .spb-swatch-btn.is-selected-persistent,
.spb-summary .spb-swatch-btn.active:hover,
.spb-summary .spb-swatch-btn[aria-pressed="true"]:hover,
.spb-summary .spb-swatch-btn.is-selected-persistent:hover,
.spb-summary .spb-swatch-btn.active:focus,
.spb-summary .spb-swatch-btn.active:focus-visible,
.spb-summary .spb-swatch-btn[aria-pressed="true"]:focus,
.spb-summary .spb-swatch-btn[aria-pressed="true"]:focus-visible,
.spb-summary .spb-swatch-btn.is-selected-persistent:focus,
.spb-summary .spb-swatch-btn.is-selected-persistent:focus-visible {
	/* One painted edge only. The transparent layout border preserves card
	 * geometry; the configured selection outline is entirely outside it. */
	border-color: transparent !important;
	box-shadow: none !important;
	outline: var(--spb-swatch-selected-border-width, 2px) solid var(--spb-color-swatch-highlight, #ff5a3c) !important;
	outline-offset: 0 !important;
}
.spb-summary .spb-swatch-btn.disabled,
.spb-summary .spb-swatch-btn:disabled,
.spb-summary .spb-swatch-btn.disabled:hover,
.spb-summary .spb-swatch-btn:disabled:hover {
	border-width: var(--spb-swatch-border-width, 1px) !important;
	box-shadow: none !important;
}

/* Final phone swatch treatment. Attention prompts must never repaint every
 * card orange/blue; only an actual selected card receives a state outline. */
@media ( max-width: 600px ), ( pointer: coarse ) {
	.spb-price-tabs-card {
		margin: 0 !important;
		padding: 12px 0 18px !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: var(--spb-color-price-card-bg, #fff) !important;
		overflow: hidden !important;
	}
	.spb-price-tabs-card .spb-swatch-header {
		justify-content: flex-start !important;
		gap: 10px !important;
		margin: 0 7px 12px !important;
		padding: 0 0 12px !important;
	}
	.spb-price-tabs-card .spb-swatch-title {
		flex: 0 0 18px !important;
		width: 18px !important;
		min-width: 18px !important;
		margin: 0 2px 0 0 !important;
		font-size: 0 !important;
		gap: 0 !important;
	}
	.spb-price-tabs-card .spb-swatch-title svg {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
	}
	.spb-price-tabs-card .spb-swatch-header-actions {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
		column-gap: 8px !important;
		row-gap: 8px !important;
	}
	.spb-price-tabs-card .spb-swatch-group {
		padding: 7px !important;
		scroll-padding-inline: 7px !important;
	}
	.spb-swatch-group.spb-needs-selection .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled),
	.spb-swatch-group.spb-needs-attention .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled),
	.spb-swatch-group.spb-prompt-blink .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled) {
		animation: none !important;
		outline: 0 !important;
		box-shadow: none !important;
		border-color: var(--spb-color-swatch-border, #dceaf7) !important;
		background: var(--spb-color-swatch-bg, #fff) !important;
	}
}

/* Retail-only informational cards should remain intentional and readable,
 * not look faded beside B2B cards. */
.spb-summary .spb-swatch-btn .spb-sw-price-request {
	display: inline-flex !important;
	align-self: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--spb-color-swatch-hover-bg, #eef5ff);
	color: var(--spb-color-swatch-price-request, #334a6b) !important;
	font-weight: var(--spb-swatch-price-request-weight, 600) !important;
	line-height: 1.25;
}
/* V2 swatch-embedded purchase control. Fixed dimensions prevent card/image
 * movement between normal, hover, selected and loading states. */
.spb-summary .spb-swatch-btn .spb-v2-qty-label {
	display: block;
	margin-top: 8px;
	font: 600 11px/1 var(--spb-font-body, inherit);
	color: var(--spb-color-label, #4f5d73);
	text-transform: uppercase;
	letter-spacing: .05em;
}
/* Compact stepper — sized as a quiet in-card control, not a full-size form
 * field (a 40px-cell stepper visually outweighed the price/size text it sits
 * under). 32px cells stay comfortably tappable inside a 34px-tall control. */
.spb-summary .spb-swatch-btn .spb-v2-qty {
	display: grid;
	grid-template-columns: 32px minmax(26px, 1fr) 32px;
	align-items: stretch;
	width: 100%;
	min-height: 34px;
	margin-top: 6px;
	border: 1px solid #cfdded;
	border-radius: 9px;
	background: #f6faff;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(11,35,75,.04);
}
.spb-summary .spb-swatch-btn .spb-v2-minus,
.spb-summary .spb-swatch-btn .spb-v2-plus {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 32px;
	font: 700 17px/1 var(--spb-font-button, inherit);
	color: var(--spb-color-primary, #0147ca);
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
}
.spb-summary .spb-swatch-btn .spb-v2-minus { border-right:1px solid #dbe6f2; }
.spb-summary .spb-swatch-btn .spb-v2-plus { border-left:1px solid #dbe6f2; }
.spb-summary .spb-swatch-btn .spb-v2-minus:hover,
.spb-summary .spb-swatch-btn .spb-v2-plus:hover { background: #e6f2ff; }
.spb-summary .spb-swatch-btn .spb-v2-plus { background:var(--spb-retail-accent,#0147ca); color:#fff!important; }
.spb-summary .spb-swatch-btn .spb-v2-plus:hover { background:var(--spb-color-primary-hover,#00389f); }
.spb-summary .spb-swatch-btn .spb-v2-qty-value {
	display: grid;
	place-items: center;
	align-self: stretch;
	height: 100%;
	font: 700 12.5px/1 var(--spb-font-body, inherit);
	color: var(--spb-color-heading, #0b1736);
	text-align: center;
}
.spb-summary .spb-swatch-btn.spb-v2-in-cart {
	background: var(--spb-color-swatch-selected-bg, #edf4ff);
}
.spb-summary .spb-swatch-btn .spb-v2-qty.is-loading { opacity: .55; pointer-events: none; }
.spb-summary .spb-swatch-btn .spb-v2-qty.is-loading .spb-v2-qty-value { color: transparent; }
.spb-summary .spb-swatch-btn .spb-v2-qty.is-loading .spb-v2-qty-value::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	margin: auto;
	border: 2px solid var(--spb-color-border, #e7edf5);
	border-top-color: var(--spb-color-primary, #0147ca);
	border-radius: 50%;
	animation: spb-v2-spin .7s linear infinite;
}
@keyframes spb-v2-spin { to { transform: rotate(360deg); } }
.spb-v2-cart { position: fixed; inset: 0; z-index: 100000; visibility: hidden; pointer-events: none; }
.spb-v2-cart.is-open { visibility: visible; pointer-events: auto; }
.spb-v2-cart-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(11,23,54,.48); opacity: 0; transition: opacity .18s ease; }
.spb-v2-cart.is-open .spb-v2-cart-backdrop { opacity: 1; }
.spb-v2-cart-panel { position:absolute; top:0; right:0; width:min(460px,100%); height:100%; padding:16px; overflow:auto; background:#fff; box-shadow:-12px 0 36px rgba(11,23,54,.16); transform:translateX(100%); transition:transform .2s ease; }
.spb-v2-cart.is-open .spb-v2-cart-panel { transform: none; }
.spb-v2-cart-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spb-v2-cart-header h2 { margin: 0; font-size: 24px; color: var(--spb-color-heading,#0b1736); }
.spb-v2-cart-close { display:grid; place-items:center; flex:0 0 44px; width:44px!important; min-width:44px!important; max-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; border:1px solid #e4ebf4; border-radius:50%!important; background:var(--spb-color-surface-soft,#f8fbff); font-size:25px; line-height:1; }
.spb-v2-cart-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:14px 0; padding:3px; border-radius:11px; background:var(--spb-color-surface-soft,#f8fbff); }
.spb-v2-cart-tabs button { min-width:0; min-height:44px; margin:0!important; padding:8px 6px; border:0; border-radius:9px; background:transparent; color:var(--spb-color-body,#4f5d73); font-size:12px; line-height:1.2; font-weight:700; white-space:nowrap; }
.spb-v2-cart-tabs button > span {
	display:inline-grid;
	place-items:center;
	box-sizing:border-box;
	min-width:21px;
	height:21px;
	margin-left:5px;
	padding:0 5px;
	border:2px solid #fff;
	border-radius:999px;
	background:#e53935;
	color:#fff!important;
	font:800 9px/1 Arial,sans-serif;
	vertical-align:middle;
	box-shadow:0 2px 6px rgba(180,20,20,.2);
}
.spb-v2-cart-tabs button[data-spb-cart-tab="retail"].is-active { background: var(--spb-retail-accent,#0147ca); color: var(--spb-retail-text,#fff); }
.spb-v2-cart-tabs button[data-spb-cart-tab="wholesale"].is-active { background: var(--spb-b2b-accent,#6537d8); color: var(--spb-b2b-text,#fff); }
.spb-v2-cart-pane { display: none; }
.spb-v2-cart-pane.is-active { display: block; }
.spb-v2-cart-pane[data-spb-cart-pane="retail"].is-active { padding:10px 12px; border-radius:12px; background:var(--spb-retail-cart-surface,#f7fbff); border:1px solid #dcecff; }
.spb-v2-cart-pane[data-spb-cart-pane="wholesale"].is-active { padding:10px 12px; border-radius:12px; background:var(--spb-b2b-cart-surface,#faf7ff); border:1px solid #eadfff; }
.spb-v2-cart-item { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:11px; align-items:center; padding:12px 0; border-bottom:1px solid var(--spb-color-border,#e7edf5); }
.spb-v2-cart-item img { width:58px; height:58px; border-radius:9px; object-fit:contain; background:var(--spb-color-surface-soft,#f8fbff); }
.spb-v2-cart-item strong,.spb-v2-cart-item small,.spb-v2-cart-item span { display:block; overflow-wrap:anywhere; }
.spb-v2-cart-item small { margin: 3px 0; color: var(--spb-color-muted,#7b8799); }
.spb-v2-cart-item > b { text-align:right; white-space:nowrap; }
.spb-v2-cart-line { display:grid; justify-items:end; gap:6px; text-align:right; white-space:nowrap; }
.spb-v2-cart-remove { display:grid!important; place-items:center; flex:0 0 30px; width:30px!important; min-width:30px!important; max-width:30px!important; height:30px!important; min-height:30px!important; padding:0!important; border:1px solid #dce6f1; border-radius:50%!important; background:#fff; color:#718096; font-size:18px; line-height:1; cursor:pointer; }
.spb-v2-cart-remove:hover { border-color:#ef4444; color:#dc2626; background:#fff5f5; }
.spb-v2-cart-total,.spb-v2-progress > div { display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.spb-v2-cart-primary { display:grid; place-items:center; width:100%; min-height:48px; margin-top:12px; border:0; border-radius:10px; background:var(--spb-color-primary,#0147ca); color:#fff!important; font-weight:700; text-decoration:none!important; }
.spb-v2-cart-primary:disabled { opacity:.5; cursor:not-allowed; }
.spb-v2-cart-extra-note {
	margin:7px 0 0!important;
	padding:7px 9px;
	border-left:3px solid var(--spb-color-primary,#0147ca);
	border-radius:6px;
	background:rgba(1,71,202,.055);
	color:var(--spb-color-body,#4f5d73);
	font:500 10.5px/1.35 var(--spb-font-body,inherit);
}
.spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-cart-extra-note {
	border-left-color:var(--spb-b2b-accent,#0f766e);
	background:rgba(15,118,110,.06);
}
.spb-v2-cart-pane[data-spb-cart-pane="retail"] .spb-v2-cart-primary { background:var(--spb-retail-accent,#0147ca); color:var(--spb-retail-text,#fff)!important; }
.spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-cart-primary { background:var(--spb-b2b-accent,#5b3fd1); color:var(--spb-b2b-text,#fff)!important; }
.spb-v2-progress progress { width:100%; height:12px; margin-top:12px; accent-color:var(--spb-progress-complete,#16a34a); }
.spb-v2-progress p { margin:6px 0 0; color:var(--spb-moq-amount-text,#6537d8); }
.spb-v2-cart-empty { padding:24px 0; text-align:center; color:var(--spb-color-muted,#7b8799); }
@media (max-width:600px) { .spb-v2-cart-panel { padding:12px; } .spb-v2-cart-header { margin-bottom:2px; padding:0 2px; } .spb-v2-cart-header h2 { font-size:21px; } .spb-v2-cart-tabs { margin:12px 0; } .spb-v2-cart-tabs button { font-size:10.5px; } .spb-v2-cart-pane[data-spb-cart-pane].is-active { padding:8px 10px; } .spb-v2-cart-item { grid-template-columns:50px minmax(0,1fr) auto; gap:9px; padding:10px 0; } .spb-v2-cart-item img { width:50px; height:50px; } }

/* Compact, editable purchase rows. */
.spb-v2-cart-copy { min-width:0; }
.spb-v2-cart-item .spb-v2-cart-copy > strong { color:var(--spb-color-heading,#0b1736); font-size:13px; line-height:1.25; }
.spb-v2-cart-item .spb-v2-cart-copy > small { margin:3px 0; color:var(--spb-color-muted,#7b8799); font-size:10.5px; line-height:1.35; }
.spb-v2-cart-item .spb-v2-cart-unit { color:var(--spb-color-body,#4f5d73); font-size:11px; line-height:1.3; }
.spb-v2-drawer-qty {
	display:grid;
	grid-template-columns:30px minmax(34px,auto) 30px;
	align-items:center;
	width:max-content;
	margin-top:8px;
	overflow:hidden;
	border:1px solid #cfdeee;
	border-radius:9px;
	background:#fff;
}
.spb-v2-drawer-qty button {
	display:grid!important;
	place-items:center;
	width:30px!important;
	min-width:30px!important;
	height:30px!important;
	min-height:30px!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:#f4f8fd;
	color:var(--spb-retail-accent,#0147ca);
	font:800 17px/1 Arial,sans-serif;
}
.spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button { color:var(--spb-b2b-accent,#0f766e); }
.spb-v2-drawer-qty button.is-plus { background:var(--spb-retail-accent,#0147ca); color:#fff!important; }
.spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button.is-plus { background:var(--spb-b2b-accent,#0f766e); }
.spb-v2-drawer-qty output { min-width:34px; padding:0 6px; color:var(--spb-color-heading,#0b1736); font:700 12px/30px var(--spb-font-body,inherit); text-align:center; }
.spb-v2-cart-line b { color:var(--spb-color-heading,#0b1736); font-size:13px; line-height:1.2; }
.spb-v2-cart-line > small { color:var(--spb-color-muted,#7b8799); font-size:9.5px; line-height:1; }
.spb-v2-cart-item.is-updating { opacity:.55; }
@media (max-width:600px) {
	.spb-v2-cart-item { align-items:start; }
	.spb-v2-cart-item .spb-v2-cart-copy > strong { font-size:12px; }
	.spb-v2-cart-item .spb-v2-cart-copy > small { font-size:9.5px; }
	.spb-v2-cart-item .spb-v2-cart-unit { font-size:10px; }
	.spb-v2-drawer-qty { grid-template-columns:28px minmax(32px,auto) 28px; margin-top:7px; }
	.spb-v2-drawer-qty button { width:28px!important; min-width:28px!important; height:28px!important; min-height:28px!important; }
	.spb-v2-drawer-qty output { min-width:32px; font-size:11px; line-height:28px; }
}
.spb-v2-mode-copy { display:grid; gap:3px; margin:12px 0 4px; padding:10px 12px; border-radius:10px; background:var(--spb-color-surface-soft,#f8fbff); }
.spb-v2-mode-copy strong { color:var(--spb-color-heading,#0b1736); font-size:14px; }
.spb-v2-mode-copy span { color:var(--spb-color-body,#4f5d73); font-size:12px; }
#spb-price-tabs .spb-price-tab[data-mode="retail"].active { background:var(--spb-color-toggle-retail-active-bg,#0147ca)!important; color:var(--spb-color-toggle-retail-active-text,#fff)!important; }
#spb-price-tabs .spb-price-tab[data-mode="wholesale"].active { background:var(--spb-color-toggle-wholesale-active-bg,#0f766e)!important; color:var(--spb-color-toggle-wholesale-active-text,#fff)!important; }
#spb-price-tabs .spb-price-tab:not(.active) { background:var(--spb-color-toggle-inactive-bg,#eaf4ff)!important; color:var(--spb-color-toggle-inactive-text,#607089)!important; border-color:var(--spb-color-toggle-divider,#cfdfef)!important; }
@media (hover:hover) {
	#spb-price-tabs .spb-price-tab:not(.active):hover { background:var(--spb-color-toggle-hover-bg,#dcecff)!important; color:var(--spb-color-toggle-hover-text,#0147ca)!important; }
}
#spb-price-tabs.spb-mode-retail { border-color:color-mix(in srgb,var(--spb-retail-accent,#0147ca) 22%,#dce8f5); background:var(--spb-retail-surface,#f7fbff); }
#spb-price-tabs.spb-mode-wholesale { border-color:color-mix(in srgb,var(--spb-b2b-accent,#0f766e) 22%,#d8eee9); background:var(--spb-b2b-surface,#effcf9); }
#spb-price-tabs.spb-mode-retail .spb-v2-mode-copy { background:#eaf4ff; border-left:4px solid var(--spb-retail-accent,#0147ca); }
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-copy { background:var(--spb-b2b-surface,#f5f2ff); border-left:4px solid var(--spb-b2b-accent,#5b3fd1); }
#spb-price-tabs.spb-mode-retail .spb-v2-mode-copy strong { color:var(--spb-retail-accent,#0147ca); }
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-copy strong { color:var(--spb-b2b-accent,#6537d8); }
/* V2.0.5 mode banner: colored title band + readable benefit row above all
 * swatches and selectors, matching the requested information hierarchy. */
#spb-price-tabs .spb-v2-mode-copy {
	display:block;
	width:100%;
	margin:0 0 14px;
	padding:0;
	overflow:hidden;
	border:1px solid #dce7f4;
	border-left-width:1px;
	border-radius:12px;
	background:#fff;
	box-shadow:0 4px 14px rgba(11,23,54,.05);
}
#spb-price-tabs .spb-v2-mode-title {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:9px 16px;
	text-align:center;
}
#spb-price-tabs .spb-v2-mode-title strong {
	color:#fff!important;
	font-family:var(--spb-font-button,inherit)!important;
	font-size:15px;
	font-weight:var(--spb-button-weight,700)!important;
	line-height:1.2;
	letter-spacing:.015em;
}
#spb-price-tabs.spb-mode-retail .spb-v2-mode-title {
	background:var(--spb-retail-accent,#0147ca);
}
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-title {
	background:var(--spb-b2b-accent,#0f766e);
}
#spb-price-tabs .spb-v2-mode-benefits {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	column-gap:38px;
	row-gap:9px;
	min-height:54px;
	padding:11px 16px;
	background:#fff;
}
#spb-price-tabs .spb-v2-mode-benefits span {
	display:inline-flex;
	align-items:center;
	gap:0;
	min-width:0;
	color:var(--spb-color-heading,#0b1736);
	font:600 12px/1.35 var(--spb-font-body,inherit);
	white-space:normal;
}
#spb-price-tabs .spb-v2-mode-benefits .spb-v2-benefit-check {
	display:block!important;
	flex:0 0 20px!important;
	box-sizing:border-box!important;
	width:20px!important;
	min-width:20px!important;
	max-width:20px!important;
	height:20px!important;
	min-height:20px!important;
	max-height:20px!important;
	margin:0 9px 0 0!important;
	padding:0!important;
	border:0!important;
	border-radius:999px!important;
	overflow:hidden;
}
#spb-price-tabs .spb-v2-benefit-check circle { fill:#83d68c; }
#spb-price-tabs .spb-v2-benefit-check path { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#spb-price-tabs .spb-swatch-header + .spb-v2-mode-copy { margin-top:12px; margin-bottom:14px; }
#spb-price-tabs.spb-mode-retail .spb-v2-mode-copy,
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-copy { border-left:1px solid #dce7f4; background:#fff; }
@media (max-width:600px) {
	#spb-price-tabs .spb-v2-mode-title { min-height:40px; padding:8px 12px; }
	#spb-price-tabs .spb-v2-mode-title strong { font-size:13px; }
	#spb-price-tabs .spb-v2-mode-benefits { justify-content:flex-start; column-gap:20px; min-height:0; padding:10px 12px; }
	#spb-price-tabs .spb-v2-mode-benefits span { font-size:11px; }
}
#spb-price-tabs.spb-mode-retail .spb-swatch-btn { background:#fff; }
/* Wholesale swatch: its own dedicated Default/Hover/Selected background
 * controls (Commerce Features settings), independent of the retail swatch
 * colors and of the broader "Wholesale section tint" used elsewhere.
 *
 * The card's own top/bottom padding used to be forced to 0 in this mode
 * (with a few child margins/paddings added back as a patch) — that's what
 * caused the "padding shift" bug, and with no top padding the product photo
 * sat flush against the card's rounded top edge with nothing containing it,
 * which is what then read as the image spilling outside the card. Wholesale
 * swatches now use the exact same padding as retail ones — the admin's
 * padding settings, not a hardcoded 0. */
/* !important is required here: the base state-model rule higher up
 * (".spb-summary .spb-swatch-btn:not(.active)") pins the background to
 * white with !important, which would silently defeat this default. */
#spb-price-tabs.spb-mode-wholesale .spb-swatch-btn { background:var(--spb-b2b-swatch-bg,#f7fcfa)!important; }
/* The "✓ N Lots" added-label follows the wholesale accent in B2B mode, not
 * the general accent color. */
#spb-price-tabs.spb-mode-wholesale .spb-swatch-btn .spb-sw-added { color:var(--spb-b2b-accent,#0f766e)!important; }
@media ( hover: hover ) {
	#spb-price-tabs.spb-mode-wholesale .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.spb-v2-in-cart):not(.disabled):not(:disabled):hover {
		background: var(--spb-b2b-swatch-hover-bg, #e8f6f2) !important;
	}
}
#spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart {
	background: var(--spb-b2b-swatch-selected-bg, #ddf0ea) !important;
}
#spb-price-tabs.spb-mode-retail .spb-sw-price-now { color:var(--spb-retail-accent,#0147ca); }
#spb-price-tabs.spb-mode-wholesale .spb-sw-price-now { color:var(--spb-b2b-accent,#0f766e); }
/* Stepper border follows the wholesale accent (a light mix of it), not a
 * hardcoded lilac — the purple tint came from here. */
#spb-price-tabs.spb-mode-wholesale .spb-v2-qty { background:#fff; border-color:color-mix(in srgb, var(--spb-b2b-accent,#0f766e) 24%, #fff); }
#spb-price-tabs.spb-mode-wholesale .spb-v2-minus,
#spb-price-tabs.spb-mode-wholesale .spb-v2-plus { color:var(--spb-b2b-accent,#0f766e); }
#spb-price-tabs.spb-mode-wholesale .spb-v2-plus { background:var(--spb-b2b-accent,#0f766e); color:#fff!important; }
/* The retail Add to Cart follows the "Buttons & Form Fields" section
 * (background/text/hover/size/weight/radius) — those are the fields whose
 * labels promise to control this button. It was previously wired to the
 * separate "Retail accent" fields, which left the whole Buttons section
 * visibly dead. Wholesale mode still overrides with the B2B accents below. */
.spb-v2-main-action { position:relative; isolation:isolate; display:grid; place-items:center; width:100%; min-height:54px; margin-top:18px!important; border:0; border-radius:var(--spb-button-radius,13px); background:var(--spb-color-primary,#0147ca); color:var(--spb-color-button-text,#fff); font:var(--spb-button-weight,700) var(--spb-button-size,15px)/1 var(--spb-font-button,inherit); cursor:pointer; box-shadow:0 8px 20px rgba(1,71,202,.16); }
.spb-v2-main-action:hover { background:var(--spb-color-primary-hover,#00389f); color:var(--spb-color-button-hover-text,#fff); }
/* Its own border color (Commerce Features → "Wholesale CTA button border") —
 * the button previously had border:0 with no way to add or color one. */
.spb-mode-wholesale .spb-v2-main-action { background:var(--spb-b2b-accent,#0f766e); color:var(--spb-b2b-text,#fff); border:2px solid var(--spb-b2b-cta-border,#115e59); box-shadow:0 8px 20px rgba(15,118,110,.16); }
.spb-mode-wholesale .spb-v2-main-action:hover { background:var(--spb-b2b-hover,#115e59); color:var(--spb-b2b-text,#fff); }
.spb-v2-main-action.has-items { outline:2px solid #72b8ff; outline-offset:3px; animation:spb-v2-outline-color 1.8s ease-in-out infinite; }
.spb-v2-main-action.has-items::before { content:none!important; animation:none!important; }
.spb-v2-main-count { position:absolute; top:-10px; right:-8px; display:grid; place-items:center; min-width:29px; height:29px; padding:0 7px; border:0; border-radius:999px; background:#d9403a; color:#fff; font-size:11px; }
@keyframes spb-v2-outline-color { 0%,100%{outline-color:#72b8ff} 50%{outline-color:#ffffff} }
@media (prefers-reduced-motion:reduce) { .spb-v2-main-action.has-items { animation:none; } }
.spb-v2-wholesale-progress { margin-top:16px; padding:15px; border:1px solid var(--spb-progress-remaining,#e8e2f8); border-radius:14px; background:linear-gradient(135deg,var(--spb-b2b-cart-surface,#faf8ff),var(--spb-b2b-surface,#f5f2ff)); }
.spb-v2-progress-heading { display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.spb-v2-progress-track { height:10px; margin-top:11px; overflow:hidden; border-radius:999px; background:var(--spb-progress-remaining,#e7edf5); }
.spb-v2-progress-track span { display:block; height:100%; border-radius:inherit; background:var(--spb-progress-complete,#16a34a); transition:width .25s ease; }
.spb-v2-wholesale-progress p { margin:8px 0 0; color:var(--spb-moq-amount-text,#6537d8); font-size:12px; }
.cart-item > .spb-v2-header-cart-summary { display:none; position:absolute; z-index:100001; top:100%; right:0; width:260px; padding:15px; border:1px solid #dbe6f2; border-radius:14px; background:#fff; box-shadow:0 14px 38px rgba(11,23,54,.18); color:#0b1736; text-align:left; }
.cart-item:hover > .spb-v2-header-cart-summary,.cart-item:focus-within > .spb-v2-header-cart-summary { display:grid; gap:7px; }
.spb-v2-header-cart-summary span { color:#607089; font-size:13px; }
.spb-v2-header-cart-summary button { min-height:40px; margin-top:5px; border:0; border-radius:9px; background:var(--spb-color-primary,#0147ca); color:#fff; font-weight:700; }
.cart-item.spb-v2-cart-host > .nav-dropdown { display:none!important; }
.spb-v2-header-cart-link { position:relative!important; overflow:visible!important; }
.spb-v2-header-count { position:absolute; top:-8px; right:-9px; z-index:5; display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border:2px solid #fff; border-radius:999px; background:#ff3b30; color:#fff; font:800 10px/1 Arial,sans-serif; box-shadow:0 2px 7px rgba(0,0,0,.2); }
.spb-retail-action-row { display:flex!important; align-items:stretch; gap:12px; width:100%; margin-top:18px!important; }
#spb-price-tabs.spb-mode-wholesale .spb-retail-action-row { display:flex!important; }
.spb-retail-action-row > #spb-v2-main-action,
.spb-retail-action-row > .spb-more-info-btn { flex:1 1 0!important; width:auto!important; min-width:0!important; height:54px!important; margin-top:0!important; }
@media (max-width:600px) { .spb-retail-action-row { flex-direction:column; gap:10px; } .spb-retail-action-row > #spb-v2-main-action,.spb-retail-action-row > .spb-more-info-btn { width:100%!important; } }
.spb-sw-order-moq { display:block; margin-top:5px; color:var(--spb-moq-amount-text,#6537d8); font-size:10px; font-weight:700; }
/* V2 uses an outer ring, never an inset border, so hover/selection cannot
 * resize the thumbnail or card. These final selectors also neutralize the
 * legacy orange/red hover ring on an already-selected card. */
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart:focus,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart:active {
	border-color:var(--spb-color-swatch-border,#dceaf7)!important;
	box-shadow:none!important;
}
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart:focus,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart:active {
	border-color:var(--spb-color-swatch-border,#dceaf7)!important;
	box-shadow:none!important;
}

/* Mobile finishing pass: keep action controls inside the card, give both
 * controls identical geometry, and present mode benefits as a readable list. */
@media (max-width:600px) {
	.spb-retail-action-row {
		box-sizing:border-box!important;
		padding:4px!important;
	}
	#spb-price-tabs .spb-v2-mode-benefits {
		display:grid!important;
		grid-template-columns:minmax(0,1fr);
		gap:9px!important;
		padding:12px 16px!important;
	}
	#spb-price-tabs .spb-v2-mode-benefits span {
		display:flex!important;
		align-items:center!important;
		width:100%;
		min-height:22px;
		font-size:12px!important;
		line-height:1.35!important;
	}
	#spb-price-tabs .spb-v2-mode-benefits .spb-v2-benefit-check {
		align-self:center!important;
		margin:0 10px 0 0!important;
		transform:none!important;
	}
	.spb-retail-action-row > #spb-v2-main-action,
	.spb-retail-action-row > .spb-more-info-btn {
		box-sizing:border-box!important;
		height:54px!important;
		min-height:54px!important;
		max-height:54px!important;
		padding:0 18px!important;
		border-radius:13px!important;
	}
	.spb-v2-main-count {
		top:-9px!important;
		right:8px!important;
	}
}

/* Header cart quantity: a true circle without the previous white ring. */
.spb-v2-header-cart-link > .spb-v2-header-count,
.cart-item .spb-v2-header-cart-link > .spb-v2-header-count {
	display:grid!important;
	place-items:center!important;
	box-sizing:border-box!important;
	width:28px!important;
	min-width:28px!important;
	max-width:28px!important;
	height:28px!important;
	min-height:28px!important;
	max-height:28px!important;
	padding:0!important;
	border:0!important;
	outline:0!important;
	border-radius:50%!important;
	background:#e53935!important;
	color:#fff!important;
	font:800 8.5px/1 Arial,sans-serif!important;
	box-shadow:0 2px 6px rgba(150,20,20,.28)!important;
}
.cart-item.spb-v2-cart-host .cart-icon > strong,
.cart-item.spb-v2-cart-host .cart-icon-count,
.spb-v2-header-cart-link .cart-icon-count {
	display:none!important;
}
#spb-v2-cart .spb-v2-cart-item.is-updating { opacity:1!important; }

/* The selection ring follows the exact same corner curve as its image. */
.spb-product .spb-thumb,
.spb-product .spb-thumb.active,
.spb-product .spb-thumb:hover,
.spb-product .spb-thumb img {
	border-radius:8px!important;
}

/* Purchase drawer final skin. Kept at the end with drawer-scoped specificity
 * because storefront themes commonly restyle every button/span globally. */
#spb-v2-cart .spb-v2-cart-tabs button > span {
	display:inline-grid!important;
	place-items:center!important;
	box-sizing:border-box!important;
	min-width:26px!important;
	width:26px!important;
	max-width:26px!important;
	height:26px!important;
	min-height:26px!important;
	max-height:26px!important;
	margin:0 0 0 6px!important;
	padding:0!important;
	border:0!important;
	border-radius:50%!important;
	background:#e53935!important;
	color:#fff!important;
	font:800 9px/1 Arial,sans-serif!important;
	vertical-align:middle!important;
	box-shadow:0 2px 7px rgba(183,28,28,.25)!important;
}
#spb-v2-cart .spb-v2-cart-pane.is-active {
	display:flex!important;
	flex-direction:column;
	gap:8px;
}
#spb-v2-cart .spb-v2-cart-item {
	box-sizing:border-box;
	margin:0!important;
	padding:11px!important;
	border:1px solid #e2eaf4!important;
	border-radius:12px!important;
	background:#fff!important;
	box-shadow:0 3px 10px rgba(11,23,54,.035);
}
#spb-v2-cart .spb-v2-cart-item > img {
	align-self:center;
	border:1px solid #edf2f7;
	background:#f8fbff;
}
#spb-v2-cart .spb-v2-cart-copy {
	display:flex;
	flex-direction:column;
	min-width:0;
}
#spb-v2-cart .spb-v2-cart-copy > strong {
	font-size:12px!important;
	line-height:1.25!important;
}
#spb-v2-cart .spb-v2-cart-copy > small {
	margin:2px 0!important;
	font-size:9.5px!important;
	line-height:1.3!important;
}
#spb-v2-cart .spb-v2-cart-copy > .spb-v2-cart-unit {
	font-size:10px!important;
	line-height:1.3!important;
}
#spb-v2-cart .spb-v2-drawer-qty {
	display:grid!important;
	grid-template-columns:40px 44px 40px!important;
	align-items:center!important;
	justify-self:center!important;
	align-self:center!important;
	width:124px!important;
	height:41px!important;
	margin:8px auto 0!important;
	padding:0!important;
	overflow:hidden!important;
	border:1px solid #cfdded!important;
	border-radius:12px!important;
	background:#f6faff!important;
	box-shadow:inset 0 1px 2px rgba(11,35,75,.04)!important;
}
#spb-v2-cart .spb-v2-drawer-qty button,
#spb-v2-cart .spb-v2-drawer-qty output {
	display:grid!important;
	place-items:center!important;
	box-sizing:border-box!important;
	width:100%!important;
	min-width:0!important;
	height:40px!important;
	min-height:40px!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:#f6faff!important;
	color:var(--spb-color-heading,#0b1736)!important;
	font:700 14px/1 var(--spb-font-body,inherit)!important;
}
#spb-v2-cart .spb-v2-drawer-qty output {
	border-right:1px solid #dbe6f2!important;
	border-left:1px solid #dbe6f2!important;
}
#spb-v2-cart .spb-v2-drawer-qty button {
	color:var(--spb-retail-accent,#0147ca)!important;
	font:700 22px/1 var(--spb-font-button,inherit)!important;
}
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button {
	color:var(--spb-b2b-accent,#0f766e)!important;
}
#spb-v2-cart .spb-v2-drawer-qty button.is-plus {
	background:var(--spb-retail-accent,#0147ca)!important;
	color:#fff!important;
}
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button.is-plus {
	background:var(--spb-b2b-accent,#0f766e)!important;
	color:#fff!important;
}
#spb-v2-cart .spb-v2-cart-line { gap:5px!important; padding-right:8px!important; }
#spb-v2-cart .spb-v2-cart-line b { font-size:12px!important; }
#spb-v2-cart .spb-v2-cart-line > small { font-size:9px!important; }
#spb-v2-cart .spb-v2-cart-extra-note {
	margin:0!important;
	font-size:9.5px!important;
}

/* The Added label replaces Model text but keeps the model row's separator.
 * Both rows share ONE fixed box height so the swap is layout-neutral: with
 * their natural (slightly different) heights, adding/removing the first
 * quantity made the stepper below jump a few pixels — the "shiver". */
.spb-summary .spb-swatch-btn .spb-sw-model,
.spb-summary .spb-swatch-btn.is-added .spb-sw-added {
	box-sizing:border-box!important;
	height:27px!important;
	min-height:27px!important;
	max-height:27px!important;
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:100%;
	margin-top:0!important;
	padding:6px 3px 0!important;
	border-top:1px solid color-mix(in srgb,var(--spb-color-swatch-border,#dceaf7) 62%,transparent)!important;
	overflow:hidden;
}

/* Dedicated Retail/B2B toggle tokens—independent from general mode accents. */
.spb-swatch-header-actions .spb-price-tabs {
	height:var(--spb-toggle-height,40px)!important;
	border-color:var(--spb-color-toggle-border,#cfdfef)!important;
	border-radius:var(--spb-toggle-radius,8px)!important;
	background:var(--spb-color-toggle-inactive-bg,#eaf4ff)!important;
}
.spb-swatch-header-actions .spb-price-tab {
	padding-right:var(--spb-toggle-padding-x,13px)!important;
	padding-left:var(--spb-toggle-padding-x,13px)!important;
	border-right-color:var(--spb-color-toggle-divider,#cfdfef)!important;
	background:var(--spb-color-toggle-inactive-bg,#eaf4ff)!important;
	color:var(--spb-color-toggle-inactive-text,#607089)!important;
	font-size:var(--spb-toggle-font-size,12px)!important;
}
.spb-swatch-header-actions .spb-price-tab[data-mode="retail"].active {
	background:var(--spb-color-toggle-retail-active-bg,#0147ca)!important;
	color:var(--spb-color-toggle-retail-active-text,#fff)!important;
}
.spb-swatch-header-actions .spb-price-tab[data-mode="wholesale"].active {
	background:var(--spb-color-toggle-wholesale-active-bg,#0f766e)!important;
	color:var(--spb-color-toggle-wholesale-active-text,#fff)!important;
}
@media (hover:hover) {
	.spb-swatch-header-actions .spb-price-tab:not(.active):hover {
		background:var(--spb-color-toggle-hover-bg,#dcecff)!important;
		color:var(--spb-color-toggle-hover-text,#0147ca)!important;
	}
}
/* Live "N added" count under each toggle label (see renderTabCounts() in
 * frontend.js) — the button stacks label over count inside the same toggle
 * height, and the count simply inherits the button's current text color so
 * every active/inactive/hover state stays readable without its own tokens. */
.spb-swatch-header-actions .spb-price-tab {
	flex-direction:column!important;
	justify-content:center!important;
	row-gap:2px!important;
	line-height:1.05!important;
}
.spb-swatch-header-actions .spb-price-tab .spb-tab-count {
	display:block;
	font-size:8.5px;
	font-weight:600;
	line-height:1;
	letter-spacing:.03em;
	opacity:.82;
	white-space:nowrap;
}
.spb-swatch-header-actions .spb-price-tab .spb-tab-count[hidden] { display:none; }

/* A selected swatch always keeps ONE configured selected outline, including
 * when it already has quantity and is hovered, focused, pressed or right-clicked.
 * The separate in-cart ring is only for added swatches that are not selected. */
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.active,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.active:hover,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.active:focus,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.active:focus-visible,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.active:active,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"],
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"]:hover,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"]:focus,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:hover,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus-visible,
.spb-summary #spb-price-tabs .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:active {
	box-shadow:none!important;
	border-color:transparent!important;
	background:var(--spb-color-swatch-selected-bg,#edf4ff)!important;
	outline:var(--spb-swatch-selected-border-width,2px) solid var(--spb-color-swatch-highlight,#ff5a3c)!important;
	outline-offset:0!important;
}
@media (max-width:600px) {
	#spb-v2-cart .spb-v2-cart-tabs button { font-size:10px!important; }
	#spb-v2-cart .spb-v2-cart-tabs button > span { min-width:24px!important; width:24px!important; max-width:24px!important; height:24px!important; min-height:24px!important; max-height:24px!important; font-size:8px!important; }
	#spb-v2-cart .spb-v2-cart-item { grid-template-columns:46px minmax(0,1fr) auto!important; gap:8px!important; padding:9px!important; }
	#spb-v2-cart .spb-v2-cart-item > img { width:46px!important; height:46px!important; }
}

/* =====================================================================
 * V2 design-token bridge. Every value below has a matching backend field
 * and is also emitted by the instant iframe preview compiler.
 * ===================================================================== */
#spb-price-tabs .spb-v2-mode-copy {
	margin-top:var(--spb-mode-header-margin-top,12px)!important;
	margin-bottom:var(--spb-mode-header-margin-bottom,14px)!important;
	border-radius:var(--spb-mode-header-radius,12px)!important;
}
#spb-price-tabs .spb-v2-mode-title { padding:var(--spb-mode-header-title-padding,9px) 16px!important; }
#spb-price-tabs .spb-v2-mode-title strong { font-size:var(--spb-mode-header-title-size,15px)!important; }
#spb-price-tabs.spb-mode-retail .spb-v2-mode-title { background:var(--spb-color-mode-header-retail-bg,#0147ca)!important; }
#spb-price-tabs.spb-mode-retail .spb-v2-mode-title strong { color:var(--spb-color-mode-header-retail-text,#fff)!important; }
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-title { background:var(--spb-color-mode-header-wholesale-bg,#0f766e)!important; }
#spb-price-tabs.spb-mode-wholesale .spb-v2-mode-title strong { color:var(--spb-color-mode-header-wholesale-text,#fff)!important; }
#spb-price-tabs .spb-v2-mode-benefits {
	column-gap:var(--spb-mode-header-benefit-gap,38px)!important;
	padding:var(--spb-mode-header-benefits-padding,11px) 16px!important;
	background:var(--spb-color-mode-benefits-bg,#fff)!important;
}
#spb-price-tabs .spb-v2-mode-benefits span {
	color:var(--spb-color-mode-benefits-text,#0b1736)!important;
	font-size:var(--spb-mode-header-benefit-size,12px)!important;
}
#spb-price-tabs .spb-v2-benefit-check circle { fill:var(--spb-color-mode-benefits-check,#83d68c)!important; }

.spb-swatch-btn .spb-sw-stock-dot {
	width:var(--spb-swatch-dot-size,9px)!important;
	height:var(--spb-swatch-dot-size,9px)!important;
}
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-instock,
.spb-swatch-status-legend .spb-dot-instock { background:var(--spb-color-swatch-dot-instock,#16a34a)!important; }
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-onorder,
.spb-swatch-status-legend .spb-dot-onorder { background:var(--spb-color-swatch-dot-onorder,#f59e0b)!important; }
.spb-swatch-btn .spb-sw-stock-dot.spb-dot-outofstock,
.spb-swatch-status-legend .spb-dot-outofstock { background:var(--spb-color-swatch-dot-outofstock,#dc2626)!important; }
.spb-swatch-status-legend {
	column-gap:var(--spb-status-legend-gap,16px)!important;
	margin-top:var(--spb-status-legend-margin-top,10px)!important;
	color:var(--spb-color-status-legend-text,#607089)!important;
	font-size:var(--spb-status-legend-font-size,11px)!important;
}

.spb-summary .spb-swatch-btn .spb-v2-qty,
#spb-v2-cart .spb-v2-drawer-qty {
	min-height:var(--spb-swatch-qty-height,34px)!important;
	height:calc(var(--spb-swatch-qty-height,34px) + 1px)!important;
	border-color:var(--spb-color-swatch-qty-border,#cfdded)!important;
	border-radius:var(--spb-swatch-qty-radius,9px)!important;
	background:var(--spb-color-swatch-qty-bg,#eef4fb)!important;
}
.spb-summary .spb-swatch-btn .spb-v2-minus,
.spb-summary .spb-swatch-btn .spb-v2-plus,
#spb-v2-cart .spb-v2-drawer-qty button,
#spb-v2-cart .spb-v2-drawer-qty output {
	height:var(--spb-swatch-qty-height,34px)!important;
	min-height:var(--spb-swatch-qty-height,34px)!important;
}
.spb-summary .spb-swatch-btn .spb-v2-minus,
#spb-v2-cart .spb-v2-drawer-qty button:not(.is-plus) { color:var(--spb-color-swatch-qty-minus,#0147ca)!important; }
#spb-v2-cart .spb-v2-drawer-qty button:not(.is-plus):hover,
.spb-summary .spb-swatch-btn .spb-v2-minus:hover { background:var(--spb-color-swatch-qty-hover-bg,#e6f2ff)!important; }
/* Wholesale minus hover: its own field instead of inheriting the retail one. */
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-v2-minus:hover,
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button:not(.is-plus):hover { background:var(--spb-color-swatch-qty-wholesale-hover-bg,#e4f4f0)!important; }
.spb-summary .spb-swatch-btn .spb-v2-minus,
.spb-summary .spb-swatch-btn .spb-v2-plus,
#spb-v2-cart .spb-v2-drawer-qty output { border-color:var(--spb-color-swatch-qty-divider,#dbe6f2)!important; }
/* The number cell has its OWN background token ("Quantity number background"),
 * distinct from the −/+ cells' control background, so the count reads as its
 * own field between the two buttons. */
.spb-summary .spb-swatch-btn .spb-v2-qty-value,
#spb-v2-cart .spb-v2-drawer-qty output { font-size:var(--spb-swatch-qty-font-size,12.5px)!important; background:var(--spb-color-swatch-qty-value-bg,#fff)!important; }
.spb-summary #spb-price-tabs.spb-mode-retail .spb-v2-plus,
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="retail"] .spb-v2-drawer-qty button.is-plus {
	background:var(--spb-color-swatch-qty-retail-plus-bg,#0147ca)!important;
	color:var(--spb-color-swatch-qty-retail-plus-text,#fff)!important;
}
.spb-summary #spb-price-tabs.spb-mode-retail .spb-v2-plus:hover,
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="retail"] .spb-v2-drawer-qty button.is-plus:hover { background:var(--spb-color-swatch-qty-retail-plus-hover-bg,var(--spb-retail-hover,#00389f))!important; }
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-v2-plus,
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button.is-plus {
	background:var(--spb-color-swatch-qty-wholesale-plus-bg,#0f766e)!important;
	color:var(--spb-color-swatch-qty-wholesale-plus-text,#fff)!important;
}
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-v2-plus:hover,
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-drawer-qty button.is-plus:hover { background:var(--spb-color-swatch-qty-wholesale-plus-hover-bg,var(--spb-b2b-hover,#115e59))!important; }

.spb-v2-main-action { min-height:var(--spb-action-height,54px)!important; height:var(--spb-action-height,54px)!important; }
.spb-v2-main-action.has-items {
	outline-width:var(--spb-action-outline-width,2px)!important;
	outline-color:var(--spb-color-action-outline-start,#72b8ff)!important;
	outline-offset:var(--spb-action-outline-offset,3px)!important;
}
.spb-retail-action-row { gap:var(--spb-action-row-gap,12px)!important; margin-top:var(--spb-action-margin-top,18px)!important; }
.spb-retail-action-row > #spb-v2-main-action,
.spb-retail-action-row > .spb-more-info-btn { height:var(--spb-action-height,54px)!important; min-height:var(--spb-action-height,54px)!important; max-height:var(--spb-action-height,54px)!important; }
@keyframes spb-v2-outline-color { 0%,100%{outline-color:var(--spb-color-action-outline-start,#72b8ff)} 50%{outline-color:var(--spb-color-action-outline-end,#fff)} }

.spb-v2-cart-panel { padding:var(--spb-cart-panel-padding,16px)!important; background:var(--spb-color-cart-drawer-bg,#fff)!important; }
.spb-v2-cart-close {
	border-color:var(--spb-color-cart-close-border,#e4ebf4)!important;
	background:var(--spb-color-cart-close-bg,#f8fbff)!important;
	color:var(--spb-color-cart-close-text,#0b1736)!important;
}
.spb-v2-cart-close:hover { background:var(--spb-color-cart-close-hover-bg,#edf4ff)!important; color:var(--spb-color-cart-close-hover-text,#0147ca)!important; }
#spb-v2-cart .spb-v2-cart-tabs button { border-radius:var(--spb-cart-tab-radius,9px)!important; font-size:var(--spb-cart-tab-font-size,12px)!important; }
#spb-v2-cart .spb-v2-cart-tabs button:not(.is-active):hover { background:var(--spb-color-cart-tab-hover-bg,#eaf4ff)!important; color:var(--spb-color-cart-tab-hover-text,#0147ca)!important; }
#spb-v2-cart .spb-v2-cart-tabs button > span,
.spb-v2-header-cart-link > .spb-v2-header-count,
.cart-item .spb-v2-header-cart-link > .spb-v2-header-count {
	width:var(--spb-cart-badge-size,26px)!important;
	min-width:var(--spb-cart-badge-size,26px)!important;
	max-width:var(--spb-cart-badge-size,26px)!important;
	height:var(--spb-cart-badge-size,26px)!important;
	min-height:var(--spb-cart-badge-size,26px)!important;
	max-height:var(--spb-cart-badge-size,26px)!important;
	background:var(--spb-color-cart-badge-bg,#e53935)!important;
	color:var(--spb-color-cart-badge-text,#fff)!important;
}
#spb-v2-cart .spb-v2-cart-item {
	gap:var(--spb-cart-item-gap,11px)!important;
	padding:var(--spb-cart-item-padding,11px)!important;
	border-color:var(--spb-color-cart-item-border,#e2eaf4)!important;
	border-radius:var(--spb-cart-item-radius,12px)!important;
	background:var(--spb-color-cart-item-bg,#fff)!important;
}
#spb-v2-cart .spb-v2-cart-item:hover { background:var(--spb-color-cart-item-hover-bg,#f8fbff)!important; border-color:var(--spb-color-cart-item-hover-border,#c8d9ec)!important; }
#spb-v2-cart .spb-v2-cart-copy > strong { font-size:var(--spb-cart-name-size,12px)!important; }
#spb-v2-cart .spb-v2-cart-copy > small { font-size:var(--spb-cart-meta-size,9.5px)!important; }
#spb-v2-cart .spb-v2-cart-copy > .spb-v2-cart-unit { font-size:var(--spb-cart-unit-size,10px)!important; }
#spb-v2-cart .spb-v2-cart-line { padding-right:var(--spb-cart-total-right-padding,8px)!important; }
#spb-v2-cart .spb-v2-cart-line b { font-size:var(--spb-cart-total-size,12px)!important; }
#spb-v2-cart .spb-v2-cart-extra-note {
	border-left-color:var(--spb-color-cart-note-border,#0147ca)!important;
	background:var(--spb-color-cart-note-bg,#f5f9ff)!important;
	color:var(--spb-color-cart-note-text,#4f5d73)!important;
}

/* =====================================================================
 * B2B-mode swatch state colors — separate from Retail. Each rule pairs a
 * dedicated Commerce Features field with the state the shared (retail)
 * rules above paint for both modes; ID + mode-class specificity appended
 * last so these win whenever the B2B tab is active.
 * ===================================================================== */
/* Hover: own border color (+ the existing wholesale hover background).
 * Selected cards excluded — they keep the selected colors under the pointer. */
@media (hover:hover) {
	.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled):not(:disabled):hover {
		border-color:var(--spb-b2b-swatch-hover-border,#14b8a6)!important;
		background:var(--spb-b2b-swatch-hover-bg,#e8f6f2)!important;
	}
}
/* Selected: own border + own background (thick-border mechanism used by a
 * selected card without quantity). */
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.active,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn[aria-pressed="true"],
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.is-selected-persistent,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.active:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn[aria-pressed="true"]:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.is-selected-persistent:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.active:active,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.is-selected-persistent:focus,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.is-selected-persistent:focus-visible {
	border-color:var(--spb-b2b-selected-border,#0d9488)!important;
	background:var(--spb-b2b-swatch-active-bg,#e6f7f3)!important;
}
/* Selected + has quantity: that state is drawn with an OUTLINE (border kept
 * transparent) by the shared rule — recolor the outline and background. */
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.active,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.active:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.active:focus,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.active:focus-visible,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.active:active,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"],
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"]:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:hover,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus-visible,
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:active {
	outline-color:var(--spb-b2b-selected-border,#0d9488)!important;
	background:var(--spb-b2b-swatch-active-bg,#e6f7f3)!important;
}
/* Price badge: own background in B2B (text color already follows the
 * wholesale accent). */
.spb-summary #spb-price-tabs.spb-mode-wholesale .spb-swatch-btn .spb-sw-price-now {
	background:var(--spb-b2b-price-badge-bg,#e0f2ee)!important;
}
/* View Wholesale Order outline: own color pair + its own keyframes — the
 * shared retail animation forced its light-blue colors in both modes, which
 * washed out against the teal B2B button. */
.spb-mode-wholesale .spb-v2-main-action.has-items {
	outline-color:var(--spb-b2b-action-outline-start,#7ce0d3)!important;
	animation-name:spb-v2-outline-color-b2b!important;
}
@keyframes spb-v2-outline-color-b2b {
	0%,100% { outline-color:var(--spb-b2b-action-outline-start,#7ce0d3); }
	50% { outline-color:var(--spb-b2b-action-outline-end,#fff); }
}
@media (prefers-reduced-motion:reduce) { .spb-mode-wholesale .spb-v2-main-action.has-items { animation:none!important; } }

/* =====================================================================
 * Retail-mode swatch state colors — the exact mirror of the B2B block
 * above, scoped to .spb-mode-retail with the SAME specificity, consuming
 * only the Retail fields (Variation Swatches section). With both modes
 * explicitly scoped and mutually exclusive, neither mode's fields can
 * bleed into the other: retail vars are simply never read while the B2B
 * tab is active, and vice versa. The unscoped state rules earlier in the
 * file remain only as a pre-JS fallback before the mode class is set.
 * ===================================================================== */
@media (hover:hover) {
	.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn:not(.active):not([aria-pressed="true"]):not(.is-selected-persistent):not(.disabled):not(:disabled):hover {
		border-color:var(--spb-color-swatch-hover-border,#ff5a3c)!important;
		background:var(--spb-color-swatch-hover-bg,#fff7f4)!important;
	}
}
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.active,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn[aria-pressed="true"],
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.is-selected-persistent,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.active:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn[aria-pressed="true"]:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.is-selected-persistent:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.active:active,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.is-selected-persistent:focus,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.is-selected-persistent:focus-visible {
	border-color:var(--spb-color-swatch-highlight,#ff5a3c)!important;
	background:var(--spb-color-swatch-selected-bg,#edf4ff)!important;
}
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.active,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.active:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.active:focus,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.active:focus-visible,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.active:active,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"],
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart[aria-pressed="true"]:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:hover,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:focus-visible,
.spb-summary #spb-price-tabs.spb-mode-retail .spb-swatch-btn.spb-v2-in-cart.is-selected-persistent:active {
	outline-color:var(--spb-color-swatch-highlight,#ff5a3c)!important;
	background:var(--spb-color-swatch-selected-bg,#edf4ff)!important;
}

/* =====================================================================
 * Mode-follow theming: supporting elements adopt the active mode's accent
 * (retail accent on the Retail tab, wholesale accent on B2B) — the
 * Feet/Meters toggle, Size Chart hover, More Info button, trust chips,
 * T&C link, the "select a size" prompt and the price card's own outline.
 * ===================================================================== */
/* Price card outline follows the mode — each mode has its OWN configurable
 * field (Commerce Features → "Retail section outline" / "Wholesale section
 * outline"). */
#spb-price-tabs.spb-mode-retail { border-color:var(--spb-retail-section-border,#9bb9e9)!important; }
#spb-price-tabs.spb-mode-wholesale { border-color:var(--spb-b2b-section-border,#9ccac4)!important; }
/* Feet/Meters active segment. */
#spb-price-tabs.spb-mode-wholesale #spb-swatch-unit-toggle .spb-unit-btn.active {
	background:var(--spb-b2b-accent,#0f766e)!important;
	color:var(--spb-b2b-text,#fff)!important;
}
/* Size Chart link hover. */
#spb-price-tabs.spb-mode-wholesale .spb-size-chart-btn:hover { color:var(--spb-b2b-accent,#0f766e)!important; }
/* More Info button. */
.spb-page-mode-wholesale .spb-more-info-btn,
.spb-page-mode-wholesale .spb-wholesale-more-info-btn {
	background:#fff!important;
	border-color:var(--spb-b2b-accent,#0f766e)!important;
	color:var(--spb-b2b-accent,#0f766e)!important;
}
.spb-page-mode-wholesale .spb-more-info-btn:hover,
.spb-page-mode-wholesale .spb-wholesale-more-info-btn:hover {
	background:var(--spb-b2b-accent,#0f766e)!important;
	border-color:var(--spb-b2b-accent,#0f766e)!important;
	color:var(--spb-b2b-text,#fff)!important;
}
/* Trust chips (Genuine Brand / Fast Dispatch) + T&C link. */
.spb-page-mode-wholesale .spb-trust-chip {
	color:var(--spb-b2b-accent,#0f766e)!important;
	border-color:color-mix(in srgb,var(--spb-b2b-accent,#0f766e) 26%,#fff)!important;
	background:color-mix(in srgb,var(--spb-b2b-surface,#effcf9) 65%,#fff)!important;
}
.spb-page-mode-wholesale .spb-trust-chip svg { color:var(--spb-b2b-accent,#0f766e)!important; stroke:currentColor; }
.spb-page-mode-wholesale .spb-tc-link,
.spb-page-mode-wholesale .spb-tc-link:hover { color:var(--spb-b2b-accent,#0f766e)!important; }
/* "Please select a size…" prompt. */
#spb-price-tabs.spb-mode-wholesale .spb-price-tabs-amount.is-prompt { color:var(--spb-b2b-accent,#0f766e)!important; }

/* GST/shipping note — one calmer, mode-themed style in both drawer panes:
 * soft accent-tinted card with an accent left rail, replacing the mismatched
 * palette it had before. Follows retail accent in the retail pane and the
 * wholesale accent in the B2B pane automatically. */
#spb-v2-cart .spb-v2-cart-extra-note {
	margin:10px 0 12px!important;
	padding:9px 12px!important;
	border:1px solid transparent!important;
	border-left-width:3px!important;
	border-radius:10px!important;
	font-size:10.5px!important;
	font-weight:600!important;
	line-height:1.55!important;
	letter-spacing:.01em;
}
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="retail"] .spb-v2-cart-extra-note {
	background:color-mix(in srgb,var(--spb-retail-accent,#0147ca) 6%,#fff)!important;
	border-color:color-mix(in srgb,var(--spb-retail-accent,#0147ca) 16%,#fff)!important;
	border-left-color:var(--spb-retail-accent,#0147ca)!important;
	color:color-mix(in srgb,var(--spb-retail-accent,#0147ca) 62%,#1f2a44)!important;
}
#spb-v2-cart .spb-v2-cart-pane[data-spb-cart-pane="wholesale"] .spb-v2-cart-extra-note {
	background:color-mix(in srgb,var(--spb-b2b-accent,#0f766e) 6%,#fff)!important;
	border-color:color-mix(in srgb,var(--spb-b2b-accent,#0f766e) 16%,#fff)!important;
	border-left-color:var(--spb-b2b-accent,#0f766e)!important;
	color:color-mix(in srgb,var(--spb-b2b-accent,#0f766e) 62%,#1f2a44)!important;
}

/* =====================================================================
 * Per-mode "selected bar" colors, per-mode benefit tick circles, and the
 * dedicated Wholesale Order progress-box palette. Appended last; every
 * rule reads its OWN field, so Retail and B2B can never bleed into each
 * other and none of these touch any other component.
 * ===================================================================== */
/* Selected bar ("No size selected yet…" / "Selected: …"). */
#spb-price-tabs.spb-mode-retail .spb-selected-bar,
.spb-page-mode-retail .spb-selected-bar {
	background-color:var(--spb-color-selected-bar-bg,#eaf6ff)!important;
	border-color:var(--spb-color-selected-bar-border,#d9eeff)!important;
	color:var(--spb-color-selected-bar-text,#4f5d73)!important;
}
#spb-price-tabs.spb-mode-wholesale .spb-selected-bar,
.spb-page-mode-wholesale .spb-selected-bar {
	background-color:var(--spb-color-wholesale-selected-bar-bg,#eef9f6)!important;
	border-color:var(--spb-color-wholesale-selected-bar-border,#cfeae3)!important;
	color:var(--spb-color-wholesale-selected-bar-text,#33564f)!important;
}
/* Benefit tick circle — split per mode. The existing (retail) field keeps
 * its key, so previously saved colors keep working unchanged. */
#spb-price-tabs.spb-mode-retail .spb-v2-benefit-check circle {
	fill:var(--spb-color-mode-benefits-check,#83d68c)!important;
}
#spb-price-tabs.spb-mode-wholesale .spb-v2-benefit-check circle {
	fill:var(--spb-color-mode-benefits-check-wholesale,#83d68c)!important;
}
/* Wholesale Order progress box — wholesale-only by nature (the panel is
 * hidden outside B2B mode), each picker drives exactly one part. Layout,
 * spacing, radius and the progress math are untouched. */
#spb-v2-wholesale-progress {
	background:var(--spb-color-wsprog-box-bg,#f4fbf9)!important;
	border-color:var(--spb-color-wsprog-box-border,#d9efe9)!important;
}
#spb-v2-wholesale-progress .spb-v2-progress-heading span {
	color:var(--spb-color-wsprog-title,#0f766e)!important;
}
#spb-v2-wholesale-progress .spb-v2-progress-heading strong {
	color:var(--spb-color-wsprog-amount,#123b48)!important;
}
#spb-v2-wholesale-progress .spb-v2-progress-track {
	background:var(--spb-color-wsprog-track,#dcefe9)!important;
}
#spb-v2-wholesale-progress .spb-v2-progress-track span {
	background:var(--spb-color-wsprog-fill,#14b8a6)!important;
}
#spb-v2-wholesale-progress p {
	color:var(--spb-color-wsprog-message,#3f6f68)!important;
}

/* "In stock" line follows its own field in B2B mode ("Wholesale / B2B Mode
 * Colors" → In-stock text (Wholesale)) — the shared blue "In-stock text"
 * field keeps governing Retail only. */
#spb-price-tabs.spb-mode-wholesale .spb-stock-ok,
#spb-price-tabs.spb-mode-wholesale .spb-stock-pill.in-stock {
	color: var(--spb-b2b-stock, #0f766e) !important;
}