/* ------------------------------------------------------------ *\
	PDP mobile unification tokens — single source for the two values
	the mock keeps constant across the page: the inter-section rhythm
	(80px at every width) and the phone content gutter (12px column,
	vs the per-section 1440 desktop grid). Carousels and full-bleed
	sections derive their bleed from --pdp-gutter so nothing is wired
	to a hardcoded inset. The page stacks at base.css's 835 breakpoint
	and refines for phones at 560.
\* ------------------------------------------------------------ */
.single-product {
	--pdp-space: 80px;
}
@media (max-width: 835px) {
	.single-product { --pdp-gutter: 12px; }
}

.pdp-hero {
	/* Clear the fixed desktop header (~80px) — the theme offsets the header via each
	   first section's own top padding, and the previous 24px was too small for the PDP. */
	padding: 104px 0 var(--pdp-space);
	font-family: var(--bva-font-sans);
	color: var(--bva-black);
}
.pdp-hero__inner {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	/* Symmetric 40px rail, matching --bva-bleed-pad and every other V3 section.
	   The mock had 16px left / 103px right (its hero frame was off the grid),
	   which pinned the image to the viewport edge and cut the text short. */
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* Floor for the space either side of the rule; the rule's auto margins then
	   share out whatever is left (see .pdp-hero__divider). Without it, both
	   columns shrink until they touch the rule below ~1200px. */
	gap: 24px;
}
/* In flow rather than absolute at a hardcoded 869px (the mock's 1440 offset):
   both columns are shrinkable, so a fixed offset dropped the rule inside the
   text column below 1440. Auto margins on both sides split the free space
   evenly, so the rule sits midway between image and copy instead of hugging
   the copy with a 174px hole on its left. Stretch keeps it the row height. */
.pdp-hero__divider {
	align-self: stretch;
	flex: 0 0 1px;
	width: 1px;
	margin-inline: auto;
	background: var(--bva-line);
}

.pdp-gallery {
	position: sticky;
	top: 24px;
	/* Shrinkable so the 679 + 452 columns never overflow between 835 and
	   ~1290px (no grow: stays 679 once there's room, holding the 1440 ISO). */
	flex: 0 1 679px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.pdp-gallery__stage {
	position: relative;
	width: 100%;
	/* 679px ISO mock, but the whole pinned column (stage + 32 gap + 72 thumbs row)
	   must clear the fold: otherwise the thumbs tablist hangs under it for the
	   entire pin and the photo can't be switched by click. Bound the WIDTH by the
	   room, ratio applied — the stage shrinks proportionally (no recrop) and stays
	   centered. Floor at 360px so a very short window degrades sanely. Keep the
	   subtractions in sync with `top: 24px` above, the .pdp-gallery 32px gap and
	   the 72px thumbs row (60px + 2 x 6px padding: `all: unset` on button resets
	   box-sizing to content-box). */
	max-width: min(679px, max(360px, calc((100vh - 24px - 32px - 72px - 24px) * 679 / 682)));
	aspect-ratio: 679 / 682;
	border-radius: 12px;
	overflow: hidden;
}
.pdp-gallery__main { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--bva-white);
	border: 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}
.pdp-gallery__nav svg { width: 24px; height: 24px; display: block; }
.pdp-gallery__nav--prev { left: 20px; }
.pdp-gallery__nav--prev svg { transform: rotate(180deg); }
.pdp-gallery__nav--next { right: 20px; }

.pdp-gallery__thumbs { display: flex; align-items: center; justify-content: center; gap: 2px; }
.pdp-thumb {
	width: 60px;
	height: 60px;
	padding: 6px;
	border: 0;
	border-radius: 4px;
	background: none;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; }
.pdp-thumb:hover { opacity: 0.85; }
.pdp-thumb.is-active {
	width: 48px;
	height: 48px;
	opacity: 1;
	border: 1px solid var(--bva-black);
}

.pdp-info {
	flex: 0 1 452px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.pdp-info__head { display: flex; flex-direction: column; gap: 16px; }

.pdp-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 2px;
	background: var(--bva-badge-bg);
	font: var(--bva-t-label);
	text-transform: uppercase;
}
.pdp-badge svg { width: 16px; height: 16px; display: block; }

/* One notch bolder than the header-xl token (500 -> 600): set after the `font`
   shorthand, which resets font-weight. Token stays shared/unchanged. */
.pdp-title { margin: 0; font: var(--bva-t-header-xl); color: var(--bva-black); font-weight: 600; }

