/*
  shr-pdp-2026.css — Product Page (PDP) redesign, "s2u 2026".

  Flag-gated (SHR_PDP_V2_LIVE / shr_is_pdp_v2_enabled(), functions.php) —
  only enqueued when the new design is active. Depends on shr-sections.css
  for tokens + shared primitives (.s2u-blueprint, .s2u-corner, .s2u-lift).

  Design source: _ai/product-page-conversion/design_handoff_product_page/
*/

.s2u-pdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 24px);
}

@media (max-width: 900px) {
	/* minmax(0,1fr) (not 1fr) so the column can shrink below the FlexSlider
	   slide's baked-in fixed width — otherwise the gallery overflows on
	   mobile. shr-pdp-2026.js re-runs FlexSlider's resize() on window resize
	   so the main image recomputes to fit. */
	.s2u-pdp-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.s2u-pdp-gallery,
	.s2u-pdp-gallery__frame,
	.s2u-pdp-gallery .flex-viewport {
		max-width: 100%;
		overflow: hidden;
	}
}

/* Widen the breadcrumb to line up with the (now 1440px) product content. */
.single-product .storefront-breadcrumb .col-full {
	max-width: 1440px !important;
}

/* Product pages only (this stylesheet is enqueued only on the PDP): widen the
   shared header + footer inners to 1440 too, so the whole product page reads
   at one consistent width. Other page types keep the 1240 design-system width
   (they don't load this file). */
.s2u-header__inner,
.s2u-footer__cols,
.s2u-footer__bottom,
.s2u-footer__inner {
	max-width: 1440px;
}

/* style.css's legacy `.single-product div.product .images { width: 45%; }`
   and `.single-product div.product .summary { width: 50%; }` (written for
   the old non-grid PDP layout) still match these elements — the v2
   template deliberately keeps WooCommerce's native "images"/"summary"
   classes on them for plugin/JS compatibility, but that drags in those old
   percentage widths too, squeezing both grid columns down to a fraction of
   their actual cell. Two separate elements carry the "images" class here —
   the wrapper div AND WooCommerce's own .woocommerce-product-gallery inside
   it — both need overriding, or FlexSlider measures the inner one and still
   bakes in a narrow inline width (confirmed live 2026-07-23: gallery
   measured 186-207px inside a 456-572px cell either way). */
.s2u-pdp-grid > .s2u-pdp-gallery,
.s2u-pdp-grid > .s2u-pdp-buybox,
.s2u-pdp-gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
}

/* Gallery column: plain flex stack. The blueprint frame lives on __frame
   (main image only); the thumbnail rail is moved below it by shr-pdp-2026.js. */
.s2u-pdp-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s2u-pdp-gallery__frame {
	position: relative;
	padding: 20px;
	background: #fff;
}

.s2u-pdp-buybox {
	padding: 4px 0;
}

/* Brand kicker + authorised-dealer badge — shr_pdp_brand_kicker(), functions.php */

.s2u-pdp-kicker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

.s2u-pdp-kicker__brand {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--s2u-accent);
}

.s2u-pdp-kicker__dealer {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border: 1px solid var(--s2u-divider);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--s2u-text);
	text-decoration: none;
}

.s2u-pdp-kicker__check {
	flex: none;
	color: var(--s2u-accent-700);
}

/* H1 — condensed uppercase per the design's title treatment. */
.s2u-pdp-buybox .product_title {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .01em;
}

/* Price — small uppercase "From:" beside a big bold dark amount (mockup). */
.s2u-pdp-buybox p.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 2px 0 14px;
	color: var(--s2u-navy);
}

.s2u-pdp-buybox p.price .from {
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--s2u-text-muted, #5b6570);
}

.s2u-pdp-buybox p.price .amount {
	font-family: var(--s2u-font-heading);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--s2u-navy);
}

