/**
 * Preset PDP V2 — single-product styles.
 *
 * Slot structure (Vault/02 Plugin (wc-collage-builder)/Preset PDP V2 Scope.md §5):
 *   crumbs · hero (lifestyle + sticky info column) · story · gallery · faq · related
 *
 * Phase B ships the hero + info panel rules here. Phase C adds .wh-pdp__story,
 * .wh-pdp__gallery, .wh-pdp__faq, .wh-pdp__related blocks.
 *
 * All values reference V2 tokens. No raw hex outside fallback (audit-clean).
 */

/* ---------- Page chrome ---------- */
body.wh-product {
	background: var(--bg);
	color: var(--ink);
}

/* ---------- Breadcrumbs ---------- */
.wh-pdp__crumbs {
	padding: clamp(var(--s-5), 3vw, var(--s-40)) 0 clamp(var(--s-2), 1vw, var(--s-4));
}
.wh-pdp__crumbs-inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}

/* ---------- Hero ---------- */
.wh-pdp__hero {
	padding: clamp(var(--s-4), 2vw, var(--s-6)) 0 clamp(var(--s-7), 6vw, var(--s-9));
}
.wh-pdp__hero-inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: 0 var(--page-pad);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(var(--s-6), 4vw, 80px);
	align-items: start;
}
@media (max-width: 1023px) {
	.wh-pdp__hero-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (min-width: 1680px) {
	.wh-pdp__hero-inner { gap: var(--s-9); }
}

/* ---------- Hero image ---------- */
.wh-pdp__hero-img {
	background: var(--surface-product-fallback, #C4C0B8);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
}
.wh-pdp__hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wh-pdp__hero-img--placeholder {
	display: grid;
	place-items: center;
	color: var(--bg);
	opacity: .55;
}

/* ---------- Info column (sticky on desktop) ---------- */
.wh-pdp__info {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--s-20);
	min-width: 0;
}
@media (max-width: 1023px) {
	.wh-pdp__info { position: static; top: auto; }
}

.wh-pdp__overline {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}

.wh-pdp__h1 {
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.0;
	letter-spacing: -0.030em;
	font-weight: 400;
	margin: 0;
	color: var(--ink);
}
.wh-pdp__h1 em { font-style: italic; font-weight: 400; }

.wh-pdp__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-muted);
	margin: 0;
}
.wh-pdp__price-prefix {
	font-size: 13px;
	letter-spacing: 0.01em;
}
.wh-pdp__price-amount {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--ink);
	letter-spacing: -0.01em;
	font-weight: 400;
}

.wh-pdp__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: var(--accent);
	color: var(--on-ink);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 14px var(--s-5);
	font: 500 14px/1 var(--font-body);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	width: max-content;
	transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wh-pdp__cta:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-ink);
}
.wh-pdp__cta:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
/* Minimal: rows are separated by horizontal dividers only.
   Selection is signalled by a bolder name + ink price — no fill, no
   vertical bar, no thumb border. */
.wh-pdp__picker-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	border-bottom: 1px solid var(--border);
	transition: background .15s var(--ease);
}
/* Whole-row hover (covers select button + info icon area) — uses
   the design system's lightest neutral surface token. */
.wh-pdp__picker-row:not(.is-selected):hover {
	background: var(--surface-2);
}
.wh-pdp__picker-row.is-selected .wh-pdp__picker-row-name { font-weight: 700; }
.wh-pdp__picker-row.is-selected .wh-pdp__picker-row-price-amount { color: var(--ink); }
/* Selected row sits between two ink horizontal rules.
   `.is-selected` owns its own bottom edge; the previous sibling's bottom
   edge (or the `<ul>` top edge, if the selected row is first) flips to
   ink to frame the row above. */
.wh-pdp__picker-row.is-selected { border-bottom-color: var(--ink); }
.wh-pdp__picker-row:has(+ .wh-pdp__picker-row.is-selected) { border-bottom-color: var(--ink); }
.wh-pdp__picker-rows:has(> .wh-pdp__picker-row:first-child.is-selected) { border-top-color: var(--ink); }

/* ---------- Mobile sticky CTA bar (Phase C target — defined here so
   the bar shell exists from Phase B; body partials wire the trigger.) ---------- */
