/*
 * Single product page: layouts 1 & 2 (template-parts/product/*), the summary, gallery,
 * variation swatches, specification/documents sections, tabs, share menu and sticky buy bar.
 * Loaded on product pages only. Many selectors target WooCommerce / flexslider / RankUP markup
 * this theme does not print itself.
 */

/* ---------- Page + layout grid ---------- */
.sl-product-page { padding-block: 2rem; }
.sl-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
.sl-product-layout__summary { align-self: flex-start; }
.sl-product-layout--rail .sl-product-layout__gallery {
	position: relative;
	min-width: 0;
}
.sl-product-layout--rail .sl-product-layout__summary { min-width: 0; }
@media (min-width: 1024px) {
	.sl-product-page { padding-block: 3rem; }
	.sl-product-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3rem;
	}
	.sl-product-layout__gallery { grid-column: 1 / span 7; }
	.sl-product-layout__summary {
		grid-column: 8 / span 5;
		position: sticky;
	}
	/* Customizer → Product page → Columns (body classes from inc/customizer.php). */
	.sl-pcols-6-6 .sl-product-layout__gallery { grid-column: 1 / span 6; }
	.sl-pcols-6-6 .sl-product-layout__summary { grid-column: 7 / span 6; }
	.sl-pcols-8-4 .sl-product-layout__gallery { grid-column: 1 / span 8; }
	.sl-pcols-8-4 .sl-product-layout__summary { grid-column: 9 / span 4; }
	.sl-pcols-6-5 .sl-product-layout__gallery { grid-column: 1 / span 6; }
	.sl-pcols-6-5 .sl-product-layout__summary { grid-column: 8 / span 5; }
	.sl-pgap-compact .sl-product-layout { gap: 2rem; }
	.sl-pgap-wide .sl-product-layout { gap: 4rem; }
	.sl-summary-static .sl-product-layout__summary { position: static; }
}
@media (max-width: 1023.98px) {
	.sl-summary-first .sl-product-layout__summary { order: -1; }
}

/* WooCommerce title / price in the summary. */
:is(.woocommerce, .woocommerce-page) div.product .product_title {
	font-family: var(--sl-font-display);
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -.025em;
}
@media (min-width: 768px) {
	:is(.woocommerce, .woocommerce-page) div.product .product_title { font-size: 2.25rem; line-height: 2.5rem; }
}
:is(.woocommerce, .woocommerce-page) div.product p.price {
	color: var(--sl-black);
	font-family: var(--sl-font-mono);
	font-size: 1.25rem;
	line-height: 1.75rem;
}

/* ---------- Summary: category eyebrow, SKU row, chips ---------- */
.sl-product-eyebrow {
	display: block;
	margin-bottom: .5rem;
}
.sl-product-eyebrow__link { transition: color var(--sl-duration) var(--sl-ease-std); }
.sl-product-eyebrow__link:hover { color: var(--sl-black); }
.sl-product-sku-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: .75rem;
	margin-bottom: 1rem;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-product-sku {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-family: var(--sl-font-mono);
}
.sl-product-sku--top {
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-product-sku__value { color: var(--sl-black); }
.sl-product-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}
.sl-product-chip {
	display: inline-flex;
	align-items: center;
	padding: .375rem .75rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-small);
	background: var(--sl-gray-50);
	color: var(--sl-gray-600);
	font-family: var(--sl-font-mono);
	font-size: 11px;
	white-space: nowrap;
}
.sl-stock-badge--lg {
	flex-shrink: 0;
	padding: .25rem .5rem;
	font-size: 10px;
}