.pdp-rating { display: flex; align-items: center; gap: 8px; }
.pdp-rating__stars { display: inline-flex; align-items: center; gap: 2px; }
.pdp-rating__stars svg { width: 16px; height: 15px; display: block; }
/* Yellow/gold rating stars (recolor the inlined black-star SVGs; empty stars keep fill:none) */
.pdp-rating__stars svg path[fill="#151412"] { fill: #f5a623; }
.pdp-rating__stars svg path[stroke="#151412"] { stroke: #f5a623; }
.pdp-rating__count { font: var(--bva-t-label); text-transform: uppercase; }

.pdp-desc { display: flex; flex-direction: column; gap: 16px; }
.pdp-desc p { margin: 0; font: var(--bva-t-paragraphe); }
/* Lead line one notch bolder (header-s 500 -> 600); weight set after `font`. */
.pdp-desc > p:first-child { font: var(--bva-t-header-s); font-weight: 600; }
.pdp-desc > p:last-child { color: var(--bva-muted); }
.pdp-desc strong { font-weight: 500; }

.pdp-benefits { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.pdp-benefits li { display: flex; align-items: flex-start; gap: 12px; }
/* Centred on the first line-box (24px line, 14px rule) instead of on the whole
   item: a benefit long enough to wrap kept its marker floating mid-block. */
.pdp-benefits__bar { flex: 0 0 3px; width: 3px; height: 14px; margin-top: 5px; background: var(--bva-black); }
.pdp-benefits strong { font: 600 18px/1.32 var(--bva-font-sans); }

.pdp-cart { margin: 0; }
.pdp-btn-cart {
	width: 100%;
	height: 60px;
	border: 0;
	border-radius: 2px;
	background: var(--bva-black);
	color: var(--bva-white);
	font: var(--bva-t-paragraphe);
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pdp-btn-cart:hover { opacity: 0.9; }

.pdp-accordions { display: flex; flex-direction: column; }
.pdp-accordion { border-top: 1px solid var(--bva-line); }
.pdp-accordions .pdp-accordion:last-child { border-bottom: 1px solid var(--bva-line); }
.pdp-accordion__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border: 0;
	background: none;
	font: var(--bva-t-label);
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}
.pdp-accordion__icon { position: relative; flex: 0 0 11px; width: 11px; height: 11px; }
.pdp-accordion__icon::before,
.pdp-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 1px;
	background: var(--bva-black);
	transform: translate(-50%, -50%);
}
.pdp-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pdp-accordion__head[aria-expanded="true"] .pdp-accordion__icon::after { opacity: 0; }

.pdp-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.pdp-accordion__head[aria-expanded="true"] + .pdp-accordion__panel { max-height: 480px; }
.pdp-accordion__panel p { margin: 0; padding-bottom: 16px; font: var(--bva-t-paragraphe); }

.pdp-reassurance { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; list-style: none; }
.pdp-reassurance li { display: flex; align-items: center; gap: 24px; }
.pdp-reassurance svg { flex: 0 0 16px; width: 16px; height: 16px; display: block; }
.pdp-reassurance span { font: var(--bva-t-label); text-transform: uppercase; }
.pdp-reassurance__phone { align-items: flex-start; }
.pdp-reassurance__phone > span { display: flex; flex-direction: column; gap: 4px; }
.pdp-reassurance__muted { color: var(--bva-muted); }

/* v3 icons ship with a white stroke for the dark footer; force black on light bg */
.pdp-badge svg [stroke],
.pdp-reassurance svg [stroke],
.pdp-gallery__nav svg [stroke] { stroke: var(--bva-black); }

@media (max-width: 835px) {
	/* base.css swaps in the compact .header-mobile here, so trim the hero top. */
	.pdp-hero { padding-top: 12px; }
	.pdp-hero__inner { flex-direction: column; padding: 0 var(--pdp-gutter); gap: 40px; }
	.pdp-hero__divider { display: none; }
	.pdp-gallery,
	.pdp-info { position: static; flex: 1 1 auto; width: 100%; max-width: 560px; margin-inline: auto; }
	/* Mobile mock flips the bottom of the info column: reassurance sits right under
	   the CTA, accordions move to the end. Reorder via flex (DOM order = desktop). */
	.pdp-info .pdp-accordions { order: 1; }
}

@media (max-width: 560px) {
	/* Hero title steps down from the 48px desktop token to the mobile mock size. */
	.pdp-title { font-size: 36px; }
}

.pdp-quote {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 12px var(--pdp-space);
}
.pdp-quote__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 494px;
	padding: 40px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--bva-ink);
	color: var(--bva-vitamine-100);
}
.pdp-quote__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.pdp-quote__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--bva-ink) 16.5%, rgba(21, 22, 26, 0) 67.3%);
}