@media (max-width: 639px) {
	.wh-pdp__cta { width: 100%; justify-content: center; min-height: 48px; }
	.wh-pdp__h1 { font-size: clamp(36px, 8vw, 48px); }
	.wh-pdp__hero-inner { gap: var(--s-5); }
	.wh-pdp__diag-cell { padding: var(--s-3); gap: var(--s-3); }
	.wh-pdp__diag-cell-svg { width: 72px; }
}

/* ============================================================
   Phase C — body sections (story · gallery · FAQ · related)
   ============================================================ */

/* Shared inner-wrap pattern. */
.wh-pdp__story-inner,
.wh-pdp__gallery-inner,
.wh-pdp__materials-inner,
.wh-pdp__faq-inner,
.wh-pdp__related-inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}

/* ---------- Story + pull quote ---------- */
.wh-pdp__story {
	padding: clamp(var(--s-7), 6vw, var(--s-9)) 0;
	background: var(--bg);
}
.wh-pdp__story-inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: clamp(var(--s-6), 4vw, 80px);
	align-items: start;
}
@media (max-width: 1023px) {
	.wh-pdp__story-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}
.wh-pdp__story-body {
	font-family: var(--font-body);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.7;
	color: var(--ink-2);
	max-width: 60ch;
}
.wh-pdp__story-body p { margin: 0 0 1em; }
.wh-pdp__story-body p:last-child { margin-bottom: 0; }
.wh-pdp__pullquote {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.020em;
	font-style: italic;
	color: var(--ink);
	margin: 0;
	font-weight: 400;
}
.wh-pdp__pullquote-attr {
	display: block;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-style: normal;
}

/* ---------- Lifestyle gallery ---------- */
.wh-pdp__gallery-section {
	padding: clamp(var(--s-5), 3vw, var(--s-7)) 0 clamp(var(--s-7), 6vw, var(--s-9));
	background: var(--bg);
}
.wh-pdp__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5) var(--s-4);
}
@media (max-width: 1023px) {
	.wh-pdp__gallery { grid-template-columns: repeat(2, 1fr); }
}
.wh-pdp__gallery-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wh-pdp__gallery-tile {
	aspect-ratio: 1 / 1;
	background: var(--surface-product-fallback, #C4C0B8);
	overflow: hidden;
	position: relative;
}
.wh-pdp__gallery-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wh-pdp__gallery-caption {
	display: flex;
	gap: var(--s-2);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-pdp__gallery-caption-num {
	color: var(--ink);
	min-width: 22px;
}
.wh-pdp__gallery-caption-text {
	min-width: 0;
}

/* ---------- Specs strip (under hero, above story) ----------
   5-tile horizontal row · icon · mono caps label · Fraunces value ·
   Inter muted sub. Ghost rules between tiles, no borders. Mobile:
   horizontal scroll-snap (Aesop / Aritzia / Mr Porter pattern). */
.wh-pdp__specs-section {
	padding: clamp(var(--s-6), 4vw, var(--s-56)) 0;
	background: var(--bg);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.wh-pdp__specs-inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}
.wh-pdp__specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
}
.wh-pdp__specs > li + li { border-left: 1px solid var(--border); }

.wh-pdp__spec {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: var(--s-2) var(--s-5);
	min-width: 0;
}
.wh-pdp__spec-icon {
	display: inline-flex;
	color: var(--accent);
	margin-bottom: 2px;
}
.wh-pdp__spec-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-pdp__spec-value {
	font-family: var(--font-display);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ink);
	font-weight: 500;
}
.wh-pdp__spec-sub {
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink-2);
}

/* Mobile: horizontal scroll-snap, one tile visible at a time. */
@media (max-width: 1023px) {
	.wh-pdp__specs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 70%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 var(--page-pad);
		margin: 0 calc(-1 * var(--page-pad));
		scrollbar-width: none;
	}
	.wh-pdp__specs::-webkit-scrollbar { display: none; }
	.wh-pdp__specs > li { scroll-snap-align: start; }
	.wh-pdp__specs > li + li { border-left: 1px solid var(--border); }
	.wh-pdp__spec { padding: var(--s-2) var(--s-20); }
}
@media (max-width: 639px) {
	.wh-pdp__specs { grid-auto-columns: 80%; }
}
@media (max-width: 1023px) {
}

/* ---------- FAQ accordion ----------
   Section background spans full bleed; the accordion CONTENT caps at
   --reading-max (720 px, ~70-75 cpl at 16 px Inter) per editorial
   reading-measure research (Baymard / NN/g / Aesop / COS / Mr Porter
   pattern). At full 1440 px, answer prose breaks editorial rhythm. */
