/*
 * Bamboo Sheets Australia — product page.
 *
 * WHAT THIS FILE IS. The gate suppresses the replaced Elementor document's generated CSS — 65,956
 * bytes for 11956, 66,015 for 14006, and between 41,452 and 66,544 for the other seven — because
 * every rule in it is scoped to `.elementor-<doc> .elementor-element-<id>` selectors that the
 * rebuilt markup does not have. This file restates the part of that CSS the rebuilt page still
 * needs, and nothing else. Every number below was read either out of that generated CSS
 * (tools-pdp/seg-<doc>.css, extracted from the live page by segments.py) or off the live page with
 * the same instrument that measures the rebuild (tools-pdp/probe.js). Where the two disagreed the
 * measurement won, and the disagreement is noted.
 *
 * WHAT IT IS NOT. It does not restyle the gallery's internals, the variations table, the quantity
 * stepper or the review wall. Those are drawn by JetProductGallery, WooCommerce, Astra Addon and
 * Wiser, from stylesheets that stay enqueued; the rebuilt markup keeps the class hooks they need.
 * What this file does supply for them is the SIZING the document CSS was supplying — the gallery's
 * 800px frame and 100px thumbnail rail, the buy box's 448px column, and the review wall's 994px
 * container — because those came from the suppressed segment and nothing else would replace them.
 *
 * ⚠ THE REVIEW WALL'S CONTAINER WIDTH IS LOAD-BEARING. Wiser lays its wall out to whatever box it
 * is handed and re-flows every card at a different width. Live's box is `--content-width:70%` on
 * the reviews band, which measures 994px at 1440 and 340px at 360. Both are set explicitly below.
 * This is the Westhill lesson (wh NOTES-pdp.md), and it is the one number in this file that a
 * "close enough" would have cost 1,700px of document height.
 *
 * Breakpoints are Elementor's own — 1024 (tablet) and 767 (mobile) — because every rule this file
 * replaces was written against them, and a rebuild that moves the breakpoints does not reproduce
 * the page at the widths in between.
 *
 * Colours are taken through the kit's own custom properties, which the gate does NOT suppress
 * (kit 10758 is a different post from the nine documents), with the measured literal as a fallback
 * so this file is still correct if it is ever loaded without the kit.
 */