/* ---------- Layout 2 summary: top row, buy box, quick specs, resources ---------- */
.sl-product-toprow {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 2.25rem;
	margin-bottom: .75rem;
}
.sl-product-toprow__sep,
.sl-product-sections-nav__sep { color: var(--sl-gray-300); }
.sl-product-toprow__end {
	flex-shrink: 0;
	margin-left: auto;
}
.sl-buybox {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-card);
	background: var(--sl-off-white);
}
.sl-buybox-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.sl-buybox-note {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-top: 1rem;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-buybox-note__icon { color: var(--sl-gray-400); }
.sl-quick-specs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
}
.sl-quick-spec {
	display: inline-flex;
	align-items: center;
	padding: .375rem .75rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-small);
	background: var(--sl-white);
	color: var(--sl-gray-700);
	font-family: var(--sl-font-mono);
	font-size: 11px;
	white-space: nowrap;
}
.sl-product-resources { margin-top: 1.5rem; }
.sl-product-resources > * + * { margin-top: 1.25rem; }
.sl-product-docs--compact { min-width: 0; }
.sl-panel-label {
	display: block;
	margin-bottom: .5rem;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sl-product-certificates :is(img, svg) { vertical-align: middle; }

/* ---------- pa_color swatches (inc/product.php) ---------- */
.sl-variation-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.sl-var-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--sl-white), 0 0 0 3.5px var(--sl-black); }
/* Color / image swatch dot (inline background from the term; inc/product.php). */
.sl-var-swatch--color {
	width: 2rem;
	height: 2rem;
	border-radius: var(--sl-radius-full);
	box-shadow: 0 0 0 1px rgb(0 0 0 / .1);
}
.sl-var-swatch--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--sl-r-pill);
	background: var(--sl-gray-50);
	box-shadow: 0 0 0 1px rgb(0 0 0 / .1);
	color: var(--sl-gray-600);
	font-family: var(--sl-font-mono);
	font-size: 10px;
}
.sl-var-swatch:disabled {
	opacity: .3;
	cursor: not-allowed;
}
.sl-var-swatch:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 3px;
}
.sl-var-color-name {
	margin-top: .5rem;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-var-color-name__value {
	color: var(--sl-black);
	font-weight: 600;
}

/* ---------- Layout 1: stacked sections + sticky jump nav ---------- */
.sl-product-sections {
	margin-top: 3rem;
	padding-top: .5rem;
	border-top: 1px solid var(--sl-gray-200);
}
.sl-product-sections-nav {
	position: sticky;
	z-index: 10;
	display: none;
	align-items: center;
	gap: .25rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--sl-gray-200);
	background: rgb(255 255 255 / .95);
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.sl-product-sections-nav__link {
	padding: .375rem .75rem;
	border-radius: var(--sl-r-small);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}
.sl-product-sections-nav__link:hover {
	background: var(--sl-gray-50);
	color: var(--sl-black);
}
.sl-product-section--stacked {
	padding-block: 2.5rem;
	border-bottom: 1px solid var(--sl-gray-200);
	scroll-margin-top: 8rem;
}
.sl-product-section--stacked:last-child { border-bottom-width: 0; }
@media (min-width: 1024px) {
	.sl-product-sections { margin-top: 4rem; }
	.sl-product-sections-nav { display: flex; }
	.sl-product-section--stacked { padding-block: 3rem; }
}
.sl-product-section__head { margin-bottom: 1.5rem; }
.sl-product-section__title {
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
}
.sl-product-section__body { max-width: 48rem; }
/* Customizer → Product page → Content width: Full width (body class from inc/customizer.php). */
.sl-pbody--full .sl-product-section__body { max-width: none; }

/* ---------- Layout 2: tabs ---------- */
.sl-product-tabs { margin-top: 3rem; }
@media (min-width: 1024px) {
	.sl-product-tabs { margin-top: 4rem; }
}
.sl-tabs-bar {
	position: sticky;
	z-index: 20;
	border-bottom: 1px solid var(--sl-gray-200);
	background: var(--sl-white);
}
.sl-tablist {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
}
@media (min-width: 640px) {
	.sl-tablist { gap: 1.5rem; }
}
.sl-tabpanel { padding-block: 2.5rem; }
/* Tab panel background (Customizer → Product page → "Tab panel background"): a tinted card
   under the tab bar, square on top where it meets the bar, rounded below (Cards corner role).
   Tables inside get a white base so the specification zebra stays visible on the tint. */
:is(.sl-tabbg--grey, .sl-tabbg--warm) .sl-tabpanel {
	--sl-tabpanel-bg: var(--sl-off-white);
	padding-inline: 1.25rem;
	border-radius: 0 0 var(--sl-r-card) var(--sl-r-card);
	background: var(--sl-tabpanel-bg);
}
.sl-tabbg--warm .sl-tabpanel { --sl-tabpanel-bg: var(--sl-amber-50); }
@media (min-width: 768px) {
	:is(.sl-tabbg--grey, .sl-tabbg--warm) .sl-tabpanel { padding-inline: 2rem; }
}
:is(.sl-tabbg--grey, .sl-tabbg--warm) .sl-tabpanel table:is(.woocommerce-product-attributes, .shop_attributes) {
	overflow: hidden;
	border-radius: var(--sl-r-small);
	background: var(--sl-white);
	box-shadow: 0 0 0 1px var(--sl-gray-200);
}
/* Without JS the panels stack; keep a gap between the tinted cards. */
:is(.sl-tabbg--grey, .sl-tabbg--warm) .sl-product-tabs:not(.is-enhanced) .sl-tabpanel + .sl-tabpanel { margin-top: 1rem; }

/* ---------- Share menu (template-parts/product/share.php) ---------- */
.sl-share {
	position: relative;
	display: inline-block;
}
.sl-share--button { margin-top: 1.5rem; }
.sl-share-toggle {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sl-gray-200);
	color: var(--sl-gray-600);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}
.sl-share-toggle:hover {
	border-color: var(--sl-black);
	color: var(--sl-black);
}
.sl-share-toggle--icon {
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--sl-radius-full);
}
.sl-share-toggle--button {
	gap: .5rem;
	padding: .5rem 1rem;
	border-radius: var(--sl-r-btn);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .025em;
	text-transform: uppercase;
}
.sl-share-menu {
	position: absolute;
	top: 100%;
	z-index: 20;
	width: 13rem;
	margin-top: .5rem;
	padding: .5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-popup);
	background: var(--sl-white);
	box-shadow: var(--sl-shadow-xl);
}
.sl-share-menu--end { right: 0; }
.sl-share-menu--start { left: 0; }
.sl-share-item {
	display: flex;
	align-items: center;
	gap: .625rem;
	width: 100%;
	padding: .5rem .75rem;
	border-radius: var(--sl-r-small);
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.25rem;
	text-align: left;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}
.sl-share-item:hover {
	background: var(--sl-gray-50);
	color: var(--sl-black);
}