.wh-pdp__faq-section {
	padding: clamp(var(--s-7), 6vw, var(--s-9)) 0;
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.wh-pdp__faq-inner {
	max-width: var(--reading-max, 720px) !important;
}
.wh-pdp__faq-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
}
.wh-pdp__faq-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}
.wh-pdp__faq-h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
	font-weight: 400;
}
/* Mirrors design system §17 accordion spec exactly:
   stacked details with border-bottom · padding 14px 0 · summary 14px /
   weight 500 / list-style none · chevron rotates 180° on [open]. No
   outer container border, no per-item background. Active state IS just
   the chevron rotation — no other visual change. */
.wh-pdp__faq {
	display: flex;
	flex-direction: column;
	/* Accordion = top + bottom rule only, no left/right (design system §"Accordion · FAQ"). */
	border-top: 1px solid var(--border);
}
.wh-pdp__faq-item {
	border-bottom: 1px solid var(--border);
}
.wh-pdp__faq-summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	padding: 14px 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.35;
	color: var(--ink);
	font-weight: 500;
}
.wh-pdp__faq-summary::-webkit-details-marker { display: none; }
.wh-pdp__faq-q { flex: 1; min-width: 0; }
.wh-pdp__faq-chevron {
	flex-shrink: 0;
	color: var(--ink-muted);
	transition: transform 0.2s var(--ease);
}
.wh-pdp__faq-item[open] .wh-pdp__faq-chevron { transform: rotate(180deg); }
.wh-pdp__faq-a {
	padding: 0 0 18px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 60ch;
}
.wh-pdp__faq-a a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--ink-muted);
	text-underline-offset: 2px;
}
.wh-pdp__faq-a a:hover {
	text-decoration-color: var(--accent);
	color: var(--accent);
}
/* Per-product → general divider — quiet eyebrow, no background. */
.wh-pdp__faq-divider {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-5) 0 6px;
	border-bottom: 1px solid var(--border);
	margin-bottom: -1px;
}
.wh-pdp__faq-divider-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-pdp__faq-divider::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 1px;
	background: var(--border-strong);
}

/* ---------- Related strip ---------- */
.wh-pdp__related-section {
	padding: clamp(var(--s-7), 6vw, var(--s-9)) 0;
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.wh-pdp__related-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
}
.wh-pdp__related-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}
.wh-pdp__related-h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
	font-weight: 400;
}
/* ---------- Size-tier picker (S / M / L) ---------- */
.wh-pdp__sizing { margin: var(--s-5, var(--s-20)) 0; }
.wh-pdp__sizing-label {
	font-family: var(--font-mono);
	font-size: var(--type-xs, 11px);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-3, var(--s-3));
}
.wh-pdp__sizing-tiers { display: flex; gap: var(--s-2, var(--s-2)); }
.wh-pdp__sizing-tier {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	padding: var(--s-3, var(--s-3)) var(--s-2, var(--s-2));
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 6px);
	color: var(--ink);
	/* <button> doesn't inherit body font — without this the children fall back
	   to Storefront's Source Sans Pro stack (the tier price did exactly that). */
	font-family: var(--font-body);
	cursor: pointer;
	text-align: center;
	transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.wh-pdp__sizing-tier:hover { border-color: var(--ink-muted); }
