/* LUMIADE product-description block styles — clinical restyle (Phase 3).
   Loaded in the editor canvas (so the custom blocks render styled while editing)
   AND on the frontend when a block is present. This file is now the single
   source for all .lumiade-pd-* rules too (the lumiade-homepage.css legacy copies
   were deleted in Phase 3 Task 4). Newer sections (ritual, results, faq,
   before/after, ugc, trust, gallery) are styled ONLY here as well.
   .lumiade-ugc rules remain for a block no longer used on PDPs — kept in case
   the community strip returns; harmless if unreferenced.
   KEEP SELECTORS TO UNIQUE .lumiade-* CLASSES ONLY — never a bare h2/p/ul —
   because this file loads globally, not inside the description wrapper. */

:root {
	--lumiade-ink: #191a1c;
	--lumiade-navy: #191a1c;
	--lumiade-muted: #6b6f6d;
	--lumiade-soft: #f3eee5;
	--lumiade-paper: #ffffff;
	--lumiade-line: #e5e5e2;
	--lumiade-sage: #6b6f6d;
	--lumiade-gold: #a07c4f;
	--lumiade-radius: 0px;
	--lumiade-radius-sm: 0px;
	--lumiade-fs-eyebrow: 13px;
	--lumiade-fs-sm: 15px;
	--lumiade-fs-base: 17px;
	--lumiade-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* — Icon mask registry (single source; keep in sync with blocks.js LUMIADE_ICONS) — */
	--lumiade-mask-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.5 13.7 7l5.5 1.7-5.5 1.7L12 15.9l-1.7-5.5L4.8 8.7 10.3 7 12 1.5Zm6.5 11 .9 2.8 2.8.9-2.8.9-.9 2.8-.9-2.8-2.8-.9 2.8-.9.9-2.8Z'/%3E%3C/svg%3E");
	--lumiade-mask-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.1 6.7 8.4a7.5 7.5 0 1 0 10.6 0L12 3.1Zm0 15.4a4.5 4.5 0 0 1-4.5-4.5h1.6A2.9 2.9 0 0 0 12 16.9v1.6Z'/%3E%3C/svg%3E");
	--lumiade-mask-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 3c-9 0-14 4.6-14 12 0 1 .1 1.9.4 2.8L4 20.2l1.4 1.4 2.4-2.4c.9.3 1.8.4 2.8.4 7.4 0 12-5 12-14 0-.6 0-1.2-.1-1.8C22.2 3.1 20.6 3 20 3Zm-9.4 13.6C11.9 12 15 9 19 8c-2 4-5 7.4-8.4 8.6Z'/%3E%3C/svg%3E");
	--lumiade-mask-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 4 5v6c0 5.2 3.4 9.5 8 11 4.6-1.5 8-5.8 8-11V5l-8-3Zm-1.1 13.8-3.7-3.7 1.4-1.4 2.3 2.3 4.9-4.9 1.4 1.4-6.3 6.3Z'/%3E%3C/svg%3E");
	--lumiade-mask-lift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.7 17.3 9 12l4 4 6.6-6.6V13h2V6h-7v2h3.6L13 13.2l-4-4-6.7 6.7 1.4 1.4Z'/%3E%3C/svg%3E");
	--lumiade-mask-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5.2 3.1 1-1.7L13 12V7Z'/%3E%3C/svg%3E");
	--lumiade-mask-smooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 7c1.5 0 2.3-.8 3-1.5S7.4 4 9 4s2.3.8 3 1.5S13.4 7 15 7s2.3-.8 3-1.5S19.6 4 21 4v2c-1 0-1.5.5-2.1 1.1C18.1 7.9 17.1 9 15 9s-3.1-1.1-3.9-1.9C10.5 6.5 10 6 9 6s-1.5.5-2.1 1.1C6.1 7.9 5.1 9 3 9V7Zm0 5c1.5 0 2.3-.8 3-1.5S7.4 9 9 9s2.3.8 3 1.5 1.4 1.5 3 1.5 2.3-.8 3-1.5S19.6 9 21 9v2c-1 0-1.5.5-2.1 1.1-.8.8-1.8 1.9-3.9 1.9s-3.1-1.1-3.9-1.9C10.5 11.5 10 11 9 11s-1.5.5-2.1 1.1C6.1 12.9 5.1 14 3 14v-2Zm0 5c1.5 0 2.3-.8 3-1.5s1.4-1.5 3-1.5 2.3.8 3 1.5 1.4 1.5 3 1.5 2.3-.8 3-1.5 1.1-1.5 2.1-1.5v2c-1 0-1.5.5-2.1 1.1-.8.8-1.8 1.9-3.9 1.9s-3.1-1.1-3.9-1.9c-.6-.6-1.1-1.1-2.1-1.1s-1.5.5-2.1 1.1C6.1 17.9 5.1 19 3 19v-2Z'/%3E%3C/svg%3E");
	--lumiade-mask-molecule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a2.6 2.6 0 0 1 2.5 3.3l2.4 1.4a2.6 2.6 0 1 1-.9 1.7l-2.4-1.4a2.6 2.6 0 0 1-3.2 0L8 8.4a2.6 2.6 0 1 1-.9-1.7l2.4-1.4A2.6 2.6 0 0 1 12 2Zm-4.5 12a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Zm9 0a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Z'/%3E%3C/svg%3E");
	--lumiade-mask-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41ZM4 10.5H1v2h3v-2Zm9-9.95h-2V3.5h2V.55Zm7.45 3.91-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79Zm-3.21 13.7 1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4ZM20 10.5v2h3v-2h-3Zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Zm-1 16.95h2V19.5h-2v2.95Zm-7.45-3.91 1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8Z'/%3E%3C/svg%3E");
	--lumiade-mask-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 15.1A8.6 8.6 0 0 1 8.9 3.7 9 9 0 1 0 20.3 15.1Z'/%3E%3C/svg%3E");
	--lumiade-mask-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c4.97 0 9-4.03 9-9-4.97 0-9 4.03-9 9ZM5.6 10.25c0 1.38 1.12 2.5 2.5 2.5.53 0 1.01-.16 1.42-.44l-.02.19c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5l-.02-.19c.41.28.89.44 1.42.44 1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.25 1.43-2.25 0-1.38-1.12-2.5-2.5-2.5-.53 0-1.01.16-1.42.44l.02-.19C14.5 2.12 13.38 1 12 1S9.5 2.12 9.5 3.5l.02.19c-.41-.28-.89-.44-1.42-.44-1.38 0-2.5 1.12-2.5 2.5 0 1 .59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25ZM12 5.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8s1.12-2.5 2.5-2.5ZM3 13c0 4.97 4.03 9 9 9 0-4.97-4.03-9-9-9Z'/%3E%3C/svg%3E");
}