:root {
	--bsa-pdp-brown: var(--e-global-color-782821a, #73321C);
	--bsa-pdp-text: var(--e-global-color-text, #000000);
	--bsa-pdp-cream: var(--e-global-color-942d227, #FFFDFB);
	--bsa-pdp-sand: var(--e-global-color-secondary, #E4DDD3);
	--bsa-pdp-primary: var(--e-global-color-primary, #CBAB99);
	--bsa-pdp-heading: "Georgia", Sans-serif;
	--bsa-pdp-body: "Montserrat", Sans-serif;
}

.bsa-pdp {
	--bsa-pdp-content: 1140px;   /* kit 10758's container width; band 2 and 4 are boxed to it */
	box-sizing: border-box;
}

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

/* -------------------------------------------------------------------------
 * Band 0 — the strip above the buy box
 *
 * On the four documents without a breadcrumb this is an empty container whose only job is the
 * 77px top margin and a 1% bottom padding; it measures 14px tall at 1440 and 3px at 360, and both
 * numbers are the padding resolving against the container width. On the five with a breadcrumb it
 * additionally holds `nav.woocommerce-breadcrumb`.
 * ---------------------------------------------------------------------- */

.bsa-pdp__band--top {
	display: flex;
	flex-direction: column;
	margin: 77px 0 0;
	/* The bottom padding is per-document — 1% on 11956 and 14949, 0% on the other seven — and
	   arrives as `--bsa-top-padbot` from the template, so the mobile block below can still
	   override it. An inline `padding-bottom` could not be overridden by any media query. */
	padding: 0 0 var(--bsa-top-padbot, 0) 5%;
	align-self: center;
	width: 100%;
}

.bsa-pdp__band--top .woocommerce-breadcrumb {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
	color: var(--bsa-pdp-text);
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Band 1 — the buy box
 *
 * Live: `--flex-direction:row`, `--gap:10px 15px`, `--align-items:stretch`, `--padding:0% 5%`,
 * with a 60% media column and a 40% summary column. It collapses to a column at 1024, which is
 * why the mobile gallery widget exists at all. Measured at 1440: gallery 748x800 at x=82, summary
 * widgets 448 wide at x=855.
 * ---------------------------------------------------------------------- */

.bsa-pdp__band--buybox {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px 15px;
	padding: 0 5%;
	width: 100%;
}

/* ⚠ Specificity, not preference. The wrapper carries `product`, so Astra's
   `.woocommerce div.product div.summary { … }` (0,3,1) outranks a single-class rule and reset the
   64px right padding — the summary column went from 448 to 508 wide the moment the wrapper was
   added. Every layout rule that Astra also has an opinion about is written with the `.bsa-pdp`
   ancestor for that reason, and only those. */
.bsa-pdp .bsa-pdp__media {
	width: 60%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bsa-pdp .bsa-pdp__summary {
	/* ⚠ 64px of RIGHT padding and none on the left, measured rather than chosen. Elementor gives
	   this column `--width:40%` of the 1,296px content box, which flexbox then shrinks by its
	   share of the 15px gap overflow to 512.4px; live's widgets inside it measure 448 wide and
	   start at x=855, which is the column's own left edge. 512.4 - 448 = 64.4, all of it on the
	   right. A symmetrical 32/32 put the title 23px too wide and moved every wrap point in the
	   description. */
	width: 40%;
	padding: 13px 64px 10px 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.bsa-pdp__band--buybox {
		flex-direction: column;
	}
	.bsa-pdp .bsa-pdp__media,
	.bsa-pdp .bsa-pdp__summary {
		width: 100%;
	}
	.bsa-pdp .bsa-pdp__summary {
		padding: 10px;
	}
}

@media (max-width: 767px) {
	.bsa-pdp__band--buybox {
		padding: 0;
	}
	/* Measured at 360: live's media column runs edge to edge (gallery 360 wide) and its summary
	   widgets are 320 in a 360 viewport — 20px each side, not the 10px the desktop column uses.
	   The 10px version made the gallery 340 and gave the description a wider measure, which cost
	   46px of summary height on wrap points alone. */
	.bsa-pdp .bsa-pdp__media {
		padding: 0;
	}
	.bsa-pdp .bsa-pdp__summary {
		padding: 10px 20px;
	}
	.bsa-pdp__band--top {
		padding: 0 0 1% 5%;
	}
}

/* ---- the gallery (Swiper) ---------------------------------------------
 * Self-hosted Swiper v11 gallery emitted by the bsa-swiper-gallery mu-plugin
 * (bsa_swiper_gallery_render()), rendered once inside the `.bsa-pdp__media` column. It replaced
 * WooCommerce's native flexslider markup, so the `.woocommerce-product-gallery` / flexslider
 * selectors this block used to carry are gone with it. Swiper's own layout (viewport clipping,
 * slide flexing, thumb sync) comes from the self-hosted swiper-bundle.min.css loaded in <head>;
 * only the skin and the pre-init CLS guard are stated here, scoped to `.bsa-pdp` as elsewhere.
 *
 * The media column already owns its width (60% desktop, 100% <=1024), so the gallery simply fills
 * it. object-fit:contain keeps the whole product image visible (no crop); BSA imagery is square so
 * it fills the square container exactly.
 * ------------------------------------------------------------------- */

.bsa-pdp .bsa-pdp__gallery {
	min-width: 0;
}

.bsa-pdp .bsa-swg {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	position: relative;
	margin: 0;
}

/* Stage = the CLS reservation. The featured image's real aspect-ratio is inlined here (1/1 fallback
   below); because this element is NOT a Swiper and holds nothing that reflows, its height is fixed
   by CSS and never moves. The main .swiper is absolute + clipped inside it, so Swiper laying its
   N-slide wrapper out on init cannot resize the stage (and, via aspect-ratio, balloon its height). */
.bsa-pdp .bsa-swg-stage {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px;
	background: #F5F0EA;
	border-radius: 16px;
	overflow: hidden;
}

.bsa-pdp .bsa-swg-stage:not([style*="aspect-ratio"]) {
	aspect-ratio: 1 / 1;
}

/* Main viewport fills the stage, taken out of flow so its wrapper width cannot push layout. */
.bsa-pdp .bsa-swg-main {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: pan-y;
}

/* Before Swiper adds .swiper-initialized, show only the first slide (no stacked flash of every
   image while the engine boots). */
.bsa-pdp .bsa-swg-main:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none !important;
}

.bsa-pdp .bsa-swg-main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsa-pdp .bsa-swg-main .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Arrows — suppress Swiper's default glyph, draw our own chevron. */
.bsa-pdp .bsa-swg .swiper-button-next::after,
.bsa-pdp .bsa-swg .swiper-button-prev::after {
	content: none !important;
	display: none !important;
}

.bsa-pdp .bsa-swg-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #1a1a1a;
	margin-top: 0;
}

.bsa-pdp .bsa-swg-nav::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
}

.bsa-pdp .bsa-swg .swiper-button-prev {
	left: 10px;
}

.bsa-pdp .bsa-swg .swiper-button-prev::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.bsa-pdp .bsa-swg .swiper-button-next {
	right: 10px;
}

.bsa-pdp .bsa-swg .swiper-button-next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}

.bsa-pdp .bsa-swg-nav:hover {
	background: #fff;
}

.bsa-pdp .bsa-swg .swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Thumbnail strip. */
.bsa-pdp .bsa-swg-thumbs {
	height: 96px;
	min-height: 96px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
}

.bsa-pdp .bsa-swg-thumbs:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 8px;
	overflow: hidden;
}

.bsa-pdp .bsa-swg-thumbs .swiper-wrapper {
	align-items: center;
	height: 96px;
}

.bsa-pdp .bsa-swg-thumbs .swiper-slide {
	width: 72px;
	height: 96px;
	min-height: 96px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s;
	flex-shrink: 0;
	box-sizing: border-box;
}

.bsa-pdp .bsa-swg-thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bsa-pdp .bsa-swg-thumbs .swiper-slide-thumb-active,
.bsa-pdp .bsa-swg-thumbs .swiper-slide:hover {
	opacity: 1;
}

@media (max-width: 768px) {
	.bsa-pdp .bsa-swg-nav {
		width: 34px;
		height: 34px;
	}

	.bsa-pdp .bsa-swg-thumbs {
		height: 80px;
	}

	.bsa-pdp .bsa-swg-thumbs .swiper-slide {
		width: 60px;
		height: 80px;
	}
}

/* ---- title, rating row, price -------------------------------------- */

.bsa-pdp__summary > h1.product_title {
	font-family: var(--bsa-pdp-heading);
	font-size: 27px;
	font-weight: 500;
	font-style: normal;
	line-height: 32px;
	letter-spacing: 0;
	margin: 0 0 13.5px;
	padding: 0;
	text-decoration: none;
}

/* `space-between`, read off the rendered pages rather than guessed: on every document that puts
   the price in this row, live pushes the Wiser rating to the right-hand edge of the 448px column
   (15383: price at x=855, "(1 Reviews)" ending at x=1303). The four row-reverse documents have no
   price cell, and the empty flex-1 cell there produces the same left-aligned rating live shows. */
.bsa-pdp__ratingrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 10px;
	margin: 0 0 8px;
}

/* Four documents put the rating on the RIGHT by reversing the row (11956, 14006, 14014, 14018);
   five run it left-to-right with the price first (14010, 14022, 14026, 14949, 15392). */
.bsa-pdp__ratingrow--row-reverse {
	flex-direction: row-reverse;
}

.bsa-pdp__ratingrow--row {
	flex-direction: row;
}

.bsa-pdp__pricecell,
.bsa-pdp__ratingcell {
	flex: 0 1 auto;
	min-width: 0;
}

.bsa-pdp__pricecell--empty {
	flex: 1 1 auto;
}

.bsa-pdp__pricecell .price,
.bsa-pdp__pricecell p.price {
	font-family: var(--bsa-pdp-body);
	font-size: 20px;
	font-weight: 600;
	color: var(--bsa-pdp-text);
	margin: 0;
}

/* ---- the add-to-cart block ------------------------------------------
 * WooCommerce's own form, Astra Addon's variation buttons, the quantity stepper and FunnelKit's
 * express button all render inside here untouched. The only rules restated are the ones the
 * suppressed document CSS was applying to them: the 40px pill radius and the brown fill on the
 * buttons, the full-width variations table, and the two type sizes on the labels and the select.
 * ------------------------------------------------------------------- */

.bsa-pdp__atc {
	width: 100%;
}

.bsa-pdp__atc .cart button,
.bsa-pdp__atc .elementor-button,
.bsa-pdp__atc button.single_add_to_cart_button {
	border-radius: 40px;
	background-color: var(--bsa-pdp-brown);
	transition: all 0.2s;
}

.bsa-pdp__atc .cart button:hover,
.bsa-pdp__atc button.single_add_to_cart_button:hover {
	background-color: var(--bsa-pdp-brown);
}

.bsa-pdp__atc .quantity .qty {
	transition: all 0.2s;
}

.woocommerce .bsa-pdp__atc form.cart .variations {
	width: 100%;
}

.woocommerce .bsa-pdp__atc form.cart table.variations label {
	color: var(--bsa-pdp-text);
	font-size: 14px;
	font-weight: 400;
}

.woocommerce .bsa-pdp__atc form.cart table.variations td.value select {
	font-size: 12px;
	font-weight: 400;
}

/* ---- the three trust items ------------------------------------------
 * Live: a row of three equal columns, each an image over a centred 12px caption whose line-height
 * is 1px — which is why the caption's box measures 1px tall and the visible text overflows it.
 * Reproduced as measured, not as intended.
 * ------------------------------------------------------------------- */

/* Read out of the suppressed document CSS: the row is `--min-height:93px`, `space-around`, 5px
   gaps and 10px of vertical padding; each cell is a 20px-radius box filled with the kit's
   secondary colour (#E4DDD3), centred, 10px gap, 5px pad. The first build drew the icons on bare
   white — invisible in the numbers, obvious in the screenshot. */
.bsa-pdp__trust {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	min-height: 93px;
	gap: 5px;
	padding: 10px 0;
	margin: 24px 0 0;
	align-items: stretch;
}

.bsa-pdp__trust-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1 1 0;
	text-align: center;
	gap: 10px;
	padding: 5px;
	border-radius: 20px;
	background-color: var(--bsa-pdp-sand);
}