/* ---------- Sticky buy bar: inner layout ---------- */
.sl-buybar__inner {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-block: .5rem;
}
@media (min-width: 1024px) {
	.sl-buybar__inner { gap: 1rem; }
}
.sl-buybar-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border-radius: var(--sl-r-img);
	background: var(--sl-off-white);
}
.sl-buybar-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sl-buybar__info {
	flex: 1 1 0%;
	min-width: 0;
}
.sl-buybar__name {
	overflow: hidden;
	color: var(--sl-black);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-buybar__meta {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	min-width: 0;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-buybar-price {
	flex-shrink: 0;
	color: var(--sl-black);
	font-family: var(--sl-font-mono);
	font-weight: 600;
}
.sl-buybar__color {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-buybar__add { flex-shrink: 0; }

/* Product gallery: main image on the mockup's neutral background, rounded; thumbnails are
	 turned into a flexslider nav by WooCommerce's own JS (wc-product-gallery-slider support in
	 inc/woocommerce.php) once the page loads.

	 Root cause of "gallery only fills ~half the column" (fixed in 2B): `div.images{float:left;
	 width:48%}` / `div.summary{float:right;width:48%}` came from woocommerce-layout.css, which
	 fix round 1 now dequeues (inc/woocommerce.php's `woocommerce_enqueue_styles` filter) — the
	 float/width reset below no longer needs `!important` there. `.woocommerce-product-gallery__
	 image:nth-child(n+2){width:25%;display:inline-block}` and `.flex-control-thumbs li{width:25%;
	 float:left}` (both meant for the no-JS/no-flexslider fallback) are still printed by
	 woocommerce.css (general, kept enqueued), so those two still need `!important` to win against
	 the `sl-product-layout` grid and the 72px-square thumbnail row. */
.woocommerce div.product div.images.woocommerce-product-gallery,
div.product div.images.woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin-bottom: 0;
}
.woocommerce div.product div.summary.entry-summary,
div.product div.summary.entry-summary {
	float: none;
	width: 100%;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--sl-r-img-lg);
	overflow: hidden;
	background-color: var(--sl-white);
}
/* Main image area: always a 1:1 square, the photo contained (never cropped) inside it —
	 portrait, landscape and square shots all line up and the slider keeps one height. The hover
	 zoom's own .zoomImg (natural size) is left alone. The 1px ring sits above the photo. */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sl-border);
	pointer-events: none;
}
/* No-JS fallback only: once flexslider runs it wraps the wrapper in .flex-viewport and sets
	 each slide's width inline — overriding that width breaks the carousel offsets. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	width: auto !important;
	display: block !important;
}
.woocommerce-product-gallery__wrapper img:not(.zoomImg) {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.woocommerce-product-gallery .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	border-radius: var(--sl-r-badge);
	background-color: var(--sl-black);
	padding: 0.25rem 0.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--sl-white);
}
.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	list-style: none;
	padding: 0;
}
.flex-control-thumbs li {
	width: 72px !important;
	height: 72px;
	float: none !important;
	margin: 0;
}
.flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sl-r-img);
	cursor: pointer;
	opacity: 1;
	box-shadow: 0 0 0 1px var(--sl-border);
	transition: box-shadow 0.15s ease;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--sl-black);
}

/* Add to cart: full width on mobile. Its look (primary, disabled = same black at 40% opacity,
	 never WC purple) is the button system's — see assets/css/buttons.css. */
.single_add_to_cart_button {
	width: 100%;
}
@media (min-width: 640px) {
	.single_add_to_cart_button {
		width: auto;
	}
}

/* Variation table (single-product/add-to-cart/variable.php, not overridden): stacked
	 label + control rows instead of a table row per attribute. */
table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
}
table.variations tr {
	margin-bottom: 1rem;
}
table.variations th.label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--sl-gray-500);
	margin-bottom: 0.5rem;
}
/* The pa_color row's swatches (inc/product.php) already render their own "Color: <name>" /
	 "Select a color" line, so WooCommerce's own `<th class="label">Color</th>` for that row
	 would otherwise duplicate it — hide it for exactly that row. */
table.variations tr:has(.sl-variation-swatches) th.label {
	display: none;
}
a.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--sl-gray-400);
	text-decoration: underline;
	transition: color 0.15s ease;
}
a.reset_variations:hover {
	color: var(--sl-black);
}

/* Specifications section (template-parts/product/sections.php): a 2-column label/value table,
	 values in mono, non-italic. Scoped to `table.woocommerce-product-attributes`/`shop_attributes`
	 *inside any* `.sl-product-section` — not just our own wc_display_product_attributes() call —
	 so a merged extra tab's own table (fix-round-1: e.g. a plugin's own "specifications" tab,
	 merged into this same section) gets the same treatment if it happens to reuse those core WC
	 classes, with no separate wrapper class needed.
	 `.shop_attributes td{font-style:italic}` (WooCommerce's own woocommerce.css, selector
	 specificity 0,1,1) is what forces the default italic — every selector below is at least
	 0,2,1 so it wins regardless of stylesheet order, but font-style is still reset explicitly
	 for clarity. */