/* Sale: struck regular price smaller/grey, sale price keeps the big treatment. */
.s2u-pdp-buybox p.price del,
.s2u-pdp-buybox p.price del .amount {
	opacity: 1;
	font-size: 20px;
	font-weight: 400;
	color: var(--s2u-text-muted, #5b6570);
}

.s2u-pdp-buybox p.price ins {
	text-decoration: none;
}

/* Qty + Add to Cart + Request a Quote in one row — form.cart and the YITH
   div are sibling block elements in native markup (not nested), so this
   shrink-wraps both inline-flex rather than restructuring the DOM.
   Simple/variable products only: form.cart's direct children are just
   .quantity + button, nothing else. */
.s2u-pdp-buybox form.cart:not(.bundle_form) {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	vertical-align: top;
	margin: 0 12px 16px 0;
}

/* Bundle products: form.cart ALSO contains the bundled-item rows (each a
   div.bundled_product, direct child of the same form) — flexing the whole
   form squashes those rows into flex items alongside qty/button, wrapping
   their text into a single narrow column. Only flex the plugin's own
   dedicated qty/button wrapper nested inside, leaving the bundled-item
   rows in normal block flow untouched. */
.s2u-pdp-buybox form.cart.bundle_form .bundle_button {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 16px;
}

.s2u-pdp-buybox form.cart .quantity {
	margin: 0;
}

.s2u-pdp-buybox form.cart .quantity input.qty {
	width: 60px;
	height: 44px;
	border: 1px solid var(--s2u-divider);
	border-radius: 0;
	text-align: center;
}

.s2u-pdp-buybox form.cart button.single_add_to_cart_button {
	height: 44px;
	margin: 0;
	padding: 0 28px;
	background: var(--s2u-red);
	border: 1px solid var(--s2u-red);
	border-radius: 0;
	color: #fff;
	text-transform: uppercase;
	font-family: var(--s2u-font-heading);
	letter-spacing: .03em;
}

.s2u-pdp-buybox form.cart button.single_add_to_cart_button:hover {
	background: var(--s2u-red-dark);
	border-color: var(--s2u-red-dark);
}

.s2u-pdp-buybox .yith-ywraq-add-to-quote {
	display: inline-flex;
	vertical-align: top;
	margin: 0 0 16px;
}

.s2u-pdp-buybox .yith-ywraq-add-to-quote a.button {
	height: 44px;
	padding: 0 22px;
}

/* Qty + Add to cart + Request a quote on one row. shr-pdp-2026.js relocates
   the (separately-hooked) YITH quote button up next to the add-to-cart:
   into .bundle_button for bundle products, or into this flex row for simple
   ones — so all three CTAs share a line per the mockup. */
.s2u-pdp-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

/* Uniform 12px gaps: zero every residual margin (WooCommerce/Storefront add a
   right margin to .quantity and the form) so the CTA row spaces evenly. */
.s2u-pdp-cta-row > *,
.s2u-pdp-cta-row .quantity,
.s2u-pdp-buybox form.cart .bundle_button > *,
.s2u-pdp-buybox form.cart .bundle_button .yith-ywraq-add-to-quote {
	margin: 0 !important;
}

/* Trust strip — shr_pdp_trust_strip(), functions.php */

.s2u-pdp-trust {
	display: flex;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid var(--s2u-divider);
}

.s2u-pdp-trust li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--s2u-text);
}

.s2u-pdp-trust li + li {
	border-left: 1px solid var(--s2u-divider);
}

.s2u-pdp-trust__check {
	flex: none;
	color: var(--s2u-accent-700);
}

/* Advice line — shr_pdp_advice_line(), functions.php */

.s2u-pdp-advice {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--s2u-text);
}

.s2u-pdp-advice a {
	color: var(--s2u-accent-700);
	text-decoration: underline;
}

.s2u-pdp-spec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

/* Compact single-line pills matching the mockup's tag row. Three tones:
   outline (default), accent (security level — filled), neutral. */