.pdp-quote__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 310px;
	max-width: 933px;
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid rgba(253, 242, 236, 0.3);
}
.pdp-quote__text {
	margin: 0;
	max-width: 765px;
	font: var(--bva-t-header-l);
}
.pdp-quote__text::before { content: "\201C"; }
.pdp-quote__text::after { content: "\201D"; }

.pdp-quote__author {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	width: 345px;
	max-width: 100%;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(253, 242, 236, 0.3);
}
.pdp-quote__brand { font: var(--bva-t-label); text-transform: uppercase; }
.pdp-quote__sign { font: 300 40px/1.1 'Zeyada', cursive; }

@media (max-width: 835px) {
	.pdp-quote__box { min-height: 0; padding: 32px 24px; }
	.pdp-quote__scrim { background: linear-gradient(to right, var(--bva-ink) 40%, rgba(21, 22, 26, 0.4) 100%); }
	.pdp-quote__text { font-size: 22px; }
}
@media (max-width: 560px) {
	/* Mock stacks the author block: BIOVANCIA label above the Équipe R&D signature. */
	.pdp-quote__author { flex-direction: column; align-items: flex-start; gap: 4px; width: auto; }
}

.pdp-testimonials {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 40px var(--pdp-space);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.pdp-testimonials__title {
	margin: 0;
	font: 500 24px/1.1 var(--bva-font-sans);
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	color: var(--bva-black);
}
.pdp-testimonials__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pdp-review {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border-radius: 4px;
	background: var(--bva-myrtille-100);
}
.pdp-review__body { display: flex; flex-direction: column; gap: 24px; }
.pdp-review__head { display: flex; flex-direction: column; gap: 12px; }
.pdp-review__stars { display: inline-flex; gap: 2px; }
.pdp-review__stars svg { width: 13px; height: 12px; display: block; }
.pdp-review__title { margin: 0; font: 500 20px/1.2 var(--bva-font-sans); color: var(--bva-dark-brown); font-weight: 600; }
.pdp-review__text { margin: 0; font: var(--bva-t-paragraphe); color: rgba(28, 26, 23, 0.6); }
.pdp-review__name { margin: 0; font: var(--bva-t-label); text-transform: uppercase; color: var(--bva-dark-brown); font-weight: 400; }

@media (max-width: 835px) {
	.pdp-testimonials { padding: 0 var(--pdp-gutter) var(--pdp-space); }
	.pdp-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	/* Swipeable carousel (.pdp-carousel): ~1 card in view, next peeks. */
	.pdp-testimonials__grid { --pdp-carousel-card: 84%; }
}

/* ------------------------------------------------------------ *\
	Problem / Solution / Résultat — desktop pins the section and scroll
	scrubs the 3 steps (each crossfades its own photo + text), then
	releases into Ingredients. Mobile: the steps stack (déroulé).
	One markup (.pdp-ps__step = panel + photo) serves both modes.
\* ------------------------------------------------------------ */
.pdp-ps {
	/* Sticky chrome height — the pin sticks below it so the tabs scroll-spy never
	   hides under the header. The V3 announcement topbar is fixed above the header
	   and pushes it down by --v3-topbar-h (0 when dismissed, set by v3.js otherwise),
	   so it must be added in or the tabs slip under the header when the bar shows.
	   +32px when the WP admin bar is present. */
	--pdp-header-h: calc(80px + var(--v3-topbar-h, 0px));
	position: relative;
	height: calc(var(--pdp-ps-steps, 3) * 100vh);
	margin: 0 0 var(--pdp-space);
	border-block: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--bva-black);
}
.admin-bar .pdp-ps { --pdp-header-h: calc(112px + var(--v3-topbar-h, 0px)); }
.pdp-ps__pin {
	position: sticky;
	top: var(--pdp-header-h);
	height: calc(100vh - var(--pdp-header-h));
	overflow: hidden;
}

.pdp-ps__tabs {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	gap: 40px;
	padding: 40px var(--bva-bleed-pad) 0;
}
.pdp-ps__tab {
	padding: 0;
	border: 0;
	background: none;
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}
.pdp-ps__tab.is-active { opacity: 1; }