.wh-pdp__sizing-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wh-pdp__sizing-tier.is-selected {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.wh-pdp__sizing-tier-name { font-family: var(--font-display); font-size: 18px; line-height: 1.05; }
.wh-pdp__sizing-tier-price,
.wh-pdp__sizing-tier-price .amount,
.wh-pdp__sizing-tier-price bdi { font-family: var(--font-body); font-size: 12px; color: var(--ink-muted); }
.wh-pdp__sizing-tier.is-selected .wh-pdp__sizing-tier-name,
.wh-pdp__sizing-tier.is-selected .wh-pdp__sizing-tier-price { color: var(--accent); }

.wh-pdp__related {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(var(--s-4), 2vw, var(--s-5));
}
@media (max-width: 1023px) {
	.wh-pdp__related { grid-template-columns: repeat(2, 1fr); }
}
/* .wh-pdp__related-card is just the grid-item surface hook; the card visual
   is the shared .wh-card (css/wh-card.css). */

/* ---------- Mobile sticky CTA bar ---------- */
.wh-pdp__sticky-cta {
	display: none;
}
@media (max-width: 1023px) {
	.wh-pdp__sticky-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		background: var(--bg);
		border-top: 1px solid var(--border);
		padding: var(--s-3) var(--page-pad) calc(var(--s-3) + env(safe-area-inset-bottom, 0));
		box-shadow: 0 -4px 16px rgba(14, 14, 12, 0.04);
		gap: var(--s-3);
		align-items: center;
		justify-content: space-between;
	}
	.wh-pdp__sticky-cta__price {
		font-family: var(--font-body);
		font-size: 13px;
		color: var(--ink-muted);
		display: flex;
		align-items: baseline;
		gap: var(--s-1);
		min-width: 0;
	}
	.wh-pdp__sticky-cta__amount {
		font-family: var(--font-display);
		font-size: 18px;
		color: var(--ink);
	}
	.wh-pdp__sticky-cta__pill {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: var(--accent);
		color: var(--on-ink);
		border: 1px solid var(--accent);
		border-radius: 999px;
		padding: var(--s-3) var(--s-20);
		min-height: 44px;
		font: 500 14px/1 var(--font-body);
		text-decoration: none;
	}
}

/* ============================================================
   Reviews — design system §14 Commerce
   Section background spans full bleed; content caps at
   --page-max-content (1440 px) to share rhythm with story / FAQ.
   List + form column further caps at --reading-max (720 px).
   ============================================================ */
.wh-pdp__reviews-section {
	padding: clamp(var(--s-7), 6vw, var(--s-9)) 0;
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.wh-pdp__reviews-inner {
	/* Narrower single-column reading width (--reading-max-wide 960px), centered —
	   the reviews read better as a centered column than full content width. */
	max-width: var(--reading-max-wide);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}
.wh-pdp__reviews-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
}
.wh-pdp__reviews-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}
.wh-pdp__reviews-h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
	font-weight: 400;
}

/* Summary row — stat (avg + stars + count) on the left, breakdown on the right.
   Stacks under 1024 px. */
.wh-pdp__reviews-summary {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 2fr;
	gap: clamp(var(--s-6), 4vw, var(--s-8));
	align-items: start;
	padding-bottom: var(--s-40);
	margin-bottom: var(--s-40);
	border-bottom: 1px solid var(--border);
}
@media (max-width: 1023px) {
	.wh-pdp__reviews-summary {
		grid-template-columns: 1fr;
		gap: var(--s-5);
	}
}
.wh-pdp__reviews-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.wh-pdp__reviews-stat-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.wh-pdp__reviews-avg {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wh-pdp__rev-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--accent);
	line-height: 0;
}
.wh-pdp__reviews-count {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 13px;
	color: var(--ink-muted);
}
.wh-pdp__reviews-write {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--ink-muted);
	text-underline-offset: 2px;
	transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.wh-pdp__reviews-write:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* Breakdown — design system §14: 32px label / 1fr bar / 32px count, terracotta fill */
.wh-pdp__reviews-breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 480px;
}
.wh-pdp__reviews-bar-row {
	display: grid;
	grid-template-columns: 32px 1fr 32px;
	gap: 10px;
	align-items: center;
	font-size: 11px;
	color: var(--ink-muted);
}
.wh-pdp__reviews-bar-label {
	font-family: var(--font-mono);
}
.wh-pdp__reviews-bar {
	height: 4px;
	background: var(--bg-alt);
	position: relative;
	border-radius: var(--radius-1);
	overflow: hidden;
}
.wh-pdp__reviews-bar-fill {
	position: absolute;
	inset: 0;
	background: var(--accent);
	border-radius: var(--radius-1);
	transition: width .3s var(--ease);
}
.wh-pdp__reviews-bar-count {
	font-family: var(--font-mono);
	text-align: right;
}

/* List + form — capped at reading-max for editorial measure. */
.wh-pdp__reviews-list {
	max-width: var(--reading-max, 720px);
}
.wh-pdp__reviews-comments {
	margin-bottom: var(--s-56);
}

/* Reset Storefront's `.commentlist li …` cascade (float + percent widths +
   Font Awesome on .star-rating + p.meta blocks). All scoped under the
   reviews list so we don't touch other comment surfaces. */