.s2u-pdp-spec-chip {
	padding: 5px 11px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
}

.s2u-pdp-spec-chip--outline {
	border: 1px solid var(--s2u-accent-400);
	color: var(--s2u-text);
	background: #fff;
}

.s2u-pdp-spec-chip--accent {
	border: 1px solid var(--s2u-accent-700);
	background: var(--s2u-accent-100);
	color: var(--s2u-accent-700);
}

.s2u-pdp-spec-chip--neutral {
	border: 1px solid var(--s2u-divider);
	color: var(--s2u-text-muted, #5b6570);
	background: #fff;
}

/* Buy-box status line (wireframe states 1 & 2) — shr_pdp_status_line().
   Steel positive "In stock" indicator on the left; red SALE tag pushed right
   when on sale (homepage tag style, pairs with the gallery sale-flash badge). */
.s2u-pdp-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.s2u-pdp-status__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--s2u-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--s2u-accent-700);
}

.s2u-pdp-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--s2u-accent-700);
	box-shadow: 0 0 0 3px rgba(64, 99, 140, .18);
}

.s2u-pdp-status__ship {
	color: var(--s2u-text-muted, #5b6570);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.s2u-pdp-status__sale {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	background: var(--s2u-red);
	color: #fff;
	font-family: var(--s2u-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 2px;
}

/* Gallery sale-flash (wireframe state 2): WooCommerce's native .onsale span
   renders top-left of the blueprint frame — exactly where the .s2u-pdp-
   gallery__fig model label already sits — so it collides and duplicates the
   buy-box SALE tag two red marks apart. The buy-box SALE tag + native
   struck/red price ARE the sale treatment; hide the redundant gallery flash. */
.s2u-pdp-gallery__frame .onsale {
	display: none;
}

/* Buy-box CTA states (call-for-price, out-of-stock, backorder) —
   shr_pdp_render_call_for_price() / shr_pdp_render_unavailable(), functions.php */

.s2u-pdp-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 16px;
}

.s2u-pdp-cta__status {
	margin: 0;
	font-family: var(--s2u-font-heading);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--s2u-navy);
}

.s2u-pdp-cta__status--out,
.s2u-pdp-cta__status--backorder {
	color: var(--s2u-red);
	font-size: 13px;
	letter-spacing: .04em;
}

.s2u-btn--disabled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 1px solid var(--s2u-divider);
	background: var(--s2u-accent-100);
	color: var(--s2u-text);
	opacity: .45;
	cursor: not-allowed;
}

/* .s2u-btn--ghost (shr-shared.css) is white-on-transparent, built for dark
   hero/CTA sections — invisible on the PDP's white buy-box, so override to
   navy for this light context (same fix already used on the archive-2026
   FAQ toggle). Design convention: navy = quote/secondary actions. */
.s2u-pdp-cta .s2u-btn--ghost {
	background: transparent;
	border-color: var(--s2u-navy);
	color: var(--s2u-navy);
}

.s2u-pdp-cta .s2u-btn--ghost:hover {
	background: var(--s2u-navy);
	border-color: var(--s2u-navy);
	color: #fff;
}

/* =============================================================
   GALLERY — native WooCommerce FlexSlider markup, restyled.
   ============================================================= */

.s2u-pdp-gallery {
	position: relative;
}

/* WooCommerce/Storefront leaves the main gallery image at its natural size
   (416px here) inside the 529px plate, so it floats small with whitespace —
   stretch it to fill the frame like the mockup's contained hero image.
   EXCLUDE .zoomImg: the hover-zoom plugin appends its magnified overlay as
   <img class="zoomImg"> inside .woocommerce-product-gallery__image and sizes
   it inline to the full-resolution dimensions; a width:100% !important here
   would clobber that and render the zoom at the wrong size. */