/* Map the registry onto both class prefixes (ingredient cards use
   --lumiade-ing-icon; benefits/trust use --lumiade-feat-mask). */
.lumiade-ing-glow { --lumiade-ing-icon: var(--lumiade-mask-glow); }
.lumiade-ing-drop { --lumiade-ing-icon: var(--lumiade-mask-drop); }
.lumiade-ing-leaf { --lumiade-ing-icon: var(--lumiade-mask-leaf); }
.lumiade-ing-shield { --lumiade-ing-icon: var(--lumiade-mask-shield); }
.lumiade-ing-lift { --lumiade-ing-icon: var(--lumiade-mask-lift); }
.lumiade-ing-clock { --lumiade-ing-icon: var(--lumiade-mask-clock); }
.lumiade-ing-smooth { --lumiade-ing-icon: var(--lumiade-mask-smooth); }
.lumiade-ing-molecule { --lumiade-ing-icon: var(--lumiade-mask-molecule); }
.lumiade-ing-sun { --lumiade-ing-icon: var(--lumiade-mask-sun); }
.lumiade-ing-moon { --lumiade-ing-icon: var(--lumiade-mask-moon); }
.lumiade-ing-flower { --lumiade-ing-icon: var(--lumiade-mask-flower); }
.lumiade-feat-glow { --lumiade-feat-mask: var(--lumiade-mask-glow); }
.lumiade-feat-drop { --lumiade-feat-mask: var(--lumiade-mask-drop); }
.lumiade-feat-leaf { --lumiade-feat-mask: var(--lumiade-mask-leaf); }
.lumiade-feat-shield { --lumiade-feat-mask: var(--lumiade-mask-shield); }
.lumiade-feat-lift { --lumiade-feat-mask: var(--lumiade-mask-lift); }
.lumiade-feat-clock { --lumiade-feat-mask: var(--lumiade-mask-clock); }
.lumiade-feat-smooth { --lumiade-feat-mask: var(--lumiade-mask-smooth); }
.lumiade-feat-molecule { --lumiade-feat-mask: var(--lumiade-mask-molecule); }
.lumiade-feat-sun { --lumiade-feat-mask: var(--lumiade-mask-sun); }
.lumiade-feat-moon { --lumiade-feat-mask: var(--lumiade-mask-moon); }
.lumiade-feat-flower { --lumiade-feat-mask: var(--lumiade-mask-flower); }