.wh-pdp__reviews-list .commentlist,
.wh-pdp__reviews-list ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wh-pdp__reviews-list .commentlist li,
.wh-pdp__reviews-list .commentlist li::before,
.wh-pdp__reviews-list .commentlist li::after {
	float: none;
	clear: none;
	content: none;
	display: block;
}
.wh-pdp__reviews-list .commentlist li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wh-pdp__reviews-list .commentlist li .comment_container,
.wh-pdp__reviews-list .commentlist li .comment-text,
.wh-pdp__reviews-list .commentlist li .avatar,
.wh-pdp__reviews-list .commentlist li ul.children,
.wh-pdp__reviews-list .commentlist ul.children .avatar,
.wh-pdp__reviews-list .commentlist ul.children .comment-text {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
}
.wh-pdp__reviews-list .commentlist li time {
	opacity: 1;
	font-size: inherit;
}
.wh-pdp__reviews-list p.meta {
	margin: 0;
	padding: 0;
}
/* Woo's CSS-glyph star widget (`<div class="star-rating">`) is overridden
   by our SVG review-rating template, but defensively kill the leftover
   font + ::before pseudo-elements in case any plugin still emits it. */
.wh-pdp__reviews-list .star-rating,
.wh-pdp__reviews-list .star-rating::before,
.wh-pdp__reviews-list .star-rating span,
.wh-pdp__reviews-list .star-rating span::before {
	display: none;
}

/* Per-review card */
.wh-pdp__rev {
	list-style: none;
	border-bottom: 1px solid var(--border);
	padding: 28px 0;
}
.wh-pdp__rev:first-child { padding-top: 0; }
.wh-pdp__rev:last-child  { border-bottom: 0; padding-bottom: 0; }
.wh-pdp__rev-item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--s-20);
	align-items: start;
	margin: 0;
	padding: 0;
}
.wh-pdp__rev-avatar {
	display: block;
	width: 48px;
	height: 48px;
}
.wh-pdp__rev-avatar img,
.wh-pdp__rev-avatar .avatar {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	border-radius: 999px;
	display: block;
	margin: 0;
	float: none;
}
.wh-pdp__rev-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.wh-pdp__rev-rating {
	color: var(--accent);
	line-height: 0;
}
.wh-pdp__rev-rating .wh-pdp__rev-stars { gap: 1px; }

/* Meta row — author · verified pill · mono date */
.wh-pdp__rev-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.wh-pdp__rev-author {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--ink);
	letter-spacing: -0.005em;
	font-weight: 500;
	line-height: 1.2;
}
.wh-pdp__rev-verified {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: 3px var(--s-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-style: normal;
	line-height: 1;
}
.wh-pdp__rev-verified svg {
	color: var(--accent);
	flex-shrink: 0;
}
.wh-pdp__rev-date {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-left: auto;
}
.wh-pdp__rev-meta .woocommerce-review__dash {
	display: none;
}

/* Body text */
.wh-pdp__rev-text,
.wh-pdp__rev-body .description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}
.wh-pdp__rev-text p,
.wh-pdp__rev-body .description p { margin: 0 0 0.6em; }
.wh-pdp__rev-text p:last-child,
.wh-pdp__rev-body .description p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.wh-pdp__rev-item {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 14px;
	}
	.wh-pdp__rev-avatar,
	.wh-pdp__rev-avatar img,
	.wh-pdp__rev-avatar .avatar {
		width: 40px !important;
		height: 40px !important;
		max-width: 40px !important;
	}
	.wh-pdp__rev-date {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* Form */
.wh-pdp__reviews-form-wrapper {
	padding-top: var(--s-40);
	border-top: 1px solid var(--border);
}
.wh-pdp__reviews-form-title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 var(--s-20);
	font-weight: 400;
}
.wh-pdp__reviews-form-wrapper .comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.wh-pdp__reviews-form-wrapper label {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.wh-pdp__reviews-form-wrapper .required {
	color: var(--accent);
	margin-left: 2px;
}
.wh-pdp__reviews-form-wrapper input[type="text"],
.wh-pdp__reviews-form-wrapper input[type="email"],
.wh-pdp__reviews-form-wrapper select,
.wh-pdp__reviews-form-wrapper textarea {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-1);
	padding: var(--s-3) 14px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wh-pdp__reviews-form-wrapper input:focus,
.wh-pdp__reviews-form-wrapper select:focus,
.wh-pdp__reviews-form-wrapper textarea:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--bg-alt);
}
.wh-pdp__reviews-form-wrapper textarea {
	min-height: 140px;
	resize: vertical;
	font-family: var(--font-body);
}
.wh-pdp__reviews-form-wrapper .form-submit {
	margin: var(--s-2) 0 0;
}
.wh-pdp__reviews-form-wrapper .form-submit input[type="submit"],
.wh-pdp__reviews-form-wrapper .submit {
	background: var(--ink);
	color: var(--on-ink);
	border: 1px solid var(--ink);
	border-radius: 999px;
	padding: var(--s-3) var(--s-5);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color .15s var(--ease), transform .12s var(--ease);
}
.wh-pdp__reviews-form-wrapper .form-submit input[type="submit"]:hover,
.wh-pdp__reviews-form-wrapper .submit:hover {
	background: var(--accent);
	border-color: var(--accent);
}
.wh-pdp__reviews-must-login,
.wh-pdp__reviews-verification-required,
.wh-pdp__reviews-form-wrapper .logged-in-as {
	font-size: 13px;
	color: var(--ink-muted);
	margin: 0 0 var(--s-4);
}
.wh-pdp__reviews-must-login a,
.wh-pdp__reviews-form-wrapper .logged-in-as a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--ink-muted);
	text-underline-offset: 2px;
}
.wh-pdp__reviews-must-login a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* Reset Storefront's #respond chrome (light-gray bg, drop shadow, 1.6-2.6em
   padding, float-right 55-76% widths, floated author/email fields). All
   scoped to .wh-pdp__reviews-form-wrapper so we only neutralise it on the
   PDP review surface. */
