/* ========================================================================
   Beau Home — WooCommerce shop / category archive styles
   Mirrors the React CategoryPage component.
   ======================================================================== */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.beau-shop {
	padding-top: 8.75rem;
	padding-bottom: 6rem;
	min-height: 80vh;
	min-height: 80svh;
	background: hsl(var(--beau-background));
	transition: background-color 0.7s ease;
}
/* Mobile: navbar is much shorter than desktop, so the 8.75rem top padding
   leaves ~80px of empty cream between navbar and breadcrumb. Match Lovable
   reference (~24px visible gap above the breadcrumb). */
@media (max-width: 1023px) {
	.beau-shop { padding-top: 5rem; }
}
.beau-shop.is-japandi {
	background: hsl(var(--beau-muted));
}

/* ── BD Product Archive template — layout ───────────────────────────────────
   The "Beau Home — Product Archive" BD template renders the archive inside an
   EssentialElements\Section. BD's Section already provides ONE container via
   its `.section-container` (max-width + margin auto + padding) — so we must
   NOT add a second container per element (that double-boxes and squashes the
   grid). Instead we just tune the archive Section's own .section-container to
   mirror the legacy `.beau-shop > .beau-container`: the page max-width, the
   horizontal gutter, and the vertical rhythm (top padding clears the fixed
   navbar). Scoped via :has(#beau-shop) so only this Section is affected. */
/* Archive surface — mirrors the legacy `.beau-shop` / `.beau-shop.is-japandi`:
   the whole archive section background flips to --beau-muted in Japandi mode.
   `applyStyleMode()` toggles `.is-japandi` on #beau-shop; :has() lifts that to
   the Section so the ENTIRE archive surface changes, not just the grid column.
   (#beau-shop itself stays transparent via `.beau-shop--bd`.) */
.bde-section:has(#beau-shop) {
	background: hsl(var(--beau-background));
	transition: background-color 0.7s ease;
}
.bde-section:has(#beau-shop.is-japandi) {
	background: hsl(var(--beau-muted));
}
/* ShopPageHeader hardcodes `background: --beau-background` on .beau-shop-header
   (for standalone use). In the archive the Section owns the surface — make the
   header transparent so the Japandi surface flip isn't masked by a cream box. */
.bde-section:has(#beau-shop) .beau-shop-header {
	background: transparent;
}

.bde-section:has(#beau-shop) > .section-container {
	max-width: var(--beau-container-max);
	margin-inline: auto;
	padding: 8.75rem 1.5rem 6rem;
	box-sizing: border-box;
	/* BD's Section container defaults to `align-items: flex-start`, which makes
	   each archive row only as wide as its content (left-aligned). Stretch them
	   so the header / style bar / toolbar / columns span the full container —
	   the rows' own `justify-content: space-between` then pushes the toggle and
	   toolbar groups to the right edge, like the legacy archive. */
	align-items: stretch;
}
@media (min-width: 768px) {
	.bde-section:has(#beau-shop) > .section-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1024px) {
	.bde-section:has(#beau-shop) > .section-container { padding-left: 4rem; padding-right: 4rem; }
}
/* Neutralise the ShopPageHeader element's standalone "density" padding inside
   the archive — that padding exists for landing-page use; here the
   .section-container owns the page rhythm and the inner .beau-shop__crumb /
   .beau-shop__header margins own the inter-element rhythm. */
.bde-section:has(#beau-shop) .beau-shop-header {
	padding-top: 0;
	padding-bottom: 0;
}

/* The Columns hosting ProductFilters + ProductGrid defaults to an equal split;
   force the legacy shop proportions — 260px filter sidebar, grid takes the
   rest (mirrors the old `.beau-shop__layout` grid). No container here — the
   Section's .section-container above already boxes it. */
.bde-columns:has(> .beau-product-filters) {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 3rem;
}
.bde-columns:has(> .beau-product-filters) > .beau-product-filters {
	flex: 0 0 260px;
}
.bde-columns:has(> .beau-product-filters) > .beau-product-grid {
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 1023px) {
	.bde-columns:has(> .beau-product-filters) {
		flex-direction: column;
		gap: 2rem;
	}
	.bde-columns:has(> .beau-product-filters) > .beau-product-filters,
	.bde-columns:has(> .beau-product-filters) > .beau-product-grid {
		flex-basis: auto;
		width: 100%;
	}
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.beau-shop__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.5);
	margin-bottom: 2.5rem;
}
.beau-shop__crumb-link {
	color: hsl(var(--beau-foreground) / 0.5);
	text-decoration: none;
	transition: color 0.2s;
}
.beau-shop__crumb-link:hover { color: hsl(var(--beau-accent)); }
.beau-shop__crumb-sep {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}
.beau-shop__crumb-current { color: hsl(var(--beau-foreground)); }

/* ── Category header ─────────────────────────────────────────────────────── */
.beau-shop__header {
	max-width: 48rem;
	margin-bottom: 2rem;
}

.beau-shop__eyebrow {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: hsl(var(--beau-accent));
	margin: 0 0 1.25rem;
}
body.breakdance h1.beau-shop__title,
.beau-shop__title {
	font-family: var(--beau-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 8vw, 6rem);
	letter-spacing: 0.06em;
	line-height: 0.95;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground));
	margin: 0;
}
.beau-shop__desc {
	margin-top: 2rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: hsl(var(--beau-foreground) / 0.7);
	max-width: 40rem;
}
.beau-shop__total {
	margin-top: 1.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.55);
}

/* ── Style toggle ────────────────────────────────────────────────────────── */
.beau-shop__style-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
@media (min-width: 1024px) { .beau-shop__style-bar { margin-bottom: 2.5rem; } }

/* Mobile (<1024px) — per the "filters pagina's doorlopend eruit" spec:
   the entire Filters + view-mode + load-mode bar disappears. 2-col +
   infinite are forced defaults so the switchers are redundant, and the
   archive template has no filter sidebar wired up anyway so the Filters
   button would be a dead click. The whole toolbar collapses to 0 height. */
@media (max-width: 1023px) {
	body.breakdance .beau-shop__toolbar { display: none; }
}

.beau-shop__style-label {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.55);
	margin: 0;
}
.beau-shop__style-tabs {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.15);
	border-radius: 0.625rem;  /* v2: outer container rounded-md = 10px (inner tabs stay 5px) */
	background: hsl(var(--beau-background) / 0.6);
	backdrop-filter: blur(8px);
}
.beau-shop__style-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;                             /* font baseline was shifting text upward inside the pill */
	padding: 0.75rem 1.25rem;
	border-radius: 5px;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-indent: 0.24em;                        /* compensate trailing letter-spacing — see feedback_letter_spacing_offcenter */
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.7);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.beau-shop__style-tab:hover { color: hsl(var(--beau-foreground)); }
.beau-shop__style-tab.is-active {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.beau-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid hsl(var(--beau-foreground) / 0.1);
	border-bottom: 1px solid hsl(var(--beau-foreground) / 0.1);
	padding: 1rem 0;
	margin-bottom: 1.5rem;
}
@media (min-width: 1024px) { .beau-shop__toolbar { margin-bottom: 2rem; } }


