/* ============================================================
   Native single-product layout (Phase 3b of the Divi removal)
   Only the LAYOUT lives here — the gallery, swatches, price,
   dimensions table, key-features carousel, and FAQ blocks bring
   their own styling (plugins / existing product CSS).

   Text sizes follow the Figma "Product Page" file
   (S4PskloCPCA0jssDHUyjoY): Standard + Builder product page
   frames, desktop and mobile (<=767px). Headings (title,
   Product Description, section titles, FAQ questions) are set
   in wwg-base.css; this file sets the non-heading text.
   ============================================================ */

/* Divi's .container adds 58px top padding; the TB product layout didn't, so trim it
   for products to match staging's vertical start. */
body.single-product #main-content > .container {
	padding-top: 20px;
}

/* Content width — Figma "Product Page" frames set the side margins: V Tablet 1024 = 28px,
   H Tablet 1366 = 55px, desktop 1920 = 156px (1608px of content, the cap). Between
   frames the margin grows linearly, so the content never narrows as the window widens. */
@media (min-width: 1367px) {
	body.single-product #main-content > .container {
		width: calc(100% - 2 * (55px + (100vw - 1366px) * 101 / 554));
		max-width: 1608px;
	}
}
@media (min-width: 981px) and (max-width: 1366px) {
	body.single-product #main-content > .container {
		width: calc(100% - 2 * (28px + (100vw - 1024px) * 27 / 342));
		max-width: none;
	}
}

/* Top — Figma Standard Product Page, laid out on the frame's column grid (24px gutters):
     desktop 1920  12 columns: thumbnails 1 | main image 7 | buy box 4  (112 | 928 | 520)
     H Tablet 1366 10 columns: gallery 6 | buy box 4                    (744 | 487)
     V Tablet 1024  8 columns: gallery 5 | buy box 3                    (596 | 348)
   The left column (.wwg-product-media) holds the gallery with Product Overview |
   Option Details beneath it; the buy box is the right column. Widths are in grid
   columns, so the split stays proportional at every width in between. */
.wwg-product-top {
	--wwg-grid-cols: 12;
	--wwg-grid-summary-cols: 4;
	--wwg-grid-media-cols: 8;
	--wwg-grid-gutter: 24px;
	display: flex;
	gap: var(--wwg-grid-gutter);
	align-items: flex-start;
}
@media (min-width: 1025px) and (max-width: 1366px) {
	.wwg-product-top {
		--wwg-grid-cols: 10;
		--wwg-grid-summary-cols: 4;
		--wwg-grid-media-cols: 6;
	}
}
@media (max-width: 1024px) {
	.wwg-product-top {
		--wwg-grid-cols: 8;
		--wwg-grid-summary-cols: 3;
		--wwg-grid-media-cols: 5;
	}
}
.wwg-product-top .wwg-product-media {
	flex: 1 1 auto;
	min-width: 0;
}
/* Buy box = N grid columns + the gutters between them. 100% here is the row width. */
.wwg-product-top .summary {
	--wwg-grid-col: calc((100% - (var(--wwg-grid-cols) - 1) * var(--wwg-grid-gutter)) / var(--wwg-grid-cols));
	flex: 0 0 calc(var(--wwg-grid-col) * var(--wwg-grid-summary-cols) + (var(--wwg-grid-summary-cols) - 1) * var(--wwg-grid-gutter));
	width: calc(var(--wwg-grid-col) * var(--wwg-grid-summary-cols) + (var(--wwg-grid-summary-cols) - 1) * var(--wwg-grid-gutter)) !important; /* WooCommerce sets .summary { width: 48%; float: right } */
	max-width: none;
	min-width: 0;
	margin: 0;
	float: none !important;
}

/* Product title — size is the Figma product title role (H4) in wwg-base.css. */

/* Option group labels ("Wood Selection", "Surface Color") — Figma "Section Title":
   Inegale Demi 23.56/24. */
body .wwg-product-top table.variations th.label,
body .wwg-product-top table.variations th.label label {
	font-family: var(--wwg-font-display);
	font-weight: 600 !important; /* WooCommerce's variations label rule sets 700 */
	font-size: var(--wwg-type-option-group-size);
	line-height: var(--wwg-type-option-group-line);
}
body .wwg-product-top table.variations th.label,
body .wwg-product-top table.variations th.label label {
	color: var(--wwg-color-text-strong); /* var(--wwg-ivory) / Signature var(--wwg-bone-xlight) */
}

/* Variation group headers — Figma "Product Page" file, "Section Header" (Standard
   product page frames): a static, non-collapsible header over each swatch group.
   40px tall, 8px 16px padding, page-background fill, 2px var(--wwg-pewter) bottom line, 4px radius;
   Inegale Demi 23.56/24 in var(--wwg-ivory). Swatches start 16px below; groups sit 40px
   apart. The chosen value is not shown in the header. (Builder pages use the
   collapsible accordion in wwg-variation-accordion.css instead.) */
body .wwg-product-top table.variations,
body .wwg-product-top table.variations tbody,
body .wwg-product-top table.variations tr,
body .wwg-product-top table.variations th.label,
body .wwg-product-top table.variations td.value {
	display: block;
	width: 100%;
}
body .wwg-product-top table.variations {
	margin: 0 0 56px !important; /* to Line 31 above the add-to-cart section */
	border: 0;
}
/* Variations sit the same distance apart as the product name is from the first one —
   that gap is the title's own 18px bottom margin (10px on mobile, see below). */
body .wwg-product-top table.variations tr + tr {
	margin-top: 18px;
}
body .wwg-product-top table.variations th.label {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--wwg-radius-lg);
	background-color: var(--wwg-color-bg-primary); /* page ground, not Figma's frame fill */
	box-shadow: inset 0 -2px 0 var(--wwg-color-accent-neutral);
	text-align: left;
}
body .wwg-product-top table.variations th.label label {
	margin: 0;
}
body .wwg-product-top table.variations th.label .woo-selected-variation-item-name {
	display: none;
}
/* The chosen value beside the group name, as the builder shows Table Wood and Dining
   Topper: the label's own type, marked out in CTA-Text. */
body .wwg-product-top table.variations th.label .wwg_swatch_pseudolabel_dynamic {
	color: var(--wwg-color-text-cta);
}
body .wwg-product-top table.variations td.value {
	margin: 0;
	padding: 16px 0 0 !important;
}
@media (max-width: 767px) {
	body .wwg-product-top table.variations th.label {
		padding: 4px 8px;
	}
}
/* Add-to-cart button — Figma CTA (teal fill, ink label) at the xl label size.
   !important: legacy WooCommerce/theme button rules are more specific than the
   global mapping in wwg-buttons.css. */
.wwg-product-top .summary .single_add_to_cart_button,
.wwg-product-top .summary .single_add_to_cart_button.alt {
	background-color: var(--wwg-btn-cta-fill) !important;
	border-color: var(--wwg-btn-cta-fill) !important;
	color: var(--wwg-btn-cta-on-fill) !important;
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight) !important;
	font-size: var(--wwg-btn-xl-size) !important;
	line-height: var(--wwg-btn-xl-line) !important;
	letter-spacing: var(--wwg-btn-tracking);
	/* Same Figma padding enabled or disabled (WooCommerce gives the disabled button its
	   own .618em 1em): 8px / 56px including the outline — 64px sides on Signature pages. */
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width)) !important;
}
.wwg-product-top .summary .single_add_to_cart_button:hover,
.wwg-product-top .summary .single_add_to_cart_button.alt:hover {
	background-color: var(--wwg-btn-cta-fill-hover) !important;
	border-color: var(--wwg-btn-cta-fill-hover) !important;
	color: var(--wwg-btn-cta-on-fill) !important;
}
/* The sticky bar carries a copy of that button, which lives outside .summary and so is out
   of the rule above's reach. It now copies the page button's state as well as its label, so
   it needs what that rule gives: the fill, and the padding. A disabled copy was otherwise
   taking WooCommerce's own purple, and its .618em/1em padding, which made the button change
   size as it greyed out. Same fill and same box in both states, faded by the disabled rule
   in wwg-buttons.css exactly as the page button is. */