.s2u-pdp-gallery .woocommerce-product-gallery__image img:not(.zoomImg),
.s2u-pdp-gallery .woocommerce-product-gallery__wrapper img:not(.zoomImg) {
	width: 100% !important;
	height: auto;
}

.s2u-pdp-gallery__fig {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 4px 10px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--s2u-divider);
	font-family: var(--s2u-font-heading);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--s2u-navy);
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

/* Storefront's own core CSS (.woocommerce-product-gallery--columns-4
   .flex-control-thumbs li { width: 14.2857%; margin-right: 14.2857%; })
   has higher specificity (5 classes + 2 types vs. our 2 classes + 1 type)
   and wins over the width/gap intended here, spacing 5 thumbnails so wide
   they wrap to multiple rows — override explicitly. */
.s2u-pdp-gallery .flex-control-thumbs li {
	width: 78px !important;
	height: 78px !important;
	margin-right: 0 !important;
	float: none !important;
	border: 1px solid var(--s2u-divider);
	cursor: pointer;
}

.s2u-pdp-gallery .flex-control-thumbs li img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.s2u-pdp-gallery .flex-control-thumbs li img.flex-active {
	border: 2px solid var(--s2u-red);
}

/* Single-image products — FlexSlider still renders one <li>, hide the
   now-redundant thumb row + native 1-image counter badge. */
.s2u-pdp-gallery .flex-control-thumbs:has(li:only-child) {
	display: none;
}

/* =============================================================
   BUY-BOX — YITH Request-a-Quote button restyled navy
   (design convention: navy = quote actions), matches
   .s2u-pdp-cta .s2u-btn--ghost treatment above.
   ============================================================= */

.s2u-pdp-buybox .yith-ywraq-add-to-quote a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--s2u-navy) !important;
	border: 1px solid var(--s2u-navy) !important;
	color: #fff !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	font-family: var(--s2u-font-heading);
	letter-spacing: .03em;
}

.s2u-pdp-buybox .yith-ywraq-add-to-quote a.button:hover {
	background: var(--s2u-navy2) !important;
	border-color: var(--s2u-navy2) !important;
}

/* =============================================================
   TABS — Description / Additional information / Brand
   (native ul.tabs.wc-tabs — Reviews tab omitted sitewide, no
   reviews feature enabled).
   ============================================================= */

.woocommerce-tabs {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 24px) clamp(40px, 5vw, 64px);
}

/* Storefront floats ul.tabs left (377px), squeezing the panel beside it into
   a narrow right column — force it into a full-width horizontal bar on top so
   the description panel below spans the full width. */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 2px solid var(--s2u-navy);
	float: none !important;
	width: 100% !important;
}

.woocommerce-tabs ul.tabs li {
	flex: 1 1 0;
}

.woocommerce-tabs ul.tabs li a {
	text-align: center;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	float: none !important;
	width: 100% !important;
	clear: both;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 24px;
	font-family: var(--s2u-font-heading);
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #d4d4d7;
	text-decoration: none;
	background: transparent;
	transition: color .15s ease, background .15s ease;
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--s2u-red);
}

.woocommerce-tabs ul.tabs li.active a {
	background: var(--s2u-navy);
	color: #fff !important;
}

/* Storefront draws a little pointer triangle + borders on the active tab via
   pseudo-elements — they overlap our navy fill/label, so remove them. */
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::before,
.woocommerce-tabs ul.tabs li a::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel table.shop_attributes,
.woocommerce-tabs .woocommerce-Tabs-panel table.table {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-tabs .woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-tabs .woocommerce-Tabs-panel table.shop_attributes td {
	border: 1px solid var(--s2u-divider);
	padding: 10px 14px;
}

/* Additional information tab — clean horizontal-rule table like the tech-spec
   table; the tab label already says "Additional information", so hide the h2. */
#tab-additional_information > h2 {
	display: none;
}

#tab-additional_information {
	max-width: 860px;
}

#tab-additional_information table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14.5px;
}