.beau-shop__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.8);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.2s;
}
.beau-shop__filter-toggle:hover { color: hsl(var(--beau-foreground)); }
.beau-shop__filter-toggle svg {
	width: 0.875rem;
	height: 0.875rem;
}
@media (min-width: 1024px) { .beau-shop__filter-toggle { display: none; } }

.beau-shop__chip-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	border-radius: 999px;
	font-size: 0.625rem;
	padding: 0.125rem 0.375rem;
	min-width: 1.1rem;
}
.beau-shop__chip-badge:empty { display: none; }

.beau-shop__toolbar-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
}
.beau-shop__btn-group {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.25rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.15);
	border-radius: 0.625rem;  /* v2: outer container rounded-md = 10px (inner tool-btns stay 5px) */
}
.beau-shop__btn-group:first-child {
	display: none;
}
@media (min-width: 640px) { .beau-shop__btn-group:first-child { display: flex; } }

.beau-shop__tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	border-radius: 5px;
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	line-height: 1;                             /* same vertical-center fix as page-btn / style-tab */
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.7);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.beau-shop__tool-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}
.beau-shop__tool-btn:hover { color: hsl(var(--beau-foreground)); }
.beau-shop__tool-btn.is-active {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
}
/* Single-digit grid buttons (2/3/4) — see feedback_letter_spacing_offcenter.
   Restricted to `data-view^="grid"` so icon+label buttons (LIJST, PAGINA'S,
   DOORLOPEND) keep their natural flex-start alignment. */
.beau-shop__tool-btn[data-view^="grid"] {
	justify-content: center;
	text-indent: 0.22em;
}

/* ── Main layout ─────────────────────────────────────────────────────────── */
.beau-shop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 1024px) {
	.beau-shop__layout {
		grid-template-columns: 260px 1fr;
		gap: 3rem;
	}
}
/* Filter-less variant — grid takes the full row on every breakpoint. */
.beau-shop__layout--no-aside,
.beau-shop__layout--no-aside.beau-shop__layout {
	grid-template-columns: 1fr;
}

/* ── Filter aside ────────────────────────────────────────────────────────── */
.beau-shop__aside {
	display: block;
}
@media (max-width: 1023px) {
	.beau-shop__aside.is-hidden { display: none; }
}

.beau-shop__filter-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.beau-shop__filter-title {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.65);
	margin: 0;
}
.beau-shop__reset-btn {
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--beau-accent));
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}
.beau-shop__reset-btn:hover { text-decoration: underline; }

/* Active filter chips */
.beau-shop__chips-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}
.beau-shop__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: background 0.15s;
}
.beau-shop__chip:hover { background: hsl(var(--beau-espresso) / 0.8); }
.beau-shop__chip svg { width: 0.75rem; height: 0.75rem; }

/* Filter facets */
.beau-shop__facets { display: flex; flex-direction: column; gap: 0; }

.beau-shop__facet {
	border-top: 1px solid hsl(var(--beau-foreground) / 0.1);
	padding-top: 1rem;
	margin-top: 1rem;
}
.beau-shop__facet-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.8);
	margin-bottom: 0.75rem;
	user-select: none;
}
.beau-shop__facet-summary::-webkit-details-marker { display: none; }
.beau-shop__facet-summary svg {
	width: 0.75rem;
	height: 0.75rem;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.beau-shop__facet[open] .beau-shop__facet-summary svg {
	transform: rotate(90deg);
}
.beau-shop__facet-opts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.beau-shop__facet-opt {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	color: hsl(var(--beau-foreground));
}
.beau-shop__facet-opt.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.beau-shop__facet-opt input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	border-radius: 0.25rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.3);
	accent-color: hsl(var(--beau-espresso));
	flex-shrink: 0;
	align-self: center;
	cursor: pointer;
}
.beau-shop__facet-opt-label { flex: 1; }
.beau-shop__facet-count {
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	color: hsl(var(--beau-foreground) / 0.4);
	tabular-nums: lining;
	font-variant-numeric: tabular-nums;
}

/* ── Product content area ─────────────────────────────────────────────────── */
.beau-shop__content { min-width: 0; }

/* Grid view */
.beau-shop__grid {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 1024px) { .beau-shop__grid { gap: 2rem; } }

.beau-shop__grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .beau-shop__grid--2 { grid-template-columns: repeat(2, 1fr); } }
.beau-shop__grid--3 {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.beau-shop__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.beau-shop__grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.beau-shop__grid--4 {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.beau-shop__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.beau-shop__grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
	.beau-shop__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Product card */
.beau-shop__card { min-width: 0; position: relative; }

.beau-shop__card-img-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem 0 1.5rem 0;
	text-decoration: none;
	aspect-ratio: 4 / 3;
	background: hsl(var(--beau-muted));
}
.beau-shop__card-img-wrap .beau-shop__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	/* `transform` lives here so the global `.beau-img-zoom` hover scale wins
	   the cascade — its base transition (0,1,0) is otherwise out-specified
	   by this rule (0,2,0). */
	transition: opacity 0.6s ease, filter 0.7s ease, transform 0.9s var(--beau-ease-out);
	filter: saturate(1.05) brightness(0.94) contrast(1.08);
}
.beau-shop.is-japandi .beau-shop__card-img {
	filter: saturate(0.78) brightness(1.06) contrast(0.96);
}
/* Hover flip — the product's second photo. Both <img> are real, preloaded
   elements stacked in the wrap, so the swap is a pure opacity crossfade:
   no src swap on hover, therefore no white flash. */
.beau-shop__card-img--hover {
	opacity: 0;
}
.beau-shop__card:hover .beau-shop__card-img--hover {
	opacity: 1;
}
.beau-shop__card-body {
	margin-top: 1rem;
}
.beau-shop__card-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}
body.breakdance h3.beau-shop__card-title,
.beau-shop__card-title {
	font-family: var(--beau-font-display);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	color: hsl(var(--beau-foreground));
	margin: 0;
}
@media (min-width: 1024px) {
	body.breakdance h3.beau-shop__card-title,
	.beau-shop__card-title { font-size: 1.125rem; }
}
.beau-shop__card-price {
	flex-shrink: 0;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.65);
	white-space: nowrap;
	padding-top: 0.125rem;
}
.beau-shop__card-price--req {
	color: hsl(var(--beau-accent));
}