body.single-product #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button,
body.single-product #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button.alt,
body.single-product #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button.disabled,
body.single-product #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button.alt.disabled {
	background-color: var(--wwg-btn-cta-fill) !important;
	border-color: var(--wwg-btn-cta-fill) !important;
	color: var(--wwg-btn-cta-on-fill) !important;
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width)) !important;
}
body.single-product #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button:hover:not(.disabled):not([disabled]) {
	background-color: var(--wwg-btn-cta-fill-hover) !important;
	border-color: var(--wwg-btn-cta-fill-hover) !important;
	color: var(--wwg-btn-cta-on-fill) !important;
}

/* Price — Figma: Source Sans SemiBold 24/36 in ink; sale price teal-700; the
   original ("reg.") price Source Sans Regular 20/32 in ink-500. !important beats
   style.css's `.single_variation .price { 26px !important }`. */
body .wwg-product-top .summary .price {
	font-family: var(--wwg-font-body);
	font-weight: 600;
	font-size: var(--wwg-text-xl-size) !important;
	line-height: var(--wwg-text-xl-line) !important;
}
body .wwg-product-top .summary .price del {
	font-weight: 400;
	font-size: var(--wwg-text-lg-size);
	line-height: var(--wwg-text-lg-line);
	opacity: 1;
}
.wwg-product-top .summary .price ins { text-decoration: none; font-weight: 600; background: transparent; }
body .wwg-product-top .summary .price,
body .wwg-product-top .summary .price .amount,
body .wwg-product-top .summary .price bdi {
	color: var(--wwg-color-text-primary) !important;
}
body .wwg-product-top .summary .price del,
body .wwg-product-top .summary .price del .amount,
body .wwg-product-top .summary .price del bdi {
	color: var(--wwg-ink-500) !important; /* both themes (Figma Classic + Signature frames) */
}
body .wwg-product-top .summary .price ins,
body .wwg-product-top .summary .price ins .amount,
body .wwg-product-top .summary .price ins bdi {
	color: var(--wwg-color-text-cta) !important; /* sale: Verdigris Extra Dark / Signature Bone Dark */
}

/* Stock line — a SINGLE source, directly below the price. WooCommerce's simple.php
   add-to-cart template also prints a stock line above the form; hide that duplicate
   and keep the one wwg_native_product_stock renders below the price. */
.wwg-product-top .summary > p.stock {
	display: none;
}
/* Tighten the price → stock gap (WooCommerce leaves a large bottom margin on the
   price). */
.wwg-product-top .summary .price {
	margin-bottom: 2px;
}
.wwg-product-top .summary .wwg-product-stock {
	margin-top: 2px;
}
/* Stock / shipping text — Figma "Shipping Text": Source Sans 14/22 in ink. Out of
   stock and backorder keep their red warning colour from style.css. */
body .wwg-product-top .summary p.stock {
	margin: 0;
	font-size: var(--wwg-text-sm-size) !important; /* a WooCommerce stock rule sets .92em */
	line-height: var(--wwg-text-sm-line);
	font-weight: 400;
}
body .wwg-product-top .summary p.stock.in-stock {
	color: var(--wwg-color-text-primary) !important;
}

/* Trim WC/Divi's 24px form top-margin so the title→swatches gap matches staging
   (the TB layout didn't have it). */
.wwg-product-top .summary form.cart {
	margin-top: 0 !important;
}

/* Add-to-cart layout — quantity on its own line, full-width button (matches the TB
   et_pb_wc module). Otherwise WC lays qty + button + the after-button hook content
   (ship estimate, "Ready to Ship" / "Custom Shop" links) inline on one row. */
/* Quantity counter — Figma "Product Page", Frame 146 "Counter Container":
   [ − ] [ 1 ] [ + ], each 40×40, 8px apart, 24px above Add to Cart. Buttons use
   the page background with 4px corners and the Figma icons (check_indeterminate_small / add) in
   ink-500; the decrement fades to 40% at the minimum quantity (.is-at-min, set by
   wwg-mainscripts.js). The value box has a 2px ink-300 border, Source Sans 16/26.
   The sticky bar's copy of the counter (#wwg_Sticky_Qty_Wrap) shares these rules; Figma's
   sticky bar has none, so it reuses this one as is (user, 2026-09-24). */
body .wwg-product-top .summary form.cart .quantity {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none !important;
	clear: both;
	min-width: 0;
	margin: 0 0 24px !important;
	padding: 0 !important;
}
body .wwg-product-top .quantity .wwg_minus_button,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button,
body .wwg-product-top .quantity .wwg_plus_button,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_plus_button {
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-primary); /* page ground, not Figma's frame fill */
	font-size: 0;
	transition: opacity .2s;
}
body .wwg-product-top .quantity .wwg_minus_button .dashicons,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button .dashicons,
body .wwg-product-top .quantity .wwg_plus_button .dashicons,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_plus_button .dashicons {
	display: none;
}
body .wwg-product-top .quantity .wwg_minus_button::before,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button::before,
body .wwg-product-top .quantity .wwg_plus_button::before,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_plus_button::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: var(--wwg-color-icon-2);
	-webkit-mask: var(--wwg-qty-icon) center / contain no-repeat;
	mask: var(--wwg-qty-icon) center / contain no-repeat;
}
body .wwg-product-top .quantity .wwg_minus_button::before,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button::before {
	width: 12px;
	height: 2px;
	--wwg-qty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 2'%3E%3Cpath d='M0 2V0H12V2H0Z'/%3E%3C/svg%3E");
}
body .wwg-product-top .quantity .wwg_plus_button::before,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_plus_button::before {
	width: 14px;
	height: 14px;
	--wwg-qty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6 8H0V6H6V0H8V6H14V8H8V14H6V8Z'/%3E%3C/svg%3E");
}
body .wwg-product-top .quantity .wwg_minus_button.is-at-min,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button.is-at-min {
	opacity: .4;
}
body .wwg-product-top .quantity .wwg_minus_button:focus-visible,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_minus_button:focus-visible,
body .wwg-product-top .quantity .wwg_plus_button:focus-visible,
body #wwg_Sticky_Qty_Wrap .quantity .wwg_plus_button:focus-visible,
body .wwg-product-top .quantity input.qty:focus-visible,
body #wwg_Sticky_Qty_Wrap .quantity input.qty:focus-visible {
	outline: 2px solid var(--wwg-teal-700);
	outline-offset: 2px;
}
body .wwg-product-top .quantity input.qty,
body #wwg_Sticky_Qty_Wrap .quantity input.qty {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--wwg-color-accent-neutral) !important;
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-primary) !important; /* page ground, not Figma's frame fill */
	color: var(--wwg-color-text-primary) !important;
	font-family: var(--wwg-font-body);
	font-weight: 400;
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	text-align: center;
}
.wwg-product-top .summary .single_add_to_cart_button {
	display: block;
	width: 100%;
	float: none !important;
	clear: both;
}