.wh-pdp__reviews-form-wrapper #respond,
.wh-pdp__reviews-form-wrapper .comment-respond {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	clear: both;
	position: static;
}
.wh-pdp__reviews-form-wrapper #respond .comment-form-author,
.wh-pdp__reviews-form-wrapper #respond .comment-form-email,
.wh-pdp__reviews-form-wrapper #respond .comment-form-url,
.wh-pdp__reviews-form-wrapper #respond .comment-form-comment,
.wh-pdp__reviews-form-wrapper .comment-form-author,
.wh-pdp__reviews-form-wrapper .comment-form-email,
.wh-pdp__reviews-form-wrapper .comment-form-url,
.wh-pdp__reviews-form-wrapper .comment-form-comment {
	float: none;
	width: 100%;
	margin: 0;
	clear: none;
}
.wh-pdp__reviews-form-wrapper #respond .form-submit,
.wh-pdp__reviews-form-wrapper #respond form {
	margin-bottom: 0;
}
.wh-pdp__reviews-form-wrapper .comment-notes,
.wh-pdp__reviews-form-wrapper .comment-form-cookies-consent {
	font-size: 12px;
	color: var(--ink-muted);
	margin: 0;
}
.wh-pdp__reviews-form-wrapper .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.wh-pdp__reviews-form-wrapper .comment-form-cookies-consent input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--accent);
}
.wh-pdp__reviews-form-wrapper .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	font-size: 12px;
	color: var(--ink-muted);
	letter-spacing: 0;
}
.wh-pdp__reviews-form-wrapper #cancel-comment-reply-link {
	position: static;
	display: inline-block;
	font-size: 12px;
	color: var(--ink-muted);
	margin-left: var(--s-3);
	height: auto;
	width: auto;
	line-height: 1.4;
}
.wh-pdp__reviews-form-wrapper #cancel-comment-reply-link:hover {
	color: var(--accent);
	transform: none;
}