/* Sale price + struck-through reg price (rendered by beau_product_price_html
   when both reg_price and sale_price are set). The group wrapper keeps the
   two spans together inside the flex row of `.beau-shop__card-row`. */
.beau-shop__card-price-group,
.beau-product-card-price-group {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.125rem;
	flex-shrink: 0;
}
.beau-shop__card-price-group .beau-shop__card-price,
.beau-product-card-price-group .beau-product-card-price {
	color: hsl(var(--beau-accent));
}
.beau-shop__card-price--was,
.beau-product-card-price--was {
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.45);
	text-decoration: line-through;
	white-space: nowrap;
}
.beau-shop__card-specs {
	margin: 0.25rem 0 0;
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.45);
}
/* Wishlist heart */
.beau-shop__card-wish {
	position: absolute;
	top: 0.6rem; right: 0.6rem;
	z-index: 3;
	width: 2rem; height: 2rem;
	border-radius: 50%;
	border: none;
	background: hsl(var(--beau-background) / 0.82);
	backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	color: hsl(var(--beau-foreground) / 0.45);
	opacity: 0;
	transition: color 0.2s, background 0.2s, transform 0.15s, opacity 0.2s;
	padding: 0;
}
.beau-shop__card:hover .beau-shop__card-wish { opacity: 1; }
.beau-shop__card-wish:hover {
	background: hsl(var(--beau-background));
	color: hsl(var(--beau-foreground) / 0.75);
	transform: scale(1.08);
}
.beau-shop__card-wish.is-active { color: hsl(var(--beau-accent)); opacity: 1; }
.beau-shop__card-wish.is-active svg { fill: currentColor; }
.beau-shop__card-wish svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

/* "Configureerbaar" badge — top-left of the card image, opposite the heart.
   Mirrors v2 CategoryPage.tsx ProductCard badge: espresso pill + cream text +
   sliders/cog icon. Sits above the image (z-index 3, same plane as the
   wishlist heart) but is non-interactive (pointer-events: none) so it never
   blocks the underlying card link. */
.beau-shop__card-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 0.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	pointer-events: none;
	box-shadow: 0 4px 12px -4px hsl(var(--beau-espresso) / 0.5);
}
.beau-shop__card-badge svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.beau-shop__card-badge--config {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
}

/* "Configureer deze X" CTA — full-width gold pill at the bottom of the card
   for products with a configurator URL. Sits below the price row, opens the
   URL in a new tab. */
body.breakdance a.beau-shop__card-configurator {
	margin-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 1rem;
	background: hsl(var(--beau-accent));
	color: hsl(var(--beau-espresso));
	border-radius: 0.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s var(--beau-ease-out);
	box-sizing: border-box;
}
body.breakdance a.beau-shop__card-configurator:hover {
	background: hsl(var(--beau-accent) / 0.85);
}
body.breakdance a.beau-shop__card-configurator svg {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

/* List view */
.beau-shop__list-inner {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid hsl(var(--beau-foreground) / 0.1);
}
.beau-shop__row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 0;
	border-bottom: 1px solid hsl(var(--beau-foreground) / 0.1);
}
@media (min-width: 640px) {
	.beau-shop__row {
		grid-template-columns: 160px 1fr auto;
		gap: 1.5rem;
	}
}
.beau-shop__row-aside {
	display: none;
}
@media (min-width: 640px) {
	.beau-shop__row-aside {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.75rem;
	}
}
.beau-shop__row-img-wrap {
	display: block;
	overflow: hidden;
	border-radius: 1.5rem 0 1.5rem 0;
	aspect-ratio: 4 / 3;
	background: hsl(var(--beau-muted));
	position: relative;
}
.beau-shop__row-img-wrap .beau-shop__row-img,
body.breakdance .beau-shop__row-img-wrap .beau-shop__row-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	display: block;
	filter: saturate(1.05) brightness(0.94) contrast(1.08);
	transition: filter 0.7s;
}
.beau-shop.is-japandi .beau-shop__row-img {
	filter: saturate(0.78) brightness(1.06) contrast(0.96);
}
body.breakdance h3.beau-shop__row-title,
.beau-shop__row-title {
	font-family: var(--beau-font-display);
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground));
	margin: 0 0 0.5rem;
}
.beau-shop__row-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.beau-shop__row-title a:hover { color: hsl(var(--beau-accent)); }
.beau-shop__row-specs {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.5);
	margin: 0 0 0.75rem;
}
.beau-shop__row-excerpt {
	font-size: 0.875rem;
	line-height: 1.6;
	color: hsl(var(--beau-foreground) / 0.65);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
a.beau-shop__row-link,
body.breakdance a.beau-shop__row-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s;
}
a.beau-shop__row-link:hover,
body.breakdance a.beau-shop__row-link:hover { background: hsl(var(--beau-espresso) / 0.8); color: hsl(var(--beau-cream)); }

/* Price in list row */
.beau-shop__row-price {
	font-family: var(--beau-font-secondary);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground));
	white-space: nowrap;
}
.beau-shop__row-price--req { color: hsl(var(--beau-accent)); }

/* Empty state */
.beau-shop__empty {
	color: hsl(var(--beau-foreground) / 0.6);
	font-size: 0.9375rem;
	line-height: 1.65;
	padding: 3rem 0;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.beau-shop__pagination {
	margin-top: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.beau-shop__page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.625rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.2);
	/* 10px — matches v2 Tailwind rounded-md (calc(0.75rem - 2px)) */
	border-radius: 0.625rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	line-height: 1;                             /* uppercase glyphs sit top-heavy without this */
	/* `letter-spacing` adds trailing space after the last glyph, shifting the
	   text visually left inside the centred flex box. `text-indent` of the
	   same magnitude pushes the line back so single-char buttons ("1","2"…)
	   sit truly centred. */
	text-indent: 0.18em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--beau-foreground));
	background: transparent;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.beau-shop__page-btn:hover:not(:disabled):not(.is-active) {
	background: hsl(var(--beau-foreground) / 0.05);
	border-color: hsl(var(--beau-foreground) / 0.4);
}
.beau-shop__page-btn.is-active {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	border-color: hsl(var(--beau-espresso));
	cursor: default;
}
/* Prev/Next nav buttons share the same radius as the page-number buttons */
.beau-shop__page-btn--nav { border-radius: 0.625rem; }

/* Breakdance global typography injects -webkit-text-fill-color:transparent for gradient text.
   Reset on every descendant so our color rules actually take effect. */
body.breakdance .beau-shop *,
body.breakdance .beau-product *,
body.breakdance .beau-wl-page * {
	-webkit-text-fill-color: currentColor;
}