/* Variation price + stock: the theme hides WC's .single_variation site-wide (the TB
   layout showed the variation price via a Divi module instead). With no Divi module
   in the native template, show it so the selected variation's price, sale price, and
   stock ("Only N left in stock") appear on selection. */
.wwg-product-top .single_variation {
	display: contents !important; /* its price and stock are placed separately on the add-to-cart grid */
}

/* Quantity row — Figma "Product Page" Frame 145: the counter on the left, price +
   stock right-aligned on the same row (bottom-aligned), Add to Cart 24px below and
   anything else the hooks print (Custom Shop line, ship estimate) under that.
   Variable products: WooCommerce keeps the selected variation's price + stock in
   .single_variation (a sibling of the qty/button wrapper) and updates it with JS, so
   the wrapper is flattened with display: contents and the pieces are placed on a
   grid without moving any markup. The grid uses order, not fixed rows, so anything
   a plugin prints before the counter (e.g. deposit options) stays above it. Simple
   products get the same grid from the
   .wwg-price-stock block wwg_native_product_price_stock_inline() prints beside the
   counter. */
body .wwg-product-top .summary .single_variation_wrap,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 0; /* spacing is set per item below */
	align-items: end;
}
body .wwg-product-top .summary .single_variation_wrap > .woocommerce-variation-add-to-cart {
	display: contents;
}
/* Figma Frame 151 "Line 31": a 2px ink-700 rule across the buy box, 56px under the last
   swatch group (the variations table margin) and 8px above the counter / price row.
   It is the grid's ::before, ordered after anything a plugin prints before the counter
   (e.g. deposit options) and before the counter itself. This also replaces
   WooCommerce's clearfix ::before/::after on form.cart, which would otherwise become
   empty grid rows. Colour is a theme role, so dark pages need no override. */