.pdp-ps__steps { position: absolute; inset: 0; }
.pdp-ps__step {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: calc(var(--bva-bleed-pad) + 520px) 1fr;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.pdp-ps__step.is-active { opacity: 1; pointer-events: auto; }

.pdp-ps__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	/* Clear the absolute tabs (top) + promo (bottom); align text to the rail. */
	padding: 150px 40px 150px var(--bva-bleed-pad);
}
.pdp-ps__title { margin: 0; font: var(--bva-t-header-l); font-weight: 500; }
.pdp-ps__text { font: var(--bva-t-paragraphe); }
.pdp-ps__text p { margin: 0 0 12px; }
.pdp-ps__text p:last-child { margin-bottom: 0; }
/* A bold-only paragraph is a phase label (e.g. "Dès les premiers jours") —
   render it as the Geist Mono caption above its lines, like the mock. */
.pdp-ps__text strong { font: var(--bva-t-label); text-transform: uppercase; color: var(--bva-muted); }
.pdp-ps__text p:has(> strong) { margin: 24px 0 8px; }
.pdp-ps__text p:first-child:has(> strong) { margin-top: 0; }

/* Long copy stays pinned ISO mock: product.js caps the text column (inline
   max-height) and it scrolls in place — the wheel reads the copy through,
   then chains back to the page scroll that drives the steps. The fades mark
   the edges that hide lines (has-above / has-below, synced on scroll). */