#tab-additional_information table.shop_attributes th,
#tab-additional_information table.shop_attributes td {
	border: 0 !important;
	border-top: 1px solid var(--s2u-divider) !important;
	padding: 11px 20px !important;
	text-align: left;
}

#tab-additional_information table.shop_attributes tr:first-child th,
#tab-additional_information table.shop_attributes tr:first-child td {
	border-top: 0 !important;
}

#tab-additional_information table.shop_attributes th {
	width: 40%;
	font-weight: 400;
	color: var(--s2u-accent-700);
}

#tab-additional_information table.shop_attributes td {
	font-weight: 600;
}

/* =============================================================
   RELATED PRODUCTS — "You may also like" (native Woo loop markup).
   ============================================================= */

.related.products,
.upsells.products {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 24px) clamp(48px, 6vw, 80px);
}

.related.products > h2,
.upsells.products > h2 {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	font-size: 26px;
	margin: 0 0 20px;
	color: var(--s2u-navy);
}

.related.products ul.products,
.upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
	/* Storefront/Woo's own float-based grid sets width:30.75% on this li —
	   inside our CSS grid that percentage resolves against the grid cell
	   (not the row), collapsing cards to ~1/3 width. Override both. */
	width: 100% !important;
	float: none !important;
	border: 1px solid var(--s2u-divider);
	padding: 16px;
	background: #fff;
	transition: transform .18s ease, box-shadow .18s ease;
}

.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(29, 31, 32, .1);
}

/* Mobile: the minmax(200px) grid leaves only one oversized card per row on a
   phone. Force a tighter 2-up grid with smaller images, padding + text so the
   "You may also like" / related sections don't dominate the viewport. */
@media (max-width: 600px) {
	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.related.products ul.products li.product,
	.upsells.products ul.products li.product {
		padding: 10px;
	}
	.related.products > h2,
	.upsells.products > h2 {
		font-size: 21px;
		margin-bottom: 14px;
	}
	.related.products ul.products li.product .woocommerce-loop-product__title,
	.upsells.products ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
		line-height: 1.3;
	}
	.related.products ul.products li.product .price,
	.upsells.products ul.products li.product .price {
		font-size: 13px;
	}
}

/* =============================================================
   "YOU'RE VIEWING" BAR — custom bar (shr_pdp_viewing_bar(),
   functions.php), rendered before the footer with position:sticky
   so it rests above the footer (no float/animation, unlike
   Storefront's fixed sticky ATC which is disabled on v2).
   ============================================================= */

/* Storefront's own fixed sticky ATC is replaced by the custom bar below —
   hide it outright on v2 (the theme_mod filter doesn't remove the markup). */
.storefront-sticky-add-to-cart {
	display: none !important;
}

/* Storefront's .site-main (and .content-area) carry a bottom margin that opens
   a white gap between the sticky viewing bar and the footer — remove it on
   product pages so the bar sits flush above the footer. */
.single-product .content-area,
.single-product .site-main {
	margin-bottom: 0 !important;
}