/* Wishlist card text alignment — Breakdance element may inject text-align:center */
.beau-wl-page .beau-shop__card-body,
.beau-wl-page .beau-shop__card-row,
.beau-wl-page .beau-shop__card-title,
.beau-wl-page .beau-shop__card-specs,
body.breakdance .beau-wl-page .beau-shop__card-body,
body.breakdance .beau-wl-page .beau-shop__card-title,
body.breakdance .beau-wl-page .beau-shop__card-specs {
	text-align: left;
}
.beau-shop__page-btn--nav {
	min-width: auto;
	padding: 0 1rem;
	letter-spacing: 0.2em;
}
.beau-shop__page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.beau-shop__page-ellipsis {
	color: hsl(var(--beau-foreground) / 0.4);
	padding: 0 0.25rem;
	font-family: var(--beau-font-secondary);
}

/* ── Infinite scroll sentinel ─────────────────────────────────────────────── */
.beau-shop__sentinel {
	margin-top: 3rem;
	text-align: center;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.45);
}

/* ── Loading state ────────────────────────────────────────────────────────── */
.beau-shop.is-loading #bs-grid {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* ── Header: force scrolled/light appearance on pages without a hero ──────── */
/* The nav starts transparent (designed for hero pages). On shop/product
   pages there is no hero, so we force the is-scrolled light state always. */
body.beau-shop-page .beau-nav,
body.beau-product-page .beau-nav,
body.beau-shop-page .beau-nav.is-scrolled,
body.beau-product-page .beau-nav.is-scrolled {
	background: hsl(var(--beau-background) / 0.97);
	backdrop-filter: blur(20px);
	color: hsl(var(--beau-foreground));
	border-bottom-color: hsl(var(--beau-border) / 0.4);
	--nav-chip-color: hsl(var(--beau-foreground) / 0.85);
	--nav-chip-border: hsl(var(--beau-foreground) / 0.25);
	--nav-chip-hover-bg: hsl(var(--beau-foreground) / 0.05);
	--nav-icon-color: hsl(var(--beau-foreground) / 0.7);
}


/* ========================================================================
   Beau Home — Single product page v2
   Matches React ProductPage.tsx layout with section-level backgrounds,
   wave transitions, 3-col hero, accent customizer cards, champagne specs.
   ======================================================================== */

/* ── Wave divider (copied from WaveDivider element — not loaded via BD on product pages) */
.beau-wave {
	display: block; width: 100%; pointer-events: none;
	margin-top: -1px; margin-bottom: -1px; line-height: 0;
	background: inherit;
}
.beau-wave__inner { width: 100%; background: inherit; }
.beau-wave__inner svg { display: block; width: 100%; height: 2.5rem; }
@media (min-width: 768px)  { .beau-wave__inner svg { height: 3.5rem; } }
@media (min-width: 1024px) { .beau-wave__inner svg { height: 4rem; } }

/* ── Container helper for each section ─────────────────────────────────────── */
/* Uses .beau-container from tokens.css (max-width: 1440px, padding-inline: 1.5/2.5/4rem) */

/* -- Breadcrumb ------------------------------------------------------------ */
.beau-product__crumb {
	display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.5);
	margin-bottom: 2.5rem;
	min-width: 0;
}
a.beau-product__crumb-link,
body.breakdance a.beau-product__crumb-link {
	color: hsl(var(--beau-foreground) / 0.5); text-decoration: none; transition: color 0.2s;
	white-space: nowrap;
}
a.beau-product__crumb-link:hover,
body.breakdance a.beau-product__crumb-link:hover { color: hsl(var(--beau-accent)); }
.beau-product__crumb-sep { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
/* Current item — only this one shrinks + truncates so the breadcrumb stays on
   a single line. flex-grow 1 fills available space; overflow ellipsis trims
   long product names like "Modulaire Hoekbank Amsterdam". */
.beau-product__crumb-current {
	color: hsl(var(--beau-foreground));
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Hero: muted bg, 3-col grid ─────────────────────────────────────────────── */
.beau-product {
	background: hsl(var(--beau-muted));
	padding-top: 8.75rem;
	padding-bottom: 4rem;
	min-height: 0;
}
.beau-product__hero {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 0;
	margin-top: 3rem;
}
@media (min-width: 1024px) {
	.beau-product__hero {
		grid-template-columns: 1fr 140px minmax(340px, 420px);
		gap: 2rem;
		align-items: start;
	}
}
.beau-product__hero > * { min-width: 0; }

/* Main image: 4:5 aspect ratio.
   Aspect lives on the WRAPPER (proven pattern used by .beau-shop__card-img-wrap);
   the <img> fills it absolutely. This is more deterministic than setting
   aspect-ratio on the <img> directly, because some browsers honour the image's
   intrinsic width/height attributes before the explicit aspect-ratio rule
   when the img is the box owner. */
.beau-product__hero-image {
	position: relative;
	overflow: hidden;
	border-radius: 2rem 0 2rem 0;
	background: hsl(var(--beau-background));
	aspect-ratio: 4 / 3;
}
.beau-product__main-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	filter: saturate(1.05) brightness(0.94) contrast(1.08);
}
/* Slow zoom on hover is provided by the shared `.beau-img-zoom` /
   `.beau-img-zoom-parent` utility (see tokens.css) — applied to wrapper + img
   on this hero AND on the intro/specs/showroom images so the effect is
   consistent across every content image inside a product page. */

/* Thumbnail column */
.beau-product__thumbs {
	display: none;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 1024px) { .beau-product__thumbs { display: flex; } }
.beau-product__thumb {
	position: relative;
	overflow: hidden;
	border-radius: 0.75rem 0 0.75rem 0;
	aspect-ratio: 4 / 3;
	background: hsl(var(--beau-background));
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.2s;
}
.beau-product__thumb:not(.is-active) { opacity: 0.7; }
.beau-product__thumb:hover { opacity: 1; }
.beau-product__thumb.is-active { border-color: hsl(var(--beau-accent)); opacity: 1; }
.beau-product__thumb-inner {
	display: block; position: absolute; inset: 0;
}
.beau-product__thumb-inner img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Info column */
.beau-product__info {
	display: flex; flex-direction: column; gap: 0;
}
@media (min-width: 1024px) {
	.beau-product__info { position: sticky; top: 6rem; }
}

/* Title */
body.breakdance h1.beau-product__title,
.beau-product__title {
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;        /* v2: ProductPage.tsx line 136 */
	/* Explicit foreground token so the title flips with dark mode — without
	   it the heading inherited a non-flipping color and stayed dark. */
	color: hsl(var(--beau-foreground));
	margin-top: 0;
	padding-top: 0;
}

/* Price with display font — v2 has only mt-2 between title and price */
.beau-product__price-wrap { margin-top: 0.5rem; }
.beau-product__price {
	font-family: var(--beau-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	letter-spacing: 0.01em;
	color: hsl(var(--beau-foreground));
	margin: 0;
}
/* Sale: new price (accent) + struck-through original.
   Group is inline-flex so the two values sit on one line; on small viewports
   the wrap keeps them readable. */
.beau-product__price-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
}
.beau-product__price-now {
	font-family: var(--beau-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	color: hsl(var(--beau-accent));
}
.beau-product__price-was {
	font-family: var(--beau-font-secondary);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: hsl(var(--beau-foreground) / 0.5);
	text-decoration: line-through;
	white-space: nowrap;
}
.beau-product__price-sub {
	margin-top: 0.35rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.5);
}

/* Separator */
.beau-product__divider {
	height: 1px;
	background: hsl(var(--beau-foreground) / 0.12);
	border: none;
	margin: 2rem 0;
}

/* Size buttons */
.beau-product__sizes { margin-bottom: 1.75rem; }
.beau-product__sizes-label {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.7);
	margin: 0 0 0.75rem;
}
.beau-product__sizes-grid {
	display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0;
}
.beau-product__size-btn,
body.breakdance .beau-product__size-btn {
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
	padding: 0.625rem 1rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.22);
	border-radius: var(--beau-r-sm);
	background: transparent;
	color: hsl(var(--beau-foreground) / 0.7);
	cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.beau-product__size-btn:hover {
	border-color: hsl(var(--beau-foreground) / 0.5);
	color: hsl(var(--beau-foreground));
}
.beau-product__size-btn.is-active {
	background: hsl(var(--beau-foreground));
	border-color: hsl(var(--beau-foreground));
	color: hsl(var(--beau-background));
}