/* Dream hero (block; classes shared with the legacy native-group markup). */
.lumiade-pd-dream {
	background: transparent;
	border: 0;
	margin: 0 0 28px;
	padding: 0;
}
/* !important below: lumiade-homepage.css's legacy
   ".woocommerce-Tabs-panel--description p" fallback rule (2 ancestor
   classes + element = 0,2,1) outranks a single .lumiade-* class (0,1,0) on
   specificity alone. The fallback only declares color, font-size,
   line-height, and margin, so only those four properties need protecting
   per selector below; font-weight and other properties are never
   contested and stay unmarked (Phase 3 Task 4 discovery — same class of
   cascade fight the .lumiade-faq margin override below already fixes).
   Protected here: .lumiade-pd-eyebrow color, font-size; .lumiade-pd-headline
   font-size, line-height, margin; .lumiade-pd-note color, font-size, margin.
   .lumiade-pd-lead's color/font-size values happen to match the fallback's,
   so losing there is a no-op; its line-height/margin are NOT protected
   and are currently overridden by the fallback (out of scope for this
   pass — see fix report). */
.lumiade-pd-eyebrow {
	color: var(--lumiade-muted) !important;
	font-size: var(--lumiade-fs-eyebrow) !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 8px;
	text-transform: uppercase;
}
.lumiade-pd-headline {
	color: var(--lumiade-navy);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-2xl) !important;
	font-weight: 420;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
}
.lumiade-pd-lead {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-base);
	line-height: 1.65;
	margin: 0;
}
.lumiade-pd-note {
	color: var(--lumiade-muted) !important;
	font-size: var(--lumiade-fs-sm) !important;
	line-height: 1.5;
	margin: 26px 0 0 !important;
}