.s2u-pdp-viewing {
	position: sticky;
	bottom: 0;
	z-index: 55;
	margin-top: clamp(32px, 4vw, 56px);
	/* Break out of the 95%-wide product container to span the full viewport
	   edge-to-edge (like the footer) — inner content stays centered. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--s2u-navy);
	border-top: 2px solid var(--s2u-red);
	box-shadow: 0 -8px 24px rgba(17, 27, 39, .25);
}

.s2u-pdp-viewing__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 8px clamp(16px, 4vw, 24px);
}

.s2u-pdp-viewing__info {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex: 1;
	min-width: 200px;
}

.s2u-pdp-viewing__label {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	white-space: nowrap;
}

.s2u-pdp-viewing__model {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}

.s2u-pdp-viewing__sub {
	color: rgba(255, 255, 255, .55);
}

.s2u-pdp-viewing__price {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: 20px;
	color: #fff;
	white-space: nowrap;
}

.s2u-pdp-viewing__price .amount,
.s2u-pdp-viewing__price ins,
.s2u-pdp-viewing__price del {
	color: #fff;
}

.s2u-pdp-viewing__cta {
	padding: 10px 24px;
	background: var(--s2u-red);
	border: 1px solid var(--s2u-red);
	color: #fff;
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.s2u-pdp-viewing__cta:hover {
	background: var(--s2u-red-dark);
	border-color: var(--s2u-red-dark);
	color: #fff;
}

/* Mobile: keep the bar to a single line — drop the label/subtitle, let the
   model truncate, shrink price + CTA so model · price · button fit one row. */
@media (max-width: 600px) {
	.s2u-pdp-viewing__inner {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.s2u-pdp-viewing__label,
	.s2u-pdp-viewing__sub {
		display: none;
	}

	.s2u-pdp-viewing__info {
		min-width: 0;
	}

	.s2u-pdp-viewing__model {
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.s2u-pdp-viewing__price {
		font-size: 16px;
	}

	.s2u-pdp-viewing__cta {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* =============================================================
   BUNDLE OFFERS CARD — wraps native Product Bundles ".bundled_product"
   rows (shr_pdp_bundle_card_open/close(), functions.php). Presentational
   only; the plugin's checkboxes/qty/pricing keep working unchanged.
   ============================================================= */

.s2u-bundle-card {
	position: relative;
	border: 1px solid var(--s2u-divider);
	background: #fff;
	margin: 0 0 16px;
}

.s2u-bundle-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--s2u-divider);
	background: linear-gradient(90deg, #eef6ff 0%, #f7fbff 100%);
}

.s2u-bundle-card__title {
	font-family: var(--s2u-font-heading);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--s2u-navy);
}

.s2u-bundle-card__badge {
	padding: 3px 9px;
	background: var(--s2u-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Each bundled item → a compact row: thumb left, details right. The native
   plugin floats these children and sets explicit % widths at equal-or-higher
   specificity, so flexbox + !important on float/width/margin is required to
   reclaim the layout (a plain grid gets ignored — the details column
   collapsed to ~32px). */
.s2u-bundle-card .bundled_product {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 11px 16px;
	border-top: 1px solid var(--s2u-divider);
	float: none;
	width: auto;
}

.s2u-bundle-card .bundled_product:first-child {
	border-top: 0;
}

.s2u-bundle-card .bundled_product_images {
	flex: none !important;
	width: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	float: none !important;
	border: 1px solid var(--s2u-divider);
}

.s2u-bundle-card .bundled_product_images img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}

.s2u-bundle-card .details {
	flex: 1 1 auto !important;
	width: auto !important;
	float: none !important;
	min-width: 0;
	margin: 0 !important;
}

/* The plugin's per-row title is the generic "Bundle Offer (save 10%)" — the
   card header already says that once, so drop the repeats; the excerpt below
   carries the actual product name. */
.s2u-bundle-card .bundled_product_title {
	display: none;
}

.s2u-bundle-card .bundled_product_excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--s2u-text);
}

.s2u-bundle-card .bundled_product_excerpt p {
	margin: 0;
}

/* "Add for [checkbox]" sits left; the price is pushed to the right edge with
   margin-left:auto (checkbox + label + price are all flex items in the
   plugin's <label>, so space-between would spread all three). */
/* Checkbox + (hidden "Add for") + price share a flex line; price pushed to the
   right with margin-left:auto. font-size:0 hides the stray "Add for" text node;
   children restore their own size. */
.s2u-bundle-card .bundled_product_optional_checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 6px 0 0;
	font-size: 0;
}

.s2u-bundle-card .bundled_product_checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--s2u-red);
	flex: none;
}

/* Price right-aligned; was-price struck grey stacked ABOVE the red now-price. */
.s2u-bundle-card .bundled_product .price {
	order: 3;
	margin-left: auto !important;
	text-align: right;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--s2u-red);
}