.sl-product-section table.woocommerce-product-attributes,
.sl-product-section table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}
.sl-product-section table.woocommerce-product-attributes tr,
.sl-product-section table.shop_attributes tr {
	border-bottom: 1px solid var(--sl-border);
}
.sl-product-section table.woocommerce-product-attributes tr:nth-child(even),
.sl-product-section table.shop_attributes tr:nth-child(even) {
	background-color: var(--sl-off-white);
}
/* The zebra lives on the row only: woocommerce-general also tints the cells of even rows
	 (`.woocommerce table.shop_attributes tr:nth-child(even) td/th`, 0,3,3), which stacked on the
	 row colour and made label and value cells different shades. 0,3,4 here, so it always wins. */
body .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tr:nth-child(n) > :is(th, td) {
	background: transparent;
}
.sl-product-section table.woocommerce-product-attributes tr:last-child,
.sl-product-section table.shop_attributes tr:last-child {
	border-bottom: 0;
}
.sl-product-section table.woocommerce-product-attributes th,
.sl-product-section table.shop_attributes th {
	width: 40%;
	text-align: left;
	vertical-align: top;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sl-gray-500);
	border: 0;
}
.sl-product-section table.woocommerce-product-attributes td,
.sl-product-section table.shop_attributes td {
	width: 60%;
	vertical-align: top;
	padding: 0.75rem 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--sl-black);
	border: 0;
}
.sl-product-section table.woocommerce-product-attributes td p,
.sl-product-section table.shop_attributes td p {
	margin: 0;
}
/* Public taxonomy attributes (e.g. pa_color) render each value as a link to its term archive
	 (wc_display_product_attributes()) — keep them the same mono color as plain-text values
	 instead of the default link blue, underlined only on hover. */
.sl-product-section table.woocommerce-product-attributes td a,
.sl-product-section table.shop_attributes td a,
.sl-product-section table.woocommerce-product-attributes td a:visited,
.sl-product-section table.shop_attributes td a:visited {
	color: inherit;
	text-decoration: none;
}
.sl-product-section table.woocommerce-product-attributes td a:hover,
.sl-product-section table.shop_attributes td a:hover {
	text-decoration: underline;
}
@media (max-width: 639px) {
	.sl-product-section table.woocommerce-product-attributes,
	.sl-product-section table.shop_attributes,
	.sl-product-section table.woocommerce-product-attributes tbody,
	.sl-product-section table.shop_attributes tbody,
	.sl-product-section table.woocommerce-product-attributes tr,
	.sl-product-section table.shop_attributes tr,
	.sl-product-section table.woocommerce-product-attributes th,
	.sl-product-section table.shop_attributes th,
	.sl-product-section table.woocommerce-product-attributes td,
	.sl-product-section table.shop_attributes td {
		display: block;
		width: 100%;
	}
	.sl-product-section table.woocommerce-product-attributes th,
	.sl-product-section table.shop_attributes th {
		padding: 0.75rem 1rem 0.25rem;
	}
	.sl-product-section table.woocommerce-product-attributes td,
	.sl-product-section table.shop_attributes td {
		padding: 0 1rem 0.75rem;
	}
}

/* Customizer → Product page → Specifications: columns (body.sl-specs-cols-2/3). The rows flow
	 left to right into a grid; each row keeps its label/value split, and the zebra follows the
	 visual rows (every other band of 2 or 3 cells). */
@media (min-width: 768px) {
	:is(.sl-specs-cols-2, .sl-specs-cols-3) .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tbody {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
	}
	:is(.sl-specs-cols-2, .sl-specs-cols-3) .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tr {
		display: grid;
		grid-template-columns: 40% 60%;
		border-bottom: 1px solid var(--sl-border);
		background-color: transparent;
	}
	:is(.sl-specs-cols-2, .sl-specs-cols-3) .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) :is(th, td) { width: auto; }
	:is(.sl-specs-cols-2, .sl-specs-cols-3) .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tr:is(:nth-child(4n+3), :nth-child(4n+4)) {
		background-color: var(--sl-off-white);
	}
}
@media (min-width: 1024px) {
	.sl-specs-cols-3 .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tbody {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sl-specs-cols-3 .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tr:is(:nth-child(4n+3), :nth-child(4n+4)) {
		background-color: transparent;
	}
	.sl-specs-cols-3 .sl-product-section table:is(.woocommerce-product-attributes, .shop_attributes) tr:is(:nth-child(6n+4), :nth-child(6n+5), :nth-child(6n+6)) {
		background-color: var(--sl-off-white);
	}
}

/* Reviews section (template-parts/product/sections.php wraps comments_template(), which loads
	 WooCommerce's own single-product-reviews.php — not overridden). That template prints its own
	 "Reviews"/"N reviews for ..." <h2>, redundant with this section's own eyebrow + title, so
	 it's hidden here. */
.sl-product-section .woocommerce-Reviews-title {
	display: none;
}
.sl-product-section ol.commentlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-product-section .commentlist .comment_container {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-card);
	background-color: var(--sl-white);
}
.sl-product-section .commentlist img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	flex-shrink: 0;
}
.sl-product-section .comment-text {
	flex: 1;
	min-width: 0;
}
.sl-product-section .comment-text .star-rating {
	margin-bottom: 0.5rem;
}
.sl-product-section .woocommerce-review__author {
	font-weight: 700;
	color: var(--sl-black);
}
.sl-product-section .woocommerce-review__dash {
	color: var(--sl-gray-400);
}
.sl-product-section .woocommerce-review__published-date {
	color: var(--sl-gray-400);
	font-size: 0.75rem;
}
.sl-product-section p.woocommerce-noreviews {
	color: var(--sl-gray-500);
	font-size: 0.875rem;
	font-style: italic;
}