/* At-a-glance strip (2–4 items; auto-fit keeps equal columns). */
.lumiade-glance {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin: 0 0 8px;
	overflow: hidden;
}
.lumiade-glance-item {
	border-right: 1px solid var(--lumiade-line);
	padding: 14px 12px;
	text-align: center;
}
.lumiade-glance-item:last-child {
	border-right: 0;
}
.lumiade-glance-item span {
	color: var(--lumiade-muted);
	display: block;
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.lumiade-glance-item strong {
	color: var(--lumiade-navy);
	display: block;
	font-size: var(--lumiade-fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

/* Ingredient cards. */
ul.lumiade-ing {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.lumiade-ing > li {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	column-gap: 12px;
	display: grid;
	grid-template-columns: 24px 1fr;
	list-style: none;
	margin: 0;
	padding: 14px 16px;
}
ul.lumiade-ing > li::before {
	-webkit-mask: var(--lumiade-ing-icon) center / contain no-repeat;
	mask: var(--lumiade-ing-icon) center / contain no-repeat;
	align-self: start;
	background-color: var(--lumiade-ink);
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	height: 24px;
	margin-top: 1px;
	width: 24px;
}
ul.lumiade-ing > li strong {
	color: var(--lumiade-navy);
	display: block;
	font-size: var(--lumiade-fs-base);
	font-weight: 700;
	grid-column: 2;
	margin-bottom: 3px;
}
ul.lumiade-ing > li span {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	grid-column: 2;
	line-height: 1.5;
}
/* Optional glossary deep-link on the ingredient name (item href). */
ul.lumiade-ing > li strong a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
ul.lumiade-ing > li strong a:hover {
	color: var(--lumiade-muted);
}

/* Benefits list. */
ul.lumiade-ben {
	display: grid;
	gap: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.lumiade-ben > li {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-base);
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding-left: 32px;
	position: relative;
}
ul.lumiade-ben > li::before {
	-webkit-mask: var(--lumiade-feat-mask, none) center / contain no-repeat;
	mask: var(--lumiade-feat-mask, none) center / contain no-repeat;
	background-color: var(--lumiade-ink);
	content: "";
	height: 21px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 21px;
}

/* Ritual steps (counter draws the numbers). */
/* Bottom margin (added 2026-07-13) separates the following section heading.
   Section headings site-wide have their top margin zeroed (lumiade-brand/
   base.css `:where(h1..h4,p){margin-top:0}`, specificity 0,1,0), so vertical
   rhythm is driven by each block's OWN bottom margin. This list had none, so
   the heading after it ("Our standards" on /routine, "Suitable for" on the PDP
   Description tab) collapsed flush against the last step. 40px matches the
   section rhythm used by `.lumiade-faq { margin-top: 40px }` below. */
ol.lumiade-ritual {
	counter-reset: lumiade-step;
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
ol.lumiade-ritual > li {
	column-gap: 14px;
	counter-increment: lumiade-step;
	display: grid;
	grid-template-columns: 34px 1fr;
	list-style: none;
	margin: 0;
}
ol.lumiade-ritual > li::before {
	align-self: start;
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-ink);
	border-radius: 50%;
	color: var(--lumiade-ink);
	content: counter(lumiade-step);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-base);
	font-weight: 600;
	grid-column: 1;
	grid-row: 1 / 3;
	height: 34px;
	line-height: 32px;
	text-align: center;
	width: 34px;
}
ol.lumiade-ritual > li strong {
	color: var(--lumiade-navy);
	display: block;
	font-size: var(--lumiade-fs-base);
	font-weight: 700;
	grid-column: 2;
	margin-bottom: 2px;
	padding-top: 4px;
}
ol.lumiade-ritual > li span {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	grid-column: 2;
	line-height: 1.55;
}

/* Results bar (stat tiles + source note). */
.lumiade-results {
	margin: 0 0 8px;
}
.lumiade-results-grid {
	background: var(--lumiade-soft);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	overflow: hidden;
}
.lumiade-results-item {
	border-right: 1px solid var(--lumiade-line);
	padding: 26px 16px 22px;
	text-align: center;
}
.lumiade-results-item:last-child {
	border-right: 0;
}
.lumiade-results-item strong {
	color: var(--lumiade-ink);
	display: block;
	font-family: var(--lumiade-font-serif);
	font-size: clamp(34px, 4vw, 46px);
	font-weight: 420;
	line-height: 1.1;
	margin-bottom: 4px;
}
.lumiade-results-item span {
	color: var(--lumiade-muted);
	display: block;
	font-size: var(--lumiade-fs-sm);
	line-height: 1.4;
}
.lumiade-results-note {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	line-height: 1.5;
	margin: 8px 0 0;
}

/* FAQ (pattern: group.lumiade-faq > core/details.lumiade-faq-item). */
/* !important overrides the theme's group-margin reset (the heading is the
   group's first child, so its own top margin is zeroed) — separates the
   Q&A block from the community cards above it. */
.lumiade-faq {
	margin-top: 40px !important;
}
.lumiade-faq details.lumiade-faq-item {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	margin: 0 0 10px;
}
.lumiade-faq details.lumiade-faq-item summary {
	align-items: center;
	color: var(--lumiade-navy);
	cursor: pointer;
	display: flex;
	font-size: var(--lumiade-fs-base);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	/* margin: 0 zeroes a stray 24px bottom margin the global content rhythm
	   adds to <summary>, which otherwise inflated each closed row to ~72px. */
	margin: 0;
	min-height: 44px;
	padding: 12px 44px 12px 16px;
	position: relative;
}
.lumiade-faq details.lumiade-faq-item summary::-webkit-details-marker {
	display: none;
}
.lumiade-faq details.lumiade-faq-item summary::after {
	color: var(--lumiade-ink);
	content: "+";
	font-size: 22px;
	line-height: 1;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.lumiade-faq details.lumiade-faq-item[open] summary::after {
	content: "\2013";
}
.lumiade-faq details.lumiade-faq-item p {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-base);
	line-height: 1.6;
	margin: 0;
	padding: 0 16px 14px;
}

/* Before / after comparison. Sits under its own "Before & after" heading
   (16px below it); the following section heading owns the gap beneath. */
figure.lumiade-ba {
	margin: 0;
}

/* Draggable slider (both images set). Left of the divider = Before (top
   layer, clipped at --lumiade-ba-pos), right = After (base layer). The
   transparent range input covers the whole frame, so the touch target is
   the full image. */
.lumiade-ba-slider {
	aspect-ratio: 2 / 3;
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	margin-inline: auto;
	max-width: 440px;
	overflow: hidden;
	position: relative;
}
.lumiade-ba-slider > img,
.lumiade-ba-top img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}
.lumiade-ba-top {
	clip-path: inset(0 calc(100% - var(--lumiade-ba-pos, 50%)) 0 0);
	inset: 0;
	position: absolute;
}
.lumiade-ba-slider .lumiade-ba-tag-before {
	left: 12px;
	right: auto;
}
.lumiade-ba-slider .lumiade-ba-tag-after {
	left: auto;
	right: 12px;
}
.lumiade-ba-divider {
	background: var(--lumiade-paper);
	bottom: 0;
	box-shadow: 0 0 8px rgba(25, 26, 28, 0.30);
	left: var(--lumiade-ba-pos, 50%);
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 2px;
	z-index: 2;
}
.lumiade-ba-handle {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(25, 26, 28, 0.22);
	height: 44px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
}
/* Left/right chevrons inside the handle. */
.lumiade-ba-handle::before,
.lumiade-ba-handle::after {
	border-style: solid;
	border-width: 0 0 2px 2px;
	border-color: var(--lumiade-navy);
	content: "";
	height: 8px;
	position: absolute;
	top: 50%;
	width: 8px;
}
.lumiade-ba-handle::before {
	left: 9px;
	transform: translateY(-50%) rotate(45deg);
}
.lumiade-ba-handle::after {
	right: 9px;
	transform: translateY(-50%) rotate(225deg);
}
.lumiade-ba-range {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: ew-resize;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
	z-index: 3;
}
.lumiade-ba-slider:has(.lumiade-ba-range:focus-visible) {
	outline: 2px solid var(--lumiade-ink);
	outline-offset: 2px;
}
.lumiade-ba-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 100%;
	width: 44px;
}
.lumiade-ba-range::-moz-range-thumb {
	border: 0;
	height: 100%;
	width: 44px;
}

/* Static fallback (one image only). */
.lumiade-ba-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}
.lumiade-ba-item {
	position: relative;
}
.lumiade-ba-item img {
	aspect-ratio: 1;
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}
.lumiade-ba-tag {
	background: var(--lumiade-navy);
	border-radius: 999px;
	color: var(--lumiade-paper);
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 700;
	left: 10px;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
}
.lumiade-ba-caption {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	line-height: 1.5;
	margin: 8px 0 0;
	text-align: left;
}