body .wwg-product-top .summary .single_variation_wrap::before,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock)::before {
	content: '';
	display: block;
	grid-column: 1 / -1;
	order: 1;
	height: 0;
	margin: 0 0 8px;
	border-top: 2px solid var(--wwg-color-accent-strong);
}
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock)::after {
	display: none;
}
/* Anything printed before the counter (deposit options) sits 24px above the line. */
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button):not(.single_add_to_cart_button ~ *) {
	margin-bottom: 24px;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > *,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > * {
	grid-column: 1 / -1;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > .quantity,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .quantity {
	grid-column: 1;
	order: 2;
	margin: 0 !important;
}
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .wwg-price-stock {
	display: contents; /* its price and stock are placed separately, like .single_variation */
}
body .wwg-product-top .summary .single_variation_wrap > .single_variation > .woocommerce-variation-price,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .wwg-price-stock > .price {
	grid-column: 2;
	order: 3;
	justify-self: end;
	margin: 0;
	text-align: right;
}
/* Stock — Figma "Shipping Info" (the delivery_truck_speed icon, as in the Style Guide's
   Checkout Process Icons): its own row 32px beneath Add to Cart, a 24px truck icon in
   ink-700 16px before the text (Source Sans 14/22). Out of stock / backorder keep
   their warning colour. */
body .wwg-product-top .summary .single_variation_wrap > .single_variation > .woocommerce-variation-availability,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .wwg-price-stock > .wwg-product-stock {
	grid-column: 1 / -1;
	order: 5;
	margin: 32px 0 0 !important;
	text-align: left;
}
body .wwg-product-top .summary .single_variation_wrap > .single_variation > .woocommerce-variation-availability:not(:has(.stock)) {
	display: none;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-availability p.stock,
body .wwg-product-top .summary .wwg-price-stock .wwg-product-stock p.stock {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-availability p.stock::before,
body .wwg-product-top .summary .wwg-price-stock .wwg-product-stock p.stock::before {
	content: '';
	flex: 0 0 24px;
	height: 24px;
	background-color: var(--wwg-color-accent-strong);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 16'%3E%3Cpath d='M6.5 16C5.66667 16 4.95833 15.7083 4.375 15.125C3.79167 14.5417 3.5 13.8333 3.5 13H1L1.45 11H4.275C4.55833 10.6833 4.89167 10.4375 5.275 10.2625C5.65833 10.0875 6.06667 10 6.5 10C6.93333 10 7.34167 10.0875 7.725 10.2625C8.10833 10.4375 8.44167 10.6833 8.725 11H12.9L15 2H4.05L4.15 1.575C4.25 1.10833 4.47917 0.729167 4.8375 0.4375C5.19583 0.145833 5.61667 0 6.1 0H17.5L16.575 4H19.5L22.5 8L21.5 13H19.5C19.5 13.8333 19.2083 14.5417 18.625 15.125C18.0417 15.7083 17.3333 16 16.5 16C15.6667 16 14.9583 15.7083 14.375 15.125C13.7917 14.5417 13.5 13.8333 13.5 13H9.5C9.5 13.8333 9.20833 14.5417 8.625 15.125C8.04167 15.7083 7.33333 16 6.5 16ZM15.425 9H20.25L20.35 8.475L18.5 6H16.125L15.425 9ZM14.95 2.175L15 2L12.9 11L12.95 10.825L13.8 7.175L14.95 2.175ZM0 9.325L0.5 7.325H6L5.5 9.325H0ZM2 5.675L2.5 3.675H9L8.5 5.675H2ZM6.5 14C6.78333 14 7.02083 13.9042 7.2125 13.7125C7.40417 13.5208 7.5 13.2833 7.5 13C7.5 12.7167 7.40417 12.4792 7.2125 12.2875C7.02083 12.0958 6.78333 12 6.5 12C6.21667 12 5.97917 12.0958 5.7875 12.2875C5.59583 12.4792 5.5 12.7167 5.5 13C5.5 13.2833 5.59583 13.5208 5.7875 13.7125C5.97917 13.9042 6.21667 14 6.5 14ZM16.5 14C16.7833 14 17.0208 13.9042 17.2125 13.7125C17.4042 13.5208 17.5 13.2833 17.5 13C17.5 12.7167 17.4042 12.4792 17.2125 12.2875C17.0208 12.0958 16.7833 12 16.5 12C16.2167 12 15.9792 12.0958 15.7875 12.2875C15.5958 12.4792 15.5 12.7167 15.5 13C15.5 13.2833 15.5958 13.5208 15.7875 13.7125C15.9792 13.9042 16.2167 14 16.5 14Z'/%3E%3C/svg%3E") center / 23px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 16'%3E%3Cpath d='M6.5 16C5.66667 16 4.95833 15.7083 4.375 15.125C3.79167 14.5417 3.5 13.8333 3.5 13H1L1.45 11H4.275C4.55833 10.6833 4.89167 10.4375 5.275 10.2625C5.65833 10.0875 6.06667 10 6.5 10C6.93333 10 7.34167 10.0875 7.725 10.2625C8.10833 10.4375 8.44167 10.6833 8.725 11H12.9L15 2H4.05L4.15 1.575C4.25 1.10833 4.47917 0.729167 4.8375 0.4375C5.19583 0.145833 5.61667 0 6.1 0H17.5L16.575 4H19.5L22.5 8L21.5 13H19.5C19.5 13.8333 19.2083 14.5417 18.625 15.125C18.0417 15.7083 17.3333 16 16.5 16C15.6667 16 14.9583 15.7083 14.375 15.125C13.7917 14.5417 13.5 13.8333 13.5 13H9.5C9.5 13.8333 9.20833 14.5417 8.625 15.125C8.04167 15.7083 7.33333 16 6.5 16ZM15.425 9H20.25L20.35 8.475L18.5 6H16.125L15.425 9ZM14.95 2.175L15 2L12.9 11L12.95 10.825L13.8 7.175L14.95 2.175ZM0 9.325L0.5 7.325H6L5.5 9.325H0ZM2 5.675L2.5 3.675H9L8.5 5.675H2ZM6.5 14C6.78333 14 7.02083 13.9042 7.2125 13.7125C7.40417 13.5208 7.5 13.2833 7.5 13C7.5 12.7167 7.40417 12.4792 7.2125 12.2875C7.02083 12.0958 6.78333 12 6.5 12C6.21667 12 5.97917 12.0958 5.7875 12.2875C5.59583 12.4792 5.5 12.7167 5.5 13C5.5 13.2833 5.59583 13.5208 5.7875 13.7125C5.97917 13.9042 6.21667 14 6.5 14ZM16.5 14C16.7833 14 17.0208 13.9042 17.2125 13.7125C17.4042 13.5208 17.5 13.2833 17.5 13C17.5 12.7167 17.4042 12.4792 17.2125 12.2875C17.0208 12.0958 16.7833 12 16.5 12C16.2167 12 15.9792 12.0958 15.7875 12.2875C15.5958 12.4792 15.5 12.7167 15.5 13C15.5 13.2833 15.5958 13.5208 15.7875 13.7125C15.9792 13.9042 16.2167 14 16.5 14Z'/%3E%3C/svg%3E") center / 23px 16px no-repeat;
}
/* The hook line after the button (Custom Shop, ship estimate) then sits 16px under the
   stock row instead of 32px under the button. */
body .wwg-product-top .summary .single_variation_wrap:has(.woocommerce-variation-availability .stock) .woocommerce-variation-add-to-cart > .single_add_to_cart_button + *,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock .wwg-product-stock .stock) > .single_add_to_cart_button + * {
	margin-top: 16px !important;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > .single_add_to_cart_button,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .single_add_to_cart_button {
	order: 4;
	margin-top: 24px; /* Figma Frame 146: Add to Cart 24px under the counter row */
}
/* Whatever the hooks print after the button (Custom Shop line, ship estimate) stays below it. */
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > .single_add_to_cart_button ~ *,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .single_add_to_cart_button ~ * {
	order: 5;
}/* ...and sits 32px under the button (Figma Frame 147: shipping info 32px below Add to
   Cart). The hook output carries its own 16px top margins (on the wrapper and its first
   block), which would push it further. */
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > .single_add_to_cart_button + *,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .single_add_to_cart_button + * {
	margin-top: 32px !important;
}
body .wwg-product-top .summary .single_variation_wrap .woocommerce-variation-add-to-cart > .single_add_to_cart_button + * > :first-child,
body .wwg-product-top .summary form.cart:has(> .wwg-price-stock) > .single_add_to_cart_button + * > :first-child {
	margin-top: 0 !important;
}
body .wwg-product-top .summary .wwg-price-stock .price,
body .wwg-product-top .summary .single_variation .price {
	margin: 0;
}
/* No reserved height needed for the price: with stock moved beneath Add to Cart, the
   counter row is the 40px counter whether or not a price is showing. */
body .wwg-product-top .summary .wwg-price-stock .wwg-product-stock,
body .wwg-product-top .summary .single_variation .woocommerce-variation-availability p.stock {
	margin: 0;
}

/* Gallery — Figma Standard Product Page. The variation gallery fills its column
   regardless of the plugin's --wvg-gallery-width setting. Main image 928:704 (cropped
   to fill), 4px corners. Thumbnails (tablet and up): one grid column wide, a gutter
   left of the main image; items keep Figma's 112×104 proportion with a 2px border, 2px
   inset and 4px corners — teal-300 on the selected image, ink-300 otherwise — 16px
   apart (the plugin's item gap). */
.wwg-product-gallery .woo-variation-product-gallery {
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
}
.wwg-product-gallery .woo-variation-gallery-wrapper {
	min-width: 0 !important; /* the plugin's preloader sets inline min sizes */
	min-height: 0 !important;
}
.wwg-product-gallery .woo-variation-gallery-slider-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}
.wwg-product-gallery .wvg-single-gallery-image-container {
	border-radius: var(--wwg-radius-lg);
	overflow: hidden;
}
/* The neighbouring slides sit flush against the main image, and at fractional positions
   Chrome paints a sliver (a few px) of them past the slider's overflow clip — a thin strip
   of another photo along the image edge. Off-screen slides stay invisible while the slider
   is at rest; they show while dragging (slick's .dragging) or animating
   (.wwg-gallery-moving, toggled by wwg-product-page-scripts.js). */
.wwg-product-gallery .woo-variation-gallery-slider:not(.wwg-gallery-moving) > .slick-list:not(.dragging) .slick-slide:not(.slick-current) {
	visibility: hidden;
}
.wwg-product-gallery .wvg-single-gallery-image-container img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 928 / 704;
	object-fit: cover;
}
@media (min-width: 768px) {
	/* The thumbnail column is as tall as the main image (not the slider's 6-item height),
	   so it never pushes Product Overview down; extra thumbnails clip and scroll into
	   view as they are selected. */
	.wwg-product-gallery .woo-variation-gallery-thumbnail-wrapper {
		position: relative;
		align-self: stretch;
		/* One grid column of the gallery (100% here is the gallery width). */
		flex: 0 0 calc((100% - (var(--wwg-grid-media-cols) - 1) * var(--wwg-grid-gutter)) / var(--wwg-grid-media-cols));
		width: calc((100% - (var(--wwg-grid-media-cols) - 1) * var(--wwg-grid-gutter)) / var(--wwg-grid-media-cols)) !important;
		margin-right: var(--wwg-grid-gutter);
		overflow: hidden;
	}
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0 !important;
	}
	/* With few enough thumbnails the plugin never starts its slider and instead gives each
	   item a fixed height — the column height split into its configured 6 rows (~58px) — which
	   is shorter than the 112x104 tiles below, so the images overflowed and overlapped each
	   other. Let them size themselves and space them by the plugin's own item gap. */
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider:not(.slick-initialized) > div {
		height: auto !important;
		margin-bottom: var(--wvg-thumbnail-item-gap, 16px);
	}
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider:not(.slick-initialized) > div:last-child {
		margin-bottom: 0;
	}
	.wwg-product-gallery .wvg-gallery-thumbnail-image > div {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		aspect-ratio: 112 / 104;
		padding: 2px;
		border: 2px solid var(--wwg-ink-300);
		border-radius: var(--wwg-radius-lg);
		transition: border-color .2s;
	}
	.wwg-product-gallery .slick-current .wvg-gallery-thumbnail-image > div {
		border-color: var(--wwg-teal-300);
	}
	/* Thumbnail strip up / down bars (the gallery plugin's): Ivory at 50% with Bone Extra Light
	   chevrons instead of the plugin's black at 50% / white — the Design System has no pure black
	   or white. Same bars as the table builder's strip (modular-table-configurator-style.css). */
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider :is(.wvg-thumbnail-prev-arrow, .wvg-thumbnail-next-arrow) {
		background: color-mix(in srgb, var(--wwg-ivory) 50%, transparent);
	}
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider :is(.wvg-thumbnail-prev-arrow, .wvg-thumbnail-next-arrow)::before {
		color: var(--wwg-bone-xlight);
	}
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider .wvg-thumbnail-prev-arrow {
		border-radius: var(--wwg-radius-lg) var(--wwg-radius-lg) 0 0;
	}
	.wwg-product-gallery .woo-variation-gallery-thumbnail-slider .wvg-thumbnail-next-arrow {
		border-radius: 0 0 var(--wwg-radius-lg) var(--wwg-radius-lg);
	}
	.wwg-product-gallery .wvg-gallery-thumbnail-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--wwg-radius-lg);
	}
}
/* ---- Variation swatches — Figma "Standard Product Page" (Product Page file, Classic):
   a round photo in a 2px Accent/Neutral-Accent ring that turns Accent/Swatch-Focus when
   chosen, with the term's name under it (SemiBold when chosen). Rings are midway between
   Figma's 104px and the table builder's 56px (user, 2026-09-24): 80px at 1367+, 76px on
   H tablet, 70px at 1024 and below; labels 14/22, 12/20 on the small sizes;
   24px apart (16px small), rows 32px apart. The name comes from the plugin's own
   data-title, so no markup change is needed; its hover tooltip is suppressed since the
   name is always visible now. ---- */