.pdp-ps__step.is-scrollable .pdp-ps__text {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(28, 26, 23, 0.25) transparent;
}
.pdp-ps__step.is-scrollable .pdp-ps__text.has-below {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.pdp-ps__step.is-scrollable .pdp-ps__text.has-above {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px);
	mask-image: linear-gradient(to bottom, transparent, #000 28px);
}
.pdp-ps__step.is-scrollable .pdp-ps__text.has-above.has-below {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* Top-aligned when capped: centering would push the sized column out of the
   paddings (bottom clipped under the pin) the moment the copy fills the room.
   The mock's 150px paddings also shrink to give the copy more window — 116px
   still clears the tabs overlay (55px + 40px + air), 80px of air at the foot
   (product.js reserves more when the promo banner is there). Keep in sync
   with the room formula in updateFit. */
.pdp-ps__step.is-scrollable .pdp-ps__panel {
	justify-content: flex-start;
	padding-top: 116px;
	padding-bottom: 80px;
}

.pdp-ps__photo {
	background-color: var(--bva-myrtille-100);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pdp-ps .pdp-promo {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: calc(var(--bva-bleed-pad) + 520px);
	padding: 0 40px 40px var(--bva-bleed-pad);
}

@media (max-width: 835px) {
	/* Mobile: no pin — steps stack, each panel above its photo (déroulé). */
	.pdp-ps { height: auto; }
	.pdp-ps__pin { position: static; height: auto; overflow: visible; }
	/* Tabs stay on one line and stick under the fixed header so the scroll-spy
	   stays visible while the steps scroll past (déroulé). */
	.pdp-ps__tabs {
		position: sticky;
		top: 70px;
		z-index: 3;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 8px;
		padding: 16px var(--pdp-gutter);
		background: var(--bva-canelle-100);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}
	.pdp-ps__steps { position: static; }
	.pdp-ps__step {
		position: static;
		display: block;
		opacity: 1;
		pointer-events: auto;
	}
	.pdp-ps__panel { justify-content: flex-start; gap: 16px; padding: 32px var(--pdp-gutter); }
	.pdp-ps__photo { height: 320px; }
	.pdp-ps .pdp-promo { position: static; width: auto; padding: 0 var(--pdp-gutter) 32px; }
}

/* ------------------------------------------------------------ *\
	Promo Banner — urgency countdown + CTA, rendered inside the Problem panel (left column)
\* ------------------------------------------------------------ */
.pdp-promo {
	width: 100%;
	padding: 0;
}
.pdp-promo__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 16px;
	background: linear-gradient(to right, #dc2626, #d97706);
	color: var(--bva-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.pdp-promo__text {
	margin: 0;
	font: 600 16px/1.3 var(--bva-font-sans);
	text-align: center;
}
.pdp-promo__action {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.pdp-promo__timer {
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	font: 600 18px/1 var(--bva-font-mono);
	letter-spacing: 0.05em;
}
.pdp-promo__btn {
	padding: 10px 18px;
	border: 0;
	border-radius: 9999px;
	background: var(--bva-white);
	color: #b45309;
	font: 600 14px/1 var(--bva-font-sans);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease;
}
.pdp-promo__btn:hover { opacity: 0.9; }

@media (min-width: 561px) {
	.pdp-promo__inner { flex-direction: row; }
	.pdp-promo__text { text-align: left; }
}

.pdp-ingredients {
	margin-bottom: var(--pdp-space);
	background: var(--bva-badge-bg);
}
.pdp-ingredients__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--pdp-space) 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	color: var(--bva-black);
}
.pdp-ingredients__title {
	margin: 0;
	max-width: 570px;
	font: 500 24px/1.1 var(--bva-font-sans);
	font-weight: 600;
	text-transform: uppercase;
}
.pdp-ingredients__rows { display: flex; flex-direction: column; gap: 40px; }
.pdp-ingredients__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 19px;
	padding-top: 19px;
	border-top: 1px solid var(--bva-line);
}

.pdp-ingredient { display: flex; align-items: flex-start; gap: 16px; }
.pdp-ingredient__media {
	flex: 0 0 177px;
	width: 177px;
	height: 259px;
	border-radius: 2px;
	background-color: var(--bva-canelle-100);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}
.pdp-ingredient__body {
	flex: 0 0 215px;
	width: 215px;
	min-height: 259px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}
.pdp-ingredient__head { display: flex; flex-direction: column; gap: 4px; }
.pdp-ingredient__name { margin: 0; font: var(--bva-t-header-s); font-weight: 600; }
.pdp-ingredient__dose { font: var(--bva-t-label); text-transform: uppercase; }
.pdp-ingredient__desc p { margin: 0 0 12px; font: var(--bva-t-paragraphe); }
/* "En savoir plus" toggles the clamp on a long description (JS reveals the
   button only when the text actually overflows). */
.pdp-ingredient__text.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pdp-ingredient__more {
	padding: 0;
	border: 0;
	background: none;
	font: var(--bva-t-paragraphe);
	color: var(--bva-black);
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 835px) {
	.pdp-ingredients__inner { padding: var(--pdp-space) var(--pdp-gutter); }
	.pdp-ingredients__row { grid-template-columns: repeat(2, 1fr); }
	.pdp-ingredient__body { flex: 1 1 auto; width: auto; }
}
@media (max-width: 560px) {
	.pdp-ingredients__row { grid-template-columns: 1fr; }
	/* Shrink the thumbnail and drop the fixed 259px card height on a phone. */
	.pdp-ingredient__media { flex: 0 0 104px; width: 104px; height: 152px; }
	.pdp-ingredient__body { min-height: 0; }
}

.pdp-before-after {
	margin-bottom: var(--pdp-space);
}
.pdp-before-after__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.pdp-before-after__head {
	max-width: 656px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.pdp-before-after__title { margin: 0; font: var(--bva-t-header-l); color: var(--bva-black); font-weight: 500; }
.pdp-before-after__subtitle { margin: 0; font: var(--bva-t-paragraphe); color: rgba(21, 20, 18, 0.6); }

.pdp-before-after__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.pdp-video {
	position: relative;
	width: 328px;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
}
.pdp-video__poster {
	width: 100%;
	padding-top: 177.44%; /* 582 / 328 */
	background-color: var(--bva-myrtille-100);
	background-size: cover;
	background-position: center;
}
.pdp-video__controls {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 15px;
}
.pdp-video__controls svg { display: block; }

@media (max-width: 835px) {
	.pdp-before-after__inner { padding: 0 var(--pdp-gutter); }
}
@media (max-width: 560px) {
	/* One full-width video per view, swiped left-to-right like testimonials. */
	.pdp-before-after__grid { --pdp-carousel-card: 100%; }
}

.pdp-reviews {
	margin: 0 0 var(--pdp-space);
	padding-left: var(--bva-bleed-pad);
	display: flex;
	align-items: flex-start;
	gap: 118px;
}
.pdp-reviews__col {
	flex: 0 0 578px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.pdp-reviews__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pdp-reviews__note { display: flex; align-items: center; gap: 12px; }
.pdp-reviews__score { font: var(--bva-t-header-l); color: var(--bva-black); white-space: nowrap; }
.pdp-reviews__note-text { margin: 0; width: 321px; font: var(--bva-t-paragraphe); color: var(--bva-black); }

.pdp-stars { display: inline-flex; align-items: center; gap: 2px; }
.pdp-stars > svg { flex: 0 0 19px; width: 19px; height: 18px; display: block; }
.pdp-star-half { position: relative; flex: 0 0 19px; width: 19px; height: 18px; }
.pdp-star-half svg { position: absolute; inset: 0; width: 19px; height: 18px; display: block; }
.pdp-star-half svg:last-child { clip-path: inset(0 50% 0 0); }

.pdp-reviews__list { display: flex; flex-direction: column; gap: 56px; }
.pdp-review-item {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--bva-line);
}
.pdp-review-item[hidden] { display: none; }
.pdp-review-item__meta {
	flex: 0 0 122px;
	display: flex;
	flex-direction: column;
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
}
.pdp-review-item__content { flex: 0 0 317px; display: flex; flex-direction: column; gap: 24px; }
.pdp-review-item__title { display: flex; flex-direction: column; gap: 12px; }
.pdp-review-item__stars { display: inline-flex; gap: 2px; }
.pdp-review-item__stars svg { width: 13px; height: 12px; display: block; }
.pdp-review-item__heading { margin: 0; font: var(--bva-t-header-s); color: var(--bva-black); font-weight: 600; }
.pdp-review-item__text { margin: 0; font: var(--bva-t-paragraphe); color: rgba(28, 26, 23, 0.6); }
.pdp-review-item__more {
	padding: 0;
	border: 0;
	background: none;
	font: var(--bva-t-paragraphe);
	color: rgba(28, 26, 23, 0.6);
	text-decoration: underline;
	cursor: pointer;
}

.pdp-reviews__pagination { display: flex; align-items: center; gap: 8px; }
.pdp-reviews__pagination[hidden] { display: none; }
.pdp-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 2px;
	background: none;
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
	cursor: pointer;
}
.pdp-page.is-active { background: var(--bva-black); color: var(--bva-white); border-color: var(--bva-black); }
.pdp-page--arrow { border: 0; }
.pdp-page--arrow svg { width: 24px; height: 24px; display: block; }
.pdp-page--arrow svg [stroke] { stroke: var(--bva-black); }
.pdp-page--prev svg { transform: rotate(180deg); }
.pdp-page[disabled] { opacity: 0.35; cursor: default; }
.pdp-page--ellipsis { flex: 0 0 auto; width: auto; border: 0; background: none; cursor: default; }

.pdp-reviews__media { flex: 1 1 auto; align-self: stretch; min-width: 0; }
.pdp-reviews__media-inner {
	position: sticky;
	top: 24px;
	/* Mock height, capped to the room the viewport actually leaves (900 + 24 needs
	   924px): past that the pinned block hangs under the fold for its whole pin.
	   `cover` recrops, so nothing is clipped. */
	height: min(900px, calc(100vh - 24px - 40px));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 835px) {
	.pdp-reviews {
		flex-direction: column;
		padding: 0 var(--pdp-gutter);
		gap: 40px;
	}
	.pdp-reviews__col { flex: 1 1 auto; width: 100%; }
	/* The mobile mock drops the sticky lifestyle image — list + pagination only. */
	.pdp-reviews__media { display: none; }
}
@media (max-width: 560px) {
	/* Stack the score over its note text (fixed 321px width overflows 375px). */
	.pdp-reviews__head { flex-direction: column; gap: 16px; }
	.pdp-reviews__note-text { width: auto; }
	.pdp-reviews__list { gap: 32px; }
	.pdp-review-item { flex-direction: column; gap: 12px; }
	.pdp-review-item__content { flex: 1 1 auto; }
	/* Mock puts the author name + date BELOW the review body, not above it. */
	.pdp-review-item__meta { order: 1; }
}

.pdp-faq-image {
	max-width: 1440px;
	margin: 0 auto var(--pdp-space);
	padding: 0 40px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 87px;
}
.pdp-faq-image__media {
	flex: 0 0 671px;
	width: 671px;
	height: 671px;
	max-width: 48%;
	border-radius: 4px;
	background-color: var(--bva-canelle-100);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.pdp-faq-image__col {
	flex: 0 1 602px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.pdp-faq-image__title { margin: 0; font: var(--bva-t-header-l); color: var(--bva-black); font-weight: 500; }
.pdp-faq-image__list { width: 100%; }

@media (max-width: 835px) {
	.pdp-faq-image {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding: 0 var(--pdp-gutter);
	}
	.pdp-faq-image__media { flex: 1 1 auto; width: 100%; max-width: none; height: auto; aspect-ratio: 1; }
	.pdp-faq-image__col { flex: 1 1 auto; }
}

.pdp-innovation {
	margin: 0 0 var(--pdp-space);
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.pdp-innovation__panel {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	/* Left panel bleeds to the screen edge; pull its content back onto the 1440 grid (half-width panel → viewport-based) */
	padding-left: max(40px, calc(50vw - 680px));
	background: var(--bva-myrtille-500);
	color: var(--bva-white);
	display: flex;
	flex-direction: column;
}
.pdp-innovation__label { font: var(--bva-t-label); text-transform: uppercase; }
.pdp-innovation__content {
	margin-top: auto;
	width: 499px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.pdp-innovation__text { display: flex; flex-direction: column; gap: 16px; }
.pdp-innovation__title { margin: 0; font: var(--bva-t-header-l); font-weight: 500; }
.pdp-innovation__desc { margin: 0; max-width: 446px; font: var(--bva-t-paragraphe); opacity: 0.6; }
.pdp-innovation__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 166px;
	height: 40px;
	border-radius: 2px;
	background: var(--bva-white);
	color: var(--bva-black);
	font: 500 12px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
	text-decoration: none;
}
.pdp-innovation__media {
	flex: 1 1 0;
	min-width: 0;
	min-height: 671px;
	background-color: var(--bva-myrtille-100);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 835px) {
	.pdp-innovation { flex-direction: column; }
	.pdp-innovation__panel { padding: 32px var(--pdp-gutter); gap: 32px; }
	.pdp-innovation__content { margin-top: 0; width: 100%; }
	/* Mock stacks the molecular image ABOVE the dark text panel on mobile. */
	.pdp-innovation__media { min-height: 360px; order: -1; }
}

.pdp-band {
	/* Full-width feature banner with a slim 16px gutter so it nearly touches the
	   edges (no 1440 cap). Figma 2229:9516 → x=16 in a 1440 frame. */
	margin: 0 0 var(--pdp-space);
	padding: 0 16px;
}
.pdp-band__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	min-height: 690px;
	padding: 0 40px 40px;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--bva-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	color: var(--bva-white);
}
.pdp-band__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 75%);
	pointer-events: none;
}
.pdp-band__title-group {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.pdp-band__title { margin: 0; font: 500 24px/1.1 var(--bva-font-sans); text-transform: uppercase; font-weight: 600; }
.pdp-band__subtitle { margin: 0; max-width: 600px; font: var(--bva-t-paragraphe); }
.pdp-band__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 166px;
	height: 40px;
	border-radius: 2px;
	background: var(--bva-white);
	color: #0c0c0c;
	font: 500 14px/1.3 var(--bva-font-sans);
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 835px) {
	.pdp-band__inner { min-height: 480px; padding: 0 var(--pdp-gutter) 32px; }
}

.pdp-journal {
	max-width: 1440px;
	margin: 0 auto var(--pdp-space);
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.pdp-journal__title {
	margin: 0;
	width: 100%;
	font: 500 24px/1.1 var(--bva-font-sans);
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	color: var(--bva-black);
}
.pdp-journal__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 12px;
}
.pdp-journal__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--bva-black);
	text-decoration: none;
}
.pdp-journal__media {
	display: block;
	width: 100%;
	aspect-ratio: 331 / 265;
	border-radius: 4px;
	background-color: var(--bva-myrtille-100);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Mock staggers the grid: even cards (2,4) are taller than odd (1,3) */
.pdp-journal__card:nth-child(even) .pdp-journal__media { aspect-ratio: 331 / 321; }
.pdp-journal__content { display: flex; flex-direction: column; gap: 12px; }
.pdp-journal__category { font: var(--bva-t-label); text-transform: uppercase; }
.pdp-journal__heading { font: var(--bva-t-header-s); font-weight: 600; }
a.pdp-journal__card:hover .pdp-journal__heading { text-decoration: underline; }

@media (max-width: 835px) {
	.pdp-journal { padding: 0 var(--pdp-gutter); }
	.pdp-journal__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}
@media (max-width: 560px) {
	/* Swipeable carousel (.pdp-carousel): ~1.5 cards in view. */
	.pdp-journal__grid { --pdp-carousel-card: 66%; }
	/* Flatten the desktop stagger so carousel cards share one height. */
	.pdp-journal__card:nth-child(even) .pdp-journal__media { aspect-ratio: 331 / 265; }
}

/* ------------------------------------------------------------ *\
	Price box — price + offers-CTA encart inside the hero info column,
	swapped in for the description's price line. Self-contained accent
	(--pricebox-*); clear the "Prix mis en avant" field to restore the
	V3 price line + classic buy button.
\* ------------------------------------------------------------ */

/* When the encart is on: hide the description's price line (last paragraph) and the
   add-to-cart form (kept in the DOM — the popup needs #form-cart / #cart-product-id). */
.pdp-info--pricebox .pdp-desc > p:last-child { display: none; }
.pdp-info--pricebox .pdp-cart { display: none; }

.pdp-pricebox {
	--pricebox-accent: var(--bva-vitamine-400);
	/* Cream surface = same as the page, so the box fades out and only the
	   price + CTA read on the canela background. */
	--pricebox-surface: var(--bva-canelle-100);
	font-family: var(--bva-font-sans);
	color: var(--bva-black);
}
.pdp-pricebox__card {
	width: 100%;
	padding: 8px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	background: var(--pricebox-surface);
	text-align: center;
}
.pdp-pricebox__price {
	margin: 0;
	font: 400 28px/1.2 var(--bva-font-sans);
}
.pdp-pricebox__amount {
	color: var(--pricebox-accent);
	font-weight: 600;
	font-size: 1.4em;
}
.pdp-pricebox__unit { color: var(--bva-black); }

/* Match the maquette's primary CTA (.pdp-btn-cart): black, square-ish, same height/typo. */
.pdp-pricebox__cta {
	width: 100%;
	height: 60px;
	border: 0;
	border-radius: 2px;
	background: var(--bva-black);
	color: var(--bva-white);
	font: var(--bva-t-paragraphe);
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pdp-pricebox__cta:hover { opacity: 0.9; }

/* ------------------------------------------------------------ *\
	Mobile carousel — reusable horizontal scroll-snap primitive.
	A grid opts in with .pdp-carousel and sets the card width via
	--pdp-carousel-card (default 84%); the bleed is derived from
	--pdp-gutter so the row reaches the screen edge and the next card
	peeks, regardless of the section's gutter. The dashes indicator
	(.pdp-carousel-dots) is injected by product.js, one dash per card.
\* ------------------------------------------------------------ */
.pdp-carousel-dots { display: none; }

@media (max-width: 560px) {
	.pdp-carousel {
		display: flex;
		flex-wrap: nowrap;
		/* flex-start, not the grids' desktop justify-content (e.g. center on
		   before-after) — centring traps the first card off the scroll origin. */
		justify-content: flex-start;
		align-self: stretch;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--pdp-gutter));
		padding-inline: var(--pdp-gutter);
		scrollbar-width: none;
	}
	.pdp-carousel::-webkit-scrollbar { display: none; }
	.pdp-carousel > * { flex: 0 0 var(--pdp-carousel-card, 84%); scroll-snap-align: start; }

	/* Breathing room so the dashes don't butt against the next section (e.g. the
	   footer FAQ right below the journal carousel). */
	.pdp-carousel-dots { display: flex; justify-content: center; gap: 4px; margin: 24px 0; }
	.pdp-carousel-dots__dot {
		width: 24px;
		height: 2px;
		padding: 0;
		border: 0;
		background: rgba(0, 0, 0, 0.16);
		cursor: pointer;
	}
	.pdp-carousel-dots__dot.is-active { background: var(--bva-black); }
}

/* ------------------------------------------------------------ *\
	Sticky add-to-cart — mobile-only bar pinned to the bottom of the
	viewport, revealed by JS (.is-visible) once the hero CTA scrolls out
	of view. Opens the same offers popup as the hero (.btn-add-cart).
\* ------------------------------------------------------------ */
.pdp-sticky-cart {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	display: none;
	padding: 12px var(--pdp-gutter);
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	background: var(--bva-canelle-100);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
}
.pdp-sticky-cart__btn {
	width: 100%;
	height: 56px;
	border: 0;
	border-radius: 2px;
	background: var(--bva-black);
	color: var(--bva-white);
	font: var(--bva-t-paragraphe);
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pdp-sticky-cart__btn:hover { opacity: 0.9; }
@media (max-width: 835px) {
	.pdp-sticky-cart.is-visible { display: block; }
	/* Hide the sticky buy-bar while any full-screen overlay is open — the
	   drawer, search and offers popup all add body.no-scroll. Belt-and-suspenders
	   with the drawer's z-index:80 lift so the bar never shows over an overlay. */
	body.no-scroll .pdp-sticky-cart { display: none; }
}