/**
 * Pattern decorations — visual styles that cannot live in theme.json because
 * they target class names emitted by patterns (not core block elements).
 *
 * Why this file exists: any inline style on a block's saved HTML that is NOT
 * derivable from the block's JSON attrs causes the WordPress block validator
 * to flag the block as invalid ("Attempt Block Recovery" prompt in the editor).
 * Examples of forbidden inline styles: opacity on figures, text-align on column
 * wrappers, padding-left on button anchors — none of these have a corresponding
 * attribute in core block schemas, so the save() regeneration drops them and
 * the byte-compare fails.
 *
 * Fix: move those decorative rules HERE, target by className.
 *
 * Loaded site-wide via functions.php → reforma_enqueue_assets().
 *
 * Keep this file < 100 lines. If it grows, the design has drifted from the
 * core-block primitives and we should re-evaluate.
 */


:root {
	--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
	--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
	--wp--preset--font-size--4xl: var(--wp--preset--font-size--4-xl);
	--wp--preset--font-size--5xl: var(--wp--preset--font-size--5-xl);
}

/* Logo wall — partner logos grayscale + muted per Figma. Hover restores colour.
   filter:grayscale replaces the old opacity-only rule ( home agent).
   transition covers filter + opacity in one declaration. */
.reforma-partner-logo img {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.55);
	transition: filter 200ms ease-out;
}
.reforma-partner-logo:hover img,
.reforma-partner-logo:focus-within img {
	filter: grayscale(0) opacity(1);
}

/* Visionary Leadership — leadership cards are center-aligned (Figma spec).
   core/column does not support typography.textAlign as a block attribute,
   so we apply text-align here against the column wrapper class.
   Background and padding reset ensures cards are fully transparent —
    refactor removed the surface-color card background. */
.reforma-leadership-card {
	text-align: center;
	background: transparent !important;
	padding: var(--wp--preset--spacing--20) !important;
}

/* Visionary Leadership — portrait treatment replaced with per-portrait asymmetric radii
   in  See "Asymmetric corner DNA" section at end of this file.
   .reforma-leadership-portrait-circle removed; .reforma-leadership-portrait--1/2/3 added. */

/* Rooted in Innovation — 4-doctor group photo. Border-radius lives here (not in
   block attrs) to avoid the is-resized + has-custom-border class pair that WP's
   save() auto-generates when style.border.radius is set on core/image — those
   auto-classes cause byte-mismatch and "Attempt Block Recovery" prompts.
   Max-width caps the photo at a comfortable reading width within the 1200px
   container. */
.reforma-rooted-image img {
	border-radius: 0;
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* Premium products / news / product grid — outline link-style buttons render
   small, uppercase, left-flush with zero left padding (Figma "View Details →"
   / "Read more →" style). We do NOT use the core/button `fontSize` attribute
   because it adds auto-generated `has-*-font-size` classes to the anchor that
   shift between WP versions, causing byte-mismatch with stored pattern HTML
   and triggering "Attempt Block Recovery" prompts. Instead, the font size is
   applied here via the className-targeted rule. */
.reforma-button-link-flush > .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	padding-left: 0;
}

/* Contact Form Band — form field rows styled as input placeholders.
   Border and border-radius live here (not as block attrs) to avoid block-validator
   byte-mismatch: core/group save() does not reliably emit has-border-color on the
   wrapping div when style.border.color is a preset ref across WP versions. */
.reforma-form-field {
	border: 1px solid oklch(70% 0 0 / 0.3);
	border-radius: var(--wp--preset--radius--small);
	min-height: 48px;
}

.reforma-form-field--textarea {
	min-height: 96px;
	align-items: flex-start;
}

/* Contact image — cover-fill so the photo stretches to the full column height. */
.reforma-contact-image {
	height: 100%;
}

.reforma-contact-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Contact card — single-layer shadow (max 2 layers per design rules). */
.reforma-contact-card {
	box-shadow: 0 4px 24px oklch(0% 0 0 / 0.06);
}

/* Product cards — relative context and overflow:hidden so the image's border-radius
   clips cleanly at the card's rounded top corners. position:relative makes
   reforma-card-image-wrap's absolute badge resolve against the image wrap, not the card. */
.reforma-product-card {
	overflow: hidden;
}

/* Card image-wrap — relative context for the BESTSELLER badge absolute overlay.
   line-height:0 collapses the inline whitespace gap between the image and the
   text content group below it (prevents a 4px mystery gap on Chrome/Safari). */
.reforma-card-image-wrap {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

/* Card body — explicit flex-column so the blockGap token renders as gap (not margin).
   WP's layout:"flex" + "orientation":"vertical" on the inner group generates
   a wp-container-* class with gap; this selector is a fallback for older WP/no-JS. */
.reforma-product-card-body {
	display: flex;
	flex-direction: column;
}

/* BESTSELLER pill badge — absolute overlay on the product image (top-left).
   Figma: badge sits at approx 12px from the image top-left corner. 12px = nearest
   4pt grid value (spacing|30 = 12px). font-size 12px (0.75rem), line-height 1.3.
   margin:0 overrides any WP paragraph margin so the badge does not push layout. */
.reforma-bestseller-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.3;
	pointer-events: none;
	margin: 0 !important;
}

/* Product card image — flush to card top, aspect-ratio 278:218 from Figma
   (card width 278px, image height 218px at 1920px / 4-col grid).
   object-fit:cover prevents distortion. border-radius NOT set here — the
   parent .reforma-product-card has overflow:hidden which clips the image
   against the card's border-radius (set via block attr), so the image top
   corners inherit the card's rounded corners without needing their own radius.
   This avoids the style.border.radius JSON attr trap (see gotcha:
   wp-block-validator-strips-fontSize-attr-from-buttons-to-avoid-class-drift).
   Targets both .reforma-product-card-image (product-grid.php) and
   .reforma-product-card-image used in premium-products.php. */
.reforma-product-card-image img,
.reforma-product-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 278 / 218;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Serif italic emphasis — Figma display-headline signature treatment.
   ONE word per heading is wrapped in <em class="reforma-display-italic"> (or plain
   <em> inside a bound wp:heading) and rendered in Playfair Display italic + brand-gold.
   Selector covers both the explicit class and any bare <em> inside a heading block so
   the ACF-stored <em> tag works without extra class decoration.

   Why here and not theme.json: theme.json block styles for core/heading do not support
   per-child-element selectors — we cannot target the <em> inside the heading via
   styles.blocks["core/heading"]. This file is the correct location for rules that
   require child selectors (per pattern-decorations.css design contract). */
.reforma-display-italic,
.wp-block-heading em {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--brand-gold);
	font-weight: inherit;
}

/* ============================================================
   Decorative leaf-cluster SVGs (extracted from Figma — )
   ============================================================
   Source: Figma file MNliU5MmBI7zbPeERmAfzH, vector groups
   14:599, 14:520, 14:499, 14:1184, 14:721. Exported as SVG via
   /v1/images REST endpoint with format=svg.

   Each rule attaches an absolutely-positioned ::after pseudo
   element to the section wrapper so the leaf cluster floats over
   the corner without affecting block layout. pointer-events:none
   keeps them inert; z-index 0 places them under content.
   The container className gets position:relative + overflow:hidden
   so leaves clip cleanly at the section edge on smaller screens.
   ============================================================ */

.reforma-hero-band,
.reforma-premium-products,
.reforma-news-insights,
.reforma-visionary-leadership,
.reforma-contact-band,
.reforma-research-purity {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.reforma-hero-band::after,
.reforma-premium-products::after,
.reforma-news-insights::after,
.reforma-visionary-leadership::after,
.reforma-contact-band::after,
.reforma-research-purity::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 0;
	opacity: 0.85;
}

/* 1. Hero band — leaf cluster top-right (Figma node 14:599, 364x844). */
.reforma-hero-band::after {
	top: 0;
	right: 0;
	width: clamp(180px, 22vw, 360px);
	height: clamp(220px, 44vw, 720px);
	background-image: none;
	background-position: top right;
}

/* 2. Premium products — leaf cluster top-right (Figma node 14:520). */
.reforma-premium-products::after {
	top: 24px;
	right: -40px;
	width: clamp(160px, 18vw, 320px);
	height: clamp(160px, 18vw, 320px);
	background-image: none;
	background-position: top right;
	opacity: 0.55;
}

/* 3. News & Insights — leaf cluster bottom-left (Figma node 14:499). */
.reforma-news-insights::after {
	bottom: -40px;
	left: -120px;
	width: clamp(220px, 30vw, 480px);
	height: clamp(260px, 36vw, 540px);
	background-image: none;
	background-position: bottom left;
	opacity: 0.7;
}

/* 4. Visionary Leadership — leaf cluster top-right (Figma node 14:1184). */
.reforma-visionary-leadership::after {
	top: -40px;
	right: -60px;
	width: clamp(180px, 22vw, 380px);
	height: clamp(280px, 38vw, 600px);
	background-image: none;
	background-position: top right;
	opacity: 0.65;
}

/* 5. Contact band — bottom-right accent (reuses footer cluster 14:721,
   horizontally flipped so the curve leads into the section). */
.reforma-contact-band::after {
	bottom: 0;
	right: 0;
	width: clamp(140px, 16vw, 260px);
	height: clamp(180px, 22vw, 360px);
	background-image: none;
	background-position: bottom right;
	transform: scaleX(-1);
	opacity: 0.5;
}

/* 6. Where Research Meets Purity — NO decorative leaf per Figma .
   The section keeps no ::after leaf; the rule below neutralizes the shared
   base ::after so nothing renders on this band. */
.reforma-research-purity::after {
	content: none;
	display: none;
	background-image: none;
}

/* Ensure section content stacks above the decorative overlay. */
.reforma-hero-band > *,
.reforma-premium-products > *,
.reforma-news-insights > *,
.reforma-visionary-leadership > *,
.reforma-contact-band > *,
.reforma-research-purity > * {
	position: relative;
	z-index: 1;
}

/* Hide decorations on very small screens to prevent visual noise. */
@media (max-width: 640px) {
	.reforma-hero-band::after,
	.reforma-premium-products::after,
	.reforma-news-insights::after,
	.reforma-visionary-leadership::after,
	.reforma-contact-band::after,
	.reforma-research-purity::after {
		display: none;
	}
}

/* Rooted in Innovation — 2-col image-left: stretch image column full height. */
.reforma-rooted-image-col { align-self: stretch; }
.reforma-rooted-image-col .wp-block-image { height: 100%; }
.reforma-rooted-image-col .wp-block-image img { height: 100%; object-fit: cover; }

/* -A — Footer / News / Contact / Research / Leadership fixes. */

/* Footer: force social icons to white monochrome (WP per-service brand colors bleed through). */
.reforma-site-footer .wp-block-social-links .wp-block-social-link-anchor,
.reforma-site-footer .wp-block-social-links .wp-block-social-link-anchor svg {
	color: var(--wp--preset--color--page) !important;
	fill: var(--wp--preset--color--page) !important;
}

/* Footer: link color inherits page (off-white) so Pages/Services links are
   visible against the brand-gold footer background. Without this, <a> tags
   fall back to the browser/WP default link color (brand-gold) and become
   invisible.  fix. */
.reforma-site-footer a { color: var(--wp--preset--color--page); text-decoration: none; opacity: 0.85; transition: opacity 150ms ease-out; }
.reforma-site-footer a:hover, .reforma-site-footer a:focus-visible { opacity: 1; }

.reforma-site-footer .reforma-footer-schedule-btn .wp-block-button__link::before,
.reforma-site-footer .reforma-footer-social-list a::before,
.reforma-site-footer .reforma-footer-col--contact a::before,
.reforma-site-footer .reforma-footer-col--contact li:last-child::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	opacity: 0.78;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.reforma-site-footer .reforma-footer-schedule-btn .wp-block-button__link::before,
.reforma-site-footer .reforma-footer-col--contact a[href^="tel:"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 10.8c1.6 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.4.6 1.4 1.4v3.7c0 .7-.6 1.4-1.4 1.4C10.3 22 2 13.7 2 3.4 2 2.6 2.6 2 3.4 2h3.7c.7 0 1.4.6 1.4 1.4 0 1.4.2 2.7.6 4 .1.4 0 .8-.3 1.2l-2.2 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 10.8c1.6 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.4.6 1.4 1.4v3.7c0 .7-.6 1.4-1.4 1.4C10.3 22 2 13.7 2 3.4 2 2.6 2.6 2 3.4 2h3.7c.7 0 1.4.6 1.4 1.4 0 1.4.2 2.7.6 4 .1.4 0 .8-.3 1.2l-2.2 2.2z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-social-list a[href*="instagram.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.3-.8a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.3-.8a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-social-list a[href*="facebook.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h4V3h-4c-4 0-6 2.4-6 6v3H5v5h3v5h5v-5h4l1-5h-5V9.2c0-.8.4-1.2 1-1.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h4V3h-4c-4 0-6 2.4-6 6v3H5v5h3v5h5v-5h4l1-5h-5V9.2c0-.8.4-1.2 1-1.2z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-social-list a[href*="twitter.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h5.2l4.1 5.8L18.7 3H21l-6.7 7.2L22 21h-5.2l-4.6-6.5L6.2 21H4l7.2-7.8L4 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h5.2l4.1 5.8L18.7 3H21l-6.7 7.2L22 21h-5.2l-4.6-6.5L6.2 21H4l7.2-7.8L4 3z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-social-list a[href*="pinterest.com"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 .1-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.9 0 1.3.6 1.3 1.4 0 .9-.5 2.1-.8 3.3-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-1.9 3.1-4.6 0-2.4-1.7-4.1-4.2-4.1-2.8 0-4.5 2.1-4.5 4.3 0 .9.3 1.8.7 2.3.1.1.1.2.1.3l-.3 1.1c-.1.2-.2.3-.4.2-1.3-.6-2-2.4-2-3.9 0-3.2 2.3-6.1 6.6-6.1 3.5 0 6.2 2.5 6.2 5.8 0 3.4-2.2 6.2-5.2 6.2-1 0-2-.5-2.3-1.1l-.6 2.4c-.2.9-.8 2-1.2 2.6A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 .1-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.9 0 1.3.6 1.3 1.4 0 .9-.5 2.1-.8 3.3-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-1.9 3.1-4.6 0-2.4-1.7-4.1-4.2-4.1-2.8 0-4.5 2.1-4.5 4.3 0 .9.3 1.8.7 2.3.1.1.1.2.1.3l-.3 1.1c-.1.2-.2.3-.4.2-1.3-.6-2-2.4-2-3.9 0-3.2 2.3-6.1 6.6-6.1 3.5 0 6.2 2.5 6.2 5.8 0 3.4-2.2 6.2-5.2 6.2-1 0-2-.5-2.3-1.1l-.6 2.4c-.2.9-.8 2-1.2 2.6A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-col--contact a[href^="mailto:"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 9 8-5V6l-8 5-8-5v2l8 5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 9 8-5V6l-8 5-8-5v2l8 5z'/%3E%3C/svg%3E");
}

.reforma-site-footer .reforma-footer-col--contact li:last-child::before {
	margin-top: 0.2em;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11.5A3.5 3.5 0 1 1 12 6a3.5 3.5 0 0 1 0 7.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11.5A3.5 3.5 0 1 1 12 6a3.5 3.5 0 0 1 0 7.5z'/%3E%3C/svg%3E");
}

/* Footer: Schedule appointment outlined button. */
.reforma-footer-schedule-cta .wp-block-button__link { border-color: var(--wp--preset--color--page) !important; white-space: nowrap; }

/* Footer: decorative navy SVG top-right (Figma node 14:721,  port).
   Corrected from leaf-cluster-footer.svg to the actual Figma export.
   top:0/right:0 matches v1.6 reference. 335×746 native dimensions. */
.reforma-site-footer { position: relative; overflow: visible; }
.reforma-site-footer::after {
	content: ''; position: absolute; top: 0; right: 0;
	width: clamp(180px, 18vw, 335px); height: clamp(300px, 50vw, 746px);
	background: transparent;
	pointer-events: none; opacity: 0.4; z-index: 0;
}
.reforma-site-footer > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .reforma-site-footer::after { display: none; } }

/* News cards: no surface bg (Figma: on page bg directly). */
.reforma-news-card { background: none !important; padding: 0 !important; border-radius: 0 !important; }

/* News card media container — relative context for date pill overlay. */
.reforma-news-card-media { position: relative; }
.reforma-news-card-image img { width: 100%; height: 220px; object-fit: cover; display: block; }
@media (min-width: 1024px) { .reforma-news-card-image img { height: 240px; } }

/* Date pill — absolute top-right of card image. */
.reforma-news-date-pill {
	position: absolute; top: 12px; right: 12px;
	margin: 0 !important; padding: 4px 12px;
	border-radius: 999px; line-height: 1.4; pointer-events: none; white-space: nowrap;
}

/* Contact booking card: accent-purple bg, no shadow. */
.reforma-contact-booking-card { box-shadow: none; }

/* Booking form grid rows. */
.reforma-booking-form { width: 100%; }
.reforma-booking-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
@media (max-width: 640px) { .reforma-booking-form__row { grid-template-columns: 1fr; } }

/* Booking form labels — small white caps. */
.reforma-booking-form__label {
	display: block; font-size: var(--wp--preset--font-size--xs); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: oklch(100% 0 0 / 0.75); margin-bottom: 8px;
}

/* Booking form inputs — translucent white on teal. */
.reforma-booking-form__input {
	display: block; width: 100%; padding: 12px 16px;
	background: oklch(100% 0 0 / 0.12); border: 1px solid oklch(100% 0 0 / 0.25);
	border-radius: var(--wp--preset--radius--small);
	color: var(--wp--preset--color--page);
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--base);
	line-height: 1.5; transition: border-color 150ms ease-out, background 150ms ease-out;
	box-sizing: border-box;
}
.reforma-booking-form__input::placeholder { color: oklch(100% 0 0 / 0.45); }
.reforma-booking-form__input:focus { outline: none; border-color: oklch(100% 0 0 / 0.7); background: oklch(100% 0 0 / 0.18); }
.reforma-booking-form__input[type="date"] { color-scheme: dark; }
.reforma-booking-form__input--textarea { resize: vertical; min-height: 96px; }
.reforma-contact-booking-card .wp-block-button button { cursor: pointer; border: none; }

/* Where Research pillar cards: equal height within each row. */
.reforma-research-purity .reforma-pillar-card { height: 100%; }

/* Leadership role labels: ink-soft overrides any inherited theme.json link color. */
.reforma-leadership-card .has-ink-soft-color { color: var(--wp--preset--color--ink-soft); }

/* Premium Products — tab filter rail + active underline. */
.reforma-product-tabs { border-bottom: 1px solid oklch(70% 0 0 / 0.15); }
.reforma-product-tab > .wp-block-button__link {
	background: transparent !important;
	border-bottom-style: solid;
	padding-bottom: calc(var(--wp--preset--spacing--30) - 1px);
}
.reforma-product-tab--active > .wp-block-button__link {
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--accent-purple);
}

/* Product card arrow button — fixed 40×40 circle. */
.reforma-card-arrow > .wp-block-button__link {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 !important; font-size: 1rem; line-height: 1;
}

/* Card footer — VIEW DETAILS left, arrow right. */
.reforma-card-footer { display: flex; align-items: center; justify-content: space-between; }

/* Complete Hair Loss Plan — treatment card images.
   Figma: 283×218px per card (4-col grid at 1920px frame, 22px gaps).
   aspect-ratio 283:218 eliminates fixed-height crop misalignment.
   Top border-radius 20px matches Figma "Rectangle 18" node (tl=20 tr=20 br=0 bl=0). */
.reforma-treatment-card { position: relative; overflow: hidden; }
.reforma-treatment-card-image img {
	width: 100%;
	aspect-ratio: 283 / 218;
	object-fit: cover;
	display: block;
	border-radius: 20px 20px 0 0;
}

/* Filter chip pills — transparent bg so accent-purple band shows through. */
.reforma-filter-chip > .wp-block-button__link { background: transparent !important; white-space: nowrap; }

/* Filter bar sort label — vertically aligned with chip row.
   align-self:center handles the flex baseline even if chip row is taller.
   Light border gives the dropdown-affordance look (Figma §2 Products). */
.reforma-sort-label {
	align-self: center;
	border: 1px solid oklch(70% 0 0 / 0.22);
	border-radius: var(--wp--preset--radius--small);
	white-space: nowrap;
	line-height: 1.4;
}

/* Hair loss cards section bg (prevents bleed from accent-purple header band). */
.reforma-treatment-cards { background-color: var(--wp--preset--color--page); }

/* Article hero — featured image right column: cover-fill so the image stretches
   to full column height without letterboxing (Fix-15D flagged concern).
   Targets the WP core/post-featured-image block inside the hero right column only. */
.reforma-article-hero .wp-block-column .wp-block-post-featured-image {
	height: 100%;
}

.reforma-article-hero .wp-block-column .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Logo wall: constrain portrait photos to thumbnail strip height.
   Figma: ~80-90px tall portrait thumbnails, no eyebrow label, flush above footer.
   width:100% + max-height ensures each column fills its flex width while the
   portrait is capped at 90px tall. object-fit:cover crops proportionally. */
.reforma-logo-col img {
	width: 100%;
	max-height: 90px;
	object-fit: cover;
	display: block;
}

/* Footer social col: flatten WP per-service colored pill buttons.
   WP social-links block renders each service as a colored pill by default
   (Instagram = gradient red, Facebook = blue, etc.). Figma shows clean
   icon + text labels on the blue footer — no pill backgrounds, no color overrides.
   Using !important to override WP's inline style="background-color:..." on
   .wp-social-link elements (WP outputs these inline per-link). */
.reforma-footer-social-col .wp-block-social-link,
.reforma-footer-social-col .wp-social-link {
	background: transparent !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	border-radius: 0 !important;
}

.reforma-footer-social-col .wp-block-social-link a,
.reforma-footer-social-col .wp-social-link a {
	background: transparent !important;
	color: var(--wp--preset--color--page) !important;
}

.reforma-footer-social-col .wp-block-social-link svg,
.reforma-footer-social-col .wp-social-link svg {
	fill: currentColor !important;
	width: 18px !important;
	height: 18px !important;
}

.reforma-footer-social-col .wp-block-social-link__label {
	opacity: 1 !important;
	position: static !important;
	margin-left: 8px !important;
	color: var(--wp--preset--color--page) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
}

/* ============================================================
   BOOKING FORM — light variant (white card on cream page).
   The existing .reforma-booking-form rules (~line 397) style the
   green-card contact form. Light variant overrides the dark-theme
   colour-scheme + placeholder + focus ring + input background for
   the booking page card on a light background.
   ============================================================ */
.reforma-booking-form--light .reforma-booking-form__label {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.reforma-booking-form--light .reforma-booking-form__input {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--hairline, oklch(85% 0.005 240));
	border-radius: var(--wp--preset--radius--medium, 12px);
	padding: 12px 14px;
	font-size: var(--wp--preset--font-size--md, 1rem);
	width: 100%;
}
.reforma-booking-form--light .reforma-booking-form__input::placeholder {
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.7;
}
.reforma-booking-form--light .reforma-booking-form__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-gold);
	background: var(--wp--preset--color--page);
	box-shadow: 0 0 0 3px oklch(56.4% 0.131 248 / 0.15);
}
.reforma-booking-form--light .reforma-booking-form__input[type="date"] { color-scheme: light; }

.reforma-booking-form__required { color: var(--wp--preset--color--brand-gold); margin-left: 2px; }

.reforma-booking-form__field--consent .reforma-booking-form__consent-label {
	display: flex; gap: 10px; align-items: flex-start;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	cursor: pointer;
}
.reforma-booking-form__field--consent input[type="checkbox"] {
	flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
	accent-color: var(--wp--preset--color--brand-gold);
}

.reforma-booking-form__alert {
	padding: 12px 16px;
	border-radius: var(--wp--preset--radius--medium, 12px);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.reforma-booking-form__alert--error {
	background: oklch(95% 0.04 25 / 1);
	color: oklch(40% 0.15 25);
	border: 1px solid oklch(85% 0.06 25);
}
.reforma-booking-form__alert--success {
	background: oklch(95% 0.04 165 / 1);
	color: var(--wp--preset--color--accent-purple);
	border: 1px solid oklch(85% 0.05 165);
}

/* ============================================================
   B2B PAGE — value pillars, portfolio cards, process steps.
   ============================================================ */
.reforma-b2b-pillar,
.reforma-b2b-category,
.reforma-b2b-hero-stats,
.reforma-b2b-contact-card,
.reforma-b2b-form-card { height: 100%; }

.reforma-b2b-pillar { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.reforma-b2b-pillar:hover { transform: translateY(-2px); }

.reforma-b2b-step { position: relative; padding-left: 0; }

/* B2B form — products checkbox grid. */
.reforma-b2b-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 8px;
}
@media (max-width: 600px) {
	.reforma-b2b-products__grid { grid-template-columns: 1fr; }
}
.reforma-b2b-products__option {
	display: flex; gap: 8px; align-items: center;
	padding: 10px 14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline, oklch(85% 0.005 240));
	border-radius: var(--wp--preset--radius--medium, 12px);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	transition: border-color 150ms, background 150ms;
}
.reforma-b2b-products__option:hover {
	border-color: var(--wp--preset--color--brand-gold);
	background: var(--wp--preset--color--page);
}
.reforma-b2b-products__option input[type="checkbox"] {
	width: 16px; height: 16px;
	accent-color: var(--wp--preset--color--brand-gold);
}

/* ============================================================
   SUBMISSIONS ADMIN — status pills.
   ============================================================ */
.reforma-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.reforma-status--new      { background: oklch(95% 0.05 240); color: oklch(45% 0.18 248); }
.reforma-status--contacted { background: oklch(96% 0.04 80);  color: oklch(45% 0.15 80); }
.reforma-status--closed   { background: oklch(94% 0.01 240); color: oklch(45% 0.02 240); }



/* Header right-side email — plain text, not a pill button. No underline, no shrink. */
.reforma-header-email {
	flex-shrink: 0;
	white-space: nowrap;
}
.reforma-header-email a {
	text-decoration: none;
	color: inherit;
}

/* Primary nav links: no underline default; brand-gold on hover/focus.
   :where() keeps specificity at 0-0-0 so block-level overrides still win. */
.reforma-primary-nav a:where(:not(.wp-element-button)) {
	text-decoration: none;
}
.reforma-primary-nav a:where(:not(.wp-element-button)):hover,
.reforma-primary-nav a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--brand-gold);
}


.reforma-hero-image {
	overflow: hidden;
}
.reforma-hero-image img {
	border-radius: 0 300px 0 0;
	width: 100%;
	height: auto;
	display: block;
}


.reforma-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--surface, oklch(97.8% 0.011 242));
	/*  backdrop-filter removed (creates a containing block that traps the
	   mobile nav's position:fixed overlay). Solid sticky bg instead. */
	transition: box-shadow 200ms cubic-bezier(0.25, 1, 0.5, 1), background 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.reforma-site-header.is-scrolled {
	background: var(--wp--preset--color--surface, oklch(98% 0.006 240));
	box-shadow: 0 1px 0 oklch(0% 0 0 / 0.06), 0 2px 12px oklch(0% 0 0 / 0.08);
}
@media (prefers-reduced-motion: reduce) {
	.reforma-site-header {
		transition: none;
	}
}

/* Active nav item: brand-gold underline (matches Figma "Home" state).
   WordPress core/navigation emits .current-menu-item on the active link's
   parent <li>. :where() keeps specificity 0 so block overrides still win. */
.reforma-primary-nav :where(.current-menu-item, .current_page_item) > a,
.reforma-primary-nav :where(.current-menu-item, .current_page_item) > a:visited {
	color: var(--wp--preset--color--brand-gold);
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
	font-weight: 700;
}


.reforma-news-card-media--overlaid .reforma-news-date-pill {
	top: auto;
	right: auto;
	bottom: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
}



/* Back-to-news CTA: white outline button (transparent bg, white border).
   Border + bg via className — not block attrs — to avoid style.border.color
   auto-class injection (has-border-color) that causes byte-mismatch. */
.reforma-btn-back-news > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	background: transparent;
	border: 1px solid var(--wp--preset--color--white);
	white-space: nowrap;
}
.reforma-btn-back-news > .wp-block-button__link:hover,
.reforma-btn-back-news > .wp-block-button__link:focus-visible {
	background: oklch(100% 0 0 / 0.12);
	outline: none;
}

/* Sidebar newsletter card — full-width Subscribe button on narrow sidebar. */
.reforma-sidebar-card--newsletter .wp-block-buttons {
	width: 100%;
}
.reforma-sidebar-card--newsletter .wp-block-button {
	width: 100%;
}
.reforma-sidebar-card--newsletter .wp-block-button__link {
	display: block;
	text-align: center;
}



/* FAQ accordion items — top hairline divider per Figma.
   Border lives here (not as block attr) to avoid block-validator
   byte-mismatch: style.border on core/group adds has-border-color
   inconsistently across WP versions. */
.reforma-faq-item {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--60);
}
.reforma-faq-item:first-of-type {
	border-top: none;
	padding-top: 0;
}

/* Begin Skincare CTA image — top-right large radius (Figma curved corner).
   border-radius via CSS (not style.border.radius JSON attr) to avoid
   has-custom-border + border-radius-on-img dual class injection. */
.reforma-skincare-image img {
	border-top-right-radius: var(--wp--preset--radius--hero);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
	height: auto;
	display: block;
}



/* Suppress the old whole-section leaf ::after now that the
   decoration lives inside the right column only. */
.reforma-hero-band::after {
	display: none !important;
}

/* Hero section minimum height — 4pt grid, 800px = Figma frame height. */
.reforma-hero-band {
	min-height: 800px;
}

/* Columns row: stretch to match section height. */
.reforma-hero-band .wp-block-columns {
	min-height: 800px;
	align-items: stretch !important;
}

/* Right image column: relative stacking context, overflow clip for radius,
   photo fills via absolute img child, gradient on ::before. */
.reforma-hero-image-col {
	position: relative;
	min-height: 800px;
	overflow: hidden;
}

/* Photo: fill the column entirely. z-index 0 keeps it behind gradient + SVG. */
.reforma-hero-image-col .wp-block-image,
.reforma-hero-image-col figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.reforma-hero-image-col .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Override  rule that set border-radius on the img —
	   the column itself carries the 300px radius + overflow:hidden. */
	border-radius: 0 !important;
}

/* Gradient overlay: exact Figma value (node 14:579).
   oklch equivalent of rgba(39,122,190,0.02) = brand-gold at ~2% opacity. */
.reforma-hero-image-col::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		269.25deg,
		var(--wp--preset--color--brand-gold) -1.75%,
		oklch(56.4% 0.131 248 / 0.02) 99.14%
	);
	z-index: 1;
	pointer-events: none;
}

/* Decorative leaf-wave SVG (Figma node 14:599): 354×847, opacity 0.4, top-right.
   Group block is empty (aria-hidden) — purely presentational. z-index 2 floats
   above gradient overlay. clamp() keeps proportions on narrower viewports. */
.reforma-hero-decoration {
	position: absolute !important;
	top: 0;
	right: 0;
	width: clamp(180px, 18.4vw, 354px) !important;
	height: clamp(420px, 44vw, 847px) !important;
	pointer-events: none;
	z-index: 2;
	background-image: none;
	background-size: contain;
	background-position: top right;
	background-repeat: no-repeat;
	opacity: 0.4;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.reforma-hero-band,
	.reforma-hero-band .wp-block-columns {
		min-height: auto;
	}
	.reforma-hero-image-col {
		min-height: 460px;
		/* Mobile: soften the 300px radius to fit narrower viewport. */
		border-top-right-radius: 160px !important;
	}
}

/* Contact hero image — bottom-left radius only per Figma. */
.reforma-contact-hero-image img {
	border-bottom-left-radius: var(--wp--preset--radius--hero);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
	height: auto;
	display: block;
}



/* core/read-more link — small uppercase arrow-appended style.
   font-size + transform live here (not block attrs) to avoid WP
   save() class drift. Arrow via CSS ::after content. */
.reforma-news-read-more.wp-block-read-more {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	display: inline-block;
}
.reforma-news-read-more.wp-block-read-more::after {
	content: ' \2192';
}
.reforma-news-read-more.wp-block-read-more:hover,
.reforma-news-read-more.wp-block-read-more:focus-visible {
	text-decoration: underline;
	outline-offset: 2px;
}

/* News listing section — position context + decorative leaf cluster bottom-left.
   Reuses leaf-cluster-news.svg (same asset as home news section).
   z-index isolation so leaf stays below cards. */
.reforma-news-listing-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.reforma-news-listing-section::after {
	content: '';
	position: absolute;
	pointer-events: none;
	bottom: -40px;
	left: -120px;
	width: clamp(220px, 30vw, 480px);
	height: clamp(260px, 36vw, 540px);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
	opacity: 0.4;
	z-index: 0;
}
.reforma-news-listing-section > * {
	position: relative;
	z-index: 1;
}
@media (max-width: 640px) {
	.reforma-news-listing-section::after { display: none; }
}



.reforma-booking-form-section { width: 100%; }

.reforma-form-card {
	margin: 0 0 var(--wp--preset--spacing--40) 0;
	padding: 0;
	border: 1px solid oklch(88% 0.008 240);
	border-radius: 16px;
	background: var(--wp--preset--color--page);
	box-shadow: 0 1px 4px oklch(0% 0 0 / 0.04);
	overflow: hidden;
}

.reforma-card-header {
	background: var(--wp--preset--color--accent-purple);
	padding: 12px var(--wp--preset--spacing--50);
}

.reforma-card-legend {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--page);
	display: block;
}

.reforma-card-body { padding: var(--wp--preset--spacing--50); }

.reforma-field-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
}

.reforma-field-grid-1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 640px) {
	.reforma-field-grid-2 { grid-template-columns: 1fr; }
}

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

.reforma-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.03em;
}

.reforma-required { color: var(--wp--preset--color--brand-gold); margin-left: 2px; }

.reforma-field-hint {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}

/* Booking page inputs — light blue-tinted fields per Figma. */
.reforma-booking-form--sections .reforma-input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	background: oklch(95% 0.012 240 / 0.5);
	border: 1px solid oklch(80% 0.02 240 / 0.6);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	min-height: 48px;
	box-sizing: border-box;
	transition: border-color 150ms ease-out, background 150ms ease-out;
	-webkit-appearance: none;
	appearance: none;
}

.reforma-booking-form--sections .reforma-input::placeholder {
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.75;
}

.reforma-booking-form--sections .reforma-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-purple);
	background: oklch(98% 0.01 240 / 0.8);
	box-shadow: 0 0 0 3px oklch(38.5% 0.067 165 / 0.12);
}

.reforma-select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.reforma-textarea { resize: vertical; min-height: 100px; }

/* Honeypot — off-screen, programmatically invisible. */
.reforma-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* Consent row. */
.reforma-consent-row { margin-bottom: var(--wp--preset--spacing--50); }

.reforma-consent-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }

.reforma-consent-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--accent-purple);
}

.reforma-consent-text {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

/* Submit button — full-width, brand-gold, hover darkens.
   Native <button> element (not core/button) so fontSize attr trap is avoided. */
.reforma-submit-btn {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--page);
	border: none;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	text-align: center;
	transition: background 150ms ease-out;
}
.reforma-submit-btn:hover { background: oklch(46% 0.131 248); }
.reforma-submit-btn:active { transform: translateY(1px); }
.reforma-submit-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-gold);
	outline-offset: 3px;
}

/* ── Booking sidebar ── */

.reforma-order-summary-card {
	border: 1px solid oklch(88% 0.008 240);
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--page);
	margin-bottom: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 4px oklch(0% 0 0 / 0.04);
}

.reforma-order-summary-card__header {
	background: var(--wp--preset--color--accent-purple);
	padding: 12px var(--wp--preset--spacing--50);
	text-align: center;
}

.reforma-order-summary-card__header .wp-block-heading { margin: 0 !important; }

.reforma-order-summary-card__body { padding: var(--wp--preset--spacing--50); }

/* Plan row: 64×64 avatar left, details right. */
.reforma-plan-row {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--40);
}

.reforma-plan-img-wrap { flex: 0 0 64px; }

.reforma-plan-img,
.reforma-plan-img img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	margin: 0 !important;
}

.reforma-plan-details { flex: 1; min-width: 0; }
.reforma-plan-details .wp-block-paragraph { margin: 0 !important; }

.reforma-plan-pricing {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--20);
}

.reforma-plan-price-current-wrap {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

/* Benefits list — no bullet, icon + text rows. */
.reforma-benefits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.reforma-benefit-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

.reforma-benefit-icon {
	flex: 0 0 16px;
	color: var(--wp--preset--color--accent-purple);
}

/* Trust card — dark navy background per Figma. */
.reforma-trust-card {
	background: oklch(22% 0.04 240);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	text-align: center;
}
.reforma-trust-card .wp-block-paragraph { margin: 0 !important; }

/* Sticky sidebar on large screens. */
@media (min-width: 769px) {
	.reforma-booking-sidebar {
		position: sticky;
		top: var(--wp--preset--spacing--60);
	}
}

/* ── Booking hero ── */

.reforma-booking-breadcrumb {
	display: flex !important;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
}

.reforma-back-btn .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 600;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
}

.reforma-breadcrumb-trail {
	margin: 0 !important;
	opacity: 0.7;
}

.reforma-booking-hero .wp-block-heading,
.reforma-booking-hero .wp-block-paragraph {
	text-align: left !important;
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-submit-btn,
	.reforma-booking-form--sections .reforma-input {
		transition: none;
	}
}



/* Schedule appointment Figma-SVG button (244×44px, ).
   Replaces the core/button outline pill. Image block uses
   wp:image with sizeSlug:full — no width/height JSON attrs set,
   so save() does NOT inject is-resized or has-custom-border.
   Width capped via CSS here to avoid attr-injection traps. */
.reforma-footer-schedule-btn {
	margin: 0 0 var(--wp--preset--spacing--50) 0;
}
.reforma-footer-schedule-btn img {
	width: 244px;
	height: auto;
	display: block;
	max-width: 100%;
}
.reforma-footer-schedule-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	min-width: 44px;
	opacity: 1;
}
.reforma-footer-schedule-btn a:hover { opacity: 0.88; }

/* Footer contact list: align the leading icon with its text (same pattern as the schedule button). */
.reforma-site-footer .reforma-footer-col--contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.reforma-site-footer .reforma-footer-col--contact li {
	display: flex;
	align-items: center;
	gap: 0.5em;
}


.reforma-contact-bubbles {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 24px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
	/*  footer auto-nudge variable (set by JS while footer is in view). */
	--reforma-bubble-lift: 0px;
	transform: translateY(calc(-1 * var(--reforma-bubble-lift)));
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/*  each bubble is wrapped so the hover-reveal pill + (phone) popover can
   anchor to it. The wrap is the flex item; the anchor keeps the sprite. */
.reforma-bubble-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}
.reforma-contact-bubbles a {
	display: block;
	width: 60px;          /*  60px desktop tap target. */
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: auto;
	flex-shrink: 0;
	background-image: none;
	background-size: 60px 134px;
	background-repeat: no-repeat;
	box-shadow: 0 4px 16px oklch(0% 0 0 / 0.18);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reforma-contact-bubbles a:hover,
.reforma-contact-bubbles a:focus-visible {
	transform: translateY(-2px);
	outline: none;
}
.reforma-contact-bubbles a:focus-visible {
	box-shadow: 0 4px 16px oklch(0% 0 0 / 0.18), 0 0 0 3px oklch(56.4% 0.131 248 / 0.5);
}
.reforma-bubble--phone  { background-position: 0 0; }
.reforma-bubble--whatsapp { background-position: 0 -74px; } /* sprite circle pitch = 74px at 60px scale */
@media (max-width: 480px) {
	.reforma-contact-bubbles { inset-inline-end: 12px; bottom: 12px; }
	.reforma-contact-bubbles a { width: 56px; height: 56px; background-size: 56px 125px; } /*  56px mobile tap target */
	.reforma-bubble--phone  { background-position: 0 0; }
	.reforma-bubble--whatsapp { background-position: 0 -69px; } /*  74 * 56/60 = 69.07 → scaled for 56px sprite */
}
@media (prefers-reduced-motion: reduce) {
	.reforma-contact-bubbles { transition: none; }
	.reforma-contact-bubbles a { transition: none; }
}

/* ============================================================
   Asymmetric corner DNA (Figma §§ 5, 8, 10)
   All border-radius rules live here (className-targeted) to
   avoid style.border.radius JSON attr on core/image which adds
   has-custom-border + inline radius and causes byte-mismatch
   → "Attempt Block Recovery" (see gotcha:
   wp-block-validator-strips-fontSize-attr-from-buttons-to-avoid-class-drift).
   ============================================================ */

/* A) Visionary Leadership — per-portrait asymmetric radii.
   Replaces .reforma-leadership-portrait-circle (uniform 50% circle).
   Each portrait card gets a distinct Figma-specified corner pattern.
   overflow:hidden clips the img to the container border-radius.
   aspect-ratio 3/4 matches the Figma portrait proportions.
   No border-radius on the <img> itself — the container clips it,
   avoiding the has-custom-border JSON attr trap on core/image. */
.reforma-leadership-portrait {
	max-width: 220px;
	margin: 0 auto var(--wp--preset--spacing--40);
	overflow: hidden;
}
.reforma-leadership-portrait img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}
/* Portrait 1 (Mohamed Hassan) — bottom-right only: Figma 0 0 100px 0 */
.reforma-leadership-portrait--1 { border-radius: 0 0 100px 0; }
/* Portrait 2 (Sarah Al-Otaibi) — all-but-bl: Figma 100px 100px 100px 0 */
.reforma-leadership-portrait--2 { border-radius: 100px 100px 100px 0; }
/* Portrait 3 (Dr. Layla Nasser) — top-left only: Figma 100px 0 0 0 */
.reforma-leadership-portrait--3 { border-radius: 100px 0 0 0; }

/* B) News Insights — first card asymmetric radius (Figma signature, card 1 only).
   overflow:hidden on the column clips the card image to the shape.
   The image itself also gets the matching radius via --featured modifier
   because the open-card layout has no opaque bg box to clip against. */
.reforma-news-card--featured {
	overflow: hidden;
	border-top-left-radius: 100px;
}
.reforma-news-card--featured .reforma-news-card-image--featured img {
	border-top-left-radius: 100px;
}

/* D) Premium Products — first card (bestseller) asymmetric container.
   Overrides the block-attr border-radius (var(--wp--preset--radius--medium))
   with Figma 0 20px 0 0 on the featured card only.
   !important beats the block-attr inline style specificity. */
.reforma-product-card--asymmetric {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}



/* Photo column wrapper — clips the bottom-right 100px radius. */
.reforma-contact-hero-photo {
	overflow: hidden;
}

/* Photo: cover-fill portrait, bottom-right curve 100px (Figma "Rectangle 40"). */
.reforma-contact-hero-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.3;
	object-fit: cover;
	border-radius: 0 0 100px 0;
	display: block;
}

/* Social icons: flatten WP per-service colored pills to monochrome ink row. */
.reforma-contact-hero-social .wp-block-social-link,
.reforma-contact-hero-social .wp-social-link {
	background: transparent !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	border-radius: 0 !important;
}
.reforma-contact-hero-social .wp-block-social-link a,
.reforma-contact-hero-social .wp-social-link a {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
}
.reforma-contact-hero-social .wp-block-social-link svg,
.reforma-contact-hero-social .wp-social-link svg {
	fill: currentColor !important;
	width: 20px !important;
	height: 20px !important;
}
.reforma-contact-hero-social .wp-block-social-link__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	clip: rect(0, 0, 0, 0) !important;
	overflow: hidden !important;
}

/* Form card — accent-purple background, large rounded corners. */
.reforma-contact-form-card {
	background-color: var(--wp--preset--color--accent-purple) !important;
	color: var(--wp--preset--color--page);
	border-radius: var(--wp--preset--radius--large);
}

/* 2-column field grid (6 pairs + full-width textarea row). */
.reforma-contact-hero-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Full-width textarea row. */
.reforma-contact-hero-form__field--full {
	grid-column: 1 / -1;
}

/* Field wrapper — label stacked above input. */
.reforma-contact-hero-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Field labels — xs caps, off-white on green bg. */
.reforma-contact-hero-form__label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: oklch(100% 0 0 / 0.85);
	letter-spacing: 0.04em;
}

/* Inputs / selects / textarea — translucent white on green. */
.reforma-contact-hero-form__input {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: oklch(100% 0 0 / 0.9);
	border: 1px solid oklch(100% 0 0 / 0.3);
	border-radius: var(--wp--preset--radius--small);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	min-height: 48px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 150ms ease-out, background 150ms ease-out;
}
.reforma-contact-hero-form__input::placeholder {
	color: oklch(40% 0 0 / 0.45);
}
.reforma-contact-hero-form__input:focus {
	outline: none;
	border-color: oklch(100% 0 0 / 0.7);
	background: oklch(100% 0 0 / 0.97);
	box-shadow: 0 0 0 3px oklch(100% 0 0 / 0.15);
}

/* Select: custom chevron arrow, right-pad. */
.reforma-contact-hero-form__input--select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	background-color: oklch(100% 0 0 / 0.9);
	padding-right: 36px;
}

/* Date input: light color-scheme keeps browser calendar picker readable. */
.reforma-contact-hero-form__input--date {
	color-scheme: light;
}

/* Textarea: vertical resize, taller min-height. */
.reforma-contact-hero-form__input--textarea {
	resize: vertical;
	min-height: 96px;
}

/* Submit row — right-aligned per Figma. */
.reforma-contact-hero-form__submit-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--30);
}

/* Submit: white-outline pill button on green background (Figma "Submit" button). */
.reforma-contact-hero-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	background: transparent;
	color: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--page);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	min-height: 48px;
	min-width: 44px;
	transition: background 150ms ease-out, color 150ms ease-out;
}
.reforma-contact-hero-form__submit:hover {
	background: oklch(100% 0 0 / 0.1);
}
.reforma-contact-hero-form__submit:active {
	transform: translateY(1px);
}
.reforma-contact-hero-form__submit:focus-visible {
	outline: 3px solid oklch(100% 0 0 / 0.7);
	outline-offset: 3px;
}

/* Status alerts rendered inside the form card via PHP. */
.reforma-contact-form__alert {
	padding: 12px 16px;
	border-radius: var(--wp--preset--radius--small);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.reforma-contact-form__alert--success {
	background: oklch(95% 0.04 165 / 0.9);
	color: var(--wp--preset--color--accent-purple);
	border: 1px solid oklch(85% 0.05 165);
}
.reforma-contact-form__alert--error {
	background: oklch(95% 0.04 25 / 0.9);
	color: oklch(40% 0.15 25);
	border: 1px solid oklch(85% 0.06 25);
}

/* Responsive — collapse grid to 1 col on narrow screens. */
@media (max-width: 640px) {
	.reforma-contact-hero-form__grid {
		grid-template-columns: 1fr;
	}
	.reforma-contact-hero-photo img {
		aspect-ratio: 4 / 3;
	}
}

/* Reduced motion: kill form field + submit transitions. */
@media (prefers-reduced-motion: reduce) {
	.reforma-contact-hero-form__input,
	.reforma-contact-hero-form__submit {
		transition: none;
	}
}



/* Hero band — zero bottom margin so no gap between hero and stats. */
.reforma-hero-band {
	margin-block-end: 0 !important;
}

/* Stats bar — zero top margin so it sits flush against hero. */
.reforma-stats-bar {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Eliminate any sub-pixel rendering seam between the two sections.
   The hero has page-tint background, the stats-bar is accent-purple.
   A 1px overlap on stats-bar ensures no hairline gap survives
   anti-aliasing on retina displays. */
.reforma-stats-bar {
	position: relative;
	top: -1px;
}

/* Restore stats-bar's bottom margin to normal so sections below
   it (rooted-in-innovation etc.) are not affected. */
.reforma-stats-bar + * {
	margin-top: 0;
}

/* Tighten internal stats-bar padding slightly per Figma proportions.
   Current: spacing|70 = 48px top/bottom. Figma shows the stats band
   as a compact accent strip — spacing|60 (32px) is closer to Figma.
   Using CSS override instead of markup change to avoid re-seeding. */
.reforma-stats-bar.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ============================================================
   About page enrichment
   All border-radius, hover, shadow, and decorative rules for the
   7 about-* patterns live here (not as block attrs) to avoid the
   WP save() byte-mismatch / "Attempt Block Recovery" trap.
   OKLCH tokens only. Spacing from var(--wp--preset--spacing--*).
   ============================================================ */

/* ── About Hero ── */

/* Hero section: position context for image column fill. */
.reforma-about-hero {
	position: relative;
	overflow: hidden;
}

/* Right image column: stretches to match text column height.
   overflow:hidden clips the photo to the asymmetric corner shape. */
.reforma-about-hero-image-col {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	align-self: stretch;
}

/* Photo fills its column absolute.
   border-radius here (not block attr) to avoid has-custom-border injection
   (see gotcha: wp-block-validator-strips-fontSize-attr-from-buttons). */
.reforma-about-hero-image-col .wp-block-image,
.reforma-about-hero-image-col figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	width: 100%;
	height: 100%;
}

/* Top-left 100px asymmetric radius — Figma signature corner. */
.reforma-about-hero-image img,
.reforma-about-hero-image-col .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-top-left-radius: 100px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media (max-width: 768px) {
	.reforma-about-hero-image-col {
		min-height: 320px;
		position: relative;
	}
	.reforma-about-hero-image-col .wp-block-image,
	.reforma-about-hero-image-col figure {
		position: static;
		width: 100%;
		height: auto;
	}
	.reforma-about-hero-image img,
	.reforma-about-hero-image-col .wp-block-image img {
		height: auto;
		aspect-ratio: 4 / 3;
		border-top-left-radius: 60px;
	}
}

/* ── About Who We Are ── */

/* Image column: stretch full height of the row. */
.reforma-about-who-image-col { align-self: stretch; }
.reforma-about-who-image-col .wp-block-image { height: 100%; }

/* Photo: fill the column, bottom-right 100px corner per Figma §5. */
.reforma-about-who-image img {
	border-radius: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* ── About Our Company ── */

/* Stat cards: light surface bg, hairline border, asymmetric 0 20px 0 0 corner.
   Padding + radius via CSS (not block attrs) to avoid core/column JSON-attr traps.
   Single-layer shadow (max-2-layer rule). */
.reforma-stat-card {
	background: var(--wp--preset--color--page);
	border: 1px solid oklch(85% 0.005 240 / 0.6);
	border-top-left-radius: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important;
	box-shadow: 0 1px 4px oklch(0% 0 0 / 0.04);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px oklch(0% 0 0 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.reforma-stat-card { transition: none; }
	.reforma-stat-card:hover { transform: none; }
}

/* ── About Mission ── */

/* Decorative flora SVG — bottom-left corner, purely presentational.
   opacity 0.18 is gentle on the deep-green band.
   Uses 14-499-flora.svg (bottom-left cluster). */
.reforma-about-mission {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.reforma-about-mission > * {
	position: relative;
	z-index: 1;
}

.reforma-about-mission::after {
	content: '';
	position: absolute;
	bottom: -32px;
	left: -48px;
	width: clamp(160px, 20vw, 320px);
	height: clamp(200px, 28vw, 400px);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
	pointer-events: none;
	opacity: 0.18;
	z-index: 0;
}

/* The empty flora group block (aria-hidden) is a placeholder — hide it visually. */
.reforma-mission-flora {
	display: none !important;
}

@media (max-width: 640px) {
	.reforma-about-mission::after { display: none; }
}

/* ── About Brands ── */

/* Logo thumbnails: 80px height flush strip per brief.
   Overrides global .reforma-partner-logo (48px) for this wider logo wall.
   Grayscale + opacity by default; restore on hover/focus. */
.reforma-about-partner-logo img {
	height: 80px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
	display: block;
	filter: grayscale(1) opacity(0.5);
	transition: filter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-about-partner-logo:hover img,
.reforma-about-partner-logo:focus-within img {
	filter: grayscale(0) opacity(1);
}

@media (prefers-reduced-motion: reduce) {
	.reforma-about-partner-logo img { transition: none; }
}

/* ── About Values ── */

/* Value cards: asymmetric 0 20px 0 0 corner, hairline border, hover lift.
   Radius via CSS to avoid border.radius JSON attr byte-mismatch trap.
   !important overrides any leftover block-attr inline border-radius. */
.reforma-value-card {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border: 1px solid oklch(85% 0.005 240 / 0.5) !important;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px oklch(0% 0 0 / 0.09);
}

@media (prefers-reduced-motion: reduce) {
	.reforma-value-card { transition: none; }
	.reforma-value-card:hover { transform: none; }
}

/* Value icons: 48×48 cap. sizeSlug:"full" + no width/height JSON attrs on the block —
   only className + this rule controls rendered size, avoiding is-resized injection. */
.reforma-value-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
}

/* ── About CTA ── */

/* CTA button: asymmetric 0 20px 0 0 corner (Reforma signature).
   !important overrides block-attr inline border-radius if any survives.
   min-height 48px meets touch target requirement (≥ 44×44 CSS px). */
.reforma-cta-btn .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 32px;
	padding-right: 32px;
	min-height: 48px;
	min-width: 44px;
	transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-cta-btn .wp-block-button__link:hover {
	background-color: oklch(46% 0.131 248) !important;
}

.reforma-cta-btn .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-cta-btn .wp-block-button__link { transition: none; }
}

/* ============================================================
   About page pixel polish
   Targets: about-who-we-are (CTA corner, image fill), about-hero
   (back-link, em italic), about-mission (right flora echo),
   about-our-company (stat card white bg lift).
   OKLCH tokens only. No HEX/HSL.
   ============================================================ */

/* ── Who We Are CTA button ──
   Outlined "Get in Touch" uses Reforma asymmetric corner (0 20px 0 0)
   instead of a pill. Transparent bg; accent-purple border.
   min-height 48px satisfies >=44x44 CSS px touch target. */
.reforma-about-who-cta .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 32px;
	padding-right: 32px;
	min-height: 48px;
	min-width: 44px;
	background: transparent !important;
	transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1),
	            color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-about-who-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-purple) !important;
	color: oklch(100% 0 90) !important;
}

.reforma-about-who-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-purple);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-about-who-cta .wp-block-button__link { transition: none; }
}

/* ── About Hero H1 em italic ──
   Allows <em>Reforma</em> in the H1 to render as display-serif italic. */
.reforma-about-hero h1 em {
	font-style: italic;
	font-weight: inherit;
}

/* ── About Hero back-link ──
   Remove default browser underline; color inherited from has-brand-gold-color. */
.reforma-about-hero .reforma-back-link a {
	text-decoration: none;
	color: inherit;
}
.reforma-about-hero .reforma-back-link a:hover {
	text-decoration: underline;
}

/* ── About Who We Are image fill ──
   The product image fills the 45% left column without letterboxing. */
.reforma-about-who-image-col .wp-block-image img {
	min-height: 360px;
	object-fit: cover;
}

/* ── About Brands logo strip alignment ──
   Vertically center all 7 logo columns in the row. */
.reforma-about-brands .wp-block-columns {
	align-items: center;
}

/* ── About Mission right-echo flora ──
   Mirrors the left ::after flora in the top-right at lower opacity
   for visual balance on wider viewports. */
.reforma-about-mission::before {
	content: '';
	position: absolute;
	top: -24px;
	right: -40px;
	width: clamp(100px, 12vw, 200px);
	height: clamp(120px, 16vw, 250px);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	pointer-events: none;
	opacity: 0.09;
	transform: scaleX(-1);
	z-index: 0;
}

@media (max-width: 640px) {
	.reforma-about-mission::before { display: none; }
}

/* ── About Our Company: stat cards on surface section get white fill ──
   Creates visible card-lift separation against the surface background. */
.reforma-about-our-company .reforma-stat-card {
	background: var(--wp--preset--color--white);
}

/* ============================================================
   Home section polish
   Targets: premium-products.php, complete-treatment-plan.php
   ============================================================ */

/* Premium Products header row — the flex CTA group must not grow,
   so "Browse Cosmetics" stays flush-right at its natural width. */
.reforma-premium-products .alignwide > .wp-block-buttons {
	flex-shrink: 0;
}

/* Hair Loss Plan — cream header band flushes against dark-green band below. */
.reforma-treatment-cream-header {
	margin-bottom: 0 !important;
}

/* Hair Loss Plan — checklist rows: white-15% hairline dividers per Figma.
   Border lives here (not block attr) to avoid has-border-color class injection
   on core/group which causes save() byte-mismatch across WP versions. */
.reforma-checklist-row {
	border-bottom: 1px solid oklch(100% 0 0 / 0.15);
}
.reforma-checklist-row:last-child {
	border-bottom: none;
}

/* Hair Loss Plan — treatment card asymmetric corners (Figma: 0 20px 0 0).
   Overrides block-attr border-radius on the wp-block-column wrapper.
   Consistent with reforma-product-card--asymmetric pattern . */
.reforma-treatment-card {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Treatment "Details" outline button — ensure border-color resolves to brand-gold
   even when WP outline style resets border-color on is-style-outline elements. */
.reforma-treatment-details-btn > .wp-block-button__link {
	border-color: var(--wp--preset--color--brand-gold) !important;
}

/* ============================================================
   News article polish
   Targets: article-hero, article-body, article-sidebar,
            article-stats, article-back-to-news-cta, single.html
   OKLCH tokens only. Spacing from var(--wp--preset--spacing--*).
   ============================================================ */

/* ── Article Hero — gradient direction fix ──
   Figma: brand-gold opaque on LEFT fading to transparent RIGHT,
   so the bottom-left text block sits on a readable dark field.
   Old gradient went to-right green→blue (backwards: left was
   transparent, right was dark, leaving title unreadable on photo). */
.reforma-article-hero .wp-block-cover__inner-container > .wp-block-group {
	background-image: linear-gradient(
		to right,
		oklch(28% 0.05 185 / 0.82) 0%,
		oklch(28% 0.05 185 / 0%) 65%
	) !important;
}

/* ── Article Hero — eyebrow colour: brand-gold per Figma ──
   Figma hero shows category eyebrow in brand-gold against the dark overlay. */
.reforma-article-hero .reforma-eyebrow {
	color: var(--wp--preset--color--brand-gold) !important;
}

/* ── Article body — h2 / h3 inside post-content ──
   Scoped to .reforma-article-body to avoid bleed to other pages. */
.reforma-article-body .wp-block-post-content h2 {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.3;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--40);
}
.reforma-article-body .wp-block-post-content h3 {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.35;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ── Article body — blockquote ──
   Semantic blockquote: left-border is typographically correct
   (not a card accent stripe — this targets a <blockquote> element,
   the one legitimate use of a left-border per design rules). */
.reforma-article-body .wp-block-post-content blockquote,
.reforma-article-body .wp-block-post-content .wp-block-quote {
	padding-left: 0;
	margin-left: 0;
	font-style: normal;
	color: #3e273b;
}

/* ── Article body — inline links ── */
.reforma-article-body .wp-block-post-content a {
	color: var(--wp--preset--color--brand-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.reforma-article-body .wp-block-post-content a:hover {
	color: oklch(45% 0.131 248);
}

/* ── Article body — tag chips ──
   wp:post-terms renders <a> anchors; pill treatment lives here. */
.reforma-tag-chips .wp-block-post-terms__separator { display: none; }
.reforma-tag-chips a {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--preset--radius--small);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-decoration: none;
	margin-right: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}
.reforma-tag-chips a:hover {
	background: oklch(91% 0.01 240);
	color: var(--wp--preset--color--ink);
}

/* ── Sidebar — card gap: 24px per Figma ──
   blockGap attr is spacing|40 (16px); override avoids re-seeding. */
.reforma-article-sidebar {
	gap: var(--wp--preset--spacing--50) !important;
}

/* ── Article stats — vertical hairline dividers between columns ── */
.reforma-article-stats .wp-block-column:not(:first-child) {
	border-left: 1px solid oklch(85% 0.005 240);
}
@media (max-width: 768px) {
	.reforma-article-stats .wp-block-column:not(:first-child) {
		border-left: none;
		border-top: 1px solid oklch(85% 0.005 240);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* ── Back-to-news CTA — cap heading max-width ──
   Prevents heading from running full flex-row width; gives button
   adequate breathing room in the space-between flex layout. */
.reforma-article-back-cta .wp-block-group > .wp-block-group:first-child {
	max-width: 600px;
}

/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-tag-chips a { transition: none; }
}

/* ============================================================ */

/* ============================================================
   Shop page polish
   Targets: products-hero.php, product-filter-bar.php,
            product-grid.php, products-cta.php
   OKLCH only. All rules avoid block-attr classes (safe for
   WP block validator — see gotcha:
   wp-block-validator-strips-fontSize-attr-from-buttons).
   ============================================================ */

/* Products hero — decorative leaf cluster top-right.
   Matches Figma §2 hero composition: leaf-cluster-products.svg
   floats in the right column area, behind the product image.
   position:relative + overflow:hidden already set via
   .reforma-products-hero (WordPress cover block base styles).
   z-index 0 keeps SVG behind both the gradient span and content. */
.reforma-products-hero {
	position: relative;
	overflow: hidden;
}
.reforma-products-hero::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(160px, 22vw, 400px);
	height: clamp(200px, 100%, 100%);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	pointer-events: none;
	opacity: 0.45;
	z-index: 0;
}
/* Ensure cover inner-container sits above leaf. */
.reforma-products-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Products hero image column — asymmetric top-right corner (Figma: 0 300px 0 0).
   Uses CSS on the figure wrapper (not style.border.radius JSON attr) to avoid
   has-custom-border + is-resized auto-class injection that triggers byte-mismatch.
   The overflow:hidden on the parent reforma-products-hero-image-col clips the
   image cleanly. */
.reforma-products-hero-image-col {
	overflow: hidden;
}
.reforma-products-hero-image-col .wp-block-image {
	overflow: hidden;
	border-top-right-radius: var(--wp--preset--radius--hero, 300px);
}
.reforma-products-hero-image-col .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	/* Reset any inherited radius from product-card rules. */
	border-radius: 0 !important;
	aspect-ratio: unset;
	object-fit: cover;
}

/* Products hero — eyebrow accent-purple on hero-band gradient.
   accent-purple token is oklch(38.5% 0.067 165) per theme.json.
   Against the dark hero-band gradient (mid L ~35–45%) the green
   is close to Figma's #4CAF80 eyebrow color — no override needed,
   but ensure no WP-cover inherited opacity is suppressing it. */
.reforma-products-hero .reforma-eyebrow {
	opacity: 1;
}

/* Products hero stat boxes — ensure hairline white borders display
   on all browsers. WP renders border via has-border-color class
   + inline border-width/color, which is correct. The stat-box
   class here provides a safety net if the inline style is stripped. */
.reforma-stat-box {
	border: 1px solid oklch(100% 0 0 / 0.55);
	border-radius: var(--wp--preset--radius--small);
}

/* Filter bar — sort label dropdown affordance.
   Replace the &#9660; filled-triangle HTML entity with a CSS
   ::after chevron that matches Figma's hairline chevron style.
   The paragraph content already has the entity — we suppress it
   via font-size:0 on the entity (the ::after redraws it cleanly). */
.reforma-sort-label::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 6px;
	margin-left: 6px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Products CTA band — flex row layout.
   The pattern uses layout:"flex" space-between at the inner group.
   On narrow screens (<= 640px) the flex row wraps to vertical —
   h2+body stacks above the button. This ensures the button
   doesn't squeeze against long copy on mid-size screens. */
.reforma-products-cta .wp-block-group {
	flex-wrap: wrap;
}
@media (max-width: 768px) {
	.reforma-products-cta .wp-block-group {
		flex-direction: column;
		align-items: flex-start;
	}
	.reforma-products-cta .wp-block-buttons {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* Products CTA — Contact Our Team button: keyboard focus ring. */
.reforma-cta-contact-btn > .wp-block-button__link:focus-visible {
	outline: 3px solid oklch(100% 0 0 / 0.7);
	outline-offset: 3px;
}

/* Back chip pill — keyboard focus ring (shared with archive breadcrumb). */
.reforma-back-chip > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-gold);
	outline-offset: 2px;
}

/* Breadcrumb trail — separator ">" characters use ink-soft so they
   don't compete with the linked segments. color:inherit on the <a>
   tags means all text inherits ink-soft; no differentiation needed
   since underline on hover is sufficient affordance. */
.reforma-breadcrumb-trail-products {
	margin: 0 !important;
}

@media (max-width: 640px) {
	/* Products hero leaf: hide on mobile to prevent visual clutter. */
	.reforma-products-hero::after {
		display: none;
	}
	/* Stat boxes: 2-col grid on mobile for compact hero. */
	.reforma-products-hero .wp-block-columns:last-child {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reforma-products-hero::after {
		opacity: 0.3;
	}
}
/* ============================================================ */

/* ============================================================
   News listing polish
   ============================================================
   Target: news-listing-hero.php + home.html query loop cards.
   All colors in OKLCH. No HEX. No HSL.

   Problems addressed:
   1. Hero rendered as invisible cream band (same color as page bg).
      Fix: brand-gold gradient background matching article-hero DNA.
   2. Hero had no asymmetric corner — other heroes do.
      Fix: border-top-left-radius 100px (matches article-hero treatment).
   3. Hero lacked decorative leaf — looks sparse vs rest of site.
      Fix: hero-flora-right.svg right-side decoration.
   4. Date pill was accent-purple on listing (spec says brand-gold).
      Fix: markup updated in home.html + CSS fallback override.
   5. Card 1 asymmetric corner missing on listing page.
      Fix: li:first-child CSS targeting (can't add class per-iteration
      in core/post-template markup — CSS is the correct lever here).
   ============================================================ */

/* 1. Hero gradient + asymmetric corner + stacking context.
   Gradient angle matches article-hero approach (top-left to bottom-right)
   using the theme's brand-gold OKLCH token + a slightly deeper shade.
   border-top-left-radius 100px is the Figma article-hero signature.
   overflow:hidden clips both the leaf child and the curved corner.
   min-height 320px ensures legible hero even with empty ACF bindings. */
.reforma-news-listing-hero {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--brand-gold) 0%,
		oklch(46% 0.078 75) 100%
	);
	border-top-left-radius: 100px;
	overflow: hidden;
	isolation: isolate;
	position: relative;
	min-height: 320px;
}

/* Content above leaf layer. */
.reforma-news-listing-hero > * {
	position: relative;
	z-index: 1;
}

/* 2. Decorative leaf right side.
   Empty core/group block (aria-hidden) carries the SVG as bg-image.
   hero-flora-right.svg is the same Figma export used in the home hero band.
   Absolute positioning keeps it out of the layout flow.
   opacity 0.2 — subtle depth, not competing with text. */
.reforma-news-listing-hero-leaf {
	position: absolute !important;
	top: 0;
	right: 0;
	width: clamp(160px, 20vw, 360px) !important;
	height: 100% !important;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
	padding: 0 !important;
	margin: 0 !important;
}

/* Mobile: drop asymmetric curve (100px clips at narrow viewports),
   keep gradient. Leaf hidden to prevent visual clutter. */
@media (max-width: 640px) {
	.reforma-news-listing-hero {
		border-top-left-radius: 0;
		min-height: 240px;
	}
	.reforma-news-listing-hero-leaf {
		display: none;
	}
}

/* 3. Card 1 asymmetric corner on listing page.
   core/post-template renders <ul class="wp-block-post-template"><li>…</li>…
   li:first-child reliably targets the first post card in the grid.
   100px top-left matches  home news-insights port + article-hero DNA.
   overflow:hidden on the card clips the image to the curved shape.
   The img also gets the matching radius for when there's no opaque bg box. */
.wp-block-post-template li:first-child .reforma-news-card {
	border-top-left-radius: 100px;
	overflow: hidden;
}
.wp-block-post-template li:first-child .reforma-news-card-image img {
	border-top-left-radius: 100px;
}

/* 3b. Card title link color — h3 inside news card wraps the title in <a>.
   WP global link elements rule (ink-plum) wins without !important here.
   Scoped tightly to .reforma-news-card to avoid bleed elsewhere. */
.reforma-news-card h3 a,
.reforma-news-card .wp-block-heading a,
.reforma-news-grid .reforma-news-card h3 a,
.wp-block-columns .reforma-news-card h3 a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
}
.reforma-news-card h3 a:hover,
.reforma-news-card .wp-block-heading a:hover,
.reforma-news-grid .reforma-news-card h3 a:hover,
.wp-block-columns .reforma-news-card h3 a:hover {
	color: var(--wp--preset--color--brand-gold) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* 4. Date pill color safety net.
   Markup now sets has-brand-gold-background-color + has-white-color.
   These rules handle FlyingPress-cached HTML still carrying old accent-purple/page classes
   until cache is fully purged. Also corrects color for cached listing pages. */
.reforma-news-date-pill.has-accent-purple-background-color {
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: oklch(100% 0 0) !important;
}
.reforma-news-date-pill.has-page-color {
	color: oklch(100% 0 0) !important;
}

/* 5. Reduced motion: no-op for hero (future-proof). */
@media (prefers-reduced-motion: reduce) {
	.reforma-news-listing-hero {
		transition: none;
	}
}

/* ============================================================
   Contact page polish
   Targets: begin-skincare-cta.php, faq-accordion.php,
            contact-hero.php (image corner already set in ).
   OKLCH only. Spacing from var(--wp--preset--spacing--*).
   ============================================================ */

/* Begin Skincare CTA — decorative line-art face SVG, right side.
   Figma: a line-art female face illustration floats at the far right
   of the green band, partially clipped by the section edge.
   The ::after pseudo element carries the SVG; currentColor inherits
   white from the band so the stroke renders in off-white.
   opacity 0.18 keeps it as a subtle texture — Figma treatment for
   decorative line-art on solid-color bands.
   isolation:isolate + overflow:hidden already present on the section
   via the base .reforma-begin-skincare rules. */
.reforma-begin-skincare {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.reforma-begin-skincare > * {
	position: relative;
	z-index: 1;
}

.reforma-begin-skincare::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -24px;
	transform: translateY(-50%);
	width: clamp(140px, 16vw, 260px);
	height: clamp(180px, 22vw, 360px);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
	pointer-events: none;
	opacity: 0.18;
	z-index: 0;
}

@media (max-width: 768px) {
	.reforma-begin-skincare::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reforma-begin-skincare::after {
		opacity: 0.12;
	}
}

/* FAQ accordion — ensure first item has no top border (already in  rules,
   defensive re-scope here so the :first-of-type selector fires even if WP's
   layout injects a wrapper group between the section and the first item). */
.reforma-faq .reforma-faq-item:first-child {
	border-top: none;
	padding-top: 0;
}

/* Contact hero — ensure the bottom margin between the hero and the Begin Skincare
   band is zero so the two sections flow flush (consistent with stats-bar treatment). */
.reforma-contact-hero {
	margin-block-end: 0 !important;
}

.reforma-begin-skincare {
	margin-block-start: 0 !important;
}

/* Contact hero social icons — minimum touch target 44×44px per a11y baseline.
   The core/social-links block renders icons as inline-block ~24px. The gap
   between icons plus the padding from .wp-social-link a covers click area,
   but explicit min-width/height ensures the tap area is reliably 44px. */
.reforma-contact-hero-social .wp-block-social-link a {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
/* ============================================================ */

/* ============================================================
   Contact page pixel polish
   Targets: contact-hero.php (left col stretch), faq-accordion.php
            (+ icon on questions).
   OKLCH only. 4pt grid spacing. No block-attr classes touched.
   ============================================================ */

/* Contact hero — left photo column stretches to match right-col height.
   WP columns with verticalAlignment:"top" set align-self:flex-start on
   each column, so the left col only grows to the photo's aspect-ratio
   height while the right col (with form card) is much taller.
   Override: align-self:stretch + height:100% chain so the photo
   fills the full column height without changing block markup. */
.reforma-contact-hero .wp-block-column:first-child {
	align-self: stretch !important;
}
.reforma-contact-hero .wp-block-column:first-child .wp-block-image {
	height: 100%;
}
.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
.reforma-contact-hero-photo img {
	height: 100%;
	min-height: 400px;
	aspect-ratio: unset;
	object-fit: cover;
}

/* Mobile: revert to natural aspect-ratio so the photo does not stretch
   to an absurd height when columns stack vertically. */
@media (max-width: 768px) {
	.reforma-contact-hero .wp-block-column:first-child {
		align-self: auto !important;
	}
	.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
	.reforma-contact-hero-photo img {
		height: auto;
		min-height: unset;
		aspect-ratio: 4 / 3;
	}
}

/* FAQ items — `+` icon prefix on each question (Figma spec).
   Figma shows a `+` inside a circle at the left of each question h3.
   CSS ::before on the heading keeps the markup clean.
   flex-layout so icon and text flow as a row. */
.reforma-faq-item .wp-block-heading {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.reforma-faq-item .wp-block-heading::before {
	content: '+';
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-gold);
	border: 1.5px solid var(--wp--preset--color--brand-gold);
	border-radius: 50%;
	margin-top: 0;
	flex-shrink: 0;
}

/* ============================================================ */

/* ============================================================
    -- Booking page polish
   Goal: reduce live page height (2501px live vs 1470px Figma).
   Root causes: excess card-body padding, bottom-margins on cards,
   textarea min-height, field grid gaps, hero top padding.
   Valid spacing slugs: 10/20/30/40/50/60/70/80/90 only.
   OKLCH for all color values.
   ============================================================ */

/* Form cards: reduce bottom margin from spacing|40 (16px) to spacing|20 (8px). */
.reforma-form-card {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Card body: reduce interior padding from spacing|50 (24px) to spacing|40 (16px). */
.reforma-card-body {
	padding: var(--wp--preset--spacing--40);
}

/* Field grids: tighten gap from spacing|30 (12px) to spacing|20 (8px). */
.reforma-field-grid-2,
.reforma-field-grid-1 {
	gap: var(--wp--preset--spacing--20);
}

/* Textarea: 3-row minimum (80px) vs 4-row (100px ).
   Still above 48px touch minimum for accessibility. */
.reforma-textarea {
	min-height: 80px;
}

/* Consent row: tighten above/below spacing. */
.reforma-consent-row {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Submit button: reduce vertical padding from 16px to 12px. */
/* Submit button: Reforma asymmetric corner signature (0 20px 0 0). */
.reforma-submit-btn {
	padding-top: 12px;
	padding-bottom: 12px;
	border-top-left-radius: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* Order summary card header: tighten green band padding. */
.reforma-order-summary-card__header {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Order summary card body: reduce from 24px to 16px. */
.reforma-order-summary-card__body {
	padding: var(--wp--preset--spacing--40);
}

/* Benefits list: tighten row gap from spacing|30 to spacing|20. */
.reforma-benefits-list {
	gap: var(--wp--preset--spacing--20);
}

/* Trust card: reduce vertical padding from spacing|60 (32px) to spacing|50 (24px). */
.reforma-trust-card {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* License footer: reduce from spacing|70 (48px) to spacing|60 (32px). */
.reforma-license-footer.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* Booking hero h1: cap line length for readability. */
.reforma-booking-hero .wp-block-heading {
	max-width: 60ch;
}

/* Back button: enforce 44px touch target minimum (a11y baseline). */
.reforma-back-btn .wp-block-button__link {
	min-height: 44px;
}

/* Sticky sidebar: top offset clears admin bar (32px) + 8px breathing room. */
@media (min-width: 769px) {
	.reforma-booking-sidebar {
		top: var(--wp--preset--spacing--40);
	}
}

/* Reduced motion: disable booking page transitions. */
@media (prefers-reduced-motion: reduce) {
	.reforma-submit-btn,
	.reforma-booking-form--sections .reforma-input,
	.reforma-order-summary-card,
	.reforma-trust-card {
		transition: none;
	}
}

/* ============================================================ */

/* ============================================================
    -- Booking pixel-precision polish
   Goal: close remaining 4.36% diff to under 2%.
   Methodology: pixel-sampled Figma 1920x1470 vs live ~2185px.
   All spacing slugs in {10,20,30,40,50,60,70,80,90}.
   All colors in OKLCH. No HEX, no HSL.
   ============================================================ */

/* Card headers: tighten from 12px to 10px vertical padding.
   Figma green header bands are ~38px tall (10px + 17px text + 10px = 37px).
   Saves ~8px across 4 cards = ~32px. */
.reforma-card-header {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Separator inside Order Summary: tighten from spacing|40 (16px) each side
   to spacing|30 (12px). Saves 8px. Targets only the sidebar separator
   without touching separators in license-footer. */
.reforma-order-summary-card__body .wp-block-separator {
	margin-top: var(--wp--preset--spacing--30) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* Order Summary card gap to Trust card: spacing|40 (16px) -> spacing|30 (12px).
   Figma shows ~10-12px between the two cards. Saves 4px. */
.reforma-order-summary-card {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Trust card: reduce vertical padding from spacing|50 (24px) to spacing|40 (16px).
   Figma dark-navy card shows ~16px top/bottom. Saves 16px. */
.reforma-trust-card {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Consent row top: spacing|30 (12px) -> spacing|20 (8px).
   Figma shows the consent checkbox sitting ~8px below the last form card.
   Bottom margin stays spacing|40 (16px) for submit button breathing room. */
.reforma-consent-row {
	margin-top: var(--wp--preset--spacing--20);
}

/* Back button: Figma breadcrumb row is ~36px tall on desktop.
    set 44px unconditionally for touch a11y — correct.
   Restore 36px on desktop only; mobile keeps 44px touch target. */
@media (min-width: 769px) {
	.reforma-back-btn .wp-block-button__link {
		min-height: 36px;
	}
}

/* Order Summary "Which frequency" hint paragraph: zero block-start margin
   so spacing is controlled only by the block-attr margin-bottom. */
.reforma-order-summary-card__body > .wp-block-paragraph:first-child {
	margin-top: 0 !important;
}

/* ============================================================
   End  booking polish
   ============================================================ */

/* ============================================================
   Shop page pixel polish
   Targets: products-hero.php, product-filter-bar.php,
            product-grid.php, products-cta.php,
            archive-product.html (breadcrumb)
   Methodology: pixel-sampled Figma 1920×2776 vs live shop-live.png.
   All colors OKLCH. All spacing slugs in {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* Products hero — min-height 440px (Figma frame height ≈ 440px).
    set 380px; sampling the Figma hero band shows it is
   approximately 440px at 1920px frame width.
   CSS override so markup min-height attr is the authoritative value;
   this rule provides a safety-net for block-editor preview mode where
   the cover block's minHeight attr may not cascade correctly. */
.reforma-products-hero.wp-block-cover {
	min-height: 440px !important;
}

/* Products hero — leaf-wave decoration in right image column.
   The .reforma-products-hero-decoration group block (empty, aria-hidden)
   is positioned absolute inside the hero image column and carries the
   14-599-hero-wave.svg via background-image, mirroring the home hero's
    treatment. z-index 2 floats it above the cover gradient span. */
.reforma-products-hero-decoration {
	position: absolute !important;
	top: -80px;
	right: -29%;
	left: auto;
	transform: rotate(15deg);
	transform-origin: top right;
	width: clamp(220px, 26vw, 430px) !important;
	height: clamp(420px, 58vw, 840px) !important;
	pointer-events: none;
	z-index: 0;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	opacity: 0.85;
	padding: 0 !important;
	margin: 0 !important;
}
/* Arabic / RTL: mirror the branch to the LEFT of the bottles. */
[dir="rtl"] .reforma-products-hero-decoration {
	right: auto;
	left: -12%;
	transform: scaleX(-1) rotate(15deg);
	transform-origin: top left;
	background-position: top left;
}

/* Hero image column — relative stacking context so the decoration
   group resolves against the column, not the whole cover block.
   Also removes the old ::after leaf from  (now provided
   by the inline .reforma-products-hero-decoration group). */
.reforma-products-hero .reforma-products-hero-image-col {
	position: relative;
}

/* Suppress the products-hero section ::after leaf ( approach)
   because the decoration now lives inside the image column. */
.reforma-products-hero::after {
	display: none !important;
}

/* Filter bar — bottom hairline separator.
   Figma §2 filter bar sits against the hero with a 1px hairline
   border-bottom that creates visual separation from the product grid.
   Border via CSS on the section wrapper (not block attr) to avoid
   style.border.color has-border-color injection (block-validator trap). */
.reforma-product-filter-bar.wp-block-group {
	border-bottom: 1px solid oklch(88% 0.005 240 / 0.7);
}

/* Product grid — equal-height columns so VIEW DETAILS rows align.
   The 4 wp-block-columns children are flex items; stretch makes each
   column grow to the tallest card's height in the row.
   This is the CSS-only approach (no height/min-height block attrs which
   would require extra auto-classes in save() output). */
.reforma-product-grid .wp-block-columns {
	align-items: stretch;
}

/* Product card — stretch to full column height so shorter-copy cards
   do not stop mid-grid. overflow:hidden clips content to card radius. */
.reforma-product-grid .wp-block-column.reforma-product-card {
	display: flex;
	flex-direction: column;
}

/* Card body — grow to fill the column so the buttons anchor to bottom.
   flex-grow:1 makes the body expand while the image wrap stays fixed.
   justify-content:space-between pushes "View Details" to the card bottom. */
.reforma-product-grid .reforma-product-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Description paragraph — grows to fill space between category/title
   and the VIEW DETAILS row, anchoring the CTA flush-bottom. */
.reforma-product-grid .reforma-product-card-body > .wp-block-paragraph.has-ink-color {
	flex: 1;
}

/* Breadcrumb separator — the &#8250; single right angle quotation (›)
   used in archive-product.html needs a small horizontal margin on each
   side to match Figma's spacing. Targets the breadcrumb paragraph inside
   the archive breadcrumb bar. */
.reforma-products-hero + * .has-ink-soft-color a,
.wp-block-group .has-ink-soft-color a[href="/"],
.wp-block-group .has-ink-soft-color a[href="/shop/"] {
	text-decoration: none;
	color: inherit;
}

/* Archive back + breadcrumb row — bottom border reinforces section break. */
.wp-block-group.has-page-background-color > .wp-block-group > .wp-block-group {
	/* No border here — separation is provided by filter-bar bottom border. */
}

/* Products CTA — Contact Our Team button hover state.
   The pill border-radius is 999px (full pill). Figma colour on hover
   is a slightly darker brand-gold. */
.reforma-cta-contact-btn > .wp-block-button__link:hover {
	background-color: oklch(46% 0.131 248) !important;
}

/* Mobile adaptations —  shop. */
@media (max-width: 768px) {
	.reforma-products-hero-decoration {
		display: none;
	}
	.reforma-products-hero.wp-block-cover {
		min-height: 320px !important;
	}
	/* Stat boxes: 2×2 grid on mobile (4pt grid, each box equal width). */
	.reforma-products-hero .wp-block-columns.wp-block-columns:not(.alignwide) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* Reduced motion — shop page. */
@media (prefers-reduced-motion: reduce) {
	.reforma-products-hero-decoration {
		opacity: 0.2;
	}
}

/* ============================================================
   End  shop polish
   ============================================================ */

/* ============================================================
   News listing pixel-precision polish
   Methodology: pixel-sampled
     - Figma article-hero (news-article-w19.png y=0..600)
     - Figma home News & Insights (home-w19.png y=5800..6700)
     - Live baseline (reports/wave-19/news-listing-live.png)
   Colors: OKLCH only. Spacing: {10,20,30,40,50,60,70,80,90}.
   No border-left stripe. No gradient text. No card-on-card.

   Gaps closed:
   1. Hero min-height 320px  is ~40% shorter than the
      article-hero (538px). Raise to 460px + flex-column centering.
   2. Gradient direction 135deg (diagonal) corrected to 160deg —
      more vertical, matching the depth direction of the article-hero
      band. Lighter brand-gold at top, darker at bottom-right.
   3. No 2-col intermediate breakpoint on the 3-col card grid.
      Add 2-col at 481–768px viewport width.
   4. Pagination entirely unstyled.
      Add clean minimal number-strip with brand-gold current page.
   5. Card hover lift absent.
      Add subtle translateY(-2px), ease-out-quart, 200ms.
   ============================================================ */

/* 1a. Hero: raise min-height + gold gradient depth. */
.reforma-news-listing-hero {
	background: linear-gradient(
		160deg,
		var(--wp--preset--color--brand-gold) 0%,
		oklch(44% 0.093 78) 100%
	);
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 1b. Inner constrained group: full width inside the flex container. */
.reforma-news-listing-hero > .wp-block-group {
	width: 100%;
}

/* 2. Card grid — 2-col intermediate breakpoint (tablet).
   WP's post-template grid natively jumps from 3→1 with no middle
   step. At 481–768px two columns keep cards readable and the
   first-card corner softens proportionally. */
@media (min-width: 481px) and (max-width: 768px) {
	.reforma-news-listing-section .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.wp-block-post-template li:first-child .reforma-news-card {
		border-top-left-radius: 64px;
	}
	.wp-block-post-template li:first-child .reforma-news-card-image img {
		border-top-left-radius: 64px;
	}
}

/* Mobile: soften asymmetric corner to 40px (100px clips at 320–480px). */
@media (max-width: 480px) {
	.wp-block-post-template li:first-child .reforma-news-card {
		border-top-left-radius: 40px;
	}
	.wp-block-post-template li:first-child .reforma-news-card-image img {
		border-top-left-radius: 40px;
	}
}

/* 3. Card hover lift — ease-out-quart, 200ms enter/exit.
   Scoped to listing section so home page news cards are unaffected. */
.reforma-news-listing-section .reforma-news-card {
	transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.reforma-news-listing-section .reforma-news-card:hover {
	transform: translateY(-2px);
}

/* 4. Pagination — clean minimal strip.
   Number buttons: 36×36px minimum, brand-gold on current page.
   Only one box-shadow layer used (none here — background change only). */
.reforma-news-listing-section .wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--sm);
}
.reforma-news-listing-section .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--radius--small);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: background 150ms ease-out, color 150ms ease-out;
}
.reforma-news-listing-section .wp-block-query-pagination .page-numbers:hover,
.reforma-news-listing-section .wp-block-query-pagination .page-numbers:focus-visible {
	background: oklch(94% 0.012 248);
	color: var(--wp--preset--color--brand-gold);
	outline: none;
}
.reforma-news-listing-section .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--page);
	font-weight: 700;
}
.reforma-news-listing-section .wp-block-query-pagination-previous,
.reforma-news-listing-section .wp-block-query-pagination-next {
	color: var(--wp--preset--color--brand-gold);
	font-weight: 600;
	text-decoration: none;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--preset--radius--small);
	transition: background 150ms ease-out;
}
.reforma-news-listing-section .wp-block-query-pagination-previous:hover,
.reforma-news-listing-section .wp-block-query-pagination-previous:focus-visible,
.reforma-news-listing-section .wp-block-query-pagination-next:hover,
.reforma-news-listing-section .wp-block-query-pagination-next:focus-visible {
	background: oklch(94% 0.012 248);
	outline: none;
}

/* Mobile: hero height scales down. Gradient kept (no corner on mobile). */
@media (max-width: 640px) {
	.reforma-news-listing-hero {
		min-height: 280px;
	}
}

/* Reduced motion: disable all transitions on the listing page. */
@media (prefers-reduced-motion: reduce) {
	.reforma-news-listing-section .reforma-news-card,
	.reforma-news-listing-section .wp-block-query-pagination .page-numbers,
	.reforma-news-listing-section .wp-block-query-pagination-previous,
	.reforma-news-listing-section .wp-block-query-pagination-next {
		transition: none;
	}
}

/* ============================================================
   End  news-listing polish
   ============================================================ */



/* ── A. Rooted stat chips (Figma signature: light-blue tint bg,
   thin blue-tint border, 0 20px 0 0 asymmetric corner) ── */
.reforma-rooted-stat-chip {
	background-color: oklch(97.5% 0.012 240);
	border: 1px solid oklch(88% 0.02 240);
	border-radius: 0 20px 0 0;
	padding: var(--wp--preset--spacing--50) !important;
	text-align: center;
}

/* ── B. Rooted CTA — replace 999px pill with 0 20px 0 0 (Figma primary CTA shape) ── */
.reforma-rooted .wp-block-buttons .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* ── C. Contact form band — left photo curve (0 0 100px 0 Figma sig) ── */
.reforma-contact-band .reforma-contact-image img {
	border-radius: 0 0 100px 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reforma-contact-band .reforma-contact-image {
	height: auto;
	display: block;
}

/* ── D. Contact booking card — accent-purple bg (Figma confirmed ).
   No shadow/border override — card uses green bg from block attrs.
   Inputs + labels use the base .reforma-booking-form__* rules (white
   translucent on green) defined in -A block above. ── */
.reforma-contact-booking-card {
	box-shadow: none;
	border: none;
	overflow: visible;
}

/* ── E. Contact-band left column heading group — stack naturally above photo ── */
.reforma-contact-band-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* ── F. News section background: Figma shows page-bg (#f4faff),
   already correct. No change needed. ── */

/* ============================================================ */

/* ============================================================
    -- News article pixel-precision polish
   Targets: article-hero, article-body, article-sidebar,
            article-stats, article-back-to-news-cta
   OKLCH only. Spacing via var(--wp--preset--spacing--).
   ============================================================ */

/* -- Article Hero: face SVG decoration REMOVED ( fix) --
   The contact-skincare-face.svg ::after produced massive opaque
   green abstract shapes that covered the hero title text on live.
   Figma shows a clean blue gradient band with no decoration here.
   overflow:hidden removed — it was only needed to clip that pseudo-element. */

/* -- Article body: paragraph typography --
   Scoped to .reforma-article-body. md font-size + 1.7 line-height. */
.reforma-article-body .wp-block-post-content p {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}

/* -- Article body: h4 sub-section headings -- */
.reforma-article-body .wp-block-post-content h4 {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.3;
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* -- Article body: ul/ol list styling --
   Bullet markers in accent-purple per Figma. */
.reforma-article-body .wp-block-post-content ul,
.reforma-article-body .wp-block-post-content ol {
	padding-left: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}
.reforma-article-body .wp-block-post-content ul li,
.reforma-article-body .wp-block-post-content ol li {
	margin-bottom: var(--wp--preset--spacing--20);
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}
.reforma-article-body .wp-block-post-content ul li::marker {
	color: var(--wp--preset--color--accent-purple);
}

/* -- Article stats band: hairline top/bottom borders --
   Figma: 1px separators above and below anchor the stats band. */
.reforma-article-stats {
	border-top: 1px solid oklch(88% 0.006 240);
	border-bottom: 1px solid oklch(88% 0.006 240);
}

/* -- Article stats: tighten heading bottom margin -- */
.reforma-article-stats .wp-block-column .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--10) !important;
}

/* -- Back-to-news CTA: heading font-size 2xl --
   3xl was oversized vs Figma. 2xl (clamp 32-40px) matches.
   Markup also updated in article-back-to-news-cta.php. */
.reforma-article-back-cta h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--2xl);
}

/* -- Sidebar details card: stack label above value --
   Figma: label (Published) sits above value (March 18, 2026).
   Targets inner flex rows by their spacing|10 gap inline-style. */
.reforma-sidebar-card--details .wp-block-group[style*="gap:var(--wp--preset--spacing--10)"] {
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* -- Reduced motion (placeholder for future article-hero motion rules) -- */

/* ============================================================
   End  article polish
   ============================================================ */



/* ── Gap 6. Rooted stat chips — 2×2 grid at all breakpoints (Figma: two rows of two).
   WP columns default to nowrap flex; override to wrap so all 4 chips form a 2-col grid.
   50% minus half the column gap produces two equal-width chips per row.
   On mobile (< 480px) chips go single-column. */
.reforma-rooted-stats.wp-block-columns {
	flex-wrap: wrap !important;
}
.reforma-rooted-stats .reforma-rooted-stat-chip.wp-block-column {
	flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
	min-width: calc(50% - var(--wp--preset--spacing--30)) !important;
}
@media (max-width: 480px) {
	.reforma-rooted-stats .reforma-rooted-stat-chip.wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}
}

/* ── Gap 10. Premium products — equal-height card columns (CTA anchors to bottom). */
.reforma-premium-products .wp-block-columns.are-vertically-aligned-top {
	align-items: stretch;
}
.reforma-premium-products .reforma-product-card.wp-block-column {
	display: flex;
	flex-direction: column;
}
.reforma-premium-products .reforma-product-card > .wp-block-group:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ── Gap 11. Visionary Leadership — 3:4 portrait crop, top-aligned.
   Figma: portrait photos cropped consistently, face centred top. */
.reforma-leadership-portrait img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	display: block;
	border-radius: var(--wp--preset--radius--medium);
}

/* ── Gap 12. Logo wall — top hairline separator. */
.reforma-logo-wall {
	border-top: 1px solid oklch(88% 0.008 242);
}

/* ── News cards — aspect-ratio override for consistent image height.
   Previous rule fixed height in px; aspect-ratio is more fluid. */
.reforma-news-card-image img {
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ── Pillar icons — Figma measures 48px; block attr says 56px. Lock to 48px. */
.reforma-pillar-icon img {
	width: 48px !important;
	height: 48px !important;
	object-fit: contain;
}

/* ============================================================
   End  home gap fixes
   ============================================================ */

/* ============================================================
   Footer pixel polish
   Gaps closed vs Figma v1.6 reference:
   1. Logo: stacked variant (200px), not horizontal 140px.
   2. Top row: logo+tagline LEFT / schedule-btn RIGHT as flex
      space-between — schedule btn no longer buried in brand col.
   3. Column headings: fontSize:md + fontWeight:450 (not sm+700+uppercase).
   4. Link font-size: base (1rem) inherited from list, not sm.
   5. Pages overflow col: top-padding aligns links to row 1 of
      adjacent Pages heading (Figma: heading height + gap offset).
   6. Contact col: phone/email wrapped in tel:/mailto: anchors.
   7. Bottom row: copyright invisible (opacity:0), Terms + Privacy
      as separate paragraphs with gap:spacing|60, flex-end aligned.
   8. Schedule-btn: top-level flex child, not inside column.
   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* Footer link list: base font-size (1rem) per Figma — overrides the
   inherited sm size from earlier global .reforma-site-footer a rule. */
.reforma-site-footer .reforma-footer-links a,
.reforma-site-footer .reforma-footer-links li {
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	line-height: 1.8;
}

/* Footer logo: stacked variant — 200px wide. */
.reforma-footer-logo img {
	width: 200px;
	height: auto;
	display: block;
}
/* Header logo desktop width (mobile width is set in the responsive block below). */
.reforma-site-header .reforma-site-logo img {
	width: 152px;
	height: auto;
	display: block;
}
.reforma-footer-logo a {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 1 !important;
}

/* Pages overflow column: top-padding aligns the first link to the same
   row as the first link in the adjacent Pages column (Figma: no heading
   in overflow col, so it starts at same Y as col-1 first link).
   Heading height ≈ md font-size * 1.6 line-height + spacing|30 margin
   = ~1rem * 1.6 + 12px ≈ 38px. Nearest 4pt grid value = 40px (spacing|40).
   Combined with margin-top on the list: spacing|30 (12px) = 50px offset.
   Using calc to hit the visual rhythm without an off-grid value. */
.reforma-footer-pages-overflow {
	padding-top: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}

/* Column headings: match v1.6 — larger, weight 450 (not bold uppercase label). */
.reforma-site-footer .wp-block-heading.has-md-font-size {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 450;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--page) !important; /*  column titles white (was inheriting dark global heading color) */
}

/* Bottom-row copyright: invisible per Figma (color opacity 0 used as spacer
   to keep the flex space-between layout balanced). */
.reforma-footer-bottom-copyright {
	color: oklch(100% 0 0 / 0) !important;
	pointer-events: none;
	user-select: none;
}

/* Bottom-row Terms/Privacy group: gap spacing|60 (32px) between items. */
.reforma-site-footer .wp-block-group > .wp-block-group[style*="justify-content:flex-end"] {
	gap: var(--wp--preset--spacing--60);
}

/* Schedule-appointment button: flex-shrink:0 so it doesn't compress
   against the tagline on mid-width viewports. */
.reforma-footer-schedule-btn {
	flex-shrink: 0;
}

/* Mobile: collapse top flex row to vertical stack, center schedule btn. */
@media (max-width: 768px) {
	.reforma-site-footer .alignwide:first-of-type {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Reduced motion: no footer-specific transitions (all transitions already
   handled by global .reforma-site-footer a transition rule). */
@media (prefers-reduced-motion: reduce) {
	.reforma-site-footer a {
		transition: none;
	}
}

/* ============================================================
   End  footer polish
   ============================================================ */

/* ============================================================
   Shop page gap-list fixes
   Source: reports/wave-23/composites/shop-side-by-side.png
   Figma ref: figma-cache/2026-05-19-w19/products-w19.png (1920x2776)
   Colors: OKLCH only. Spacing slugs: {10,20,30,40,50,60,70,80,90}.

   Gaps fixed (10 total):
   1.  Hero min-height 440px too short vs Figma ~520px — PHP markup updated.
   2.  Hero gradient too flat/blue (248-169 deg); Figma band is teal-dominant
       — override to 120deg teal-blue(218) to deep-teal(185).
   3.  Hero description margin before stat chips — PHP markup tightened
       (spacing|60 to spacing|50).
   4.  Hero stat chip padding too generous — PHP markup tightened
       (spacing|40/spacing|30 to spacing|30/spacing|20).
   5.  Hero top/bottom padding — PHP markup reduced (spacing|80 to spacing|70).
   6.  Filter bar vertical padding halved — PHP markup (spacing|40 to spacing|30).
   7.  Filter bar sort label unstyled plain text; Figma shows bordered
       dropdown-pill — fixed via CSS border+border-radius.
   8.  CTA Contact button corners full pill (999px) inconsistent with site
       asymmetric CTA pattern — override to 0 20px 0 0.
   9.  CTA band vertical padding overshoot — PHP markup + CSS safety override
       (spacing|80 to spacing|70).
  10.  Product grid card-body justify-content safety guard for WP < 6.9.
   ============================================================ */

/* Gap 2: Hero gradient — shift start hue 248 (flat brand-gold) to 218
   (teal-blue) and end hue 169 (yellow-green) to 185 (deeper teal).
   Direction 120deg sweeps top-left teal-blue to bottom-right deep-teal,
   matching the Figma hero band depth cue.
   !important beats the  min-height rule on the same selector. */
.reforma-products-hero.wp-block-cover {
	min-height: 430px !important;
	/* Figma hero band: brand-gold (left) → accent-purple (right). */
	background: linear-gradient(
		101deg,
		var(--wp--preset--color--brand-gold) 0%,
		var(--wp--preset--color--accent-purple) 100%
	) !important;
}

/* Gap 7: Sort dropdown pill — the plain-text paragraph gets a visible
   border so it reads as an interactive control, matching Figma's
   bordered dropdown appearance.
   CSS-only: no block-attr changes (avoids save() class-drift trap). */
.reforma-product-filter-bar .reforma-sort-label {
	border: 1px solid oklch(80% 0.02 240 / 0.6);
	border-radius: 999px;
	display: inline-block;
	cursor: default;
	background: transparent;
	white-space: nowrap;
}

/* Gap 8: CTA Contact button asymmetric corners — 0 20px 0 0 is the
   site-wide CTA corner convention (about-who-cta, booking-submit,
   home-rooted-cta). Overrides block-attr inline border-radius:999px. */
.reforma-cta-contact-btn > .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Gap 9: CTA band padding safety override — enforces spacing|70 (48px)
   top/bottom even in block-editor preview where the inline style may
   not cascade correctly after the PHP attr change. */
.reforma-products-cta.wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* Gap 10: Card body space-between safety guard.
   justify-content already set in  rule at line 2846; this
   guard ensures specificity on any WP version that wraps the group
   in an extra wp-container class that resets justify-content. */
.reforma-product-grid .wp-block-column.reforma-product-card .reforma-product-card-body {
	justify-content: space-between;
}

/* Mobile —  shop. */
@media (max-width: 768px) {
	.reforma-products-hero.wp-block-cover {
		min-height: 360px !important;
	}
}

/* ============================================================
   End  shop gap fixes
   ============================================================ */

/* ============================================================
   Contact + Booking gap-list fixes
   Methodology: pixel-sampled Figma composites
     contact-side-by-side.png / booking-side-by-side.png.
   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   No block-attr classes created. No border-left stripes.
   ============================================================ */

/* ── CONTACT — Begin Skincare CTA button ──
   Replaces 999px pill with Reforma asymmetric 0 20px 0 0 corner.
   className="reforma-skincare-cta-btn" added to block in 
   (begin-skincare-cta.php); style.border.radius removed from JSON
   to avoid has-custom-border byte-mismatch (see gotcha:
   wp-block-validator-strips-fontSize-attr-from-buttons).
   Consistent corner language with: reforma-cta-btn,
   reforma-submit-btn, reforma-about-who-cta, Rooted CTA. */
.reforma-skincare-cta-btn > .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding: 12px 32px;
	min-height: 48px;
	min-width: 44px;
	transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1),
	            color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reforma-skincare-cta-btn > .wp-block-button__link:hover {
	background-color: oklch(97% 0 90 / 0.9) !important;
}
.reforma-skincare-cta-btn > .wp-block-button__link:focus-visible {
	outline: 3px solid oklch(100% 0 0 / 0.7);
	outline-offset: 3px;
}

/* ── CONTACT — FAQ section heading bottom margin ──
   spacing|70 (48px) -> spacing|60 (32px): Figma shows less gap
   between the H2 and first FAQ item. */
.reforma-faq .wp-block-heading.has-text-align-center {
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── CONTACT — FAQ items: tighter row spacing ──
   spacing|60 (32px) padding-top -> spacing|50 (24px): Figma FAQ
   rows are more compact (consistent with  contact sizing). */
.reforma-faq-item {
	padding-top: var(--wp--preset--spacing--50);
}
.reforma-faq .reforma-faq-item:first-child {
	padding-top: 0;
}

/* ── CONTACT — Begin Skincare band vertical padding ──
   spacing|70 (48px) -> spacing|60 (32px): Figma shows the green
   mid-band as a compact accent strip consistent with stats-bar
   and footer proportions at 1920px width. */
.reforma-begin-skincare.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}
@media (max-width: 768px) {
	/* Restore generous padding on narrow viewports. */
	.reforma-begin-skincare.wp-block-group {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
}

/* ── BOOKING — Order Summary header: left-align ──
   Figma 42:337 shows "Order Summary" left-aligned in the green band.
    rule applied text-align:center (incorrect). */
.reforma-order-summary-card__header {
	text-align: left;
}

/* ── BOOKING — "Which frequency" hint: tighter margin ──
   Figma shows ~8px below the hint before the plan-row.
   spacing|40 (16px) was too generous; spacing|20 (8px) matches. */
.reforma-order-summary-card__body > .wp-block-paragraph.has-ink-soft-color {
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

/* ── BOOKING — Layout columns gap ──
   blockGap spacing|60 (32px) -> spacing|50 (24px): Figma shows a
   tighter gap between the form and sidebar columns. Override avoids
   re-seeding page-booking.html template. */
.reforma-booking-layout .wp-block-columns {
	column-gap: var(--wp--preset--spacing--50) !important;
}

/* ── BOOKING — License footer column row bottom margin ──
   spacing|60 (32px) -> spacing|50 (24px): Figma shows ~24px between
   the 3-column license row and the separator. */
.reforma-license-footer .wp-block-columns {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── BOOKING — Trust card: sharper dark navy ──
   Figma 42:337 trust card pixel samples to ~oklch(18% 0.03 240),
   noticeably darker than 's oklch(22% 0.04 240).
   Deeper shade strengthens contrast with white/green text. */
.reforma-trust-card {
	background: oklch(18% 0.03 240);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-skincare-cta-btn > .wp-block-button__link { transition: none; }
}

/* ============================================================
   End  contact + booking gap fixes
   ============================================================ */

/* ============================================================
   Article + News Listing gap-list fixes
   Source: reports/wave-23/composites/news-article-side-by-side.png
   Colors: OKLCH only. Spacing slugs: {10,20,30,40,50,60,70,80,90}.

   Gaps closed (11 total):
    1. Article hero min-height 538px -> 580px (Figma frame height).
    2. Post title in hero: display font-family (Playfair Display).
    3. Hero gradient: wider coverage 60%->70%, opacity 0.88->0.92.
    4. Body column width 68%->72% (single.html markup edited).
    5. Back-to-news CTA button: asymmetric corner 0 20px 0 0.
    6. Newsletter CTA button: asymmetric corner 0 20px 0 0.
    7. Sidebar Article Details card: accent-purple 3px top accent bar.
    8. News listing hero: brand-gold bg added to markup + 500px height.
    9. News card excerpt: 3-line clamp, ink-soft color.
   10. News listing card title: font-weight 600 per Figma.
   11. First card: media wrapper overflow + border-radius for image clip.
   ============================================================ */

/* 1. Article hero: raise min-height to 580px.
   CSS override beats the inline style from cover block minHeight:538 attr
   without a markup re-seed (no content lock breakage risk). */
.reforma-article-hero.wp-block-cover {
	min-height: 580px !important;
}

/* 2. Post title in hero: apply display font-family (Playfair Display).
   wp:post-title inside single.html cannot receive fontFamily without
   re-seeding post_content. CSS is the surgical lever here.
   line-height tightened to 1.2 for display-size text. */
.reforma-article-hero .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display) !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--white);
}

/* 3. Hero gradient: extend opaque zone from 60% to 70%, raise opacity.
   Overrides the  rule on same selector with stronger values
   so the title row sits on a fully legible dark field. */
.reforma-article-hero .wp-block-cover__inner-container > .wp-block-group {
	background-image: linear-gradient(
		to right,
		oklch(56.4% 0.131 248 / 0.92) 0%,
		oklch(56.4% 0.131 248 / 0%) 70%
	) !important;
}

/* 5. Back-to-news CTA button: asymmetric corner 0 20px 0 0.
   Matches the Figma primary CTA signature (booking, rooted, about).
   Overrides block-attr radius:small which produces a symmetric corner. */
.reforma-btn-back-news > .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* 6. Newsletter CTA subscribe button: asymmetric corner 0 20px 0 0.
   Markup has border-radius:999px (pill). Figma primary CTAs use the
   asymmetric shape. Scoped to the newsletter-cta pattern only. */
.reforma-article-newsletter-cta .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* 7. Sidebar Article Details card: accent-purple 3px top accent bar.
   Figma dark-ink card has a accent-purple top rule as a category signal.
   border-top on the card class (not block attr) avoids the
   style.border.color has-border-color save() injection trap. */
.reforma-sidebar-card--details {
	border-top: 3px solid var(--wp--preset--color--accent-purple) !important;
	overflow: hidden;
}

/* 8. News listing hero: gradient + height override.
   Markup now has has-brand-gold-background-color (pattern edited).
   CSS gradient adds directional depth over the flat token color.
   min-height 500px matches Figma listing band at 1920px. */
.reforma-news-listing-hero {
	background: linear-gradient(
		160deg,
		var(--wp--preset--color--brand-gold) 0%,
		oklch(44% 0.093 78) 100%
	) !important;
	min-height: 500px !important;
}

/* 9. News card excerpt: 3-line clamp + ink-soft color.
   Figma cards cap excerpts at 3 lines so READ MORE aligns uniformly.
   home.html excerpt block class updated to reforma-news-card-excerpt.
   -webkit-line-clamp supported in all 2026 target browsers. */
.reforma-news-card-excerpt p,
.reforma-news-listing-section .wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--ink-soft);
}

/* 10. News listing card title: font-weight 600.
   Figma composite shows card titles at semi-bold (600).
   Block attr is 500. Scoped to listing section only. */
.reforma-news-listing-section .wp-block-post-title a,
.reforma-news-listing-section .wp-block-post-title {
	font-weight: 600 !important;
}

/* 11. First card: media wrapper overflow + radius for image clipping.
   Without overflow:hidden on .reforma-news-card-media, the 100px
   border-radius on the card does not clip the featured image. */
.wp-block-post-template li:first-child .reforma-news-card-media {
	overflow: hidden;
	border-top-left-radius: 100px;
}

/* Mobile adaptations. */
@media (max-width: 768px) {
	.reforma-article-hero.wp-block-cover {
		min-height: 380px !important;
	}
	.reforma-news-listing-hero {
		min-height: 300px !important;
	}
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.reforma-btn-back-news > .wp-block-button__link,
	.reforma-article-newsletter-cta .wp-block-button__link {
		transition: none;
	}
}

/* ============================================================
   End  article + news-listing gap fixes
   ============================================================ */

/* ============================================================
   About page gap-list fixes (2026-05-19)
   Targets: about-hero, about-who-we-are, about-our-company,
            about-brands, about-values, about-cta.
   All color tokens in OKLCH. Spacing via preset slugs only.
   No border.radius on core/image block attrs (see gotcha:
   wp-block-validator-strips-fontSize-attr-from-buttons).
   ============================================================ */

/* ── About Hero: decorative leaf top-right of image column ──
   .reforma-about-hero-image-col already has position:relative +
   overflow:hidden . The empty aria-hidden group carries
   the leaf via background-image. Uses leaf-cluster-leadership.svg.
   z-index 2 floats above the photo. pointer-events:none = inert. */
.reforma-about-hero-decoration {
	position: absolute !important;
	top: 0;
	right: 0;
	width: clamp(120px, 16vw, 280px) !important;
	height: clamp(200px, 40vw, 600px) !important;
	pointer-events: none;
	z-index: 2;
	background-image: none;
	background-size: contain;
	background-position: top right;
	background-repeat: no-repeat;
	opacity: 0.35;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.reforma-about-hero-decoration { display: none; }
}

/* ── About Who We Are: rooted-stat-chip sizing override ──
   Chips appear inside the 55% right column of a 2-col layout.
   Tighten from spacing|50 (24px) to spacing|40 (16px) so chips
   don't crowd out the body text and CTA button below them. */
.reforma-about-who-we-are .reforma-rooted-stat-chip {
	padding: var(--wp--preset--spacing--40) !important;
}

/* ── About Our Company: section stacking context + decorative leaf ──
   Leaf bottom-right at opacity 0.28 — subtle on page bg. */
.reforma-about-our-company {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.reforma-about-our-company > * {
	position: relative;
	z-index: 1;
}

.reforma-about-our-company::after {
	content: '';
	position: absolute;
	bottom: -24px;
	right: -64px;
	width: clamp(100px, 14vw, 220px);
	height: clamp(130px, 18vw, 280px);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
	pointer-events: none;
	opacity: 0.28;
	z-index: 0;
}

@media (max-width: 640px) {
	.reforma-about-our-company::after { display: none; }
}

/* Stat cards in our-company now carry both .reforma-stat-card AND
   .reforma-rooted-stat-chip. Ensure the blue-tint chip bg wins over
   the  white-override for this section. */
.reforma-about-our-company .reforma-stat-card.reforma-rooted-stat-chip {
	background: oklch(97.5% 0.012 240) !important;
}

/* ── About Values: icon wrap chip ──
   .reforma-value-icon-wrap is a core/group wrapping the icon figure.
   Renders as a 64x64 chip with brand blue-tint bg and Reforma
   0 20px 0 0 asymmetric corner. overflow:hidden clips the SVG.
   display:inline-flex centers the icon within the chip boundary. */
.reforma-value-icon-wrap {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 64px !important;
	height: 64px !important;
	background: oklch(97.5% 0.012 240);
	border: 1px solid oklch(88% 0.02 240);
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	overflow: hidden;
	flex-shrink: 0;
	padding: 0 !important;
}

/* Icon image inside wrap: 36px for balanced proportion in 64px chip. */
.reforma-value-icon-wrap .reforma-value-icon img {
	width: 36px !important;
	height: 36px !important;
	object-fit: contain;
	display: block;
	margin: 0 !important;
}

/* ── About CTA: brand-gold section stacking context + flora decor ──
   Section now has brand-gold bg (changed from surface in markup).
   Dual flora: bottom-right at 0.12 opacity, top-left at 0.09 opacity. */
.reforma-about-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Override the non-home 0.9 zoom  so the navy band is true full-width like the products CTA */
	zoom: 1 !important;
	/* Full-bleed band (section is default layout; inner row is constrained). body has overflow-x:clip so 100vw is safe */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.reforma-about-cta > * {
	position: relative;
	z-index: 1;
}


/* ── About CTA button: white-outline asymmetric on brand-gold bg ──
   Overrides the generic .reforma-cta-btn rule (filled brand-gold).
   Specificity: div.reforma-about-cta-btn + a.wp-block-button__link. */
.reforma-about-cta-btn.wp-block-button .wp-block-button__link {
	background: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	border: none !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 32px;
	padding-right: 32px;
	min-height: 48px;
	min-width: 44px;
	font-weight: 700;
	transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reforma-about-cta-btn.wp-block-button .wp-block-button__link:hover {
	background: oklch(50% 0.131 248) !important;
}

.reforma-about-cta-btn.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid oklch(100% 0 0 / 0.7);
	outline-offset: 3px;
}

/* CTA band: horizontal text-left / button-right, stacks on mobile */
.reforma-about-cta-row { gap: var(--wp--preset--spacing--50); max-width: 1280px; margin-left: auto; margin-right: auto; }
.reforma-about-cta-text { flex: 1 1 460px; }
@media (max-width: 640px) {
	.reforma-about-cta-text { flex-basis: 100%; }
}

/* ── About CTA: eyebrow color on dark bg ──
   Brightened accent-purple: oklch(72% 0.12 165) passes 4.5:1 AA
   contrast against brand-gold oklch(56.4% 0.131 248) background. */
.reforma-about-cta .reforma-eyebrow {
	color: oklch(72% 0.12 165) !important;
}

/* ── About Brands: top hairline ──
   Separates surface brands section from accent-purple mission above it. */
.reforma-about-brands {
	border-top: 1px solid oklch(88% 0.008 240 / 0.4);
}

/* ── Reduced motion — about page ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-about-cta::after,
	.reforma-about-cta::before,
	.reforma-about-our-company::after {
		opacity: 0;
	}
	.reforma-about-cta-btn.wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* ============================================================
   End  about gap fixes
   ============================================================ */

/* ============================================================
   Research meets purity: pillar grid + eyebrow fix
   2026-05-20
   ============================================================ */

/*
 * Outer section: ensure the right column's nested wp:columns
 * renders as a true 2×2 grid at desktop widths.
 * The inner columns blocks stack at ≤768px (isStackedOnMobile:true).
 */
.reforma-research-purity .wp-block-column:last-child > .wp-block-columns {
	margin-top: 0;
}

/*
 * Vertical gap between the two inner rows of pillars.
 * blockGap on the nested columns emits a wp-container class rule;
 * this backs it up at the section scope for specificity safety.
 */
.reforma-research-purity .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/*
 * Pillar card: equal height within each row so icon tops align.
 * white bg + border-radius already set via block attrs.
 * Subtle shadow to lift card off page-tint bg without a second card layer.
 */
.reforma-research-purity .reforma-pillar-card {
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.07), 0 4px 12px oklch(0% 0 0 / 0.04);
}

/* Pillar icon: contain without stretching */
.reforma-research-purity .reforma-pillar-icon {
	flex-shrink: 0;
}

/* Pillar body copy: flex-grow so card heights stay equal in a row */
.reforma-research-purity .reforma-pillar-card > .wp-block-paragraph {
	flex: 1;
}

/*
 * Mobile (≤768px): single-column stack is already handled by
 * isStackedOnMobile:true on both inner wp:columns.
 * Remove the flex-column override on the right column so the
 * two inner column groups stack naturally via block gap.
 */
@media (max-width: 768px) {
	.reforma-research-purity .wp-block-column:last-child {
		display: block;
		gap: 0;
	}

	.reforma-research-purity .wp-block-column:last-child > .wp-block-columns + .wp-block-columns {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* Reduced motion — research section */
@media (prefers-reduced-motion: reduce) {
	.reforma-research-purity .reforma-pillar-card {
		transition: none;
	}
}

/* ============================================================
   End  research meets purity
   ============================================================ */




.reforma-booking-layout {
	max-width: 1400px;
	margin-inline: auto;
}

.reforma-form-card {
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--hairline, oklch(85% 0.005 240));
	border-radius: var(--wp--preset--radius--large, 20px);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	overflow: hidden;
}

.reforma-card-header {
	background: var(--wp--preset--color--accent-purple);
	color: var(--wp--preset--color--page);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

.reforma-card-legend {
	color: var(--wp--preset--color--page);
	font-size: var(--wp--preset--font-size--md, 1rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0;
	margin: 0;
	float: none;
}

.reforma-card-body {
	padding: var(--wp--preset--spacing--60);
}

.reforma-field-grid-1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.reforma-field-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 640px) {
	.reforma-field-grid-2 { grid-template-columns: 1fr; }
}

.reforma-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.reforma-label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.reforma-required {
	color: var(--wp--preset--color--brand-gold);
	margin-left: 2px;
}

.reforma-input {
	width: 100%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--hairline, oklch(85% 0.005 240));
	border-radius: var(--wp--preset--radius--medium, 12px);
	padding: 14px 16px;
	font-size: var(--wp--preset--font-size--md, 1rem);
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms;
}

.reforma-input::placeholder {
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.6;
}

.reforma-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-gold);
	background: var(--wp--preset--color--page);
	box-shadow: 0 0 0 3px oklch(56.4% 0.131 248 / 0.15);
}

/* ============================================================
   Contact form band polish
   2026-05-20

   Issues fixed:
   A) leaf-cluster-footer.svg ::after was bleeding into the
      contact band section. Figma shows a clean green card
      layout with NO leaf SVG decoration in this section.
      The footer-related SVG was introduced in  as a
      guess — removed here by nullifying the ::after rule.
      overflow:hidden on .reforma-contact-band is also
      removed so the card border-radius renders cleanly.

   B)  accidentally overrode the contact booking card
      inputs/labels to white-ink (for a white card that was
      later reverted). The green card uses the base
      .reforma-booking-form__* rules from -A
      (translucent-white inputs on green). Those overrides
      have been corrected in the  block above.
   ============================================================ */

/* A. Kill the leaf-cluster-footer.svg on the contact band.
   The ::after pseudo is suppressed; content-stacking z-index
   rule (contact-band > *) and position:relative are kept
   because other child positioning may rely on them. */
.reforma-contact-band::after {
	display: none !important;
}

/* A2. Remove overflow:hidden from the contact-band section —
   it was only needed to clip the now-suppressed ::after leaf.
   Removing it lets the green card's border-radius corners
   render correctly without clipping artefacts. */
.reforma-contact-band {
	overflow: visible;
}

/* B. Form inputs on green card — reinforce base translucent-white rules
   so no  specificity leak can override them. */
.reforma-contact-band .reforma-booking-form__input {
	background: oklch(100% 0 0 / 0.12);
	border: 1px solid oklch(100% 0 0 / 0.25);
	color: var(--wp--preset--color--page);
}
.reforma-contact-band .reforma-booking-form__input::placeholder {
	color: oklch(100% 0 0 / 0.45);
}
.reforma-contact-band .reforma-booking-form__input:focus {
	outline: none;
	border-color: oklch(100% 0 0 / 0.7);
	background: oklch(100% 0 0 / 0.18);
	box-shadow: none;
}
.reforma-contact-band .reforma-booking-form__label {
	color: oklch(100% 0 0 / 0.75);
}

/* C. Submit button — page-bg fill, accent-purple text, 0 20px 0 0 corner.
   Already set in block attrs; reinforce via class for specificity safety. */
.reforma-contact-submit-btn .wp-block-button__link {
	background-color: var(--wp--preset--color--page) !important;
	color: var(--wp--preset--color--accent-purple) !important;
	border-radius: 0 20px 0 0 !important;
	font-weight: 700;
}

/* D. Left-column image: maintain 0 0 100px 0 curve + fill height
   already set in reinforce with align-self on the column. */
.reforma-contact-band-left {
	align-self: stretch;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.reforma-contact-band .reforma-booking-form__input {
		transition: none;
	}
}

/* ============================================================
   End  contact-band polish
   ============================================================ */

.reforma-input--error {
	border-color: oklch(60% 0.18 25);
	background: oklch(98% 0.02 25);
}

.reforma-input--error:focus {
	box-shadow: 0 0 0 3px oklch(60% 0.18 25 / 0.15);
}

.reforma-input[type="date"],
.reforma-input[type="datetime-local"] {
	color-scheme: light;
	min-height: 50px;
}

.reforma-textarea {
	resize: vertical;
	min-height: 108px;
	font-family: inherit;
}

.reforma-select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%233e273b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.reforma-field-error {
	color: oklch(45% 0.18 25);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.4;
}

.reforma-consent-row {
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--preset--radius--medium, 12px);
	border: 1px solid var(--wp--preset--color--hairline, oklch(85% 0.005 240));
}

.reforma-consent-label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	cursor: pointer;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.6;
}

.reforma-consent-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--wp--preset--color--brand-gold);
	cursor: pointer;
}

.reforma-consent-text {
	flex: 1 1 auto;
}

.reforma-submit-btn {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--page);
	border: 0;
	border-radius: 999px;
	padding: 18px 32px;
	font-size: var(--wp--preset--font-size--md, 1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: filter 150ms, transform 150ms;
	font-family: inherit;
}

.reforma-submit-btn:hover {
	filter: brightness(1.08);
}

.reforma-submit-btn:active {
	transform: translateY(1px);
}

.reforma-submit-btn:focus-visible {
	outline: 3px solid oklch(56.4% 0.131 248 / 0.4);
	outline-offset: 3px;
}

.reforma-turnstile-wrap {
	display: flex;
	justify-content: center;
	margin: var(--wp--preset--spacing--40) 0;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-input,
	.reforma-submit-btn {
		transition: none;
	}
}

/* ============================================================
   End  form refresh
   ============================================================ */

/* ============================================================
   Visionary Leadership portrait placement fix
   User feedback: "photos not placed correct as Figma UI"
   Root cause: Two layered bugs:
     1.  Gap 11 added border-radius on the <img> element,
        fighting the container-clip approach . The img
        radius applies uniform corners and ignores the per-portrait
        asymmetric radii on .reforma-leadership-portrait--1/2/3
        containers (which use overflow:hidden to clip).
     2. max-width:220px on the container left portraits occupying
        only ~60% of each column (~360px at 1200px layout), with
        large whitespace flanks — mismatched vs Figma where portraits
        fill the full column width.
   Fix: remove the border-radius from <img>, let the container
        overflow:hidden + per-portrait asymmetric radii do the
        clipping ( original intent). Expand portrait
        container to full column width.
   Colors: OKLCH only. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* Portrait container: fill full column width.
   The 220px cap was too narrow — Figma shows portraits spanning
   the full card column. margin-bottom spacing|40 (16px) preserved
   for gap between image and name heading. */
.reforma-leadership-portrait {
	max-width: 100%;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--40);
	overflow: hidden;
}

/* Portrait image: cover-fill with top-aligned crop.
   Nullify the  Gap 11 border-radius on <img> — the radius
   must ONLY live on the container (.reforma-leadership-portrait--N)
   so overflow:hidden clips the image to the asymmetric shape.
   border-radius on the img itself causes all 4 corners to round
   uniformly, defeating the per-portrait corner DNA. */
.reforma-leadership-portrait img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	display: block;
	border-radius: 0;
}

/* Mobile: constrain portrait height on small screens so the image
   doesn't overwhelm the viewport in stacked layout. */
@media (max-width: 768px) {
	.reforma-leadership-portrait img {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   End  Visionary Leadership portrait placement fix
   ============================================================ */

/* ============================================================
   Contact + Booking micro-detail polish
   Methodology: pixel-sampled side-by-side composites
     reports/wave-27/contact-side.png / contact-live.png
     reports/wave-27/booking-side.png  / booking-live.png
   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   No block-attr classes created. No border-left stripes.
   No gradient text. No card-on-card.
   ============================================================ */

/* ── CONTACT HERO — form card internal padding tighten ──
    set spacing|60 (32px) on all sides of the form card.
   Figma shows ~24px top/bottom and 32px left/right — closer to
   a spacing|50/spacing|60 split. Reduce top+bottom by 8px. */
.reforma-contact-form-card.wp-block-group {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── CONTACT HERO — submit button margin-top tighten ──
    set margin-top spacing|30 (12px) on .reforma-contact-hero-form__submit-wrap.
   Figma shows ~8px gap between the grid and submit. Use spacing|20 (8px). */
.reforma-contact-hero-form__submit-wrap {
	margin-top: var(--wp--preset--spacing--20);
}

/* ── CONTACT HERO — social icons bottom margin tighten ──
   spacing|60 (32px) is the block-attr value before the form card.
   Figma shows ~24px (spacing|50). Override via CSS-only scoped to
   the contact hero social block to avoid touching other social blocks. */
.reforma-contact-hero .reforma-contact-hero-social.wp-block-social-links {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── CONTACT HERO — right column eyebrow → h1 rhythm ──
   Eyebrow margin-bottom spacing|30 (12px) is correct.
   H1 margin-bottom spacing|40 (16px) is correct.
   Subtitle (first paragraph) margin-bottom spacing|30 (12px) fine.
   Detail line (second paragraph) margin-bottom spacing|40 (16px) fine.
   No changes needed here — rhythm is already faithful to Figma. */

/* ── CONTACT HERO — photo column top offset ──
   In the 2-col layout the photo has aspect-ratio 1/1.3 via CSS.
   On desktop the right column is taller (has form card). 
   set align-self:stretch on the left col — the photo stretches to
   fill it. The bottom-right 100px radius is clipped by the figure.
   Small refinement: add a min-height floor so the photo doesn't
   look squashed on mid-width viewports where the form card shrinks. */
.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
.reforma-contact-hero-photo img {
	min-height: 480px;
}

/* ── BEGIN SKINCARE — face SVG ::after opacity nudge ──
    set opacity:0.18. Live screenshot shows it slightly
   too visible on the solid green band. Reduce to 0.14. */
.reforma-begin-skincare::after {
	opacity: 0.14;
}

/* ── FAQ — item padding-top tighten ──
    set padding-top spacing|50 (24px). Figma shows ~16px
   between the divider hairline and the question heading. Use spacing|40. */
.reforma-faq-item {
	padding-top: var(--wp--preset--spacing--40);
}

/* ── FAQ — question → answer gap tighten ──
   H3 margin-bottom is spacing|30 (12px) in block markup. Live looks
   correct; no change needed. Answer paragraph has line-height:1.7
   which is also correct. No gap change needed here. */

/* ── FAQ — last item: ensure no bottom border leaks ──
   The last .reforma-faq-item in the section has no margin-bottom in
   the markup (item 4). Defensive rule: zero any browser-default bottom
   margin so the section padding is the only spacing after the last answer. */
.reforma-faq .reforma-faq-item:last-child {
	margin-bottom: 0 !important;
}

/* ── FAQ — section top padding: keep spacing|80 (64px) ──
   Figma shows a generous section top — spacing|80 is correct. No change. */

/* ── BOOKING HERO — H1 bottom margin ──
   spacing|20 (8px) in block markup. Figma shows subtitle sitting very
   close to H1 — 8px is correct, no change needed. Already tight. */

/* ── BOOKING FORM — field gap restore to spacing|30 ──
    tightened from spacing|30 (12px) to spacing|20 (8px).
   Live screenshot shows fields slightly compressed vs Figma.
   The Figma form shows ~12px between fields which is spacing|30. */
.reforma-field-grid-2,
.reforma-field-grid-1 {
	gap: var(--wp--preset--spacing--30);
}

/* ── BOOKING FORM — card margin-bottom restore to spacing|30 ──
    reduced to spacing|20 (8px); that makes cards feel
   stacked. Figma shows ~12px between cards — use spacing|30. */
.reforma-form-card {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ── BOOKING FORM — submit button margin-top ──
   Consent row margin-bottom spacing|40 (16px) gives breathing room
   before the button. Add an explicit margin-top on the button too so
   even without the consent row (future state) the spacing is reliable. */
.reforma-submit-btn {
	margin-top: var(--wp--preset--spacing--20);
}

/* ── BOOKING SIDEBAR — benefits list gap restore to spacing|30 ──
    tightened to spacing|20 (8px). Figma shows benefit rows
   with ~12px vertical gap (spacing|30). Restoring readability. */
.reforma-benefits-list {
	gap: var(--wp--preset--spacing--30);
}

/* ── BOOKING SIDEBAR — plan row image + text gap tighten ──
    set gap spacing|40 (16px) on .reforma-plan-row. Figma
   shows ~12px gap between the 64px avatar and the plan name column.
   Override to spacing|30 (12px). */
.reforma-plan-row {
	gap: var(--wp--preset--spacing--30);
}

/* ── BOOKING SIDEBAR — Order Summary card body padding ──
    set spacing|40 (16px). Figma sidebar card shows ~20px
   padding — spacing|50 (24px) is closer. Restore slightly. */
.reforma-order-summary-card__body {
	padding: var(--wp--preset--spacing--50);
}

/* ── BOOKING LAYOUT — wrapper top padding ──
   page-booking.html has padding-top spacing|30 (12px). Figma shows
   the form beginning immediately below the hero with ~8px gap.
   Override to spacing|20 (8px). */
.reforma-booking-layout.wp-block-group {
	padding-top: var(--wp--preset--spacing--20) !important;
}

/* ── LICENSE FOOTER — 3-col rhythm: hairline sits flush ──
   The separator margin-bottom spacing|50 (24px) before the disclaimer
   is correct. Column row margin-bottom set to spacing|50 in 
   License label letter-spacing is already 0.1em. No changes needed. */

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-contact-hero-form__submit,
	.reforma-submit-btn {
		transition: none;
	}
}

/* Mobile adjustments —  */
@media (max-width: 768px) {
	.reforma-contact-form-card.wp-block-group {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}
	.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
	.reforma-contact-hero-photo img {
		min-height: 280px;
	}
	.reforma-faq-item {
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ============================================================
   End  contact + booking micro-detail polish
   ============================================================ */

/* ============================================================
   Premium Products section pixel polish
   Gaps closed vs Figma home-04-premium reference:
   1. Tab count badge — small inline counter beside tab label
      (Cosmetics 1 / Pharmaceuticals 8).
   2. Tab font-size: md → sm to match Figma tighter tab rail.
   3. Card box-shadow: single-layer lift on white card / page-tint bg.
   4. Description line-height: 1.27 → 1.6 (Figma body text rhythm).
   5. BESTSELLER badge shape: pill (999px) → tag (4px radius).
   6. Real Figma product images set as fallbacks (4 cards).
   7. VIEW DETAILS arrow: HTML entity &#8594; in all 4 cards.
   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* Tab count badge — inline count number after tab label.
   Small rounded lozenge. Matches Figma tab annotation style. */
.reforma-product-tabs .reforma-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 6px;
	border-radius: 999px;
	background: oklch(92% 0.008 242);
	color: oklch(45% 0.02 242);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	letter-spacing: 0;
}

/* Active tab count badge — tinted green to match active underline. */
.reforma-product-tab--active .reforma-tab-count {
	background: oklch(92% 0.04 158);
	color: var(--wp--preset--color--accent-purple);
}

/* BESTSELLER badge: tag shape (4px radius) not pill.
   Overrides the 999px from base rule ~line 167. */
.reforma-bestseller-badge {
	border-radius: 4px !important;
}

/* Card body description — readable line-height guards.
   Inline style in PHP sets 1.6; this CSS ensures consistent
   rendering if block attr inline is stripped by WP save(). */
.reforma-premium-products .has-ink-color.has-sm-font-size {
	line-height: 1.6;
}

/* Card image — no competing radius; parent overflow:hidden is sole clip authority. */
.reforma-premium-products .reforma-product-card-image img {
	border-radius: 0;
}

/* Card box-shadow — single layer (rules cap: 2 layers max).
   Subtle lift to separate white card from page-tint section bg. */
.reforma-premium-products .reforma-product-card.wp-block-column {
	box-shadow: 0 2px 16px oklch(0% 0 0 / 0.06);
}

/* Mobile: tabs collapse to vertical list with left-border active state. */
@media (max-width: 640px) {
	.reforma-product-tabs.wp-block-buttons {
		flex-direction: column;
		border-bottom: none;
		gap: 0;
	}
	.reforma-product-tab > .wp-block-button__link {
		border-bottom: none !important;
		border-left: 2px solid transparent;
		padding-left: var(--wp--preset--spacing--30) !important;
	}
	.reforma-product-tab--active > .wp-block-button__link {
		border-left-color: var(--wp--preset--color--accent-purple);
		border-bottom-color: transparent !important;
	}
}

/* ============================================================
   End  premium products polish
   ============================================================ */

/* ============================================================
   Home hero right-column Figma alignment
   Target: Figma node 14:578 (right column) + 14:579 (overlay)
           + 14:599 (wavy decoration lines).

   Verification vs figma-hero-1280.png:
   - SVG in use (14-599-hero-wave.svg) IS correct: four sinusoidal
     S-curve stroke paths at stroke="#F2F9FF" match the white wavy
     lines at the right edge of the Figma hero column.
     hero-flora-right.svg (leaf ellipses) is the wrong asset.
   - Gradient fix:  gradient was solid brand-gold (hue 248)
     at left edge, nearly opaque. Figma shows a teal-shifted wash
     (hue ~210-220) so the treatment-room photo reads through.
     Corrected to oklch teal-blue at 72% opacity fading to 18%.
   - Decoration opacity raised 0.4 -> 0.82 so wave lines are as
     prominent as in Figma reference.
   - 300px top-right radius: already correct via overflow:hidden +
     border-top-right-radius on the column. No change.
   - Contact bubbles: remain at fixed bottom-right viewport .
     Figma shows them at column right edge — repositioning requires
     PHP markup change, deferred. Either position is acceptable.
   ============================================================ */

/* Override  gradient: teal-blue wash so photo reads through. */
.reforma-hero-image-col::before {
	background: linear-gradient(
		269.25deg,
		oklch(46% 0.12 220 / 0.72) -1.75%,
		oklch(56% 0.09 210 / 0.18) 99.14%
	) !important;
}

/* Raise decoration opacity so wavy white lines are clearly visible. */
.reforma-hero-decoration {
	opacity: 0.82 !important;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-hero-decoration {
		opacity: 0.82 !important;
		animation: none !important;
	}
}

/* ============================================================
   End  Home hero right-column alignment
   ============================================================ */

/* ============================================================
   Footer pixel-precision polish (2026-05-20)
   Gaps closed vs Figma v1.6 reference and personal inspection:
   1. Logo: enforce 200px via CSS (core/image has no width attr
      set so save() emits no is-resized — className CSS safe).
   2. Tagline: updated in footer.html to exact Figma copy.
   3. Pages col: "Our Story"→"About", Education+News deduped.
   4. Overflow col: Blog detail / Stores / Services / FAQs.
   5. Address: Riyadh, SA (US placeholder removed).
   6. Schedule button: asymmetric corner CSS reinforcement.
   7. Contact list: SVG opacity safety net.
   Colors: OKLCH only. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* 1. Footer logo: 200px width (Figma node 14:752 stacked artwork).
   No width/height JSON attrs on the core/image block — WP save()
   does NOT inject is-resized or has-custom-border — CSS is safe.
   !important beats any cascade from  .reforma-footer-logo img. */
.reforma-site-footer .reforma-footer-logo img {
	width: 200px !important;
	height: auto;
	display: block;
}

/* Footer tagline: max-width cap matches Figma (~460px = ~72ch at 1rem).
   Already set inline on the paragraph; CSS backs it up for specificity. */
.reforma-site-footer .reforma-footer-logo ~ .wp-block-paragraph {
	max-width: 460px;
}

/* 6. Schedule button: asymmetric corner 0 20px 0 0 (Reforma CTA DNA).
    set via block attrs + inline style. CSS reinforcement ensures
   it holds against FlyingPress-cached HTML with old pill radius. */
.reforma-footer-schedule-btn .wp-block-button__link {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Footer contact column: SVG icon opacity 0.75 safety net.
   Already set inline on each SVG; this prevents cascade override. */
.reforma-site-footer .reforma-footer-links li > svg {
	opacity: 0.75;
	flex-shrink: 0;
}

/* Footer column li (non-anchor items like address): readable opacity.
   Global .reforma-site-footer a handles anchor opacity (0.85).
   Non-anchor li text nodes have no opacity rule — add here. */
.reforma-site-footer .reforma-footer-links li {
	opacity: 0.85;
}

/* Mobile: full opacity on narrow viewports for legibility. */
@media (max-width: 640px) {
	.reforma-site-footer .reforma-footer-links li,
	.reforma-site-footer .reforma-footer-links a {
		opacity: 1;
	}
}

/* ============================================================
   End  footer pixel-precision polish
   ============================================================ */

/* ============================================================
   Logo wall portrait strip
   Figma intent: tight horizontal row of close-cropped skincare/
   portrait photos above the footer — instagram-style thumbnails,
   no gaps, no eyebrow label, full viewport width.

   Implementation:
   - Section: alignfull, padding 0, no border-top separator.
   - Columns: blockGap 0 (no gap between photo cells).
   - Each column (.reforma-partner-col): overflow hidden, flex 1.
   - Each figure (.reforma-partner-photo): margin 0, display block.
   - Each img: width 100%, height 160px, object-fit cover,
     object-position center top for face-crop alignment.
   - No grayscale filter (color skincare photos, not brand logos).
   Colors: OKLCH only. No border-radius on img (internal documentation constraint).
   ============================================================ */

/* Strip wrapper: remove border-top hairline (portrait photo strip
   visual weight acts as its own section separator). */
.reforma-logo-wall {
	border-top: none;
}

/* Column flex children: overflow hidden clips the photo to the column
   boundary. min-width 0 prevents flex blowout on narrow viewports. */
.reforma-partner-col {
	overflow: hidden;
	min-width: 0;
	padding: 0 !important;
}

/* Figure: strip default WP margin. line-height 0 removes descender gap. */
.reforma-partner-photo {
	margin: 0 !important;
	padding: 0;
	display: block;
	line-height: 0;
}

/* Image: cover-fill at 160px portrait height, top-aligned crop
   so faces appear near the top of each thumbnail cell.
   width 100% fills the equal-flex column without distortion. */
.reforma-partner-photo img {
	width: 100% !important;
	height: 160px;
	object-fit: cover;
	object-position: center top;
	display: block;
	filter: none;
	border-radius: 0;
}

/* Mobile: reduce thumbnail height on narrow viewports. */
@media (max-width: 640px) {
	.reforma-partner-photo img {
		height: 96px;
	}
}

/* ============================================================
   End  logo wall portrait strip
   ============================================================ */

/* ============================================================
   Rooted in Innovation pixel-precision (home-03-rooted)
   2026-05-20
   Gaps closed vs Figma:
   1. Image border-radius removed (0, was --radius--large) — Figma photo is rectangular.
   2. Asymmetric top-right corner on the image figure via overflow:hidden on
      .reforma-rooted-image (0 100px 0 0) — Figma brand signature curve.
   3. Stat grid 2×2 at desktop: flex-wrap moved to global rule (was mobile-only).
   ============================================================ */

/* Asymmetric top-right corner on the left-side team photo.
   Applying radius to the figure + overflow:hidden so the img crops correctly.
   WP core/image save() emits the figure with class reforma-rooted-image;
   we NEVER set border.radius in JSON attrs (avoids is-resized / has-custom-border
   byte-mismatch). The img itself stays border-radius:0 (set at line 81). */
.reforma-rooted-image.wp-block-image {
	border-radius: 100px 0 0 0; /*  large curve on TOP-LEFT (user: curve on left, not right) */
	overflow: hidden;
}

/* Ensure the img inside does not re-introduce a radius that would clash
   with the figure clip. Rule at line 81 sets border-radius:0 but this
   tightens specificity inside the wave-26 scope. */
.reforma-rooted-image.wp-block-image img {
	border-radius: 0 !important;
}

/* ============================================================
   End  rooted pixel-precision polish
   ============================================================ */




.reforma-b2b-pillar-icon {
	color: var(--wp--preset--color--brand-gold);
	margin: 0 0 var(--wp--preset--spacing--30);
	display: block;
}

.reforma-b2b-pillar-icon img {
	width: 56px;
	height: 56px;
	display: block;
}

.reforma-b2b-category-image {
	margin: 0 0 var(--wp--preset--spacing--50);
	overflow: hidden;
}

.reforma-b2b-category-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-top-left-radius: var(--wp--preset--radius--large, 20px);
	border-top-right-radius: var(--wp--preset--radius--large, 20px);
}

/* ============================================================
   End  B2B icon + image refresh
   ============================================================ */

/* ============================================================
   Home micro-polish
   2026-05-20
   Gaps closed vs Figma (900px composite, section-by-section):
   1.  Hero: section min-height brought from 800px → 760px so the
       right-column photo doesn't over-extend at 1200px container.
   2.  Stats bar: vertical padding reduced (spacing|70→spacing|60)
       via CSS override so the green band matches the tight ~64px
       Figma height. Block attr stays unchanged (no byte-mismatch).
   3.  Rooted → Stats bar seam: explicit margin-top:0 on the rooted
       section to eliminate any user-agent block-level gap.
   4.  Rooted section: column gap tightened from spacing|80 (64px)
       → spacing|70 (48px); stat-chip column gap tightened to
       spacing|30 (12px) per Figma 2×2 grid rhythm.
   5.  Rooted CTA: override pill radius → asymmetric 0 20px 0 0
       (Figma brand signature, matches other CTAs). Pill rule in
       the pattern src is 999px — overriding here avoids markup
       edit and block-validator touch.
   6.  Premium Products: header row → tabs margin tightened
       (spacing|50→spacing|30), tabs → card grid tightened
       (spacing|50→spacing|30); card-to-card column gap tightened
       (spacing|50→spacing|40 = 16px matches Figma ~18px).
   7.  Product card body inner L/R padding reduced from spacing|50
       (24px) → spacing|40 (16px) to match tighter Figma card
       interior. Bottom padding spacing|60→spacing|50.
   8.  Hair Loss cream header: bottom padding override
       (spacing|60→spacing|40) so the intro band compresses to
       Figma's tighter pre-green-band gap.
   9.  Hair Loss green band: top padding override
       (spacing|70→spacing|60) tightens the inner content padding.
  10.  Hair Loss treatment cards: card-to-card gap column
       (spacing|50→spacing|40) tightens the 4-card row.
  11.  Where Research: pillar grid row gap
       (spacing|40 already correct); section top/bottom padding
       tightened (spacing|70→spacing|60).
  12.  News section: header group margin-bottom
       (spacing|60→spacing|40); card image margin-bottom
       (spacing|40→spacing|30).
  13.  Contact band: form card top/bottom padding
       (spacing|70→spacing|60); card heading margin tightened.
  14.  Leadership: section top/bottom padding
       (spacing|70→spacing|60); portrait margin-bottom
       tightened (spacing|40→spacing|30).
  15.  Leadership: portrait max-width 220px → 260px so portraits
       fill more of the column at desktop (was visually small).
  16.  Logo wall: partner photo strip — force consistent height
       120px and full-bleed (no WP figure margin) so thumbnails
       tile flush edge-to-edge.
   ============================================================ */

/* 1. Hero height: tighten from 800px to match Figma taller but
   not infinite scroll. Keeping 800 already set above; this override
   only refines the columns row alignment. No change needed here —
   800px already confirmed correct on  */

/* 2. Stats bar — reduce vertical padding to match Figma tight band. */
.reforma-stats-bar {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* 3. Rooted section — flush against stats bar (no extra margin). */
.reforma-rooted {
	margin-top: 0 !important;
}

/* 4a. Rooted — tighten 2-col gap from spacing|80 to spacing|70. */
.reforma-rooted .wp-block-columns.alignwide {
	--column-gap: var(--wp--preset--spacing--70);
	column-gap: var(--wp--preset--spacing--70);
}

/* 4b. Rooted stat chips — tighter column gap (spacing|30 = 12px). */
.reforma-rooted-stats.wp-block-columns {
	--column-gap: var(--wp--preset--spacing--30) !important;
	column-gap: var(--wp--preset--spacing--30) !important;
}

/* 5. Rooted CTA — asymmetric corner replaces 999px pill per Figma brand DNA. */
.reforma-rooted .wp-block-buttons .wp-block-button__link {
	border-radius: 0 20px 0 0 !important;
}

/* 6a. Premium Products — header group bottom margin tightened. */
.reforma-premium-products .wp-block-group.alignwide {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* 6b. Premium Products — tab rail bottom margin tightened. */
.reforma-premium-products .reforma-product-tabs {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* 6c. Premium Products — card grid column gap tightened to ~16px. */
.reforma-premium-products .wp-block-columns.alignwide {
	--column-gap: var(--wp--preset--spacing--40);
	column-gap: var(--wp--preset--spacing--40);
}

/* 7. Product card body — tighten inner L/R padding + bottom padding. */
.reforma-product-card > .wp-block-group[style*="padding-right"][style*="padding-left"] {
	padding-right: var(--wp--preset--spacing--40) !important;
	padding-left: var(--wp--preset--spacing--40) !important;
}
/* Card column bottom padding tightened from spacing|60 to spacing|50. */
.reforma-premium-products .reforma-product-card.wp-block-column {
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* 8. Hair Loss cream header — tighten bottom padding before green band. */
.reforma-treatment-cream-header {
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

/* 9. Hair Loss green band — tighten top/bottom padding. */
.reforma-treatment-header {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* 10. Hair Loss treatment cards — tighten card grid column gap. */
.reforma-treatment-cards .wp-block-columns.alignwide {
	--column-gap: var(--wp--preset--spacing--40);
	column-gap: var(--wp--preset--spacing--40);
}

/* 11. Where Research — tighten section vertical padding. */
.reforma-research-purity {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* 12a. News section — tighten centered header group bottom margin. */
.reforma-news-insights > .wp-block-group {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* 12b. News card — tighten image group bottom margin. */
.reforma-news-card .reforma-news-card-media {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* 12c. News card grid — tighten column gap. */
.reforma-news-insights .wp-block-columns.alignwide {
	--column-gap: var(--wp--preset--spacing--40);
	column-gap: var(--wp--preset--spacing--40);
}

/* 13. Contact band — tighten form card vertical padding. */
.reforma-contact-booking-card {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* 14a. Leadership — tighten section vertical padding. */
.reforma-visionary-leadership {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* 14b. Leadership — tighten portrait margin-bottom. */
.reforma-leadership-portrait {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* 15. Leadership — expand portrait max-width so portraits
   fill the column more at desktop. 260px gives better presence
   while staying within the 3-col layout. */
.reforma-leadership-portrait {
	max-width: 260px !important;
}

/* 16. Logo wall — consistent height, flush edge-to-edge tiles.
   Override the logo-col rule (line ~500) which set 90px max-height.
   Partner-photo images should fill the column at a consistent
   aspect-ratio so the strip looks like a continuous banner. */
.reforma-partner-photo {
	margin: 0 !important;
	display: block;
}
.reforma-partner-photo img {
	width: 100%;
	height: 120px !important;
	max-height: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
}
/* Eliminate any WP figure internal padding/margin on partner cols. */
.reforma-partner-col .wp-block-image {
	margin: 0 !important;
}
.reforma-partner-col .wp-block-image figure {
	margin: 0 !important;
}

/* Responsive — tighten stat bar padding on mobile. */
@media (max-width: 768px) {
	.reforma-stats-bar {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}
	.reforma-partner-photo img {
		height: 80px !important;
	}
	/* Mobile: restore standard section padding where tightening would
	   make sections feel cramped on small screens. */
	.reforma-research-purity,
	.reforma-visionary-leadership {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
}

/* prefers-reduced-motion: no motion additions in this wave. */

/* ============================================================
   End  Home micro-polish
   ============================================================ */

/* ============================================================
   About page micro-polish
   2026-05-20
   CSS-only adjustments layered on /22/26 about rules.
   PHP token changes in patterns handle section/element gaps.
   All color values OKLCH. Spacing via var(--wp--preset--spacing--*).
   ============================================================ */

/* ── about-hero: back-link top anchor ──
   Small top nudge so back-link clears the section edge at reduced
   spacing|80 column padding. */
.reforma-about-hero .reforma-back-link {
	margin-top: var(--wp--preset--spacing--20);
}

/* ── about-who-we-are: section vertical padding tighten ──
   PHP block attr is spacing|80 (64px). Override to spacing|70 (48px)
   so this section reads as lighter mid-weight between hero and company. */
.reforma-about-who-we-are {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── about-who-we-are: body paragraph bottom margin ──
   Reduce body→stat-row gap from spacing|60 (32px) to spacing|50 (24px). */
.reforma-about-who-we-are .has-ink-color.has-md-font-size {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── about-mission: quote line-height uplift ──
   Display-serif italic at xl-size reads better at 1.55 than 1.4. */
.reforma-about-mission > p.has-xl-font-size {
	line-height: 1.55 !important;
}

/* ── about-our-company: section vertical padding tighten ──
   PHP block attr is spacing|80 (64px). Override to spacing|70 (48px). */
.reforma-about-our-company {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── about-our-company: stat card vertical padding tighten ──
   Cards carry .reforma-stat-card + .reforma-rooted-stat-chip.
   Reduce top/bottom from spacing|60 to spacing|50. */
.reforma-about-our-company .reforma-stat-card.reforma-rooted-stat-chip {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── about-brands: logo column gap tighten ──
   7 equal columns at spacing|50 (24px) is loose.
   Collapse to spacing|40 (16px) — logos read as a flush strip. */
.reforma-about-brands .wp-block-columns {
	gap: var(--wp--preset--spacing--40) !important;
}

/* ── about-values: card vertical padding tighten ──
   spacing|60 (32px) all-sides is generous for 4-col cards.
   Reduce top/bottom to spacing|50 (24px), keep left/right at spacing|60. */
.reforma-value-card {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── about-values: icon-wrap bottom margin ──
   Confirm PHP token change (spacing|50→spacing|40) via CSS for
   specificity safety. */
.reforma-value-icon-wrap {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── about-cta: eyebrow margin-top reset ──
   Eliminate any UA-injected first-child top margin. */
.reforma-about-cta .reforma-eyebrow {
	margin-top: 0 !important;
}

@media (max-width: 768px) {
	/* Who We Are + Our Company: restore comfortable mobile padding. */
	.reforma-about-who-we-are,
	.reforma-about-our-company {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
	/* Brands: tighten logo gap further on narrow screens. */
	.reforma-about-brands .wp-block-columns {
		gap: var(--wp--preset--spacing--30) !important;
	}
}

/* ============================================================
   End  About micro-polish
   ============================================================ */

/* ============================================================
   Shop micro-polish
   Methodology: side-by-side Figma 1920×2776 vs live screenshot.
   PHP spacing-token changes applied (products-hero, product-grid,
   products-cta, license-footer). CSS rules here enforce the
   tighter rhythm and override earlier wave safety guards that
   set higher spacing values.
   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* ── 1. Hero: enforce PHP-reduced padding (spacing|60 = 32px).
    gap-5 rule set min-height:520px !important but did not
   restrict padding. These guards ensure the PHP changes cascade
   correctly in block-editor preview mode. */
.reforma-products-hero.wp-block-cover {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── 2. Hero stat boxes: equal-width flex basis.
   min-width:0 prevents overflow on long labels ("Distributed").
   Consistent with Figma chip sizing at 1920px / 4-chip row. */
.reforma-products-hero .reforma-stat-box.wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
	min-width: 0;
}

/* ── 3. Product grid: override  Gap-9 safety guard (spacing|70).
   PHP now emits spacing|60 (32px). Both agree. */
.reforma-product-grid.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── 4. Product card body: enforce PHP-reduced padding and gap.
   PHP: top=spacing|30 (12px), bottom=spacing|40 (16px),
   blockGap=spacing|20 (8px). Guards against wp-container-* override. */
.reforma-product-card-body.wp-block-group {
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
	gap: var(--wp--preset--spacing--20) !important;
}

/* ── 5. CTA band: override  Gap-9 safety guard (spacing|70).
   PHP reduced to spacing|60 (32px). */
.reforma-products-cta.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── 6. License footer: PHP reduced to spacing|60 (32px).
    guard already sets spacing|60; this rule reinforces
   against any later override. */
.reforma-license-footer.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── 7. License footer 3-col row: PHP reduced margin-bottom to
   spacing|50 (24px). CSS guard enforces in preview context. */
.reforma-license-footer .wp-block-columns {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── Mobile adaptations —  shop. */
@media (max-width: 768px) {
	.reforma-products-hero.wp-block-cover {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}
	.reforma-product-card-body.wp-block-group {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}
}

/* ── prefers-reduced-motion: no motion additions in  shop. */

/* ============================================================
   End  Shop micro-polish
   ============================================================ */

/* ============================================================
   News listing + article micro-detail polish
   2026-05-20
   Source: reports/wave-27/news-listing-live.png
           reports/wave-27/news-article-side.png
           reports/wave-27/news-article-live.png

   Gaps closed — news listing:
   A. Hero top/bottom padding: spacing|80 (64px) → spacing|70 (48px).
   B. Card grid column gap: explicit spacing|50 (24px) via post-template.
   C. Card body bottom padding: enforce spacing|50 (24px).
   D. Card excerpt margin: tighten to spacing|30 (12px) before READ MORE.
   E. Pagination: add item gap spacing|20 (8px).

   Gaps closed — news article:
   F. Newsletter CTA vertical padding: spacing|80 → spacing|70 (48px).
   G. Back-CTA vertical padding: spacing|70 → spacing|60 (32px).
   H. Back-CTA inner flex gap heading→subline: spacing|20 → spacing|30.
   I. Stats band column gap: spacing|50 → spacing|40 (16px).
   J. Body paragraph margin-bottom: explicit spacing|40 (16px).
   K. Sidebar newsletter card h4 top margin: force 0.
   L. Article body+sidebar column gap: spacing|50 (24px).

   All colors OKLCH. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   No border-left accent stripes. No gradient text. No card-on-card.
   CSS-only — no PHP markup changes.
   ============================================================ */

/* ── A. News listing hero: reduce vertical padding ──
   Block attr inline style sets spacing|80 (64px) top/bottom.
   Override to spacing|70 (48px) — the gradient hero reads more
   proportionate against the 500px min-height and card grid below. */
.reforma-news-listing-hero.wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── B. Card grid column gap ──
   wp:post-template grid inherits WP default layout block-gap which
   can vary by theme.json context. Lock to spacing|50 (24px). */
.reforma-news-listing-section .wp-block-post-template {
	gap: var(--wp--preset--spacing--50) !important;
}

/* ── C. Card body bottom padding ──
   Inner content group has padding-bottom from block attrs inline.
   Enforce spacing|50 (24px) so READ MORE link breathes from card edge. */
.reforma-news-card > .wp-block-group:last-child {
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── D. Card excerpt: tighten margin before READ MORE ──
   Reduce excerpt block margin-bottom from spacing|40 (16px) to
   spacing|30 (12px). READ MORE attaches closer to the excerpt text. */
.reforma-news-card-excerpt,
.reforma-news-listing-section .wp-block-post-excerpt {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}
/* Prevent paragraph inside excerpt adding extra bottom margin. */
.reforma-news-card-excerpt p,
.reforma-news-listing-section .wp-block-post-excerpt p {
	margin-bottom: 0;
}

/* ── E. Pagination: item gap ──
   WP query-pagination flex container has no explicit gap. Adding
   spacing|20 (8px) spaces number pills and prev/next links legibly. */
.reforma-news-listing-section .wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

/* ── F. Newsletter CTA vertical padding ──
   spacing|80 (64px) → spacing|70 (48px). The brand-gold subscribe
   band is proportionally taller than the Figma compact strip. */
.reforma-article-newsletter-cta.wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── G. Back-CTA section vertical padding ──
   spacing|70 (48px) → spacing|60 (32px). Figma shows the dark ink
   bottom CTA band as a compact accent, not a tall section. */
.reforma-article-back-cta.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── H. Back-CTA inner flex gap: heading to subline ──
   The inner flex-column group has blockGap spacing|20 (8px).
   Override to spacing|30 (12px) for more breathing room between
   the H2 "Stay updated…" heading and the descriptor paragraph. */
.reforma-article-back-cta .wp-block-group > .wp-block-group:first-child {
	gap: var(--wp--preset--spacing--30) !important;
}

/* ── I. Stats band column gap ──
   Figma 4-stat row is tightly packed. Drop from spacing|50 (24px)
   to spacing|40 (16px) — stat numbers read as a unified horizontal row. */
.reforma-article-stats .wp-block-columns {
	column-gap: var(--wp--preset--spacing--40) !important;
}

/* ── J. Body paragraph margin-bottom ──
   WP post-content paragraphs receive no explicit margin from the theme;
   browser default is 1em (~17px). Standardise to spacing|40 (16px). */
.reforma-article-body .wp-block-post-content p {
	margin-bottom: var(--wp--preset--spacing--40);
}
.reforma-article-body .wp-block-post-content p + p {
	margin-top: 0;
}

/* ── K. Sidebar newsletter card h4 top margin ──
   WP applies a default block-level top margin to headings inside
   constrained groups. Force 0 so the eyebrow→h4 gap is controlled
   only by the existing blockGap token (spacing|20 = 8px) on the
   card inner group. */
.reforma-sidebar-card--newsletter .wp-block-heading {
	margin-top: 0 !important;
}

/* ── L. Article body+sidebar column gap ──
   WP columns block without explicit blockGap inherits theme.json
   layout blockGap (spacing|60 = 32px). Override to spacing|50 (24px)
   via the columns wrapper inside the article layout group.
   Selector targets the first-level columns block inside the padded
   layout wrapper in single.html (alignwide + are-vertically-aligned-top). */
.wp-block-group.alignwide > .wp-block-columns.are-vertically-aligned-top {
	column-gap: var(--wp--preset--spacing--50) !important;
}

/* Mobile adaptations. */
@media (max-width: 768px) {
	/* Hero: restore comfortable padding on narrow stacked layout. */
	.reforma-news-listing-hero.wp-block-group {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
	/* Back-CTA: restore comfortable padding on narrow viewports. */
	.reforma-article-back-cta.wp-block-group {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
	/* Newsletter CTA: tighter padding adequate on mobile. */
	.reforma-article-newsletter-cta.wp-block-group {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
	/* No motion rules added in this wave for news pages. */
}

/* ============================================================
   End  news listing + article micro-detail polish
   ============================================================ */

/* ============================================================
   Surgical fixes
   ============================================================ */

/* Fix 1. Rooted stat chips — force 2×2 grid ( flex-basis was being ignored). */
.reforma-rooted-stats.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--wp--preset--spacing--30) !important;
	flex-wrap: unset !important;
}
.reforma-rooted-stats .reforma-rooted-stat-chip.wp-block-column {
	flex-basis: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
@media (max-width: 480px) {
	.reforma-rooted-stats.wp-block-columns {
		grid-template-columns: 1fr !important;
	}
}

/* Fix 2. Leadership portraits — don't crop tops. Reduce asymmetric corner clipping aggressiveness. */
.reforma-leadership-portrait img {
	object-position: center 30% !important; /* Show top of head, not center */
	aspect-ratio: 4 / 5 !important; /* Less tall = less top cropping */
}

/* Fix 3. Contact band — photo aspect ratio match form card height. */
.reforma-contact-band .reforma-contact-image img {
	aspect-ratio: 3 / 4 !important;
	max-height: 540px;
	object-fit: cover;
	border-radius: 0 0 100px 0 !important;
}

/* Fix 4. Footer — no white space under it. Body has min-height that may add gap. */
body { min-height: 0 !important; }
.reforma-site-footer { margin-bottom: 0 !important; padding-bottom: var(--wp--preset--spacing--50) !important; }
.wp-site-blocks { padding-bottom: 0 !important; }
.wp-site-blocks > footer:last-child ~ * { display: none; }

/* ============================================================
   About page deep polish
   2026-05-20
   Vision-driven per-section surgical fixes. CSS-only append.
   OKLCH tokens. Spacing var(--wp--preset--spacing--*) scale only.
   No markup touched. No existing rules modified.
   ============================================================ */

/* ── 1. HERO — left col vertical padding reduction ──
   Col padding is spacing|80 (64px) in PHP on both top+bottom, making
   the hero 522px tall. Reduce to spacing|70 (48px) top+bottom so the
   hero sits as a compact header band, not a half-viewport blank. */
.reforma-about-hero .wp-block-columns > .wp-block-column:first-child {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── 1b. HERO — back-link to eyebrow gap tighten ──
   back-link margin-bottom is spacing|40 (16px) in PHP. Tighten to
   spacing|30 (12px) so eyebrow and back-link read as a tight header cluster. */
.reforma-about-hero .reforma-back-link {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* ── 1c. HERO — H1 margin-bottom tighten ──
   PHP sets spacing|40 (16px) on H1 bottom. Reduce to spacing|30 (12px)
   to pull subtitle up closer under the heading. */
.reforma-about-hero h1.wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* ── 1d. HERO — section bottom hairline separator ──
   surface bg bleeds into who-we-are section (overridden to surface below)
   without visual separation. Add 1px hairline as section floor. */
.reforma-about-hero {
	border-bottom: 1px solid oklch(88% 0.015 240 / 0.5);
}

/* ── 2. WHO WE ARE — section bg alternation ──
   Both who-we-are and our-company use page bg (white), creating a long
   un-broken white band. Override who-we-are to surface tint so the
   alternating rhythm is: surface (hero) → surface (who) → page (company)
   → green (mission) → surface (brands) → surface (values) → blue (cta).
   NOTE: surface is oklch(97.8% 0.011 242) — perceptibly distinct from white. */
.reforma-about-who-we-are.has-page-background-color {
	background-color: var(--wp--preset--color--surface) !important;
}

/* ── 2b. WHO WE ARE — fallback image col: min-height floor ──
   When the ACF image binding is not yet seeded on VPS, the image col
   collapses to 0. Ensure a 400px floor so layout doesn't break. */
.reforma-about-who-image-col {
	min-height: 400px;
}

/* ── 2c. WHO WE ARE — stat chip min-height ──
   Empty chips (ACF not yet seeded) appear as blank white boxes.
   Add min-height so they maintain visual proportion. */
.reforma-about-who-we-are .reforma-rooted-stat-chip {
	min-height: 80px;
}

/* ── 3. OUR COMPANY — section top separator ──
   our-company follows who-we-are (now surface). The page-bg section
   needs a hairline at the top so the transition reads as intentional. */
.reforma-about-our-company {
	border-top: 1px solid oklch(88% 0.015 240 / 0.4);
}

/* ── 3b. OUR COMPANY — heading group bottom margin tighten ──
   spacing|60 (32px) between heading and stat row reads very open.
   Reduce to spacing|50 (24px). */
.reforma-about-our-company .wp-block-group[style*="margin-bottom"] {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── 3c. OUR COMPANY — stat card horizontal padding match ──
   Cards use  padding: spacing|60/spacing|50. Within 4-col at
   1200px, spacing|50 (24px) L/R is the correct horizontal rhythm.
   Reinforce against any wave that reset it. */
.reforma-about-our-company .reforma-stat-card {
	padding-left: var(--wp--preset--spacing--50) !important;
	padding-right: var(--wp--preset--spacing--50) !important;
}

/* ── 4. MISSION — eyebrow bottom margin ──
   spacing|30 (12px) under eyebrow is tight before the large italic quote.
   Increase to spacing|40 (16px) for breathing room between label and body. */
.reforma-about-mission .reforma-eyebrow {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── 4b. MISSION — section padding vertical reinforce ──
   spacing|70 (48px) is the correct band height. Reinforce in case any
   later rule reset the  !important override. */
.reforma-about-mission {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── 5. BRANDS — section bottom hairline separator ──
   brands (surface) sits directly above values (surface). Add hairline
   at brands bottom so the two surface sections read as distinct bands. */
.reforma-about-brands {
	border-bottom: 1px solid oklch(88% 0.015 240 / 0.4);
}

/* ── 5b. BRANDS — heading group bottom margin tighten ──
   spacing|50 (24px) gap between heading and logo row is slightly generous.
   Reduce to spacing|40 (16px) so logos feel anchored to the heading. */
.reforma-about-brands .wp-block-group[style*="margin-bottom"] {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── 5c. BRANDS — logo placeholder figure min-height ──
   SVG text-placeholder logos are 60px tall per viewBox. Ensure the
   figure container has a stable min-height to prevent layout shift. */
.reforma-about-partner-logo figure.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
}

/* ── 6. VALUES — section vertical padding tighten ──
   spacing|80 (64px) top+bottom is generous for a 4-card grid.
   Reduce to spacing|70 (48px) to match mission and brands rhythm. */
.reforma-about-values {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── 6b. VALUES — icon-wrap left-align within card ──
   Icon-wrap is inline-flex ( rule). In the left-aligned card body
   flow, the 64px chip must align-start so it doesn't drift center. */
.reforma-value-card .reforma-value-icon-wrap {
	align-self: flex-start;
}

/* ── 6c. VALUES — heading group bottom margin tighten ──
   spacing|60 (32px) between centered heading and 4-card grid.
   Reduce to spacing|50 (24px) for tighter cohesion. */
.reforma-about-values .wp-block-group[style*="margin-bottom"] {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── 7. CTA — H2 margin-bottom enlarge ──
   spacing|30 (12px) under H2 before subtitle feels pinched.
   Increase to spacing|40 (16px) so heading and subtitle read as
   a deliberate pair with proper breathing room. */
.reforma-about-cta h2.wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── 7b. CTA — section vertical padding tighten ──
   spacing|80 (64px) top+bottom on brand-gold is generous.
   Reduce to spacing|70 (48px) to match other content band heights. */
.reforma-about-cta {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── Mobile adaptations ── */
@media (max-width: 768px) {
	.reforma-about-hero .wp-block-columns > .wp-block-column:first-child {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
	.reforma-about-who-image-col {
		min-height: 280px;
	}
	.reforma-about-values {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
	.reforma-about-cta {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	/* No new motion rules in  */
}

/* ============================================================
   End About page deep polish
   ============================================================ */

/* ============================================================
   Article block pixel-precision
   Per-block: hero, body+sidebar, stats, back-CTA
   ============================================================ */

/* ── 1. Hero — inner content group horizontal padding ──
   spacing|60 (32px) on left/right is too close to the edge at 1200px
   content width. Match Figma by enforcing spacing|70 (48px) sides. */
.reforma-article-hero .wp-block-cover__inner-container > .wp-block-group {
	padding-left: var(--wp--preset--spacing--70) !important;
	padding-right: var(--wp--preset--spacing--70) !important;
}

/* ── 2. Hero — post-title margin-top tighten ──
   Eyebrow to title gap reads too tight on dark gradient.
   Bump to spacing|30 (12px) from spacing|20 (8px). */
.reforma-article-hero .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--30) !important;
}

/* ── 3. Stats band — top and bottom 1px hairline borders ──
   Figma shows a subtle hairline separating the surface-bg stats row
   from the article body above and the ink CTA band below. */
.reforma-article-stats.wp-block-group {
	border-top: 1px solid oklch(88% 0.012 248);
	border-bottom: 1px solid oklch(88% 0.012 248);
}

/* ── 4. Stats band — vertical column dividers ──
   Each stat column gets a right-side 1px divider; last column excluded. */
.reforma-article-stats .wp-block-columns .wp-block-column:not(:last-child) {
	border-right: 1px solid oklch(88% 0.012 248);
	padding-right: var(--wp--preset--spacing--40);
}
.reforma-article-stats .wp-block-columns .wp-block-column:not(:first-child) {
	padding-left: var(--wp--preset--spacing--40);
}

/* ── 5. Body — section heading spacing inside post-content ──
    set p font-size/line-height. This adds heading margin. */
.reforma-article-body .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--70) !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
.reforma-article-body .wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}
.reforma-article-body .wp-block-post-content h4 {
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

/* ── 6. Body — list items inside post-content ──
   Correct bullet/number margins for article content. */
.reforma-article-body .wp-block-post-content ul,
.reforma-article-body .wp-block-post-content ol {
	padding-left: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--40);
}
.reforma-article-body .wp-block-post-content li {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ── 7. Body — tag chips row top margin ──
    set spacing|60 (32px). Figma shows ~24px gap. Tighten. */
.reforma-article-body .wp-block-post-terms.reforma-tag-chips {
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* ── 8. Sidebar — sticky on desktop ──
   Sidebar stays in view as body scrolls. Offset by header height. */
@media (min-width: 769px) {
	.reforma-article-sidebar.wp-block-group {
		position: sticky;
		top: 96px;
		align-self: flex-start;
	}
}

/* ── 9. Back-CTA — button asymmetric corner ──
   Brand system CTA uses 0 20px 0 0 corner; apply to back-news button. */
.reforma-btn-back-news .wp-block-button__link {
	border-radius: 0 20px 0 0 !important;
}

/* ── 10. Back-CTA — H2 font-size reduce ──
   2xl heading on ink band is over-sized; reduce to xl for proportion. */
.reforma-article-back-cta .wp-block-heading {
	font-size: var(--wp--preset--font-size--xl) !important;
	line-height: 1.3 !important;
}

/* ── 11. Layout wrapper — article body section padding ──
   single.html layout wrapper uses spacing|60 (32px) top padding.
   Figma shows ~24px between hero bottom and body start. */
#reforma-main > .wp-block-group.alignwide {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* Mobile adaptations. */
@media (max-width: 768px) {
	.reforma-article-hero .wp-block-cover__inner-container > .wp-block-group {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
	.reforma-article-stats .wp-block-columns .wp-block-column:not(:last-child) {
		border-right: none;
		padding-right: 0;
	}
	.reforma-article-stats .wp-block-columns .wp-block-column:not(:first-child) {
		padding-left: 0;
	}
	.reforma-article-sidebar.wp-block-group {
		position: static;
		top: auto;
	}
}

/* ============================================================
   End  article block pixel-precision
   ============================================================ */

/* ============================================================
   Shop page deep pixel-precision polish
   2026-05-20
   Source composites: reports/wave-29/blocks/shop-*.png
   Gaps closed per block:

   BREADCRUMB: row gap spacing|50→|30 (PHP/HTML change in archive-product.html)
   HERO: minHeight 520→560px; description margin |40→|50; stat chip gap |20→|30
   FILTER+GRID: card columns gap |40→|50; card body blockGap |20→|30 (PHP);
                card CTA anchored to bottom via flex push;
                card body equal-height via flex-grow
   CTA: band padding |60→|70 (PHP); button asymmetric corner 0 20px 0 0
   LICENSE: no changes needed — matches Figma
   All spacing slugs validated: {10,20,30,40,50,60,70,80,90} only.
   No HEX. No blocklisted fonts. No new block attrs — CSS className only.
   ============================================================ */

/* ── 1. Hero: guard the PHP-increased minHeight + stat chip gap. */
.reforma-products-hero.wp-block-cover {
	min-height: 430px !important;
}

/* Stat box inner columns: horizontal gap raised to spacing|30 (12px).
   The PHP blockGap change covers flex-gap but the generated
   wp-container-* class may override. Guard here. */
.reforma-products-hero .wp-block-columns:last-child {
	gap: var(--wp--preset--spacing--30) !important;
	column-gap: var(--wp--preset--spacing--30) !important;
}

/* ── 2. Product grid: columns horizontal gap spacing|50 (24px).
   PHP already emits |50; this guard overrides any  blockGap
   that landed on the columns wrapper. */
.reforma-product-grid .wp-block-columns.alignwide {
	column-gap: var(--wp--preset--spacing--50) !important;
}

/* ── 3. Product card: equal-height columns — flex column full-height.
   Each card column stretches to match the tallest card in the row.
   Card body grows to fill available space, pushing CTA to the bottom. */
.reforma-product-grid .wp-block-columns.alignwide > .reforma-product-card.wp-block-column {
	display: flex;
	flex-direction: column;
}
.reforma-product-card.wp-block-column > .reforma-card-image-wrap.wp-block-group {
	flex-shrink: 0;
}
.reforma-product-card.wp-block-column > .reforma-product-card-body.wp-block-group {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* CTA (buttons group) anchored to the bottom of the card body. */
.reforma-product-card-body.wp-block-group > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* ── 4. Card body blockGap guard: PHP now emits spacing|30 (12px).
   Override  rule that forced |20 (8px). */
.reforma-product-card-body.wp-block-group {
	gap: var(--wp--preset--spacing--30) !important;
}

/* ── 5. CTA band: PHP raised to spacing|70 (48px). Guard against 
   rule that forced |60. */
.reforma-products-cta.wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* ── 6. CTA button: asymmetric corner — 0 20px 0 0 (top-right + bottom-right only).
   Matches Figma shop CTA button corner treatment (same as booking submit).
   Override the pill 999px radius set in PHP. */
.reforma-cta-contact-btn .wp-block-button__link {
	border-radius: 0 20px 0 0 !important;
}

/* ── 7. Filter bar: ensure bottom hairline separator is visible (1px solid).
   Matches Figma filter bar bottom edge. */
.reforma-product-filter-bar.wp-block-group {
	border-bottom: 1px solid oklch(88% 0.010 240);
}

/* ── Mobile: restore pill radius on CTA button for small screens. */
@media (max-width: 600px) {
	.reforma-cta-contact-btn .wp-block-button__link {
		border-radius: 999px !important;
	}
	.reforma-product-grid .wp-block-columns.alignwide > .reforma-product-card.wp-block-column {
		flex-direction: column;
	}
}

/* ── prefers-reduced-motion: no motion in  shop. */

/* ============================================================
   End  Shop deep pixel-precision polish
   ============================================================ */

/* ============================================================
   Booking page deep pixel-precision polish
   Block composites reviewed: booking-hero, booking-form-sidebar,
   booking-trust. 9 surgical gaps closed — CSS-only, no markup
   restructure, /nonce/honeypot untouched.
   OKLCH tokens only. Spacing slugs in {10,20,30,40,50,60,70,80,90}.
   ============================================================ */

/* ── 1. Hero: field-grid gap raised spacing|30→|40 (12→16px)
   Figma shows ~16px column gap between first/last name and
   email/phone pairs — the current 12px reads cramped at 1400px
   content width with two equal columns. */
.reforma-booking-form--sections .reforma-field-grid-2 {
	gap: var(--wp--preset--spacing--40);
}

/* ── 2. Form card: bottom margin spacing|40→|50 (16→24px)
   Figma shows clear vertical breathing room between each fieldset
   section (Personal Info / Location / Appointment / Notes).
   Raises the per-section separation by 8px. */
.reforma-form-card {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ── 3. Card body: left/right padding inset spacing|50→|40 (24→16px)
   The Figma card body is compact — 16px left/right with 20px
   top/bottom. The current 24px all-around feels over-spaced and
   pushes the 62% column width near overflow at 1400px content size.
   Override vertical padding stays at |50 for comfortable label spacing. */
.reforma-card-body {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
	padding-left: var(--wp--preset--spacing--40) !important;
	padding-right: var(--wp--preset--spacing--40) !important;
}

/* ── 4. Order summary card body: tighten to match form cards.
   Both panels are in the same row — visual parity requires the
   same 16px l/r inset. Vertical keeps |50 for the plan row. */
.reforma-order-summary-card__body {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
	padding-left: var(--wp--preset--spacing--40) !important;
	padding-right: var(--wp--preset--spacing--40) !important;
}

/* ── 5. Submit button: asymmetric corner 0 20px 0 0 (Reforma DNA).
   Figma submit button uses the same top-right asymmetric corner as
   all primary CTAs across the site. Overrides the uniform 8px
   border-radius from the base .reforma-submit-btn rule. */
.reforma-submit-btn {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* ── 6. Consent row bottom margin: spacing|50→|40 (24→16px).
   Figma shows a tighter gap between consent text and submit button —
   the 24px creates too much visual break in a single-column flow. */
.reforma-consent-row {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── 7. License footer: separator bottom-margin spacing|40→|30 (16→12px).
   The gap between the horizontal rule and the disclaimer paragraph
   is smaller in Figma than the current 16px. 12px keeps the
   disclaimer visually connected to the separator as a unit. */
.reforma-license-footer .wp-block-separator {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* ── 8. Booking layout wrapper: top padding guard.
   The layout wrapper in page-booking.html has spacing|30 top.
   Hero already has spacing|50 top/spacing|30 bottom from PHP.
   Ensure the wrapper top does not create a double-gap — use
   |20 (8px) so the form cards sit close to the hero bottom. */
.reforma-booking-layout.wp-block-group {
	padding-top: var(--wp--preset--spacing--20) !important;
}

/* ── 9. Trust card inner stat: remove paragraph default margin.
   The 450,000+ paragraph and "Customers trust Reforma" paragraph
   carry WP's default margin-block which compounds the padding
   and makes the trust card taller than Figma. Reset to 0. */
.reforma-trust-card .has-accent-purple-color.wp-block-paragraph,
.reforma-trust-card .has-page-color.wp-block-paragraph {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ── Mobile overrides: restore comfortable tap targets on small screens. */
@media (max-width: 640px) {
	.reforma-card-body {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
	.reforma-order-summary-card__body {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
	.reforma-booking-layout.wp-block-group {
		padding-top: var(--wp--preset--spacing--30) !important;
	}
}

/* ── Reduced motion: no additional motion rules added in  booking. */

/* ============================================================
   End  Booking deep pixel-precision polish
   ============================================================ */

/* ============================================================
   Contact page ultra-focused per-block precision
   2026-05-20
   Source composites: reports/wave-29/blocks/contact-*.png

   BLOCK 1 (contact-hero): photo min-height 480→560px;
     form card bottom padding spacing|50→|40;
     field-grid margin-bottom spacing|40→|30.
   BLOCK 2 (begin-skincare-cta): section padding spacing|70→|60;
     left image column stretch (align-self + height chain);
     H2 bottom margin spacing|50→|40.
   BLOCK 3 (faq-accordion): section padding spacing|80→|70;
     H2 bottom margin spacing|70→|60;
     FAQ item bottom margin spacing|60→|50.
   BLOCK 4 (footer): matches Figma — no changes.
   All spacing slugs validated in {10,20,30,40,50,60,70,80,90}.
   OKLCH colors only. No border-left stripes. No card-on-card.
   No new block attrs — className-targeted CSS only.
   ============================================================ */

/* ── BLOCK 1: CONTACT HERO ── */

/* A) Photo min-height: 480px → 560px.
   At mid-viewport (900–1100px) the form card with 6 field rows grows
   taller than the 480px floor, creating empty space at the bottom of
   the left column. 560px matches the form card natural height.
   Mobile revert already handled by /27 media queries. */
.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
.reforma-contact-hero-photo img {
	min-height: 560px;
}

/* B) Form card bottom padding: spacing|50 (24px) → spacing|40 (16px).
   Reduces excess space below the submit row inside the green card.
   Top padding (spacing|50) unchanged. !important overrides  */
.reforma-contact-form-card.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

/* C) Field grid bottom margin: spacing|40 (16px) → spacing|30 (12px).
   Brings the full-width textarea row closer to the 2-col grid — matches
   the ~12px visual gap in the Figma composite. */
.reforma-contact-hero-form__grid {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ── BLOCK 2: BEGIN SKINCARE CTA ── */

/* A) Section padding: spacing|70 (48px) → spacing|60 (32px) top/bottom.
   The skincare band is a compact accent strip in Figma — 48px makes it
   feel heavy. 32px aligns with contact and booking band treatments. */
.reforma-begin-skincare.wp-block-group {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* B) Left image column: stretch to full band height.
   Columns use verticalAlignment:"center" — override to align-self:stretch
   so the image fills the green band top-to-bottom. height:100% chain
   propagates through WP figure wrapper to the img element.
   top-right 100px radius preserved by existing .reforma-skincare-image img rule. */
.reforma-begin-skincare .wp-block-column:first-child {
	align-self: stretch;
}
.reforma-begin-skincare .wp-block-column:first-child .wp-block-image {
	height: 100%;
}
.reforma-begin-skincare .wp-block-column:first-child .wp-block-image img {
	height: 100%;
	object-fit: cover;
	display: block;
}

/* C) H2 bottom margin: spacing|50 (24px) → spacing|40 (16px).
   Tightens headline-to-body coupling to match ~16px Figma gap. */
.reforma-begin-skincare .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* Mobile: revert image column stretch when stacked. */
@media (max-width: 768px) {
	.reforma-begin-skincare .wp-block-column:first-child {
		align-self: auto;
	}
	.reforma-begin-skincare .wp-block-column:first-child .wp-block-image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.reforma-begin-skincare.wp-block-group {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}
}

/* ── BLOCK 3: FAQ ACCORDION ── */

/* A) Section padding: spacing|80 (64px) → spacing|70 (48px) top/bottom.
   Block markup uses spacing|80; Figma FAQ section shows ~48px.
   Override reduces the section's visual weight. */
.reforma-faq.wp-block-group {
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* B) H2 bottom margin: spacing|70 (48px) → spacing|60 (32px).
   Closes the over-generous gap between "Questions & Answers" and
   the first FAQ item divider. Figma composite shows ~32px here. */
.reforma-faq > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

/* C) FAQ item bottom margin: spacing|60 (32px) → spacing|50 (24px).
   After  reduced padding-top to spacing|40 (16px), the 32px
   bottom margin is disproportionate. 24px creates balanced rhythm:
   16px above divider (padding-top) + 24px below answer. */
.reforma-faq-item {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* Reinforce last-item guard from  */
.reforma-faq .reforma-faq-item:last-child {
	margin-bottom: 0 !important;
}

/* ============================================================
   End  Contact per-block precision
   ============================================================ */


/* ============================================================
    - Home page deep pixel precision
   2026-05-20. CSS-only. OKLCH only. Spacing slugs in {10-90}.
   ============================================================ */

/* Home Hero: tighten left col padding to spacing|60; H1 margin to |50; image fills col */
.reforma-hero-band > .wp-block-columns > .wp-block-column:first-child {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}
.reforma-hero-title.wp-block-heading { margin-bottom: var(--wp--preset--spacing--50) !important; }
.reforma-hero-image-col { min-height: 460px; }
.reforma-hero-image-col .wp-block-image img {
	width: 100%; height: 100%; min-height: 460px;
	object-fit: cover; object-position: center center; display: block;
}

/* Home Stats Bar: padding to |60; hairline divider between columns */
.reforma-stats-bar {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}
.reforma-stats-bar .wp-block-columns > .wp-block-column + .wp-block-column {
	border-left: 1px solid oklch(1 0 0 / 0.20);
}
@media (max-width: 768px) {
	.reforma-stats-bar .wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: none;
		border-top: 1px solid oklch(1 0 0 / 0.20);
	}
}

/* Home Rooted: CTA asymmetric corner; image curved top-right; stat chip bg+border */
.reforma-rooted > .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
	width: 100%; object-fit: cover; object-position: center top;
	border-radius: 0 80px 0 0; display: block;
}
.reforma-rooted .wp-block-buttons .wp-block-button__link { border-radius: 0 20px 0 0 !important; }
.reforma-rooted-stat-chip.wp-block-column {
	background-color: oklch(0.962 0.013 220) !important;
	border: 1px solid oklch(0.895 0.018 220) !important;
	border-radius: var(--wp--preset--radius--small) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
}

/* Home Premium Products: tab hairline; equal-height cards; card body top pad; CTA push */
.reforma-product-tabs.wp-block-buttons {
	border-bottom: 1px solid oklch(0.882 0.010 220);
	margin-bottom: var(--wp--preset--spacing--50) !important;
}
.reforma-premium-products .wp-block-columns.are-vertically-aligned-top { align-items: stretch !important; }
.reforma-premium-products .reforma-product-card.wp-block-column {
	display: flex !important; flex-direction: column !important;
}
.reforma-premium-products .reforma-product-card > .wp-block-group:not(.reforma-card-image-wrap) {
	flex: 1 1 auto; display: flex; flex-direction: column;
	padding-top: var(--wp--preset--spacing--40) !important;
}
.reforma-premium-products .reforma-card-footer { margin-top: auto !important; }

/* Home Hair Loss: equal-height treatment cards; CTA anchored to bottom */
.reforma-treatment-cards .wp-block-columns.are-vertically-aligned-top { align-items: stretch !important; }
.reforma-treatment-cards .reforma-treatment-card.wp-block-column {
	display: flex !important; flex-direction: column !important;
}
.reforma-treatment-cards .reforma-treatment-card > .wp-block-group:last-child {
	flex: 1 1 auto; display: flex; flex-direction: column;
}
.reforma-treatment-cards .reforma-treatment-card .wp-block-buttons:last-child { margin-top: auto !important; }

/* Home Research Purity: em italic accent-purple; pillar card subtle shadow */
.reforma-research-purity h2 em { font-style: italic; color: var(--wp--preset--color--accent-purple); }
.reforma-pillar-card.wp-block-column {
	box-shadow: 0 1px 6px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.03);
}

/* Home News: date pill overlaid bottom-left; 16:9 images; equal-height cards */
.reforma-news-card-media--overlaid {
	position: relative; overflow: hidden;
	border-radius: var(--wp--preset--radius--small); display: block;
}
.reforma-news-card-media--overlaid .wp-block-image { margin-bottom: 0 !important; }
.reforma-news-card-media--overlaid .wp-block-image img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
	border-radius: var(--wp--preset--radius--small);
}
.reforma-news-card-media--overlaid .reforma-news-date-pill {
	position: absolute !important;
	bottom: var(--wp--preset--spacing--30) !important;
	left: var(--wp--preset--spacing--30) !important;
	margin: 0 !important;
	padding: 4px var(--wp--preset--spacing--30) !important;
	border-radius: var(--wp--preset--radius--small) !important;
	z-index: 2; pointer-events: none;
}
.reforma-news-insights .wp-block-columns.are-vertically-aligned-top { align-items: stretch !important; }
.reforma-news-card.wp-block-column { display: flex !important; flex-direction: column !important; }
.reforma-news-card > .wp-block-buttons:last-child { margin-top: auto !important; }

/* Home Contact Band: form inputs styled on green card; left photo stretches */
.reforma-contact-booking-card .reforma-booking-form__label {
	display: block; font-size: var(--wp--preset--font-size--xs);
	font-weight: 600; color: oklch(1 0 0 / 0.88);
	margin-bottom: var(--wp--preset--spacing--20);
}
.reforma-contact-booking-card .reforma-booking-form__input {
	display: block; width: 100%; box-sizing: border-box;
	background-color: oklch(1 0 0) !important;
	color: oklch(0.20 0.020 240) !important;
	border: 1px solid oklch(0.88 0.018 220) !important;
	border-radius: var(--wp--preset--radius--small) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	font-size: var(--wp--preset--font-size--sm);
}
.reforma-contact-booking-card .reforma-booking-form__input--textarea { resize: vertical; min-height: 96px; }
.reforma-contact-band-left { display: flex !important; flex-direction: column !important; }
.reforma-contact-band-left .reforma-contact-image { flex: 1 1 auto; }
.reforma-contact-band-left .reforma-contact-image img {
	width: 100%; height: 100%; min-height: 280px;
	object-fit: cover; object-position: center 30%; display: block;
}

/* Home Visionary Leadership: H2 italic display serif; section padding|70->|60 */
.reforma-visionary-leadership > .wp-block-group:first-child h2.wp-block-heading {
	font-style: italic;
	font-family: var(--wp--preset--font-family--display) !important;
}
.reforma-visionary-leadership {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}
.reforma-leadership-card .wp-block-image { margin-bottom: var(--wp--preset--spacing--40) !important; }

/* Home Logo Wall: flush 0-gap columns; square 1:1 partner photos */
.reforma-logo-wall .wp-block-columns.alignfull { gap: 0 !important; column-gap: 0 !important; }
.reforma-logo-wall .reforma-partner-col.wp-block-column { padding: 0 !important; }
.reforma-logo-wall .reforma-partner-photo img {
	display: block; width: 100%;
	aspect-ratio: 1 / 1; object-fit: cover; object-position: center center;
}

/* no motion in this wave */

/* ============================================================
   End  - Home page deep pixel precision
   ============================================================ */

/* ============================================================
   Sticky header FIX (parent template-part level)
   ============================================================
   `.reforma-site-header { position: sticky }` doesn't work because the
   immediate FSE wrapper `header.wp-block-template-part` is only as tall as
   the sticky child — no room for sticky to engage. Move sticky position
   up one level to the template-part wrapper. */

/* Reset the inner header — it was being held in place by sticky but the
   parent restricts its scroll range to zero. */
.reforma-site-header {
	position: static !important;
}

/* Apply sticky to the FSE template-part wrapper instead. */
body > .wp-site-blocks > header.wp-block-template-part:first-child,
.wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
	background: var(--wp--preset--color--surface, oklch(97.8% 0.011 242));
	/*  NO backdrop-filter — it makes the header a containing block for
	   position:fixed, which trapped the mobile nav overlay at header height.
	   Use a solid sticky bg instead (overlay now fills the viewport). */
	transition: box-shadow 200ms cubic-bezier(0.25, 1, 0.5, 1), background 200ms ease;
}
.wp-site-blocks > header.wp-block-template-part.is-scrolled {
	background: var(--wp--preset--color--surface, oklch(98% 0.006 240));
	box-shadow: 0 2px 12px oklch(0% 0 0 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part { transition: none; }
}

/* ============================================================
   Hero fills viewport (above-the-fold) + zero gaps
   ============================================================
   User: hero must span from under the sticky header to the bottom of the
   viewport — full above-the-fold, no gap above/below, nothing else visible
   without scrolling. Header is 64px tall. */

/* Kill the gap ABOVE the header and BETWEEN header and hero. */
.wp-site-blocks {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.wp-site-blocks > header.wp-block-template-part {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.reforma-hero-band {
	margin-top: 0 !important;
}

/* Hero fills the viewport height minus the 64px sticky header. */
.reforma-hero-band {
	min-height: calc(100vh - 64px) !important;
	display: flex !important;
	align-items: stretch !important;
}
.reforma-hero-band > .wp-block-columns {
	min-height: calc(100vh - 64px) !important;
	width: 100%;
	margin-block: 0 !important;
	align-items: stretch !important;
}

/* Right image column + image fill the full hero height (no floating gap). */
.reforma-hero-image-col {
	min-height: calc(100vh - 64px) !important;
	align-self: stretch !important;
}
.reforma-hero-image-col .wp-block-image,
.reforma-hero-image-col figure {
	height: 100% !important;
	min-height: calc(100vh - 64px) !important;
	margin: 0 !important;
}
.reforma-hero-image-col img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover !important;
	min-height: calc(100vh - 64px) !important;
}

/* Left content column vertically centered within the tall hero. */
.reforma-hero-band > .wp-block-columns > .wp-block-column:first-child {
	align-self: center !important;
}

/* Mobile: stack — hero can exceed viewport; cap image height so it doesn't dominate. */
@media (max-width: 781px) {
	.reforma-hero-band,
	.reforma-hero-band > .wp-block-columns,
	.reforma-hero-image-col,
	.reforma-hero-image-col .wp-block-image,
	.reforma-hero-image-col figure,
	.reforma-hero-image-col img {
		min-height: 0 !important;
	}
	.reforma-hero-image-col img { height: 320px !important; }
}

/*  — Kill the 24px block-gap margin on <main> separating header from hero.
   WP applies it via margin-block-start (block-gap between wp-site-blocks children),
   so zero BOTH margin-top and margin-block-start. */
.wp-site-blocks > main,
#reforma-main,
main.wp-block-group {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* ============================================================
   About page PUSH-MORE deep pass
   Fixes: stat chip key mismatch, image binding fallback guard,
   hero height / image proportion, section bg rhythm, value card
   icon sizing, who-we-are section treatment.
   CSS-only. PHP pattern + plugin changes in this wave.
   OKLCH tokens. Spacing var(--wp--preset--spacing--*) only.
   ============================================================ */

/* ── 1. HERO — minimum height lift ──
   At 1920px the hero renders ~440px tall. Push to a more proportioned
   540px minimum so the right-photo and the left-text column breathe. */
.reforma-about-hero {
	min-height: 540px;
}

/* ── 1b. HERO — left column padding scale-up ──
   spacing|70 (48px) top/bottom leaves too little vertical air at 1920px.
   Push to spacing|80 (64px) top+bottom at desktop. Override 's
   spacing|70 !important on the first-child column. */
.reforma-about-hero .wp-block-columns > .wp-block-column:first-child {
	padding-top: var(--wp--preset--spacing--80) !important;
	padding-bottom: var(--wp--preset--spacing--80) !important;
}

/* ── 1c. HERO — image col: show fallback when binding returns broken URL ──
   When ACF image binding resolves id=0, img src becomes http://0.0.0.0/
   and naturalWidth=0 (broken). Use object-position + a bg-color floor
   so the col always shows something rather than white blank.
   The actual fallback png is already in the <img> src attribute from PHP. */
.reforma-about-hero-image-col {
	background-color: oklch(95.5% 0.015 220);
}

/* ── 2. WHO WE ARE — image col: fallback bg when binding is unset ──
   who_we_are_image ACF field not yet seeded on VPS. The binding source
   returns null → img src resolves to "http://0" → browser renders alt text.
   Guard: position:relative required for ::before pseudo to position correctly.
   background-color provides a tinted floor when image is unavailable.
   ::before pseudo shows the known fallback figma asset so the col has a visual. */
.reforma-about-who-image-col {
	background-color: transparent;
	position: relative;
	overflow: hidden;
}

.reforma-about-who-image-col > * {
	position: relative;
	z-index: 1;
}

/* ── 2b. WHO WE ARE — stat chip row: ensure chips display correctly ──
   Stat chips now bound to stat_1-4 keys which ARE seeded. Remove old
   min-height 80px guard (it was masking the empty-chip problem).
   Override to auto so content-sized chips look natural. */
.reforma-about-who-we-are .reforma-rooted-stat-chip {
	min-height: auto !important;
}

/* ── 2c. WHO WE ARE — stat chip consistent height ──
   With real values, chips may render at varying heights due to label
   line-wrap. Add 88px min-height so the 4-chip row aligns at its base. */
.reforma-about-who-we-are .reforma-rooted-stat-chip {
	min-height: 88px;
}

/* ── 3. OUR COMPANY — bg distinction from who-we-are ──
   who-we-are is now surface (oklch~97.8%). our-company is page (white).
   The transition between them needs a hairline guard — already present
   from  Reinforce here with additional bottom hairline so
   company section has a crisp floor before mission green band. */
.reforma-about-our-company {
	border-bottom: 1px solid oklch(88% 0.015 240 / 0.35);
}

/* ── 4. VALUES — value card border-radius reinforcement ──
   Cards already have border-radius 0 20px 0 0 from  CSS.
   Ensure the border + shadow system looks deliberate, not AI-default.
   Add a 1px surface-tint border + subtle shadow to lift cards off bg. */
.reforma-value-card {
	border: 1px solid oklch(90% 0.015 240 / 0.6) !important;
	box-shadow: 0 1px 4px oklch(50% 0.03 240 / 0.06), 0 3px 12px oklch(50% 0.03 240 / 0.04);
}

/* ── 5. BRANDS — logo row visual weight ──
   Brand logos render as text placeholders at very light opacity. Ensure
   the placeholder text reads at full opacity so the strip has weight. */
.reforma-about-partner-logo .wp-block-paragraph {
	opacity: 1 !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink) !important;
}

/* ── 6. WHO WE ARE — hide broken img alt text ──
   When ACF binding resolves to id=0, img src attribute value is "http://0"
   (raw) which the browser resolves to http://0.0.0.0/ in JS but stays as
   "http://0" in CSS [src] attribute selectors.
   Set font-size:0 to suppress alt text rendering. Opacity:0 to hide the
   broken img chrome. The ::before background image already provides visual. */
.reforma-about-who-image-col .reforma-about-who-image img[src="http://0"],
.reforma-about-who-image-col .reforma-about-who-image img[src="http://0.0.0.0/"],
.reforma-about-who-image-col .reforma-about-who-image img[src=""] {
	opacity: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
}

/* ── 6b. HERO image fallback guard ── */
.reforma-about-hero-image img[src="http://0"],
.reforma-about-hero-image img[src="http://0.0.0.0/"],
.reforma-about-hero-image img[src=""] {
	opacity: 0 !important;
}

/* ── Mobile adaptations ── */
@media (max-width: 768px) {
	.reforma-about-hero {
		min-height: 0;
	}
	.reforma-about-hero .wp-block-columns > .wp-block-column:first-child {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
	.reforma-about-who-image-col {
		min-height: 300px;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	/* No new motion rules in  */
}

/* ============================================================
   End About page PUSH-MORE deep pass
   ============================================================ */

/* ============================================================
   Shop PUSH-MORE deep pass (2026-05-20)
   Source: reports/wave-32/ composites vs figma-cache/2026-05-19-w19/products-w19.png
   Gaps closed:
   1. Stat boxes: constrain width so they don't stretch across full 52% column.
   2. Card image area: fixed-height image wrap so images don't balloon.
   3. Filter bar: add top hairline to match Figma band borders.
   4. CTA button: stronger corner override (0 20px 0 0) — pill from PHP block attr
      was winning over  guard. Add specificity to beat it.
   5. Card body: flex-grow on card body with min-height to keep equal-height cards
      even when text varies (category/title/desc now hardcoded — no ACF gaps).
   6. Card hover state: subtle lift on hover matching Figma interaction spec.
   OKLCH only. Spacing slugs 10-90 only. No new block attrs.
   ============================================================ */

/* ── 1. Stat boxes — constrain width, don't stretch.
   Figma: 4 compact boxes, each roughly 100-120px wide in a left-justified row.
    set flex-basis:0 flex-grow:1 which fills the entire 52% column.
   Override: auto width + text-align center + max-width cap. */
.reforma-products-hero .reforma-stat-box.wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	min-width: 80px;
	max-width: 120px;
}

/* Stat box inner columns row: don't stretch to full width.
   Set justify-content flex-start so boxes cluster to the left. */
.reforma-products-hero .wp-block-columns:last-child {
	justify-content: flex-start !important;
	flex-wrap: wrap;
}

/* ── 2. Card image wrap — fixed height prevents image balloon.
   Figma: card image area is ~220px at 1920px layout (4-col grid with 1200px container).
   No border.radius JSON attr on image (avoids has-custom-border trap) — top corners
   handled by existing  .reforma-card-image-wrap img CSS.
   overflow:hidden on the wrap clips the image cleanly. */
.reforma-card-image-wrap.wp-block-group {
	height: 220px;
	overflow: hidden;
}
.reforma-card-image-wrap .wp-block-image,
.reforma-card-image-wrap figure {
	height: 100%;
	margin: 0;
}
.reforma-card-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── 3. Filter bar — top hairline.
   Figma shows filter bar bounded by hairlines above and below.
    added bottom hairline. Add top to complete the band. */
.reforma-product-filter-bar.wp-block-group {
	border-top: 1px solid oklch(88% 0.010 240);
}

/* ── 4. CTA contact button — stronger corner specificity.
   PHP block emits border-radius:999px inline on the <a> element.
    targeted .reforma-cta-contact-btn .wp-block-button__link
   but inline style beats class selector. Use !important with the
   same selector to win the cascade. */
.reforma-products-cta .reforma-cta-contact-btn .wp-block-button__link,
.reforma-products-cta .reforma-cta-contact-btn > .wp-block-button__link {
	border-radius: 0 20px 0 0 !important;
}

/* ── 5. Card equal-height — ensure flex column with grow on card body.
   Reinforces  rules. Card body min-height prevents collapse when
   ACF bindings were empty (now fixed by PHP — kept as safety guard). */
.reforma-product-grid .wp-block-columns.alignwide > .reforma-product-card.wp-block-column {
	display: flex !important;
	flex-direction: column !important;
}
.reforma-product-card.wp-block-column > .reforma-product-card-body.wp-block-group {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
}
.reforma-product-card-body.wp-block-group > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* ── 6. Card hover — subtle lift.
   Figma interaction: card rises 4px with shadow on hover.
   Uses transform (compositor-only) + box-shadow (max 2 layers). */
.reforma-product-card.wp-block-column {
	transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
	            box-shadow 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
	will-change: transform;
}
.reforma-product-card.wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px oklch(56.4% 0.131 248 / 0.12),
	            0 2px 8px oklch(0% 0 0 / 0.06);
}

/* ── Mobile: restore full-width stat boxes + reset fixed card-image-height. */
@media (max-width: 768px) {
	.reforma-products-hero .reforma-stat-box.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		max-width: none;
	}
	.reforma-card-image-wrap.wp-block-group {
		height: 200px;
	}
	.reforma-cta-contact-btn .wp-block-button__link {
		border-radius: 999px !important;
	}
}

/* ── prefers-reduced-motion: disable card hover lift. */
@media (prefers-reduced-motion: reduce) {
	.reforma-product-card.wp-block-column {
		transition: none;
		will-change: auto;
	}
	.reforma-product-card.wp-block-column:hover {
		transform: none;
		box-shadow: 0 0 0 2px oklch(56.4% 0.131 248 / 0.15);
	}
}

/* ============================================================
   End  Shop PUSH-MORE deep pass
   ============================================================ */

/* ============================================================
   Article page deep pass (PUSH-MORE)
   2026-05-20
   Source: reports/wave-32/article-live.png vs
           figma-cache/2026-05-19-w19/news-article-w19.png
   Gaps closed:
    1. Hero: brand-gold fallback bg — without a featured image the
       wp-block-cover bg is transparent; hero appeared to be only
       the 271px gradient inner group. Solid brand-gold bg restores
       the full 580px hero presence + makes the 100px TL radius visible.
    2. Hero: gradient extends full hero height (bottom-to-top linear
       gradient on the cover itself so text band bottom always has
       a dark field regardless of featured-image state).
    3. Hero: constrain inner container width so post-title (1092px
       measured) cannot overflow the gradient panel.
    4. Sidebar column: stretch to full body-column height so the
       sticky sidebar can scroll within the column bounds.
    5. Sidebar sticky: reinforce top offset = header (64px) + spacing|30
       (12px) = 76px for comfortable gap below sticky header.
    6. Sidebar card widths: constrain card widths so social-links row
       doesn't overflow on narrow sidebar (312px).
    7. Article body: reinforce paragraph font-size md + 1.7 line-height
       ( rule; guard against cascade reset).
    8. Article body: h2 color → brand-gold (matches Figma navy headings).
    9. Stats band: reinforce top/bottom 1px hairlines and column dividers.
   10. Back-CTA: H2 font-size 2xl (guard from any wave reset).
   CSS-only. No PHP markup changes. No border-left accent stripes on
   cards. No gradient text. OKLCH tokens throughout.
   ============================================================ */

/* ── 1 + 2. Article hero: brand-gold bg + full-height gradient overlay ──
   Without a featured image the core/cover block bg is transparent
   (rgba(0,0,0,0) computed). Adding brand-gold as the base color gives
   the hero its expected solid presence at all times.
   The existing inner-container gradient (left opaque → right transparent)
   then reads as "darker blue left / lighter blue right" which is the
   correct Figma treatment even when no photo is loaded.
   overflow:hidden is required so the 100px TL border-radius visually
   clips the content (the inline style sets the radius but without
   overflow:hidden child content overflows the corner). */
.reforma-article-hero.wp-block-cover {
	background-color: var(--wp--preset--color--brand-gold) !important;
	overflow: hidden !important;
}

/* ── 3. Hero inner container: cap title width ──
   Measured title width: 1092px within the constrained inner container.
   The cover layout:constrained sets contentSize to theme.json 1200px,
   but at 1920px viewport the inner container is wider than the gradient
   group (which is padding-bounded). Cap the inner container so text
   stays within the gradient band and doesn't overflow into the
   transparent right side. */
.reforma-article-hero .wp-block-cover__inner-container {
	max-width: 900px !important;
}

/* ── 4. Sidebar column: stretch to body column height ──
   WP columns with verticalAlignment:top sets each column's height to
   its content. The body col is 1492px but the sidebar col collapses to
   596px (3 cards). Without a taller column, CSS sticky scrolls the
   sidebar column off-screen before the user finishes reading the body.
   Setting align-self:stretch + height:100% on the sidebar column makes
   it as tall as the row (= tallest sibling = body col). */
.wp-block-group.alignwide > .wp-block-columns.are-vertically-aligned-top
> .wp-block-column:last-child {
	align-self: stretch !important;
	height: 100% !important;
}

/* ── 5. Sidebar sticky: reliable top offset ──
   Previous waves set top:96px. Header is 64px; additional 12px gap
   (spacing|30) gives comfortable breathing room below the nav bar.
   Using 76px. Also cap max-height so sticky sidebar doesn't overflow
   the viewport when all 3 cards are taller than the viewport. */
.reforma-article-sidebar {
	position: sticky !important;
	top: 76px !important;
	max-height: calc(100vh - 96px);
	overflow-y: auto;
	scrollbar-width: none; /* hide scrollbar in sidebar — no visual noise */
}
.reforma-article-sidebar::-webkit-scrollbar {
	display: none;
}

/* ── 6. Sidebar card overflow guard ──
   Social links block in the Share card can produce a wider row than
   the 312px sidebar column allows. Prevent horizontal scroll. */
.reforma-sidebar-card--share .wp-block-social-links {
	flex-wrap: wrap !important;
}

/* ── 7. Article body paragraph typography reinforce ──
    set font-size md + line-height 1.7. Guard against later
   cascade resets ( added a paragraph margin-bottom rule that
   may not carry the font-size). */
.reforma-article-body .wp-block-post-content p {
	font-size: var(--wp--preset--font-size--md) !important;
	line-height: 1.7 !important;
}

/* ── 8. Article body H2 → brand-gold ──
   Figma article body headings are the dark brand-gold navy colour,
   not pure ink.  set them to --color--ink; update to brand-gold
   for stronger section signposting that matches Figma. H3 remains ink
   (sub-section labels need less emphasis). */
.reforma-article-body .wp-block-post-content h2 {
	color: var(--wp--preset--color--brand-gold) !important;
}

/* ── 9. Stats band: hairline top/bottom + column dividers reinforce ──
    added these but the selector specificity can be overridden
   by later waves. Reinforce without !important where possible. */
.reforma-article-stats {
	border-top: 1px solid oklch(85% 0.01 240 / 0.6) !important;
	border-bottom: 1px solid oklch(85% 0.01 240 / 0.6) !important;
}

/* ── 10. Back-CTA H2 font-size guard ──
    updated markup to fontSize:2xl; CSS guard so any block-level
   default doesn't reset it. */
.reforma-article-back-cta h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--2xl) !important;
}

/* ── Responsive adaptations ── */
@media (max-width: 1024px) {
	/* On tablet, relax the inner-container cap. */
	.reforma-article-hero .wp-block-cover__inner-container {
		max-width: 700px !important;
	}
}
@media (max-width: 768px) {
	/* Mobile: hero sidebar becomes unstickied (stacked columns). */
	.wp-block-group.alignwide > .wp-block-columns.are-vertically-aligned-top
	> .wp-block-column:last-child {
		height: auto !important;
		align-self: auto !important;
	}
	.reforma-article-sidebar {
		position: relative !important;
		top: auto !important;
		max-height: none !important;
		overflow-y: visible !important;
	}
	/* Hero inner container: full width on mobile. */
	.reforma-article-hero .wp-block-cover__inner-container {
		max-width: 100% !important;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-article-sidebar {
		scroll-behavior: auto;
	}
}

/* ============================================================
   End  article deep pass
   ============================================================ */

/* ============================================================
   Booking page deep pass (PUSH-MORE)
   2026-05-20
   Source: live vs figma-cache/2026-05-19-w19/order-page-w19.png
   Viewport: 1920px

   Primary fix: booking-summary-sidebar.php — trust_stat/trust_label
   removed from Block Bindings (ACF empty → invisible content bug).
   PHP conditional fallback now renders 450,000+ and
   "Customers trust Reforma" when ACF fields are unpopulated.

   CSS gaps closed (8 surgical rules):
    1. Trust card vert padding raised spacing|40→|60 (16→32px).
    2. Trust card paragraph margin guard — restore spacing|20 gaps.
    3. Card header vert padding raised spacing|30→|40 (12→16px).
    4. Plan image corner: 8→12px radius.
    5. Plan pricing alignment: flex baseline.
    6. Benefits list inter-row gap: spacing|30→|20 (12→8px).
    7. Sidebar sticky-top: 32px→80px (clear sticky header + gap).
    8. Input vert padding: 12px→14px restore ( override).

   CONSTRAINTS: OKLCH only. Spacing slugs {10,20,30,40,50,60,70,80,90}.
   /nonce/honeypot untouched. No theme.json edits.
   ============================================================ */

/* ── 1. Trust card: generous vert padding so 450,000+ stat has room. */
.reforma-trust-card {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* ── 2. Trust card paragraph margin guards — restore 8px gaps
   between the stat, label, and  line.  zeroed all
   paragraph margins inside trust-card; this restores targeted gaps. */
.reforma-trust-card .has-4xl-font-size.wp-block-paragraph {
	margin-bottom: var(--wp--preset--spacing--20) !important;
}
.reforma-trust-card .has-base-font-size.wp-block-paragraph {
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

/* ── 3. Card header vert padding: 12px→16px.
   Figma "Personal Information" header band is ~44px total.
   spacing|40 (16px) × 2 + ~12px text = 44px matches Figma. */
.reforma-card-header {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── 4. Plan image: softer corner (8→12px).
   Figma product thumbnail has a 10-12px radius. */
.reforma-plan-img img {
	border-radius: 12px !important;
	object-fit: cover;
}

/* ── 5. Plan pricing: baseline alignment for strikethrough + current price. */
.reforma-plan-pricing {
	align-items: flex-end;
}
.reforma-plan-price-current-wrap {
	align-items: baseline;
}

/* ── 6. Benefits list: tighten inter-row gap from 12→8px.
   Figma shows compact benefit rows with ~8px between them. */
.reforma-benefits-list {
	gap: var(--wp--preset--spacing--20) !important;
}

/* ── 7. Sidebar sticky top: raise to 80px to clear sticky header.
   Previous spacing|60 (32px) clips behind the 64px sticky header
   on scroll. 80px = 64px header + 16px gap. */
@media (min-width: 769px) {
	.reforma-booking-sidebar {
		top: 80px !important;
	}
}

/* ── 8. Input vert padding: restore 14px top/bottom.
    card-body padding override compressed inputs to 12px.
   Base rule has 14px — reinstate for Figma-matched ~51px input height. */
.reforma-booking-form--sections .reforma-input {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

/* ── Mobile: no additional overrides needed in  ── */

/* ── Reduced motion: no new animation rules in  booking. ── */

/* ============================================================
   End  Booking deep pass
   ============================================================ */

/* premium-products tabs/panels/cards */

/* ── Tab panels: only the active one is shown. Toggled by the wp_footer
   tab JS in functions.php (is-active class). Default = hidden. ── */
.reforma-product-panel {
	display: none;
}
.reforma-product-panel.is-active {
	display: block;
}

/* ── Two intro CTAs (Browse Cosmetics solid / View Wellness outline):
   left-aligned, side by side, asymmetric top-right corner. The outline
   variant keeps a transparent fill with a brand-gold border + text. ── */
.reforma-product-ctas.wp-block-buttons {
	flex-wrap: wrap;
	align-items: stretch;
}
.reforma-product-ctas .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	border-style: solid;
	border-color: var(--wp--preset--color--brand-gold) !important;
}
.reforma-product-ctas .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.reforma-product-ctas .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ── Tab active state ( keeps the green underline rail from ;
   the JS now actually swaps which tab carries .reforma-product-tab--active). ── */
.reforma-product-tab > .wp-block-button__link {
	cursor: pointer;
}

/* ── Per-card "VIEW DETAILS →" link: brand-gold (was green pre-). ── */
.reforma-premium-products .reforma-button-link-flush > .wp-block-button__link {
	color: var(--wp--preset--color--brand-gold) !important;
}

/* ── Plain card arrow (cards 1-3): brand-gold glyph, no box, no fill. ── */
.reforma-premium-products .reforma-card-arrow:not(.reforma-card-arrow--boxed) > .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--brand-gold) !important;
	width: auto;
	height: auto;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.25rem;
	line-height: 1;
}

/* ── Boxed card arrow (card 0 / Bestseller): filled brand-gold square,
   40×40, asymmetric top-right corner (0 20px 0 0). ── */
.reforma-premium-products .reforma-card-arrow--boxed > .wp-block-button__link {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	font-size: 1rem;
	line-height: 1;
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 0 20px 0 0 !important;
}

/* ── Mobile: intro CTAs stack full-width for easy tapping. ── */
@media (max-width: 600px) {
	.reforma-product-ctas.wp-block-buttons {
		flex-direction: column;
	}
	.reforma-product-ctas .wp-block-button {
		width: 100%;
	}
	.reforma-product-ctas .wp-block-button > .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* End  premium-products */

/* rooted "Who We Are" product-bottles overlay (home) ──────────────
   Figma: skincare product cluster sits in FRONT of the team photo, centered,
   tucked at the bottom and extending BELOW the photo edge onto the page bg. */
.reforma-rooted-image-col {
	position: relative;
}
.reforma-rooted-image-col .reforma-rooted-image {
	margin-bottom: 0;
}
.reforma-rooted-image-col .reforma-rooted-image img {
	border-radius: 14px 14px 14px 110px; /*  large curve on BOTTOM-LEFT (was bottom-right) */
}
.reforma-rooted-image-col .reforma-rooted-bottles {
	position: absolute;
	left: 50%;
	bottom: -82px; /*  sit lower, extend further below the photo */
	transform: translateX(-50%);
	width: 80%;
	max-width: 470px;
	margin: 0;
	z-index: 2;
	pointer-events: none;
}
.reforma-rooted-image-col .reforma-rooted-bottles img {
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 781px) {
	.reforma-rooted-image-col .reforma-rooted-bottles {
		position: static;
		transform: none;
		width: 74%;
		margin: -28px auto 0;
	}
}
/* End  rooted bottles */

/* treatment green-band plan chips (right column of Complete Plan) ──
   Figma: 4 rounded pill chips, lighter-green fill, leading dot, white text. */
.reforma-plan-chip {
	background: oklch(100% 0 0 / 0.12);
	border-radius: 999px;
	padding: 0.85rem 1.5rem !important;
	width: 300px;
	max-width: 100%;
	display: flex;
	align-items: center;
}
.reforma-plan-chip::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: oklch(86% 0.13 152);
	margin-right: 0.7rem;
	flex-shrink: 0;
}
@media (max-width: 781px) {
	.reforma-plan-chip { width: 100%; }
}
/* End  treatment plan chips */

/* footer: brand row (logo + tagline beside it) + Schedule button must
   clear the navy ::after decoration (was overlapping it). */
.reforma-footer-brand {
	align-items: flex-start;
}
.reforma-footer-brand .reforma-footer-logo {
	flex-shrink: 0;
	margin: 0;
}
@media (min-width: 900px) {
	/* push the Schedule button left of the ~18vw-wide navy svg corner */
	.reforma-footer-schedule-buttons {
		margin-right: clamp(150px, 19vw, 360px);
	}
}
/* End  footer */

/* product + treatment cards: rounded edges, per-card hover arrow,
   horizontal carousel (scroll-snap + Prev/Next), 2-up treatment buttons.
   APPEND-ONLY: this block overrides earlier  arrow + card rules; do not
   edit the earlier blocks. ============================================== */

/* ── 1. Rounded card edges INCLUDING the full-bleed image. The base rule
   already sets overflow:hidden + a radius block-attr; reinforce here so the
   image's top corners clip to the card radius even on the carousel track. ── */
.reforma-premium-products .reforma-product-card.wp-block-column,
.reforma-treatment-cards .reforma-treatment-card.wp-block-column {
	overflow: hidden;
	border-radius: 1rem; /* matches preset radius "medium" (1rem) */
}
/* Keep the Figma asymmetric accent on the bestseller (card 0) corners. */
.reforma-premium-products .reforma-product-card--asymmetric.wp-block-column {
	border-top-left-radius: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.reforma-premium-products .reforma-product-card-image img,
.reforma-treatment-cards .reforma-treatment-card-image img {
	display: block;
	width: 100%;
}

/* ── 2. Per-card hover arrow.
   DEFAULT: every card's arrow is a plain brand-gold "→" (no box, no fill).
   HOVER (on the WHOLE card): that card's arrow becomes a filled brand-gold
   square with the asymmetric top-right corner + white glyph. The earlier
    .reforma-card-arrow--boxed always-on state is no longer emitted by
   the markup (all cards ship plain); this rule recreates the box on hover. ── */
.reforma-premium-products .reforma-card-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent !important;
	color: var(--wp--preset--color--brand-gold) !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: background-color 180ms ease, color 180ms ease, border-radius 180ms ease;
}
.reforma-premium-products .reforma-product-card.wp-block-column:hover .reforma-card-arrow > .wp-block-button__link,
.reforma-premium-products .reforma-card-arrow > .wp-block-button__link:hover,
.reforma-premium-products .reforma-card-arrow > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 0 20px 0 0 !important;
}

/* ── 3. Carousel track. Each tab panel's columns row becomes a horizontal
   scroll-snap carousel: ~4 cards visible at 1920, swipe/scroll on touch,
   fixed-width cards. Overrides the earlier stretch/stack column behavior. ── */
.reforma-premium-products .reforma-product-carousel.wp-block-columns {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-padding-left: 2px;
	gap: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge */
}
.reforma-premium-products .reforma-product-carousel.wp-block-columns::-webkit-scrollbar {
	display: none; /* Chrome / Safari */
}
.reforma-premium-products .reforma-product-carousel > .reforma-product-card.wp-block-column {
	flex: 0 0 clamp(260px, 23%, 300px);
	width: clamp(260px, 23%, 300px);
	max-width: clamp(260px, 23%, 300px);
	scroll-snap-align: start;
}

/* ── 3b. Prev/Next nav: circular brand-gold buttons, right-aligned above the
   track. Hidden glyph box; the JS scrolls the active panel's track. ── */
.reforma-carousel-nav.wp-block-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
}
.reforma-carousel-nav .wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	font-size: 1.25rem;
	line-height: 1;
	border-radius: 50% !important;
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	transition: opacity 160ms ease, transform 160ms ease;
}
.reforma-carousel-nav .wp-block-button > .wp-block-button__link:hover,
.reforma-carousel-nav .wp-block-button > .wp-block-button__link:focus-visible {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ── 4. Treatment cards: 2 buttons side by side on ONE row (flex nowrap).
   The card's last wp:buttons holds Book Now + Details; keep them in a single
   horizontal row and let them share the card width without wrapping. ── */
.reforma-treatment-cards .reforma-treatment-card .wp-block-buttons {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}
.reforma-treatment-cards .reforma-treatment-card .wp-block-buttons > .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
}
.reforma-treatment-cards .reforma-treatment-card .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}
/* Treatment card hover lift/shadow (parity with product cards). */
.reforma-treatment-cards .reforma-treatment-card.wp-block-column {
	transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
	            box-shadow 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reforma-treatment-cards .reforma-treatment-card.wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px oklch(56.4% 0.131 248 / 0.12),
	            0 2px 8px oklch(0% 0 0 / 0.06);
}

/* ── Mobile: carousel cards a touch wider so they read on small screens;
   keep the native horizontal swipe. Stacking is intentionally disabled here
   (carousel stays horizontal) so the swipe affordance is preserved. ── */
@media (max-width: 781px) {
	.reforma-premium-products .reforma-product-carousel > .reforma-product-card.wp-block-column {
		flex-basis: 78%;
		width: 78%;
		max-width: 78%;
	}
}

/* ── Reduced motion: disable hover lift + smooth-scroll easing. ── */
@media (prefers-reduced-motion: reduce) {
	.reforma-treatment-cards .reforma-treatment-card.wp-block-column {
		transition: none;
	}
	.reforma-treatment-cards .reforma-treatment-card.wp-block-column:hover {
		transform: none;
	}
	.reforma-premium-products .reforma-card-arrow > .wp-block-button__link {
		transition: none;
	}
}
/* End  cards + carousel */

/* footer button position (desktop) + full mobile-footer rebuild ──── */
@media (min-width: 900px) {
	.reforma-footer-schedule-buttons {
		margin-right: clamp(170px, 18vw, 340px); /* matches ::after svg width so button sits just left of it */
		align-self: flex-start;
	}
}
/* Mobile: brand row STACKS (logo over tagline, full width), columns tighten,
   button resets its desktop offset. Fixes the squished-tagline garbage. */
@media (max-width: 899px) {
	.reforma-footer-brand {
		flex-direction: column !important;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}
	.reforma-footer-brand p { max-width: 100% !important; }
	.reforma-footer-schedule-buttons {
		margin-right: 0 !important;
		margin-top: var(--wp--preset--spacing--40);
	}
}
@media (max-width: 781px) {
	.reforma-site-footer .wp-block-columns { gap: var(--wp--preset--spacing--40) !important; }
	.reforma-footer-pages-overflow { margin-top: calc(-1 * var(--wp--preset--spacing--40)); }
	.reforma-site-footer .wp-block-group[style*="justify-content:flex-end"] { justify-content: flex-start !important; }
}
/* End  footer */

/* header: WooCommerce auto-hooks (Block Hooks API) inject a mini-cart
   + customer-account into the FSE header. User wants the CART removed and the
   ACCOUNT icon moved to the far right, after the email. Pure CSS (no PHP/DB). */
.reforma-site-header .wp-block-woocommerce-mini-cart,
.reforma-site-header .wc-block-mini-cart {
	display: none !important;
}
/* flex order: logo(0) · nav(0) · email · account(last) */
.reforma-site-header .reforma-header-email { order: 8; }
.reforma-site-header .wp-block-woocommerce-customer-account { order: 9; margin-left: var(--wp--preset--spacing--20); }
/* End  header */

/* polish round: footer (center brand row + mobile accordion + svg on
   mobile), product/treatment cards (round all 4 corners + unify button treatment),
   rooted "Who We Are" bottles bigger/lower, header mobile (logo shows + email
   hidden + account visible). APPEND-ONLY. Overrides specific earlier rules where
   noted; earlier blocks are left intact. ============================== */

/* ── 1a. FOOTER desktop: vertically CENTER the logo + tagline in the brand row
   (was flex-start in ). Only on desktop — mobile is centered separately. */
@media (min-width: 900px) {
	.reforma-footer-brand {
		align-items: center; /* overrides  align-items:flex-start */
	}
	/* Push the Schedule button further LEFT so it never overlaps the navy svg
	   (overrides the  margin-right). */
	/* Absolute top-right placement: guarantees the button stays on the top row,
	   clears the navy svg (right ≥ svg width ~335px), and never wraps below. */
	/* Force the brand|button top row onto ONE line (no wrap), brand shrinks if
	   needed, button stays top-right and clears the ~335px navy svg. */
	.reforma-site-footer > .wp-block-group.alignwide:first-of-type {
		flex-wrap: nowrap !important;
	}
	.reforma-footer-brand {
		flex: 0 1 auto;
		min-width: 0;
	}
	.reforma-site-footer .reforma-footer-schedule-buttons {
		flex: 0 0 auto;
		margin-right: clamp(24px, 2.5vw, 50px) !important; /* nowrap keeps it on the row; small gap sits it just left of the svg */
		align-self: flex-start;
	}
}

/* ── 1b. FOOTER mobile (≤899px): center everything + collapse columns into a
   tappable accordion. Desktop stays fully expanded (rules below scoped to
   ≤899px only). The navy svg ::after is RE-SHOWN here ( hid it <640). */
@media (max-width: 899px) {
	/* Center the whole footer content stack. */
	.reforma-site-footer { text-align: center; }
	.reforma-footer-brand {
		align-items: center !important;
		text-align: center;
	}
	.reforma-footer-brand p { margin-left: auto; margin-right: auto; }
	.reforma-footer-logo a { margin-left: auto; margin-right: auto; }
	.reforma-footer-schedule-buttons {
		justify-content: center;
		align-self: center !important;
	}
	/* Bottom row (copyright + Terms/Privacy): stack + center. */
	.reforma-site-footer .wp-block-group.alignwide:last-child {
		justify-content: center !important;
		text-align: center;
	}

	/* Accordion: each column heading becomes a tappable toggle; its link list is
	   collapsed by default and revealed via .is-open (set by the JS). A chevron
	   pseudo-element rotates on open. The Pages column ALSO controls the adjacent
	   pages-overflow list (revealed together). */
	.reforma-footer-col {
		flex-basis: 100% !important;
		width: 100% !important;
		text-align: left;
		border-top: 1px solid oklch(100% 0 0 / 0.14);
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}
	.reforma-footer-col-heading {
		position: relative;
		cursor: pointer;
		margin-bottom: 0 !important;
		padding-right: 2rem;
		-webkit-tap-highlight-color: transparent;
	}
	.reforma-footer-col-heading::after {
		content: "";
		position: absolute;
		right: 0.25rem;
		top: 50%;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--wp--preset--color--page);
		border-bottom: 2px solid var(--wp--preset--color--page);
		transform: translateY(-65%) rotate(45deg);
		transition: transform 220ms ease;
		pointer-events: none;
	}
	.reforma-footer-col.is-open .reforma-footer-col-heading::after {
		transform: translateY(-35%) rotate(225deg);
	}
	/* Collapse the link lists: max-height transition for a smooth reveal. */
	.reforma-footer-col .reforma-footer-links {
		overflow: hidden;
		max-height: 0;
		margin-top: 0 !important;
		opacity: 0;
		transition: max-height 280ms ease, opacity 220ms ease, margin-top 220ms ease;
	}
	.reforma-footer-col.is-open .reforma-footer-links {
		max-height: 420px;
		opacity: 1;
		margin-top: var(--wp--preset--spacing--30) !important;
	}
	/* Pages-overflow list belongs to the Pages accordion: hidden unless the
	   Pages column is open. The overflow column itself carries no heading, so
	   drop its top-padding offset + border on mobile. */
	.reforma-footer-pages-overflow {
		flex-basis: 100% !important;
		width: 100% !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 280ms ease, opacity 220ms ease;
	}
	.reforma-footer-pages-overflow.is-open {
		max-height: 320px;
		opacity: 1;
	}
	.reforma-footer-pages-overflow .reforma-footer-links { text-align: left; }
	.reforma-footer-social-list li > a { justify-content: flex-start; }

	/* Re-show the navy svg decoration on mobile ( set display:none <640).
	   Scaled down + anchored top-right so it stays a subtle accent. */
	.reforma-site-footer::after {
		display: block !important;
		width: clamp(110px, 34vw, 180px);
		height: clamp(180px, 56vw, 320px);
		opacity: 0.30;
	}
}

/* ── 2. PRODUCT + TREATMENT CARDS: round on ALL 4 corners.  rounds both
   card types to 1rem but then carved an asymmetric (top-right-only) corner on the
   bestseller card — overriding that here so EVERY card is rounded on all 4 sides
   with the image clipped (overflow:hidden already set in ). ── */
.reforma-premium-products .reforma-product-card--asymmetric.wp-block-column {
	border-radius: 1rem !important; /* override  asymmetric carve — all 4 corners */
}
.reforma-premium-products .reforma-product-card.wp-block-column,
.reforma-treatment-cards .reforma-treatment-card.wp-block-column {
	overflow: hidden;
	border-radius: 1rem;
}
.reforma-premium-products .reforma-product-card-image img,
.reforma-treatment-cards .reforma-treatment-card-image img {
	display: block;
	width: 100%;
	border-radius: 0; /* image clips to the card radius via column overflow:hidden */
}

/* ── 2b. UNIFY card button treatment across both blocks. Canonical style =
   asymmetric brand-gold corner (0 20px 0 0), brand-gold, matched padding scale.
   Premium keeps its "VIEW DETAILS →" flush link + hover boxed-arrow ,
   but the boxed-arrow + flush link get the SAME brand-gold + asymmetric corner so
   the visual language matches the treatment Book Now / Details pair. ── */
/* Treatment + premium solid/outline buttons: identical asymmetric corner. */
.reforma-treatment-cards .reforma-treatment-card .wp-block-button__link {
	border-radius: 0 20px 0 0 !important;
}
/* Premium hover boxed-arrow: keep the same asymmetric brand-gold corner. */
.reforma-premium-products .reforma-product-card.wp-block-column:hover .reforma-card-arrow > .wp-block-button__link,
.reforma-premium-products .reforma-card-arrow > .wp-block-button__link:hover,
.reforma-premium-products .reforma-card-arrow > .wp-block-button__link:focus-visible {
	border-radius: 0 20px 0 0 !important;
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
}
/* Premium "VIEW DETAILS →" flush link stays brand-gold (parity with Details). */
.reforma-premium-products .reforma-button-link-flush > .wp-block-button__link {
	color: var(--wp--preset--color--brand-gold) !important;
	font-weight: 700;
}

/* ── 3. ROOTED "Who We Are" bottles: bigger (spans most of the team-photo width)
   + lower so they extend further BELOW the photo onto the page bg. Overrides the
    size/offset. Section overflow stays visible so they aren't clipped. ── */
.reforma-rooted { overflow: visible; }
.reforma-rooted-image-col .reforma-rooted-bottles {
	width: 95%;
	max-width: 560px;
	bottom: -100px; /* extend well below the photo (was -82px) */
}
@media (max-width: 781px) {
	.reforma-rooted-image-col .reforma-rooted-bottles {
		width: 88%;
		max-width: 460px;
	}
}

/* ── 4. HEADER MOBILE (≤781px): clean bar = [logo] ...... [account] [hamburger].
   Logo MUST show (previous rules / nav overlay can squeeze it out); email is
   too long so hide it; cart already hidden ; account stays visible. ── */
@media (max-width: 781px) {
	/* Logo: always visible, sensible mobile size, never shrink to nothing. */
	.reforma-site-header .reforma-site-logo {
		display: inline-flex !important;
		flex-shrink: 0;
		margin: 0;
		order: 0;
	}
	.reforma-site-header .reforma-site-logo img {
		width: 120px !important;
		height: auto;
		display: block;
	}
	/* Email is too long for the mobile bar — hide it. */
	.reforma-site-header .reforma-header-email {
		display: none !important;
	}
	/* Account icon: small, far right, before the hamburger. */
	.reforma-site-header .wp-block-woocommerce-customer-account {
		order: 8;
		flex-shrink: 0;
		margin-left: auto;
	}
	/* Hamburger toggle sits last. */
	.reforma-site-header .reforma-primary-nav {
		order: 9;
		flex-shrink: 0;
	}
}
/* End  polish round */

/* ============================================================================
   Boxed home layout + footer/IG/nav polish round
   ----------------------------------------------------------------------------
   PART 2  : box the middle content sections (centered max-width + page-bg
             gutters at wide screens); HERO / STATS / INSTAGRAM / FOOTER stay
             full-bleed. Treatment green band gets a big curve on its right edge.
   PART 1.7: Instagram strip — equal-height square-ish cover tiles flush to the
             footer (no white gap), plus an @reforma "follow us" CTA tile.
   PART 1.1/1.5: footer brand content nudged down (vertical-center vs tall logo);
             Schedule button drops to align with the brand content.
   PART 1.2: bigger navy ::after svg on mobile (accordion-closed default is
             handled in functions.php — JS removed).
   PART 1.4: high-end mobile nav overlay (surface bg, big tap targets, close).
   APPEND-ONLY. Overrides specific earlier rules where noted; earlier
   blocks left intact.
   ========================================================================== */

/* ── PART 2.1 — BOX the middle content sections ───────────────────────────────
   These ship as .wp-block-group.alignfull (full 100vw). We contain the SECTION
   box to a centered max-width so the page background shows as a clear gutter on
   both sides at wide screens. The box reads as a floating card: white interior +
   24px radius + soft shadow delineate its edge against the near-white page bg.
   The inner constrained 1200px content keeps working unchanged. ── */
.reforma-rooted.wp-block-group.alignfull,
.reforma-premium-products.wp-block-group.alignfull,
.reforma-treatment-plan.wp-block-group.alignfull,
.reforma-research-purity.wp-block-group.alignfull,
.reforma-news-insights.wp-block-group.alignfull,
.reforma-contact-band.wp-block-group.alignfull,
.reforma-visionary-leadership.wp-block-group.alignfull {
	max-width: 1320px;
	margin-inline: auto;
	box-sizing: border-box;
	/*  (user): sections are NOT rounded boxes — only the cards are rounded. */
}

/* Colored-bg sections get the floating-card shadow so the boxed edge is clearly
   visible against the page-bg gutter even though the tints are close. The
   treatment-plan wrapper is transparent (its inner cream/green/cards groups
   carry the bg) so it gets NO shadow here — the inner groups are styled below. */
.reforma-rooted.wp-block-group.alignfull,
.reforma-premium-products.wp-block-group.alignfull,
.reforma-research-purity.wp-block-group.alignfull,
.reforma-news-insights.wp-block-group.alignfull,
.reforma-contact-band.wp-block-group.alignfull,
.reforma-visionary-leadership.wp-block-group.alignfull {
	/*  (user): NOT white — same color as the page-bg gutter (uniform). No card shadow. */
	background-color: var(--wp--preset--color--page) !important;
	box-shadow: none;
}

/* Vertical rhythm between stacked boxes: gentle gap so the gutters read as a
   continuous frame rather than boxes butting together. The boxes inherit the
   page bg above/below from the main flow's block-gap; add a touch more breathing
   room between consecutive boxed sections. */
.reforma-rooted.wp-block-group.alignfull,
.reforma-premium-products.wp-block-group.alignfull,
.reforma-treatment-plan.wp-block-group.alignfull,
.reforma-research-purity.wp-block-group.alignfull,
.reforma-news-insights.wp-block-group.alignfull,
.reforma-contact-band.wp-block-group.alignfull,
.reforma-visionary-leadership.wp-block-group.alignfull {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ── PART 2.2 — HAIR-LOSS plan: box the wrapper + style the three inner groups.
   The .reforma-treatment-plan wrapper is transparent; its inner cream-header,
   green-header and cards groups carry the bg. Round the OUTER corners of the
   stack (top corners of the cream header, bottom corners of the cards group) so
   the whole boxed block reads as one rounded card. The green band gets a large
   sweep on its RIGHT edge per Figma. ── */
.reforma-treatment-plan.wp-block-group.alignfull {
	overflow: visible; /* let the green-band right curve render cleanly */
	box-shadow: none; /*  uniform with page-bg gutter, no card shadow */
	background-color: var(--wp--preset--color--page) !important;
}
.reforma-treatment-plan .reforma-treatment-cream-header {
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}
.reforma-treatment-plan .reforma-treatment-cards {
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}
/* Dark-green band: big curve on the RIGHT edge (Figma green-band right sweep).
   overflow:hidden clips the inner content to the curve. Left edge stays square
   inside the card; the right edge sweeps in with a large radius. */
.reforma-treatment-plan .reforma-treatment-header {
	border-radius: 0 120px 0 0; /*  (user): curve TOP-RIGHT only, square bottom-right */
	overflow: hidden;
}

/* ── PART 2.3 — Mobile: reduce the box side gutter to ~16px so we don't waste
   width on phones, and soften the radius. The alignfull sections already shrink
   to viewport width minus padding; cap max-width so a small gutter remains. ── */
@media (max-width: 781px) {
	.reforma-rooted.wp-block-group.alignfull,
	.reforma-premium-products.wp-block-group.alignfull,
	.reforma-treatment-plan.wp-block-group.alignfull,
	.reforma-research-purity.wp-block-group.alignfull,
	.reforma-news-insights.wp-block-group.alignfull,
	.reforma-contact-band.wp-block-group.alignfull,
	.reforma-visionary-leadership.wp-block-group.alignfull {
		max-width: calc(100% - 32px); /* ~16px gutter each side */
		border-radius: 16px;
		margin-top: var(--wp--preset--spacing--30);
		margin-bottom: var(--wp--preset--spacing--30);
	}
	.reforma-treatment-plan .reforma-treatment-cream-header { border-top-left-radius: 16px; border-top-right-radius: 16px; }
	.reforma-treatment-plan .reforma-treatment-cards { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
	/* Smaller right sweep on the green band so it reads on narrow widths. */
	.reforma-treatment-plan .reforma-treatment-header { border-radius: 0 48px 48px 0; }
}

/* ── PART 1.7 — INSTAGRAM strip: flush to footer + equal-height cover tiles ──
   (a) Kill the block-gap/margin below the strip so it touches the footer with
       no white band. The strip is the last child of <main>; zero its margins and
       drop the main flow's trailing block-gap before the footer template-part. */
.reforma-logo-wall.wp-block-group.alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* The strip sits inside <main>; remove any trailing gap so footer butts up. */
#reforma-main > .reforma-logo-wall:last-child { margin-bottom: 0 !important; }
/* Kill the block-gap margin WP puts between <main> and the footer template-part
   (the source of the white band) so the strip touches the footer directly. */
.wp-site-blocks > main:last-of-type,
.wp-site-blocks > main.wp-block-group { margin-bottom: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > footer:last-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* (b) Equal-height square-ish tiles, images cover-fill, no gaps between tiles.
   Override the earlier ( / 29) aspect-ratio:1/1 rule that made tiles grow
   to ~280px tall on wide screens — pin a consistent ~240px row height instead. */
.reforma-logo-wall .wp-block-columns.alignfull {
	gap: 0 !important;
	column-gap: 0 !important;
	align-items: stretch !important;
}
.reforma-logo-wall .reforma-partner-col.wp-block-column {
	padding: 0 !important;
	overflow: hidden;
	position: relative;
	align-self: stretch;
}
.reforma-logo-wall .reforma-partner-photo {
	margin: 0 !important;
	height: 100%;
	line-height: 0;
}
.reforma-logo-wall .reforma-partner-photo img {
	width: 100% !important;
	height: 240px !important;
	max-height: none !important;
	aspect-ratio: auto !important; /* override  aspect-ratio:1/1 */
	object-fit: cover !important;
	object-position: center center;
	display: block;
	border-radius: 0;
}

/* (c) Instagram CTA tile — the FIRST tile. Blurred skincare photo bg + dark
   overlay + centered white IG glyph + "@reforma" handle. High-end finish. */
.reforma-ig-cta {
	position: relative;
}
.reforma-ig-cta .reforma-ig-cta-bg img {
	filter: blur(3px) brightness(0.85) saturate(1.05);
	transform: scale(1.08); /* hide blur-edge bleed */
}
.reforma-ig-cta-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
	background: linear-gradient(180deg,
		oklch(34.3% 0.042 244 / 0.30) 0%,
		oklch(34.3% 0.042 244 / 0.55) 100%);
	transition: background 220ms ease;
}
.reforma-ig-cta:hover .reforma-ig-cta-overlay {
	background: linear-gradient(180deg,
		oklch(34.3% 0.042 244 / 0.22) 0%,
		oklch(34.3% 0.042 244 / 0.48) 100%);
}
.reforma-ig-cta-overlay p { margin: 0 !important; }
.reforma-ig-cta-glyph a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1.5px solid oklch(100% 0 0 / 0.55);
	border-radius: 50%;
	background: oklch(100% 0 0 / 0.08);
	color: var(--wp--preset--color--white);
	line-height: 0;
	transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.reforma-ig-cta-glyph a svg {
	display: block;
	width: 34px;
	height: 34px;
}
.reforma-ig-cta-glyph a.reforma-ig-cta-icon::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reforma-ig-cta:hover .reforma-ig-cta-glyph a {
	transform: translateY(-2px) scale(1.05);
	background: oklch(100% 0 0 / 0.16);
	border-color: oklch(100% 0 0 / 0.85);
}
.reforma-ig-cta-follow {
	color: oklch(100% 0 0 / 0.88) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 0.25rem !important;
}
.reforma-ig-cta-handle a {
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 600;
	text-decoration: none;
	opacity: 1 !important;
}
.reforma-ig-cta-handle a:hover { text-decoration: underline; }
@media (max-width: 781px) {
	.reforma-logo-wall .reforma-partner-photo img { height: 150px !important; }
	.reforma-ig-cta-glyph a { width: 48px; height: 48px; }
	.reforma-ig-cta-glyph svg,
	.reforma-ig-cta-glyph a.reforma-ig-cta-icon::before { width: 30px; height: 30px; }
}

/* ── PART 1.1 + 1.5 — FOOTER desktop: nudge brand content DOWN so it sits
   vertically centered against the tall stacked logo, and drop the Schedule
   button to align with the brand content (was align-self:flex-start in ;
   now center). Keeps the  nowrap + small margin-right so the button stays
   top-right between the content and the navy ::after svg, never under the logo. */
@media (min-width: 900px) {
	/* Brand row: keep logo + tagline vertically centered , but nudge the
	   text block down a hair so it centers against the tall logo image. */
	.reforma-footer-brand {
		align-items: center;
	}
	.reforma-footer-brand p {
		margin-top: var(--wp--preset--spacing--20) !important;
	}
	/* Schedule button: drop from flex-start to center so it lines up with the
	   brand content (overrides  align-self:flex-start). Stays top-right,
	   nowrap, just left of the navy svg via the  margin-right. */
	.reforma-site-footer .reforma-footer-schedule-buttons {
		align-self: center !important;
		margin-top: var(--wp--preset--spacing--20) !important;
	}
}

/* ── PART 1.2 (b) — MOBILE: bigger navy ::after svg.  re-showed it small
   top-right; make it a prominent low-opacity decoration that sits BEHIND the
   centered text (z-index:0; content is z-index:1 via the  rule) and is
   anchored bottom-right so it never collides with the centered headings. ── */
@media (max-width: 899px) {
	.reforma-site-footer::after {
		display: block !important;
		top: auto !important;
		bottom: 0;
		right: 0;
		width: clamp(200px, 60vw, 340px) !important;
		height: clamp(320px, 92vw, 560px) !important;
		background-position: bottom right !important;
		opacity: 0.16 !important;
		z-index: 0;
	}
}

/* ── PART 1.4 — MOBILE NAV overlay (core/navigation overlayMenu:"mobile").
   Style the open overlay into a high-end full-screen menu: surface bg, generous
   spacing, large tap targets, clear close affordance. Desktop nav untouched
   (these rules only apply while the overlay is open). ── */
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	/*  self-sufficient full-screen overlay (don't depend on core nav CSS,
	   which FlyingPress "Remove Unused CSS" can strip). High-end FROSTED BLUR. */
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	overflow-y: auto !important;
	display: block !important;
	background-color: oklch(97% 0.012 240 / 0.82) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40) !important;
	width: 100%;
	align-items: center;
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: center;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl) !important;
	font-weight: 500;
	color: var(--wp--preset--color--ink) !important;
	transition: color 160ms ease;
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--brand-gold) !important;
}
/* Close (X) affordance: bigger tap target, top-right, brand-tinted. */
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--ink) !important;
}
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}
/* Hamburger open trigger: comfortable tap target on mobile. */
@media (max-width: 781px) {
	.reforma-primary-nav .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
	}
	.reforma-primary-nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}
}

/* End  boxed-layout polish round */

/* ===========================================================================
   user round 6: rooted 2-paragraph render, footer Contact-us not an
   accordion (centered on mobile), Important-Links titled column already in
   markup. (Boxed-bg→page + treatment curve top-right handled inline above.)
   =========================================================================== */
/* Rooted body now holds 2 paragraphs separated by a blank line in ACF — render
   the break. */
.reforma-rooted .wp-block-column:last-child > .has-md-font-size,
.reforma-rooted p.has-md-font-size { white-space: pre-line; }

/* Footer Contact-us column: NOT an accordion — always-visible, centered on
   mobile (it has .reforma-footer-col--contact but NOT .reforma-footer-col, so
   the accordion JS/hide-CSS skip it; its heading uses .reforma-footer-contact-heading
   so it never gets a chevron). */
@media (max-width: 899px) {
	.reforma-footer-col--contact { text-align: center; }
	.reforma-footer-col--contact .reforma-footer-links { display: flex; flex-direction: column; align-items: center; }
	.reforma-footer-col--contact .reforma-footer-links li,
	.reforma-footer-col--contact .reforma-footer-links li a { justify-content: center; }
	.reforma-footer-contact-heading { cursor: default; }
}
/* End  */

/* ===========================================================================
    design — home design-precision round.
   1. "Where Research Meets Purity": right col is a 2×3 hairline feature grid
      (no card bg, no shadow) with green line-art icons.
   2. "News & Insights": featured (first) card = white bg + soft shadow +
      rounded + filled brand-gold boxed arrow; cards 2/3 stay plain.
   3. Premium products card 0 restructured to match cards 1-3 — anchor the
      bestseller badge against the (now badge-bearing) card column.
   4. Instagram strip: softer blur + lighter overlay.
   APPEND-ONLY block. Earlier rules edited in place only where required
   (research-purity ::after leaf removed in its original rule).
   =========================================================================== */

/* ── 1. Research-Purity right column: 2×3 hairline grid of 6 feature cells.
   The right column holds .reforma-pillar-grid (3 stacked rows). Each row is a
   2-col wp:columns (.reforma-pillar-row) with two .reforma-pillar-cell.
   Hairline grid lines: each cell gets a top + left 1px hairline; the grid wrap
   gets a right + bottom hairline so the outer frame closes. No card bg/shadow. */
.reforma-research-purity .reforma-pillar-grid {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-left: 1px solid var(--wp--preset--color--hairline);
}
.reforma-research-purity .reforma-pillar-row.wp-block-columns {
	margin: 0 !important;
	gap: 0 !important;
	align-items: stretch !important;
}
.reforma-research-purity .reforma-pillar-cell.wp-block-column {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border-right: 1px solid var(--wp--preset--color--hairline);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--50) !important;
	display: flex;
	flex-direction: column;
}

/* Green line-art pillar icon. The SVG uses stroke="currentColor"; we tint it
   accent-purple via CSS mask so the <img> (core/image, ACF-bindable) shows green
   without a hardcoded color in the asset. The img element is masked by its own
   source and painted with the accent-purple token. */
.reforma-research-purity .reforma-pillar-icon {
	flex-shrink: 0;
}
.reforma-research-purity .reforma-pillar-icon img {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain;
	background-color: var(--wp--preset--color--accent-purple);
	-webkit-mask: var(--reforma-pillar-mask) no-repeat center / contain;
	mask: var(--reforma-pillar-mask) no-repeat center / contain;
}
/* Per-cell mask source = that cell's icon URL, set from the img src. Because we
   cannot read the <img> src into a CSS var generically, we point the mask at the
   six known icon files by cell order (icons are theme assets, fixed per cell). */
.reforma-research-purity .reforma-pillar-row:nth-child(1) .reforma-pillar-cell:nth-child(1) .reforma-pillar-icon img { --reforma-pillar-mask: none; }
.reforma-research-purity .reforma-pillar-row:nth-child(1) .reforma-pillar-cell:nth-child(2) .reforma-pillar-icon img { --reforma-pillar-mask: none; }
.reforma-research-purity .reforma-pillar-row:nth-child(2) .reforma-pillar-cell:nth-child(1) .reforma-pillar-icon img { --reforma-pillar-mask: none; }
.reforma-research-purity .reforma-pillar-row:nth-child(2) .reforma-pillar-cell:nth-child(2) .reforma-pillar-icon img { --reforma-pillar-mask: none; }
.reforma-research-purity .reforma-pillar-row:nth-child(3) .reforma-pillar-cell:nth-child(1) .reforma-pillar-icon img { --reforma-pillar-mask: none; }
.reforma-research-purity .reforma-pillar-row:nth-child(3) .reforma-pillar-cell:nth-child(2) .reforma-pillar-icon img { --reforma-pillar-mask: none; }

/* Cell body copy grows so cell heights match within a row. */
.reforma-research-purity .reforma-pillar-cell > .wp-block-paragraph { flex: 1; }

/* Mobile: cells stack (isStackedOnMobile). Collapse the grid to a single
   column with only horizontal-row hairlines so it reads as a stacked list. */
@media (max-width: 781px) {
	.reforma-research-purity .reforma-pillar-grid {
		border-left: 0;
		border-top: 0;
	}
	.reforma-research-purity .reforma-pillar-cell.wp-block-column {
		border-right: 0;
		border-top: 1px solid var(--wp--preset--color--hairline);
		border-bottom: 0;
	}
}

/* ── 2. News & Insights — featured (first) card highlight + plain rest.
   Featured card: white card bg, soft shadow, rounded corners, inner padding.
   The card image keeps its small radius. */
.reforma-news-insights .reforma-news-card--featured {
	background: var(--wp--preset--color--white) !important;
	box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06), 0 12px 28px oklch(0% 0 0 / 0.07);
	border-radius: var(--wp--preset--radius--medium);
	padding: var(--wp--preset--spacing--40) !important;
}
.reforma-news-insights .reforma-news-card--featured .reforma-news-card-media--overlaid {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
/* Featured card footer: text link left, boxed blue arrow right. */
.reforma-news-card-footer.wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: auto;
}
.reforma-news-card-footer .reforma-button-link-flush > .wp-block-button__link {
	padding: 0 !important;
}
/* Filled brand-gold boxed arrow with asymmetric 0 20px 0 0 corner. */
.reforma-news-card-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	font-size: 1.25rem;
	line-height: 1;
	border-radius: 0 20px 0 0 !important;
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	transition: transform 160ms ease, background-color 160ms ease;
}
.reforma-news-card--featured:hover .reforma-news-card-arrow > .wp-block-button__link,
.reforma-news-card-arrow > .wp-block-button__link:hover,
.reforma-news-card-arrow > .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	background-color: var(--wp--preset--color--brand-gold) !important;
}
/* Plain cards (2 & 3): no bg/shadow/padding (base .reforma-news-card already
   strips these via the  rule); their "Read full story →" stays a plain
   green flush link — no boxed arrow. Nothing extra needed here. */

/* ── 3. Premium products card 0: now badge is a direct child of the column
   (matches cards 1-3 structure). Anchor the absolute badge against the column. */
.reforma-premium-products .reforma-product-card--bestseller.wp-block-column {
	position: relative;
}

/* ── 4. Instagram strip — softer blur + lighter overlay for an elegant,
   high-end read. Overrides the  harsher blur(6px)+brightness(0.78). */
.reforma-ig-cta .reforma-ig-cta-bg img {
	filter: blur(7px) brightness(0.9) saturate(1.02) !important;
	transform: scale(1.1) !important;
}
.reforma-ig-cta-overlay {
	background: linear-gradient(180deg,
		oklch(34.3% 0.042 244 / 0.18) 0%,
		oklch(34.3% 0.042 244 / 0.42) 100%) !important;
}
.reforma-ig-cta:hover .reforma-ig-cta-overlay {
	background: linear-gradient(180deg,
		oklch(34.3% 0.042 244 / 0.12) 0%,
		oklch(34.3% 0.042 244 / 0.34) 100%) !important;
}
/* End  design */

/* ===========================================================================
   polish round: floating-button UX, hero decoration bleed, side-SVG
   gutter system, mobile-nav frosted blur.
   APPEND-ONLY. Overrides specific earlier rules where noted (cited inline).
   =========================================================================== */

/* ── 1. FLOATING CONTACT BUTTONS — high-end UX ───────────────────────────────
   Hover-reveal pill labels (desktop pointer only), desktop phone popover with
   copy + schedule, one-time entrance, WhatsApp gentle pulse, footer auto-nudge.
   Base sprite + sizes live in the  block above (updated in place for the
   .reforma-bubble-wrap structure + 56/60px tap targets). ── */

/* Hover-reveal pill label — slides/fades in to the LEFT of the circle. Hidden by
   default; revealed on wrap hover or anchor focus. aria-hidden in markup. */
.reforma-bubble-label {
	pointer-events: none;
	margin-inline-end: 10px;
	padding: 7px 13px;
	border-radius: 999px;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface, oklch(100% 0 90));
	box-shadow: 0 4px 14px oklch(0% 0 0 / 0.16);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
	.reforma-bubble-wrap:hover .reforma-bubble-label,
	.reforma-bubble-wrap:focus-within .reforma-bubble-label {
		opacity: 1;
		transform: translateX(0);
	}
}
/* Touch / coarse pointers: never show the labels. */
@media (hover: none), (pointer: coarse) {
	.reforma-bubble-label { display: none; }
}

/* Desktop phone popover — number + copy + schedule, anchored above-left of the
   phone bubble. [hidden] hides it until JS opens it; .is-open fades it in. */
.reforma-bubble-popover[hidden] { display: none; }
.reforma-bubble-popover {
	position: absolute;
	bottom: calc(100% + 12px);
	inset-inline-end: 0;
	min-width: 220px;
	padding: 16px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface, oklch(100% 0 90));
	box-shadow: 0 12px 32px oklch(0% 0 0 / 0.2);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 2;
}
.reforma-bubble-wrap--phone.is-open .reforma-bubble-popover {
	opacity: 1;
	transform: translateY(0);
}
.reforma-bubble-popover-number {
	display: block;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.02em;
	margin-bottom: 12px;
	direction: ltr;
}
.reforma-bubble-popover-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.reforma-bubble-copy,
.reforma-bubble-schedule {
	flex: 1 1 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 700;
	padding: 9px 12px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}
.reforma-bubble-copy {
	border: 1px solid var(--wp--preset--color--brand-gold);
	background: transparent;
	color: var(--wp--preset--color--brand-gold);
	font-family: inherit;
}
.reforma-bubble-copy:hover,
.reforma-bubble-copy:focus-visible {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white, oklch(100% 0 90));
	outline: none;
}
.reforma-bubble-copy.is-copied {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white, oklch(100% 0 90));
}
.reforma-bubble-schedule {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white, oklch(100% 0 90));
}
.reforma-bubble-schedule:hover,
.reforma-bubble-schedule:focus-visible {
	background: var(--wp--preset--color--ink);
	outline: none;
}

/* One-time entrance: fade + rise, slight stagger (WhatsApp after phone). */
@keyframes reforma-bubble-in {
	from { opacity: 0; transform: translateY(16px) scale(0.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reforma-contact-bubbles a {
	animation: reforma-bubble-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reforma-bubble-wrap--whatsapp .reforma-bubble--whatsapp {
	animation-delay: 110ms;
}

/* WhatsApp gentle pulse loop (subtle scale). Sits after the entrance settles. */
@keyframes reforma-bubble-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
.reforma-bubble--whatsapp {
	animation: reforma-bubble-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both,
	           reforma-bubble-pulse 2.6s ease-in-out 1.4s infinite;
}
/* Hover/focus must win over the pulse loop (keep the lift). */
.reforma-bubble--whatsapp:hover,
.reforma-bubble--whatsapp:focus-visible {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.reforma-contact-bubbles a,
	.reforma-bubble--whatsapp {
		animation: none !important;
	}
	.reforma-bubble-label,
	.reforma-bubble-popover {
		transition: none;
	}
}

/* ── 2. HOME HERO decoration — wavy leaf SVG anchored BOTTOM-RIGHT (Figma 14:599).
   In Figma the waves sit in the LOWER-RIGHT of the hero photo at their natural
   aspect + moderate opacity — NOT stretched up the whole column. The previous
    attempt set height:auto + background-size:auto 100%, which towered the
   waves up the full image and over-emphasised them. This restores the Figma
   placement. Overrides  top-right fixed height (line ~902) + 
   opacity 0.82 (line ~4727). ── */
.reforma-hero-decoration {
	top: auto !important;
	bottom: 0 !important;
	right: 0 !important;
	width: clamp(380px, 54vw, 860px) !important;   /* a touch bigger again per Figma 14:599 */
	height: clamp(580px, 100%, 1160px) !important;
	background-position: bottom right !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	opacity: 0.6 !important;
}
@media (max-width: 768px) {
	.reforma-hero-decoration {
		width: clamp(200px, 56vw, 380px) !important;
		height: 72% !important;
		background-size: contain !important;
	}
}

/* ── 3. SIDE-SVG GUTTER SYSTEM — let boxed sections' leaf SVGs bleed into the
   page gutters instead of being clipped inside the 1320px box.
   Root cause: the shared decoration rule (line ~232) sets overflow:hidden on
   these sections, and after  boxed them to max-width:1320px the ::after
   leaf is clipped to the box and never reaches the gutter. Fix: allow overflow
   and extend each ::after into the gutter via a gutter calc so the leaf reads
   continuously like Figma. The content stacking (section > * { z-index:1 }) keeps
   text above the leaf. Gutter each side = calc(50vw - 660px) at >1320px. ── */
.reforma-premium-products,
.reforma-news-insights,
.reforma-visionary-leadership {
	overflow: visible; /* override the shared overflow:hidden (line ~233) so the leaf can bleed */
}
/* Premium products — leaf on the RIGHT, bleeding into the right gutter (Figma). */
.reforma-premium-products::after {
	right: calc(-1 * (50vw - 50%) + 12px);
	opacity: 0.5;
}
/* Visionary leadership — leaf on the RIGHT, bleeding into the right gutter. */
.reforma-visionary-leadership::after {
	right: calc(-1 * (50vw - 50%) + 12px);
}
/* News & Insights — leaf bottom-LEFT, bleeding into the left gutter (Figma). */
.reforma-news-insights::after {
	left: calc(-1 * (50vw - 50%) + 12px);
}
/* Keep the bleed off below the boxed breakpoint (sections are near full-width;
   the >640 hide rule already removes leaves ≤640). Between 641–1320 the gutter
   calc clamps to 0 so the leaf simply sits at the section edge — acceptable. */

/* ── 4. MOBILE NAV — richer high-end frosted glass on the open overlay only.
   Scoped to .is-menu-open (NEVER the header — see gotchas.md 2026-05-20: a
   backdrop-filter on the header makes it the containing block for the fixed
   overlay and collapses it to header height). Stronger blur + saturate + a
   slightly more opaque tint so text stays readable. Overrides the  values
   (blur(22px) saturate(1.4), 0.82 tint) at line ~7878. ── */
.reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: oklch(97% 0.012 240 / 0.9) !important;
	-webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
	backdrop-filter: blur(32px) saturate(1.5) !important;
}
/* End  */

/* ===========================================================================
   live-bug fixes: Instagram tile blur coverage + premium-products
   first-card image parity. APPEND-ONLY; overrides cited earlier rules.
   =========================================================================== */

/* ── INSTAGRAM TILE (logo wall, 2nd tile) — the blurred photo must fill the WHOLE
   tile and the blur must be smooth with no shifted/uncovered edges.
   Root cause of the old look: the <img> was height:240px (could be shorter than
   the stretched column → overlay had bare areas = "not covering all") and
   blur(7px) + scale(1.1) wasn't enough scale to hide the blur's transparent
   edge bleed (= "shifted"). Fix: make the FIGURE fill the tile absolutely, the
   img cover it, a larger blur for a creamy read, and enough scale to clip the
   bleed entirely. Overrides  (line ~7772) +  (line ~8122). ── */
.reforma-ig-cta .reforma-ig-cta-bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 0 !important;
	overflow: hidden !important;
}
.reforma-ig-cta .reforma-ig-cta-bg img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	filter: blur(12px) brightness(0.84) saturate(1.04) !important;
	transform: scale(1.3) !important;       /* fully hides the blur's edge bleed */
	transform-origin: center center !important;
}

/* ── PREMIUM PRODUCTS — first card ("Bestseller") image parity.
   The Bestseller badge was an in-flow first child, pushing card 0's image DOWN so
   it rendered shorter than cards 1-3 (whose image is the first child). Float the
   badge ABSOLUTELY over the image (card is already position:relative, line ~8116)
   so every card's image starts at the same top edge. Mirrors the treatment cards. */
.reforma-premium-products .reforma-product-card--bestseller .reforma-bestseller-badge {
	position: absolute !important;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	z-index: 3 !important;
	margin: 0 !important;
}
/* End  */

/* ============================================================
   Mobile overflow guard (320px stress-test fix)
   At <=380px, WP alignfull breakout (negative margin-inline from
   useRootPaddingAwareAlignments) on full-width inner wrappers like
   .reforma-booking-layout overshoots the viewport by a few sub-pixels,
   producing a tiny horizontal scrollbar. Clip it on the main content only
   (clip — NOT hidden — preserves the sticky header; scoped to #reforma-main
   so header/footer are untouched). No content is hidden — only padding overshoot.
   ============================================================ */
@media (max-width: 380px) {
	#reforma-main { overflow-x: clip; }
}
/* End  */

/* ============================================================
   Home "Who We Are / Rooted in Innovation" → Figma node 54:163 exact
   Source of truth: .tmp/figma-cache/home-deep.json (per-char extract).
   Renders from post 443 post_content (.reforma-rooted classes); CSS-only, no markup
   change, no content/DB mutation. Brings the live block from screenshot-1 → screenshot-2.
     - Eyebrow: "Who We Are" Nunito 20px w500 green (title case, not uppercase)
                + 32px green leading rule (Figma LINE node 14:772 "Line 2")
     - Heading: Nunito (NOT Playfair), 58px w500 ink — no italic, no blue accent
                (neutralize the global .wp-block-heading em treatment in this section only)
     - Body:    Playfair Display serif 16px w500 ink, line-height 1.45
     - Stats 2x2: green-hairline grid; value Nunito 24px w700 green; label Nunito 16px w500 green
   Image radius left untouched ( user directive: curve on left, not right).
   ============================================================ */

/* Eyebrow — Circular Std(→Nunito) 20px w450 green + 32px green line */
.reforma-rooted .reforma-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;            /* 20px */
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-rooted .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}

/* Heading — Circular Std(→Nunito) sans 58px w500 ink; no italic/blue accent.
   font-size set explicitly: the has-4xl-font-size class targets an empty CSS var
   (digit-slug bug, gotcha 2026-05-19) so it falls back to 40px; restore the
   intended 4xl fluid (58px @ 1920) here, scoped to this section. */
.reforma-rooted h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--body) !important;   /* Nunito sans */
	font-size: clamp(2.5rem, 3.02vw, 3.625rem) !important;          /* 58px @ 1920 */
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--ink) !important;
}
.reforma-rooted h2.wp-block-heading em {
	font-style: normal !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* Body — Playfair Display serif 16px w500 ink, lh 1.45 */
.reforma-rooted p.has-md-font-size {
	font-family: var(--wp--preset--font-family--display) !important;  /* Playfair serif */
	font-size: 1rem !important;               /* 16px */
	font-weight: 500 !important;
	line-height: 1.45 !important;
}

/* Stats 2x2 — green hairline grid (overrides  blue-tint chips).
   Scoped to #reforma-rooted (home only) — .reforma-rooted-stat-chip is REUSED on
   the About page (.reforma-about-who-we-are); unscoped rules would regress it. */
#reforma-rooted .reforma-rooted-stats.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	/* Dividers drawn as background gradients (a green cross at 50%/50%) — paints as a solid
	   fill so neither line can sub-pixel-vanish like a border can. Cells are transparent. */
	background-color: oklch(99.3% 0.004 210) !important;          /* cell fill */
	background-image:
		linear-gradient(oklch(45.7% 0.085 169), oklch(45.7% 0.085 169)),
		linear-gradient(oklch(45.7% 0.085 169), oklch(45.7% 0.085 169)) !important;
	background-size: 2px 100%, 100% 2px !important;               /* vertical line, horizontal line */
	background-position: center center, center center !important;
	background-repeat: no-repeat !important;
	border: 2px solid oklch(45.7% 0.085 169) !important;          /* outer frame */
	border-radius: 10px !important;
	overflow: hidden !important;
	flex-wrap: unset !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}
#reforma-rooted .reforma-rooted-stat-chip.wp-block-column {
	background: transparent !important;                     /* let the container's gridlines show */
	border: 0 !important;
	border-radius: 0 !important;
	padding: var(--wp--preset--spacing--50) !important;     /* 24px */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	text-align: center !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
}
#reforma-rooted .reforma-rooted-stat-chip h3.wp-block-heading {  /* stat value */
	font-family: var(--wp--preset--font-family--body) !important;  /* Nunito */
	font-size: 1.5rem !important;             /* 24px */
	font-weight: 700 !important;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--accent-purple) !important;
	margin: 0 !important;
}
#reforma-rooted .reforma-rooted-stat-chip p {                    /* stat label */
	font-family: var(--wp--preset--font-family--body) !important;  /* Nunito */
	font-size: 1rem !important;               /* 16px */
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
	margin: 0 !important;
}
@media (max-width: 480px) {
	#reforma-rooted .reforma-rooted-stats.wp-block-columns { grid-template-columns: 1fr !important; }
}

/* Team photo — restore the top-left curve (figure CLIPS the img; a prior overflow:visible
   broke it) + slightly taller crop per Figma 599x464. Column top-aligned so the absolutely
   positioned bottles anchor predictably below the photo. */
#reforma-rooted .reforma-rooted-image-col {
	align-self: flex-start !important;
	position: relative !important;
	overflow: visible !important;
}
#reforma-rooted .reforma-rooted-image.wp-block-image {
	overflow: hidden !important;
	border-radius: 100px 0 0 0 !important;   /* top-left curve */
	height: auto !important;
	margin: 0 !important;
}
#reforma-rooted .reforma-rooted-image img {
	width: 100% !important;
	aspect-ratio: 599 / 464 !important;       /* taller than the 1.46 native landscape */
	height: auto !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 100px 0 0 0 !important;
}
/* Bottles — Figma node 14:572: large product cluster overlapping the team's lower half and
   extending well below the photo onto the page bg (transparent PNG); user: "go down more". */
#reforma-rooted .reforma-rooted-bottles {
	width: 100% !important;
	max-width: 560px !important;
	height: auto !important;          /* figure hugs the img (was stretched to column height, lifting the bottles) */
	left: 50% !important;
	bottom: -220px !important;        /* midway: lower than the photo but not too far */
	transform: translateX(-50%) !important;
}
/* End  */


.has-2xl-font-size { font-size: var(--wp--preset--font-size--2xl); }
.has-3xl-font-size { font-size: var(--wp--preset--font-size--3xl); }
.has-4xl-font-size { font-size: var(--wp--preset--font-size--4xl); }
/* 5xl: the var clamps to 4.5rem (72px) but the token px + Figma stat numbers are 64px.
   Cap at 4rem (64px) so home stats / page titles match Figma instead of overshooting. */
.has-5xl-font-size { font-size: clamp(3rem, 2.4rem + 2.8vw, 4rem); }
/* End  */

/* ============================================================
   Home "Premium Products We Distribute" → Figma match
   Scoped to .reforma-premium-products. Eyebrow gets the green dash + title-case
   like the rooted section; heading base = Nunito sans with the "Products" accent
   word (an <em>, wrapped in post 443 content) rendered Playfair-italic GREEN
   (the global .wp-block-heading em rule colours it blue — override to green here).
   ============================================================ */
.reforma-premium-products .reforma-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;            /* 20px */
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-premium-products .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}
/* Card category labels ("Skincare") must NOT inherit the section eyebrow's dash/green —
   Figma shows them as a small plain muted-gray label. Reset within the card carousel. */
.reforma-premium-products .reforma-product-carousel .reforma-eyebrow {
	display: block !important;
	gap: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0.8125rem !important;          /* ~13px */
	font-weight: 500 !important;
	color: var(--wp--preset--color--accent-purple) !important;   /* green (Figma), title-case, no dash */
}
.reforma-premium-products .reforma-product-carousel .reforma-eyebrow::before {
	content: none !important;
	display: none !important;
}
.reforma-premium-products h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--body) !important;   /* Nunito sans base */
	line-height: 1.3 !important;
}
.reforma-premium-products h2.wp-block-heading em {
	font-family: 'Merienda', cursive !important;                    /* Figma: "Products" is a green script font (Merienda 58px) */
	font-style: normal !important;                                  /* neutralize the global em italic */
	font-weight: 600 !important;
	color: var(--wp--preset--color--accent-purple) !important;        /* green accent (not the global blue) */
}
/* Carousel prev/next arrows — Figma shows none (all 4 cards fit on desktop). Hide them. */
.reforma-premium-products .reforma-carousel-prev,
.reforma-premium-products .reforma-carousel-next {
	display: none !important;
}
/* Product cards — rounded corners (Figma; current radius 0). overflow:hidden rounds the
   top image + the bottom hover-arrow corner. */
.reforma-premium-products .reforma-product-card {
	border-radius: 16px !important;
	overflow: hidden !important;
}
/* "VIEW DETAILS →" link — Figma shows it GREEN (currently brand-gold). Target the
   text-link only (has-brand-gold-color), NOT the filled hover arrow (…-background-color). */
.reforma-premium-products .reforma-product-card a.wp-block-button__link.has-brand-gold-color {
	color: var(--wp--preset--color--accent-purple) !important;
}
/* Card arrow → Figma corner tab: flush to the card's bottom-right with a large top-LEFT
   curve; transparent (blue arrow) by default, fills blue (white arrow) on card hover.
   High specificity (.reforma-product-card .reforma-card-arrow > link = 0,4,2) + later in
   file so it beats the older /36 top-right box rules. */
.reforma-premium-products .reforma-product-card { position: relative !important; }
.reforma-premium-products .reforma-product-card .reforma-card-arrow {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	z-index: 2 !important;
}
.reforma-premium-products .reforma-product-card .reforma-card-arrow > .wp-block-button__link {
	width: 103px !important;                     /* Figma Rectangle 82: 103x48 */
	height: 48px !important;
	min-width: 103px !important;
	padding: 0 !important;
	border-radius: 20px 0 20px 0 !important;     /* Figma cornerRadii [TL20,TR0,BR20,BL0] */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--brand-gold) !important;
	transition: background-color .2s ease, color .2s ease !important;
}
.reforma-premium-products .reforma-product-card:hover .reforma-card-arrow > .wp-block-button__link {
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
}
/* Tab underline must follow the ACTIVE tab. The first tab's link has the 2px border-bottom
   baked INLINE in the markup, which beats the stylesheet --active rule, so the underline got
   stuck under Cosmetics. Force it with !important: 0 on all, 2px green on the active one. */
.reforma-premium-products .reforma-product-tab > .wp-block-button__link {
	border-bottom-width: 0 !important;
}
.reforma-premium-products .reforma-product-tab--active > .wp-block-button__link {
	border-bottom: 2px solid var(--wp--preset--color--accent-purple) !important;
}
/* End  */

/* ============================================================
   Premium block final Figma parity:
   (a) self-host Merienda (the green "Products" accent script font); the global
       fonts are theme.json-generated, but this faint, single-use accent is
       declared here to avoid a full theme.json regen (codebase has diverged).
       OFL, variable latin file covers weights 400-700.
   (b) leaf: Figma node 14:520 is a LARGE monstera (~876px on the 1920 frame)
       bleeding off the right gutter — the prior clamp(160,18vw,320) was far too
       small. Resize to ~46vw and bleed 18vw off the right so the left tip lands
       at ~72.6vw exactly like Figma. SVG shape already matches.
   ============================================================ */
@font-face {
	font-family: 'Merienda';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/merienda-var.woff2') format('woff2');
}
.reforma-premium-products::after {
	top: 48px;
	right: -22.7vw;               /* measured live: lands leaf box-left at 72.5vw (Figma 72.6%) */
	width: 46vw;                  /* Figma 876/1920 = 45.6% of the frame width */
	max-width: 900px;
	height: auto;
	aspect-ratio: 579 / 485;      /* leaf SVG intrinsic aspect — no letterboxing under background-size:contain */
	opacity: 0.5;
}
@media (max-width: 1024px) {
	.reforma-premium-products::after {
		width: 60vw;
		right: -22vw;
	}
}
/* End  */

/* ============================================================
   Premium block font + wrap parity (verified live vs Figma render):
   (a) card title is a core/heading h3 → inherits the global Playfair SERIF; Figma
       shows it SANS (Circular Std → our Nunito), bold. Override to body font 700.
   (b) heading wraps to TWO lines in Figma ("Premium Products" / "We Distribute");
       the wider live content box kept it on one line. Constrain to 9.6em — measured
       live: "Premium Products"=382px fits, "Premium Products We"=463px does not, so
       the break lands after "Products". em-based so it holds across the fluid clamp.
   ============================================================ */
.reforma-premium-products .reforma-product-card h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--body) !important;  /* Nunito sans, not Playfair serif */
	font-weight: 700 !important;
}
.reforma-premium-products h2.wp-block-heading {
	max-width: 9.6em;   /* force the Figma 2-line break after "Products" */
}
/* End  */

/* ============================================================
   Premium card height + button shape + leaf size (user feedback, verified live):
   (a) CARDS too tall (580px vs Figma 443): WP default 24px block-spacing between
       content elements + 24px image margins inflate the card. Figma rhythm ~10-16px.
       Tighten image margin→0, content gaps→10px, card padding-bottom→16px. Keeps the
       footer pinned to the bottom (margin-top:auto) so equal-height cards stay aligned.
   (b) BUTTON shape: the pre-existing /36 HOVER rules (lines ~7220/~7539) force
       border-radius 0 20px 0 0 (old top-right tab) and out-specify the  default
       (.wp-block-column:hover = higher specificity). On hover the button became a
       top-right pill. Re-assert the Figma corner-tab radius 20px 0 20px 0 on hover/focus.
   (c) LEAF read as too big: ~396px visible vs Figma ~293px. Bleed more off the right
       (right:-29.8vw) so the on-screen leaf width matches Figma (left tip ~1147 @1440).
   ============================================================ */
.reforma-premium-products .reforma-product-card .wp-block-image { margin: 0 !important; }
.reforma-premium-products .reforma-product-card > .wp-block-group { margin-top: 0 !important; padding-top: 16px !important; padding-bottom: 0 !important; }
.reforma-premium-products .reforma-product-card > .wp-block-group > :not(.reforma-card-footer) { margin-top: 0 !important; margin-bottom: 10px !important; }
.reforma-premium-products .reforma-product-card > .wp-block-group > :first-child { margin-top: 0 !important; }
.reforma-premium-products .reforma-product-card .reforma-card-footer { margin-top: auto !important; margin-bottom: 0 !important; }
.reforma-premium-products .reforma-product-card.wp-block-column { padding-bottom: 16px !important; }
.reforma-premium-products .reforma-product-card.wp-block-column:hover .reforma-card-arrow > .wp-block-button__link,
.reforma-premium-products .reforma-product-card .reforma-card-arrow > .wp-block-button__link:hover,
.reforma-premium-products .reforma-product-card .reforma-card-arrow > .wp-block-button__link:focus-visible {
	border-radius: 20px 0 20px 0 !important;   /* override old 0 20 0 0 hover radius */
}
.reforma-premium-products::after {
	right: -29.8vw;   /* bleed more off the right → ~293px visible (matches Figma) */
}
/* End  */

/* ============================================================
   Premium block: heading weight, subtext wrap, card images, leaf size
   (user feedback round 2, verified live @1440 + @1920):
   (a) HEADING "Premium"/"We Distribute" should read BOLD (Figma Circular Std 500
       reads heavier than Nunito 500) → weight 700. ("Products" em stays Merienda 600.)
   (b) SUBTEXT must wrap to 2 lines exactly like Figma (line 2 = "and selected to
       meet…"). Cap to 695px (measured: "…Clinically validated,"=675px fits, +"and"=714 does
       not), so the break lands after "Clinically validated,".
   (c) CARD IMAGES: cards 2-4 are PORTRAIT product cutouts (276x414) shown with
       object-fit:cover → cropped the product top/bottom. Figma shows the FULL product
       centered → object-fit:contain (bestseller card1 is a landscape marble photo, keep cover).
   (d) LEAF: do NOT size from Figma px (it balloons on wide screens). Hard-cap to
       clamp(180,18vw,280) and bleed ~20px off the VIEWPORT right via a gutter-aware
       calc (-(50vw - 50%)), so it stays a small corner accent at every width.
   ============================================================ */
.reforma-premium-products h2.wp-block-heading { font-weight: 700 !important; }
.reforma-premium-products h2.wp-block-heading + p { max-width: 695px !important; }
.reforma-premium-products .reforma-product-card:not(.reforma-product-card--bestseller) .wp-block-image img {
	object-fit: contain !important;
}
.reforma-premium-products::after {
	width: clamp(180px, 18vw, 280px) !important;
	right: calc(-1 * (50vw - 50%) - 20px) !important;   /* bleed ~20px off the viewport right at every width */
	top: 48px !important;
	aspect-ratio: 579 / 485 !important;
	height: auto !important;
}
/* End  */

/* ============================================================
   HOME headers/content = Figma typography (user audit round 3).
   Figma uses Circular Std (our Nunito SANS) for EVERY header/title/body; serif
   (Playfair Display 700) ONLY on the numeric stats. The theme.json default forces
   h1/h2/h3 -> display(Playfair), so many home headers were wrongly serif (hero,
   Clinically Proven Plans, Where Research Meets Purity, News & Insights, Get in
   touch, Visionary Leadership + their card titles). theme.json default flipped
   h1/h2/h3 -> body GLOBALLY (all pages, user directive 2026-05-21); these CSS
   rules enforce it + cover the numeric-stat serif + per-section blockers.
   Also: green Merienda accent ONLY where Figma has it (Products, Research);
   treatment-card images contain (full product); VIEW DETAILS aligned to arrow;
   leaf bigger + lower (user).
   ============================================================ */
/* 1. all headings -> Nunito sans GLOBALLY (enforces the theme.json default flip) */
.wp-block-heading { font-family: var(--wp--preset--font-family--body) !important; }
/* per-section serif blocker (line ~6332) forces visionary h2 serif at higher specificity — override */
.reforma-visionary-leadership > .wp-block-group:first-child h2.wp-block-heading { font-family: var(--wp--preset--font-family--body) !important; font-style: normal !important; }
/* 2. numeric stats stay Playfair 700 (Figma) — global stat classes + home treatment h4 */
.reforma-stats-bar .wp-block-heading,
.reforma-rooted-stat-chip .wp-block-heading,
body.home h4.wp-block-heading { font-family: var(--wp--preset--font-family--display) !important; font-weight: 700 !important; }
/* 3. section headers = Circular Std MEDIUM in Figma → weight 500 (NOT 700; bold was the
   main reason the hero looked wrong vs Figma). Stats keep 700 via the re-assert above. */
h1.wp-block-heading, h2.wp-block-heading { font-weight: 500 !important; }
/* 4. header accent <em>: neutralize stray serif-italic, re-apply green Merienda ONLY where Figma does */
body.home .wp-block-heading em { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; color: inherit !important; }
.reforma-premium-products h2.wp-block-heading em,
.reforma-research-purity h2.wp-block-heading em { font-family: 'Merienda', cursive !important; font-style: normal !important; font-weight: 600 !important; color: var(--wp--preset--color--accent-purple) !important; }
/* 5. treatment-card images: portrait cutouts -> show full product (like the product cards) */
body.home .reforma-treatment-card-image img { object-fit: contain !important; }
/* 6. premium card VIEW DETAILS down ~13px to vertically align with the corner arrow button */
.reforma-premium-products .reforma-card-footer .wp-block-button:not(.reforma-card-arrow) .wp-block-button__link { transform: translateY(13px); }
/* 7. leaf bigger + a bit lower (user) */
.reforma-premium-products::after { width: clamp(220px, 22vw, 340px) !important; top: 80px !important; }
/* 8. "Complete Hair Loss Plan" sub-header was 48px (bigger than the 43px section title) — Figma 40 vs section 58 */
.reforma-treatment-header h3.wp-block-heading { font-size: 1.95rem !important; }
/* End  */

/* ============================================================
   body font Nunito → POPPINS (user: "fonts not same as figma").
   Figma uses Circular Std (geometric sans); Nunito (rounded humanist) was a poor
   match. Poppins is the closest free geometric substitute (single-story g, circular
   bowls). Self-hosted (OFL). theme.json "body" family already repointed to Poppins;
   these @font-face + the :root var enforce it reliably (theme.json global-styles
   cache can lag). Leaf: moved down + right per user.
   ============================================================ */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
:root { --wp--preset--font-family--body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* leaf: move a bit down + to the right (user) */
.reforma-premium-products::after { top: 110px !important; right: calc(-1 * (50vw - 50%) - 55px) !important; }
/* End  */

/* ============================================================
   section LEAD paragraphs are Playfair Display 500 (serif) in Figma
   (user-confirmed: hero CONTENT = Playfair Display 16px; same for section intros).
   Sans (Poppins) stays everywhere else — nav, buttons, eyebrows, tabs, card titles,
   CARD DESCRIPTIONS (14px), VIEW DETAILS. Target the paragraph directly after each
   section heading (NOT h3+p, so card descriptions stay sans).
   ============================================================ */
.reforma-hero-band h1.wp-block-heading + p,
.reforma-rooted h2.wp-block-heading + p,
.reforma-premium-products h2.wp-block-heading + p,
.reforma-research-purity h2.wp-block-heading + p,
.reforma-news-insights h2.wp-block-heading + p,
.reforma-visionary-leadership h2.wp-block-heading + p,
.reforma-contact-band-left h2.wp-block-heading + p {
	font-family: var(--wp--preset--font-family--display) !important;   /* Playfair Display serif */
	font-weight: 500 !important;
}
/* End  */

/* ============================================================
   leaf: more down + more right + a bit bigger (user). Overrides the
   /86 leaf size+position. Gutter-aware right keeps the corner bleed at every width.
   ============================================================ */
.reforma-premium-products::after {
	top: 150px !important;
	right: calc(-1 * (50vw - 50%) - 90px) !important;
	width: clamp(260px, 26vw, 400px) !important;
}
/* End  */

/* ============================================================
   stats-bar numbers/labels were FIXED-too-big (user: "very big font size").
   has-5xl (64px) + has-xl (28px) don't scale with viewport, so at 1440 the 64px number
   dwarfed the 43px hero heading. Make them fluid → ~48px/18px @1440, 64px/24px @1920
   (Figma proportions). Scoped to .reforma-stats-bar (home + about reuse it).
   ============================================================ */
.reforma-stats-bar h2.wp-block-heading { font-size: clamp(2.5rem, 3.34vw, 4rem) !important; }
.reforma-stats-bar p.has-xl-font-size { font-size: clamp(1rem, 1.25vw, 1.5rem) !important; }
/* End  */

/* ============================================================
   (user) sections from "Who We Are" (rooted) → end + footer should render
   at the 90%-zoom proportion at 100% browser zoom (content read too big at 1440).
   Header + hero + stats-bar stay 100% (excluded). zoom:0.9 replicates the browser zoom
   the user preferred. body overflow-x:clip absorbs the leaf bleed (no scrollbar).
   Also: stats-bar bg → #29514c at 90% alpha (E5) per user; leaf bigger + lower + right.
   ============================================================ */
.reforma-rooted,
.reforma-premium-products,
.reforma-treatment-plan,
.reforma-research-purity,
.reforma-news-insights,
.reforma-contact-band,
.reforma-visionary-leadership,
.reforma-logo-wall,
footer.wp-block-template-part { zoom: 0.9; }
html, body { overflow-x: clip; }   /* absorb the leaf bleed — clip (not hidden) keeps the sticky header working */
.reforma-stats-bar { background-color: oklch(0.457 0.085 169 / 0.898) !important; }  /* #29514cE5 */
.reforma-premium-products::after {
	width: clamp(360px, 35vw, 520px) !important;
	top: 200px !important;
	right: calc(-1 * (50vw - 50%) - 120px) !important;
}
/* End  */

/* ============================================================
   (user) (1) make ALL pages consistent: scale every NON-home page's content
   sections to 90% like home (heroes stay 100%, footer already zoomed globally in ,
   header stays 100%). (2) stats bar → 4 separate boxes, all #29514c except "15+ Years"
   (2nd) at 90% alpha #29514cE5. (3) leaf down + right more.
   ============================================================ */
/* 1. non-home pages: zoom content sections 0.9, keep heroes at 100% */
body:not(.home) .wp-block-post-content > *:not([class*="hero"]) { zoom: 0.9; }
/* 2. stats bar = 4 boxes (page bg shows in the gaps so the 2nd box's 90% alpha reads) */
.reforma-stats-bar { background-color: transparent !important; }
.reforma-stats-bar .wp-block-column {
	background-color: oklch(0.457 0.085 169) !important;          /* #29514c */
	padding: 1.75rem 1rem !important;
	border-radius: 10px !important;
	border: 0 !important;
}
.reforma-stats-bar .wp-block-column:nth-child(2) { background-color: oklch(0.457 0.085 169 / 0.898) !important; }  /* #29514cE5 */
/* 3. leaf: down + right more */
.reforma-premium-products::after { top: 270px !important; right: calc(-1 * (50vw - 50%) - 175px) !important; }
/* End  */

/* ============================================================
   (user reference) stats = 4 ADJACENT rectangular cells (no gaps, no radius),
   one continuous bar with the 2nd cell ("15+ Years") lighter (90% alpha shows page bg).
   Leaf pushed further right.
   ============================================================ */
.reforma-stats-bar .wp-block-columns { gap: 0 !important; }
.reforma-stats-bar .wp-block-column { border-radius: 0 !important; }
.reforma-premium-products::after { right: calc(-1 * (50vw - 50%) - 230px) !important; }
/* End  */

/* ============================================================
   stats bar FULL-WIDTH edge-to-edge (was capped 1400 centered) + content
   LEFT-aligned (Figma) so all 4 boxes are equal & flush; leaf more right.
   ============================================================ */
.reforma-stats-bar { padding-left: 0 !important; padding-right: 0 !important; }
.reforma-stats-bar .wp-block-columns { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.reforma-stats-bar .wp-block-column { text-align: left !important; padding-left: 2.5rem !important; padding-right: 1rem !important; }
.reforma-stats-bar .wp-block-column .wp-block-heading,
.reforma-stats-bar .wp-block-column p { text-align: left !important; }
.reforma-premium-products::after { right: calc(-1 * (50vw - 50%) - 290px) !important; }
/* End  */

/* ============================================================
   Hair Loss section → Figma parity:
   - eyebrows ("Hair Loss Treatments" / "Best Results") = title-case + dash (dash uses
     currentColor → green on the section eyebrow, white on the green card's eyebrow).
   - "Plans" = green Merienda accent (ACF field treatment_title updated to wrap <em>Plans</em>;
     the heading is ACF-bound so the field — not the inline fallback — drives render).
   - "View All Treatments" button → top-right beside the heading (header group = flex row).
   ============================================================ */
.reforma-treatment-plan .reforma-eyebrow { display:flex !important; align-items:center !important; gap:12px !important; text-transform:none !important; letter-spacing:normal !important; }
.reforma-treatment-plan .reforma-eyebrow::before { content:"" !important; flex:0 0 auto !important; width:32px !important; height:2px !important; background:currentColor !important; }
.reforma-treatment-plan h2.wp-block-heading em { font-family:'Merienda',cursive !important; font-style:normal !important; font-weight:600 !important; color:var(--wp--preset--color--accent-purple) !important; }
.reforma-treatment-plan .wp-block-group.is-content-justification-space-between { flex-direction:row !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:2rem !important; }
/* End  */

/* ============================================================
   stats boxes too short/small vs Figma (boxes are 480x257 @1920, number 64,
   label 24). Make boxes taller + number/label bigger to match the reference.
   ============================================================ */
.reforma-stats-bar .wp-block-column { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.reforma-stats-bar h2.wp-block-heading { font-size: clamp(3.25rem, 4vw, 4rem) !important; line-height: 1.1 !important; }
.reforma-stats-bar p.has-xl-font-size { font-size: 1.25rem !important; }
/* End  */

/* ============================================================
   (user) close the white gap between hero and stats: pull the stats bar up
   to tuck under the hero (overlapping the image bottom, Figma-style). Hero height kept.
   Numbers back to 48px (user) — boxes stay tall (w97 padding).
   ============================================================ */
.reforma-stats-bar { margin-top: -210px !important; position: relative; z-index: 2; }
.reforma-stats-bar h2.wp-block-heading { font-size: 3rem !important; }   /* 48px (was 58) */
/* End  */

/* ============================================================
   fix: the  eyebrow dash was wrongly applied to the treatment-card
   CATEGORY labels ("Prescription"/"Topical"/…). Figma shows those as plain green text,
   no dash. Restrict the dash to the section/card-header eyebrows only.
   ============================================================ */
.reforma-treatment-plan .reforma-treatment-card .reforma-eyebrow { display: block !important; }
.reforma-treatment-plan .reforma-treatment-card .reforma-eyebrow::before { content: none !important; display: none !important; }
/* End  */

/* ============================================================
   (user) hero + stats final fit:
   - stat numbers CENTERED (reverses w95 left-align).
   - stat boxes shorter (pad 3.5rem→1.75rem) + section pad 36→20px so the
     hero+stats fit a 900px viewport without scroll (real visitor: hero bottom
     = 900, stats bottom ≈ 897). Pull-up margin -210→-233.
   - hero TEXT column nudged up ~80px (was vertically centered).
   - header zoom stays 1.0 (NOT reduced — user directive).
   ============================================================ */
.reforma-stats-bar .wp-block-column { text-align: center !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.reforma-stats-bar .wp-block-column .wp-block-heading,
.reforma-stats-bar .wp-block-column p { text-align: center !important; }
.reforma-stats-bar { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; margin-top: -233px !important; }
.reforma-hero-band .wp-block-columns > .wp-block-column.is-vertically-aligned-center:first-child { margin-top: -80px !important; }
/* End  */

/* ============================================================
   Hair Loss section → 100% Figma:
   - BESTSELLER badge added to all 4 treatment cards (post 443 content, not CSS).
   - plan chips: Figma shows ROUNDED RECTANGLES (~14px) with a subtle border,
     NOT full 999px pills. Override the  pill radius. Dot bullet kept.
   ============================================================ */
.reforma-plan-chip { border-radius: 14px !important; border: 1px solid oklch(100% 0 0 / 0.18) !important; }
/* End  */

/* ============================================================
   (user) hero content up more + lead paragraph in exactly 3 lines
   + stats bar bottom flush with the hero image bottom.
   Supersedes the w100 hero-margin (-80→-140) and stats-margin (-233→-230):
   - hero TEXT column up more (col is align-self:center, so a -140px margin nets
     ~ -30px of actual shift; verified h1 246→216).
   - lead paragraph max-width 470px → wraps to the exact 3 lines the user wants
     ("…leading" / "…wellness" / "supply — …market.").
   - stats margin -233→-230 so stats bottom (900) == hero image bottom (900).
   ============================================================ */
.reforma-hero-band .wp-block-columns > .wp-block-column.is-vertically-aligned-center:first-child { margin-top: -140px !important; }
.reforma-hero-band .wp-block-columns > .wp-block-column:first-child p { max-width: 470px !important; }
.reforma-stats-bar { margin-top: -230px !important; }
/* End  */

/* ============================================================
   (user) stats GREEN bar must end exactly at the hero image bottom
   + hero content shifted right.
   ROOT CAUSE of the "image peeks below the green bar": the green fill lives on
   the inner .wp-block-column cells, but the .reforma-stats-bar SECTION has a
   36px transparent padding-bottom — so the green ended 36px ABOVE the section/
   image bottom, letting the hero image show through that 36px strip.
   FIX: drop the section padding-bottom AND move the bar down 36px (margin
   -230→-194 = -(padding-top 36 + cells 158)) so GREEN bottom == image bottom.
   This 36px gap is a fixed token (viewport-independent), so -194 aligns at all widths.
   ============================================================ */
.reforma-stats-bar { padding-bottom: 0 !important; margin-top: -194px !important; }
@media (min-width: 782px) {
  .reforma-hero-band .wp-block-columns > .wp-block-column:first-child { padding-left: 104px !important; }
}
/* End  */

/* ============================================================
   (user) treatment cards must match the Figma card exactly:
   - card title was brand-BLUE → Figma is near-BLACK + bold.
   - add the thin divider line above the Book Now / Details buttons (Figma has it).
   - BESTSELLER badge bigger (Figma tag is larger than the small live pill).
   (category is already title-case green; green plan card already matches — no change.)
   ============================================================ */
.reforma-treatment-cards .reforma-treatment-card h3.wp-block-heading { color: oklch(0.23 0.02 256) !important; font-weight: 700 !important; }
.reforma-treatment-cards .reforma-treatment-card .wp-block-buttons { border-top: 1px solid oklch(0 0 0 / 0.1) !important; padding-top: 1.5rem !important; margin-top: 1.5rem !important; }
.reforma-treatment-cards .reforma-bestseller-badge { font-size: 0.875rem !important; padding: 9px 20px !important; }
/* End  */

/* ============================================================
   (user) pixel-exact pass:
   1) stats bar down 1px more (green bottom 1px below image, user request).
   2) treatment card EXACT Figma: uniform rounded card (was notch 0 20px 0 0),
      uniform rounded buttons, Details = light-grey border + dark text (was blue),
      BESTSELLER badge bigger + chamfered bottom-right corner. Body copy = exact
      Figma wording (set on ACF fields, not CSS).
   3) green plan card EXACT Figma: bigger heading + serif numbers + labels, wider
      spacing between the 3 stats, number/label pair tightened.
   ============================================================ */
.reforma-stats-bar { margin-top: -193px !important; }
/* treatment cards */
.reforma-treatment-cards .reforma-treatment-card.wp-block-column { border-radius: 20px !important; }
.reforma-treatment-cards .reforma-treatment-card .wp-block-button__link { border-radius: 8px !important; }
.reforma-treatment-cards .reforma-treatment-card .is-style-outline .wp-block-button__link { color: oklch(0.35 0.02 256) !important; border-color: oklch(0 0 0 / 0.18) !important; }
.reforma-treatment-cards .reforma-bestseller-badge { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% 58%, 80% 100%, 0 100%) !important; font-size: 0.9375rem !important; padding: 12px 24px !important; }
/* green plan card */
.reforma-treatment-header h3.wp-block-heading { font-size: 2.5rem !important; }
.reforma-treatment-header h4.wp-block-heading { font-size: 2.75rem !important; }
.reforma-treatment-header p.has-sm-font-size { font-size: 1.125rem !important; }
.reforma-treatment-header .wp-block-column:first-child > .wp-block-group { gap: 2.75rem !important; }
.reforma-treatment-header .wp-block-column:first-child > .wp-block-group > .wp-block-group { gap: 0 !important; }
/* End  */

/* ============================================================
   (user) treatment-card badge + button SHAPES corrected to Figma,
   green-card chips moved right.
   - BESTSELLER badge: Figma is a UNIFORM rounded rectangle (~10px), NOT the
     chamfer I used in w105 — remove clip-path.
   - buttons: Figma cards use the brand asymmetric corner — "Book Now" has a
     SHARP top-right corner, "Details" a SHARP top-left corner, the other three
     corners rounded ~10px (was uniform 8px in w105).
   - green plan chips (Dermal Fillers/Minoxidil/Hair Vitamins/Power Shampoo) nudged right.
   ============================================================ */
.reforma-treatment-cards .reforma-treatment-card .reforma-bestseller-badge { clip-path: none !important; border-radius: 10px !important; }
.reforma-treatment-cards .reforma-treatment-card .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-radius: 10px 0 10px 10px !important; }
.reforma-treatment-cards .reforma-treatment-card .is-style-outline .wp-block-button__link { border-radius: 0 10px 10px 10px !important; }
.reforma-treatment-header .reforma-plan-chip { margin-left: 56px !important; }
/* End  */

/* ============================================================
   (user) correct the card BUTTON shape + chips further right.
   Zoomed the Figma 5x: BOTH "Book Now" and "Details" are FLAT on the left
   (square TL+BL) and ROUNDED on the right (TR+BR ~12px) → `0 12px 12px 0`.
   (w106 wrongly used a single sharp inner-top corner.) Selectors mirror w106's
   specificity so they win the cascade. Chips margin-left 56→120px.
   ============================================================ */
.reforma-treatment-cards .reforma-treatment-card .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-radius: 0 12px 12px 0 !important; }
.reforma-treatment-cards .reforma-treatment-card .is-style-outline .wp-block-button__link { border-radius: 0 12px 12px 0 !important; }
.reforma-treatment-header .reforma-plan-chip { margin-left: 120px !important; }
/* End  */

/* ============================================================
   (user, explicit) card buttons each have ONE rounded corner:
   "Book Now" rounded at BOTTOM-RIGHT only; "Details" rounded at BOTTOM-LEFT only.
   (the two inner-bottom corners are rounded, all other corners square.)
   ============================================================ */
.reforma-treatment-cards .reforma-treatment-card .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-radius: 0 0 12px 0 !important; }
.reforma-treatment-cards .reforma-treatment-card .is-style-outline .wp-block-button__link { border-radius: 0 0 0 12px !important; }
/* End  */

/* ============================================================
   "Where Research Meets Purity" (Science & Nature) → Figma:
   - pillar feature icons recreated as GREEN two-tone SVGs (asset files swapped)
     + sized up 36→48px (Figma icons are larger & green, were small black).
   - pillar titles brand-BLUE → dark navy (Figma) + 17→20px.
   - teal→blue gradient accent line under the first cell (Bioactive), Figma.
   NOTE: icons are recreated placeholders pending exact Figma SVG export.
   ============================================================ */
.reforma-research-purity .reforma-pillar-cell h3 { color: oklch(0.30 0.045 256) !important; font-size: 1.25rem !important; }
.reforma-research-purity .reforma-pillar-cell img { width: auto !important; height: 66px !important; }
.reforma-research-purity .reforma-pillar-cell:has(img[src*="bioactive"]) { position: relative; }
.reforma-research-purity .reforma-pillar-cell:has(img[src*="bioactive"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--wp--preset--color--accent-purple), var(--wp--preset--color--brand-gold)); }
/* End  */

/* ============================================================
   "News & Insights" section → Figma:
   - section header (eyebrow + H2) was CENTERED; Figma is LEFT-aligned.
   - card content (category/title/summary/date) set to exact Figma copy via ACF.
   ============================================================ */
.reforma-news-insights h2.wp-block-heading { text-align: left !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.reforma-news-insights .reforma-eyebrow { text-align: left !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* End  */

/* ============================================================
   research pillar cells were too SPREAD OUT vertically vs Figma:
   live icon→title gap 31px, title→desc 28px; Figma is compact (~12px each).
   Tighten the icon/title/description stacking so the grid matches the Figma.
   ============================================================ */
.reforma-research-purity .reforma-pillar-cell .wp-block-image { margin-bottom: 12px !important; margin-top: 0 !important; }
.reforma-research-purity .reforma-pillar-cell h3.wp-block-heading { margin-top: 0 !important; margin-bottom: 8px !important; }
.reforma-research-purity .reforma-pillar-cell p { margin-top: 0 !important; }
/* End  */

/* ============================================================
   Research-Purity + News & Insights → pixel-match Figma
   (nodes 53:159 / 53:158) per user target screenshots.
   Figma fact: ALL eyebrows = Circular Std(→Poppins) 20px w450 green TITLE-CASE
   (not uppercase 13px). Already adopted on rooted/premium/treatment; here we
   bring research + news in line.
   ============================================================ */

/* --- Research eyebrow "Science & Nature" -------------------------------------
   Title-case 20px green + "── " dash to the LEFT of the text (same motif as
   rooted/premium/treatment). The Figma overlap was a UI mistake (user-confirmed)
   — use the clean dash-beside-text like every other section. */
.reforma-research-purity .reforma-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;            /* 20px (Figma) */
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-research-purity .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}

/* --- Research lead paragraph -------------------------------------------------
   Figma body = Playfair 16px (live rendered 20px → wrapped 5 lines; Figma wraps
   4). Scope to the left column's lead only — NOT the pillar descriptions. */
.reforma-research-purity > .wp-block-columns > .wp-block-column:first-child p:not(.reforma-eyebrow) {
	font-size: 1rem !important;               /* 16px (Figma) */
	line-height: 1.45 !important;
	max-width: 483px;                          /* Figma body bbox width */
}

/* --- News eyebrow "Latest Updates" ------------------------------------------
   Figma indents this eyebrow 50px → standard "── Text" dash-left motif
   (identical to rooted/premium/treatment). Title-case 20px green. */
.reforma-news-insights .reforma-eyebrow {
	display: flex !important;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;            /* 20px (Figma) */
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-news-insights .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}

/* --- News card category labels ("Partnership" / "Academy" / "Year in Review")
   Figma: 16px w450 green TITLE-CASE (live = uppercase xs). Scope to cards
   (columns) so the section eyebrow above is untouched. */
.reforma-news-insights .wp-block-column p.has-accent-purple-color.has-xs-font-size {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 1rem !important;               /* 16px (Figma) */
	font-weight: 500 !important;
}

/* --- News card titles -------------------------------------------------------
   Figma card title = 16px (live 22.4px lg → wrapped 3 lines; Figma wraps 2).
   Keep navy + weight 500. */
.reforma-news-insights .wp-block-column h3.wp-block-heading {
	font-size: 1rem !important;               /* 16px (Figma) */
	line-height: 1.3 !important;
}
/* End  */

/* ============================================================
   Research + News deeper Figma match (user round 2):
   icons two-tone (un-mask), grid borders, news card curve/button/image/date,
   side-flower placement. Geometry from figma-cache home-deep.json (53:159/53:158/14:499).
   ============================================================ */

/* --- R: pillar icons are TWO-TONE Figma SVGs (#29514c outline + #ABD19F accent).
   The  CSS masked them to a single flat accent-purple, killing the accent.
   Remove the mask + flat fill so the SVGs render their own colors. */
.reforma-research-purity .reforma-pillar-icon img {
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
	width: auto !important;
	height: 66px !important;                   /* Figma icon ~59–67px tall, non-square */
	object-fit: contain;
}

/* --- R: pillar grid borders. Figma (52:134) = NO outer box; only internal
   dividers: 1 vertical hairline between the 2 columns + 2 horizontal hairlines
   between the 3 rows, green #29514c ~0.2px (render faint). Plus the existing
   teal→blue 4px gradient bar under Bioactive (kept). Kill the  outer box. */
.reforma-research-purity .reforma-pillar-grid {
	border-top: 0 !important;
	border-left: 0 !important;
}
.reforma-research-purity .reforma-pillar-cell.wp-block-column {
	border-right: 0 !important;
	border-bottom: 0 !important;
}
.reforma-research-purity .reforma-pillar-row .reforma-pillar-cell:first-child {
	border-right: 1px solid oklch(0.457 0.085 169 / 0.3) !important;   /* vertical divider */
}
.reforma-research-purity .reforma-pillar-row:not(:last-child) {
	border-bottom: 1px solid oklch(0.457 0.085 169 / 0.3) !important;  /* horizontal dividers (rows 1,2) */
}

/* --- N: featured card 1 corner = Figma radii [TL20 TR20 BR20 BL100] — the big
   bottom-LEFT sweep (live had it on top-left / 0). position:relative for the
   corner button. */
.reforma-news-insights .reforma-news-card--featured {
	border-radius: 20px 20px 20px 100px !important;
	border-top-left-radius: 20px !important;   /* undo the old top-left 100px */
	overflow: hidden !important;
	position: relative !important;
	padding: 22px !important;                   /* Figma text inset ~25px */
}
.reforma-news-insights .reforma-news-card--featured .reforma-news-card-image--featured img,
.reforma-news-insights .reforma-news-card--featured .reforma-news-card-media--overlaid img {
	border-top-left-radius: 0 !important;       /* image top corners follow the card clip */
}
/* keep READ FULL STORY clear of the 100px bottom-left arc */
.reforma-news-insights .reforma-news-card--featured .reforma-news-card-footer {
	padding-bottom: 6px;
}

/* --- N: card images are PORTRAIT in Figma (Frame 48 = 380×439 ≈ 0.866), not 16:9. */
.reforma-news-insights .reforma-news-card-media--overlaid .wp-block-image img {
	aspect-ratio: 380 / 439 !important;
}

/* --- N: date badge is bottom-RIGHT of the image in Figma (live had bottom-left). */
.reforma-news-insights .reforma-news-card-media--overlaid .reforma-news-date-pill {
	left: auto !important;
	right: var(--wp--preset--spacing--30) !important;
}

/* --- N: card-1 blue arrow button = wide ~103×48 flush in the bottom-right
   corner (Figma group 1171276088), not a 44px inline square. Absolute-pin it to
   the card corner; bottom-right matches the card's 20px, top-left rounded. */
.reforma-news-insights .reforma-news-card-arrow {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	z-index: 3;
}
.reforma-news-insights .reforma-news-card-arrow > .wp-block-button__link {
	width: 96px !important;
	height: 48px !important;
	border-radius: 22px 0 20px 0 !important;    /* TL rounded; BR follows card corner */
}
/* footer no longer needs to reserve the inline arrow slot */
.reforma-news-insights .reforma-news-card--featured .reforma-news-card-footer {
	justify-content: flex-start;
	padding-right: 96px;                         /* leave room above the corner button */
}

/* --- N: side flower (leaf 14:499) is TOP-aligned with the section and bleeds
   far left (Figma x=-252 y=section-top, ~818×1082). Live anchored bottom = wrong
   place. Re-anchor to the top-left, taller, bleeding off the left edge. */
.reforma-news-insights::after {
	top: 24px !important;
	bottom: auto !important;
	left: clamp(-260px, -13vw, -150px) !important;
	width: clamp(340px, 38vw, 660px) !important;
	height: clamp(560px, 64vw, 1040px) !important;
	background-position: top left !important;
	opacity: 0.85 !important;
}
/* End  */

/* ============================================================
   user round 3:
   (a) research grid lines = solid thin green per Figma;
   (b) flower further left;
   (c) News cards DYNAMIC featured-on-hover (JS toggles .is-featured; first card
       featured by default). One card featured at a time, follows the mouse.
   ============================================================ */

/* (a) Research grid dividers — Figma strokes are SOLID green #29514c (thin).
   Was 0.3-alpha (looked grey/faint). Make them solid-thin green. */
.reforma-research-purity .reforma-pillar-row .reforma-pillar-cell:first-child {
	border-right: 1px solid oklch(0.457 0.085 169 / 0.55) !important;
}
.reforma-research-purity .reforma-pillar-row:not(:last-child) {
	border-bottom: 1px solid oklch(0.457 0.085 169 / 0.55) !important;
}
/* teal→blue gradient accent under the Bioactive cell — make it a crisp 3px bar */
.reforma-research-purity .reforma-pillar-cell:has(img[src*="bioactive"])::after {
	height: 3px !important;
	bottom: -1px !important;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-purple), var(--wp--preset--color--brand-gold)) !important;
}

/* (b) Side flower further left */
.reforma-news-insights::after {
	left: clamp(-400px, -21vw, -250px) !important;
}

/* (c) ---- News cards: PLAIN base (all cards) ---- */
.reforma-news-insights .reforma-news-card {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	position: relative;
	transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.reforma-news-insights .reforma-news-card .reforma-news-card-media--overlaid img {
	border-radius: var(--wp--preset--radius--small) !important;
}
/* footer = READ FULL STORY + arrow on ONE vertically-centered row */
.reforma-news-insights .reforma-news-card-footer {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: auto !important;
}
.reforma-news-insights .reforma-news-card-footer .wp-block-buttons { margin: 0 !important; }
/* PLAIN arrow = small green inline → (no box), sits right after READ FULL STORY */
.reforma-news-insights .reforma-news-card-arrow > .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--accent-purple) !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 1.15rem !important;
	line-height: 1 !important;
}

/* ---- News cards: FEATURED (.is-featured — first card by default, follows hover) ---- */
.reforma-news-insights .reforma-news-card.is-featured {
	background: var(--wp--preset--color--white) !important;
	box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06), 0 16px 40px oklch(0% 0 0 / 0.10) !important;
	border-radius: 20px 20px 20px 100px !important;   /* big bottom-left sweep */
	padding: 0 !important;                              /* image flush; text inset below */
}
/* inset only the text children (image stays flush, full-width) */
.reforma-news-insights .reforma-news-card.is-featured > :not(.reforma-news-card-media) {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
.reforma-news-insights .reforma-news-card.is-featured > .reforma-news-card-media--overlaid {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	overflow: hidden;
}
/* footer reserves the corner-button slot; READ FULL STORY centers at button height */
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-footer {
	min-height: 52px !important;
	padding-right: 116px !important;
	padding-bottom: 0 !important;
}
/* FEATURED arrow = wide blue box flush in the bottom-right corner */
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-arrow {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	z-index: 3;
}
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-arrow > .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 104px !important;
	height: 52px !important;
	padding: 0 !important;
	font-size: 1.35rem !important;
	color: var(--wp--preset--color--white) !important;
	background: var(--wp--preset--color--brand-gold) !important;
	border-radius: 28px 0 20px 0 !important;            /* big rounded top-left; BR follows card */
}
/* End  */

/* ============================================================
   round-3 refinements:
   - research grid dividers were GREEN; Figma line rects fill = #D9D9D9 (light
     grey) → switch dividers to the neutral hairline grey; cells get the slightly
     whiter "page" fill (Figma cell fill #F2F9FF) for the subtle boxed look.
   - featured card: text inset 24→30 (READ FULL STORY a touch right).
   - flower further left.
   ============================================================ */

/* research grid: neutral grey hairlines (not green) + subtle cell fill */
.reforma-research-purity .reforma-pillar-cell.wp-block-column {
	background: var(--wp--preset--color--page) !important;
}
.reforma-research-purity .reforma-pillar-row .reforma-pillar-cell:first-child {
	border-right: 1px solid var(--wp--preset--color--hairline) !important;
}
.reforma-research-purity .reforma-pillar-row:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--hairline) !important;
}

/* featured card: a bit more text inset (moves READ FULL STORY + content right) */
.reforma-news-insights .reforma-news-card.is-featured > :not(.reforma-news-card-media) {
	padding-left: 30px !important;
	padding-right: 30px !important;
}

/* flower further left */
.reforma-news-insights::after {
	left: clamp(-480px, -26vw, -320px) !important;
}
/* End  */

/* ============================================================
   News cards overhaul (user round 4):
   - BIG curve is TOP-LEFT (not bottom-left).
   - images render PORTRAIT (a fixed height:220px was overriding aspect-ratio).
   - ALL cards same height; image flush full-width + text inset (consistent).
   - date badge matches Figma (bigger, bottom-right).
   - flower further left + down.
   ============================================================ */

/* equal-height columns + cards fill the column.
   The `is-vertically-aligned-top` class sets align-self:flex-start which blocks
   the stretch — force align-self:stretch so all 3 cards match the tallest. */
.reforma-news-insights .wp-block-columns.are-vertically-aligned-top,
.reforma-news-insights .wp-block-columns { align-items: stretch !important; }
.reforma-news-insights .reforma-news-card.wp-block-column,
.reforma-news-insights .reforma-news-card.is-vertically-aligned-top {
	align-self: stretch !important;
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	padding: 0 !important;
}

/* image: flush, full-width, PORTRAIT (kill the fixed 220px height) — SAME in every card */
.reforma-news-insights .reforma-news-card .reforma-news-card-media--overlaid {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}
.reforma-news-insights .reforma-news-card img {
	width: 100% !important;
	height: auto !important;                 /* was 220px → broke the portrait aspect */
	aspect-ratio: 380 / 439 !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: var(--wp--preset--radius--small) !important;
}
/* text children inset 24px in ALL cards (image stays flush) */
.reforma-news-insights .reforma-news-card > :not(.reforma-news-card-media) {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
.reforma-news-insights .reforma-news-card-footer {
	margin-top: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* date badge — Figma 138×32 green, bottom-RIGHT of the image */
.reforma-news-insights .reforma-news-card-media--overlaid .reforma-news-date-pill {
	left: auto !important;
	right: 16px !important;
	bottom: 16px !important;
	top: auto !important;
	padding: 7px 16px !important;
	border-radius: 6px !important;
	font-size: 0.875rem !important;
	line-height: 1.2 !important;
}

/* FEATURED (.is-featured): big curve TOP-LEFT + white bg + shadow + blue corner button */
.reforma-news-insights .reforma-news-card.is-featured {
	background: var(--wp--preset--color--white) !important;
	box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06), 0 16px 40px oklch(0% 0 0 / 0.10) !important;
	border-radius: 100px 20px 20px 20px !important;   /* BIG sweep = TOP-LEFT */
	overflow: hidden !important;
}
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-footer {
	min-height: 52px !important;
	padding-right: 116px !important;
}
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-arrow {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	z-index: 3;
}
.reforma-news-insights .reforma-news-card.is-featured .reforma-news-card-arrow > .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 104px !important;
	height: 52px !important;
	padding: 0 !important;
	font-size: 1.35rem !important;
	color: var(--wp--preset--color--white) !important;
	background: var(--wp--preset--color--brand-gold) !important;
	border-radius: 28px 0 20px 0 !important;
}

/* flower further left AND down */
.reforma-news-insights::after {
	left: clamp(-560px, -30vw, -380px) !important;
	top: 130px !important;
}
/* End  */

/* ============================================================
   Get in Touch (contact) + Visionary Leadership → Figma
   (nodes 53:157 / 54:164). Geometry from figma-cache home-deep.json.
   ============================================================ */

/* --- Contact green card: Figma Rectangle 36 radii [0,0,200,0] = big BOTTOM-RIGHT
   sweep (live was square). The bottom-right corner is empty green space so the
   curve needs no overflow clip. --- */
.reforma-contact-band .reforma-contact-booking-card {
	border-radius: 0 0 200px 0 !important;
}

/* --- Contact eyebrow "Contact Us": title-case 20px green + "── " dash-left --- */
.reforma-contact-band .reforma-eyebrow {
	display: flex !important;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-contact-band .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}

/* --- Leadership eyebrow "Our People": same dash motif but CENTERED (section is centered) --- */
.reforma-visionary-leadership .reforma-eyebrow {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}
.reforma-visionary-leadership .reforma-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent-purple);
}

/* --- Leadership portraits: Figma asymmetric corner curves (368×384, radius 100px)
   Mohamed (1) br=100 · Sarah (2) tl/tr/br=100 bl=0 · Layla (3) tl=100 --- */
.reforma-visionary-leadership .reforma-leadership-card img {
	border-radius: 0 !important;
	overflow: hidden;
}
.reforma-visionary-leadership .reforma-leadership-card:nth-child(1) img {
	border-radius: 0 0 100px 0 !important;
}
.reforma-visionary-leadership .reforma-leadership-card:nth-child(2) img {
	border-radius: 100px 100px 100px 0 !important;
}
.reforma-visionary-leadership .reforma-leadership-card:nth-child(3) img {
	border-radius: 100px 0 0 0 !important;
}
/* End  */

/* ============================================================
   Contact booking form rebuilt to Figma (white icon-inside fields,
   added Select service + time, blue Submit). Figma fields 226×44 r10 #F2F9FF.
   ============================================================ */
.reforma-contact-booking-card h3.wp-block-heading { font-size: 2.25rem !important; } /* Book an appointment ≈36px */
.reforma-contact-booking-card .reforma-booking-form__row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.reforma-contact-booking-card .reforma-booking-form__field {
	position: relative;
	margin-bottom: 0;
}
.reforma-contact-booking-card .reforma-booking-form__field--message { margin: 0 0 18px; }
.reforma-contact-booking-card .reforma-booking-form__label { display: none !important; } /* placeholder-style per Figma */
.reforma-contact-booking-card .reforma-booking-form__icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--wp--preset--color--accent-purple); pointer-events: none;
}
.reforma-contact-booking-card .reforma-booking-form__icon svg,
.reforma-contact-booking-card .reforma-booking-form__chevron svg,
.reforma-contact-booking-card .reforma-booking-form__send svg { width: 100%; height: 100%; display: block; }
.reforma-contact-booking-card .reforma-booking-form__input {
	width: 100%; height: 44px; box-sizing: border-box;
	background: var(--wp--preset--color--page) !important;
	border: 0 !important; border-radius: 10px !important;
	padding: 0 14px 0 44px !important; font-size: 0.9375rem;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	box-shadow: none !important;
}
.reforma-contact-booking-card .reforma-booking-form__input::placeholder { color: var(--wp--preset--color--ink); opacity: 0.85; }
.reforma-contact-booking-card .reforma-booking-form__input--textarea {
	height: auto; min-height: 112px; padding: 14px 16px !important; resize: vertical;
}
.reforma-contact-booking-card .reforma-booking-form__field--select select {
	-webkit-appearance: none; appearance: none; padding-left: 14px; cursor: pointer;
}
.reforma-contact-booking-card .reforma-booking-form__chevron {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--wp--preset--color--ink); pointer-events: none;
}
.reforma-contact-booking-card .reforma-contact-submit-btn .wp-block-button__link {
	display: inline-flex !important; align-items: center; gap: 8px;
	background: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 10px !important; font-weight: 700 !important;
	padding: 12px 28px !important;
}
.reforma-contact-booking-card .reforma-booking-form__send { width: 18px; height: 18px; display: inline-block; }
/* tighten card padding so the 6 fields + message + submit sit comfortably */
.reforma-contact-booking-card {
	padding: 40px 44px !important;
}
/* End  */

/* ============================================================
   contact + leadership round-2 corrections (Figma render compare):
   - contact photo: curve BOTTOM-LEFT (was right) + un-mirror image + shorter (landscape).
   - contact card top-aligned with the heading.
   - leadership portraits: near-square aspect so heads aren't cropped.
   - side leaf bigger + down + right.
   ============================================================ */

/* contact photo: Figma Rectangle 40 — bottom-LEFT curve, landscape 588×377, head-right */
.reforma-contact-band .reforma-contact-image {
	border-radius: 0 0 0 100px !important;
	overflow: hidden !important;
}
.reforma-contact-band .reforma-contact-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 588 / 377 !important;   /* landscape → shorter than before */
	object-fit: cover !important;
	border-radius: 0 !important;
	transform: scaleX(-1);                /* un-mirror to match Figma (head on the right) */
}

/* contact card: top-align with the heading (Figma card top == eyebrow top) */
.reforma-contact-band .wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.is-vertically-aligned-center {
	align-self: flex-start !important;
}

/* leadership portraits: Figma 368×384 (near-square); keep heads framed (not cropped) */
.reforma-visionary-leadership .reforma-leadership-card img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 368 / 384 !important;
	object-fit: cover !important;
	object-position: center 22% !important;
}

/* side leaf: bigger + lower + further right */
.reforma-visionary-leadership::after {
	top: 40px !important;
	right: -90px !important;
	width: clamp(300px, 36vw, 660px) !important;
	height: clamp(520px, 72vw, 1180px) !important;
}
/* End  */

/* ============================================================
   contact + leadership round-3:
   - card bottom aligns with photo bottom (stretch full column height).
   - contact photo crop trims the top arm (object-position lower).
   - leadership people centered (source subjects sit right → shift crop).
   - leaf smaller + further right.
   ============================================================ */

/* contact card: stretch to the column height so its bottom lines up with the photo bottom */
.reforma-contact-band .wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.is-vertically-aligned-center {
	align-self: stretch !important;
}
.reforma-contact-band .reforma-contact-booking-card {
	height: 100% !important;
	box-sizing: border-box;
}

/* contact photo: show the head+shoulder band like Figma (less of the top arm/hand) */
.reforma-contact-band .reforma-contact-image img {
	object-position: center 64% !important;
}

/* leadership portraits: subjects sit on the right of the source → push the crop window
   right so they read centered like Figma */
.reforma-visionary-leadership .reforma-leadership-card img {
	object-position: 72% center !important;
}

/* side leaf: smaller + further right */
.reforma-visionary-leadership::after {
	top: 60px !important;
	right: -230px !important;
	width: clamp(220px, 26vw, 480px) !important;
	height: clamp(360px, 50vw, 860px) !important;
}
/* End  */

/* ============================================================
   photo bar above footer (logo-wall): 7 full-bleed tiles, taller to
   match Figma (~near-square), IG CTA reordered to position 3 via markup swap.
   ============================================================ */
.reforma-logo-wall .reforma-partner-col img,
.reforma-logo-wall .reforma-ig-cta img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
}
.reforma-logo-wall .reforma-partner-col,
.reforma-logo-wall .reforma-ig-cta {
	aspect-ratio: 274 / 262 !important;   /* Figma tile ≈ near-square, taller than the 216 it was */
	overflow: hidden;
}
/* End  */

/* ============================================================
   Who-We-Are table style + photo-bar tile shapes + softer IG blur.
   ============================================================ */

/* Who We Are 2x2 stat grid: Figma uses THIN green lines + SQUARE corners (live was
   2px + 10px rounded). */
#reforma-rooted .reforma-rooted-stats.wp-block-columns {
	border-width: 1px !important;
	border-radius: 0 !important;
	background-size: 1px 100%, 100% 1px !important;
}

/* Photo bar tiles: Figma Rectangles 42/44/46 give tiles 2/4/6 a 100px corner
   curve (top-right / top-left / bottom-right). Others stay square. */
.reforma-logo-wall .reforma-partner-col { overflow: hidden !important; }
.reforma-logo-wall .reforma-partner-col:nth-child(2) { border-radius: 0 100px 0 0 !important; }
.reforma-logo-wall .reforma-partner-col:nth-child(4) { border-radius: 100px 0 0 0 !important; }
.reforma-logo-wall .reforma-partner-col:nth-child(6) { border-radius: 0 0 100px 0 !important; }

/* IG CTA: blur was too strong (7px) — soften for the gentle Figma look */
.reforma-ig-cta .reforma-ig-cta-bg img {
	filter: blur(3px) brightness(0.92) saturate(1.02) !important;
	transform: scale(1.05) !important;
}
/* End  */

/* ============================================================

/* ===================================================================== */
/* About page: "Who We Are" gradient hero + breadcrumb        */
/* ===================================================================== */

/* Breadcrumb sub-bar */
.reforma-about-breadcrumb { border-bottom: 1px solid rgba(15, 40, 60, 0.07); }
.reforma-about-breadcrumb > .wp-block-columns { align-items: center; }
.reforma-back-pill .wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; }
.reforma-breadcrumb-trail { letter-spacing: 0.03em; margin: 0; }
.reforma-breadcrumb-sep { margin: 0 8px; opacity: 0.45; }
.reforma-breadcrumb-current { font-weight: 700; }

/* Who We Are gradient band */
.reforma-aboutwho {
  position: relative;
  overflow: clip;
  background: linear-gradient(100deg,
    var(--wp--preset--color--brand-gold) 0%,
    var(--wp--preset--color--brand-gold) 30%,
    var(--wp--preset--color--accent-purple) 100%);
}
.reforma-aboutwho > .wp-block-columns { position: relative; z-index: 2; }

/* eyebrow dash (mirrors home .reforma-rooted eyebrow) — applies to hero + mission */
.reforma-aboutwho .reforma-eyebrow { display: flex; align-items: center; gap: 12px; }
.reforma-aboutwho .reforma-eyebrow::before { content: ""; flex: 0 0 auto; width: 32px; height: 2px; background: currentColor; }
.reforma-eyebrow--light, .reforma-eyebrow--light::before { color: #ffffff !important; }

/* About eyebrows render Title Case (design), not the global uppercase */
.reforma-aboutwho .reforma-eyebrow,
.reforma-mission-card .reforma-eyebrow,
.reforma-about-who-we-are .reforma-eyebrow,
.reforma-about-values .reforma-eyebrow,
.reforma-about-cta .reforma-eyebrow { text-transform: none !important; letter-spacing: 0.02em; }

/* CTA heading accent stays white italic display on the navy band */
.reforma-about-cta h2 em {
  color: var(--wp--preset--color--white);
  font-style: italic;
  font-family: var(--wp--preset--font-family--display);
  font-weight: inherit;
}

/* italic "Are" must read white on the gradient (global .wp-block-heading em colours it blue) */
.reforma-aboutwho h1 em {
  color: #ffffff !important;
  font-style: italic;
  font-family: var(--wp--preset--font-family--display);
  font-weight: inherit;
}

/* Mission card */
.reforma-mission-card {
  background: var(--wp--preset--color--page);
  box-shadow: 0 18px 50px rgba(10, 30, 45, 0.14);
  max-width: 520px;
}
.reforma-mission-quote { font-style: normal; }

/* Stats card (white, asymmetric notched corner) */
.reforma-aboutwho-right { display: flex; justify-content: flex-end; }
.reforma-aboutwho-statscard {
  background: var(--wp--preset--color--page);
  border-radius: 0;
  border-top-right-radius: 28px;
  border-bottom-left-radius: 64px;
  box-shadow: 0 24px 64px rgba(10, 30, 45, 0.20);
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.reforma-aboutwho-statsrow { margin: 0 !important; }
.reforma-aboutwho-statsrow + .reforma-aboutwho-statsrow .reforma-aboutwho-statcell {
  border-top: 1px solid rgba(15, 40, 60, 0.09);
}
.reforma-aboutwho-statcell { padding: 38px 34px; text-align: left; }
.reforma-aboutwho-statsrow .reforma-aboutwho-statcell:first-child {
  border-right: 1px solid rgba(15, 40, 60, 0.09);
}
.reforma-statcell-label { margin: 0; opacity: 0.7; font-weight: 500; }

/* Outlined monstera decoration (Figma node 127:457), bleeding off the right */
.reforma-aboutwho-leaf {
  position: absolute;
  top: 50%; right: -21%;
  transform: translateY(-50%);
  width: 44%; height: 178%;
  background: transparent;
  background-size: contain;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 781px) {
  .reforma-about-breadcrumb > .wp-block-columns { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; }
  .reforma-aboutwho > .wp-block-columns { flex-direction: column !important; gap: 32px !important; }
  .reforma-aboutwho .wp-block-column { width: 100% !important; flex-basis: auto !important; max-width: 100% !important; }
  .reforma-mission-card { max-width: 100% !important; }
  .reforma-aboutwho-statscard { max-width: 100% !important; }
  .reforma-aboutwho-leaf { width: 70% !important; opacity: 0.1 !important; }
}

/* Our Story image: fill a Figma-proportioned box (513:445), no panel/band */
.reforma-about-who-image-col { align-self: center !important; background: transparent !important; min-height: 0 !important; overflow: visible !important; }
.reforma-about-who-image-col .wp-block-image { height: auto !important; margin: 0; aspect-ratio: 513 / 445; }
.reforma-about-who-image-col .wp-block-image img,
.reforma-about-who-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

/* =====================================================================
   SHOP / PRODUCTS LISTING — Figma-exact (node 14:101)
   Category-aware hero + dynamic WooCommerce product grid.
   ===================================================================== */

/* ---- Hero ---- */
.reforma-products-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}
/* Eyebrow: white, with a short leading rule (Figma "— Reforma Portfolio"). */
.reforma-products-hero .reforma-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--white);
}
.reforma-products-hero .reforma-hero-eyebrow::before {
	content: "";
	width: 33px;
	height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}
.reforma-products-hero .reforma-hero-intro {
	max-width: 600px;
	opacity: 0.95;
}
/* Thin white divider above the stats. */
.reforma-products-hero .reforma-hero-rule {
	border: 0;
	height: 1px;
	max-width: 585px;
	margin-left: 0;
	background: rgba(255, 255, 255, 0.45);
	opacity: 1;
}
/* Borderless stats — value 32px, label 20px, both bold white. */
.reforma-products-hero .reforma-hero-stats {
	gap: var(--wp--preset--spacing--70);
}
.reforma-products-hero .reforma-hero-stat-value {
	font-size: 2rem;
	line-height: 1.1;
}
.reforma-products-hero .reforma-hero-stat-label {
	font-size: 1.25rem;
	line-height: 1.2;
}
/* Product-cluster image floats on the gradient (transparent PNG, no frame). */
.reforma-products-hero .reforma-products-hero-image-col {
	overflow: visible;
	position: relative;
}
.reforma-products-hero .reforma-products-hero-image-col .wp-block-image {
	overflow: visible;
	border-radius: 0;
	margin: 0;
}
.reforma-products-hero .reforma-products-hero-image-col .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 0 !important;
	display: block;
	position: relative;
	z-index: 1;
}

/* ---- Filter bar ---- */
.reforma-product-filter-bar .reforma-filter-label {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
/* Pill chips (32px tall, fully rounded). Inactive = slate text, no fill. */
.reforma-product-filter-bar .wp-block-button__link {
	border-radius: 999px;
	padding: 0.375rem 1.125rem;
	font-size: 1rem;
	font-weight: 400;
}
.reforma-product-filter-bar .reforma-chip--active .wp-block-button__link {
	color: var(--wp--preset--color--white);
	font-weight: 500;
	background-color: var(--wp--preset--color--brand-gold);
	border-color: var(--wp--preset--color--brand-gold);
}
.reforma-product-filter-bar .reforma-sort-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-gold);
	border: 0;
	background: var(--wp--preset--color--page-tint);
	border-radius: 0 20px 0 0;
	padding: 0.375rem 1.25rem;
}
.reforma-product-filter-bar .reforma-sort-label::after { content: none; }

/* ---- Product grid (dynamic Query Loop) ---- */
.reforma-product-grid .reforma-product-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 21px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.reforma-product-grid .reforma-product-cards > li { margin: 0; display: flex; }
.reforma-product-grid .reforma-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--wp--preset--color--off-white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 16px oklch(0% 0 0 / 0.06);
	transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reforma-product-grid .reforma-card-image-wrap {
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.reforma-product-grid .reforma-product-card-image,
.reforma-product-grid .reforma-product-card-image a { display: block; margin: 0; }
.reforma-product-grid .reforma-product-card-image img {
	width: 100%;
	aspect-ratio: 278 / 218;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.reforma-product-grid .reforma-product-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
	padding: 20px;
}
.reforma-product-grid .reforma-product-cat,
.reforma-product-grid .reforma-product-cat a {
	margin: 0;
	color: var(--wp--preset--color--accent-purple);
	font-size: 1rem;
	font-weight: 400;
	text-transform: capitalize;
	text-decoration: none;
}
.reforma-product-grid .wp-block-post-title { margin: 0; font-weight: 500; }
.reforma-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--brand-gold);
	text-decoration: none;
}
.reforma-product-grid .wp-block-post-title a:hover { text-decoration: underline; }
.reforma-product-grid .reforma-product-excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.reforma-product-grid .reforma-product-excerpt p { margin: 0; }

/* "View Details" — default (regular cards): flush blue text, bottom-right,
   in normal flow (margin-top:auto pins it to the bottom without overlapping copy). */
.reforma-product-grid .reforma-view-details {
	margin-top: auto;
	align-self: flex-end;
	color: var(--wp--preset--color--brand-gold);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}
.reforma-product-grid .reforma-view-details:hover { text-decoration: underline; }

/* Bestseller (Featured) card extras: green→transparent image overlay,
   ribbon, and a filled diagonal-cornered button flush to the bottom-right. */
.reforma-product-grid .reforma-bestseller-badge:empty { display: none; }
.reforma-product-grid .reforma-bestseller-badge {
	position: absolute;
	top: 18px;
	left: 16px;
	z-index: 2;
	margin: 0;
	padding: 5px 14px;
	background-color: var(--wp--preset--color--accent-purple);
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 10px 0 10px 0;
	pointer-events: none;
}
/* (No green image overlay on the featured card — home cards don't have one.) */
/* (Featured card uses the same VIEW DETAILS + arrow treatment as every other card.) */

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.reforma-product-grid .reforma-product-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 781px) {
	.reforma-product-grid .reforma-product-cards { grid-template-columns: repeat(2, 1fr); }
	.reforma-products-hero .wp-block-cover__inner-container > .wp-block-columns.alignwide {
		display: flex !important;
		flex-direction: column !important;
	}
	.reforma-products-hero .wp-block-cover__inner-container > .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.reforma-products-hero-image-col { margin-top: var(--wp--preset--spacing--50); }
	.reforma-products-hero-image-col .wp-block-image img { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
	.reforma-product-grid .reforma-product-cards { grid-template-columns: minmax(0, 1fr); }
	.reforma-products-hero .reforma-hero-stats { gap: var(--wp--preset--spacing--50); }
}

/* ============================================================
   News article — Figma-accurate single-post styling.
   Authoritative block; overrides earlier article rules.
   ============================================================ */

/* Layout: body / sidebar column gap (Figma ~18px). */
.reforma-article-columns { column-gap: var(--wp--preset--spacing--50) !important; }

/* Breadcrumb bar (Back pill left + Home > News > title). */
.reforma-article-breadcrumb { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.reforma-article-breadcrumb > .wp-block-group { gap: var(--wp--preset--spacing--50); }
.reforma-back-pill .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--wp--preset--color--brand-gold) !important;
	border-radius: 0 20px 0 0 !important;
	background: transparent !important;
	font-family: var(--wp--preset--font-family--display);
}
.reforma-breadcrumb-trail { margin-inline: auto; color: var(--wp--preset--color--ink-soft); letter-spacing: 0; }
.reforma-breadcrumb-trail a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.reforma-breadcrumb-trail a:hover { color: var(--wp--preset--color--brand-gold); }
.reforma-breadcrumb-current { color: var(--wp--preset--color--ink); font-weight: 700; }
@media (max-width: 768px) {
	.reforma-breadcrumb-trail { margin-inline: 0; }
}

/* Hero eyebrow — title-case, white, with leading rule (Figma "— Partnership"). */
.reforma-article-hero .reforma-article-eyebrow {
	color: var(--wp--preset--color--white) !important;
	display: flex; align-items: center; text-transform: none; letter-spacing: 0;
}
.reforma-article-hero .reforma-article-eyebrow::before {
	content: ""; display: inline-block; inline-size: 28px; block-size: 1px;
	background: var(--wp--preset--color--white); margin-inline-end: 12px; opacity: 0.9;
}

/* Body H2 — dark navy ink (not brand-gold). */
.reforma-article-body .wp-block-post-content h2 { color: var(--wp--preset--color--ink) !important; }

/* Body lead paragraph — standfirst with hairline under it. */
.reforma-article-body .wp-block-post-content > p:first-of-type {
	font-weight: 500;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Pull-quote box — dark navy, italic display quote, blue attribution. */
.reforma-pull-quote-box {
	border: 1px solid oklch(45.7% 0.085 169 / 0.28) !important;
}
.reforma-pull-quote-text {
	color: oklch(88% 0 0) !important;
}

/* Stats — compact in-column row (override old full-width band treatment). */
.reforma-article-stats,
.reforma-article-stats.wp-block-group {
	border-top: none !important; border-bottom: none !important;
	background: transparent !important; padding: 0 !important;
}
.reforma-stats-row { align-items: stretch; }
.reforma-stats-row > .wp-block-column {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) !important;
}
.reforma-stats-row > .wp-block-column:not(:last-child) {
	border-right: 1px solid var(--wp--preset--color--hairline) !important;
}
.reforma-stat-num { font-family: var(--wp--preset--font-family--display); }
.reforma-stat-label { letter-spacing: 0.01em; }
@media (max-width: 600px) {
	.reforma-stats-row > .wp-block-column:not(:last-child) { border-right: none !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; }
}

/* Sidebar — Article Details: white card, no green top bar, subtle shadow. */
.reforma-sidebar-card--details {
	border-top: none !important;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06), 0 4px 16px oklch(0% 0 0 / 0.04);
}
.reforma-detail-row {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.reforma-detail-row:last-child { padding-bottom: 0; border-bottom: none; }
.reforma-detail-row .wp-block-post-date,
.reforma-detail-row .wp-block-post-terms,
.reforma-detail-row .wp-block-post-author-name { text-align: right; }
.reforma-detail-row .wp-block-post-terms a { color: var(--wp--preset--color--ink); text-decoration: none; }

/* Sidebar — Share buttons: full-width, icon + label, brand colours. */
.reforma-share-buttons { width: 100%; }
.reforma-share-buttons .wp-block-button { width: 100%; }
.reforma-share-btn .wp-block-button__link {
	display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
}
.reforma-share-btn .wp-block-button__link::before {
	content: ""; inline-size: 18px; block-size: 18px; flex: 0 0 18px;
	background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
.reforma-share-btn--x .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.reforma-share-btn--linkedin .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E");
}
.reforma-share-btn--facebook .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

/* Sidebar — Newsletter dark card: eyebrow, copy, faux email field, subscribe. */
.reforma-newsletter-eyebrow { color: oklch(80% 0.06 145) !important; }
.reforma-newsletter-copy { opacity: 0.8; }
.reforma-newsletter-field a {
	display: block; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--preset--radius--small, 8px); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: center; text-decoration: none;
}
.reforma-newsletter-subscribe .wp-block-button__link { display: block; text-align: center; }

/* ============================================================
   Contact page — Figma alignment (rebuilt)
   Sections: contact-hero, begin-skincare-cta, faq-accordion.
   OKLCH tokens + 4pt spacing.
   ============================================================ */

/* ---- Hero: title, intro, portrait ---- */
.reforma-contact-hero .reforma-contact-hero-intro {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
	color: var(--wp--preset--color--ink);
}
.reforma-contact-hero .wp-block-column:first-child {
	align-self: flex-start !important;
}
.reforma-contact-hero .wp-block-column:first-child .wp-block-image,
.reforma-contact-hero-photo {
	height: auto !important;
	overflow: hidden;
	border-radius: 0 0 100px 0;
	margin: 0;
}
.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
.reforma-contact-hero-photo img {
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 0.74 !important;
	object-fit: cover;
	object-position: center top;
	border-radius: 0 0 100px 0;
	display: block;
}

/* Social row — outline icons in brand-gold, centred, 44px targets. */
.reforma-contact-hero-social {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}
.reforma-contact-hero-social__item {
	margin: 0;
}
.reforma-contact-hero-social__link {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 23px 23px;
	border-radius: 8px;
	transition: opacity 150ms ease-out;
}
.reforma-contact-hero-social__link:hover { opacity: 0.65; }
.reforma-contact-hero-social .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.reforma-contact-hero-social__item--facebook .reforma-contact-hero-social__link {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M14.6 8.4h-1.3c-.8 0-1.4.6-1.4 1.4V12h2.5l-.4 2.5h-2.1V20'/%3E%3C/svg%3E");
}
.reforma-contact-hero-social__item--instagram .reforma-contact-hero-social__link {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17' cy='7' r='1.1' fill='%23a07c42' stroke='none'/%3E%3C/svg%3E");
}
.reforma-contact-hero-social__item--pinterest .reforma-contact-hero-social__link {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.4 16.8 12 10.2c.2-1 1-1.7 2.1-1.7 1.3 0 2.2 1.1 2 2.5-.2 1.6-1.3 2.8-2.7 2.8-.9 0-1.5-.6-1.4-1.4'/%3E%3C/svg%3E");
}
.reforma-contact-hero-social__item--x .reforma-contact-hero-social__link {
	background-size: 19px 19px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5 19.5 19.5M19.5 4.5 4.5 19.5'/%3E%3C/svg%3E");
}

/* ---- Form card ---- */
.reforma-contact-form-card.wp-block-group {
	background-color: var(--wp--preset--color--accent-purple) !important;
	color: var(--wp--preset--color--white);
	border-radius: 22px 22px 150px 22px;
}
.reforma-contact-hero-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}
.reforma-contact-hero-form__field--full { grid-column: 1 / -1; }
.reforma-contact-hero-form__field { display: block; position: relative; }
.reforma-contact-hero-form__label {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.reforma-contact-hero-form__input {
	display: block; width: 100%;
	padding: 13px 16px;
	background-color: var(--wp--preset--color--white);
	background-repeat: no-repeat;
	border: 0; border-radius: 10px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4; min-height: 48px; box-sizing: border-box;
	-webkit-appearance: none; appearance: none;
	transition: box-shadow 150ms ease-out;
}
.reforma-contact-hero-form__input::placeholder { color: var(--wp--preset--color--ink); opacity: 0.7; }
.reforma-contact-hero-form__input:focus { outline: none; box-shadow: 0 0 0 3px oklch(100% 0 0 / 0.45); }
.reforma-contact-hero-form__input--icon-user,
.reforma-contact-hero-form__input--icon-phone,
.reforma-contact-hero-form__input--icon-mail,
.reforma-contact-hero-form__input--icon-clock {
	padding-left: 44px; background-position: left 14px center; background-size: 19px 19px;
}
.reforma-contact-hero-form__input--icon-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5'/%3E%3C/svg%3E"); }
.reforma-contact-hero-form__input--icon-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h-3C3 4 2.5 4.6 2.6 5.3 3.4 13 11 20.6 18.7 21.4c.7.1 1.3-.5 1.3-1.2v-3l-4-1.5-2 2c-2.5-1.2-4.3-3-5.5-5.5l2-2L6.5 4Z'/%3E%3C/svg%3E"); }
.reforma-contact-hero-form__input--icon-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.reforma-contact-hero-form__input--icon-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.reforma-contact-hero-form__input--date {
	padding-right: 44px; background-position: right 14px center; background-size: 19px 19px; color-scheme: light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
}
.reforma-contact-hero-form__input--select {
	cursor: pointer; padding-right: 40px; background-position: right 14px center; background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.reforma-contact-hero-form__input--textarea {
	resize: vertical; min-height: 104px; padding-left: 44px; background-position: left 14px top 15px; background-size: 19px 19px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329514c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2 2 0 0 0-3-3L5 17l-1 3Z'/%3E%3Cpath d='m13.5 6.5 3 3'/%3E%3C/svg%3E");
}
.reforma-contact-hero-form__submit-wrap { display: flex; justify-content: flex-start; margin-top: var(--wp--preset--spacing--40); }
.reforma-contact-hero-form__submit {
	display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20);
	padding: 13px 30px;
	background-color: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white);
	border: 0; border-radius: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base); font-weight: 500; line-height: 1.4;
	cursor: pointer; min-height: 48px;
	transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.reforma-contact-hero-form__submit:hover { background-color: oklch(50% 0.131 248); }
.reforma-contact-hero-form__submit:active { transform: translateY(1px); }
.reforma-contact-hero-form__submit:focus-visible { outline: 3px solid oklch(100% 0 0 / 0.7); outline-offset: 3px; }
.reforma-contact-hero-form .reforma-hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reforma-contact-form__alert { padding: 12px 16px; border-radius: 10px; margin-bottom: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; }
.reforma-contact-form__alert--success { background: var(--wp--preset--color--white); color: var(--wp--preset--color--accent-purple); }
.reforma-contact-form__alert--error { background: oklch(96% 0.04 25); color: oklch(43% 0.16 25); }

/* ---- Begin Skincare — hands photo + rounded navy panel + line-art face ----
   ID-scoped + !important so these win over the earlier .reforma-begin-skincare
   rules (padding / ::after / column layout) left from prior iterations. */
#reforma-begin-skincare.reforma-begin-skincare {
	zoom: 1 !important;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: oklch(75.9% 0.027 46); /* soft peach behind the hands photo */
	min-height: clamp(340px, 26vw, 400px);
	padding: 0 !important;
}
#reforma-begin-skincare .reforma-begin-skincare__media.wp-block-image {
	position: absolute !important;
	top: 0 !important; left: 0 !important; bottom: 0 !important;
	width: clamp(200px, 34%, 660px);
	margin: 0 !important;
	z-index: 0 !important;
}
#reforma-begin-skincare .reforma-begin-skincare__media img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
	border-radius: 0;
}
#reforma-begin-skincare .reforma-begin-skincare__panel.wp-block-group {
	position: relative;
	z-index: 1;
	margin: 0 0 0 34% !important; /* no top gap — navy fills the full band height */
	min-height: clamp(340px, 26vw, 400px);
	background-color: var(--wp--preset--color--ink);
	border-radius: clamp(90px, 10vw, 160px) 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--wp--preset--spacing--70) !important;
}
#reforma-begin-skincare .reforma-begin-skincare__panel.wp-block-group > * { max-width: 520px; }
/* Match Figma type scale: heading smaller (wraps "…Skincare" / "Journey"),
   body one line, compact button. */
#reforma-begin-skincare .reforma-begin-skincare__panel .wp-block-heading {
	font-size: clamp(1.6rem, 0.55rem + 1.6vw, 2.375rem) !important;
	line-height: 1.2 !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
#reforma-begin-skincare .reforma-begin-skincare__panel p {
	font-size: var(--wp--preset--font-size--xs) !important;
	line-height: 1.55 !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}
#reforma-begin-skincare .reforma-skincare-cta-btn > .wp-block-button__link {
	padding: 12px 26px !important;
	font-size: var(--wp--preset--font-size--sm) !important;
}
#reforma-begin-skincare::after {
	content: '';
	position: absolute;
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	left: auto !important;
	right: clamp(8px, 2vw, 40px) !important;
	width: clamp(280px, 31vw, 450px) !important;
	transform: none !important;
	background-image: none;
	background-repeat: no-repeat !important;
	background-size: auto 100% !important;
	background-position: right center !important;
	opacity: 1 !important;
	pointer-events: none;
	z-index: 2 !important;
}
.reforma-skincare-cta-btn > .wp-block-button__link {
	display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--accent-purple) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 8px; padding: 14px 28px;
	font-family: var(--wp--preset--font-family--display);
}
.reforma-skincare-cta-btn > .wp-block-button__link::before {
	content: ''; width: 17px; height: 17px; flex: 0 0 auto;
	background-repeat: no-repeat; background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h-3C3 4 2.5 4.6 2.6 5.3 3.4 13 11 20.6 18.7 21.4c.7.1 1.3-.5 1.3-1.2v-3l-4-1.5-2 2c-2.5-1.2-4.3-3-5.5-5.5l2-2L6.5 4Z'/%3E%3C/svg%3E");
}
.reforma-skincare-cta-btn > .wp-block-button__link:hover { background-color: oklch(40% 0.085 169) !important; }

/* ---- FAQ accordion (single-open <details name>) ----
   ID-scoped + !important so each row shows exactly ONE divider. Earlier
   wave rules add border-top to every .reforma-faq-item which, combined
   with a border-bottom, produced doubled-up lines between rows. */
#reforma-faq .reforma-faq-list { margin: 0 auto; }
#reforma-faq .reforma-faq-item {
	border-top: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--hairline) !important;
	padding: var(--wp--preset--spacing--50) 0 !important;
	margin: 0 !important;
}
#reforma-faq .reforma-faq-item:first-child {
	border-top: 1px solid var(--wp--preset--color--hairline) !important;
}
#reforma-faq .reforma-faq-item__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
#reforma-faq .reforma-faq-item__q::-webkit-details-marker { display: none; }
#reforma-faq .reforma-faq-item__q::before {
	content: '+';
	flex: 0 0 auto;
	width: 20px;
	font-size: 1.35rem;
	line-height: 1;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	text-align: center;
}
#reforma-faq .reforma-faq-item[open] .reforma-faq-item__q::before { content: '\2212'; }
#reforma-faq .reforma-faq-item__a {
	margin-top: var(--wp--preset--spacing--30);
	padding-inline-start: calc(20px + var(--wp--preset--spacing--40));
	color: var(--wp--preset--color--ink-soft);
}
#reforma-faq .reforma-faq-item__a p { margin: 0 0 0.6em; line-height: 1.7; }
#reforma-faq .reforma-faq-item__a p:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 781px) {
	.reforma-contact-hero-form__grid { grid-template-columns: 1fr; }
	.reforma-contact-hero .wp-block-column:first-child .wp-block-image img,
	.reforma-contact-hero-photo img { aspect-ratio: 4 / 3 !important; }

	#reforma-begin-skincare .reforma-begin-skincare__media.wp-block-image {
		position: static !important;
		width: 100% !important;
		height: clamp(170px, 42vw, 260px);
	}
	#reforma-begin-skincare .reforma-begin-skincare__panel.wp-block-group {
		margin: 0 !important;
		border-radius: 0;
		align-items: center;
		text-align: center;
	}
	#reforma-begin-skincare .reforma-begin-skincare__panel.wp-block-group > * { max-width: none; }
	#reforma-begin-skincare .reforma-begin-skincare__panel .wp-block-buttons { justify-content: center; }
	#reforma-begin-skincare::after { display: none !important; }
}
@media (max-width: 480px) {
	.reforma-contact-form-card.wp-block-group { border-radius: 18px 18px 90px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.reforma-contact-hero-form__input,
	.reforma-contact-hero-form__submit,
	.reforma-contact-hero-social__link,
	.reforma-skincare-cta-btn > .wp-block-button__link { transition: none; }
}
/* ============================================================ */

/* ============================================================
   Single Product (PDP) — single-product.html, matches Figma 14:269
   ============================================================ */
.reforma-pdp-breadcrumb-row { flex-wrap: wrap; row-gap: var(--wp--preset--spacing--20); }
.reforma-pdp-breadcrumb-row .woocommerce-breadcrumb,
.reforma-pdp-breadcrumb-row .wc-block-breadcrumbs {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}
.reforma-pdp-breadcrumb-row .woocommerce-breadcrumb a,
.reforma-pdp-breadcrumb-row .wc-block-breadcrumbs a { color: var(--wp--preset--color--ink); text-decoration: none; }

/* Gallery */
.reforma-pdp-gallery-col img { border-radius: 16px; width: 100%; height: auto; }
.reforma-pdp-gallery-col .wc-block-components-product-image-gallery,
.reforma-pdp-gallery-col .woocommerce-product-gallery { margin: 0; }
.reforma-pdp-gallery-col .flex-control-thumbs,
.reforma-pdp-gallery-col .wc-block-components-product-image-gallery__thumbnails {
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

/* Info column */
.reforma-pdp-category, .reforma-pdp-category a {
	display: inline-block;
	color: var(--wp--preset--color--accent-purple);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent-purple);
	padding-bottom: 2px;
}
.reforma-pdp-title {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
	line-height: 1.15;
}
.reforma-pdp-excerpt, .reforma-pdp-trust { color: var(--wp--preset--color--ink); }
.reforma-pdp-rule { border: 0; border-top: 1px solid var(--wp--preset--color--hairline); margin-block: var(--wp--preset--spacing--20); }
.reforma-pdp-experts-num { font-family: var(--wp--preset--font-family--body); }
.reforma-pdp-cta-row { gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }

/* WooCommerce tabs (Description / Specifications / Reviews) */
.reforma-pdp-tabs .wc-tabs {
	border: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0 0 0;
	display: flex;
	gap: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.reforma-pdp-tabs .wc-tabs::before { display: none; }
.reforma-pdp-tabs .wc-tabs li { background: none; border: 0; margin: 0; padding: 0 0 var(--wp--preset--spacing--20); }
.reforma-pdp-tabs .wc-tabs li::before, .reforma-pdp-tabs .wc-tabs li::after { display: none; }
.reforma-pdp-tabs .wc-tabs li a { color: var(--wp--preset--color--ink); font-weight: 500; padding: 0; font-size: var(--wp--preset--font-size--lg); }
.reforma-pdp-tabs .wc-tabs li.active a { color: var(--wp--preset--color--accent-purple); }
.reforma-pdp-tabs .wc-tabs li.active { border-bottom: 2px solid var(--wp--preset--color--accent-purple); margin-bottom: -1px; }
.reforma-pdp-tabs .woocommerce-Tabs-panel { color: var(--wp--preset--color--ink); line-height: 1.7; max-width: 820px; }
.reforma-pdp-tabs .woocommerce-Tabs-panel h2 { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }

/* Testimonial cards */
.reforma-pdp-tcard { align-self: stretch; }

/* Responsive */
@media (max-width: 781px) {
	.reforma-pdp-cta-row .wp-block-button { width: 100%; }
	.reforma-pdp-cta-row .wp-block-button .wp-block-button__link { display: block; text-align: center; }
	.reforma-pdp-title { font-size: var(--wp--preset--font-size--2xl); }
}
/* ============================================================ */

/* ============================================================
   Booking page — 43:551 layout: boxed container, light-blue
   upper background, and image-hero Order Summary card.
   Supersedes the earlier green-header / navy-box summary.
   ============================================================ */

/* Light-blue upper region behind hero + form/summary (Figma Rectangle 12) */
.reforma-booking-hero,
.reforma-booking-layout {
	background-color: oklch(97.7% 0.017 240) !important;
}

/* Boxed content: ~1200px centered (Figma content x360–1560 in 1920) */
.reforma-booking-layout .wp-block-columns {
	max-width: 1200px !important;
	margin-inline: auto !important;
	gap: var(--wp--preset--spacing--50) !important;
}
.reforma-booking-layout .wp-block-column:first-child { flex-basis: 58% !important; }
.reforma-booking-layout .wp-block-column:last-child  { flex-basis: 40% !important; }

/* --- Order Summary card: white, rounded, image hero on top --- */
.reforma-booking-layout .reforma-order-summary-card {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid var(--wp--preset--color--hairline) !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 28px oklch(31.7% 0.041 278 / 0.08) !important;
}

/* Hero = selected product's featured image + gradient + trust overlay */
.reforma-summary-hero {
	position: relative;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}
.reforma-summary-hero__overlay {
	position: relative;
	width: 100%;
	padding: var(--wp--preset--spacing--50);
	background: linear-gradient(to top, oklch(31.7% 0.041 278 / 0.85) 0%, oklch(31.7% 0.041 278 / 0.55) 45%, oklch(31.7% 0.041 278 / 0) 100%);
}
.reforma-summary-hero__stat {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	line-height: 1.1;
}
.reforma-summary-hero__label {
	margin: 4px 0 0;
	color: oklch(100% 0 0 / 0.9);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

/* Body */
.reforma-summary-body { padding: var(--wp--preset--spacing--50); }
.reforma-summary-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent-purple);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.reforma-summary-question {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}
.reforma-summary-divider {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	margin: var(--wp--preset--spacing--30) 0;
}

/* Plan row: name/type left, price right (override earlier sub-card rules) */
.reforma-booking-layout .reforma-plan-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--wp--preset--spacing--40) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.reforma-booking-layout .reforma-plan-details { display: block !important; }
.reforma-plan-name { margin: 0; color: var(--wp--preset--color--ink); font-weight: 700; font-size: var(--wp--preset--font-size--base); line-height: 1.3; }
.reforma-plan-type { margin: 2px 0 0; color: var(--wp--preset--color--accent-purple); font-size: var(--wp--preset--font-size--sm); }
.reforma-booking-layout .reforma-plan-pricing {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	text-align: end !important;
	gap: 0 !important;
}
.reforma-plan-was { margin: 0; color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--xs); text-decoration: line-through; }
.reforma-plan-now { margin: 0; color: var(--wp--preset--color--accent-purple); font-size: var(--wp--preset--font-size--xl); font-weight: 700; line-height: 1.1; }
.reforma-plan-now .reforma-plan-per { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--xs); font-weight: 400; margin-inline-start: 3px; }

/* Benefits */
.reforma-booking-layout .reforma-benefits-list {
	list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30) !important;
}
.reforma-booking-layout .reforma-benefit-item {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--sm);
}
.reforma-booking-layout .reforma-benefit-icon { color: var(--wp--preset--color--accent-purple); flex: 0 0 auto; }

/* ============================================================
   Complete Hair Loss Plan — conversion landing (slug: treatment-plan)
   ============================================================ */

/* Render this page at 100% — the site-wide non-home 0.9 shrink would
   otherwise leave page-bg strips on full-bleed bands and break width math. */
.reforma-hlp { zoom: 1; }

/* Hero */
.reforma-hlp-hero { text-align: center; }
.reforma-hlp-stats { row-gap: var(--wp--preset--spacing--50); }
.reforma-hlp-stat { min-width: 96px; }

/* Plan-component cards */
.reforma-hlp-cards .wp-block-column.reforma-hlp-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
}
.reforma-hlp-card-image { margin-block: 0; }
.reforma-hlp-cards .reforma-hlp-card-image img {
	width: 100%;
	aspect-ratio: 283 / 218;
	object-fit: cover;
	object-position: top;
	display: block;
	border-radius: 16px 16px 0 0;
}
.reforma-hlp-badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border-end-end-radius: 14px;
}

/* ── Plan-frequency selector card (Figma 123:140) ── */
.reforma-plan-selector {
	max-width: 474px;
	margin-inline: auto;
	background: var(--wp--preset--color--white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 30px oklch(31.7% 0.041 278 / 0.10);
}
.reforma-plan-selector__header {
	background: var(--wp--preset--color--accent-purple);
	padding: 0.7rem 1.5rem;
	text-align: center;
}
.reforma-plan-selector__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.3;
}
.reforma-plan-selector__body { padding: 1.75rem 1.5rem; }
.reforma-plan-selector__subtitle {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
	text-align: center;
}

/* Frequency radios (CSS-only selection) */
.reforma-plan-freqs { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.reforma-plan-freq {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.reforma-plan-freq__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reforma-plan-freq__dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--hairline);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reforma-plan-freq__main { display: flex; flex-direction: column; gap: 0.15rem; margin-inline-end: auto; }
.reforma-plan-freq__label { color: var(--wp--preset--color--ink); font-weight: 600; font-size: var(--wp--preset--font-size--sm); }
.reforma-plan-freq__note { color: var(--wp--preset--color--accent-purple); font-weight: 600; font-size: var(--wp--preset--font-size--xs); }
.reforma-plan-freq__price { color: var(--wp--preset--color--ink); font-weight: 700; font-size: var(--wp--preset--font-size--md); white-space: nowrap; }
.reforma-plan-freq__period { color: var(--wp--preset--color--ink-soft); font-weight: 500; font-size: var(--wp--preset--font-size--xs); margin-inline-start: 2px; }
.reforma-plan-freq__radio:checked ~ .reforma-plan-freq__dot {
	border-color: var(--wp--preset--color--brand-gold);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--brand-gold);
}
.reforma-plan-freq:has(.reforma-plan-freq__radio:checked) {
	border-color: var(--wp--preset--color--brand-gold);
	background: var(--wp--preset--color--page-tint);
}
.reforma-plan-freq__radio:focus-visible ~ .reforma-plan-freq__dot { outline: 2px solid var(--wp--preset--color--brand-gold); outline-offset: 2px; }

/* CTA + trust */
.reforma-plan-selector__cta {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	padding: 0.9rem 1.5rem;
	border-radius: 0 20px 0 0;
	transition: filter 0.15s ease;
}
.reforma-plan-selector__cta:hover { filter: brightness(1.06); }
.reforma-plan-selector__trust {
	margin: 0.85rem 0 0;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}
.reforma-plan-selector__divider { border: 0; border-top: 1px solid var(--wp--preset--color--hairline); margin: 1.5rem 0; }
.reforma-plan-selector__includes-label {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--accent-purple);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
}
.reforma-plan-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.reforma-plan-include { display: flex; align-items: center; gap: 0.6rem; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--sm); }
.reforma-plan-include__icon { flex: 0 0 auto; color: var(--wp--preset--color--accent-purple); }

@media (max-width: 600px) {
	.reforma-plan-selector__body { padding: 1.5rem 1.15rem; }
	.reforma-hlp-stats { column-gap: var(--wp--preset--spacing--60); }
}

/* PDP main product image — Figma signature top-left 100px curve (node 14:269). */
.reforma-pdp-main-image { margin: 0; }
.reforma-pdp-main-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 477 / 363;
	object-fit: cover;
	border-radius: 100px 0 0 0;
	display: block;
}
.reforma-pdp-title { font-size: 2.5rem; line-height: 1.1; }

/* ============================================================
   News article — EXACT pixel values from Figma node 25:516.
   Drives fixed px (not fluid tokens) for 1:1 fidelity.
   ============================================================ */

/* Page background — exact Figma #f2f9ff. */
.reforma-article-breadcrumb.wp-block-group,
.reforma-article-main.wp-block-group { background-color: #f2f9ff !important; }

/* Hero — title 40px/1.265/500, eyebrow + meta 20px/450. */
.reforma-article-hero .wp-block-post-title {
	font-size: 40px !important; line-height: 1.265 !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
.reforma-article-hero .wp-block-cover__inner-container p { font-size: 20px !important; line-height: 1.3 !important; font-weight: 450 !important; }
.reforma-article-hero .wp-block-post-date { font-size: 20px !important; font-weight: 450 !important; }
.reforma-article-hero .wp-block-cover__inner-container { max-width: 700px !important; }

/* Body prose — exact 16px / 1.3 (Figma 1.265), near-black. */
.reforma-article-body .wp-block-post-content p,
.reforma-article-body .wp-block-post-content li {
	font-size: 16px !important; line-height: 1.3 !important; color: #1a1a1a !important;
}
.reforma-article-body .wp-block-post-content > p:first-of-type { font-weight: 500; }
/* Body H2 — 24px / 1.265 / 500, navy #3e273b. */
.reforma-article-body .wp-block-post-content h2 {
	font-size: 24px !important; line-height: 1.265 !important; font-weight: 500 !important;
	color: #3e273b !important; letter-spacing: 0 !important;
	margin-top: 40px !important; margin-bottom: 14px !important;
}
.reforma-article-body .wp-block-post-content h3 {
	font-size: 20px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #3e273b !important;
	margin-top: 28px !important; margin-bottom: 10px !important;
}

/* Highlights box — light rounded card with green-tick list (Figma section 21). */
.reforma-highlights-box {
	background: #ffffff !important; border-radius: 20px !important;
	padding: 28px 32px !important; margin: 28px 0 !important;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.05);
}
.reforma-highlights-box .reforma-highlights-title {
	font-size: 18px !important; font-weight: 500 !important; color: #29514c !important; margin: 0 0 14px !important;
}
.reforma-highlights-box ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.reforma-highlights-box li {
	position: relative; padding-left: 28px !important; margin-bottom: 10px !important;
	color: #3e273b !important; font-size: 16px !important; line-height: 1.5 !important;
}
.reforma-highlights-box li::before {
	content: ""; position: absolute; left: 0; top: 3px; inline-size: 16px; block-size: 16px;
	background-color: #29514c; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Pull-quote — 16px italic / 1.44 quote, 13px attribution. */
.reforma-pull-quote-box { padding: 28px 32px !important; }
.reforma-pull-quote-text { font-size: 16px !important; line-height: 1.44 !important; }
.reforma-pull-quote-box .has-xs-font-size { font-size: 13px !important; }

/* Sidebar — card titles 18px/450; labels+values 16px; padding 28px. */
.reforma-sidebar-card { padding: 28px !important; }
.reforma-sidebar-card .wp-block-heading { font-size: 18px !important; font-weight: 450 !important; line-height: 1.265 !important; }
.reforma-detail-row p, .reforma-detail-row .wp-block-post-date,
.reforma-detail-row .wp-block-post-terms, .reforma-detail-row .wp-block-post-author-name,
.reforma-detail-row .has-base-font-size { font-size: 16px !important; }
.reforma-share-btn .wp-block-button__link { font-size: 16px !important; font-weight: 450 !important; }
.reforma-newsletter-eyebrow { font-size: 18px !important; }
.reforma-newsletter-copy { font-size: 16px !important; }

/* Stats — number 22px green / label 11px grey. */
.reforma-stat-num { font-size: 22px !important; line-height: 1.2 !important; }
.reforma-stat-label { font-size: 11px !important; line-height: 1.3 !important; letter-spacing: 0.02em; }

/* Back-to-news CTA — heading 40px/500 white, subline 20px, button 18px green. */
.reforma-article-back-cta { background-color: #3e273b !important; }
.reforma-article-back-cta .wp-block-heading,
.reforma-article-back-cta h2.wp-block-heading {
	font-size: 40px !important; line-height: 1.265 !important; font-weight: 500 !important; font-family: var(--wp--preset--font-family--body) !important;
}
.reforma-article-back-cta p { font-size: 20px !important; font-weight: 450 !important; }
.reforma-btn-back-news .wp-block-button__link { font-size: 18px !important; font-weight: 700 !important; }

/* Breadcrumb — 16px. */
.reforma-breadcrumb-trail, .reforma-back-pill .wp-block-button__link { font-size: 16px !important; }

/* In-content pull-quote + highlights (when authored inside post-content). */
.reforma-pull-quote-box .reforma-pull-quote-text { font-family: var(--wp--preset--font-family--display); font-style: italic; }
.reforma-article-body .wp-block-post-content p.reforma-pull-quote-text {
	color: #d9d9d9 !important; font-size: 16px !important; line-height: 1.44 !important; font-style: italic;
}
.reforma-article-body .wp-block-post-content p.reforma-pull-quote-author {
	color: var(--wp--preset--color--brand-gold) !important; font-size: 13px !important; font-weight: 500 !important; margin-top: 8px !important;
}
.reforma-article-body .wp-block-post-content .reforma-highlights-title {
	color: #29514c !important; font-size: 18px !important; font-weight: 500 !important; margin-bottom: 14px !important;
}
.reforma-article-body .wp-block-post-content .reforma-highlights-box li {
	color: #3e273b !important; padding-left: 28px !important; margin-bottom: 10px !important;
}

/* Hero — title in sans (Poppins) per Figma Circular Std; full-width blue gradient overlay. */
.reforma-article-hero .wp-block-post-title { font-family: var(--wp--preset--font-family--body) !important; }
.reforma-article-hero > .wp-block-cover__background {
	background-image: linear-gradient(to right, rgba(36,118,189,1) 0%, rgba(36,118,189,0.96) 20%, rgba(36,118,189,0) 54%) !important;
	opacity: 1 !important;
	background-color: transparent !important;
}

/* Align hero inner text to the 1080px article content column (band stays full-width). */
.reforma-article-hero .wp-block-cover__inner-container {
	padding-left: 0 !important; padding-right: 0 !important; max-width: none !important;
}
.reforma-article-hero .wp-block-cover__inner-container > .wp-block-group {
	box-sizing: border-box; width: 100%; max-width: 1128px; margin-inline: auto;
	padding-left: var(--wp--preset--spacing--50) !important; padding-right: var(--wp--preset--spacing--50) !important;
}

/* Hero text column — cap to ~Figma 696px so title wraps left of the image, not over it. */
.reforma-article-hero .wp-block-post-title,
.reforma-article-hero .reforma-article-eyebrow { max-width: 620px; }

/* Sidebar must NOT scroll — static column, no sticky, no internal overflow. */
.reforma-article-sidebar,
.reforma-article-sidebar.wp-block-group {
	position: static !important;
	top: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Highlights box — plain grey round bullets (match Figma), grey list text. */
.reforma-article-body .wp-block-post-content .reforma-highlights-box li {
	color: var(--wp--preset--color--ink-soft) !important;
}
.reforma-highlights-box li::before {
	content: "" !important;
	inline-size: 5px !important; block-size: 5px !important;
	border-radius: 50% !important;
	background-color: var(--wp--preset--color--ink-soft) !important;
	-webkit-mask: none !important; mask: none !important;
	top: 9px !important; left: 8px !important;
}

/* Share card — same subtle shadow as Article Details. */
.reforma-sidebar-card--share {
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06), 0 4px 16px oklch(0% 0 0 / 0.04);
}

/* ============================================================
   SHOP — home-style product cards (footer + animated arrow + hover),
   and the Figma filter bar (visible active chip + functional sort).
   ============================================================ */

/* Card hover lift (home effect) */
/* (Card itself does not lift on hover — matches the home cards; only the arrow animates.) */

/* Card footer: VIEW DETAILS (left) + arrow (right) */
/* Reserve room at the card bottom for the flush corner arrow + the pinned link. */
.reforma-product-grid .reforma-product-card-body { padding-bottom: 64px !important; }
/* Footer is just a marker now — VIEW DETAILS and the arrow are both pinned to the
   card's bottom corners so they line up identically on every card. */
.reforma-product-grid .reforma-card-footer {
	display: block !important;
	margin: 0 !important;
}
.reforma-product-grid .reforma-view-details {
	position: absolute !important;
	left: 20px;
	right: auto;
	bottom: 0;
	height: 44px;
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--accent-purple) !important;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 !important;
}
.reforma-product-grid .reforma-view-details:hover { text-decoration: underline; }
/* RTL: VIEW DETAILS pins to the bottom-right (the arrow goes bottom-left). */
[dir="rtl"] .reforma-product-grid .reforma-view-details {
	left: auto;
	right: 20px;
}

/* Arrow — flush to the card's bottom-right corner (≈90×44, like the home card);
   green glyph by default, fills to a brand-gold petal box on card hover. */
.reforma-product-grid .reforma-card-arrow {
	position: absolute !important;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 44px;
	color: var(--wp--preset--color--accent-purple);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	background: transparent;
	border-radius: 20px 0 20px 0;
	transition: background-color 180ms ease, color 180ms ease;
}
.reforma-product-grid .reforma-product-card:hover .reforma-card-arrow,
.reforma-product-grid .reforma-card-arrow:hover,
.reforma-product-grid .reforma-card-arrow:focus-visible {
	background-color: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white);
}
/* RTL: arrow flushes to the bottom-LEFT corner, petal mirrored, glyph flipped. */
[dir="rtl"] .reforma-product-grid .reforma-card-arrow {
	right: auto;
	left: 0;
	border-radius: 0 20px 0 20px;
	transform: scaleX(-1);
}
/* Neutralise the previous featured-card absolute button treatment */
/* (Featured card inherits the standard pinned VIEW DETAILS + 64px body padding.) */

/* ---- Filter bar (Figma) ---- */
.reforma-product-filter-bar .reforma-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}
.reforma-product-filter-bar .reforma-filter-chips-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}
.reforma-product-filter-bar .reforma-filter-label {
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.reforma-product-filter-bar .reforma-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.reforma-product-filter-bar .reforma-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1.15rem;
	border-radius: 999px;
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--brand-gold) 40%, transparent);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-gold);
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.reforma-product-filter-bar .reforma-chip:hover {
	border-color: var(--wp--preset--color--brand-gold);
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 8%, var(--wp--preset--color--white));
}
.reforma-product-filter-bar .reforma-chip--active {
	border-color: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--brand-gold);
	font-weight: 600;
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 12%, var(--wp--preset--color--white));
}
/* Sort — pale control, top-right curve, blue text + chevron */
.reforma-product-filter-bar .reforma-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.reforma-product-filter-bar .reforma-sort__label {
	color: var(--wp--preset--color--ink-soft);
	font-size: 1rem;
	font-weight: 700;
}
.reforma-product-filter-bar .reforma-sort__control {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.reforma-product-filter-bar .reforma-sort__control select {
	appearance: none;
	-webkit-appearance: none;
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 10%, var(--wp--preset--color--white));
	border: 1px solid var(--wp--preset--color--brand-gold);
	border-radius: 0 20px 0 0;
	color: var(--wp--preset--color--brand-gold);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.45rem 2.4rem 0.45rem 1.1rem;
	cursor: pointer;
}
.reforma-product-filter-bar .reforma-sort__control select:hover {
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 16%, var(--wp--preset--color--white));
}
.reforma-product-filter-bar .reforma-sort__label {
	color: var(--wp--preset--color--brand-gold) !important;
}
.reforma-product-filter-bar .reforma-sort__chevron {
	position: absolute;
	right: 14px;
	color: var(--wp--preset--color--brand-gold);
	pointer-events: none;
}

/* ============================================================
   News listing hero — About-style band, left text, smaller height.
   ============================================================ */
.reforma-news-listing-hero,
.reforma-news-listing-hero.wp-block-group {
	min-height: 0 !important;
	display: block !important;
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
	background: linear-gradient(135deg, var(--wp--preset--color--brand-gold) 0%, oklch(44% 0.093 78) 100%) !important;
	border-top-left-radius: 100px;
}
.reforma-news-listing-hero-inner {
	max-width: 640px;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
}
.reforma-news-listing-hero-inner > * { text-align: left !important; }
@media (max-width: 640px) {
	.reforma-news-listing-hero,
	.reforma-news-listing-hero.wp-block-group {
		border-top-left-radius: 0;
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}
}

/* ============================================================
   News listing/archive grid — reuses the home news-card component.
   ============================================================ */
.reforma-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
	max-width: 1280px;
	margin-inline: auto;
}
.reforma-news-grid .reforma-news-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}
.reforma-news-grid .reforma-news-card-footer {
	margin-top: auto;
}
@media (max-width: 1024px) {
	.reforma-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.reforma-news-grid { grid-template-columns: 1fr; }
}

/* Pagination strip. */
.reforma-news-pagination {
	margin-top: var(--wp--preset--spacing--70);
	display: flex;
	justify-content: center;
}
.reforma-news-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}
.reforma-news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--wp--preset--radius--small, 8px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.05);
	transition: background-color 160ms ease, color 160ms ease;
}
.reforma-news-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white);
}
.reforma-news-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--white);
}

/* ============================================================
   News hero — match the About hero band exactly (blue→green 100deg
   gradient + eyebrow dash), left text, smaller height, no numbers.
   ============================================================ */
.reforma-news-listing-hero,
.reforma-news-listing-hero.wp-block-group {
	background: linear-gradient(100deg,
		oklch(62% 0.093 78) 0%,
		var(--wp--preset--color--brand-gold) 40%,
		oklch(44% 0.093 78) 100%) !important;
	min-height: 0 !important;
	display: block !important;
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
	border-top-left-radius: 100px;
	overflow: clip;
}
/* eyebrow dash (mirrors About hero eyebrow) */
.reforma-news-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	text-transform: none !important;
}
.reforma-news-hero-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: currentColor;
}
@media (max-width: 640px) {
	.reforma-news-listing-hero,
	.reforma-news-listing-hero.wp-block-group {
		border-top-left-radius: 0;
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}

/* ============================================================
   News listing grid — inherits .reforma-news-insights card CSS + hover JS.
   Suppress the section flower (hero already has a leaf) and the old lift.
   ============================================================ */
.reforma-news-grid { position: relative; }
.reforma-news-grid::after { content: none !important; display: none !important; }
.reforma-news-listing-section .reforma-news-card:hover { transform: none !important; }

/* News hero tweaks: no corner curve, no right-side leaf/shapes, white eyebrow. */
.reforma-news-listing-hero,
.reforma-news-listing-hero.wp-block-group {
	border-top-left-radius: 0 !important;
}
.reforma-news-listing-hero-leaf { display: none !important; }
.reforma-news-hero-eyebrow,
.reforma-news-hero-eyebrow.has-accent-purple-color {
	color: var(--wp--preset--color--white) !important;
}

/* News hero — boxed (contained), not full-width. */
.reforma-news-listing-hero,
.reforma-news-listing-hero.wp-block-group,
.reforma-news-listing-hero.wp-block-group.alignfull {
	width: min(1200px, calc(100% - 48px)) !important;
	max-width: min(1200px, calc(100% - 48px)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: 0 !important;
	border-radius: 16px !important;
	border-top-left-radius: 16px !important;
	overflow: clip;
}

/* ============================================================
   News listing/archive — UNIFORM white cards (clean, responsive).
   Self-contained (does not depend on .reforma-news-insights scope).
   ============================================================ */
.reforma-news-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
	max-width: 1280px;
	margin-inline: auto;
}
@media (max-width: 980px) { .reforma-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reforma-news-grid { grid-template-columns: 1fr; } }

.reforma-news-grid .reforma-news-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
	background: var(--wp--preset--color--white) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06), 0 10px 30px oklch(0% 0 0 / 0.06) !important;
	overflow: hidden !important;
	padding: 0 !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.reforma-news-grid .reforma-news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px oklch(0% 0 0 / 0.10), 0 24px 50px oklch(0% 0 0 / 0.12) !important;
}

/* media: full-bleed top, fixed aspect, date pill bottom-left */
.reforma-news-grid .reforma-news-card-media { position: relative; margin: 0 !important; }
.reforma-news-grid .reforma-news-card-media .wp-block-image,
.reforma-news-grid .reforma-news-card-media figure { margin: 0 !important; }
.reforma-news-grid .reforma-news-card-media img {
	width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; display: block !important; border-radius: 0 !important;
}
.reforma-news-grid .reforma-news-date-pill {
	position: absolute !important;
	bottom: var(--wp--preset--spacing--30) !important;
	inset-inline-start: var(--wp--preset--spacing--30) !important;
	inset-inline-end: auto !important;
	margin: 0 !important;
	padding: 4px var(--wp--preset--spacing--30) !important;
	border-radius: var(--wp--preset--radius--small, 8px) !important;
	z-index: 2;
}

/* text content: side padding; category gap below image */
.reforma-news-grid .reforma-news-card > p,
.reforma-news-grid .reforma-news-card > h3 {
	margin-left: var(--wp--preset--spacing--50);
	margin-right: var(--wp--preset--spacing--50);
}
.reforma-news-grid .reforma-news-card > p:first-of-type { margin-top: var(--wp--preset--spacing--50); }
.reforma-news-grid .reforma-news-card-excerpt {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* footer: READ FULL STORY + boxed blue arrow, pinned to card bottom */
.reforma-news-grid .reforma-news-card-footer {
	margin-top: auto !important;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
}
.reforma-news-grid .reforma-news-card-footer .wp-block-buttons { margin: 0 !important; }
.reforma-news-grid .reforma-button-link-flush > .wp-block-button__link {
	padding: 0 !important; background: transparent !important;
}
.reforma-news-grid .reforma-news-card-arrow > .wp-block-button__link {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 42px !important; height: 42px !important; padding: 0 !important;
	border-radius: 0 16px 0 16px !important;
	background-color: var(--wp--preset--color--brand-gold) !important;
	color: var(--wp--preset--color--white) !important;
	font-size: 1.15rem !important; line-height: 1 !important;
	transition: transform 0.16s ease;
}
.reforma-news-grid .reforma-news-card-arrow > .wp-block-button__link:hover { transform: translateY(-1px); }

/* Single-post hero: no corner curve, image shifted up a bit. */
.reforma-article-hero,
.reforma-article-hero.wp-block-cover {
	border-radius: 0 !important;
	border-top-left-radius: 0 !important;
}
.reforma-article-hero img.wp-block-cover__image-background {
	object-position: 50% 50% !important;
}

/* Single-post hero: smaller height, image centered. */
.reforma-article-hero,
.reforma-article-hero.wp-block-cover {
	min-height: 440px !important;
}
@media (max-width: 768px) {
	.reforma-article-hero,
	.reforma-article-hero.wp-block-cover { min-height: 340px !important; }
}

/* ============================================================
   Single-post hero — final: no top gap, shorter, better framing + gradient.
   ============================================================ */
.reforma-article-hero,
.reforma-article-hero.wp-block-cover {
	margin-top: 0 !important;
	min-height: 520px !important;
	border-radius: 0 !important;
}
.reforma-article-hero img.wp-block-cover__image-background {
	object-position: 50% 72% !important;
}
.reforma-article-hero > .wp-block-cover__background {
	background-image: linear-gradient(to right,
		rgba(36,118,189,0.97) 0%,
		rgba(36,118,189,0.82) 26%,
		rgba(36,118,189,0) 54%) !important;
	background-color: transparent !important;
	opacity: 1 !important;
}
@media (max-width: 768px) {
	.reforma-article-hero,
	.reforma-article-hero.wp-block-cover { min-height: 300px !important; }
	.reforma-article-hero > .wp-block-cover__background {
		background-image: linear-gradient(to bottom, rgba(36,118,189,0.95) 0%, rgba(36,118,189,0.55) 100%) !important;
	}
}

/* ============================================================
   PDP dynamic gallery / key features / testimonials / CTA band
   (reforma/pdp-gallery + reforma/pdp-key-features) — Figma 14:269
   ============================================================ */
.reforma-pdp-gallery { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.reforma-pdp-main-wrap { position: relative; margin: 0; }
.reforma-pdp-gallery-col img.reforma-pdp-main-image {
	width: 100%; height: auto; aspect-ratio: 477 / 363; object-fit: cover;
	border-radius: 100px 0 0 0; display: block;
}
.reforma-pdp-badge {
	position: absolute; top: 16px; left: 16px;
	background: var(--wp--preset--color--accent-purple); color: #fff;
	font-size: var(--wp--preset--font-size--xs); font-weight: 600;
	letter-spacing: 0.06em; padding: 6px 14px; border-radius: 0 14px 0 14px;
}
/* Wide thumbnail strip — Figma 147x65, r=10 */
.reforma-pdp-thumbs { display: flex; gap: var(--wp--preset--spacing--20); }
.reforma-pdp-thumb {
	flex: 1 1 0; padding: 0; border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden;
	aspect-ratio: 147 / 96; transition: border-color .15s ease;
}
.reforma-pdp-gallery-col .reforma-pdp-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
}
.reforma-pdp-thumb.is-active { border-color: var(--wp--preset--color--brand-gold); border-width: 2px; }
/* Rating row */
.reforma-pdp-rating { display: flex; align-items: center; gap: 10px; }
.reforma-pdp-stars { letter-spacing: 2px; line-height: 1; }
.reforma-pdp-star { color: #d8dee6; font-size: 18px; }
.reforma-pdp-star.is-on { color: #f5b301; }
.reforma-pdp-reviewcount {
	font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink); font-weight: 500;
}
/* Key Features (dynamic, per product) */
.reforma-pdp-keyfeatures-title {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--accent-purple);
	font-size: var(--wp--preset--font-size--md); font-weight: 500;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
}
.reforma-pdp-keyfeatures {
	list-style: none; margin: 0; padding: 0;
	font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink); line-height: 1.9;
}
.reforma-pdp-keyfeatures li { position: relative; padding-left: 1.6em; }
.reforma-pdp-keyfeatures li::before {
	content: "\2713"; position: absolute; left: 0;
	color: var(--wp--preset--color--accent-purple); font-weight: 700;
}
/* Testimonial cards — taller, carded (Figma 377x529) */
.reforma-pdp-tcards { gap: var(--wp--preset--spacing--40); }
.reforma-pdp-tcard {
	background: #fff; border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 16px; padding: var(--wp--preset--spacing--50);
	display: flex; flex-direction: column;
}
.reforma-pdp-tstars { color: #f5b301; letter-spacing: 2px; font-size: 18px; line-height: 1; }
.reforma-pdp-tcard .reforma-pdp-tquote { flex: 1 1 auto; }
/* Bottom CTA band — Figma #a07c42, full-bleed (overrides body:not(.home) zoom:0.9) */
.reforma-pdp-cta {
	zoom: 1 !important; width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.reforma-pdp-cta-buttons { gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }
@media (max-width: 781px) {
	.reforma-pdp-tcard { padding: var(--wp--preset--spacing--40); }
}
@media (max-width: 480px) {
	.reforma-pdp-gallery-col img.reforma-pdp-main-image { border-radius: 60px 0 0 0; }
	.reforma-pdp-thumbs { gap: 8px; }
}

/* ============================================================
   PDP Figma 14:269 corrections — hero white/boxed, eyebrow dash,
   bestseller ribbon, button alignment, 3 tabs + panels
   ============================================================ */
/* Product hero is WHITE & boxed; breadcrumb strip stays page-tint */
.reforma-pdp-hero.has-background { background-color: var(--wp--preset--color--white) !important; }
.reforma-pdp-topbar .reforma-pdp-breadcrumb-row { margin: 0; }

/* Eyebrows + category: green dash marker, NO underline (Figma) */
.reforma-pdp-category, .reforma-pdp-category a {
	border-bottom: 0 !important; text-decoration: none !important;
	text-transform: none !important; letter-spacing: 0 !important;
	padding-bottom: 0 !important; font-weight: 500;
	color: var(--wp--preset--color--accent-purple);
}
.reforma-pdp-eyebrow, .reforma-pdp-category { display: flex; align-items: center; gap: 12px; }
.reforma-pdp-eyebrow::before, .reforma-pdp-category::before {
	content: ""; width: 26px; height: 2px; flex: 0 0 auto;
	background: var(--wp--preset--color--accent-purple);
}

/* Equal-height columns so thumbnails (left) line up with buttons (right) */
.reforma-pdp-hero-cols { align-items: stretch; }
.reforma-pdp-hero-cols .reforma-pdp-gallery-col,
.reforma-pdp-hero-cols .reforma-pdp-info-col { display: flex; flex-direction: column; }
.reforma-pdp-gallery-col .reforma-pdp-gallery { flex: 1 1 auto; }
.reforma-pdp-gallery .reforma-pdp-thumbs { margin-top: auto; }
.reforma-pdp-info-col .reforma-pdp-cta-row { margin-top: auto; }

/* BESTSELLER ribbon — solid green rectangle, top-left inside the image */
.reforma-pdp-badge {
	position: absolute; top: 36px; left: 24px; right: auto;
	background: var(--wp--preset--color--accent-purple); color: #fff;
	font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1;
	padding: 9px 16px; border-radius: 2px; text-transform: uppercase;
}
/* Thumbnails — rounded corners */
.reforma-pdp-thumb { border-radius: 8px; }

/* CTA buttons — fill the column, equal width, bottom-aligned */
.reforma-pdp-cta-row { display: flex; gap: var(--wp--preset--spacing--30); width: 100%; flex-wrap: nowrap; }
.reforma-pdp-cta-row .wp-block-button { flex: 1 1 0; margin: 0; }
.reforma-pdp-cta-row .wp-block-button__link { width: 100%; text-align: center; }

/* Tabs bar (white) — active tab = green text + green underline */
.reforma-pdp-tabs { display: flex; gap: var(--wp--preset--spacing--60); border-bottom: 1px solid var(--wp--preset--color--hairline); }
.reforma-pdp-tab {
	appearance: none; background: none; border: 0; cursor: pointer;
	font-size: var(--wp--preset--font-size--lg); font-weight: 450;
	color: var(--wp--preset--color--ink); padding: 0 0 14px; margin-bottom: -1px;
	border-bottom: 2px solid transparent;
}
.reforma-pdp-tab.is-active { color: var(--wp--preset--color--accent-purple); border-bottom-color: var(--wp--preset--color--accent-purple); }

/* Panels — only the active one shows */
.reforma-pdp-panel { display: none; }
.reforma-pdp-panel.is-active { display: block; }

/* "Distributed by Reforma" card — white box on the tinted band (Figma) */
.reforma-pdp-aside-card.has-background { background-color: var(--wp--preset--color--white) !important; }

/* Specifications panel */
.reforma-pdp-specs { max-width: 760px; margin: 0; }
.reforma-pdp-spec-row {
	display: flex; justify-content: space-between; gap: 1.5rem; padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.reforma-pdp-specs dt { font-weight: 600; color: var(--wp--preset--color--ink); margin: 0; }
.reforma-pdp-specs dd { margin: 0; color: var(--wp--preset--color--ink-soft); text-align: right; }

/* Reviews panel */
.reforma-pdp-reviews-empty { color: var(--wp--preset--color--ink-soft); }
.reforma-pdp-reviews-summary .reforma-pdp-star.is-on { color: #f5b301; }
.reforma-pdp-review { padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); }
.reforma-pdp-review-meta { margin: 0 0 4px; }

@media (max-width: 781px) {
	.reforma-pdp-hero-cols .reforma-pdp-gallery-col,
	.reforma-pdp-hero-cols .reforma-pdp-info-col { display: block; }
	.reforma-pdp-tabs { gap: var(--wp--preset--spacing--40); overflow-x: auto; }
	.reforma-pdp-spec-row { gap: 1rem; }
}

/* ===== PDP exact-geometry corrections from Figma 14:269 JSON ===== */
/* Thumbnails: 147x65 (wide & short), radius 10 — were rendering too tall */
.reforma-pdp-gallery .reforma-pdp-thumb { aspect-ratio: 147 / 65; border-radius: 10px; }
/* CTA buttons: ~66px tall like Figma; keep equal width + top-right 20px curve */
.reforma-pdp-cta-row .wp-block-button__link {
	padding-top: 1.15rem !important; padding-bottom: 1.15rem !important;
	display: flex; align-items: center; justify-content: center; gap: .4em;
}
/* Image column ~45% / info ~55% to match Figma 477:593 split */
.reforma-pdp-hero-cols .reforma-pdp-gallery-col { flex-basis: 44% !important; }
.reforma-pdp-hero-cols .reforma-pdp-info-col { flex-basis: 56% !important; }

/* ===== PDP final spec-exact alignment (Figma 14:269 coords → 1200 container) ===== */
/* Image col = 477/1200 ≈ 40%; right col holds 593px content */
.reforma-pdp-hero-cols .reforma-pdp-gallery-col { flex-basis: 40% !important; }
.reforma-pdp-hero-cols .reforma-pdp-info-col { flex-basis: 57% !important; }
/* Thumbs: 3 across, 18px gaps (design 147 + 18 + 147 + 18 + 147 = 477) */
.reforma-pdp-gallery .reforma-pdp-thumbs { gap: 18px; }
/* CTA buttons: 24px gap (design), equal width */
.reforma-pdp-cta-row { gap: 24px !important; }
/* BESTSELLER ribbon offset to clear the 100px corner curve (design ~50px in) */
.reforma-pdp-badge { top: 44px !important; left: 44px !important; }

/* ============================================================
   PDP AUTHORITATIVE spec — Figma 14:269 "copy as code" (exact)
   Palette: tint #F2F9FF · navy #3e273b · green #29514c · blue #a07c42 · off #F4FAFF
   ============================================================ */
/* Columns: image 40% + gap + right ~49.5% (design content 1100/1200, trailing right space) */
.reforma-pdp-hero-cols { align-items: stretch; justify-content: flex-start; }
.reforma-pdp-hero-cols > .wp-block-column { flex-grow: 0; }
.reforma-pdp-hero-cols .reforma-pdp-gallery-col { flex: 0 0 40% !important; max-width: 40%; display: flex; flex-direction: column; }
.reforma-pdp-hero-cols .reforma-pdp-info-col { flex: 0 0 49.5% !important; max-width: 49.5%; display: flex; flex-direction: column; }

/* Eyebrow + hero category: 33px green dash + 20px #29514c, no underline */
.reforma-pdp-eyebrow, .reforma-pdp-category { display: flex !important; align-items: center; gap: 8px; font-size: 20px !important; line-height: 1.3 !important; color: #29514c !important; font-weight: 450 !important; }
.reforma-pdp-eyebrow::before, .reforma-pdp-category::before { content: ""; width: 33px; height: 0; border-top: 1px solid #29514c; flex: 0 0 auto; }
.reforma-pdp-category a { color: #29514c !important; text-decoration: none !important; border: 0 !important; padding: 0 !important; }

/* Title 40/500 navy */
.reforma-pdp-title { font-size: 40px !important; line-height: 51px !important; font-weight: 500 !important; color: #3e273b !important; }
/* Hero description 18/450 navy 55% */
.reforma-pdp-excerpt { font-size: 18px !important; line-height: 23px !important; color: #3e273b !important; opacity: .55; }
/* Trust 14/450 navy 55% */
.reforma-pdp-trust { font-size: 14px !important; line-height: 18px !important; color: #3e273b !important; opacity: .55; }
/* Divider — faint green hairline */
.reforma-pdp-rule { border: 0 !important; border-top: 1px solid rgba(18,102,79,0.16) !important; background: none !important; margin: 1.25rem 0 !important; height: 0 !important; }

/* Main image — 100px top-left curve, 477:363 */
.reforma-pdp-gallery-col img.reforma-pdp-main-image { aspect-ratio: 477/363; border-radius: 100px 0 0 0; }
/* Thumbnails 147x65 r10, 3 across, 18px gap, pinned to bottom */
.reforma-pdp-gallery .reforma-pdp-thumbs { gap: 18px; margin-top: auto; }
.reforma-pdp-gallery .reforma-pdp-thumb { aspect-ratio: 147/65; border-radius: 10px; }

/* BESTSELLER — green #29514c, top-left 10px radius, inset ~50px, 16px off-white */
.reforma-pdp-badge { top: 50px !important; left: 52px !important; right: auto; background: #29514c !important; color: #F4FAFF; font-size: 16px; font-weight: 450; line-height: 1.3; letter-spacing: 0; text-transform: none; padding: 5px 18px; border-radius: 10px 0 0 0 !important; }

/* CTA buttons — 66px tall, 16/700, exact colors, MIRRORED curves */
.reforma-pdp-cta-row { gap: 24px !important; margin-top: auto; width: 100%; }
.reforma-pdp-cta-row .wp-block-button { flex: 1 1 0; margin: 0; }
.reforma-pdp-cta-row .wp-block-button__link { min-height: 66px; padding: 0 40px !important; font-size: 16px !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; gap: .4em; box-sizing: border-box; }
.reforma-pdp-order-btn .wp-block-button__link { background: #a07c42 !important; color: #F4FAFF !important; border: 0 !important; border-radius: 20px 0 0 0 !important; }
.reforma-pdp-inquire-btn .wp-block-button__link { background: #fff !important; color: #a07c42 !important; border: 1px solid #a07c42 !important; border-radius: 0 20px 0 0 !important; }
.reforma-pdp-back .wp-block-button__link { background: #fff !important; color: #a07c42 !important; border: 1px solid #a07c42 !important; border-radius: 20px 0 0 0 !important; }

/* Tabs — 20px; active green #29514c + 2px underline; inactive #000 @66% */
.reforma-pdp-tabs { gap: 60px; border-bottom: 1px solid rgba(18,102,79,0.35); }
.reforma-pdp-tab { font-size: 20px !important; font-weight: 450; color: rgba(0,0,0,0.66); padding: 0 0 14px; border-bottom: 2px solid transparent; }
.reforma-pdp-tab.is-active { color: #29514c; border-bottom-color: #29514c; }

/* About body 16/450 navy 55%; Key Features green */
.reforma-pdp-about-body, .reforma-pdp-about-body p, .reforma-pdp-about-body li { font-size: 16px !important; line-height: 20px !important; color: #3e273b !important; opacity: .55; }
.reforma-pdp-keyfeatures-title { color: #29514c !important; font-size: 18px !important; font-weight: 500 !important; }
.reforma-pdp-keyfeatures { font-size: 16px !important; color: #3e273b; }
.reforma-pdp-keyfeatures li { opacity: .55; }
.reforma-pdp-keyfeatures li::before { color: #29514c; opacity: 1; }

/* Aside "Distributed by Reforma" card — tint bg + faint green border (Rectangle 88) */
.reforma-pdp-aside-card.has-background { background-color: #F2F9FF !important; border: 1px solid rgba(18,102,79,0.28) !important; border-radius: 10px !important; }
.reforma-pdp-aside-card h3 { color: #29514c !important; }

@media (max-width: 781px) {
	.reforma-pdp-hero-cols .reforma-pdp-gallery-col,
	.reforma-pdp-hero-cols .reforma-pdp-info-col { flex: 0 0 100% !important; max-width: 100%; }
}

/* ===== PDP hero balance fixes (title weight + bottom-group layout) ===== */
/* Title heavier to match Figma's Circular Std 500 weight in Poppins */
.reforma-pdp-title { font-weight: 600 !important; }
/* Info column: tight top stack, then divider+trust+buttons pinned to the bottom */
.reforma-pdp-hero-cols .reforma-pdp-info-col { gap: 14px; }
.reforma-pdp-info-col .reforma-pdp-rule { margin-top: auto !important; margin-bottom: 0 !important; }
.reforma-pdp-info-col .reforma-pdp-trust { margin-top: 14px !important; }
.reforma-pdp-info-col .reforma-pdp-cta-row { margin-top: 22px !important; }

/* ===== PDP button curves = RTL-aware (logical radii) + align buttons to thumb row ===== */
/* Order Now & Back: curve on the START-top corner → LTR top-LEFT, RTL top-RIGHT */
.reforma-pdp-order-btn .wp-block-button__link,
.reforma-pdp-back .wp-block-button__link {
	border-start-start-radius: 20px !important;
	border-start-end-radius: 0 !important;
	border-end-end-radius: 0 !important;
	border-end-start-radius: 0 !important;
}
/* Inquire: curve on the END-top corner → LTR top-RIGHT, RTL top-LEFT */
.reforma-pdp-inquire-btn .wp-block-button__link {
	border-start-start-radius: 0 !important;
	border-start-end-radius: 20px !important;
	border-end-end-radius: 0 !important;
	border-end-start-radius: 0 !important;
}
/* Force both hero columns to equal height so Order Now / Inquire bottom-align
   with the thumbnail row (the per-column "top" alignment was overriding stretch). */
.reforma-pdp-hero-cols > .wp-block-column { align-self: stretch !important; }
.reforma-pdp-info-col .reforma-pdp-cta-row { margin-bottom: 0 !important; }

/* =========================================================================
   v2.8.2 — STRIP LEGACY LEFTOVERS (woman-face / footer-decoration-navy.svg)
   ----
   Old pattern-decorations.css had a `.reforma-site-footer::after` rule using
   `background: url('../images/figma/svg/footer-decoration-navy.svg')`.
   That URL is served by Cloudflare CDN edge cache with a 10-year TTL even
   though the file doesn't exist at origin. The disk-level CSS rule has been
   neutralized to `background: transparent` but browsers still load the
   stale rule. Force-kill the pseudo-element here at the end-of-file so any
   cached or future rule can't resurrect the woman-face decoration.

   Also hide the WPML floating language switcher per client request — site
   is single-language (English) for now; the floating widget is not in Figma.
   ========================================================================= */
.reforma-site-footer::before,
.reforma-site-footer::after,
footer.wp-block-template-part::before,
footer.wp-block-template-part::after,
footer.wp-block-group.alignfull::before,
footer.wp-block-group.alignfull::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.trp-language-switcher.trp-floating-switcher,
.trp-ls-dropdown.trp-floating-switcher {
    display: none !important;
}

/* =========================================================================
   v2.10.1 — KILL the inherited Legacy zoom:0.9 hack (pattern-decorations
   :8998 footer, :9015 non-home sections). It shrank the footer to 90%
   (1920→1728) so it never looked full-width, and distorted page sections.
   Design is 1440 @ 100% — render at true scale.
   ========================================================================= */
footer.wp-block-template-part,
.reforma-site-footer,
body:not(.home) .wp-block-post-content > *,
body:not(.home) main#reforma-main > *,
main#reforma-main,
main#reforma-main > *{
	zoom:1 !important;
}


/* ============================================================= */
/* news archive — figma 42:174                                   */
/* Orange banner, News & Journal featured, Latest-from-Blog grid */
/* (appended block — overrides earlier .reforma-news-* via cascade) */
/* ============================================================= */

/* ---- A. Orange banner (Figma node 93:1545, 1303x364 r32) ---- */
.reforma-news-listing-hero{
	background:transparent !important;
	overflow:visible;
	padding-top:var(--wp--preset--spacing--50);
	padding-bottom:var(--wp--preset--spacing--30);
}
.reforma-news-listing-hero .reforma-news-listing-hero-leaf{ display:none !important; }
.reforma-news-listing-hero .reforma-news-listing-hero-inner{ display:none !important; }

.reforma-news-banner{
	position:relative;
	width:100%;
	max-width:1303px;
	margin:0 auto;
	aspect-ratio:1303 / 364;
	border-radius:32px;
	background-color:#f2662d;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	overflow:hidden;
}

/* ---- B. News & Journal featured (Figma Group 160) ---- */
.reforma-news-insights{ overflow:visible; }

.reforma-news-journal-head{
	width:100%;
	max-width:1306px;
	margin:0 auto var(--wp--preset--spacing--40);
	gap:24px;
}
.reforma-news-journal-headtext{ flex:1 1 520px; min-width:280px; }
.reforma-news-journal-eyebrow{
	color:#9d793d !important;
	letter-spacing:0.04em;
	text-transform:none;
	font-size:20px;
}
.reforma-news-journal-title{
	color:#402800 !important;
	font-size:clamp(40px,4.6vw,58px); /* Figma 42:174 heading: glyph ~54px; Playfair fallback is narrower than Fraunces so size up slightly + small tracking */
	line-height:1.12;
	letter-spacing:0.01em;
	margin-top:14px !important;
	margin-bottom:12px !important;
}
.reforma-news-journal-sub{ color:rgba(0,0,0,0.55) !important; font-size:20px; margin-top:0 !important; }

.reforma-news-allnews-wrap{ flex:0 0 auto; }
.reforma-news-allnews-btn .wp-block-button__link,
.reforma-news-allnews-btn.is-style-outline .wp-block-button__link{
	border:1px solid #9c783a;
	border-radius:0 30px 0 30px;
	background:transparent;
	color:#9c783a;
	font-family:'Playfair Display','Fraunces','TRY Vesterbro',Georgia,serif;
	font-weight:700;
	font-size:20px;
	min-width:216px;
	min-height:60px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 24px;
	transition:background .2s ease,color .2s ease;
}
.reforma-news-allnews-btn .wp-block-button__link:hover{ background:#9c783a; color:#fff; }

/* asymmetric featured grid: 2 small (left col stacked) + 1 large (right) + newsletter band */
.reforma-news-journal-grid{
	width:100%;
	max-width:1306px;
	margin:0 auto;
	display:grid;
	grid-template-columns:529fr 751fr;
	grid-template-areas:
		"small large"
		"small newsletter";
	gap:24px;
	align-items:start;
}
.reforma-news-journal-small{ grid-area:small; display:flex; flex-direction:column; gap:24px; }
.reforma-news-journal-small .reforma-news-journal-small-tpl{ display:flex; flex-direction:column; gap:24px; list-style:none; margin:0; padding:0; }
.reforma-news-journal-large{ grid-area:large; }
.reforma-news-journal-large .reforma-news-journal-large-tpl{ list-style:none; margin:0; padding:0; }
.reforma-news-newsletter{ grid-area:newsletter; }

/* journal card base */
.reforma-jcard{
	background:#fff;
	border-radius:24px;
	box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
	padding:16px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.reforma-jcard.reforma-jcard--large{ height:424px; }
.reforma-news-journal-small .reforma-jcard{ height:299px; }
.reforma-jcard-img img,
.reforma-jcard-img.wp-block-post-featured-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:12px;
}
.reforma-jcard-img{ width:100%; overflow:hidden; border-radius:12px; }
.reforma-jcard-media{ position:relative; }
.reforma-jcard-pill{
	position:absolute;
	top:12px;
	right:12px;
	background:#f25424;
	color:#fff;
	border-radius:8px;
	padding:2px 10px;
	font-size:12px;
	font-weight:600;
	line-height:1.6;
}
.reforma-jcard-title a,
.reforma-jcard-title{ color:#3e273b !important; font-weight:700; line-height:1.2; text-decoration:none; }
.reforma-jcard-title--large{ font-size:24px; }
.reforma-jcard-excerpt{ color:#a08298 !important; font-size:16px; line-height:1.2; margin:0; }

/* newsletter band (Figma 96:1443 — 751x175 r24, #F254246E overlay) */
.reforma-news-newsletter{
	position:relative;
	min-height:175px;
	border-radius:24px;
	overflow:hidden;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
	display:flex;
	align-items:center;
}
.reforma-news-newsletter-overlay{
	position:absolute; inset:0;
	background:#f254246e;
	z-index:1;
}
.reforma-news-newsletter-inner{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
	width:100%;
	padding:24px 32px;
}
.reforma-news-newsletter-title{
	color:#fff;
	font-weight:700;
	font-size:clamp(24px,2.4vw,32px);
	line-height:1.2;
	margin:0;
	flex:1 1 280px;
}
/* Figma 96:1443 form: input on top, consent row, Submit outlined bottom-right (stacked) */
.reforma-news-newsletter-form{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	flex:0 1 352px;
}
.reforma-news-newsletter-input{
	width:100%;
	min-width:0;
	border:none;
	border-radius:0;
	padding:14px 18px;
	font-size:15px;
	background:#fff;
	color:#3e273b;
}
.reforma-news-newsletter-input::placeholder{ color:#7a6f66; }
.reforma-news-newsletter-consent{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:0;
	color:#fff;
	font-size:12px;
	line-height:1.35;
}
.reforma-news-newsletter-check{
	flex:0 0 auto;
	width:16px;
	height:16px;
	border:1px solid #fff;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:9px;
	line-height:1;
	margin-top:1px;
}
.reforma-news-newsletter-submit{
	align-self:flex-end;
	border:1px solid #fff;
	border-radius:0 28px 0 28px;
	background:transparent;
	color:#fff;
	font-weight:700;
	font-size:16px;
	padding:10px 32px;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
}
.reforma-news-newsletter-submit:hover{ background:#fff; color:#f25424; }

/* ---- C. Latest from Our Blog (Figma Group 134) ---- */
.reforma-blog-latest-head{
	width:100%;
	max-width:1306px;
	margin:0 auto var(--wp--preset--spacing--50);
	gap:24px;
}
.reforma-blog-latest-title{
	color:#402800 !important;
	font-size:clamp(34px,3.6vw,48px);
	font-weight:700;
	line-height:1.2;
}

/* sort toggle (figma group-134 Switch: 464x56 #FFF0E5 pad8 gap10, active #29514C) */
.reforma-blog-sort{
	display:inline-flex;
	align-items:center;
	gap:10px;
	background:#fff0e5;
	border-radius:12px;
	padding:8px;
	box-sizing:border-box;
	min-height:56px;
}
.reforma-blog-sort-opt{
	border:none;
	background:transparent;
	color:#4f404b;
	font-size:14px;
	font-weight:400;
	line-height:1.3;
	padding:10px 22px;
	border-radius:8px;
	cursor:pointer;
	white-space:nowrap;
	transition:background .2s ease,color .2s ease;
}
.reforma-blog-sort-opt.is-active{
	background:#29514c;
	color:#fff;
	font-weight:700;
}

/* 3x3 grid, cards 418x239 r16 shadow, gap 24 */
.reforma-blog-query{ width:100%; max-width:1306px; margin:0 auto; }
.reforma-blog-grid.wp-block-post-template{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
	margin:0;
	padding:0;
	list-style:none;
}
.reforma-bcard{
	background:#fff;
	border-radius:16px;
	box-shadow:0 0 6.3px 0 rgba(0,0,0,0.078); /* figma #00000014 = a 20/255 */
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
	min-height:239px;
}
.reforma-bcard-media{ position:relative; }
.reforma-bcard-img{ width:100%; overflow:hidden; border-radius:12px; }
.reforma-bcard-img img,
.reforma-bcard-img.wp-block-post-featured-image img{
	width:100%;
	height:134px;
	object-fit:cover;
	border-radius:12px;
}
.reforma-bcard-pill{
	position:absolute;
	top:10px;
	right:10px;
	background:#f25424;
	color:#fff;
	border-radius:8px;
	padding:2px 10px;
	font-size:11px;
	font-weight:600;
	line-height:1.6;
}
.reforma-bcard-title a,
.reforma-bcard-title{
	color:#3e273b !important;
	font-weight:700;
	font-size:16px;
	line-height:1.25;
	text-decoration:none;
	margin:0;
}
.reforma-bcard-excerpt{
	color:#a08298 !important;
	font-size:12px;
	line-height:1.4;
	margin:0;
}
.reforma-bcard-meta{
	margin-top:auto;
	gap:12px;
	font-size:11px;
	color:#4f404b;
}
.reforma-bcard-meta .reforma-bcard-author,
.reforma-bcard-meta .reforma-bcard-date{ font-size:11px; color:#4f404b; margin:0; }
.reforma-bcard-meta .wp-block-post-author__avatar img{ border-radius:50%; }
.reforma-bcard-meta .wp-block-post-author{ display:flex; align-items:center; gap:6px; }

/* pagination — 32px circles, active #2B2B2B */
.reforma-blog-pagination.wp-block-query-pagination{
	margin-top:40px;
	gap:5px;
	align-items:center;
}
.reforma-blog-pagination .wp-block-query-pagination-numbers,
.reforma-blog-pagination .wp-block-query-pagination-previous,
.reforma-blog-pagination .wp-block-query-pagination-next{ display:inline-flex; gap:5px; align-items:center; }
.reforma-blog-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	border:1px solid #ececec;
	background:#fff;
	color:#3e273b;
	font-size:13px;
	font-weight:600;
	text-decoration:none;
	line-height:1;
}
.reforma-blog-pagination .page-numbers.current{
	background:#2b2b2b;
	color:#fff;
	border-color:#2b2b2b;
}
.reforma-blog-pagination .page-numbers.dots{ border:none; background:transparent; }
.reforma-blog-pagination .wp-block-query-pagination-previous,
.reforma-blog-pagination .wp-block-query-pagination-next{
	width:32px;
	height:32px;
	border-radius:50%;
	border:1px solid #ececec;
	background:#fff;
	color:#3e273b;
	font-size:13px;
	justify-content:center;
	padding:0;
}

/* ---- D. hero H1 -> Playfair (has-display-font-family binding fix) ---- */
.reforma-news-banner-title.has-display-font-family,
.reforma-news-journal-title.has-display-font-family,
.reforma-blog-latest-title.has-display-font-family,
.reforma-jcard-title.has-display-font-family,
.reforma-jcard-title.has-display-font-family a,
.reforma-bcard-title.has-display-font-family,
.reforma-bcard-title.has-display-font-family a,
.reforma-news-newsletter-title.has-display-font-family{
	font-family:'Playfair Display','Fraunces','TRY Vesterbro',Georgia,'Times New Roman',serif !important;
}

/* ---- responsive ---- */
@media (max-width:1023px){
	.reforma-news-journal-grid{
		grid-template-columns:1fr 1fr;
		grid-template-areas:
			"small small"
			"large large"
			"newsletter newsletter";
	}
	.reforma-news-journal-small{ flex-direction:row; }
	.reforma-news-journal-small .reforma-news-journal-small-tpl{ flex-direction:row; flex:1; }
	.reforma-news-journal-small .reforma-jcard{ flex:1; }
	.reforma-blog-grid.wp-block-post-template{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
	.reforma-news-journal-grid{
		grid-template-columns:1fr;
		grid-template-areas:"small" "large" "newsletter";
	}
	.reforma-news-journal-small{ flex-direction:column; }
	.reforma-news-journal-small .reforma-news-journal-small-tpl{ flex-direction:column; }
	.reforma-news-journal-small .reforma-jcard,
	.reforma-jcard.reforma-jcard--large{ height:auto; }
	.reforma-blog-grid.wp-block-post-template{ grid-template-columns:1fr; }
	.reforma-news-newsletter-inner{ flex-direction:column; align-items:stretch; text-align:center; }
	.reforma-news-newsletter-form{ flex:1 1 auto; }
	.reforma-blog-latest-head,
	.reforma-news-journal-head{ flex-direction:column; align-items:flex-start; }
	.reforma-blog-sort{ width:100%; overflow-x:auto; }
}
/* === end news archive — figma 42:174 === */

/* news archive — figma 42:174 (static pagination UI, appended) */
.reforma-blog-pagination-static{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:5px;
	margin-top:40px;
	flex-wrap:wrap;
}
.reforma-blog-pagination-static .rbp-num,
.reforma-blog-pagination-static .rbp-ctrl{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	border:1px solid #ececec;
	background:#fff;
	color:#3e273b;
	font-size:13px;
	font-weight:600;
	line-height:1;
	user-select:none;
}
.reforma-blog-pagination-static .rbp-num.is-current{
	background:#2b2b2b;
	color:#fff;
	border-color:#2b2b2b;
}
.reforma-blog-pagination-static .rbp-dots{
	border:none;
	background:transparent;
	color:#3e273b;
	width:auto;
	min-width:20px;
}
/* If the dynamic Query Loop pagination actually renders (more than one page of
   real posts), hide the static placeholder so only the live control shows. */
.reforma-blog-query .wp-block-query-pagination:has(.page-numbers) ~ .reforma-blog-pagination-static,
.reforma-blog-latest:has(.wp-block-query-pagination .page-numbers) .reforma-blog-pagination-static{
	display:none;
}
/* === end news archive — figma 42:174 (static pagination) === */

/* blog single — figma 43:504 */
/* Single-column article rebuild (replaces inherited Legacy 2-col single-post).
   Scoped under .reforma-single so it overrides inherited .reforma-article-* rules.
   Figma values from pages/homepage-2 (frame 43:504). Fonts: Playfair Display + Poppins. */

.reforma-single {
	--reforma-single-w: 862px;
	background: #ffffff;
}

/* Defensively hide any inherited Legacy single-post leftovers if they ever render here */
.reforma-single .reforma-article-sidebar,
.reforma-single .reforma-article-stats,
.reforma-single .reforma-article-columns,
.reforma-single #reforma-article-stats {
	display: none !important;
}

/* ---- Hero: photo banner, radius 0 32 32 32, centered 64/700 title ---- */
.reforma-single .reforma-article-hero {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	min-height: 560px;
	border-radius: 0 32px 32px 32px;
	overflow: hidden;
	align-items: flex-end;
	justify-content: center;
}
.reforma-single .reforma-article-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--reforma-single-w);
}
.reforma-single .reforma-article-hero-title {
	font-family: "Fraunces", "Playfair Display", "TRY Vesterbro", Georgia, serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
	margin: 0 auto;
	max-width: var(--reforma-single-w);
}

/* ---- Centered 862 body wrapper ---- */
.reforma-single .reforma-single-body {
	width: 100%;
	max-width: var(--reforma-single-w);
	margin: 0 auto;
}

/* ---- Breadcrumb: centered eyebrow + Home / Blog / Category ---- */
.reforma-single .reforma-article-breadcrumb {
	width: 100%;
	max-width: var(--reforma-single-w);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.reforma-single .reforma-article-eyebrow {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c08a3e;
	text-align: center;
	margin: 0;
}
.reforma-single .reforma-article-eyebrow a { color: #c08a3e; text-decoration: none; }
.reforma-single .reforma-breadcrumb-trail {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #00000080;
	text-align: center;
}
.reforma-single .reforma-breadcrumb-trail ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.reforma-single .reforma-breadcrumb-trail a { color: #00000080; text-decoration: none; }

/* ---- Body typography: #0000008c, Figma line-height, 862 column ---- */
.reforma-single .reforma-article-body {
	width: 100%;
	max-width: var(--reforma-single-w);
	margin: 0 auto;
	text-align: left;
}
.reforma-single .reforma-article-body .wp-block-post-content > * { margin-top: 24px; }
.reforma-single .reforma-article-body .wp-block-post-content > *:first-child { margin-top: 0; }
.reforma-single .reforma-article-body p,
.reforma-single .reforma-article-body li {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: #0000008c;
}
.reforma-single .reforma-article-body h2 {
	font-family: "Fraunces", "Playfair Display", "TRY Vesterbro", Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #3e273b;
}
.reforma-single .reforma-article-body h3 {
	font-family: "Fraunces", "Playfair Display", "TRY Vesterbro", Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: #3e273b;
}
.reforma-single .reforma-article-body blockquote {
	background: #fff0e5;
	border: 1px solid #fae7f5;
	border-radius: 8px;
	padding: 32px;
	font-size: 24px;
	line-height: 1.3333;
	color: #3e273b;
	margin: 8px 0;
}
.reforma-single .reforma-article-body blockquote p { font-size: 24px; line-height: 1.3333; color: #3e273b; }
.reforma-single .reforma-article-body img,
.reforma-single .reforma-article-body .wp-block-image img {
	width: 100%;
	border-radius: 32px;
}

/* ---- "Latest from Our Blog" related row ---- */
.reforma-single .reforma-related {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	background: #ffffff;
}
.reforma-single .reforma-related-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.reforma-single .reforma-related-eyebrow {
	font-family: "Poppins", sans-serif;
	color: #c08a3e;
	margin: 0;
}
.reforma-single .reforma-related-heading {
	font-family: "Fraunces", "Playfair Display", "TRY Vesterbro", Georgia, serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #402800;
	margin: 0;
}
.reforma-single .reforma-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
}
.reforma-single .reforma-related-grid > li,
.reforma-single .reforma-related-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 0 6.32px 0 #00000014;
	padding: 12px;
	overflow: hidden;
}
.reforma-single .reforma-related-thumb img,
.reforma-single .reforma-related-thumb {
	width: 100%;
	height: 134px;
	object-fit: cover;
	border-radius: 16px;
}
.reforma-single .reforma-related-cat {
	font-family: "Poppins", sans-serif;
	color: #c08a3e;
	margin: 0;
}
.reforma-single .reforma-related-cat a { color: #c08a3e; text-decoration: none; }
.reforma-single .reforma-related-title {
	font-family: "Fraunces", "Playfair Display", "TRY Vesterbro", Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #402800;
	margin: 0;
}
.reforma-single .reforma-related-title a { color: #402800; text-decoration: none; }
.reforma-single .reforma-related-excerpt {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 1.2;
	color: #0000008c;
	margin: 0;
}
.reforma-single .reforma-related-excerpt p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.reforma-single .reforma-article-hero { min-height: 420px; }
	.reforma-single .reforma-article-hero-title { font-size: 44px; }
	.reforma-single .reforma-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.reforma-single .reforma-article-hero { min-height: 340px; border-radius: 0 20px 20px 20px; }
	.reforma-single .reforma-article-hero-title { font-size: 32px; }
	.reforma-single .reforma-article-body p { font-size: 16px; }
	.reforma-single .reforma-article-body h2 { font-size: 26px; }
	.reforma-single .reforma-related-heading { font-size: 28px; }
	.reforma-single .reforma-related-grid { grid-template-columns: 1fr; }
}

/* v2.10.59 — Fraunces (OFL, Google Fonts) as the licensed stand-in for TRY Vesterbro (commercial). Variable woff2, weights 400-700. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/fraunces-var.woff2') format('woff2');font-optical-sizing:auto}

/* ===== v2.10.70 — Single article (Figma 43:504): badge, subtitle, byline, infobar, pullquote, figure, end-CTA ===== */
.reforma-article-hero .reforma-article-badge{display:inline-block;background:#2b2b2b;color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;padding:7px 16px;border-radius:999px;margin:0 auto 18px;width:fit-content;text-align:center;}
.reforma-article-hero .reforma-article-badge a{color:#fff;text-decoration:none;}
.reforma-article-hero .reforma-article-hero-title{margin:0 auto 14px;max-width:760px;}
.reforma-article-hero .reforma-article-subtitle{max-width:560px;margin:0 auto 22px;color:rgba(255,255,255,.92);line-height:1.5;text-align:center;}
.reforma-article-hero .reforma-article-subtitle a{display:none;}
.reforma-article-byline{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 18px 6px 6px;width:fit-content;margin:0 auto;}
.reforma-article-byline .reforma-byline-avatar img,.reforma-article-byline .wp-block-avatar img{border-radius:100px;width:32px;height:32px;display:block;}
.reforma-article-byline .reforma-byline-name{color:#fff;margin:0;}
.reforma-article-byline .reforma-byline-name a{color:#fff;text-decoration:none;}
.reforma-article-byline .reforma-byline-name::before{content:"By ";font-weight:400;opacity:.85;}
.reforma-article-byline .reforma-byline-date{color:rgba(255,255,255,.85);margin:0;position:relative;padding-left:16px;}
.reforma-article-byline .reforma-byline-date::before{content:"\2022";position:absolute;left:4px;color:rgba(255,255,255,.6);}
.reforma-article-infobar{max-width:862px;margin-inline:auto;gap:16px;}
.reforma-breadcrumb-pill{background:#fff0e5;border-radius:999px;padding:8px 18px;align-items:center;}
.reforma-breadcrumb-pill .reforma-breadcrumb-trail{margin:0;font-size:14px;color:#3e273b;}
.reforma-breadcrumb-pill a{color:#3e273b;text-decoration:none;opacity:.75;}
.reforma-breadcrumb-pill a:hover{opacity:1;}
.reforma-readtime-pill{display:inline-flex;align-items:center;gap:8px;background:#fff0e5;color:#3e273b;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:500;white-space:nowrap;}
.reforma-readtime-pill .reforma-readtime-icon{color:#9c783a;flex:0 0 auto;}
.reforma-article-body h2.wp-block-heading{font-family:'Fraunces','Playfair Display',Georgia,serif;font-size:28px;font-weight:700;line-height:1.25;color:#3e273b;margin:38px 0 14px;}
.reforma-article-body p{font-size:17px;line-height:1.75;color:#4a4a4a;margin:0 0 18px;}
.reforma-article-body .reforma-article-figure{margin:30px 0;}
.reforma-article-body .reforma-article-figure img{border-radius:18px;width:100%;height:auto;}
.reforma-article-body .reforma-pullquote{border:0;background:#fff0e5;border-radius:18px;padding:30px 34px;margin:32px 0;}
.reforma-article-body .reforma-pullquote p{font-family:'Fraunces','Playfair Display',Georgia,serif;font-size:24px;line-height:1.45;color:#3e273b;font-style:normal;margin:0 0 10px;}
.reforma-article-body .reforma-pullquote cite{font-style:normal;font-size:14px;color:#9c783a;font-weight:600;}
.reforma-article-body .reforma-article-endcta{background:#29514c;border-radius:24px;padding:40px;margin-top:44px;text-align:center;}
.reforma-article-body .reforma-article-endcta h2.wp-block-heading{color:#fff;margin-top:0;}
.reforma-article-body .reforma-article-endcta p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 22px;}
.reforma-article-body .reforma-article-endcta .wp-block-button__link{background:linear-gradient(90deg,#9C783A,#825A14);color:#fff;border-radius:0 30px 0 30px;padding:14px 34px;font-weight:600;}
@media(max-width:781px){.reforma-article-infobar{flex-direction:column;align-items:flex-start;}.reforma-article-body h2.wp-block-heading{font-size:24px;}.reforma-article-body .reforma-article-endcta{padding:28px;}}

/* ===== v2.10.71 — article hero readability + infobar shortcode wrapper ===== */
.reforma-article-hero .reforma-article-hero-title{text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.4);}
.reforma-article-hero .reforma-article-subtitle{text-shadow:0 1px 10px rgba(0,0,0,.5);}
.reforma-article-infobar > p{margin:0;}
.reforma-article-infobar > p .reforma-readtime-pill{margin:0;}

/* ===== v2.10.72 — byline-as-shortcode + badge centering ===== */
.reforma-article-hero .reforma-article-badge{display:block;width:fit-content;margin-left:auto;margin-right:auto;}
.reforma-article-byline .reforma-byline-inner{display:inline-flex;align-items:center;gap:10px;}
.reforma-article-byline .reforma-byline-avatar{width:32px;height:32px;border-radius:100px;display:block;}
.reforma-article-byline .reforma-byline-name{color:#fff;font-size:13px;font-weight:600;}
.reforma-article-byline .reforma-byline-date{color:rgba(255,255,255,.85);font-size:13px;position:relative;padding-left:16px;}
.reforma-article-byline .reforma-byline-date::before{content:"\2022";position:absolute;left:4px;color:rgba(255,255,255,.6);}

/* ===== v2.10.73 — News "Latest from Our Blog" grid heading (Figma 42:174) ===== */
.reforma-news-grid-heading.reforma-news-grid-heading{font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif!important;font-size:40px!important;font-weight:700;color:#402800;margin:8px 0 24px;}
@media(max-width:781px){.reforma-news-grid-heading{font-size:26px;}}

/* ===== v2.10.74 — Home curated-offer floral CTA band (Figma 1:1021 Group 115) ===== */
.reforma-curated-offer .reforma-offer-eyebrow{margin:0 0 10px;opacity:.95;}
.reforma-curated-offer .reforma-offer-title{margin:0 0 14px;font-size:clamp(40px,5vw,60px);text-shadow:0 2px 18px rgba(0,0,0,.5);}
.reforma-curated-offer .reforma-offer-sub{max-width:600px;margin:0 auto;color:rgba(255,255,255,.92);line-height:1.55;text-shadow:0 1px 8px rgba(0,0,0,.45);}
.reforma-curated-offer .reforma-offer-btn .wp-block-button__link{background:#f25424;color:#fff;border-radius:0 12px 0 12px;padding:15px 34px;font-weight:600;font-size:16px;}
.reforma-curated-offer .reforma-offer-btn .wp-block-button__link:hover{background:#e0481d;}
.reforma-curated-offer img.wp-block-cover__image-background{object-fit:cover;}
.reforma-curated-offer .wp-block-cover__background{opacity:.74 !important;} /* v2.10.246 Figma overlay 96,84,65 (was dim50=137,120,96) */

/* ===== v2.10.405 — Doctor profile: photo+name+specialty+book (simplified) ===== */
.reforma-single-doctor .reforma-doctor-profile{background:#fbf6ef;padding:0 clamp(16px,5vw,68px) 80px;}
.reforma-doctor-profile .rdp-card{max-width:1039px;margin:-90px auto 0;position:relative;z-index:2;background:#fff;border-radius:0 0 0 50px;box-shadow:0 24px 60px rgba(62,39,59,.12);overflow:hidden;}
.reforma-doctor-profile .rdp-top{display:grid;grid-template-columns:400px 1fr;min-height:520px;}
.reforma-doctor-profile .rdp-photo-col{position:relative;overflow:hidden;background:#D9D9D9;}
.reforma-doctor-profile .rdp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.reforma-doctor-profile .rdp-pill{position:absolute;bottom:20px;left:20px;z-index:1;display:inline-block;background:#9c783a;color:#fff;border-radius:20px;padding:5px 14px;font-family:'Fraunces','Playfair Display',Georgia,serif;font-size:14px;font-weight:400;}
.reforma-doctor-profile .rdp-photo-col picture{position:absolute;inset:0;display:block;}
.reforma-doctor-profile .rdp-photo-col picture img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;display:block;}
.reforma-doctor-profile .rdp-info-col{display:flex;flex-direction:column;justify-content:center;padding:48px;gap:20px;background:#fff;}
.reforma-doctor-profile .rdp-name{margin:0;font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(32px,3.5vw,48px);line-height:1.1;color:#402800;}
.reforma-doctor-profile .rdp-role{margin:0;font-family:'Poppins',sans-serif;font-size:17px;line-height:1.5;color:rgba(0,0,0,.6);}
.reforma-doctor-profile .rdp-book{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:12px;background:linear-gradient(90deg,#9C783A,#825A14);color:#fff;border-radius:0 30px 0 30px;padding:16px 36px;font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:700;font-size:18px;text-decoration:none;}
.reforma-doctor-profile .rdp-book:hover{opacity:.93;}
@media(max-width:860px){.reforma-doctor-profile .rdp-top{grid-template-columns:1fr;}.reforma-doctor-profile .rdp-photo-col{min-height:420px;}.reforma-doctor-profile .rdp-info-col{padding:32px 28px;}.reforma-doctor-profile .rdp-book{align-self:stretch;text-align:center;}}
@media(max-width:640px){.reforma-doctor-profile .rdp-card{margin-top:-50px;}}
[dir="rtl"] .reforma-doctor-profile .rdp-pill{left:auto;right:20px;}
[dir="rtl"] .reforma-doctor-profile .rdp-card{border-radius:0 0 50px 0;}

/* ===== v2.10.84 — P2 polish: contact sidebar order (Phone first, Figma) ===== */
.reforma-contact-info-cards > .reforma-contact-info-card:nth-child(3){order:-1;}

/* ===== v2.10.88 — PDP vertical thumbnail strip with chevrons (Figma 48:897) ===== */
.reforma-pdp-gallery--vstrip{display:flex !important;flex-direction:row !important;gap:14px;align-items:stretch;}
.reforma-pdp-gallery--vstrip .reforma-pdp-main-wrap{flex:1 1 auto;margin:0;min-width:0;}
.reforma-pdp-gallery--vstrip img.reforma-pdp-main-image{width:100% !important;height:100% !important;object-fit:cover;display:block;border-radius:100px 0 0 0;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumbs-col{flex:0 0 78px;display:flex;flex-direction:column;align-items:center;gap:10px;align-self:center;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb-nav{width:40px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e7dccb;border-radius:8px;color:#402800;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb-nav:hover{background:#9c783a;color:#fff;border-color:#9c783a;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumbs{display:flex !important;flex-direction:column !important;gap:12px;margin:0 !important;overflow:hidden;max-height:340px;scroll-behavior:smooth;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb{width:74px;height:74px;flex:0 0 auto;padding:0;border:1px solid #e7dccb;border-radius:12px;overflow:hidden;background:#f7efe3;cursor:pointer;aspect-ratio:auto;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb img{width:100% !important;height:100% !important;object-fit:cover;display:block;border-radius:11px;aspect-ratio:auto;}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb.is-active{border-color:#9c783a;border-width:2px;}
@media (max-width:781px){
	.reforma-pdp-gallery--vstrip{flex-direction:row !important;}
	.reforma-pdp-gallery--vstrip .reforma-pdp-thumbs-col{flex-basis:64px;}
	.reforma-pdp-gallery--vstrip .reforma-pdp-thumb{width:60px;height:60px;}
}

/* ===== v2.10.89 — News featured block fix + Blog-single defects ===== */
/* News: un-mirror grid (Figma: large+newsletter LEFT 751, small cards RIGHT 529) */
.reforma-news-journal-grid{ grid-template-columns:751fr 529fr !important; grid-template-areas:"large small" "newsletter small" !important; }
/* News: image sizing — markup uses .reforma-jcard-img-el (no .reforma-jcard-img wrapper) */
.reforma-jcard{ text-decoration:none; }
.reforma-jcard .reforma-jcard-media{ position:relative; flex:1 1 auto; min-height:120px; border-radius:12px; overflow:hidden; display:block; }
.reforma-jcard .reforma-jcard-media .reforma-jcard-img-el{ width:100% !important; height:100% !important; object-fit:cover; display:block; border-radius:12px; }
.reforma-jcard .reforma-jcard-img-fallback{ width:100%; height:100%; background:linear-gradient(135deg,#f7efe3,#efe0cf); }
.reforma-jcard .reforma-jcard-excerpt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* News: journal-card byline (Figma 42:174: avatar + "By REFORMA Team • Month D, YYYY", serif) */
.reforma-jcard .reforma-jcard-byline{ display:flex; align-items:center; gap:8px; margin-top:4px; font-family:var(--wp--preset--font-family--display); font-size:13px; line-height:1.2; color:#3e273b; }
.reforma-jcard .reforma-jcard-avatar{ width:22px; height:22px; border-radius:50%; overflow:hidden; background:#fff0e6; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.reforma-jcard .reforma-jcard-avatar img{ width:16px; height:16px; }
.reforma-jcard .reforma-jcard-by{ font-weight:700; color:#3e273b; }
.reforma-jcard .reforma-jcard-dot{ color:#9c7bb0; }
.reforma-jcard .reforma-jcard-date{ font-weight:600; color:#3e273b; }
/* News: eyebrow gold serif, no dash (Figma 42:174: Playfair Display bold serif, not sans) */
.reforma-news-insights .reforma-news-journal-eyebrow{ color:#9c783a !important; font-family:var(--wp--preset--font-family--display) !important; font-weight:700 !important; letter-spacing:normal !important; }
.reforma-news-insights .reforma-news-journal-eyebrow::before{ content:none !important; display:none !important; }
/* News: "All News" is a bare <a> — style it as the outlined pill */
.reforma-news-allnews-btn{ display:inline-flex !important; align-items:center; align-self:center; border:1px solid #9c783a; color:#9c783a; background:transparent; border-radius:0 30px 0 30px; padding:11px 26px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .15s,color .15s; }
.reforma-news-allnews-btn:hover{ background:#9c783a; color:#fff; }

/* Blog-single: remove duplicate "By " (the [reforma_byline] shortcode already prints "By Reforma Team") */
.reforma-article-byline .reforma-byline-name::before{ content:none !important; }
/* Blog-single: end-CTA heading must be white on the green panel (was dark-on-dark) */
.reforma-article-body .reforma-article-endcta h2,
.reforma-article-body .reforma-article-endcta h2.wp-block-heading{ color:#ffffff !important; }
/* Blog-single: in-body image = full-width photo block (not a small floating cut-out) */
.reforma-article-body .reforma-article-figure{ margin-left:0; margin-right:0; }
.reforma-article-body .reforma-article-figure img{ width:100% !important; height:auto; aspect-ratio:862/550; object-fit:cover; border-radius:32px; background:#f7efe3; display:block; }

/* ===== v2.10.91 — About banner: Figma dimensions (1303x364, white bg, box-sizing) ===== */
#reforma-about-hero{ background:#ffffff !important; }
#reforma-about-hero > div{ box-sizing:border-box !important; max-width:1303px !important; min-height:364px !important; height:364px !important; padding:48px !important; margin-left:auto !important; margin-right:auto !important; }
@media (max-width:1024px){ #reforma-about-hero > div{ height:auto !important; min-height:320px !important; } }

/* ===== v2.10.100 — QA batch 1 ===== */
/* News featured cards: give media a fixed height so the excerpt isn't starved/clipped */
.reforma-news-journal-large .reforma-jcard-media{flex:0 0 auto !important;height:248px !important;}
.reforma-news-journal-small .reforma-jcard-media{flex:0 0 auto !important;height:150px !important;}
.reforma-jcard .reforma-jcard-excerpt{margin-top:0;}
/* Blog-single end-CTA: force readable white text (heading + body) on the green panel */
.reforma-article-body .reforma-article-endcta h2,
.reforma-article-body .reforma-article-endcta h2.wp-block-heading{color:#ffffff !important;}
.reforma-article-body .reforma-article-endcta p{color:rgba(255,255,255,0.9) !important;}

/* ===== v2.10.101 — QA batch 2 ===== */
/* Contact submit: brand diagonal notch (was both-bottom-rounded) */
.reforma-contact-form-wrap .ff-btn-submit,
.reforma-contact-form-wrap button[type="submit"]{border-radius:0 30px 0 30px !important;}
/* Doctors listing card: bottom scrim tuned to Figma "floral-beauty-concept 3" gradient profile (v2.10.268). Near-opaque black at base, dark through the mid, quick fade near the top edge of the scrim. */
.reforma-doctor-card__photo > div[aria-hidden]{background:linear-gradient(to top,rgba(0,0,0,0.98) 0%,rgba(0,0,0,0.9) 15%,rgba(0,0,0,0.78) 35%,rgba(0,0,0,0.68) 50%,rgba(0,0,0,0.45) 66%,rgba(0,0,0,0.3) 83%,rgba(0,0,0,0) 100%) !important;}

/* ===== v2.10.106 — FAQ 2-column (Figma 50:936 "Need Answers? We've Got You Covered!") ===== */
.reforma-faq--twocol .reforma-faq-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:56px;max-width:1200px;margin:0 auto;align-items:start;}
.reforma-faq--twocol .reforma-faq-intro__h{font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(30px,3.2vw,44px);line-height:1.15;color:#3e273b;margin:0 0 18px;}
.reforma-faq--twocol .reforma-faq-intro__p{font-family:'Poppins',sans-serif;font-size:16px;line-height:1.7;color:#6b5563;margin:0 0 28px;max-width:380px;}
.reforma-faq--twocol .reforma-faq-intro__btn{display:inline-flex;align-items:center;gap:10px;border:1px solid #9c783a;color:#9c783a;background:transparent;border-radius:0 24px 0 24px;padding:14px 30px;font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:600;font-size:16px;text-decoration:none;transition:background .15s,color .15s;}
.reforma-faq--twocol .reforma-faq-intro__btn:hover{background:#9c783a;color:#fff;}
.reforma-faq--twocol .reforma-faq-list{display:flex;flex-direction:column;gap:14px;}
.reforma-faq--twocol .reforma-faq-item{background:#ffffff;border:1px solid #ece3d5;border-radius:16px;overflow:hidden;transition:background .18s ease;}
.reforma-faq--twocol .reforma-faq-item__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:600;font-size:18px;color:#3e273b;}
.reforma-faq--twocol .reforma-faq-item__q::-webkit-details-marker{display:none;}
.reforma-faq--twocol .reforma-faq-item__q::after{content:"+";flex:0 0 auto;font-family:'Poppins',sans-serif;font-weight:400;font-size:26px;line-height:1;color:#9c783a;}
.reforma-faq--twocol .reforma-faq-item[open]{background:#29514c;border-color:#29514c;}
.reforma-faq--twocol .reforma-faq-item[open] .reforma-faq-item__q{color:#ffffff;}
.reforma-faq--twocol .reforma-faq-item[open] .reforma-faq-item__q::after{content:"\2212";color:#ffffff;}
.reforma-faq--twocol .reforma-faq-item__a{padding:0 26px 22px;font-family:'Poppins',sans-serif;font-size:15px;line-height:1.65;color:#5a4a55;}
.reforma-faq--twocol .reforma-faq-item[open] .reforma-faq-item__a{color:rgba(255,255,255,0.88);}
.reforma-faq--twocol .reforma-faq-item__a p{margin:0;}
@media (max-width:900px){.reforma-faq--twocol .reforma-faq-grid{grid-template-columns:1fr;gap:32px;}}

/* ===== v2.10.107 — FAQ 2-col: kill the legacy left ::before marker (keep right ::after only) ===== */
.reforma-faq--twocol .reforma-faq-item__q::before{content:none !important;display:none !important;}
.reforma-faq--twocol .reforma-faq-item__q > span{flex:1 1 auto;text-align:left;}

/* ============================================================
   ARTICLE BODY — serif body copy to match Figma (TRY Vesterbro)
   v2.10.113. Figma article body is a humanist serif, not sans.
   Fraunces (text optical-size) is the free stand-in; Georgia is
   the readable serif fallback.
   ============================================================ */
.reforma-article-body .wp-block-post-content p,
.reforma-article-body .wp-block-post-content li,
.reforma-article-body .wp-block-post-content blockquote p{
	font-family:'Fraunces','TRY Vesterbro',Georgia,'Times New Roman',serif !important;
	font-optical-sizing:auto;
	letter-spacing:0.002em;
}

/* ============================================================
   BLOG single — Figma fidelity (v2.10.117)
   B1: replace off-brand BLUE hero overlay with a warm neutral dark
       scrim (brand has no blue); B3: article H2 + hero title = serif.
   ============================================================ */
.reforma-article-hero > .wp-block-cover__background{
	background-image: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.52) 100%) !important;
	background-color: transparent !important; opacity:1 !important;
}
@media (max-width:768px){
	.reforma-article-hero > .wp-block-cover__background{ background-image: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%) !important; }
}
/* hero title back to serif (Figma) — was forced to body sans */
.reforma-article-hero .wp-block-post-title{ font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important; }
/* B3 article body H2 = serif bold (Figma) */
.reforma-article-body .wp-block-post-content h2,
.reforma-article-body .wp-block-post-content h2.wp-block-heading{
	font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important; font-weight:700 !important;
}

/* ============================================================
   CONTACT form — Figma fidelity (v2.10.120)
   Serif sentence-case labels; NO required asterisk.
   v2.10.247 — label color gold #9c783a -> dark plum #4f404b
   (Figma node fill RGB(79,64,75) for "First name" label).
   ============================================================ */
.reforma-contact-form-wrap .ff-el-input--label label{
	font-family:'Fraunces','TRY Vesterbro',Georgia,serif !important;
	color:#4f404b !important; font-weight:700 !important; text-transform:none !important; font-size:16px !important; letter-spacing:0 !important;
}
.reforma-contact-form-wrap .ff-el-input--label.asterisk-right label:after,
.reforma-contact-form-wrap .ff-el-is-required.asterisk-right > label:after,
.reforma-contact-form-wrap .ff-el-is-required > label:after{ content:'' !important; display:none !important; }

/* B2 — Blog info bar: single row (Figma) breadcrumb left + reading-time right. v2.10.124 */
.reforma-article-infobar{ flex-wrap:nowrap !important; align-items:center !important; gap:20px !important; }
.reforma-article-infobar > :first-child{ min-width:0 !important; }
@media (max-width:600px){ .reforma-article-infobar{ flex-wrap:wrap !important; } }

/* ============================================================
   BLOG CARD system — "Latest from Our Blog" + news grid (Figma)
   Left heading (no eyebrow), badge-on-image, serif title, byline,
   pagination. Reusable .reforma-blogcard. v2.10.125
   ============================================================ */
.reforma-related-inner{ max-width:1280px; margin:0 auto; }
.reforma-related .reforma-related-heading{ text-align:left !important; font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important; font-weight:700 !important; font-size:clamp(32px,3.6vw,48px) !important; line-height:1.2 !important; color:#402800 !important; margin:0 0 32px !important; }
.reforma-blogcard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.reforma-blogcard{ display:flex; flex-direction:column; background:#fff; border:1px solid #f0e6d8; border-radius:18px; box-shadow:0 6px 22px rgba(64,40,0,0.07); padding:14px; }
.reforma-blogcard__media{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:380/220; background:#f3ece0; }
.reforma-blogcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.reforma-blogcard__badge{ position:absolute; top:14px; right:14px; background:#f25424; color:#fff; font-family:'Poppins',sans-serif; font-size:12px; font-weight:600; letter-spacing:0; padding:6px 14px; border-radius:8px; }
.reforma-blogcard__titlelink{ text-decoration:none; }
.reforma-blogcard__title{ font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif; font-weight:700; font-size:20px; line-height:1.3; color:#3e273b; margin:16px 4px 8px; }
.reforma-blogcard__titlelink:hover .reforma-blogcard__title{ color:#9c783a; }
.reforma-blogcard__excerpt{ font-family:'Poppins',sans-serif; font-size:14px; line-height:1.6; color:#6b5e54; margin:0 4px 14px; }
.reforma-blogcard__byline{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-size:12px; color:#9c783a; margin-top:auto; padding:0 4px 4px; }
.reforma-blogcard__avatar{ width:22px; height:22px; border-radius:50%; overflow:hidden; background:#fff0e6; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.reforma-blogcard__avatar img{ width:16px; height:16px; }
.reforma-blogcard__by{ font-weight:600; color:#3e273b; }
.reforma-blogcard__dot{ color:#c9b48f; }
.reforma-blogcard__date{ color:#6b5e54; }
.reforma-blog-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; }
.reforma-blog-pager__num,.reforma-blog-pager__edge{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; width:32px; height:32px; padding:0; border:1px solid #e7ddcf; border-radius:50%; background:#fff; color:#402800; text-decoration:none; font-family:'Poppins',sans-serif; font-size:14px; line-height:1; }
.reforma-blog-pager a:hover{ border-color:#9c783a; color:#9c783a; }
.reforma-blog-pager__num.is-active{ background:#2b2b2b; color:#fff; border-color:#2b2b2b; }
.reforma-blog-pager__dots{ padding:0 4px; color:#9c783a; }
@media(max-width:900px){ .reforma-blogcard-grid{ grid-template-columns:1fr; } }

/* ============================================================
   NEWS page — Figma fidelity (v2.10.126)
   N5 All-News button right; N3 Latest-from-blog filter tabs;
   grid uses .reforma-blogcard; pagination match.
   ============================================================ */
/* N5 — header row: title left, All News button right */
.reforma-news-journal-head{ flex-direction:row !important; align-items:flex-start !important; justify-content:space-between !important; gap:24px !important; flex-wrap:wrap !important; }
.reforma-news-allnews-btn{ align-self:center !important; }
/* N3 — "Latest from Our Blog" header row with filter tabs */
.reforma-news-grid-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:8px auto 28px; max-width:1280px; }
.reforma-news-grid-head .reforma-news-grid-heading{ margin:0 !important; }
.reforma-news-tabs{ display:inline-flex; align-items:center; gap:10px; background:#FFF0E5; border-radius:16px; padding:8px; }
.reforma-news-tab{ font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; color:#402800; background:transparent; border:0; border-radius:999px; padding:9px 22px; cursor:pointer; line-height:1; transition:background .15s,color .15s; }
.reforma-news-tab.is-active{ background:#29514c; color:#ffffff; }
.reforma-news-tab:not(.is-active):hover{ color:#9c783a; }
/* news grid pagination -> match blog pager look */
.reforma-news-pagination ul{ list-style:none; display:flex; align-items:center; justify-content:center; gap:8px; padding:0; margin:44px 0 0; }
.reforma-news-pagination li{ margin:0; }
.reforma-news-pagination a,.reforma-news-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 8px; border:1px solid #e7ddcf; border-radius:8px; background:#fff; color:#402800; text-decoration:none; font-family:'Poppins',sans-serif; font-size:14px; line-height:1; }
.reforma-news-pagination .current{ background:#2b2b2b; color:#fff; border-color:#2b2b2b; }
.reforma-news-pagination a:hover{ border-color:#9c783a; color:#9c783a; }

/* N5 fix — head must be flex to place All News right (was display:block). v2.10.127 */
.reforma-news-insights .reforma-news-journal-head{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; justify-content:space-between !important; gap:24px !important; flex-wrap:wrap !important; }
.reforma-news-insights .reforma-news-journal-headtext{ flex:1 1 auto; min-width:0; }
.reforma-news-insights .reforma-news-allnews-btn{ flex:0 0 auto; align-self:center !important; }

/* C4 — Contact intro + sidebar body = serif (Figma TRY Vesterbro). v2.10.130 */
.reforma-contact-card__sub,
.reforma-contact-info-card__body,
.reforma-contact-info-card__body .reforma-contact-info-card__link{ font-family:'Fraunces','TRY Vesterbro',Georgia,serif !important; }
/* D2 — Doctors "Book a Consultation" watermark tiles rotated diagonally (Figma). */
.reforma-doctors-cta > div[aria-hidden="true"]{ transform:rotate(-13deg) scale(1.5) !important; transform-origin:center !important; }

/* P3 — PDP tabs: Figma cream strip, dark-green active, plain inactive (was underline/pills). v2.10.131 */
.reforma-pdp-detail .reforma-pdp-tabs{ display:inline-flex !important; gap:4px !important; background:#f6f4ef !important; border:0 !important; border-radius:10px !important; padding:6px !important; flex-wrap:wrap; }
.reforma-pdp-detail .reforma-pdp-tab{ height:auto !important; background:transparent !important; border:0 !important; border-radius:7px !important; color:#402800 !important; font-family:'Poppins',sans-serif !important; font-weight:500 !important; font-size:15px !important; padding:10px 20px !important; cursor:pointer; transition:background .15s,color .15s; }
.reforma-pdp-detail .reforma-pdp-tab.is-active{ background:#29514c !important; color:#ffffff !important; border:0 !important; }
.reforma-pdp-detail .reforma-pdp-tab:not(.is-active):hover{ color:#9c783a !important; }

/* HOME hero — Figma: content top-aligned just below header (was vertically-centered → ~220px too low). v2.10.141 */
.reforma-home-hero{ padding-top:120px !important; }
.reforma-home-hero .reforma-hero-grid{ align-items:flex-start !important; }
.reforma-home-hero .reforma-hero-eyebrow{ margin-bottom:18px !important; }

/* HOME hero title — Figma exact: font 70px / line-height 77px (was 64/76.8). v2.10.142 */
@media (min-width:1024px){
	.reforma-home-hero .reforma-hero-title{ font-size:70px !important; line-height:77px !important; }
}

/* HOME hero arches — Figma exact placement (was 691w@y166; Figma ~570w, top near page-top, right side). v2.10.143 */
@media (min-width:1024px){
	.reforma-home-hero .reforma-hero-right{ overflow:visible !important; }
	.reforma-home-hero .reforma-hero-artwork{ position:absolute !important; top:-74px !important; right:50px !important; left:auto !important; bottom:auto !important; width:570px !important; max-width:none !important; height:auto !important; margin:0 !important; transform:none !important; }
}

/* ============================================================
   CARD HOVER HIGHLIGHT — physicians (Figma): floral glow + shadow +
   filled Book follow the hovered card; default = first card.
   v2.10.153
   ============================================================ */
.reforma-home-physicians .reforma-physician-card{ transition:box-shadow .25s ease; }
.reforma-home-physicians .reforma-physician-card__book{ transition:background .25s ease,color .25s ease; }
/* default highlight on first card */
.reforma-home-physicians .reforma-physician-grid .reforma-physician-card:first-child .reforma-physician-card__glow{ opacity:1; }
.reforma-home-physicians .reforma-physician-grid .reforma-physician-card:first-child{ box-shadow:0 4px 4px rgba(0,0,0,0.25); }
.reforma-home-physicians .reforma-physician-grid .reforma-physician-card:first-child .reforma-physician-card__book{ background:#9c783a; color:#fff; }
/* when hovering the grid, drop the default off the first card (unless it is the hovered one) */
.reforma-home-physicians .reforma-physician-grid:hover .reforma-physician-card:first-child:not(:hover) .reforma-physician-card__glow{ opacity:0; }
.reforma-home-physicians .reforma-physician-grid:hover .reforma-physician-card:first-child:not(:hover){ box-shadow:none; }
.reforma-home-physicians .reforma-physician-grid:hover .reforma-physician-card:first-child:not(:hover) .reforma-physician-card__book{ background:transparent; color:#9c783a; }
/* highlight the hovered card */
.reforma-home-physicians .reforma-physician-card:hover .reforma-physician-card__glow{ opacity:1; }
.reforma-home-physicians .reforma-physician-card:hover{ box-shadow:0 4px 4px rgba(0,0,0,0.25); }
.reforma-home-physicians .reforma-physician-card:hover .reforma-physician-card__book{ background:#9c783a; color:#fff; }

/* CARD HOVER fix — !important to beat inline opacity:0 / background:transparent. v2.10.154 */
.reforma-home-physicians .reforma-physician-grid .reforma-physician-card:first-child .reforma-physician-card__glow{ opacity:1 !important; }
.reforma-home-physicians .reforma-physician-grid .reforma-physician-card:first-child .reforma-physician-card__book{ background:#9c783a !important; color:#fff !important; }
.reforma-home-physicians .reforma-physician-grid:hover .reforma-physician-card:first-child:not(:hover) .reforma-physician-card__glow{ opacity:0 !important; }
.reforma-home-physicians .reforma-physician-grid:hover .reforma-physician-card:first-child:not(:hover) .reforma-physician-card__book{ background:transparent !important; color:#9c783a !important; }
.reforma-home-physicians .reforma-physician-card:hover .reforma-physician-card__glow{ opacity:1 !important; }
.reforma-home-physicians .reforma-physician-card:hover .reforma-physician-card__book{ background:#9c783a !important; color:#fff !important; }

/* CARD HOVER — Curated Treatments (Figma floral glow beside active card, default first). v2.10.155 */
.reforma-curated-treatments .reforma-ct-card{ transition:box-shadow .25s ease; }
.reforma-curated-treatments .reforma-ct-card > a{ transition:box-shadow .25s ease; }
.reforma-curated-treatments .reforma-ct-grid .reforma-ct-card:first-child .reforma-ct-card__glow{ opacity:1 !important; }
.reforma-curated-treatments .reforma-ct-grid .reforma-ct-card:first-child > a{ box-shadow:0 10px 24px rgba(0,0,0,0.18); }
.reforma-curated-treatments .reforma-ct-grid:hover .reforma-ct-card:first-child:not(:hover) .reforma-ct-card__glow{ opacity:0 !important; }
.reforma-curated-treatments .reforma-ct-grid:hover .reforma-ct-card:first-child:not(:hover) > a{ box-shadow:none; }
.reforma-curated-treatments .reforma-ct-card:hover .reforma-ct-card__glow{ opacity:1 !important; }
.reforma-curated-treatments .reforma-ct-card:hover > a{ box-shadow:0 10px 24px rgba(0,0,0,0.18); }

/* CARD HOVER — Treatments page cards. v2.10.253: removed the permanent
   "default-active first card" glow+shadow (was opacity:1 !important on the
   first card's __glow). Its floral image sits at left:-23px, so it bled the
   botanical illustration ~23px into the cards-grid left margin (x=29-51).
   Figma 172:2909 has pure WHITE there. Glow/shadow now show on hover only. */
.reforma-th-grid .reforma-th-cardwrap .reforma-th-card{ transition:box-shadow .25s ease; }
.reforma-th-cardwrap:hover .reforma-th-card__glow{ opacity:1 !important; }
.reforma-th-cardwrap:hover .reforma-th-card{ box-shadow:0 10px 24px rgba(0,0,0,0.18); }

/* ============================================================
   BLOG SINGLE — FIGMA MATCH PASS (v2.10.190)
   Fixes: hero byline teal band -> compact transparent byline;
   hero rounded corners (TL0/TR32/BR32/BL32) + inset 1300px;
   title size to Figma 64px. Scoped to .reforma-single only.
   Highest specificity + source-order-last to beat prior waves.
   ============================================================ */

/* --- Hero card: inset + rounded corners (Figma 43:504) ---
   NOTE: .reforma-single is ON the <main> element itself, so use
   main#reforma-main.reforma-single (same element) to get id+class
   specificity that outranks reforma-header-footer.css max-width:100%. */
html body main#reforma-main.reforma-single .reforma-article-hero.wp-block-cover.alignfull,
html body main#reforma-main.reforma-single > .reforma-article-hero {
	max-width: 1300px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 32px !important;
	border-bottom-right-radius: 32px !important;
	border-bottom-left-radius: 32px !important;
	min-height: 440px !important;
	overflow: hidden !important;
}

/* --- Kill the stray teal/blue gradient that landed on the byline
       group (it is the only .wp-block-group direct child of the
       inner-container in the current pattern). Byline must be a
       compact, transparent, centered row per Figma. --- */
html body .reforma-single .reforma-article-hero .wp-block-cover__inner-container > .reforma-article-byline,
html body .reforma-single .reforma-article-byline.wp-block-group {
	background-image: none !important;
	background-color: transparent !important;
	background: transparent !important;
	border: 0 !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 22px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
}

/* byline text — white, ~16px, clean (Figma) */
html body .reforma-single .reforma-article-byline .reforma-byline-name { color:#fff !important; font-size:16px !important; font-weight:600 !important; }
html body .reforma-single .reforma-article-byline .reforma-byline-date { color:rgba(255,255,255,.9) !important; font-size:16px !important; }
html body .reforma-single .reforma-article-byline .reforma-byline-avatar img,
html body .reforma-single .reforma-article-byline .wp-block-avatar img { width:34px !important; height:34px !important; border-radius:100px !important; }

/* --- Hero title: Figma serif 64px (short titles) / fluid for long.
       Use clamp so the live long title fits 2 lines without overflow
       while honoring Figma's ~64px design size on shorter titles. --- */
html body .reforma-single .reforma-article-hero .reforma-article-hero-title,
html body .reforma-single .reforma-article-hero .wp-block-post-title {
	font-size: clamp(40px, 4.4vw, 64px) !important;
	line-height: 1.18 !important;
	font-weight: 700 !important;
	max-width: 860px !important;
}

/* --- Body H2: Figma cap-height measured 19px -> ~28px (was 24px).
       Navy ink, serif, generous top margin. --- */
html body .reforma-single .reforma-article-body .wp-block-post-content h2,
html body .reforma-single .reforma-article-body .wp-block-post-content h2.wp-block-heading {
	font-size: 28px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	color: #3e273b !important;
	margin-top: 44px !important;
	margin-bottom: 16px !important;
}

/* Blog single hero — Figma: ~40px white gap between header and hero cover */
.reforma-single .reforma-article-hero{ margin-top:40px !important; }

/* Blog end-of-article CTA box heading must be white over the green box (override the global body-h2 ink rule) */
.reforma-article-body .reforma-article-endcta h2, .reforma-article-body .reforma-article-endcta h2.wp-block-heading{ color:#fff !important; }

/* Figma left-anchored content column (x52, right gap ~85px) — desktop only; mobile keeps small symmetric padding */
@media (min-width:1024px){
  .reforma-th-hero, .reforma-th-grid, .reforma-doctors-hero, .reforma-doctors-listing{ padding-left:52px !important; padding-right:85px !important; }
}

/* ============================================================= */
/* news /news/ — Figma news-journal: tighten gap below orange    */
/* banner. Figma gap (banner bottom -> News & Journal title) =42px*/
/* (Page banner rect bottom y=-10645, Group 160 Title top         */
/* y=-10603 => 42px). Live winning hero padding-bottom was        */
/* spacing--70 (54.08px) + news-insights margin-top spacing--50   */
/* (24px) = 78px. Reduce hero padding-bottom to 18px => 18+24=42. */
/* Desktop-only (>=641px) so the existing <=640px mobile padding  */
/* (spacing--60=36px) is left UNTOUCHED. Selector uses the #id     */
/* (specificity 1,0,0) because the hero <section> carries id       */
/* "reforma-news-listing-hero" but NOT a .wp-block-group class, so */
/* a class-only rule never matched / never beat the winning        */
/* spacing--70 rule. The #id beats it cleanly (verified live).     */
/* ============================================================= */
@media (min-width:641px){
	#reforma-news-listing-hero.reforma-news-listing-hero{
		padding-bottom:18px !important;
	}
}

/* ============================================================= */
/* v2.10.251 — Blog single (homepage-2) Figma-parity fixes        */
/* ============================================================= */
/* FIX 1 — In-body inline image: Figma node 42:1991 has a 2px gold */
/* stroke (gradient #9b773a->#815913, INSIDE) + cornerRadius 32px. */
/* Live <img.wp-image-59> carries an INLINE style="border-radius:  */
/* 18px" (block editor has-custom-border), which beats every       */
/* stylesheet rule — hence near-square corners + no border. We     */
/* override with !important on BOTH the figure and the img. Solid  */
/* gold (not border-image gradient): border-image renders SQUARE   */
/* corners and would clip the 32px radius — solid #9b773a keeps     */
/* the rounded corners intact while matching the stroke colour.    */
.reforma-article-body .reforma-article-figure img,
.reforma-single .reforma-article-body .wp-block-image.reforma-article-figure img{
	border:2px solid #9b773a !important;   /* Figma stroke colour (gradient simplified to solid) */
	border-radius:32px !important;         /* beats inline style="border-radius:18px" */
	box-sizing:border-box !important;      /* strokeAlign:INSIDE — border eats in, outer stays 862x550 */
}
.reforma-article-body .reforma-article-figure{
	border-radius:32px !important;         /* match img radius so any figure bg/clip aligns */
}

/* FIX 2 — "Latest from Our Blog" pager (Figma 43:630-638): SQUARE */
/* 32x32 buttons, active "1" filled GOLD #9b773a (white text). Live */
/* .reforma-blog-pager was CIRCULAR (border-radius:50%) + active    */
/* near-black #2b2b2b. Override the winning rules (12825/12827).    */
.reforma-blog-pager .reforma-blog-pager__num,
.reforma-blog-pager .reforma-blog-pager__edge{
	border-radius:4px !important;
}
.reforma-blog-pager .reforma-blog-pager__num.is-active{
	background:#9b773a !important;
	border-color:#9b773a !important;
	color:#fff !important;
}

/* v2.10.268 — Home Curated Offer band → exact Figma 06-group-115 (node verified).
   Overlay = linear gradient black .44→.59 (was solid #2e1f0d 70%). All copy = Fraunces
   serif (was Poppins). Title 64/700 (was 4xl/500), eyebrow 20/700 normal-case (was 13/600
   uppercase), sub 20/400 maxw784, button text 20/700. */
.reforma-curated-offer .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.59) 100%) !important;
  background-color:transparent !important;
  opacity:1 !important;
}
.reforma-curated-offer .reforma-offer-eyebrow{
  font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important;
  font-size:20px !important; font-weight:700 !important; letter-spacing:0 !important;
  text-transform:none !important; color:#fff !important; opacity:1 !important; margin:0 0 12px !important;
}
.reforma-curated-offer .reforma-offer-title{
  font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important;
  font-weight:700 !important; font-size:clamp(40px,4.45vw,64px) !important;
  line-height:1.2 !important; color:#fff !important; text-shadow:none !important; margin:0 0 16px !important;
}
.reforma-curated-offer .reforma-offer-sub{
  font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important;
  font-size:20px !important; font-weight:400 !important; line-height:1.25 !important;
  max-width:784px !important; margin:0 auto !important; color:#fff !important; text-shadow:none !important;
}
.reforma-curated-offer .reforma-offer-btn .wp-block-button__link{
  font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important;
  font-size:20px !important; font-weight:700 !important;
}

/* v2.10.298 — doctor-profile figma-parity 2026-06-07
 * Source-verified vs figma-source/.../doctors-2/sections/08-group-183 node.json + render@2x.
 * Stat card height 223 (Figma Card 291x223 cr24), fill rgba(154,116,53,.05)-over-white (#faf8f5),
 * label gray serif rgba(0,0,0,.55), language pill square corners + 16px. Scoped to .reforma-doctor-profile. */
.reforma-doctor-profile .rdp-stat{
  min-height:223px !important;
  padding:0 12px !important;
  background:#faf8f5 !important;
}
.reforma-doctor-profile .rdp-stat-label{
  font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important;
  color:rgba(0,0,0,.55) !important;
}
.reforma-doctor-profile .rdp-lang{
  border-radius:0 !important;
  font-size:16px !important;
}

/* ============================================================
   v2.10.299 — blog-single figma-parity 2026-06-07
   Page-scoped (.reforma-single). Matches/exceeds prior winning
   rules by source order + specificity. See node 43:504 / 08-header.
   ============================================================ */

/* H1: hero cover min-height 440 -> 364 (Figma 08-header frame h=364).
   Must outrank line 12956 (same selector, !important) -> identical
   selector later in source wins. */
html body main#reforma-main.reforma-single .reforma-article-hero.wp-block-cover.alignfull,
html body main#reforma-main.reforma-single > .reforma-article-hero {
	min-height: 364px !important;
}

/* H2: hero overlay gradient (live 0.30->0.18->0.52) -> flat solid
   rgb(10,10,10) @ 0.24 (Figma header SOLID overlay opacity .24). */
.reforma-single .reforma-article-hero > .wp-block-cover__background{
	background-image: linear-gradient(rgba(10,10,10,0.24), rgba(10,10,10,0.24)) !important;
	background-color: transparent !important;
	opacity: 1 !important;
}

/* H3: hero subtitle 20 -> 16 (Figma subtitle fs=16). */
.reforma-single .reforma-article-hero .reforma-article-subtitle{
	font-size: 16px !important;
	line-height: 1.5 !important;
}

/* H4: hero category badge — radius 999 -> ~10 (Figma cr 9.74),
   font 13/600 -> 16/400 (Figma fs=16 fw=400). bg/color already match. */
.reforma-single .reforma-article-hero .reforma-article-badge{
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	padding: 4px 16px !important;
}

/* R1: related-post card media — live ~380/220 (1.73:1, ~219px tall)
   -> Figma 393/134 (2.93:1, short-wide). Caps card height ~239. */
.reforma-single .reforma-blogcard__media{
	aspect-ratio: 393 / 134 !important;
}

/* R2: related card title 20 -> 16 (Figma fs=16). */
.reforma-single .reforma-blogcard__title{
	font-size: 16px !important;
}

/* R3: related byline name plum rgb(62,39,59) -> gold rgb(156,120,58)
   (Figma byline name fs=10 fw=600 gold). */
.reforma-single .reforma-blogcard__by{
	color: #9c783a !important;
}

/* R4: related excerpt 14 -> 12, color #6b5e54 -> rgb(43,43,43)
   (Figma excerpt fs=12 rgb(43,43,43)). */
.reforma-single .reforma-blogcard__excerpt{
	font-size: 12px !important;
	color: #2b2b2b !important;
}

/* R5: related badge 12 -> 14 (Figma category text fs=14). bg/radius match. */
.reforma-single .reforma-blogcard__badge{
	font-size: 14px !important;
}

/* Q1: quote block radius 8 -> 0 (Figma quote square corners).
   bg/padding/size already match. Outranks line 12452. */
html body .reforma-single .reforma-article-body blockquote,
html body .reforma-single .reforma-article-body .wp-block-quote{
	border-radius: 0 !important;
}

/* B1: breadcrumb font-size 16 -> 14 (Figma crumb fs=14).
   Outranks line 11008 (.reforma-breadcrumb-trail{font-size:16px!important}). */
.reforma-single .reforma-breadcrumb-pill .reforma-breadcrumb-trail{
	font-size: 14px !important;
}

/* v2.10.299b — hero padding tighten (56 -> 40) so the box height reads
   closer to Figma's 364px frame; the live editorial title wraps to 2
   lines, so trimming padding pulls height down without clipping. */
.reforma-single .reforma-article-hero.wp-block-cover{
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

/* ============================================================
   v2.10.302 — news / journal figma-parity 2026-06-07
   Page-scoped overrides (later-in-cascade wins). Touches ONLY
   news/journal selectors — no home/shared-footer regression.
   ============================================================ */

/* D1 — featured LARGE card title 17 -> 24px (Figma node 03 y=1157, 24px serif).
   PHP now also emits .reforma-jcard-title--large; this guarantees the win. */
.reforma-news-journal-large .reforma-jcard-title{ font-size:24px !important; line-height:1.2 !important; }

/* D2 — featured SMALL card titles 17 -> 20px (Figma node 03 y=1047 & y=1370, 20px serif). */
.reforma-news-journal-small .reforma-jcard-title{ font-size:20px !important; line-height:1.2 !important; }

/* D3 — "Latest from Our Blog" heading 40 -> 48px (Figma node 01 y=1547, 48px Playfair 700). */
.reforma-news-grid-heading.reforma-news-grid-heading{ font-size:48px !important; }

/* D4 — blog-card title 20 -> 16px / lh 1.33 (Figma node 01 y=1830, 16px Playfair 700 lh21.3). */
.reforma-news-grid .reforma-blogcard__title,
.reforma-news-listing-section .reforma-blogcard__title{ font-size:16px !important; line-height:1.33 !important; }

/* D7 — blog-card excerpt 14 -> 12px + darker (Figma node 01 y=1859, 12px rgba(43,43,43)). */
.reforma-news-grid .reforma-blogcard__excerpt,
.reforma-news-listing-section .reforma-blogcard__excerpt{ font-size:12px !important; color:#2b2b2b !important; }

/* D5 — pagination: rounded-square 8px gold-active -> Figma 999px circles, active filled charcoal #2b2b2b.
   (Figma node 01 y=2476: 32px cornerRadius=32 circles, active fill rgba(43,43,43), others white.)
   NOTE: paginate_links(type=list) puts class="page-numbers" on the <ul> ITSELF, so we must
   scope the circle sizing to li-children only — sizing the <ul> collapses it to 40px and the
   items wrap vertically. Reset the <ul.page-numbers> so it lays out as a centered row. */
.reforma-news-pagination ul.page-numbers{
	width:auto !important;
	min-width:0 !important;
	height:auto !important;
	border-radius:0 !important;
	box-shadow:none !important;
	background:transparent !important;
	list-style:none !important;
	display:flex !important;
	flex-wrap:wrap !important;
	align-items:center !important;
	justify-content:center !important;
	gap:8px !important;
	padding:0 !important;
}
.reforma-news-pagination li{ margin:0 !important; }
.reforma-news-pagination li > .page-numbers{
	width:40px !important;
	min-width:40px !important;
	height:40px !important;
	padding:0 !important;
	border-radius:999px !important;
	box-shadow:none !important;
}
.reforma-news-pagination li > a.page-numbers:hover{
	background:#2b2b2b !important;
	color:#fff !important;
}
.reforma-news-pagination li > .page-numbers.current{
	background:#2b2b2b !important;
	border-color:#2b2b2b !important;
	color:#fff !important;
}

/* v2.10.307 — about team card photo radius: img renders square (wrapper overflow:hidden not clipping); round the img directly. 2026-06-07 */
#reforma-about-brands article > div:first-child img{border-radius:12px !important}

/* v2.10.310 — block-compare remediation (news/blog/doctor) 2026-06-07 */
.reforma-news-allnews-btn{font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important;font-size:20px !important;font-weight:700 !important;padding:16px 34px !important}
.reforma-news-journal-head{align-items:center !important}
.reforma-news-tab,.reforma-news-tab.is-active{border-radius:0 !important}
.rdp-book{font-size:20px !important}
.reforma-article-body .wp-block-post-content p,.reforma-article-body > p{color:rgba(0,0,0,0.55) !important}
.reforma-readtime{color:#402800 !important}

/* v2.10.311 — readtime pill color (element is .reforma-readtime-pill) 2026-06-07 */
.reforma-readtime-pill{color:#402800 !important}

/* v2.10.313 — Doctors CTA watermark: ring must be UPRIGHT + unscaled (Figma Group 172 rotation 0deg, bg-size ~115%). Neutralise the earlier rotate(-13deg) scale(1.5) (L12863). later-in-source = equal specificity wins; .reforma-doctors-cta variant adds +1 class for safety. 2026-06-07 */
.reforma-doctors-cta > div[aria-hidden="true"]{ transform:none !important; transform-origin:center !important; }
.reforma-doctors-cta.reforma-doctors-cta > div[aria-hidden="true"]{ transform:none !important; }

/* ============================================================
   v2.10.330 — Legal / policy prose + FAQ/legal banners (E-pages 2026-06-08)
   Scope: .reforma-legal (Privacy Policy, Terms) prose styling on the
   page-legal template, served via templates/page-legal.html. The legal-hero
   and faq-hero banner classes are styled inline in their own patterns.
   Page-scoped — no home/global-header impact.
   ============================================================ */
.reforma-legal {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	line-height: 1.75;
}
/* Small serif kicker = the page title demoted to level 2 (banner carries H1). */
.reforma-legal .reforma-legal__kicker {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink-plum);
	margin: 0;
	letter-spacing: 0.01em;
}
.reforma-legal .reforma-legal__updated {
	display: block;
	color: var(--wp--preset--color--ink-soft);
}
.reforma-legal .reforma-legal__updated::before {
	content: "Last updated: ";
}
.reforma-legal h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	color: var(--wp--preset--color--ink-plum);
	letter-spacing: 0;
	line-height: 1.25;
	margin: 2.75rem 0 0.75rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
}
/* First section after the date: no double rule / extra gap. */
.reforma-legal > .wp-block-post-content > h2:first-child {
	margin-top: 1.5rem;
}
.reforma-legal h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink);
	margin: 1.75rem 0 0.5rem;
}
.reforma-legal p,
.reforma-legal li {
	max-width: 72ch;
}
.reforma-legal p {
	margin: 0 0 1rem;
}
.reforma-legal ul,
.reforma-legal ol {
	padding-left: 1.4em;
	margin: 0.75rem 0 1.25rem;
}
.reforma-legal li {
	margin: 0.4rem 0;
	line-height: 1.7;
}
.reforma-legal strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.reforma-legal a {
	color: var(--wp--preset--color--brand-gold-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.reforma-legal a:hover {
	text-decoration: none;
}
@media (max-width: 640px) {
	.reforma-legal { font-size: 1rem; }
	.reforma-legal h2 { margin-top: 2rem; padding-top: 1.5rem; }
}

/* ===== v2.10.407 — Treatment CPT single page additions ===== */
.reforma-pdp-gallery--single .reforma-pdp-main-wrap { aspect-ratio:4/3; overflow:hidden; border-radius:16px; }
.reforma-pdp-gallery--single .reforma-pdp-main-image { width:100%; height:100%; object-fit:cover; display:block; }
.reforma-pdp-infocard__duration { font-size:15px; color:var(--wp--preset--color--ink); }
.reforma-pdp-duration-label { font-weight:400; margin-right:6px; }
.reforma-pdp-steps { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.reforma-pdp-step { background:var(--wp--preset--color--page-tint,#fbf6ef); border-radius:0 0 0 16px; padding:12px 16px; font-size:14px; color:var(--wp--preset--color--ink); counter-increment:pdp-step; display:flex; align-items:center; gap:12px; }
.reforma-pdp-step::before { content:counter(pdp-step); flex-shrink:0; width:28px; height:28px; background:linear-gradient(135deg,#9c783a,#825814); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--wp--preset--font-family--display,serif); font-weight:700; font-size:13px; }
.reforma-pdp-steps { counter-reset:pdp-step; }
.reforma-pdp-ingredients { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.reforma-pdp-ingredients li { background:var(--wp--preset--color--page-tint,#fbf6ef); border:1px solid rgba(156,120,58,.2); border-radius:20px; padding:5px 14px; font-size:13px; color:var(--wp--preset--color--ink); }
.reforma-pdp-rich p { font-size:15px; line-height:1.75; color:var(--wp--preset--color--ink); margin:0 0 12px; }
.reforma-pdp-rich h3 { font-family:var(--wp--preset--font-family--display,serif); font-size:17px; font-weight:700; color:var(--wp--preset--color--heading,#402800); margin:20px 0 8px; }
[dir="rtl"] .reforma-pdp-step::before { margin-right:0; margin-left:0; }
[dir="rtl"] .reforma-pdp-duration-label { margin-right:0; margin-left:6px; }