.bsa-pdp__trust-icon {
	width: 40px;
	height: auto;
	display: block;
}

.bsa-pdp__trust-label {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1px;
	text-align: center;
	color: var(--bsa-pdp-text);
}

/* ---- "Also available in" --------------------------------------------
 * Live's swatch row is an Elementor gallery with `--image-border-radius:100px`,
 * `--image-border-width:2px`, a transparent border that turns brown on hover, and a 49px
 * right-hand pad on the widget. The swatches are 100x100 PNGs displayed small.
 * ------------------------------------------------------------------- */

.bsa-pdp__alsolabel {
	font-family: var(--bsa-pdp-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--bsa-pdp-text);
	padding: 20px 0 5px;
}

.bsa-pdp__also {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 49px 0 0;
}

.bsa-pdp__also-item {
	display: block;
	line-height: 0;
	border: 2px solid transparent;
	border-radius: 100px;
	transition: border-color 800ms;
}

.bsa-pdp__also-item:hover,
.bsa-pdp__also-item:focus-visible {
	border-color: var(--bsa-pdp-brown);
	border-radius: 100px;
}

.bsa-pdp__also-item img {
	width: 22px;
	height: 22px;
	display: block;
	border-radius: 100px;
}

@media (max-width: 1024px) {
	.bsa-pdp__also {
		padding: 0 37% 0 0;
	}
}