.wwg-product-top .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end; /* a swatch with a sale badge is taller; rings still line up */
	column-gap: 24px;
	row-gap: 32px;
	margin: 0;
	padding: 0;
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	--wwg-swatch-ring: 80px;
	/* Every cell reserves the 21px sale-badge strip above the ring, whether or not it has a
	   badge, so rows and the gap under the attribute heading never shift (user, 2026-09-24). */
	--wwg-swatch-badge-space: 21px;
	--wwg-swatch-pad: 4px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Fixed to the ring: sized by content, a long name turning SemiBold on selection widened
	   the cell and nudged its neighbours (user, 2026-09-24). */
	width: calc(var(--wwg-swatch-ring) + var(--wwg-swatch-pad) * 2);
	height: auto;
	margin: 0;
	/* bottom: 4px gap + a 22px label line + Figma's 8px, reserved so the name — which is
	   positioned out of flow below — never changes the cell size. */
	padding: var(--wwg-swatch-badge-space) var(--wwg-swatch-pad) 34px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
/* Hover is the ring colour here. Without this the plugin paints the whole cell — swatch, the
   name below it and all — in --wvs-hover-item-background-color, which with its rounded style's
   border-radius: 100% reads as a white oval behind the swatch (user, 2026-09-25). */
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item):hover,
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
	background: none !important;
	box-shadow: none !important;
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents {
	box-sizing: border-box;
	width: var(--wwg-swatch-ring);
	height: var(--wwg-swatch-ring);
	padding: 2px;
	overflow: hidden;
	background: none;
	border: 2px solid var(--wwg-color-accent-neutral);
	border-radius: 128px;
	outline: none;
	transition: border-color .2s;
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 128px;
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item):hover .variable-item-contents {
	border-color: var(--wwg-color-accent-strong);
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item).selected .variable-item-contents {
	border-color: var(--wwg-color-swatch-focus);
}
/* The name under the swatch (the plugin's data-title). */
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item)::after {
	content: attr(data-title);
	/* Out of flow (like the builder's swatch names): a long name turning SemiBold on selection
	   must not resize the cell or wrap to a second line. The plugin styles this same
	   pseudo-element as its tooltip arrow, hence the resets. */
	position: absolute;
	top: auto;
	left: 50%;
	bottom: 8px;
	/* !important: the plugin's tooltip rule resets transform, which left the name hanging
	   off the centre line instead of centred under the swatch. */
	transform: translateX(-50%) !important;
	pointer-events: none;
	visibility: visible;
	display: block;
	width: auto;
	height: auto;
	white-space: nowrap;
	margin-top: 0;
	border: 0;
	opacity: 1;
	transform: none;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	font-weight: 400;
	color: var(--wwg-color-text-primary);
	text-align: center;
}
.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item).selected::after {
	font-weight: var(--wwg-btn-weight);
}
/* The hover tooltip duplicated the name that now sits under every swatch. */
.wwg-product-top .variable-items-wrapper .variable-item[data-wvstooltip]::before {
	display: none;
}
/* The chosen swatch keeps the white tick the live site shows over the photo (user, 2026-09-25)
   — Woo Variation Swatches draws it on .variable-item-contents::before from its --wvs-tick
   variable, which also carries the out-of-stock cross. Figma shows the ring alone; both are
   kept, so the ring says which is chosen and the tick reads at a glance over the wood. */

/* ---- Sale badge — Figma "Selector Variants > Swatch" (421:10467): a 40px Focus-Accent tab
   above the swatch, as wide as the ring plus 8, its lower edge cut in an arc that clears the
   ring by 4px, with "50% Off" in Source Sans SemiBold 14/22 (Ivory). The arc is a radial
   mask centred on the ring. Shown on any swatch carrying .wwg-swatch-sale, which nothing sets
   yet — a real implementation would add it (and the discount text) from PHP, per product. ---- */
.wwg-product-top .variable-items-wrapper .variable-item.wwg-swatch-sale::before {
	content: '50% Off';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	box-sizing: border-box;
	display: block;
	visibility: visible;
	/* !important and the resets below: the plugin styles this same pseudo-element as its
	   hover tooltip (min-width, opacity 0, transitions). */
	width: calc(var(--wwg-swatch-ring) + 8px) !important;
	min-width: 0;
	max-width: none;
	height: 40px;
	padding: 0 9px;
	opacity: 1;
	transition: none;
	background: var(--wwg-color-accent-focus);
	border-radius: var(--wwg-radius-lg) var(--wwg-radius-lg) 0 0;
	box-shadow: none;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	font-weight: var(--wwg-btn-weight);
	color: var(--wwg-color-text-strong);
	text-align: center;
	white-space: nowrap;
	/* The arc: a hole the size of the ring + 4px all round, centred on the ring. */
	-webkit-mask: radial-gradient(circle at 50% calc(var(--wwg-swatch-badge-space) + var(--wwg-swatch-ring) / 2), transparent calc(var(--wwg-swatch-ring) / 2 + 4px), #000 calc(var(--wwg-swatch-ring) / 2 + 4.5px));
	        mask: radial-gradient(circle at 50% calc(var(--wwg-swatch-badge-space) + var(--wwg-swatch-ring) / 2), transparent calc(var(--wwg-swatch-ring) / 2 + 4px), #000 calc(var(--wwg-swatch-ring) / 2 + 4.5px));
}

@media (min-width: 1025px) and (max-width: 1366px) {
	.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) {
		--wwg-swatch-ring: 76px;
	}

}
@media (max-width: 1024px) {
	.wwg-product-top .variable-items-wrapper {
		column-gap: 16px;
	}
	.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) {
		--wwg-swatch-pad: 0px;
		padding-bottom: 32px; /* the smaller label line (20px) */
	}
	.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item) {
		--wwg-swatch-ring: 70px;
	}
	.wwg-product-top .variable-items-wrapper .variable-item:not(.radio-variable-item)::after {
		font-size: var(--wwg-text-sm-size-mobile);
		line-height: var(--wwg-text-sm-line-mobile);
	}
}

/* Zoom control — Figma "Interactive Icons (Quick View)" (Category Page 7:61): a 32px
   Icon-Visibility-1 disc with 4px padding, the eye glyph in Icon-Visibility-2, 8px in from the
   image's top-right corner. Replaces the plugin's 36px white circle + magnifying glass. */