/* Star rating widgets inside the reviews section: WooCommerce's own icon-font glyphs
	 (`.star-rating` for posted reviews, `p.stars` for the "Your rating" field in the comment
	 form) recolored to the brand accent instead of the WC-purple/black default. */
.sl-product-section .star-rating::before {
	color: var(--sl-border);
}
.sl-product-section .star-rating span::before {
	color: var(--sl-amber-500);
}
.sl-product-section p.stars a::before {
	color: var(--sl-amber-500);
}

/* Review / comment form ("Add a review" / "Be the first to review …"): design-system inputs
	 and labels; the submit button is the button system's primary (`#respond input#submit`). */
.sl-product-section #respond #reply-title {
	display: block;
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sl-black);
	margin-bottom: 1rem;
}
.sl-product-section #respond .comment-notes,
.sl-product-section #respond p.must-log-in {
	color: var(--sl-gray-500);
	font-size: 0.875rem;
	margin-bottom: 1rem;
}
.sl-product-section #respond p {
	margin-bottom: 1.25rem;
}
.sl-product-section #respond label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sl-gray-700);
	margin-bottom: 0.375rem;
}
.sl-product-section #respond .required {
	color: var(--sl-red-600);
}
.sl-product-section #respond input[type="text"],
.sl-product-section #respond input[type="email"],
.sl-product-section #respond select#rating,
.sl-product-section #respond textarea#comment {
	width: 100%;
	border: 1px solid var(--sl-border-strong);
	border-radius: var(--sl-r-field);
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	font-family: inherit;
	background-color: var(--sl-white);
	color: var(--sl-black);
}
.sl-product-section #respond input[type="text"]:focus,
.sl-product-section #respond input[type="email"]:focus,
.sl-product-section #respond select#rating:focus,
.sl-product-section #respond textarea#comment:focus {
	outline: none;
	border-color: var(--sl-black);
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.sl-product-section #respond textarea#comment {
	min-height: 8rem;
	resize: vertical;
}
.sl-product-section #respond p.form-submit {
	margin-bottom: 0;
}

/* Related products (single-product/related.php, not overridden): heading text is set via the
	 woocommerce_product_related_products_heading filter in inc/product.php ("You may also
	 like"); this styles that plain <h2> like the rest of the theme's uppercase section titles,
	 and gives the section itself the same top-border rhythm as .sl-product-sections. */
.related.products {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--sl-border);
}
.related.products > h2 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sl-black);
	margin: 0 0 1.5rem;
}

/*
 * Product page Layout 2 (template-parts/product/layout-2.php, summary-l2.php, tabs.php;
 * body.sl-product-layout-2). Everything here is scoped to Layout 2-only classes so Layout 1
 * renders exactly as before. Plain, unlayered CSS: most selectors target WooCommerce,
 * flexslider or RankUP classes this theme never prints (see the note at the top of this
 * section), and the JS-added state classes (.is-enhanced) would be purged from an @layer block.
 */

/* Gallery: flexslider's own markup. Mobile = main image, then a horizontal snap strip of
	 thumbnails; lg = a vertical 80px rail on the left, main image on the right. The rail's
	 `height: 0; min-height: 100%` keeps it from growing the grid row, so the row height (and
	 the rail's max height) is the main image's; longer rails scroll. */
.sl-gallery-rail .woocommerce-product-gallery {
	position: relative;
}
.sl-gallery-rail .flex-viewport {
	border-radius: var(--sl-r-img-lg);
}
.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs {
	position: relative;
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap !important;
	gap: 8px;
	margin: 0.75rem 0 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
/* Every thumbnail is a uniform cell (the images themselves are mostly line drawings of mixed
	 aspect ratios on white/transparent): neutral background, 1px ring, image contained inside
	 with a little padding. WooCommerce's woocommerce.css gives these images `height: auto`, so the
	 cell — not the image — carries the size. */
.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs li {
	flex: 0 0 64px;
	width: 64px !important;
	height: 64px;
	margin: 0 !important;
	float: none !important;
	border-radius: var(--sl-r-img);
	background-color: var(--sl-off-white);
	box-shadow: inset 0 0 0 1px var(--sl-border);
	overflow: hidden;
	scroll-snap-align: start;
}
.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs li img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	padding: 6px;
	object-fit: contain;
	border-radius: var(--sl-r-img);
	box-shadow: none;
	opacity: 1;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}
.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs li img.flex-active,
.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs li img:hover {
	box-shadow: inset 0 0 0 2px var(--sl-black);
}
@media (min-width: 1024px) {
	.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}
	.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery > .flex-viewport,
	.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}
	.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
		height: 0;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: y proximity;
	}
	.sl-product-layout-2 .sl-gallery-rail .flex-control-thumbs li {
		flex: 0 0 80px;
		width: 80px !important;
		height: 80px;
	}
}

