/**
 * Serenité Labs Nutrition — global layout rhythm
 *
 * Guided by the live PDP (TB section 109):
 * - Desktop side inset ≈ 303px on site_width 1800px → ~1194px measure
 * - Small-screen side inset ≈ 30px
 * - Vertical breathing room ≈ 80–120px section pads
 *
 * Applies to current pages/posts and future ones via Default Page/Post layouts.
 */

:root {
	--sln-color-surface: var(--awb-color1, #ffffff);
	--sln-color-surface-muted: var(--awb-color2, #f9f9fb);
	--sln-color-canvas: var(--awb-color3, #f2f3f5);
	--sln-color-accent-green: var(--awb-color4, #65bd7d);
	--sln-color-accent-blue: var(--awb-color5, #4c7e99);
	--sln-color-ink-soft: var(--awb-color6, #434549);
	--sln-color-ink: var(--awb-color7, #212326);
	--sln-color-ink-strong: var(--awb-color8, #141617);
	--sln-color-header: var(--awb-custom_color_1, #9eb3bf);

	--sln-font-display: "Playfair Display", var(--awb-typography1-font-family, Georgia), serif;
	--sln-font-body: Inter, var(--awb-typography2-font-family, system-ui), sans-serif;

	--sln-measure: 72rem; /* ~1152px — aligns with PDP content column */
	--sln-measure-narrow: 42rem;
	--sln-gutter: clamp(1.5rem, 4vw, 3rem);
	--sln-section-y: clamp(3.5rem, 8vw, 6.5rem);
	--sln-stack: 1.25rem;
	--sln-radius: 0;
}

/* -------------------------------------------------------------------------- */
/* Default Page / Post content shell (TB layout)                              */
/* -------------------------------------------------------------------------- */

.sln-page-shell,
.sln-post-shell {
	background: var(--sln-color-surface);
	color: var(--sln-color-ink);
}

.sln-page-shell .fusion-title-heading,
.sln-post-shell .fusion-title-heading,
.sln-page-shell h1.entry-title,
.sln-post-shell h1.entry-title {
	font-family: var(--sln-font-display);
	font-weight: 500;
	color: var(--sln-color-ink-strong);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 1.25rem;
}

.fusion-content-tb.sln-prose,
.sln-page-shell .fusion-content-tb,
.sln-post-shell .fusion-content-tb,
.sln-prose {
	font-family: var(--sln-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--sln-color-ink);
	max-width: var(--sln-measure-narrow);
}

/* Avada Live Builder compositions must not inherit the prose reading measure */
.fusion-content-tb.sln-prose:has(.fusion-fullwidth),
.fusion-content-tb.sln-prose:has(.fusion-builder-row),
.sln-page-shell .fusion-content-tb:has(.fusion-fullwidth),
.sln-page-shell .fusion-content-tb:has(.fusion-builder-row),
.sln-prose:has(.fusion-fullwidth),
.sln-prose:has(.fusion-builder-row) {
	max-width: none;
	width: 100%;
}

.sln-prose > *:first-child {
	margin-top: 0;
}

.sln-prose > *:last-child {
	margin-bottom: 0;
}

.sln-prose p,
.sln-prose ul,
.sln-prose ol {
	margin: 0 0 var(--sln-stack);
}

.sln-prose h2,
.sln-prose h3,
.sln-prose h4 {
	font-family: var(--sln-font-display);
	color: var(--sln-color-ink-strong);
	line-height: 1.25;
	margin: 2rem 0 0.75rem;
}

.sln-prose a {
	color: var(--sln-color-accent-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.sln-prose a:hover {
	color: var(--sln-color-ink-strong);
}

.sln-prose ul,
.sln-prose ol {
	padding-left: 1.25rem;
}

/* -------------------------------------------------------------------------- */
/* Global consistency on non-builder / Woo chrome                             */
/* -------------------------------------------------------------------------- */

body.theme-avada #main {
	background: var(--sln-color-surface);
}

/* Keep legal / CMS pages from going edge-to-edge when TB layout is inactive */
body.page:not(.home) #main > .fusion-row,
body.single-post #main > .fusion-row {
	max-width: var(--sln-measure);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sln-gutter);
	padding-right: var(--sln-gutter);
}

body.page:not(.home) .post-content,
body.single-post .post-content {
	font-family: var(--sln-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--sln-color-ink);
	max-width: var(--sln-measure-narrow);
	padding-top: var(--sln-section-y);
	padding-bottom: var(--sln-section-y);
}

/* Full Avada Builder pages: drop the prose clamp so Containers can use the row */
body.page:not(.home) .post-content:has(.fusion-fullwidth),
body.page:not(.home) .post-content:has(.fusion-builder-row),
body.page:not(.home) .post-content:has(.fusion-flex-container) {
	max-width: none;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

body.page:not(.home) #main > .fusion-row:has(.fusion-fullwidth),
body.page:not(.home) #main > .fusion-row:has(.fusion-builder-row) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.page:not(.home) .post-content h1,
body.single-post .post-content h1,
body.page:not(.home) .entry-title,
body.single-post .entry-title {
	font-family: var(--sln-font-display);
	font-weight: 500;
	color: var(--sln-color-ink-strong);
}

/* PDP-aligned product title fallback already inlined in functions.php —
   reinforce measure on related prose blocks under products. */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-Tabs-panel {
	font-family: var(--sln-font-body);
	line-height: 1.65;
	color: var(--sln-color-ink);
}

/* Soft section separators for stacked page shells */
.sln-page-shell + .sln-page-shell,
.sln-post-shell .sln-related {
	border-top: 1px solid color-mix(in srgb, var(--sln-color-header) 35%, transparent);
}


/* ========================================================================== */
/* QC fix Oct 2026: never trap Avada Builder page content in prose measure     */
/* ========================================================================== */
.fusion-content-tb.sln-page-content,
.fusion-content-tb.sln-prose,
.sln-page-shell .fusion-content-tb,
.sln-page-shell .fusion-content-tb.sln-prose,
.sln-page-shell .fusion-content-tb.sln-page-content {
	max-width: none !important;
	width: 100% !important;
}

body.page:not(.home) .post-content {
	max-width: none !important;
	width: 100% !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.page:not(.home) #main > .fusion-row {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* True prose CMS pages without Builder rows keep a readable measure */
body.page:not(.home) .post-content:not(:has(.fusion-builder-row)):not(:has(.fusion-fullwidth)) {
	max-width: var(--sln-measure-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--sln-section-y);
	padding-bottom: var(--sln-section-y);
	padding-left: var(--sln-gutter);
	padding-right: var(--sln-gutter);
}

/* -------------------------------------------------------------------------- */
/* EVENING PDP — potency callouts under product gallery                       */
/* -------------------------------------------------------------------------- */

.sln-potency-callouts {
	--sln-potency-ink: var(--sln-color-ink-strong, #141617);
	--sln-potency-box: var(--sln-color-surface, #ffffff);
	margin: 1.25rem 0 0.75rem;
	padding: 1.15rem 1.1rem 1rem;
	background: var(--sln-color-surface-muted, #f9f9fb);
	border-radius: 12px;
	color: var(--sln-potency-ink);
	font-family: var(--sln-font-body);
}

.sln-potency-callouts__lede {
	margin: 0 0 1rem;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--sln-potency-ink);
}

.sln-potency-callouts__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.sln-potency-callouts__box {
	background: var(--sln-potency-box);
	border-radius: 10px;
	padding: 1.15rem 1.1rem 1rem;
	text-align: left;
}

.sln-potency-callouts__value {
	display: block;
	font-size: clamp(1.75rem, 4vw, 2.15rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--sln-potency-ink);
}

.sln-potency-callouts__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--sln-potency-ink);
}

@media (max-width: 480px) {
	.sln-potency-callouts__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- */
/* Home hero — greenhouse atmosphere + product duo                            */
/* -------------------------------------------------------------------------- */

.sln-home-hero {
	--sln-hero-forest: #4c7e99;
	--sln-hero-forest-hover: #3a647a;
}

.sln-home-hero .fusion-title-heading,
.sln-home-hero .fusion-text,
.sln-home-hero .fusion-text p {
	color: #ffffff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

.sln-home-hero--mobile .fusion_builder_column_1_1 {
	max-width: 28rem;
	margin-inline: auto;
}

.sln-home-hero--desktop .fusion_builder_column_1_2 .fusion-title-heading {
	text-align: left;
}

.sln-home-hero--desktop .fusion-separator {
	margin-left: 0;
}

.sln-home-hero .fusion-imageframe img {
	filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
}

.sln-home-hero .fusion-button-wrapper {
	display: inline-flex;
	vertical-align: top;
}

.sln-home-hero--mobile .fusion-button-wrapper {
	display: block;
	width: 100%;
}

.sln-home-hero--mobile .fusion-button-wrapper .fusion-button {
	width: 100%;
	justify-content: center;
}

.sln-home-hero .fusion-separator {
	max-width: 4.5rem;
}

.sln-home-hero--mobile .fusion-separator {
	margin-left: auto;
	margin-right: auto;
}

.sln-home-hero--desktop .fusion-separator {
	margin-left: 0;
	margin-right: auto;
}

/* SLN: legacy medium-blue → brand blue */
#wpadminbar .awb-site-mode-badge-coming-soon > .ab-item {
	background-color: #4c7e99 !important;
}