/**
 * La Peau Showcase — frontend styles.
 *
 * Scoped under .lpsps (stories/galleries/accordions) and .lpr (results).
 * Design tokens (--lp-*) are injected site-wide from Global Design Settings
 * and overridden per-instance by inline styles. Fallbacks below keep block
 * previews and no-settings installs looking correct.
 */

.lpsps,
.lpsps *,
.lpr,
.lpr * {
	box-sizing: border-box;
}

.lpsps,
.lpr {
	/* Fallback tokens (global settings override these). */
	--lp-bg: #f7f4ef;
	--lp-heading: #2b2622;
	--lp-body: #6f675f;
	--lp-accent: #b08d57;
	--lp-btn: #2b2622;
	--lp-btn-hover: #473f38;
	--lp-btn-text: #ffffff;
	--lp-line: rgba(43, 38, 34, 0.14);
	--lp-muted: #6f675f;
	--lp-radius: 24px;
	--lp-surface: rgba(255, 255, 255, 0.55);
	--lp-spacing: 28px;
	--lp-type-scale: 1;
	--lp-space-scale: 1;
	--lp-thumb: 72px;
	/* Per-instance fallbacks. */
	--lp-heading-size: 44px;
	--lp-body-size: 16px;
	--lp-container: 1240px;
	--lp-scale: 1.08;
	--lp-anim: 700ms;

	background: var(--lp-bg);
	color: var(--lp-body);
	font-family: "Spectral", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: calc(var(--lp-body-size) * var(--lp-type-scale));
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	padding: calc(var(--lp-spacing) * 2 * var(--lp-space-scale)) 0;
}

.lpsps__inner,
.lpr__inner {
	max-width: var(--lp-container);
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 48px);
}

.lpsps__inner {
	display: grid;
	/* 50/50 split, Rhode-style. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 48px);
	align-items: start;
}

/* Layout variants ------------------------------------------------------- */
.lpsps--text-left .lpsps__gallery { order: 2; }
.lpsps--text-left .lpsps__content { order: 1; }

.lpsps--full .lpsps__inner { grid-template-columns: 1fr; }
.lpsps--full .lpsps__gallery { position: static; top: auto; }
.lpsps--gallery-only .lpsps__inner,
.lpsps--accordion-only .lpsps__inner { grid-template-columns: 1fr; }

/* -------------------------------------------------------------------------
 * Left: sticky gallery
 * ---------------------------------------------------------------------- */

.lpsps__gallery {
	position: sticky;
	top: 96px;
	width: 100%;
	display: block;
}

/* Large main visual. Thumbnails are overlaid separately and never size this card. */
.lpsps__stage {
	overflow: hidden;
	border-radius: var(--lp-radius);
	background: #f5f2ee;
	width: 100%;
	height: var(--lp-img-h, 72vh);
	min-height: 640px;
}

.lpsps__main {
	width: 100%;
	height: 100%;
	will-change: transform;
}

.lpsps__media,
.lpsps__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform-origin: center center;
	transition: opacity 0.45s ease;
}

.lpsps__embed { height: 100%; }
.lpsps__embed iframe,
.lpsps__embed > * { width: 100% !important; height: 100% !important; border: 0; }

.lpsps__placeholder {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08));
}

.lpsps__main.is-fading .lpsps__media { opacity: 0; }

.lpsps__thumbs {
	position: absolute;
	left: 24px;
	top: 24px;
	z-index: 5;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lpsps__thumb {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--lp-line);
	border-radius: 16px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.02);
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
	opacity: 0.7;
}

.lpsps__thumb img { width: 72px !important; height: 72px !important; object-fit: cover; display: block; border-radius: 16px; }

.la-peau-product-story__gallery {
	position: sticky;
	top: 96px;
	width: 100%;
}

.la-peau-product-story__main-media {
	width: 100%;
	height: 72vh;
	min-height: 640px;
	overflow: hidden;
	border-radius: 24px;
	background: #f5f2ee;
}

.la-peau-product-story__main-media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
}

.la-peau-product-story__thumbs {
	position: absolute;
	left: 24px;
	top: 24px;
	z-index: 5;
}

.la-peau-product-story__thumbs img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: 16px;
}

.lpsps__thumb-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
}

.lpsps__thumb:hover,
.lpsps__thumb:focus-visible { opacity: 1; outline: none; }
.lpsps__thumb.is-active { opacity: 1; border: 2px solid var(--lp-heading); }

.lpsps__thumb-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* -------------------------------------------------------------------------
 * Right: content
 * ---------------------------------------------------------------------- */

/* Soft rounded information panel (title, copy, CTA, badges, accordion). */
.lpsps__content {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	padding: clamp(24px, 3vw, 48px);
}