/* Fabric swatches */
.beau-product__stof { margin-bottom: 0; }
.beau-product__stof-label {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.7);
	margin: 0 0 0.75rem;
}
.beau-product__swatches-row { display: flex; align-items: center; gap: 1rem; }
.beau-product__swatches { display: flex; }
.beau-product__swatch {
	width: 2rem; height: 2rem; border-radius: 50%;
	border: 2px solid hsl(var(--beau-background));
	margin-left: -0.5rem; cursor: pointer;
	transition: transform 0.15s;
}
.beau-product__swatch:first-child { margin-left: 0; }
.beau-product__swatch:hover { transform: scale(1.15); }
.beau-product__swatches-hint {
	font-size: 0.875rem; color: hsl(var(--beau-foreground) / 0.5);
}

/* CTAs */

/* CTAs */
.beau-product__ctas {
	display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem;
}
a.beau-product__cta-primary,
button.beau-product__cta-primary,
body.breakdance a.beau-product__cta-primary,
body.breakdance button.beau-product__cta-primary,
body.breakdance #beau-product a.beau-product__cta-primary,
body.breakdance #beau-product button.beau-product__cta-primary,
a.beau-product__cta-secondary,
button.beau-product__cta-secondary,
body.breakdance a.beau-product__cta-secondary,
body.breakdance button.beau-product__cta-secondary,
body.breakdance #beau-product a.beau-product__cta-secondary,
body.breakdance #beau-product button.beau-product__cta-secondary,
a.beau-product__cta-configurator,
body.breakdance a.beau-product__cta-configurator,
body.breakdance #beau-product a.beau-product__cta-configurator {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	width: 100%; text-decoration: none;
	border-radius: 0.625rem;  /* v2: rounded-md = calc(0.75rem - 2px) = 10px */
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
	padding: 1.1rem 1.5rem; transition: background 0.2s, color 0.2s;
	border: none; cursor: pointer;
}
a.beau-product__cta-configurator,
body.breakdance a.beau-product__cta-configurator {
	background: hsl(var(--beau-espresso));
	/* `--beau-cream` is theme-agnostic (never flipped in [data-theme="dark"]);
	   keeps cream-on-espresso contrast in both light and dark modes. */
	color: hsl(var(--beau-cream));
}
a.beau-product__cta-configurator:hover,
body.breakdance a.beau-product__cta-configurator:hover {
	background: hsl(var(--beau-espresso) / 0.88);
	color: hsl(var(--beau-cream));
}
a.beau-product__cta-primary,
button.beau-product__cta-primary,
body.breakdance a.beau-product__cta-primary,
body.breakdance button.beau-product__cta-primary {
	background: hsl(var(--beau-accent));
	color: hsl(var(--beau-espresso));
}
a.beau-product__cta-primary:hover,
button.beau-product__cta-primary:hover,
body.breakdance a.beau-product__cta-primary:hover,
body.breakdance button.beau-product__cta-primary:hover {
	background: hsl(var(--beau-accent) / 0.85);
	color: hsl(var(--beau-espresso));
}
a.beau-product__cta-secondary,
button.beau-product__cta-secondary,
body.breakdance a.beau-product__cta-secondary,
body.breakdance button.beau-product__cta-secondary {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
}
a.beau-product__cta-secondary:hover,
button.beau-product__cta-secondary:hover,
body.breakdance a.beau-product__cta-secondary:hover,
body.breakdance button.beau-product__cta-secondary:hover {
	background: hsl(var(--beau-sand));
	color: hsl(var(--beau-espresso));
}
button.beau-product__cta-secondary.is-active,
body.breakdance button.beau-product__cta-secondary.is-active {
	background: hsl(var(--beau-espresso));
	/* `--beau-cream` is theme-agnostic (never flipped in [data-theme="dark"]);
	   `--beau-background` flips to espresso in dark mode, making the label
	   invisible on its own espresso button bg. */
	color: hsl(var(--beau-cream));
}

/* Feature badges */
.beau-product__badges {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.beau-product__badge {
	display: flex; align-items: center; gap: 0.625rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.15);
	border-radius: 0.625rem;  /* v2: rounded-md = 10px */
	padding: 0.875rem 0.875rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.8);
	min-height: 3.25rem;
}
.beau-product__badge svg {
	width: 0.75rem; height: 0.75rem;
	color: hsl(var(--beau-accent)); flex-shrink: 0;
}

/* Share row */
.beau-product__share-row {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
	margin-top: 1.75rem;
}
.beau-product__share-label {
	font-family: var(--beau-font-secondary);
	font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.45); margin-right: 0.25rem;
}
/* WhatsApp share — accent-tinted prominent button, matches v2:
   bg-accent/15, border-accent/30, text uppercase. On mobile collapses to
   icon-only square so the full share row fits on one line. */