/* WooCommerce gives the zoom trigger z-index: 99, which put it above the open drawers and the
   sticky header; the image buttons only need to clear the slides. The long selectors below
   match WooCommerce's own (woocommerce-general) so these rules win. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 5 !important; }

/* Customizer → Product page → Gallery: "Hover zoom" off keeps WooCommerce's zoom running (it
   prints the magnifier button only then) but never shows the magnified layer; "Magnifier
   button" off hides the button (inc/product.php). */
.sl-no-hover-zoom .woocommerce-product-gallery .zoomImg { display: none !important; }
.sl-no-gallery-trigger.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none !important; }

/* Gallery dots + arrows (Customizer → Product page → Gallery; built by assets/js/site.js
   "Gallery dots & arrows" inside flexslider's .flex-viewport, so they sit on the image itself
   whatever the thumbnails do). Dots: a glass capsule centred at the bottom — 6px dots, the
   active one stretches into a 22px bar. Arrows: 40px glass buttons at the sides, shown on
   hover (desktop) or always. "Dots only" hides the thumbnails (Layout 2 drops its rail). */
.woocommerce-product-gallery .flex-viewport { position: relative; }
.sl-gallery-dots__nav {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border-radius: var(--sl-r-pill);
	background: rgb(255 255 255 / .72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-black) 6%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--sl-black) 35%, transparent);
	transform: translateX(-50%);
}
.sl-gallery-dots__dot {
	display: block;
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sl-black) 22%, transparent);
	cursor: pointer;
	transition: width 450ms var(--sl-ease-apple), background-color 300ms ease;
}
/* A 24px tap/click target around each 6px dot. */
.sl-gallery-dots__dot { position: relative; }
.sl-gallery-dots__dot::before { content: ""; position: absolute; inset: -9px -4px; }
.sl-gallery-dots__dot:hover { background: color-mix(in srgb, var(--sl-black) 50%, transparent); }
.sl-gallery-dots__dot.is-active { width: 22px; background: var(--sl-black); }
.sl-gallery-dots__dot:focus-visible { outline: 2px solid var(--sl-black); outline-offset: 3px; }

.sl-gallery-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--sl-r-pill);
	background: rgb(255 255 255 / .85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--sl-black) 12%, transparent), 0 0 0 1px var(--sl-border);
	color: var(--sl-black);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 250ms ease, transform 350ms var(--sl-ease-apple), box-shadow .15s ease, background-color .15s ease;
}
.sl-gallery-arrow svg { width: 18px; height: 18px; }
.sl-gallery-arrow--prev { left: .75rem; }
.sl-gallery-arrow--next { right: .75rem; }
.sl-gallery-arrow:hover,
.sl-gallery-arrow:focus-visible {
	background: var(--sl-white);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sl-black) 18%, transparent), 0 0 0 2px var(--sl-black);
	outline: none;
}
/* "On hover": hidden until the pointer is over the gallery (or an arrow has focus); slides in
   a little from its side. Touch screens rely on swipe. */
.sl-gallery-arrows--hover .sl-gallery-arrow { opacity: 0; pointer-events: none; }
.sl-gallery-arrows--hover .sl-gallery-arrow--prev { transform: translate(-6px, -50%); }
.sl-gallery-arrows--hover .sl-gallery-arrow--next { transform: translate(6px, -50%); }
@media (hover: hover) and (pointer: fine) {
	.sl-gallery-arrows--hover .woocommerce-product-gallery:hover .sl-gallery-arrow,
	.sl-gallery-arrows--hover .sl-gallery-arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%);
	}
}

/* "Dots only": no thumbnails (flexslider still builds them; they stay hidden). */
.sl-gallery-nothumbs .woocommerce-product-gallery .flex-control-thumbs { display: none !important; }
.sl-gallery-nothumbs .sl-gallery-rail .sl-gallery-share { bottom: .75rem; }
@media (min-width: 1024px) {
	.sl-gallery-nothumbs.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery { grid-template-columns: minmax(0, 1fr); }
	.sl-gallery-nothumbs.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery > .flex-viewport,
	.sl-gallery-nothumbs.sl-product-layout-2 .sl-gallery-rail .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 1; }
}

/* Desktop swipe (body.sl-gallery-drag, assets/js/site.js "Gallery drag"): a grab cursor on the
   main image; while dragging the slide follows the pointer (--sl-drag-x) and zoom is hidden. */
@media (hover: hover) and (pointer: fine) {
	.sl-gallery-drag .woocommerce-product-gallery .flex-viewport { cursor: grab; }
	.sl-gallery-drag .woocommerce-product-gallery.is-grabbing .flex-viewport { cursor: grabbing; user-select: none; }
	.sl-gallery-drag .woocommerce-product-gallery.is-grabbing .slides { translate: var(--sl-drag-x, 0) 0; }
	.sl-gallery-drag .woocommerce-product-gallery.is-grabbing .zoomImg { opacity: 0 !important; }
	.sl-gallery-drag .woocommerce-product-gallery .slides { transition: translate 350ms var(--sl-ease-apple); }
	.sl-gallery-drag .woocommerce-product-gallery.is-grabbing .slides { transition: none; }
}

/* Image buttons: zoom/lightbox (printed by WooCommerce) top-right of the main image, share
   (layout-2.php .sl-gallery-share) bottom-right — one look for both. On lg they sit in the
   gallery's right column. */