/* Star picker — replaces Woo's <select> for the rating field. */
.wh-pdp__reviews-rating-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.wh-pdp__rev-star-picker {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	color: var(--border-strong);
	/* Visible width: 5 × 44 (tap target) + 4 × 4 (gap) = 236px.
	   Stars themselves stay 28px for editorial register. */
}
.wh-pdp__rev-star-btn {
	background: none;
	border: 0;
	/* 8px padding × 28px svg = 44×44 hit target — WCAG 2.5.5 minimum. */
	padding: var(--s-2);
	margin: 0;
	cursor: pointer;
	color: inherit;
	line-height: 0;
	border-radius: var(--radius-1);
	transition: transform .12s var(--ease);
}
.wh-pdp__rev-star-btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.wh-pdp__rev-star-btn:hover {
	transform: scale(1.08);
}
.wh-pdp__rev-star-btn.is-on,
.wh-pdp__rev-star-btn.is-preview {
	color: var(--accent);
}
.wh-pdp__rev-star-btn.is-on svg,
.wh-pdp__rev-star-btn.is-preview svg {
	fill: currentColor;
	stroke: currentColor;
}
.wh-pdp__rev-star-readout {
	margin-left: var(--s-3);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-pdp__rev-star-picker.is-invalid {
	outline: 1px dashed var(--accent);
	outline-offset: 4px;
	border-radius: var(--radius-1);
}

/* Defensive: hide any `<p class="stars">` enhancer widget that another
   script (Woo's own single-product.js, or a third-party plugin) might
   still inject before our hidden #wh-rating input. We render our own
   star picker — none of those are wanted. */
.wh-pdp__reviews-form-wrapper p.stars,
.wh-pdp__reviews-form-wrapper .comment-form-rating > p.stars,
.wh-pdp__reviews-rating-field p.stars {
	display: none !important;
}

/* ── Collection specifications — follows design-system §17 "Data display" ──
   (bg-alt thead · mono 10px/.14em headers · zebra striping · mono data values
   · right-aligned numeric column, mirroring the canonical orders table). */
.wh-pdp__spectable-section {
	padding: var(--s-8) 0;
}
/* Same inner-wrap as .wh-pdp__story-inner et al. — page-pad lives INSIDE the
   max-width cap so the content width matches the other PDP sections exactly. */
.wh-pdp__spectable-inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}
.wh-pdp__spectable-title {
	font-family: var(--font-display);
	font-size: var(--type-xl);
	line-height: 1.2;
	letter-spacing: -0.015em;
	font-weight: 400;
	color: var(--ink);
	margin: 0 0 var(--s-5);
}
.wh-pdp__spectable-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wh-pdp__spectable {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--type-sm);
	color: var(--ink);
}
/* Header — §17 register: bg-alt fill, mono 10px wide-tracked uppercase. */
.wh-pdp__spectable thead tr {
	background: var(--bg-alt);
}
.wh-pdp__spectable thead th {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink-muted);
	text-align: left;
	padding: var(--s-3) var(--s-4);
	white-space: nowrap;
}
.wh-pdp__spectable tbody th,
.wh-pdp__spectable tbody td {
	text-align: left;
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
/* No zebra striping — rows transparent (Ayrton 2026-06-16: drop zebra on the
   product spec table). Header keeps its bg-alt band + hairline row borders. */
.wh-pdp__spectable tbody tr:nth-child(even) {
	background: transparent;
}
.wh-pdp__spectable tbody tr:last-child th,
.wh-pdp__spectable tbody tr:last-child td {
	border-bottom: 0;
}
/* Data values in mono (figures register, §17 "waardes in font-mono"). */
.wh-pdp__spectable tbody td {
	font-family: var(--font-mono);
	color: var(--ink);
}
/* Variant = the row's title, in display font. */
.wh-pdp__spectable-variant {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
/* Vanaf column right-aligned, mirroring §17 "Totaal". */
.wh-pdp__spectable thead th:last-child,
.wh-pdp__spectable tbody td:last-child {
	text-align: right;
	white-space: nowrap;
}
.wh-pdp__spectable .amount,
.wh-pdp__spectable bdi {
	font-family: var(--font-mono);
}
/* Available-material cards reuse the canonical .wh-material-card grid
   (.wh-materials__rail, defined in wandhaus-mobile.css). Only the section
   wrapper + heading are scoped here. */
.wh-pdp__spec-materials {
	margin-top: var(--s-8);
}
.wh-pdp__spec-materials-title {
	font-family: var(--font-display);
	font-size: var(--type-lg);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 var(--s-5);
}
@media (max-width: 640px) {
	.wh-pdp__spectable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.wh-pdp__spectable tbody tr {
		display: block;
		padding: var(--s-3);
		border-bottom: 1px solid var(--border-strong);
	}
	.wh-pdp__spectable tbody tr:last-child {
		border-bottom: 0;
	}
	.wh-pdp__spectable td,
	.wh-pdp__spectable th {
		display: block;
		border: 0;
		padding: 2px 0;
	}
	/* Stacked: figures read left, not right-aligned like the desktop column. */
	.wh-pdp__spectable tbody td:last-child {
		text-align: left;
	}
	.wh-pdp__spectable td::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--ink-muted);
	}
	.wh-pdp__spectable-variant {
		font-size: 16px;
		margin-bottom: var(--s-1);
	}
}