body .woo-variation-gallery-wrapper .woo-variation-gallery-trigger {
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 4px;
	box-sizing: border-box;
	background: var(--wwg-color-icon-visibility-1);
	color: var(--wwg-color-icon-visibility-2);
	border-radius: var(--wwg-radius-pill);
	font-size: 0;
	transition: background-color 0.2s, color 0.2s;
}
body .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover {
	background: var(--wwg-color-icon-visibility-2);
	color: var(--wwg-color-icon-visibility-1);
}
/* The eye glyph: Figma's 22x15 path centred in the 24px icon frame, painted in the link's
   own colour so the hover swap carries it. */
.wwg-zoom-icon {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M11 12C12.25 12 13.3125 11.5625 14.1875 10.6875C15.0625 9.8125 15.5 8.75 15.5 7.5C15.5 6.25 15.0625 5.1875 14.1875 4.3125C13.3125 3.4375 12.25 3 11 3C9.75 3 8.6875 3.4375 7.8125 4.3125C6.9375 5.1875 6.5 6.25 6.5 7.5C6.5 8.75 6.9375 9.8125 7.8125 10.6875C8.6875 11.5625 9.75 12 11 12ZM11 10.2C10.25 10.2 9.6125 9.9375 9.0875 9.4125C8.5625 8.8875 8.3 8.25 8.3 7.5C8.3 6.75 8.5625 6.1125 9.0875 5.5875C9.6125 5.0625 10.25 4.8 11 4.8C11.75 4.8 12.3875 5.0625 12.9125 5.5875C13.4375 6.1125 13.7 6.75 13.7 7.5C13.7 8.25 13.4375 8.8875 12.9125 9.4125C12.3875 9.9375 11.75 10.2 11 10.2ZM11 15C8.56667 15 6.35 14.3208 4.35 12.9625C2.35 11.6042 0.9 9.78333 0 7.5C0.9 5.21667 2.35 3.39583 4.35 2.0375C6.35 0.679167 8.56667 0 11 0C13.4333 0 15.65 0.679167 17.65 2.0375C19.65 3.39583 21.1 5.21667 22 7.5C21.1 9.78333 19.65 11.6042 17.65 12.9625C15.65 14.3208 13.4333 15 11 15ZM11 13C12.8833 13 14.6125 12.5042 16.1875 11.5125C17.7625 10.5208 18.9667 9.18333 19.8 7.5C18.9667 5.81667 17.7625 4.47917 16.1875 3.4875C14.6125 2.49583 12.8833 2 11 2C9.11667 2 7.3875 2.49583 5.8125 3.4875C4.2375 4.47917 3.03333 5.81667 2.2 7.5C3.03333 9.18333 4.2375 10.5208 5.8125 11.5125C7.3875 12.5042 9.11667 13 11 13Z'/%3E%3C/svg%3E") center / 22px 15px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M11 12C12.25 12 13.3125 11.5625 14.1875 10.6875C15.0625 9.8125 15.5 8.75 15.5 7.5C15.5 6.25 15.0625 5.1875 14.1875 4.3125C13.3125 3.4375 12.25 3 11 3C9.75 3 8.6875 3.4375 7.8125 4.3125C6.9375 5.1875 6.5 6.25 6.5 7.5C6.5 8.75 6.9375 9.8125 7.8125 10.6875C8.6875 11.5625 9.75 12 11 12ZM11 10.2C10.25 10.2 9.6125 9.9375 9.0875 9.4125C8.5625 8.8875 8.3 8.25 8.3 7.5C8.3 6.75 8.5625 6.1125 9.0875 5.5875C9.6125 5.0625 10.25 4.8 11 4.8C11.75 4.8 12.3875 5.0625 12.9125 5.5875C13.4375 6.1125 13.7 6.75 13.7 7.5C13.7 8.25 13.4375 8.8875 12.9125 9.4125C12.3875 9.9375 11.75 10.2 11 10.2ZM11 15C8.56667 15 6.35 14.3208 4.35 12.9625C2.35 11.6042 0.9 9.78333 0 7.5C0.9 5.21667 2.35 3.39583 4.35 2.0375C6.35 0.679167 8.56667 0 11 0C13.4333 0 15.65 0.679167 17.65 2.0375C19.65 3.39583 21.1 5.21667 22 7.5C21.1 9.78333 19.65 11.6042 17.65 12.9625C15.65 14.3208 13.4333 15 11 15ZM11 13C12.8833 13 14.6125 12.5042 16.1875 11.5125C17.7625 10.5208 18.9667 9.18333 19.8 7.5C18.9667 5.81667 17.7625 4.47917 16.1875 3.4875C14.6125 2.49583 12.8833 2 11 2C9.11667 2 7.3875 2.49583 5.8125 3.4875C4.2375 4.47917 3.03333 5.81667 2.2 7.5C3.03333 9.18333 4.2375 10.5208 5.8125 11.5125C7.3875 12.5042 9.11667 13 11 13Z'/%3E%3C/svg%3E") center / 22px 15px no-repeat;
}

/* Gallery zoom (PhotoSwipe lightbox, #photoswipe-fullscreen-dialog) covers the whole
   site. The gallery plugin puts it at z-index 9999, below the sticky site header
   (99999) and sub-nav (99998), so the nav showed on top of the zoomed image. */
body .pswp {
	z-index: 100000 !important;
}
@media (max-width: 767px) {
	/* Figma 412px frame: 380×323 image. */
	.wwg-product-gallery .wvg-single-gallery-image-container img {
		aspect-ratio: 380 / 323;
	}
}

/* Under the gallery — Figma "Product Overview" | "Option Details": two equal columns
   (520px at full width), 24px apart, 32px below the main image; title 8px above its
   text. The option details column is filled by wwg-product-page-scripts.js when a
   swatch with a description is chosen. The product video, when there is one, sits
   under the description. */
.wwg-product-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
	align-items: start;
	margin-top: 32px;
}
.wwg-product-details .wwg-product-description {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
.wwg-product-details .wwg-product-option-details {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}
.wwg-product-details .wwg-product-video {
	grid-column: 1;
	min-width: 0;
}
/* Moved under the option details when those are the shorter column (wwg-product-page-scripts.js):
   it then sits inside that column rather than as a grid item of its own. */
body .wwg-product-option-details .wwg-product-video {
	margin-top: 32px;  /* the row gap it had under the description */
}
.wwg-product-details .wwg-block-title {
	margin: 0 0 8px;
}
/* "Product Description" title size is the feature title role in wwg-base.css.
   Body copy — Figma "Description": Source Sans 16/26. */
.wwg-product-details .wwg-product-description :is(p, li) {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}

/* Embeds pasted into a product description (e.g. <iframe width="1840" height="1035">) scale
   to the column instead of widening the page — on phones that zoomed the whole page out. */
.wwg-product-details .wwg-product-description :is(iframe, video, embed, object) {
	display: block;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 6px;
}
.wwg-product-details .wwg-product-description img {
	max-width: 100%;
	height: auto;
}

/* Responsive 16:9 YouTube embed. */
.wwg-video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wwg-ivory);
}
.wwg-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Page end: the Figma 88px section rhythm between the last section and the footer, and room
   under the footer's content for the fixed sticky add-to-cart bar (its height is measured
   into --wwg-sticky-bar-h by wwg-product-page-scripts.js) so it doesn't cover the footer. */