.sl-gallery-rail { position: relative; }
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger,
.sl-gallery-share .sl-share-toggle--icon {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--sl-r-pill);
	background-color: var(--sl-white);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--sl-black) 12%, transparent), 0 0 0 1px var(--sl-border);
	color: var(--sl-black);
	transition: box-shadow 0.15s ease, color 0.15s ease;
}
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger:focus-visible,
.sl-gallery-share .sl-share-toggle--icon:hover,
.sl-gallery-share .sl-share-toggle--icon:focus-visible,
.sl-gallery-share .sl-share-toggle--icon[aria-expanded="true"] {
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sl-black) 18%, transparent), 0 0 0 2px var(--sl-black);
	color: var(--sl-black);
	outline: none;
}
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger {
	top: 0.75rem;
	right: 0.75rem;
}
/* Zoom icon: the theme's magnifier (24px stroke grid) instead of WooCommerce's CSS-drawn glass
   and the 🔍 emoji it prints for screen readers (the link keeps its aria-label). */
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger > span { display: none; }
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger::after { display: none; }
.woocommerce div.product .sl-gallery-rail div.images .woocommerce-product-gallery__trigger::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 0;
	background-color: currentColor;
	transform: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Share: bottom-right of the main image. The rail is image + (below lg) the 64px thumbnail
   strip with its .75rem margin and 2px padding; on lg the rail beside the image adds no height. */
.sl-gallery-share {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 5;
}
.sl-gallery-rail:has(.flex-control-thumbs) .sl-gallery-share { bottom: calc(0.75rem + 0.75rem + 64px + 4px); }
@media (min-width: 1024px) {
	.sl-gallery-rail:has(.flex-control-thumbs) .sl-gallery-share { bottom: 0.75rem; }
}
.sl-gallery-share .sl-share-toggle--icon .sl-icon { width: 18px; height: 18px; }
.sl-gallery-share .sl-share-menu {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* Slide counter (assets/js/site.js appends it inside .flex-viewport). */
.sl-gallery-counter {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 5;
	padding: 0.25rem 0.5rem;
	border-radius: var(--sl-r-pill);
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px var(--sl-border);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 11px;
	line-height: 1rem;
	color: var(--sl-black);
	pointer-events: none;
}

/* Info panel top row: the eyebrow sits inline with the SKU and share button. */
.sl-product-toprow .sl-product-eyebrow {
	margin: 0;
	min-width: 0;
}
.sl-product-layout--rail .woocommerce-product-details__short-description {
	margin-top: 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sl-gray-700);
}
.sl-product-layout--rail .woocommerce-product-details__short-description p {
	margin: 0 0 0.5rem;
}

/* Buy box: price (mono 2xl) + stock badge row; a chosen variation's price is mirrored there by
	 assets/js/site.js, so WooCommerce's own variation price line is hidden. */
.sl-buybox .sl-buybox-price .price {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	color: var(--sl-black);
}
.sl-buybox .woocommerce-variation-price {
	display: none;
}
.sl-buybox form.cart {
	margin: 0;
}
.sl-buybox .woocommerce-variation-availability p.stock {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
}
/* Quantity stepper + Add to cart in one row; the button takes the remaining width at the
	 stepper's height. Anything else a plugin prints in that row (e.g. a min-order hint) wraps
	 onto its own full-width line. */
.sl-buybox form.cart:not(.variations_form),
.sl-buybox .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}
.sl-buybox form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button):not([type="hidden"]),
.sl-buybox .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button):not([type="hidden"]) {
	flex-basis: 100%;
}
.sl-buybox .quantity {
	margin: 0 !important;
	float: none !important;
	background-color: var(--sl-white);
}
/* 50px + the stepper's 1px border top/bottom = the lg (52px) Add to cart next to it. */
.sl-buybox .quantity.sl-qty-stepper .qty,
.sl-buybox .quantity.sl-qty-stepper .sl-qty-btn {
	height: 50px;
}
/* Takes the rest of the row; lg size and look come from the button system. */
.sl-buybox .single_add_to_cart_button {
	flex: 1 1 0%;
	width: auto;
	margin: 0 !important;
	float: none !important;
}

/* RankUP documents / certificates / PDF modal on the corner system (Customizer → Design:
	 corners). The plugin reads Woodmart's radius tokens with a 4px fallback through its own
	 --rk-radius / --rk-btn-radius; `body` lifts these above the plugin's own declarations
	 whatever the stylesheet order. */
body .rankup-product-specifications {
	--rk-radius: var(--sl-r-card);
	--rk-btn-radius: var(--sl-r-btn);
}
body .rankup-pdf-modal {
	--rk-radius: var(--sl-r-popup);
	--rk-btn-radius: var(--sl-r-btn);
}
body .rankup-certificates { --rk-radius: var(--sl-r-img); }

/* Document preview button: an eye ("view") instead of the plugin's magnifier, which read as
	 search. The plugin's inline SVG is hidden; the icon is drawn in currentColor so the
	 plugin's hover colours still apply. */