/* Community (UGC) strip — CSS scroll-snap, no JS. */
ul.lumiade-ugc {
	display: grid;
	gap: 12px;
	grid-auto-columns: min(72%, 270px);
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 0 8px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
ul.lumiade-ugc > li.lumiade-ugc-item {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius);
	list-style: none;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
}
ul.lumiade-ugc > li.lumiade-ugc-item img {
	aspect-ratio: 1.15;
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}
ul.lumiade-ugc > li.lumiade-ugc-item blockquote {
	border: 0;
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-base);
	font-style: italic;
	line-height: 1.5;
	margin: 0;
	padding: 12px 14px 6px;
}
ul.lumiade-ugc > li.lumiade-ugc-item cite {
	color: var(--lumiade-muted);
	display: block;
	font-size: var(--lumiade-fs-eyebrow);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0 14px 14px;
	text-transform: uppercase;
}

/* Trust strip (icon pills; icons via the .lumiade-feat-* registry). */
/* Bottom margin (added 2026-07-13) separates the following section heading —
   same zeroed-heading-top-margin rhythm as ol.lumiade-ritual above. On /routine
   the heading after this ("Why routine beats intensity") was collapsing flush
   against the pills; 40px matches the section rhythm. On the PDP Description
   tab the next block is `.lumiade-faq` (margin-top:40px !important) — adjacent
   margins collapse, so this adds no extra gap there. */