a.beau-product__share-wa,
body.breakdance a.beau-product__share-wa {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	height: 2.25rem;
	background: hsl(var(--beau-accent) / 0.15);
	border: 1px solid hsl(var(--beau-accent) / 0.3);
	border-radius: 0.5rem;
	padding: 0 0.9rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: hsl(var(--beau-foreground)); text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
	box-sizing: border-box;
}
a.beau-product__share-wa svg { width: 1rem; height: 1rem; flex-shrink: 0; }
a.beau-product__share-wa:hover,
body.breakdance a.beau-product__share-wa:hover {
	background: hsl(var(--beau-accent) / 0.25);
	border-color: hsl(var(--beau-accent) / 0.45);
}
/* Mobile: drop the "WhatsApp" label so the row fits 6 items wide. */
@media (max-width: 640px) {
	a.beau-product__share-wa,
	body.breakdance a.beau-product__share-wa {
		width: 2.25rem;
		padding: 0;
	}
	.beau-product__share-wa-label { display: none; }
}
a.beau-product__share-btn,
button.beau-product__share-btn,
body.breakdance a.beau-product__share-btn,
body.breakdance button.beau-product__share-btn {
	width: 2.25rem; height: 2.25rem;
	border-radius: 0.625rem;  /* v2: rounded-md = 10px */
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid hsl(var(--beau-foreground) / 0.18);
	background: transparent; color: hsl(var(--beau-foreground) / 0.55);
	cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s;
	padding: 0; flex-shrink: 0;
}
a.beau-product__share-btn:hover,
button.beau-product__share-btn:hover,
body.breakdance a.beau-product__share-btn:hover,
body.breakdance button.beau-product__share-btn:hover {
	background: hsl(var(--beau-foreground) / 0.07);
	color: hsl(var(--beau-foreground));
}
.beau-product__share-btn svg { width: 0.875rem; height: 0.875rem; }
/* ── Intro section ─────────────────────────────────────────────────────────── */
.beau-product__intro {
	background: hsl(var(--beau-muted));
	padding: 5rem 0;
	border-top: none; border-bottom: none; margin-bottom: 0;
}
.beau-product__intro .beau-product__intro-inner {
	display: grid; gap: 3rem; align-items: end;
	max-width: var(--beau-container-max); margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.beau-product__intro .beau-product__intro-inner { padding-inline: 2.5rem; }
}
@media (min-width: 1024px) {
	.beau-product__intro .beau-product__intro-inner {
		grid-template-columns: 1fr minmax(280px, 360px);
		gap: 5rem; padding-inline: 4rem;
	}
}
.beau-trl-line { display: block; }

/* Hotel Chique <-> Japandi style toggle — crossfade the swapped card images
   instead of a hard src swap (JS sets opacity 0 -> swaps -> opacity 1). */
img[data-hotel-src] { transition: opacity .4s ease; }

/* Products with no image at all: drop the empty image column so the quote
   spans the full width instead of leaving a broken gap on the right. */
.beau-product__intro .beau-product__intro-inner--no-image {
	grid-template-columns: 1fr;
}

.beau-product__quote {
	font-family: var(--beau-font-primary);
	font-size: 1rem;
	line-height: 1.65;
	color: hsl(var(--beau-foreground));
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.beau-product__quote > * { margin: 0; }
.beau-product__quote p { font-size: 1rem; line-height: 1.65; }
.beau-product__quote ul,
.beau-product__quote ol { padding-left: 1.5em; }
.beau-product__quote li + li { margin-top: 0.25rem; }
/* body.breakdance prefix needed to win against BD's global `.breakdance hN`
   rules (0,1,1) which beat plain class selectors at equal specificity. */
.beau-product__quote h1,
.beau-product__quote h2,
.beau-product__quote h3,
.beau-product__quote h4,
.beau-product__quote h5,
.beau-product__quote h6,
body.breakdance .beau-product__quote h1,
body.breakdance .beau-product__quote h2,
body.breakdance .beau-product__quote h3,
body.breakdance .beau-product__quote h4,
body.breakdance .beau-product__quote h5,
body.breakdance .beau-product__quote h6 {
	font-family: var(--beau-font-display);
	color: hsl(var(--beau-foreground));
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin: 0;
	font-weight: 600;
}
.beau-product__quote h1, body.breakdance .beau-product__quote h1 { font-size: 1.875rem; }
.beau-product__quote h2, body.breakdance .beau-product__quote h2 { font-size: 1.5rem; }
.beau-product__quote h3, body.breakdance .beau-product__quote h3 { font-size: 1.25rem; }
.beau-product__quote h4, body.breakdance .beau-product__quote h4 { font-size: 1.125rem; }
.beau-product__quote h5, body.breakdance .beau-product__quote h5 { font-size: 1rem; }
.beau-product__quote h6, body.breakdance .beau-product__quote h6 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.1em; }
.beau-product__style-tags {
	list-style: none; margin: 3rem 0 0; padding: 0; max-width: 28rem;
}
@media (min-width: 1024px) { .beau-product__style-tags { margin-top: 5rem; } }
/* v2: each <li> is `border-t pt-4`, items spaced by `space-y-5` (1.25rem). */
.beau-product__style-tag {
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid hsl(var(--beau-foreground) / 0.15);
	padding-top: 1rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase;
	color: hsl(var(--beau-foreground) / 0.8);
}
.beau-product__style-tag + .beau-product__style-tag { margin-top: 1.25rem; }
.beau-product__style-tag svg {
	width: 0.875rem; height: 0.875rem;
	color: hsl(var(--beau-foreground) / 0.4); flex-shrink: 0;
}
.beau-product__intro-image {
	overflow: hidden; border-radius: 2rem 0 2rem 0;
}
.beau-product__intro-img {
	display: block; width: 100%;
	aspect-ratio: 4 / 5; object-fit: cover;
	filter: saturate(1.05) brightness(0.94) contrast(1.08);
}

/* ── Customizer section ─────────────────────────────────────────────────────── */
.beau-product__customizer {
	background: hsl(var(--beau-muted));
	padding: 4rem 0 5rem;
	text-align: left; margin-bottom: 0;
}
.beau-product__cust-hd {
	display: grid; gap: 2rem; margin-bottom: 3rem; align-items: start;
}
@media (min-width: 1024px) {
	.beau-product__cust-hd { grid-template-columns: 1fr minmax(280px, 380px); }
}
.beau-product__cust-desc {
	font-size: 0.9375rem; line-height: 1.65;
	color: hsl(var(--beau-foreground) / 0.65); margin: 0;
	/* Visually top-align with the H2's first cap-line. The H2 uses a
	   display serif at large size — its line-box top sits well above the
	   visual cap, while a 0.9375rem paragraph at line-height 1.65 hugs
	   its first cap closely. Pushing the paragraph down compensates. */
	padding-top: 0.4em;
}
@media (min-width: 1024px) {
	.beau-product__cust-desc { padding-top: 0.9em; }
}
/* Reset H2's intrinsic top so it actually starts at the grid row top —
   BD's body.breakdance h-defaults can leak a margin-top in. */