.lpsps__content.product-info-card,
.product-info-card {
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	border-radius: 28px;
	scrollbar-width: none;
}

.lpsps__content.product-info-card::-webkit-scrollbar,
.product-info-card::-webkit-scrollbar {
	display: none;
}

/* Gallery-only / accordion-only blocks keep no panel chrome. */
.lpsps--gallery-only .lpsps__content,
.lpsps--accordion-only .lpsps__content {
	background: none;
	border: 0;
	padding: 0;
}

.lpsps__intro {
	padding-bottom: calc(var(--lp-spacing) * 1.2 * var(--lp-space-scale));
	border-bottom: 1px solid var(--lp-line);
}

.lpsps__intro.product-info-top,
.product-info-top {
	min-height: calc(100vh - 180px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lpsps__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.lpsps__badge {
	font-family: "Jost", sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 12px;
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	color: var(--lp-muted);
}

.lpsps__eyebrow {
	font-family: "Jost", sans-serif;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lp-accent);
	margin: 0 0 12px;
}

.lpsps__title {
	font-family: "Fraunces", "Spectral", Georgia, serif;
	font-weight: 400;
	font-size: calc(var(--lp-heading-size) * var(--lp-type-scale));
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--lp-heading);
}

.lpsps__price {
	font-family: "Jost", sans-serif;
	font-size: calc(20px * var(--lp-type-scale));
	letter-spacing: 0.02em;
	margin-bottom: 10px;
	color: var(--lp-heading);
}

.lpsps__price del { opacity: 0.5; margin-right: 8px; }

.lpsps__stock { font-family: "Jost", sans-serif; font-size: 13px; margin-bottom: 18px; color: var(--lp-muted); }
.lpsps__stock .stock.in-stock { color: #2e7d32; }
.lpsps__stock .stock.out-of-stock { color: #b3261e; }

.lpsps__desc { color: var(--lp-muted); margin-bottom: 26px; }
.lpsps__desc p { margin: 0 0 1em; }

.lpsps__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.lpsps__cta .lpsps__btn,
.lpsps__cta .lpsps-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	text-align: center;
	font-family: "Jost", sans-serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 18px 28px;
	border: 1px solid var(--lp-btn);
	border-radius: 999px;
	background: var(--lp-btn);
	color: var(--lp-btn-text);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.lpsps__cta .lpsps__btn:hover,
.lpsps__cta .lpsps-buy:hover { transform: translateY(-1px); background: var(--lp-btn-hover); border-color: var(--lp-btn-hover); }

.lpsps__cta .lpsps__btn--ghost { background: transparent; color: var(--lp-heading); border-color: var(--lp-line); }
.lpsps__cta .lpsps__btn--ghost:hover { background: transparent; color: var(--lp-heading); border-color: var(--lp-heading); }

.lpsps__cta .lpsps-buy.added { background: transparent; color: var(--lp-heading); }

/* -------------------------------------------------------------------------
 * Accordion
 * ---------------------------------------------------------------------- */

.lpsps__accordion {
	margin-top: calc(var(--lp-spacing) * var(--lp-space-scale));
	border-top: 1px solid var(--lp-line);
}
.lpsps__accordion.product-info-accordions,
.product-info-accordions { margin-top: 40px; }
.lpsps--accordion-only .lpsps__accordion { margin-top: 0; }

.lpsps__acc-item { border-bottom: 1px solid var(--lp-line); }
.lpsps__acc-heading { margin: 0; font-size: inherit; font-weight: inherit; }

.lpsps__acc-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(18px, calc(var(--lp-spacing) * 0.85), 26px) 2px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--lp-heading);
	text-align: left;
}

.lpsps__acc-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Jost", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lpsps__acc-icon { width: 18px; height: 18px; font-size: 18px; line-height: 1; opacity: 0.75; }
.lpsps__acc-icon--text { width: auto; }

.lpsps__acc-mark {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid var(--lp-line);
	border-radius: 50%;
	background: var(--lp-surface);
	transition: border-color 0.3s ease, background 0.3s ease;
}

.lpsps__acc-mark::before,
.lpsps__acc-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--lp-heading);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.lpsps__acc-mark::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.lpsps__acc-mark::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }

.lpsps__acc-trigger:hover .lpsps__acc-mark,
.lpsps__acc-trigger:focus-visible .lpsps__acc-mark { border-color: var(--lp-heading); }

.lpsps__acc-trigger:focus-visible { outline: 2px solid var(--lp-heading); outline-offset: 3px; border-radius: 4px; }