ul.lumiade-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
ul.lumiade-trust > li.lumiade-trust-item {
	align-items: center;
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: 999px;
	color: var(--lumiade-ink);
	display: flex;
	font-size: var(--lumiade-fs-sm);
	font-weight: 600;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 8px 14px 8px 12px;
}
ul.lumiade-trust > li.lumiade-trust-item::before {
	-webkit-mask: var(--lumiade-feat-mask, none) center / contain no-repeat;
	mask: var(--lumiade-feat-mask, none) center / contain no-repeat;
	background-color: var(--lumiade-ink);
	content: "";
	flex: 0 0 18px;
	height: 18px;
	width: 18px;
}

/* Story gallery (pattern: core/gallery.lumiade-gallery polish). */
figure.lumiade-gallery img {
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
}
figure.lumiade-gallery figcaption {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
}

@media (min-width: 720px) {
	ul.lumiade-ing {
		grid-template-columns: 1fr 1fr;
	}
	ul.lumiade-ugc {
		grid-auto-columns: unset;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		overflow-x: visible;
	}
}

/* Expert endorsement (advisor portrait + quote + credential). */
aside.lumiade-expert {
	background: var(--lumiade-soft);
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius);
	display: grid;
	gap: clamp(18px, 3vw, 30px);
	grid-template-columns: minmax(120px, 180px) 1fr;
	margin: 0;
	padding: clamp(20px, 3vw, 30px);
}
.lumiade-expert-media img,
img.lumiade-expert-photo {
	aspect-ratio: 4 / 5;
	border: 1px solid var(--lumiade-line);
	border-radius: var(--lumiade-radius-sm);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}
aside.lumiade-expert > .lumiade-expert-body:only-child {
	grid-column: 1 / -1;
}
blockquote.lumiade-expert-quote {
	border: 0;
	color: var(--lumiade-ink);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-lg);
	font-style: normal;
	font-weight: 420;
	line-height: 1.4;
	margin: 0 0 14px;
	padding: 0;
}
.lumiade-expert-meta strong {
	color: var(--lumiade-ink);
	display: block;
	font-size: var(--lumiade-fs-base);
	font-weight: 700;
}
.lumiade-expert-meta span {
	color: var(--lumiade-muted);
	display: block;
	font-size: var(--lumiade-fs-sm);
	margin-top: 2px;
}
.lumiade-expert-note {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	line-height: 1.5;
	margin: 12px 0 0;
}
@media (max-width: 560px) {
	aside.lumiade-expert {
		grid-template-columns: 1fr;
	}
	.lumiade-expert-media img,
	img.lumiade-expert-photo {
		max-width: 200px;
	}
}

/* Routine-landing closing CTA: black text-CTA convention (spec §4) — ink, body-size, hairline underline.
   Selector prefixed with .lumiade-storefront (0,2,1) rather than bare `a.lumiade-routine-shop-cta` (0,1,1):
   base.css's `.lumiade-storefront a { color: inherit }` is also (0,1,1) and loads after this stylesheet
   in the head (lumiade-blocks-style enqueues with no deps, ahead of the lumiade-brand chain), so equal
   specificity let base.css's `inherit` win on load order alone — verified live before this fix. */
.lumiade-storefront a.lumiade-routine-shop-cta {
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-base);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--lumiade-line);
	text-underline-offset: 4px;
}
.lumiade-storefront a.lumiade-routine-shop-cta:hover {
	text-decoration-color: var(--lumiade-ink);
}