body .rankup-product-specification__preview > svg { display: none; }
.rankup-product-specification__preview::before {
	content: "";
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sl-product-docs--compact .rankup-product-specification__preview::before { width: 14px; height: 14px; }

/* Info panel documents (the Documents tab's own RankUP `rows` markup, full panel width) in a
	 compact variant, then the certificates on their own labelled row below. */
.sl-product-resources .rankup-certificates,
.sl-product-resources .rankup-product-specifications {
	margin: 0;
}
.sl-product-docs--compact .rankup-product-specifications--rows {
	width: 100%;
}
.sl-product-docs--compact .rankup-product-specifications--rows .rankup-product-specification {
	gap: 10px;
	padding: 8px 12px;
}
.sl-product-docs--compact .rankup-product-specification__icon {
	min-width: 38px;
	min-height: 24px;
	padding: 4px 7px;
	font-size: 9px;
}
.sl-product-docs--compact .rankup-product-specification__content strong {
	font-size: 13px;
}
.sl-product-docs--compact .rankup-product-specification__size {
	font-size: 11px;
}
.sl-product-docs--compact .rankup-product-specification__preview,
.sl-product-docs--compact .rankup-product-specification__arrow {
	width: 26px;
	height: 26px;
}

/* Tabs: sticky bar right under the sticky site header (--sl-header-h). Without JS the bar
	 stays hidden and the panels stack with their own headings. Tab rules are scoped to
	 `.sl-tablist` so the home bestsellers filter pills (also `.sl-tab`) keep their own look. */
/* A jump to the tabs always ends past the 24px glass-header threshold, so the scroll margin
	 uses the shrunk header height (--sl-header-min-h), not the live one. */
.sl-product-tabs {
	scroll-margin-top: calc(var(--sl-header-min-h, 81px) + var(--sl-buybar-h, 0px));
}
.sl-tabs-bar {
	top: calc(var(--sl-header-h, 81px) + var(--sl-buybar-h, 0px));
}
.sl-product-tabs:not(.is-enhanced) .sl-tabs-bar {
	display: none;
}
.sl-tablist {
	scrollbar-width: none;
}
.sl-tablist::-webkit-scrollbar {
	display: none;
}
.sl-tablist .sl-tab {
	flex: 0 0 auto;
	padding: 1rem 0.75rem;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-gray-500);
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.sl-tablist .sl-tab:hover {
	color: var(--sl-black);
}
.sl-tablist .sl-tab[aria-selected="true"] {
	color: var(--sl-black);
	border-bottom-color: var(--sl-black);
}
.sl-tablist .sl-tab:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: -2px;
}
/* Panels are focusable (tabindex=0) and a #tab-* deep link focuses them too, so the keyboard
	 indicator is a slim accent line on top rather than a full outline box. */
.sl-tabpanel:focus {
	outline: none;
}
.sl-tabpanel:focus-visible {
	box-shadow: inset 0 2px 0 var(--sl-accent);
}
.sl-product-tabs:not(.is-enhanced) .sl-tabpanel + .sl-tabpanel {
	border-top: 1px solid var(--sl-border);
}
.sl-product-tabs.is-enhanced .sl-tabpanel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sticky buy bar (template-parts/product/buy-bar.php, assets/js/site.js "Sticky buy bar").
	 Mobile: bottom edge, above the safe area. Desktop (lg): glass strip right under the header.
	 Slides + fades in with `.is-visible`; `inert` while hidden. */
.sl-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid rgba(17, 18, 21, 0.08);
	box-shadow: 0 -8px 24px -12px rgba(17, 18, 21, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(100%);
	transition: transform 350ms var(--sl-ease-apple), opacity 350ms var(--sl-ease-apple), visibility 0s linear 350ms;
}
@media (min-width: 1024px) {
	.sl-buybar {
		top: var(--sl-header-h, 65px);
		bottom: auto;
		padding-bottom: 0;
		background-color: rgba(255, 255, 255, 0.72);
		border-top: 0;
		border-bottom: 1px solid rgba(17, 18, 21, 0.08);
		box-shadow: 0 8px 24px -12px rgba(17, 18, 21, 0.12);
		transform: translateY(-100%);
	}
}
.sl-buybar.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}
.sl-buybar-price .price,
.sl-buybar-price ins {
	text-decoration: none;
}
.sl-buybar-price del {
	margin-right: 0.25rem;
	font-weight: 400;
	color: var(--sl-gray-400);
}
/* "Choose a color first": the swatches (or the variations table) get a pulsing accent ring. */
.sl-variation-swatches.is-attention,
table.variations.is-attention {
	position: relative;
}
.sl-variation-swatches.is-attention::after,
table.variations.is-attention::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: var(--sl-r-card);
	box-shadow: 0 0 0 2px var(--sl-accent);
	pointer-events: none;
	animation: sl-attention 1200ms var(--sl-ease-apple) both;
}
@keyframes sl-attention {
	0%, 100% { opacity: 0; }
	20%, 60% { opacity: 1; }
	40% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.sl-buybar {
		transition: none;
	}
	.sl-variation-swatches.is-attention::after,
	table.variations.is-attention::after {
		animation: none;
	}
}

.sl-product-certificates--summary { margin-top: 1.5rem; }
.sl-rankup-related { margin-top: 3rem; }
@media (min-width: 1024px) {
	.sl-rankup-related { margin-top: 4rem; }
}