/* Insufficient-stock label swaps to the LEFT (near the checkbox); the price
   stays at the far right (order:3 + margin-left:auto). The label needs its own
   font-size since the parent label is font-size:0 (to hide "Add for"). */
.s2u-bundle-card .bundled_item_stock_label {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--s2u-red);
}

.s2u-bundle-card .bundled_product .price del {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--s2u-text-muted, #5b6570);
}

.s2u-bundle-card .bundled_product .price ins {
	text-decoration: none;
}

/* Each optional item is a single tick = 1 pc — omit the per-item qty stepper. */
.s2u-bundle-card .bundled_product .cart {
	display: none;
}

/* Insufficient-stock notice inside a bundled row. */
.s2u-bundle-card .bundled_product .stock.out-of-stock,
.s2u-bundle-card .bundled_product .wc-bundle-notice {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--s2u-red);
}

/* =============================================================
   MISC — hide the Storefront social-sharing row (not in the
   design), keep the short-description column full-width.
   ============================================================= */

.s2u-pdp .storefront-product-sharing {
	display: none;
}

.s2u-pdp-buybox .woocommerce-product-details__short-description {
	width: 100%;
	max-width: none;
}

/* =============================================================
   DESCRIPTION TAB — 2-column: authored product copy left,
   blueprint-framed "Technical specification" table right
   (shr_pdp_render_description_tab(), functions.php).
   ============================================================= */

.s2u-pdp-desc {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: clamp(20px, 2.5vw, 36px);
	align-items: start;
	padding-top: 8px;
}

@media (max-width: 900px) {
	.s2u-pdp-desc {
		grid-template-columns: 1fr;
	}
}

.s2u-pdp-desc__body {
	min-width: 0;
}

.s2u-pdp-desc__spec {
	background: #fff;
}

.s2u-pdp-desc__spec-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--s2u-divider);
	font-family: var(--s2u-font-heading);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--s2u-navy);
}

.s2u-pdp-desc__spec-sku {
	font-weight: 400;
	color: var(--s2u-text-muted, #5b6570);
	letter-spacing: .08em;
}

/* The generic tabs rule above borders every attribute cell like a grid;
   the spec table wants clean horizontal rules only, per the mockup. */
.s2u-pdp-desc__spec table.woocommerce-product-attributes,
.s2u-pdp-desc__spec table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.s2u-pdp-desc__spec table th,
.s2u-pdp-desc__spec table td {
	border: 0 !important;
	border-top: 1px solid var(--s2u-divider) !important;
	padding: 9px 20px !important;
	text-align: left;
}

.s2u-pdp-desc__spec table tr:first-child th,
.s2u-pdp-desc__spec table tr:first-child td {
	border-top: 0 !important;
}

.s2u-pdp-desc__spec table th {
	width: 48%;
	font-weight: 400;
	color: var(--s2u-accent-700);
}

.s2u-pdp-desc__spec table td {
	font-weight: 600;
}

/* =============================================================
   QTY STEPPER — [ − 1 + ] around the main add-to-cart qty input
   (buttons injected by shr-pdp-2026.js).
   ============================================================= */

.s2u-pdp-buybox .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--s2u-divider);
}

.s2u-pdp-buybox form.cart .quantity input.qty {
	width: 50px;
	height: 44px;
	border: 0 !important;
	border-left: 1px solid var(--s2u-divider) !important;
	border-right: 1px solid var(--s2u-divider) !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.s2u-pdp-buybox .quantity input.qty::-webkit-outer-spin-button,
.s2u-pdp-buybox .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.s2u-qty-btn {
	width: 40px;
	height: 44px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--s2u-text);
	font-family: var(--s2u-font-heading);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.s2u-qty-btn:hover {
	background: var(--s2u-accent-100);
}

/* =============================================================
   BRAND TAB (v2 render) — 2-col: blueprint-framed logo + name +
   meta + description (left), bordered stat box (right).
   shr_pdp_render_brand_tab(), functions.php.
   ============================================================= */

.s2u-pdp-brand {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	padding-top: 8px;
}

@media (max-width: 900px) {
	.s2u-pdp-brand {
		grid-template-columns: 1fr;
	}
}

.s2u-pdp-brand__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 18px;
}