.wwg-product {
	padding-bottom: 88px;
}
body.single-product .wwg-footer {
	padding-bottom: calc(15px + var(--wwg-sticky-bar-h, 0px));
}

/* Dimensions & Specs: the Figma section's 656px details column, below the top section. */
.wwg-product-meta {
	max-width: 656px;
	margin-top: 40px;
}

/* Option details (JS-injects <h3>title</h3> + body on swatch select). The title is the
   feature title role (Figma "Option Details") via the h3 default in wwg-base.css. */
#wwg_dynamic_wood_title h3 {
	margin: 0 0 8px;
}
#wwg_dynamic_wood_body:not(:empty) {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	margin: 0;
}

/* Dimensions & Specs — Figma "Product Page" Builder frames. Title is the section title
   (H3) with the rows 32px below; each row is 64px, 16px padding, 4px corners, alternating
   cream-100 tint and the page background (site page ground, not Figma's var(--wwg-bone-xlight)). Item
   name left, values right: Source Sans 20/32 with the keys ("Length:") and units Light,
   values 16px apart. */
.wwg-product-meta .wwg-dimensions-title {
	margin: 0;
}
.wwg-product-meta .wwg_dimensions_weights {
	display: flex;
	flex-direction: column;
	margin-top: 32px;
}
.wwg-product-meta .wwg-dim-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 24px;
	min-height: 64px;
	padding: 16px;
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-primary);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-lg-size);
	line-height: var(--wwg-text-lg-line);
	font-weight: 400;
}
.wwg-product-meta .wwg-dim-row:nth-child(odd) {
	background: var(--wwg-color-bg-secondary);
}
.wwg-product-meta .wwg-dim-row {
	color: var(--wwg-color-text-primary);
}
.wwg-product-meta .wwg-dim-values {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0 16px;
	margin-left: auto;
	text-align: right;
}
.wwg-product-meta .wwg-dim-label {
	flex: 0 1 auto;
}
.wwg-product-meta .wwg-dim-value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.wwg-product-meta .wwg-dim-key {
	font-weight: 300;
}

/* Key feature text — Figma "Feature Text": Source Sans 20/32. */
.wwg-product-extras .wwg_carousel_slide p {
	font-size: var(--wwg-text-lg-size);
	line-height: var(--wwg-text-lg-line);
}
/* FAQ answers — Figma "Description": Source Sans 16/26. */
.wwg-product-extras .wwg_accordion_single_body,
.wwg-product-extras .wwg_accordion_single_body p {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}
/* "You may also like" upsell grid CSS lives in wwg-showcase.css (site-wide),
   shared with the table-builder configurator. Upsell price — Figma "Starting at":
   Source Sans Regular 16/26 in ink. */
.wwg-product-extras .wwg-upsell-price,
.wwg-product-extras .wwg-upsell-price .amount {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}
.wwg-product-extras .wwg-upsell-price,
.wwg-product-extras .wwg-upsell-price .amount {
	color: var(--wwg-color-text-primary);
}

/* ---- Lower sections — Figma "Product Page" Builder frames ----
   Anchor links (Style Guide "Anchor Link": Source Sans 20/32 links, 8px 16px padding,
   24px apart, the selected one tinted cream-100) over a 2px ink-300 rule; the first
   section 56px below; sections 88px apart. */
.wwg-product-extras {
	margin-top: 88px;
}
/* The row rides along under the header once the page scrolls past it, so the section
   links stay reachable. It sits below the header (99999) and the page sub-nav (99998) in
   the stacking order, and paints the page background so content passes behind it. Its
   height feeds --wwg-anchors-h (wwg-header.js) for the sections' scroll offset below. */
.wwg-product-anchors {
	position: sticky;
	top: var(--wwg-header-h, 60px);
	z-index: 99997;
	margin: 0 0 56px;
	padding: 8px 0;
	background: var(--wwg-color-bg-primary);
	border-bottom: 2px solid var(--wwg-color-accent-neutral);
	/* Narrow screens: the links scroll sideways rather than being clipped. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.wwg-product-anchors::-webkit-scrollbar {
	display: none;
}
.wwg-product-anchors ul {
	display: flex;
	justify-content: center;
	gap: 24px;
	/* Centred while the links fit; scrolls from the left once they do not. */
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wwg-product-anchors li {
	margin: 0;
}
.wwg-product-anchors a {
	display: block;
	padding: 8px 16px;
	border-radius: var(--wwg-radius-lg);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-lg-size);
	line-height: var(--wwg-text-lg-line);
	font-weight: 400;
	color: var(--wwg-color-text-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s;
}
.wwg-product-anchors a:hover,
.wwg-product-anchors a:focus-visible {
	background-color: var(--wwg-color-accent-focus-bg);
	color: var(--wwg-color-text-strong);
}
.wwg-product-section {
	/* Clear both the header and the sticky anchor row when jumping to a section. */
	scroll-margin-top: calc(var(--wwg-header-h, 60px) + var(--wwg-anchors-h, 58px) + 24px);
}
.wwg-product-section + .wwg-product-section {
	margin-top: 88px;
}
/* Full content width and no extra vertical space — wwg-showcase.css has an unrelated
   `.wwg-product-section { background: var(--wwg-bone-xlight); padding: 64px 20px }` that inset the carousel,
   pushed each section 64px further from the anchor links (and from each other), and painted
   a light panel behind the sections on dark-mode pages. */
.wwg-product-extras .wwg-product-section,
.wwg-product-extras .wwg_carousel_wrapper,
.wwg-product-extras .wwg_carousel {
	background: transparent;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}
/* …except Dimensions & Specs, which is the Figma 656px "Product Details" column. */
.wwg-product-extras .wwg-product-section.wwg-product-meta {
	max-width: 656px;
}
.wwg-product-section > .wwg_carousel_wrapper,
.wwg-product-section > .wwg_accordion_wrapper {
	margin: 0;
}

/* Key Features carousel — Figma "Key Features": H3 title with two 48px round arrows (16px
   apart) on the right; cards 24px below, 24px apart, three and a peek of the fourth per
   row (464px each at 1608px); image 464:382 cropped to fill with 4px corners, the feature
   title 24px under it and the text 4px under that; a 4px ink-300 progress track 40px below
   with the visible portion in ink-700. The row is a native horizontal scroller (swipe /
   trackpad); the arrows and progress are driven by wwg-product-page-scripts.js. */
.wwg-product-extras .wwg_carousel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 24px;
}
.wwg-product-extras .wwg_carousel_header h2 {
	margin: 0;
}
/* Section titles: Text/Primary-Text (var(--wwg-caput-mortuum-xdark) / Signature Gypsum). */
.wwg-product-extras :is(.wwg_carousel_header h2, .wwg-dimensions-title, .wwg_accordion_header h2, .wwg-upsells-title) {
	color: var(--wwg-color-text-primary) !important;
}
.wwg-product-extras .wwg_carousel_arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 16px;
}
.wwg-product-extras .wwg_carousel_arrows button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wwg-color-bg-primary);
	color: var(--wwg-color-icon-2);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.wwg-product-extras .wwg_carousel_arrows button svg {
	width: 15px;
	height: 25px;
	fill: currentColor;
}
/* States — Style Guide "Interactive Icons (Arrows)", Use=Primary, Size=xl 48px
   (theme roles; Signature values in brackets):
     Default   page-ground circle, Icon-2 glyph (Pozzolana [Pewter])
     Hover     Icon-2 circle, Icon-1 glyph (Bone Extra Light [Ivory])
     Focus     page-ground circle, Icon-Focus-1 glyph (Ivory [Bone Extra Light])
     Disabled  same as Default (no fade) */