@media (max-width: 767px) {
	.bsa-pdp__also {
		padding: 0;
	}
}

/* ---- the product description ---------------------------------------- */

.bsa-pdp__desc {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
	line-height: 19.8px;
	padding: 20px 0 0;
}

.bsa-pdp__desc p {
	margin: 0 0 1em;
}

.bsa-pdp__desc p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Band 2 — the tab block, the hairline, and "Complete the look"
 *
 * Live: a boxed container, `--justify-content:center`, `--gap:0px 30px`, `--margin-top:28px`,
 * `--padding:20px 50px`, holding a 40% tab column, a 1px spacer coloured #A4A4A4, and a 40%
 * upsell column. Measured at 1440: the tab widget is 536 wide at x=154.
 * ---------------------------------------------------------------------- */

.bsa-pdp__band--tabs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 0 30px;
	margin: 28px auto 0;
	padding: 20px 50px;
	width: 100%;
}

.bsa-pdp__tabs {
	width: 40%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.bsa-pdp__spacer {
	width: 1px;
	flex: 0 0 1px;
	background-color: #A4A4A4;
	align-self: stretch;
}

.bsa-pdp__complete {
	width: 40%;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

@media (max-width: 1024px) {
	.bsa-pdp__band--tabs {
		gap: 10px;
		padding: 10px;
		flex-wrap: wrap;
	}
	.bsa-pdp__tabs,
	.bsa-pdp__complete {
		width: 49%;
	}
}

@media (max-width: 767px) {
	.bsa-pdp__band--tabs {
		padding: 0;
		flex-direction: column;
	}
	.bsa-pdp__tabs,
	.bsa-pdp__complete {
		width: 100%;
	}
	.bsa-pdp__spacer {
		width: 100%;
		height: 1px;
		flex: 0 0 1px;
	}
}

/* ---- the tabs themselves --------------------------------------------
 * Elementor's nested-tabs, restated: a horizontal title strip with a 20px gap and a 22px gap
 * between strip and panel, titles in Montserrat 600 at 14px with -0.3px tracking, grey until
 * selected. Mobile drops the title size to 13px and opens the gap to 25px.
 * ------------------------------------------------------------------- */

.bsa-pdp__tablist {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	background: transparent;
}

.bsa-pdp__tab {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-family: var(--bsa-pdp-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 1.15;
	color: #999999;
	text-align: start;
}

.bsa-pdp__tab:hover,
.bsa-pdp__tab.is-active {
	color: #000000;
}

.bsa-pdp__panels {
	position: relative;
}

.bsa-pdp__panel[hidden] {
	display: none;
}

.bsa-pdp__panel {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
	line-height: 19.8px;
	color: var(--bsa-pdp-text);
}

/* The Details panel holds WooCommerce's own short-description div, which live styles at 14px on
   a 23.1px line — not the 12px the other panels use. Live's Elementor widget container also
   carries `padding-top:11px` and `margin-left:-10px`, which is why live's short description
   measures 546 wide inside a 536 tab column. Both restated; the -10px is the difference between
   a 277px panel and a 238px one. */
.bsa-pdp__panel .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 23.1px;
	font-family: var(--bsa-pdp-body);
	margin: 0 0 0 -10px;
	padding-top: 11px;
	width: calc(100% + 10px);
}

.bsa-pdp__panel ul {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.bsa-pdp__panel p {
	margin: 0 0 1em;
}

.bsa-pdp__carebtn {
	display: inline-block;
	margin-top: 8px;
	border-radius: 40px;
	background-color: var(--bsa-pdp-brown);
	color: #ffffff;
	padding: 10px 22px;
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

@media (max-width: 767px) {
	.bsa-pdp__tablist {
		gap: 25px;
	}
	.bsa-pdp__tab {
		font-size: 13px;
	}
}

/* ---- the size chart --------------------------------------------------
 * Live builds it out of ten Elementor grid containers, one per row, four cells wide, and a final
 * half-width two-cell row for the pillowcase. Reproduced as a grid rather than a table because
 * that is what live is: there is no <table> on the page and a table would inherit a different set
 * of WooCommerce and Astra rules.
 * ------------------------------------------------------------------- */

.bsa-pdp__chart {
	display: flex;
	flex-direction: column;
}

.bsa-pdp__chart-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.bsa-pdp__chart-row--pillow {
	grid-template-columns: repeat(2, 1fr);
	width: 47%;
}

.bsa-pdp__chart-cell {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
	line-height: 19.8px;
	padding: 2px 4px 2px 0;
}

.bsa-pdp__chart-row--head .bsa-pdp__chart-cell {
	font-weight: 600;
}

.bsa-pdp__chart-cell p {
	margin: 0;
}

/* ---- "Complete the look" -------------------------------------------- */

.bsa-pdp__complete-label {
	font-family: var(--bsa-pdp-body);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.3px;
	color: var(--bsa-pdp-text);
	margin: 0 0 12px;
}

.bsa-pdp__complete-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 15px;
	row-gap: 0;
}

.bsa-pdp__complete-grid > .bsa-pdp__card,
.bsa-pdp__more-strip > .bsa-pdp__card {
	padding: 0 5px 5px;
}

/* -------------------------------------------------------------------------
 * Band 3 — "what makes it so good"
 *
 * Live: a full-bleed container, `--min-height:68vh`, column, `--justify-content:space-evenly`,
 * `--align-items:center`, `--padding:0% 0% 5% 0%`, over a vertical gradient from #FFFDFB at 19%
 * to #E4DDD3 at 68%. Inside, two 25% columns of call-to-action blocks flank a centre photo.
 * ---------------------------------------------------------------------- */

.bsa-pdp__band--why {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	/* min-height, padding-top and row-gap are set INLINE per document — 68vh/0%/0 on 11956,
	   65vh/5%/0 on 14006, 100vh/5%/50 on 14949, none/5%/50 on the other six. See the flag table
	   in single-product.php; the four resulting band heights are 647 / 761 / 900 / 769. */
	padding-top: var(--bsa-why-padtop, 0);
	padding-bottom: 5%;
	padding-left: 0;
	padding-right: 0;
	row-gap: var(--bsa-why-gap, 0);
	min-height: var(--bsa-why-minh, 0);
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--bsa-pdp-cream) 19%, var(--bsa-pdp-sand) 68%);
	width: 100%;
}

.bsa-pdp__why-title {
	width: 100%;
	max-width: 100%;
	text-align: center;
	font-family: "Poppins", Sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	font-style: normal;
	text-decoration: none;
	line-height: 1.1em;
	letter-spacing: 2px;
	color: #222222;
	margin: 0;
}

/* Measured on live, at 1440: the row is the full 1,440 with 72px (5%) of side padding, so its
   content box is 1,296. The two call-to-action columns are 25% of that — 324 each, and live's
   first CTA measures exactly 324 — and the centre photo widget is 518. 324 + 518 + 324 = 1,166,
   leaving 130px, which live distributes as two 65px gaps: `space-between`, not `center`. Getting
   this wrong is what made the photo a flex:1 item 769px wide and the band 229px too tall. */
.bsa-pdp__why-grid {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 5%;
	gap: 0;
}

.bsa-pdp__why-col {
	flex: 0 0 25%;
	width: 25%;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Live's photo widget is 518px wide and its image fills the row's height, which the two
   call-to-action columns set at 559. `align-self: stretch` plus `height:100%` reproduces that
   dependency instead of pinning a number that only holds at one viewport. Live's <img> element
   measures 425 x 559 inside the 518 box for a reason this milestone did not establish — the
   source is 1000x1000 and nothing in the document sets a width — so the rebuild's image is 93px
   wider than live's. Filed in §11, not smoothed over. */
.bsa-pdp__why-photo {
	flex: 0 0 518px;
	width: 518px;
	max-width: 100%;
	align-self: stretch;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.bsa-pdp__why-photo img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Elementor's call-to-action widget, restated from its RENDERED box rather than from its
   controls: `.elementor-cta__content` carries a 35px pad and a 100px min-height, the graphic
   block is 51px tall with a 20px bottom margin, the title is 20px on a 26px line with 10px under
   it, and the description is 14px on 23.1px. 35 + 51 + 20 + 26 + 10 + 92 + 35 = 269, which is
   exactly what live's first CTA measures. Guessing the padding cost 72px per block and 229px on
   the band. */
.bsa-pdp__cta {
	display: flex;
	flex-direction: column;
	min-height: 100px;
	padding: 35px;
}

.bsa-pdp__cta-icon {
	width: 20%;
	height: 51px;
	object-fit: contain;
	object-position: left center;
	margin: 0 0 20px;
	display: block;
}

.bsa-pdp__cta-title {
	font-family: var(--bsa-pdp-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: var(--bsa-pdp-text);
	margin: 0 0 10px;
}

.bsa-pdp__cta-desc {
	font-family: var(--bsa-pdp-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 23.1px;
	letter-spacing: -0.3px;
	color: var(--bsa-pdp-text);
}

.bsa-pdp__divider {
	border-top: 0.5px solid #212121;
	margin: 15px 0;
	width: 100%;
}

@media (max-width: 1024px) {
	.bsa-pdp__band--why {
		padding: 10% 5%;
		row-gap: var(--bsa-why-gap, 0);
		column-gap: 0;
	}
	.bsa-pdp__why-grid {
		flex-direction: column;
	}
	.bsa-pdp__why-col {
		flex: 0 0 auto;
		width: 100%;
	}
	/* ⚠ `flex: 0 0 518px` means WIDTH in a row and HEIGHT in a column. Below 1024 the grid is a
	   column, so the desktop basis was being read as a 518px minimum height on the photo and the
	   band came out 205px too tall at 360. Reset explicitly rather than relying on `max-width`,
	   which only constrains the cross axis. */
	.bsa-pdp__why-photo {
		flex: 0 0 auto;
		width: 100%;
		align-self: auto;
	}
	.bsa-pdp__why-photo img {
		height: auto;
		object-fit: fill;
	}
	.bsa-pdp__why-title {
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.bsa-pdp__band--why {
		padding: 15% 5%;
	}
	.bsa-pdp__band--top {
		padding: 0 0 var(--bsa-top-padbot, 0) 5%;
	}
}

/* -------------------------------------------------------------------------
 * Band 4 — the Wiser review wall
 *
 * ⚠ 70% content width above 768, and nothing else. That single declaration is what makes the wall
 * 994px at 1440 and 340px at 360. Measured on live first, then set here; see the file header.
 * ---------------------------------------------------------------------- */

/* 10px all round: live's band measures 1,714 around a 1,694px wall, and the 20px is the
   container's own default padding. */
.bsa-pdp__band--reviews {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 10px;
}

.bsa-pdp__wall {
	width: 100%;
}

@media (min-width: 768px) {
	.bsa-pdp__wall {
		width: 70%;
	}
}

/* -------------------------------------------------------------------------
 * Band 5 — "More for you..."
 *
 * Live is an Elementor `loop-carousel.product` — a Swiper showing four slides of five products
 * with a 20px gap, three at 1024, one plus a 56px peek at 767. The rebuild is a scroll-snap strip
 * with the same slide widths and the same gap. That is a DEVIATION, taken deliberately and for
 * the second time on this site (the homepage bestseller row made the same call), and its two
 * consequences are recorded in NOTES-pdp.md §11: no carousel JavaScript runs, and the strip has
 * no loop clones, so a settled DOM holds five cards where live's holds fifteen.
 * ---------------------------------------------------------------------- */

.bsa-pdp__band--more {
	display: flex;
	flex-direction: column;
	width: 84%;
	margin: 0 auto;
	padding: 40px 0 20px;
}

.bsa-pdp__more-title {
	font-family: var(--bsa-pdp-heading);
	font-size: 25px;
	font-weight: 600;
	color: var(--bsa-pdp-text);
	margin: 0 0 16px;
}


/* Fix wave 2b (2026-09-02) — contain the strip's own overflow.
 *
 * `overflow-x: auto` alone did NOT clip this scroller: CSS overflow does not clip an
 * absolutely-positioned descendant whose containing block is an ANCESTOR of the scroller. The strip
 * was `position: static`, so the nearest positioned ancestor was the page wrapper, and the
 * visually-hidden `span.screen-reader-text` that WooCommerce's get_price_html() puts inside every
 * card price escaped the strip and extended the document to the last card's right edge. On a 390px
 * phone that made documentElement.scrollWidth 1444, which lets the page pan sideways and (in a real
 * mobile viewport) widens the initial containing block, so every position:fixed element is laid out
 * against 1444 instead of 390.
 *
 * `position: relative` makes the strip the containing block for those descendants, so its existing
 * overflow-x now clips them. Proven by A/B on the live page before writing this: with it,
 * documentElement.scrollWidth 1444 -> 390 while the strip still scrolls (clientWidth 390,
 * scrollWidth 1582). `overflow-x: hidden`, `min-width: 0` and `max-width: 100%` on the strip all
 * changed nothing, which is what identified the cause.
 *
 * NOT fixed with body{overflow-x:hidden} — that is already set on this site and only hides the
 * symptom; the document stays 1444 wide and fixed elements stay broken.
 *
 * overscroll-behavior-x: contain stops a horizontal swipe in the strip chaining to the page.
 */
.bsa-pdp__more-strip {
	display: flex;
	flex-direction: row;
	gap: 20px;
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bsa-pdp__more-strip::-webkit-scrollbar {
	display: none;
}

.bsa-pdp__more-strip > .bsa-pdp__card {
	flex: 0 0 calc((100% - 3 * 20px) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.bsa-pdp__band--more {
		width: 100%;
		padding: 20px;
	}
	.bsa-pdp__more-title {
		font-size: 20px;
	}
	.bsa-pdp__more-strip > .bsa-pdp__card {
		flex: 0 0 calc((100% - 2 * 20px) / 3);
	}
}

@media (max-width: 767px) {
	.bsa-pdp__band--more {
		width: 100%;
		padding: 20px 0;
		text-align: center;
	}
	.bsa-pdp__more-title {
		font-size: 16px;
		text-align: center;
	}
	.bsa-pdp__more-strip {
		padding: 0 56px;
	}
	.bsa-pdp__more-strip > .bsa-pdp__card {
		flex: 0 0 100%;
	}
}

/* -------------------------------------------------------------------------
 * The cards, shared by both loops
 *
 * ⚠ NOT `li.product`, on purpose: `bsa-cls-fix.php` forces a 1:1 aspect ratio and an absolutely
 * positioned hover image on anything that matches that selector, and live's Elementor loop items
 * do not match it. The cards are 1:1 here anyway because the source images are, but by their own
 * dimensions rather than by a mu-plugin's `!important`.
 * ---------------------------------------------------------------------- */

.bsa-pdp__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bsa-pdp__card-media {
	display: block;
	line-height: 0;
}

.bsa-pdp__card-media img,
.bsa-pdp__card-media picture {
	width: 100%;
	height: auto;
	display: block;
}

/* Measured off live's rendered loop items rather than taken from the documents: the title is
   Montserrat 12px on a 12px line with a 6px bottom margin, and the price 13px on 21.45px with
   2.6px. Both are smaller and tighter than the obvious guess, and both move the card height. */
.bsa-pdp__card-title,
h1.bsa-pdp__card-title {
	font-family: var(--bsa-pdp-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	margin: 20px 0 6px;
	padding: 0;
}

.bsa-pdp__card-title a {
	color: var(--bsa-pdp-text);
	text-decoration: none;
}

.bsa-pdp__card-price,
.bsa-pdp__card-price .price {
	font-family: var(--bsa-pdp-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 21.45px;
	color: var(--bsa-pdp-text);
	margin: 0 0 2.6px;
}

.bsa-pdp__card-price del {
	opacity: 0.5;
}