.s2u-pdp-brand__logo {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 12px;
	background: #fff;
}

.s2u-pdp-brand__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.s2u-pdp-brand__name {
	font-family: var(--s2u-font-heading);
	font-size: 30px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--s2u-navy);
}

.s2u-pdp-brand__meta {
	margin-top: 6px;
	font-size: 13px;
	color: var(--s2u-text-muted, #5b6570);
}

.s2u-pdp-brand__meta a {
	color: var(--s2u-accent);
	font-weight: 600;
	text-decoration: none;
}

.s2u-pdp-brand__meta a:hover {
	color: var(--s2u-red);
}

.s2u-pdp-brand__desc {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--s2u-text);
}

.s2u-pdp-brand__desc p {
	margin: 0 0 14px;
}

.s2u-pdp-brand__desc p:last-child {
	margin-bottom: 0;
}

.s2u-pdp-brand__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	padding: 20px 24px;
	border: 1px solid var(--s2u-divider);
}

.s2u-pdp-brand__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s2u-pdp-brand__stat-num {
	font-family: var(--s2u-font-heading);
	font-size: 30px;
	line-height: 1;
	color: var(--s2u-navy);
}

.s2u-pdp-brand__stat-label {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--s2u-text-muted, #5b6570);
}

/* =============================================================
   PRODUCT META (v2) — SKU / Category / Tags with middot separators
   (shr_pdp_meta_dispatch(), functions.php).
   ============================================================= */

.s2u-pdp-meta {
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--s2u-divider);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--s2u-text-muted, #5b6570);
}

.s2u-pdp-meta strong {
	color: var(--s2u-text);
}

.s2u-pdp-meta a {
	color: var(--s2u-accent);
	text-decoration: underline;
}

.s2u-pdp-meta a:hover {
	color: var(--s2u-red);
}

.s2u-pdp-meta__sep {
	color: var(--s2u-divider);
}

/* =============================================================
   BUNDLE LIVE TOTAL — filled by shr-pdp-2026.js.
   ============================================================= */

/* Product Bundles renders its own (empty / RM0.00) price line — hide it; our
   .s2u-pdp-total is the single live total with the bundle-offer description. */
.s2u-pdp-buybox .bundle_price {
	display: none !important;
}

.s2u-pdp-total {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--s2u-text-muted, #5b6570);
	font-feature-settings: 'tnum' 1;
}

.s2u-pdp-total strong {
	font-family: var(--s2u-font-heading);
	font-size: 22px;
	color: var(--s2u-navy);
}

/* =============================================================
   MOBILE CTA — stack qty + Add to cart + Request a quote so the
   button labels don't overflow/wrap on narrow screens.
   ============================================================= */

@media (max-width: 600px) {
	.s2u-pdp-cta-row,
	.s2u-pdp-buybox form.cart:not(.bundle_form),
	.s2u-pdp-buybox form.cart.bundle_form .bundle_button {
		flex-wrap: wrap;
	}

	.s2u-pdp-buybox form.cart button.single_add_to_cart_button {
		flex: 1 1 150px;
		padding: 0 16px;
		white-space: nowrap;
	}

	.s2u-pdp-buybox .yith-ywraq-add-to-quote,
	.s2u-pdp-buybox form.cart .bundle_button .yith-ywraq-add-to-quote {
		flex: 1 1 100%;
	}

	.s2u-pdp-buybox .yith-ywraq-add-to-quote a.button {
		width: 100%;
		white-space: nowrap;
	}
}