body.breakdance .beau-product__customizer .beau-product__section-title,
.beau-product__customizer .beau-product__section-title {
	margin-top: 0;
}
.beau-product__customizer-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
@media (min-width: 1024px) {
	.beau-product__customizer-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.beau-product__custom-card {
	background: hsl(var(--beau-accent));
	color: hsl(var(--beau-espresso));
	border-radius: 2rem 0 2rem 0;
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: 0.75rem;
	text-align: left;
}
@media (min-width: 1024px) {
	.beau-product__custom-card { padding: 2rem; }
}
.beau-product__custom-icon { display: none; }
body.breakdance h3.beau-product__custom-title,
.beau-product__custom-title {
	/* v2: font-display, uppercase, text-xl lg:text-2xl, tracking-[0.02em] */
	font-family: var(--beau-font-display);
	font-weight: 400;
	color: hsl(var(--beau-espresso));
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
}
@media (min-width: 1024px) {
	body.breakdance h3.beau-product__custom-title,
	.beau-product__custom-title { font-size: 1.5rem; }
}
.beau-product__custom-desc { color: hsl(var(--beau-espresso) / 0.75); margin: 0; }

/* ── Specs section (champagne bg) ──────────────────────────────────────────── */
.beau-product__specs {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
	padding: 5rem 0; margin-bottom: 0;
}
.beau-product__specs .beau-container {
	display: grid; gap: 4rem; align-items: start;
}
@media (min-width: 1024px) {
	.beau-product__specs .beau-container { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
body.breakdance h2.beau-product__section-title,
.beau-product__specs .beau-product__section-title {
	font-family: var(--beau-font-display);
	font-weight: 400; text-align: left; margin-bottom: 1.5rem;
	color: hsl(var(--beau-espresso));
	font-size: clamp(2.5rem, 4vw, 4rem);
	letter-spacing: 0.01em; line-height: 1.02; text-transform: uppercase;
}

/* Spec tabs */
.beau-product__spec-tabs {
	display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem;
}
.beau-product__spec-tab {
	padding: 0.75rem 1.25rem; border-radius: 0.375rem;
	border: 1px solid hsl(var(--beau-espresso) / 0.3);
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: hsl(var(--beau-espresso) / 0.8); background: transparent;
	cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.beau-product__spec-tab.is-active {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	border-color: hsl(var(--beau-espresso));
}
.beau-product__spec-panel { display: none; }
.beau-product__spec-panel.is-active { display: block; }
.beau-product__spec-dl {
	border-top: 1px solid hsl(var(--beau-espresso) / 0.18);
}
.beau-product__spec-row {
	display: grid; grid-template-columns: 9rem 1fr;
	gap: 1.5rem; padding: 1rem 0;
	border-bottom: 1px solid hsl(var(--beau-espresso) / 0.12);
}
.beau-product__spec-dt {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: hsl(var(--beau-espresso) / 0.5);
}
.beau-product__spec-dd { font-size: 0.9375rem; color: hsl(var(--beau-espresso) / 0.85); }
a.beau-product__specs-cta,
button.beau-product__specs-cta,
body.breakdance a.beau-product__specs-cta {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: hsl(var(--beau-espresso)); color: hsl(var(--beau-cream));
	padding: 0.875rem 1.5rem; border-radius: 0.375rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
	text-decoration: none; margin-top: 2.5rem; transition: opacity 0.2s;
}
a.beau-product__specs-cta:hover,
button.beau-product__specs-cta:hover,
body.breakdance a.beau-product__specs-cta:hover { opacity: 0.88; color: hsl(var(--beau-cream)); }
button.beau-product__specs-cta { border: none; cursor: pointer; font-family: var(--beau-font-secondary); }
.beau-product__specs-image {
	overflow: hidden; border-radius: 2rem 0 2rem 0;
}
.beau-product__specs-img {
	display: block; width: 100%;
	aspect-ratio: 4 / 5; object-fit: cover;
}

/* ── Showroom CTA (accent bg, 2-col) ───────────────────────────────────────── */
.beau-product__showroom {
	background: hsl(var(--beau-accent));
	color: hsl(var(--beau-espresso));
	border-radius: 0; padding: 5rem 0; margin-bottom: 0;
}
.beau-product__showroom .beau-container {
	display: grid; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) {
	.beau-product__showroom .beau-container { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.beau-product__showroom-image {
	overflow: hidden; border-radius: 2rem 0 2rem 0;
}
.beau-product__showroom-img {
	/* v2: roughly square — w-full h-[420px] lg:h-[560px] in a half-width col. */
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
.beau-product__showroom-eyebrow { display: none; }
.beau-product__showroom-title {
	/* v2: font-display, uppercase, text-4xl md:text-5xl lg:text-6xl */
	font-family: var(--beau-font-display);
	font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	text-transform: uppercase; color: hsl(var(--beau-espresso));
	letter-spacing: 0.01em; line-height: 1.02; margin: 0;
}
.beau-product__showroom-text {
	color: hsl(var(--beau-espresso) / 0.75);
	margin: 2rem 0; max-width: 28rem; line-height: 1.65;
}
a.beau-product__showroom-btn,
button.beau-product__showroom-btn,
body.breakdance a.beau-product__showroom-btn,
body.breakdance button.beau-product__showroom-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: hsl(var(--beau-espresso)); color: hsl(var(--beau-cream));
	padding: 0.875rem 1.5rem; border-radius: 0.375rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
	text-decoration: none; transition: opacity 0.2s; border: none; cursor: pointer;
}
a.beau-product__showroom-btn:hover,
button.beau-product__showroom-btn:hover,
body.breakdance a.beau-product__showroom-btn:hover,
body.breakdance button.beau-product__showroom-btn:hover { opacity: 0.88; color: hsl(var(--beau-cream)); }

/* ── Questions (muted bg, 3-col) ───────────────────────────────────────────── */
.beau-product__questions {
	background: hsl(var(--beau-muted));
	padding: 5rem 0; margin-bottom: 0; text-align: left;
}
.beau-product__q-grid {
	display: grid; gap: 2rem;
}
@media (min-width: 1024px) {
	.beau-product__q-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
}
.beau-product__q-intro { display: flex; flex-direction: column; gap: 1.5rem; }
.beau-product__q-title {
	font-family: var(--beau-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.5rem);
	text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
	color: hsl(var(--beau-foreground)); margin: 0;
}
.beau-product__q-text {
	font-size: 0.9375rem; line-height: 1.65;
	color: hsl(var(--beau-foreground) / 0.6); max-width: 20rem; margin: 0;
}
.beau-product__contact-card {
	display: flex; flex-direction: column; justify-content: space-between;
	background: hsl(var(--beau-accent)); color: hsl(var(--beau-espresso));
	border-radius: 2rem 0 2rem 0;
	padding: 2.5rem 2rem; min-height: 180px;
	text-decoration: none; transition: opacity 0.2s;
}
.beau-product__contact-card:hover { opacity: 0.88; color: hsl(var(--beau-espresso)); }
.beau-product__contact-label {
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
	color: hsl(var(--beau-espresso) / 0.65);
}
.beau-product__contact-value {
	font-family: var(--beau-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 400; line-height: 1.1; word-break: break-all;
}

/* Closing tagline */
/* Product-page heading colors, by the surface each one sits on:
   - hero (.beau-product), customizer and the closing section all sit on
     --beau-muted, which FLIPS with dark mode → use --beau-foreground.
   - specs sits on --beau-champagne and showroom on --beau-accent — both are
     FIXED light surfaces that never flip → keep --beau-espresso.
   body.breakdance #beau-product prefix is needed to beat BD's heading defaults. */
body.breakdance #beau-product .beau-product__title,
body.breakdance #beau-product .beau-product__q-title,
body.breakdance #beau-product .beau-product__tagline,
body.breakdance #beau-product .beau-product__customizer .beau-product__section-title {
	color: hsl(var(--beau-foreground));
}
body.breakdance #beau-product .beau-product__specs .beau-product__section-title,
body.breakdance #beau-product .beau-product__showroom-title {
	color: hsl(var(--beau-espresso));
}

.beau-product__closing { margin-top: 5rem; text-align: center; }
/* body.breakdance #beau-product prefix: the plain `.beau-product__tagline`
   (0,1,0) lost the font-size to a higher-specificity heading default, leaving
   the closing line tiny. This forces the oversized display size. */
body.breakdance #beau-product .beau-product__tagline,
.beau-product__tagline {
	font-family: var(--beau-font-display); font-weight: 400;
	font-size: 12vw; line-height: 0.95;
	text-transform: uppercase; letter-spacing: 0.01em;
	color: hsl(var(--beau-foreground)); margin: 0 0 2.5rem;
}
@media (min-width: 1024px) {
	body.breakdance #beau-product .beau-product__tagline,
	.beau-product__tagline { font-size: 8vw; }
}
a.beau-product__closing-cta,
button.beau-product__closing-cta,
body.breakdance a.beau-product__closing-cta {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: hsl(var(--beau-accent)); color: hsl(var(--beau-espresso));
	padding: 0.875rem 1.5rem; border-radius: 0.375rem;
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
	text-decoration: none; transition: opacity 0.2s;
}
a.beau-product__closing-cta:hover,
button.beau-product__closing-cta:hover,
body.breakdance a.beau-product__closing-cta:hover { opacity: 0.88; color: hsl(var(--beau-espresso)); }
button.beau-product__closing-cta { border: none; cursor: pointer; font-family: var(--beau-font-secondary); }
/* Arrow nudge on hover — same behaviour as the global .beau-btn arrow. */
a.beau-product__closing-cta svg,
button.beau-product__closing-cta svg {
	transition: transform .35s var(--beau-ease-out);
}
a.beau-product__closing-cta:hover svg,
button.beau-product__closing-cta:hover svg {
	transform: translateX(4px);
}




/* Product lead paragraph between price and size selector — v2 ProductPage.tsx
   line 161-165. NOTE: renamed from `.beau-product__intro` — that class name
   collided with the full-width `<section class="beau-product__intro">` (the
   quote section), and this rule's `max-width: 32rem` was leaking onto the
   section and squashing it to 512px. */
.beau-product__lead {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: hsl(var(--beau-foreground) / 0.85);
	max-width: 32rem;
}

/* ========================================================================
   Single-product layout — moved here from the inline <style> block that
   used to live in woocommerce/single-product.php. Scoped under #beau-product
   (the page wrapper id) so the ID specificity wins over the class rules above.
   ======================================================================== */

/* ── Hero grid: image LEFT, thumbs MIDDLE, info RIGHT ── */
@media (min-width: 1024px) {
	#beau-product .beau-product__hero {
		display: grid;
		grid-template-columns: 1fr 140px minmax(340px, 420px);
		gap: 2rem;
		align-items: start;
		margin-top: 3rem;
	}
}
#beau-product .beau-product__hero > * { min-width: 0; }

/* Title flush to top — remove default h1 margin */
#beau-product h1.beau-product__title,
#beau-product .beau-product__title { margin-top: 0; padding-top: 0; }

/* Thumbnail strip — vertical 140px column on desktop, horizontal swipeable
   slider on mobile (better UX than the previous unconditional vertical stack
   that pushed product info way down the page). */
#beau-product .beau-product__thumbs {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
	margin-top: 0.5rem;
	/* Edge-fade hint: visually softens the right edge so users see the strip is scrollable.
	   Falls back to nothing on browsers without mask-image support. */
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
}
#beau-product .beau-product__thumbs::-webkit-scrollbar { display: none; }
#beau-product .beau-product__thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	width: 96px;
	flex-shrink: 0;
	scroll-snap-align: start;
}
#beau-product .beau-product__thumb-inner { display: block; position: absolute; inset: 0; }
#beau-product .beau-product__thumb-inner img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
	#beau-product .beau-product__thumbs {
		flex-direction: column;
		gap: 0.75rem;
		overflow: visible;
		scroll-snap-type: none;
		margin-top: 0;
		padding-bottom: 0;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	#beau-product .beau-product__thumb { width: auto; }
}

/* Sticky info */
@media (min-width: 1024px) {
	#beau-product .beau-product__info { position: sticky; top: 6rem; }
}

/* CTAs */
#beau-product .beau-product__ctas { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem; }
#beau-product a.beau-product__cta-primary,
#beau-product a.beau-product__cta-secondary,
#beau-product a.beau-product__cta-configurator,
#beau-product button.beau-product__cta-primary,
#beau-product button.beau-product__cta-secondary {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	width: 100%; text-decoration: none; border-radius: var(--beau-r-md);
	font-family: var(--beau-font-secondary);
	font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
	padding: 1.1rem 1.5rem; transition: background 0.2s, color 0.2s;
	border: none; cursor: pointer;
}

/* Size buttons */
#beau-product .beau-product__sizes-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#beau-product .beau-product__size-btn {
	font-family: var(--beau-font-secondary);
	font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
	padding: 0.625rem 1rem;
	border: 1px solid hsl(var(--beau-foreground) / 0.22);
	border-radius: 0.375rem; background: transparent;
	color: hsl(var(--beau-foreground) / 0.7);
	cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
#beau-product .beau-product__size-btn.is-active {
	background: hsl(var(--beau-foreground));
	border-color: hsl(var(--beau-foreground));
	color: hsl(var(--beau-background));
}

/* Share row */
#beau-product .beau-product__share-row {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 0.5rem; margin-top: 1.75rem;
}