.lpsps__acc-item.is-open .lpsps__acc-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.lpsps__acc-panel { overflow: hidden; }
.lpsps__acc-panel[hidden] { display: none; }

.lpsps__acc-content {
	padding: 2px 2px calc(var(--lp-spacing) * 0.9);
	color: var(--lp-muted);
	max-width: 60ch;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.3s ease;
}
.lpsps__acc-item.is-open .lpsps__acc-content { opacity: 1; transform: translateY(0); }
.lpsps__acc-content p { margin: 0 0 1em; }
.lpsps__acc-content p:last-child { margin-bottom: 0; }
.lpsps__acc-content ul,
.lpsps__acc-content ol { margin: 0 0 1em; padding-left: 1.25em; }
.lpsps__acc-content li { margin: 0 0 0.4em; }
.lpsps__acc-content a { color: var(--lp-accent); text-decoration: underline; }
.lpsps__acc-content strong { color: var(--lp-heading); }

.lpsps--animate .lpsps__acc-panel {
	transition: height var(--lp-anim) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--lp-anim) ease;
}
.lpsps--animate .lpsps__acc-panel.is-collapsing,
.lpsps--animate .lpsps__acc-panel.is-expanding { opacity: 0.6; }

/* -------------------------------------------------------------------------
 * Scroll reveal (fade-up) — only when the section opts in via data-fade.
 * ---------------------------------------------------------------------- */

.lpsps--animate[data-fade="1"] [data-lpsps-reveal],
.lpr--animate [data-lpsps-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--lp-anim, 700ms) ease, transform var(--lp-anim, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lpsps--animate[data-fade="1"] [data-lpsps-reveal].is-visible,
.lpr--animate [data-lpsps-reveal].is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
 * Results section (.lpr)
 * ---------------------------------------------------------------------- */

.lpr__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.lpr--no-image .lpr__inner { grid-template-columns: 1fr; max-width: 900px; text-align: center; }
.lpr--img-right .lpr__media { order: 2; }
.lpr--img-right .lpr__body { order: 1; }

.lpr__img { display: block; width: 100%; height: auto; border-radius: var(--lp-radius); }

.lpr__heading {
	font-family: "Fraunces", "Spectral", Georgia, serif;
	font-weight: 400;
	font-size: calc(38px * var(--lp-type-scale));
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--lp-heading);
}

.lpr__intro { color: var(--lp-muted); margin-bottom: 28px; }

.lpr__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(18px, 3vw, 36px);
}
.lpr--no-image .lpr__stats { justify-content: center; }

.lpr__stat { display: flex; flex-direction: column; gap: 6px; }

.lpr__percent {
	font-family: "Fraunces", "Spectral", Georgia, serif;
	font-weight: 400;
	font-size: calc(var(--lpr-percent-size, 64px) * var(--lp-type-scale));
	line-height: 1;
	color: var(--lpr-percent, var(--lp-accent));
}

.lpr__desc {
	font-family: "Jost", sans-serif;
	font-size: calc(var(--lpr-desc-size, 16px) * var(--lp-type-scale));
	color: var(--lp-muted);
	line-height: 1.4;
}

.lpr__note { font-size: 12px; color: var(--lp-muted); opacity: 0.8; margin: 26px 0 0; }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Stack: image first, info below. */
	.lpsps__inner { grid-template-columns: 1fr; gap: 24px; }
	.lpsps__gallery { position: static; top: auto; min-height: 0; }
	.lpsps--text-left .lpsps__gallery,
	.lpsps--text-left .lpsps__content { order: initial; }
	.lpsps__stage { order: 1; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
	.lpsps__content { padding: clamp(20px, 6vw, 32px); }
	.lpsps__content.product-info-card,
	.product-info-card {
		max-height: none;
		overflow-y: visible;
	}
	.lpsps__intro.product-info-top,
	.product-info-top {
		min-height: 0;
		display: block;
	}
	.lpsps__thumbs { position: static; flex-direction: row; max-width: 100%; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.lpsps__thumb { flex: 0 0 auto; width: 72px; height: 72px; }
	.lpsps__title { font-size: clamp(30px, 9vw, calc(var(--lp-heading-size) * var(--lp-type-scale))); }
	.lpsps__main { transform: none !important; }
	.lpsps__media { transform: none !important; }

	.lpr__inner { grid-template-columns: 1fr; gap: 28px; }
	.lpr--img-right .lpr__media,
	.lpr--img-right .lpr__body { order: initial; }
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lpsps__media { transform: none !important; }
	.lpsps--animate [data-lpsps-reveal],
	.lpr--animate [data-lpsps-reveal] { opacity: 1; transform: none; transition: none; }
	.lpsps--animate .lpsps__acc-panel { transition: none; }
}