.wwg-product-extras .wwg_carousel_arrows button:hover:enabled {
	background: var(--wwg-color-icon-2);
	color: var(--wwg-color-icon-1);
}
.wwg-product-extras .wwg_carousel_arrows button:focus,
.wwg-product-extras .wwg_carousel_arrows button:focus-visible {
	outline: none;
}
.wwg-product-extras .wwg_carousel_arrows button:focus-visible {
	color: var(--wwg-color-icon-focus-1);
}
.wwg-product-extras .wwg_carousel_arrows button:disabled {
	cursor: default;
}
.wwg-product-extras .wwg_carousel {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: normal;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.wwg-product-extras .wwg_carousel::-webkit-scrollbar {
	display: none;
}
.wwg-product-extras .wwg_carousel_slides {
	display: flex;
	gap: 24px;
	margin: 0 !important; /* the old carousel script animated margin-left */
}
.wwg-product-extras .wwg_carousel_slide {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 72px) / 3.31); /* 464px of 1608: three cards + a 144px peek */
	width: auto;
	margin: 0;
	scroll-snap-align: start;
}
.wwg-product-extras .wwg_carousel_slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 464 / 382;
	object-fit: cover;
	border-radius: var(--wwg-radius-lg);
	margin: 0 0 24px;
}
.wwg-product-extras .wwg_carousel_slide h5 {
	margin: 0 0 4px;
}
.wwg-product-extras .wwg_carousel_slide p {
	margin: 0;
}
.wwg-product-extras .wwg_carousel_slide :is(h5, p) {
	color: var(--wwg-color-text-primary) !important;
}
.wwg-product-extras .wwg_carousel_progress {
	height: 4px;
	margin-top: 40px;
	background: var(--wwg-color-accent-neutral);
	overflow: hidden;
}
.wwg-product-extras .wwg_carousel_progress_bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--wwg-color-icon-visibility-2); /* Iron / Signature Gypsum */
	transition: margin-left .15s linear, width .15s linear;
}

@media (max-width: 767px) {
	/* Figma 412px frames: links 16/26 in a row that scrolls, over a 4px rule; cards about
	   74% of the width (281px of 380), 16px apart, image 281:230, no arrows; progress 32px
	   under the cards. */
	.wwg-product-anchors {
		border-bottom-width: 4px;
		margin-bottom: 56px; /* Figma 412px frame: 56px from the links' rule to Key Features */
	}
	.wwg-product-anchors ul {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.wwg-product-anchors ul::-webkit-scrollbar {
		display: none;
	}
	.wwg-product-anchors a {
		font-size: var(--wwg-text-md-size);
		line-height: var(--wwg-text-md-line);
	}
	.wwg-product-extras .wwg_carousel_header {
		margin-bottom: 16px;
	}
	.wwg-product-extras .wwg_carousel_arrows {
		display: none;
	}
	.wwg-product-extras .wwg_carousel_slides {
		gap: 16px;
	}
	.wwg-product-extras .wwg_carousel_slide {
		flex-basis: 74%;
	}
	.wwg-product-extras .wwg_carousel_slide img {
		aspect-ratio: 281 / 230;
	}
	/* Figma 412px "Feature Title": 22.25/24 (the mobile H5 token is 22.25/26). */
	.wwg-product-extras .wwg_carousel_slide h5 {
		line-height: 24px !important;
	}
	.wwg-product-extras .wwg_carousel_progress {
		margin-top: 32px;
	}
}
@media (max-width: 980px) {
	.wwg-product-top {
		flex-direction: column;
		gap: 24px;
	}
	/* Stacked order: gallery, buy box, then Product Overview / Option Details. The
	   media column dissolves so its two blocks can sit either side of the buy box. */
	.wwg-product-top .wwg-product-media {
		display: contents;
	}
	.wwg-product-top .wwg-product-gallery {
		order: 1;
		width: 100%;
	}
	.wwg-product-top .summary {
		order: 2;
		flex-basis: auto;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
	.wwg-product-top .wwg-product-details {
		order: 3;
		width: 100%;
		margin-top: 0;
	}
	/* Tighter horizontal margins (was 80%/~43px → ~4%/~17px). */
	body.single-product #main-content > .container {
		width: 92%;
	}
	/* Less space under the product name when stacked. */
	.wwg-product-top .summary .product_title {
		margin-bottom: 10px;
	}
	body .wwg-product-top table.variations tr + tr {
		margin-top: 10px; /* match the smaller title gap */
	}
	/* Trim WooCommerce's large default bottom margins (form.cart + .summary are
	   each ~32px) that leave a big gap before the Product Description. */
	.wwg-product-top .summary form.cart,
	.wwg-product-top .summary {
		margin-bottom: 10px !important;
	}
	.wwg-product-details {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.wwg-product-details .wwg-product-description,
	.wwg-product-details .wwg-product-option-details,
	.wwg-product-details .wwg-product-video {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Mobile text sizes — Figma 412px product page frames. */
@media (max-width: 767px) {
	.wwg-product-meta .wwg_dimensions_weights {
		margin-top: 40px;
	}
	.wwg-product-meta .wwg-dim-row {
		min-height: 40px;
		padding: 8px;
		gap: 0 16px;
		font-size: var(--wwg-text-sm-size);
		line-height: 24px;
	}
	.wwg-product-meta .wwg-dim-values {
		gap: 0 8px;
	}
	/* Figma mobile: the "x" separators stay Source Sans 16px while the values are 14/24 (line
	   box kept at 24px so the row stays Figma's 40px). */
	.wwg-product-meta .wwg-dim-sep {
		font-size: var(--wwg-text-md-size);
		line-height: 24px;
	}
	body .wwg-product-top table.variations th.label,
	body .wwg-product-top table.variations th.label label {
		font-size: var(--wwg-type-option-group-size-mobile);
		line-height: var(--wwg-type-option-group-line-mobile);
	}
	body .wwg-product-top table.variations th.label .woo-selected-variation-item-name {
		font-size: var(--wwg-text-sm-size);
		line-height: 24px;
	}
	.wwg-product-top .summary .single_add_to_cart_button,
	.wwg-product-top .summary .single_add_to_cart_button.alt {
		font-size: var(--wwg-btn-md-size) !important;
		line-height: var(--wwg-btn-md-line) !important;
	}
	body .wwg-product-top .summary .price {
		font-size: var(--wwg-text-lg-size) !important;
		line-height: var(--wwg-text-lg-line) !important;
	}
	body .wwg-product-top .summary .price del {
		font-size: var(--wwg-text-md-size);
		line-height: var(--wwg-text-md-line);
	}
	body .wwg-product-top .summary p.stock {
		font-size: var(--wwg-text-xs-size) !important;
		line-height: 20px;
	}
	.wwg-product-details .wwg-product-description :is(p, li),
	#wwg_dynamic_wood_body:not(:empty),
	.wwg-product-extras .wwg_accordion_single_body,
	.wwg-product-extras .wwg_accordion_single_body p,
	.wwg-product-extras .wwg-upsell-price,
	.wwg-product-extras .wwg-upsell-price .amount {
		font-size: var(--wwg-text-sm-size);
		line-height: 24px;
	}
	.wwg-product-extras .wwg_carousel_slide p {
		font-size: var(--wwg-text-xs-size);
		line-height: 20px;
	}
}