/* ==========================================================================
   EVOPURE HOMEPAGE LAYER  —  loaded on the front page only (evopure-home.php)
   All values come from the tokens at the top of chrome.css. Content is edited in Elementor; this file adds the layering:
   the curved-corner reveal, text-position control, load motion, press band, goal-card hover.
   Hooks:  .evo-pressbar = the navy "As seen in" band (first section)   .evo-hero = the hero   .evo-rise = the section right after it
   ========================================================================== */

/* ---------------------------------------------------------------- AS SEEN IN — navy band pinned directly under the header
   In view from load. It belongs to the BACK layer with the hero: it holds through the whole hero scroll and is only covered when the
   goal section has risen over the hero. It is not part of the rising page. */
body { --evo-pressbar-size: 52px; --evo-ab: 0px; }
body.admin-bar { --evo-ab: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 767px) { body { --evo-pressbar-size: 46px; } }
@media (max-width: 600px) { body.admin-bar { --evo-ab: 0px; } }
.evo-pressbar {
	position: relative; z-index: 1; min-height: var(--evo-pressbar-size); height: var(--evo-pressbar-size); padding: 0 var(--evo-gutter) !important;
	display: flex; align-items: center; justify-content: center; background: var(--evo-navy);
}
.evo-pressbar .elementor-widget { margin: 0 !important; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
	.evo-pressbar { position: sticky; top: calc(var(--evo-header-h) + var(--evo-ab)); transition: top .25s ease; }      /* follows the header as it condenses */
}
.elementor-editor-active .evo-pressbar { position: relative !important; top: auto !important; }
.evo-press { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 14px 44px; width: 100%; }
.evo-press__label { margin: 0; flex: none; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--evo-page); opacity: .6; white-space: nowrap; }
.evo-press__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 12px clamp(24px, 3.4vw, 56px); }
.evo-press__item { line-height: 0; flex: none; }
.evo-press .evo-press__logo { display: block; height: 18px !important; width: auto !important; max-width: none; border-radius: 0; filter: brightness(0) invert(1); opacity: .8; }      /* any artwork → one colour */
.evo-press .evo-press__logo--gq { height: 22px !important; } .evo-press .evo-press__logo--bbc { height: 17px !important; } .evo-press .evo-press__logo--health-wellbeing { height: 19px !important; } .evo-press .evo-press__logo--the-times { height: 15px !important; } .evo-press .evo-press__logo--womens-health { height: 15px !important; }
.evo-press__item--missing { font: 500 11px/1 var(--e-global-typography-body-font-family), sans-serif; color: var(--evo-page); opacity: .6; }
@media (max-width: 767px) {
	.evo-press__label { display: none; }
	.evo-press__list { width: 100%; justify-content: space-between; gap: 0 10px; }
	.evo-press .evo-press__logo { height: 12px !important; } .evo-press .evo-press__logo--gq { height: 16px !important; } .evo-press .evo-press__logo--bbc { height: 12px !important; } .evo-press .evo-press__logo--health-wellbeing { height: 14px !important; } .evo-press .evo-press__logo--the-times { height: 10px !important; } .evo-press .evo-press__logo--womens-health { height: 10px !important; }
}

/* ---------------------------------------------------------------- HERO
   First screen = announcement + nav + AS SEEN IN band + the hero and NOTHING else: the hero ends exactly at the bottom of the screen and the
   white goal section only appears on scroll. Tune in Elementor: hero → Layout → Evopure hero → Height (default 100; lower = let it creep in).
   The admin bar is subtracted too, so a logged-in editor sees the same first screen as a visitor.
   The photo runs on under the next section by one sweep-radius, so the photo is always what shows through that section's soft corner. */
.evo-hero {
	--evo-pressbar-h: 0px;
	--evo-hero-rest: calc(var(--evo-hero-vh, 100) * 1svh + 1px - var(--evo-announce-h) - var(--evo-bar-h) - var(--evo-pressbar-h) - var(--evo-ab));      /* visible height at rest */
	--min-height: calc(var(--evo-hero-rest) + var(--evo-radius-sweep)) !important;
	--padding-bottom: calc(var(--evo-radius-sweep) + 48px) !important;
	--padding-block-end: calc(var(--evo-radius-sweep) + 48px) !important;
	position: relative; z-index: 0; overflow: hidden;
}
.evo-pressbar ~ .evo-hero { --evo-pressbar-h: var(--evo-pressbar-size); }
.evo-hero .elementor-widget { margin: 0 !important; }

/* Text position control (Layout → Evopure hero → Text position) — classes are written by Elementor */
.evo-hero .evo-hero__content { margin-inline: 0 auto; align-items: flex-start; text-align: left; }
.evo-hero.evo-hero-align-center .evo-hero__content { margin-inline: auto; align-items: center; text-align: center; }
.evo-hero.evo-hero-align-right .evo-hero__content { margin-inline: auto 0; align-items: flex-end; text-align: right; }
@media (max-width: 1024px) {
	.evo-hero.evo-hero-align-tablet-left .evo-hero__content { margin-inline: 0 auto; align-items: flex-start; text-align: left; }
	.evo-hero.evo-hero-align-tablet-center .evo-hero__content { margin-inline: auto; align-items: center; text-align: center; }
	.evo-hero.evo-hero-align-tablet-right .evo-hero__content { margin-inline: auto 0; align-items: flex-end; text-align: right; }
}
@media (max-width: 767px) {
	.evo-hero.evo-hero-align-mobile-left .evo-hero__content { margin-inline: 0 auto; align-items: flex-start; text-align: left; }
	.evo-hero.evo-hero-align-mobile-center .evo-hero__content { margin-inline: auto; align-items: center; text-align: center; }
	.evo-hero.evo-hero-align-mobile-right .evo-hero__content { margin-inline: auto 0; align-items: flex-end; text-align: right; }
}
.evo-hero .evo-hero__content .elementor-widget { width: 100%; text-align: inherit; }
.evo-hero .evo-hero__content .elementor-heading-title, .evo-hero .evo-hero__content p { text-align: inherit; }
.evo-hero .evo-hero__buttons { justify-content: inherit; width: 100%; }
.evo-hero-align-center .evo-hero__buttons, .evo-hero-align-center .evo-hero__links .elementor-icon-list-items { justify-content: center; }
.evo-hero-align-right .evo-hero__buttons, .evo-hero-align-right .evo-hero__links .elementor-icon-list-items { justify-content: flex-end; }
.evo-hero .evo-hero__buttons .elementor-widget { width: auto; }

/* type — a calmer headline with room to breathe. New Spirit comes from the Global Font on the widget; <em> = light italic cut */
.evo-hero .evo-hero__heading .elementor-heading-title { margin: 0; font-size: clamp(36px, 3.5vw, 54px) !important; line-height: 1.12 !important; letter-spacing: -.005em; text-wrap: balance; }
.evo-hero .evo-hero__heading em { font-style: italic; font-weight: 300; }
.evo-hero .evo-hero__sub, .evo-hero .evo-hero__sub p { margin: 0; max-width: 30em; line-height: 1.55; text-wrap: pretty; }
.evo-hero-align-center .evo-hero__sub p { margin-inline: auto; }
.evo-hero-align-right .evo-hero__sub p { margin-inline: auto 0; }
.evo-hero .evo-hero__trust, .evo-hero .evo-hero__trust p {
	margin: 0; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7;
}
.evo-hero .evo-hero__trust .evo-stars-txt { letter-spacing: .2em; margin-right: 6px; font-size: 13px; }
.evo-hero .evo-hero__trust .evo-sep { opacity: .45; margin: 0 8px; }
.evo-hero .evo-hero__links .elementor-icon-list-items { gap: 6px 22px; }
.evo-hero .evo-hero__links a, .evo-hero .evo-hero__links a:hover { color: var(--evo-navy) !important; }      /* never the theme's default link colour */
.evo-hero .evo-hero__links .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.evo-hero .evo-hero__links .elementor-icon-list-item::after { display: none !important; }
.evo-hero .evo-hero__links .elementor-icon-list-text {
	padding: 0 0 3px !important; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--evo-t-hover) var(--evo-ease);
}
.evo-hero .evo-hero__links a:hover .elementor-icon-list-text { background-size: 0 1px; background-position: 100% 100%; }

/* ---------------------------------------------------------------- THE REVEAL
   .evo-rise: straight top edge ending in ONE soft top-right corner (--evo-radius-sweep) — the card corner, scaled to a section. No wave here.
   It overlaps the hero's foot by one sweep-radius and rises as one clean white page over band and photo. */
.evo-rise {
	position: relative; z-index: 2; margin-top: calc(-1 * var(--evo-radius-sweep)) !important;
	border-radius: 0 var(--evo-radius-sweep) 0 0 !important; background-color: var(--evo-white);
}
.evo-hero ~ .e-con { position: relative; z-index: 2; }
.evo-hero ~ .e-con:not(.evo-wave-band) { background-color: var(--evo-white); }
/* Motion allowed (desktop AND mobile): the hero pins under the condensed header and the page slides up over it.
   The pin is position: sticky — it runs on the compositor, no scroll listener moves anything, so it cannot stutter on phones. */
@media (prefers-reduced-motion: no-preference) {
	.evo-hero { position: sticky; top: calc(var(--evo-header-h) + var(--evo-pressbar-h) + var(--evo-ab)); transition: top .25s ease; }      /* pinned from the first pixel; follows the header as it condenses */
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.evo-hero .evo-hero__content { opacity: calc(1 - max(0, var(--evo-hero-p, 0) - .3) * 2.2); }      /* desktop only: text holds its position and softens once the page is well over it */
}
.elementor-editor-active .evo-hero { position: relative !important; top: auto !important; }
.elementor-editor-active .evo-hero .evo-hero__content { opacity: 1 !important; }

/* ---------------------------------------------------------------- MOTION — image fades in; text fades up with a 60ms stagger; goal cards fade up in view */
@media (prefers-reduced-motion: no-preference) {
	body:not(.elementor-editor-active) .evo-hero { animation: evo-fade-in var(--evo-t-section) var(--evo-ease) both; }
	body:not(.elementor-editor-active) .evo-hero .evo-hero__content > * { animation: evo-fade-up 600ms var(--evo-ease) both; animation-delay: calc(180ms + var(--evo-i, 0) * var(--evo-stagger)); }
	.evo-hero .evo-hero__content > *:nth-child(1) { --evo-i: 0; } .evo-hero .evo-hero__content > *:nth-child(2) { --evo-i: 1; }
	.evo-hero .evo-hero__content > *:nth-child(3) { --evo-i: 2; } .evo-hero .evo-hero__content > *:nth-child(4) { --evo-i: 3; }
	.evo-hero .evo-hero__content > *:nth-child(5) { --evo-i: 4; } .evo-hero .evo-hero__content > *:nth-child(6) { --evo-i: 5; }
	/* SCROLL REVEAL (site motion, one move per section): home.js marks the groups listed in its REVEAL map.
	   .evo-reveal = its CHILDREN fade up 16px with a 60ms stagger · .evo-reveal-self = the element itself fades up. Fires once, in view.
	   Hidden ONLY while html.evo-anim is set (JS running, motion allowed) — no JS or reduced motion = content simply present. */
	html.evo-anim body:not(.elementor-editor-active) .evo-reveal:not(.is-done) > *,
	html.evo-anim body:not(.elementor-editor-active) .evo-reveal-self:not(.is-done) { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--evo-ease), transform 600ms var(--evo-ease); transition-delay: calc(var(--evo-i, 0) * var(--evo-stagger)); }
	html.evo-anim body:not(.elementor-editor-active) .evo-reveal.is-in:not(.is-done) > *,
	html.evo-anim body:not(.elementor-editor-active) .evo-reveal-self.is-in:not(.is-done) { opacity: 1; transform: none; }
}
@keyframes evo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes evo-fade-up { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* GOAL SELECTOR + QUIZ BAND: moved to chrome.css ("HOMEPAGE COMPONENTS, shared") on 2026-09-23 */

/* mobile: a swipe carousel that peeks the next card (reads calmer and shorter than a 3-row grid) */
@media (max-width: 767px) {
	.evo-hero .evo-hero__trust .evo-sep { display: block; height: 0; overflow: hidden; margin: 0; }
	.evo-hero .evo-hero__buttons { flex-direction: column; align-items: stretch; }
	.evo-hero .evo-hero__buttons .elementor-widget, .evo-hero .evo-hero__buttons .elementor-button-wrapper, .evo-hero .evo-hero__buttons .elementor-button { width: 100%; }
}

/* ---------------------------------------------------------------- HERO — OPTIONAL SLIDESHOW
   Single image by default. Add one or more containers with the CSS class  evo-hero__slide  inside the HERO (saved template
   "Evopure — Hero: slide") and home.js turns the hero into a slideshow: the hero's own image + text is slide 1, each added
   container is a further slide (own Background image, heading, sub, button). Crossfade 400ms, auto-advance, dots bottom-left.
   The pin / reveal is untouched — slides live inside the pinned hero. */
.evo-hero > .evo-hero__slide, .evo-hero > .e-con-inner > .evo-hero__slide {
	position: absolute !important; inset: 0; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 1;
	display: flex; flex-direction: column; justify-content: center;
	padding: 64px max(var(--evo-gutter), calc((100% - var(--evo-chrome-max)) / 2)) calc(var(--evo-radius-sweep) + 48px) !important;
	background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity var(--evo-t-section) var(--evo-ease), visibility 0s linear var(--evo-t-section);
}
.evo-hero > .evo-hero__slide.is-active, .evo-hero > .e-con-inner > .evo-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--evo-t-section) var(--evo-ease), visibility 0s; }
.evo-hero.has-slides > .e-con-inner > .evo-hero__content, .evo-hero.has-slides > .evo-hero__content { transition: opacity var(--evo-t-section) var(--evo-ease); }
.evo-hero.has-slides:not(.is-base) > .e-con-inner > .evo-hero__content, .evo-hero.has-slides:not(.is-base) > .evo-hero__content { opacity: 0 !important; pointer-events: none; }
.evo-hero__dots { position: absolute; z-index: 2; left: max(var(--evo-gutter), calc((100% - var(--evo-chrome-max)) / 2)); bottom: calc(var(--evo-radius-sweep) + 18px); display: flex; gap: 10px; }
.evo-hero__dot { width: 28px; height: 14px; padding: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; position: relative; }
.evo-hero__dot::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--evo-navy); opacity: .28; transition: opacity var(--evo-t-hover) var(--evo-ease); }
.evo-hero__dot[aria-current="true"]::after, .evo-hero__dot:hover::after { opacity: 1; }
.evo-hero__dot:focus-visible { outline: 1.5px solid var(--evo-navy); outline-offset: 2px; }
@media (max-width: 767px) { .evo-hero > .evo-hero__slide, .evo-hero > .e-con-inner > .evo-hero__slide { justify-content: flex-start; padding-top: 48px !important; } .evo-hero__dots { left: 50%; transform: translateX(-50%); } }
/* in the editor every slide is laid out in the open, one under the other, so it can be edited */
.elementor-editor-active .evo-hero > .evo-hero__slide, .elementor-editor-active .evo-hero > .e-con-inner > .evo-hero__slide { position: relative !important; inset: auto; opacity: 1; visibility: visible; min-height: 420px; }

/* USP BAND: moved to chrome.css ("HOMEPAGE COMPONENTS, shared") on 2026-09-23 */

/* ---------------------------------------------------------------- BESTSELLERS (the carousel itself is styled in chrome.css) */
.evo-bestsellers .elementor-widget { margin: 0 !important; }
.evo-bestsellers__head { align-items: center; text-align: center; }
.evo-bestsellers__title .elementor-heading-title { margin: 0; text-align: center; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.12 !important; }
.evo-bestsellers__sub, .evo-bestsellers__sub p { margin: 0 auto; text-align: center; max-width: 34em; }
.evo-bestsellers .evo-best__nav { top: -62px; }

/* ---------------------------------------------------------------- POWERED BY QUALITY & SCIENCE — scroll-pinned (CSS class evo-science)
   Desktop: the LEFT column (.evo-science__pin: heading, write-up, stat, lab-report request link) pins in the vertical middle of the screen while the four science cards (.evo-sci__card) scroll past on the right. Each card fades up as it arrives; the card nearest
   the focus line sits at full strength with a small lift, the others rest back (home.js). No colour change, no shadows. Pin = position: sticky.
   Card build: Cool Wash surface · a prominent icon disc on the left · New Spirit heading, tight body and ONE tag chip on the right.
   ≤1024px: a clean stack — heading + write-up, then the four cards. No pinning. */
.evo-science .elementor-widget { margin: 0 !important; }
.evo-science__pin { align-items: center; justify-content: center; text-align: center; }      /* full-width section → centred, on both axes */
.evo-science__pin .elementor-widget { width: 100%; text-align: center; }
.evo-science__head .elementor-heading-title { margin: 0; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.12 !important; text-wrap: balance; }
.evo-science__text, .evo-science__text p { margin: 0 auto; max-width: 30em; text-wrap: pretty; }
.evo-science__statnum .elementor-heading-title { margin: 0; font-size: clamp(44px, 4.4vw, 64px) !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }      /* counts up once in view (home.js); the typed value is what shows without JS */
.evo-science__statlabel .elementor-heading-title { margin: 0; padding-left: .16em; font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.4 !important; }      /* padding = the trailing letter-space, so caps sit optically centred */
.evo-science__cards { width: 100%; }
.evo-sci__card { background-color: var(--evo-wash); border: 0; border-radius: 0 var(--evo-radius-card) 0 0; box-shadow: none !important; align-items: flex-start; }      /* Cool Wash, like the product cards (override per card: Style → Background) */
.evo-sci__icon { flex: none; width: auto !important; line-height: 0; }
.evo-sci__icon img { display: block; width: 96px !important; height: 96px !important; max-width: none; padding: 24px; box-sizing: border-box; object-fit: contain; border-radius: 50% !important; background: var(--evo-white); }      /* the icon slot: swap the image, any size */
.evo-sci__body { flex: 1 1 0; min-width: 0; align-items: flex-start; }
.evo-sci__title .elementor-heading-title { margin: 0; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif !important; font-style: normal !important; font-weight: 600 !important; font-size: clamp(19px, 1.55vw, 22px) !important; letter-spacing: .005em !important; text-transform: none !important; line-height: 1.2 !important; }      /* functional sans: New Spirit is kept for the big section headings */
.evo-sci__text, .evo-sci__text p { margin: 0; max-width: 32em; line-height: 1.5; text-wrap: pretty; }
.evo-sci__tag { width: auto !important; }
.evo-sci__tag .elementor-heading-title { display: inline-block; margin: 4px 0 0; padding: 8px 12px 7px; background: var(--evo-white); font-size: 10.5px !important; letter-spacing: .14em !important; line-height: 1 !important; }      /* one clean tag chip */
@media (min-width: 1025px) {
	.evo-science > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 104px); align-items: start !important; }
	.evo-science > .e-con-inner > .e-con { width: auto !important; max-width: none; }
	.evo-science__pin {      /* pinned so its content sits in the vertical middle of the screen (under the header). --evo-pin-h = its own height, kept live by home.js */
		align-self: start !important; height: auto !important; position: sticky;
		top: max(calc(var(--evo-header-h) + var(--evo-ab, 0px) + 32px), calc((100svh + var(--evo-header-h) + var(--evo-ab, 0px) - var(--evo-pin-h, 380px)) / 2)); transition: top .25s ease;
	}
	.elementor-editor-active .evo-science__pin { position: relative; top: auto; }
}
/* phones: TIGHT — the card stays a row (small icon left, text right), smaller type, less padding, so four cards are a short scroll */
@media (max-width: 767px) {
	.evo-science { --padding-top: 52px !important; --padding-bottom: 56px !important; --padding-block-start: 52px !important; --padding-block-end: 56px !important; }
	.evo-science__pin { gap: 14px !important; }
	.evo-science__statnum .elementor-heading-title { font-size: 40px !important; }
	.evo-science__cards { gap: 10px !important; }
	.evo-sci__card { flex-direction: row !important; gap: 14px !important; --padding-top: 18px !important; --padding-bottom: 18px !important; --padding-left: 16px !important; --padding-right: 16px !important; --padding-block-start: 18px !important; --padding-block-end: 18px !important; --padding-inline-start: 16px !important; --padding-inline-end: 16px !important; }
	.evo-sci__icon img { width: 48px !important; height: 48px !important; padding: 12px; }
	.evo-sci__body { gap: 6px !important; }
	.evo-sci__title .elementor-heading-title { font-size: 17.5px !important; }
	.evo-sci__text, .evo-sci__text p { font-size: 14.5px !important; line-height: 1.45 !important; }
	.evo-sci__tag .elementor-heading-title { margin-top: 2px; padding: 6px 9px 5px; font-size: 9.5px !important; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	html.evo-anim .evo-science.is-live .evo-sci__card { opacity: .5; transition: opacity var(--evo-t-section) var(--evo-ease), transform 600ms var(--evo-ease); }
	html.evo-anim .evo-science.is-live .evo-sci__card.is-focus { opacity: 1; transform: translate3d(0, -6px, 0); }
	html.evo-anim .evo-science.is-live .evo-sci__card:not(.is-in), html.evo-anim .evo-science.is-live .evo-sci__card.is-focus:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	html.evo-anim .evo-science.is-live .evo-sci__card { transition: opacity 600ms var(--evo-ease), transform 600ms var(--evo-ease); }
	html.evo-anim .evo-science.is-live .evo-sci__card:not(.is-in) { opacity: 0; transform: translate3d(0, 20px, 0); }
}
.elementor-editor-active .evo-sci__card { opacity: 1 !important; transform: none !important; }

/* MODAL: moved to chrome.css (site-wide) on 2026-09-22. */

/* ---------------------------------------------------------------- WHAT'S INSIDE — ingredient carousel (CSS class evo-inside; add evo-inside--navy when the section is navy)
   Each ingredient = ONE Image Box widget (class evo-ing): Content → Image · Title = the name · Link. (The Description field is not shown.)
   Same card language as the goal cards (signature corner, New Spirit name top-left, arrow-in-circle bottom-right), in a rail that shows ~4 cards
   + a slice of the next. Hover: the card stays put — the image zooms in slightly inside it and the arrow-circle fills. Click / tap → the ingredient page. */
.evo-inside { --evo-best-gap: 20px; --evo-best-per: 4.4; --evo-best-bleed: max(var(--evo-gutter), calc((100vw - var(--evo-chrome-max)) / 2)); overflow-x: clip; }
.evo-inside .elementor-widget { margin: 0 !important; }
.evo-inside__head { align-items: center; text-align: center; }
.evo-inside__title .elementor-heading-title { margin: 0; text-align: center; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.12 !important; }
.evo-inside__sub, .evo-inside__sub p { margin: 0 auto; text-align: center; max-width: 34em; }
.evo-inside__wrap { position: relative; width: 100%; }
.evo-inside__wrap .evo-best__nav { top: -62px; }
.evo-inside--navy .evo-best .evo-best__btn { border-color: var(--evo-page) !important; color: var(--evo-page) !important; }
.evo-inside--navy .evo-best .evo-best__btn:hover:not(:disabled), .evo-inside--navy .evo-best .evo-best__btn:focus-visible { background: var(--evo-page) !important; color: var(--evo-navy) !important; }
.evo-inside__rail {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: var(--evo-best-gap) !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	width: calc(100% + 2 * var(--evo-best-bleed)) !important; max-width: none !important; margin: -16px calc(-1 * var(--evo-best-bleed)) 0 !important; padding: 16px var(--evo-best-bleed) 18px !important; scroll-padding-inline: var(--evo-best-bleed);
}
.evo-inside__rail::-webkit-scrollbar { display: none; }
.evo-inside__rail > .evo-ing { flex: 0 0 calc((100% - 4 * var(--evo-best-gap)) / var(--evo-best-per)) !important; width: auto !important; max-width: none; min-width: 0; scroll-snap-align: start; }
.evo-ing { position: relative; overflow: hidden; border-radius: 0 var(--evo-radius-sig) 0 0; background: var(--evo-wash); -webkit-tap-highlight-color: transparent; }
.evo-ing .elementor-image-box-wrapper { display: block; text-align: left; }
.evo-ing .elementor-image-box-img { display: block; width: 100% !important; margin: 0 !important; aspect-ratio: 4 / 5; overflow: hidden; }
.evo-ing .elementor-image-box-img a { display: block; width: 100%; height: 100%; }
.evo-ing .elementor-image-box-img img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 0 !important; }
.evo-ing .elementor-image-box-content { position: absolute; inset: 0; width: 100%; padding: 0; pointer-events: none; }
.evo-ing .elementor-image-box-title {
	position: absolute; left: 20px; top: 18px; right: 20px; margin: 0 !important; text-align: left; pointer-events: auto;
	font-family: var(--e-global-typography-h3-font-family), serif !important; font-weight: 700 !important; font-style: italic !important;
	font-size: clamp(21px, 1.8vw, 26px) !important; letter-spacing: -.005em !important; text-transform: none !important; line-height: 1.1 !important; color: var(--evo-navy);
}
.evo-ing .elementor-image-box-title a { color: inherit !important; text-decoration: none !important; }
.evo-ing .elementor-image-box-title a::after { content: ""; position: absolute; inset: -600px -40px; z-index: 3; }      /* the whole card is one link */
.evo-ing .elementor-image-box-description { display: none !important; }      /* no teaser: the card is image + name; the write-up lives on the ingredient page */
.evo-ing .elementor-image-box-content::before { content: ""; position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--evo-navy); transition: background-color var(--evo-t-hover) var(--evo-ease); }
.evo-ing .elementor-image-box-content::after { content: ""; position: absolute; z-index: 2; right: 20px; bottom: 20px; width: 18px; height: 18px; background: var(--evo-navy); -webkit-mask: var(--evo-ico-arrow) center / 18px 18px no-repeat; mask: var(--evo-ico-arrow) center / 18px 18px no-repeat; transition: background-color var(--evo-t-hover) var(--evo-ease); }
/* hover: the card does NOT move — the image eases in a touch inside it, and the arrow-circle fills */
.evo-ing .elementor-image-box-img img { transition: transform 600ms var(--evo-ease); transform-origin: 50% 60%; }
@media (hover: hover) {
	.evo-ing:hover .elementor-image-box-img img { transform: scale(1.06); }
	.evo-ing:hover .elementor-image-box-content::before { background: var(--evo-navy); } .evo-ing:hover .elementor-image-box-content::after { background: var(--evo-white); }
}
.evo-ing:focus-within .elementor-image-box-img img { transform: scale(1.06); }
.evo-ing:has(a:focus-visible) { outline: 1.5px solid var(--evo-page); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .evo-ing .elementor-image-box-img img { transition: none; } }
@media (max-width: 1024px) { .evo-inside { --evo-best-per: 2.4; --evo-best-bleed: 24px; } .evo-inside__rail > .evo-ing { flex-basis: calc((100% - 2 * var(--evo-best-gap)) / var(--evo-best-per)) !important; } }
@media (max-width: 767px) { .evo-inside { --evo-best-gap: 12px; --evo-best-bleed: var(--evo-gutter); } .evo-inside__rail > .evo-ing { flex-basis: 72% !important; } .evo-inside__wrap .evo-best__nav { display: none; } }

/* ---------------------------------------------------------------- REVIEWS & TESTIMONIALS (CSS class evo-reviews) — one testimonial at a time
   Each testimonial = ONE container with the class evo-review. LEFT (.evo-review__media): the photo, with the product reference card
   ([evo_review_product id="…"]) laid over its foot. RIGHT (.evo-review__body): stars, the New Spirit quote and the customer (round photo · name ·
   "Verified customer" badge) — the whole column belongs to the quote, so longer testimonials fit cleanly.
   home.js runs it as a carousel that AUTOPLAYS: the progress line fills over --evo-rev-dur, then the next testimonial crossfades in (400ms).
   Arrows / swipe override; hovering or focusing pauses it; off-screen or reduced-motion = no autoplay. No shadows.
   Add a testimonial: duplicate an evo-review container. Not verified? delete that badge widget. In the editor every slide is laid open. */
.evo-reviews { --evo-rev-dur: 7s; }
.evo-reviews .elementor-widget { margin: 0 !important; }
.evo-reviews__head { align-items: center; text-align: center; }
.evo-reviews__title .elementor-heading-title { margin: 0; text-align: center; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.12 !important; }
.evo-reviews__sub, .evo-reviews__sub p { margin: 0 auto; text-align: center; max-width: 34em; }
.evo-reviews__track { display: grid !important; width: 100%; max-width: 1120px; margin-inline: auto; }
.evo-reviews__track > .evo-review { grid-area: 1 / 1; width: 100% !important; max-width: none; display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.evo-reviews.is-live .evo-review { opacity: 0; visibility: hidden; transition: opacity var(--evo-t-section) var(--evo-ease), visibility 0s linear var(--evo-t-section); }
.evo-reviews.is-live .evo-review.is-active { opacity: 1; visibility: visible; transition: opacity var(--evo-t-section) var(--evo-ease), visibility 0s; }
.evo-review__media { position: relative; display: block !important; padding: 0 !important; line-height: 0; border-radius: 0 var(--evo-radius-card) 0 0; overflow: hidden; background: var(--evo-wash); }
.evo-review__photo { width: 100% !important; line-height: 0; }
.evo-review__photo img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; max-height: 470px; object-fit: cover; border-radius: 0 !important; }
.evo-review__media .evo-review__product { position: absolute !important; left: 0; bottom: 0; width: min(388px, 84%) !important; line-height: normal; }      /* the product card: flush to the photo's bottom-left corner, like a caption tab cut from the image. Same place on every slide */
.elementor-editor-active .evo-review__media { overflow: visible; }
.evo-review__body { align-items: flex-start; text-align: left; }
.evo-review__stars .elementor-heading-title { margin: 0; font-size: 14px !important; letter-spacing: .22em !important; line-height: 1 !important; color: var(--evo-navy); }
.evo-review__quote .elementor-heading-title { margin: 0; font-size: clamp(22px, 2.1vw, 32px) !important; line-height: 1.26 !important; letter-spacing: -.005em; font-weight: 500 !important; text-wrap: balance; }
.evo-review__person { align-items: center; flex-wrap: nowrap !important; }
.evo-review__avatar { flex: none; width: auto !important; line-height: 0; }
.evo-review__avatar img { display: block; width: 44px !important; height: 44px !important; max-width: none; object-fit: cover; border-radius: 50% !important; background: var(--evo-wash); }
.evo-review__who { flex: 1 1 auto; min-width: 0; }
.evo-review__name .elementor-heading-title { margin: 0; font-family: var(--e-global-typography-body-font-family), sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.3 !important; color: var(--evo-charcoal); }
.evo-review__verified .elementor-heading-title { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 10px !important; letter-spacing: .14em !important; line-height: 1 !important; color: var(--evo-navy); }
.evo-review__verified .elementor-heading-title::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--evo-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 11px 11px no-repeat; }
/* the product reference card: a generous tinted tile (white-background shots multiply into the tint and sit ON it), name, price, arrow */
.evo-review__product { width: 100%; }
.evo-rprod { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 0 20px 0 0; background: var(--evo-white); border-radius: 0 var(--evo-radius-card) 0 0; overflow: hidden; text-decoration: none !important; box-shadow: none; }
.evo-rprod__img { display: block; width: 96px; height: 96px; overflow: hidden; background: var(--evo-wash); line-height: 0; }
.evo-rprod .evo-rprod__img img { display: block; width: 100%; height: 100% !important; object-fit: cover; border-radius: 0; mix-blend-mode: multiply; }
.evo-rprod__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.evo-rprod__eyebrow { font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--evo-slate); }
.evo-rprod__name { font-family: var(--e-global-typography-h3-font-family), serif; font-weight: 700; font-style: italic; font-size: 20px; line-height: 1.15; color: var(--evo-navy); }
.evo-rprod__price { font-family: var(--e-global-typography-body-font-family), sans-serif; font-weight: 400; font-size: 14px; color: var(--evo-charcoal); }
.evo-rprod__go { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--evo-navy); color: var(--evo-navy); transition: background-color var(--evo-t-hover) var(--evo-ease), color var(--evo-t-hover) var(--evo-ease); }
.evo-rprod:hover .evo-rprod__go, .evo-rprod:focus-visible .evo-rprod__go { background: var(--evo-navy); color: var(--evo-white); }
/* controls: arrows · 1 / 3 · the autoplay progress line */
.evo-reviews__controls { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.evo-reviews__controls .evo-best__nav { position: static; display: flex; }
.evo-reviews__count { min-width: 3.2em; text-align: center; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 12px; letter-spacing: .16em; color: var(--evo-navy); font-variant-numeric: tabular-nums; }
.evo-reviews__bar { position: relative; width: min(220px, 30vw); height: 2px; overflow: hidden; background: color-mix(in srgb, var(--evo-navy) 16%, transparent); }
.evo-reviews__bar i { position: absolute; inset: 0; background: var(--evo-navy); transform-origin: 0 50%; transform: scaleX(var(--evo-rev-pos, 0)); }      /* autoplay: home.js advances --evo-rev-pos 0 → 1, then switches; still (reduced motion) = position in the set */
.evo-reviews.is-auto .evo-reviews__bar i { transition: transform 120ms linear; }
@media (max-width: 1024px) { .evo-reviews__track > .evo-review { column-gap: 28px; } }
@media (max-width: 767px) {
	.evo-reviews__track > .evo-review { grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: start; }
	.evo-review__photo img { aspect-ratio: 1 / 1; max-height: none; }
	.evo-review__media .evo-review__product { width: 100% !important; }      /* phones: a full-width caption bar along the photo's foot */
	.evo-review__quote .elementor-heading-title { font-size: 21px !important; }
	.evo-rprod { width: 100%; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding-right: 14px; border-radius: 0; } .evo-rprod__img { width: 76px; height: 76px; } .evo-rprod__name { font-size: 17px; }
}
.elementor-editor-active .evo-reviews__track { display: flex !important; flex-direction: column; gap: 48px; }
.elementor-editor-active .evo-review { opacity: 1 !important; visibility: visible !important; }

/* ---------------------------------------------------------------- BUNDLE PROMO (CSS class evo-bpromo) — compact; the full builder lives on /bundles/
   One contained white panel with the big signature corner. Left: coral eyebrow tag · New Spirit heading · write-up · the button.
   Right: the live discount steps ([evo_bundle_tiers]) drawn as a STAIRCASE — each tile taller than the last, the top one coral — so the
   "saving stacks as you add" idea is visible before a word is read. */
.evo-bpromo .elementor-widget { margin: 0 !important; }
.evo-bpromo__panel { background-color: var(--evo-white); border-radius: 0 var(--evo-radius-sweep) 0 0; align-items: stretch; overflow: hidden; }
.evo-bpromo__copy { align-items: flex-start; justify-content: center; text-align: left; }
.evo-bpromo__tag .elementor-heading-title { display: inline-block; margin: 0; padding: 7px 10px 6px; background: var(--evo-offer); color: var(--evo-white) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; line-height: 1 !important; }
.evo-bpromo__title .elementor-heading-title { margin: 0; font-size: clamp(32px, 3.2vw, 50px) !important; line-height: 1.06 !important; text-wrap: balance; }
.evo-bpromo__text, .evo-bpromo__text p { margin: 0; max-width: 28em; text-wrap: pretty; }
.evo-bpromo__tiers { align-self: stretch; justify-content: flex-end; }
.evo-bpromo__tiers .elementor-widget, .evo-bpromo__tiers .elementor-widget-container, .evo-bpromo__tiers .elementor-shortcode { height: 100%; }
.evo-btiers { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 10px; width: 100%; height: 100%; min-height: 250px; }
.evo-btiers li { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 18px 18px 20px; background: var(--evo-page); text-align: left; border-radius: 0 var(--evo-radius-sig) 0 0; }
.evo-btiers li:nth-child(1) { height: 52%; } .evo-btiers li:nth-child(2) { height: 76%; } .evo-btiers li:nth-child(n+3) { height: 100%; }
.evo-btiers li:nth-child(2) { background: var(--e-global-color-band); }
.evo-btiers li:last-child { background: var(--evo-offer); }
/* the bars GROW from one shared baseline to their heights when the block scrolls into view, while home.js counts each number up in the
   same 900ms (120ms apart, left to right; the coral one lands last and tallest). Resting state = fully grown (no JS / reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html.evo-anim body:not(.elementor-editor-active) .evo-btiers li { transition: height 900ms var(--evo-ease); transition-delay: calc(var(--evo-i, 0) * 120ms); }
	html.evo-anim body:not(.elementor-editor-active) .evo-btiers:not(.is-in) li { height: 40% !important; }
}
.evo-btiers b { font-family: var(--e-global-typography-h2-font-family), serif; font-weight: 700; font-style: italic; font-size: clamp(38px, 4vw, 60px); line-height: .95; letter-spacing: -.01em; color: var(--evo-navy); }
.evo-btiers span { font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--evo-navy); }
.evo-btiers li:last-child b, .evo-btiers li:last-child span { color: var(--evo-white); }
@media (max-width: 767px) {
	.evo-bpromo__copy { align-items: center; text-align: center; } .evo-bpromo__copy .elementor-widget { width: 100%; text-align: center; } .evo-bpromo__text p { margin-inline: auto; }
	.evo-btiers { min-height: 160px; gap: 8px; } .evo-btiers li { padding: 10px 10px 12px; } .evo-btiers b { font-size: 30px; } .evo-btiers span { font-size: 9px; letter-spacing: .12em; }
	.evo-bpromo .evo-cta, .evo-bpromo .evo-cta .elementor-button-wrapper, .evo-bpromo .evo-cta .elementor-button { width: 100%; }
}

/* ---------------------------------------------------------------- SUBSCRIPTION MINI-BLOCK (CSS class evo-submini) — a compact band, not a section
   Left: offer tag + heading (New Spirit) + one line. Middle: three quick benefits (an Icon List — ticks drawn by CSS). Right: ONE button. */
.evo-submini .elementor-widget { margin: 0 !important; }
.evo-submini > .e-con-inner { align-items: center; }
.evo-submini__copy { align-items: flex-start; text-align: left; }
.evo-submini__tag .elementor-heading-title { display: inline-block; margin: 0; padding: 7px 10px 6px; background: var(--evo-offer); color: var(--evo-white) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; line-height: 1 !important; }
.evo-submini__title .elementor-heading-title { margin: 0; font-size: clamp(26px, 2.3vw, 34px) !important; line-height: 1.12 !important; }
.evo-submini__text, .evo-submini__text p { margin: 0; max-width: 30em; }
.evo-submini__text strong { font-weight: 600; color: var(--evo-navy); }
.evo-submini__list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 12px; }
.evo-submini__list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; align-items: center; }
.evo-submini__list .elementor-icon-list-item::after { display: none !important; }
.evo-submini__list .elementor-icon-list-icon { display: none !important; }
.evo-submini__list .elementor-icon-list-text { position: relative; padding: 0 0 0 30px !important; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif !important; font-weight: var(--evo-caps-w) !important; font-size: 11.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 1.4 !important; color: var(--evo-navy) !important; }
.evo-submini__list .elementor-icon-list-text::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--evo-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.evo-submini__cta { flex: none; width: auto !important; }
/* navy break (class evo-submini--navy on the section): content flips to light */
.evo-submini--navy .evo-submini__text, .evo-submini--navy .evo-submini__text p { color: var(--evo-page); }
.evo-submini--navy .evo-submini__text strong { color: var(--evo-white); }
.evo-submini--navy .evo-submini__list .elementor-icon-list-text { color: var(--evo-page) !important; }
.evo-submini--navy .evo-submini__list .elementor-icon-list-text::before { background-color: var(--evo-page); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D293B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E"); }
@media (max-width: 1024px) { .evo-submini > .e-con-inner { flex-direction: column !important; align-items: center; text-align: center; } .evo-submini__copy { align-items: center; text-align: center; } .evo-submini__copy .elementor-widget { text-align: center; } .evo-submini__text p { margin-inline: auto; } .evo-submini__list .elementor-icon-list-items { align-items: flex-start; } }
@media (max-width: 767px) { .evo-submini__cta, .evo-submini__cta .elementor-button-wrapper, .evo-submini__cta .elementor-button { width: 100% !important; } }

/* ---------------------------------------------------------------- EVOLABS BLOCK (CSS class evo-evolabs) — the sub-brand's own world
   A contained Evolabs-blue panel with the big signature corner (not a plain band): logo · headline · short rundown · "Explore Evolabs"
   on the left; the FLAVOUR ROW (four small linked cards) on the right. Everything is a widget: logo = Image, each flavour = an Image Box. */
.evo-evolabs .elementor-widget { margin: 0 !important; }
.evo-evolabs__panel { background-color: var(--evo-evolabs); border-radius: 0 var(--evo-radius-sweep) 0 0; overflow: hidden; align-items: stretch; color: var(--evo-page); }
.evo-evolabs__copy { align-items: flex-start; justify-content: center; text-align: left; }
.evo-evolabs__logo { line-height: 0; }
.evo-evolabs__logo img { display: block; width: 190px !important; height: 80px !important; max-width: none; object-fit: cover; object-position: 50% 53%; border-radius: 0 !important; margin: 0 auto; }
/* the panel reads left → right as ONE lockup: logo (vertically centred on the text block) · hairline · write-up · the range cards */
.evo-evolabs__panel { align-items: center !important; }
.evo-evolabs__brand { align-self: center; align-items: center; justify-content: center; }
@media (min-width: 1025px) { .evo-evolabs__copy { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--evo-page) 22%, transparent); } }      /* the square logo tile cropped to its wordmark; its own blue = the panel */
.evo-evolabs__title .elementor-heading-title { margin: 0; font-size: clamp(28px, 2.7vw, 42px) !important; line-height: 1.12 !important; text-wrap: balance; }
.evo-evolabs__text, .evo-evolabs__text p { margin: 0; max-width: 30em; text-wrap: pretty; }
.evo-evolabs__copy .evo-cta { margin-top: 6px !important; }
/* THE FLAVOUR ROW (.evo-evolabs__flavours): four small cards, one per flavour. Each = ONE Image Box widget with the class evo-flav plus its
   wash: evo-flav--orange · evo-flav--mint · evo-flav--cherry · evo-flav--natural (Content → Image = the bottle · Title = the flavour · Link = its product).
   Cards are the RANGES (Flavoured CBD Oils · Vitamin D CBD Oil · Capsules) plus a "Shop all" tile. Neutral surface (no colour wash, no dots), so any image
   survives it. Name = a white tab top-left; arrow-in-circle bottom-right (white disc, so it reads on any image); the image eases in on hover.
   The four cards fade up one after another when the block scrolls into view (home.js). */
.evo-evolabs__flavours { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: center; align-self: stretch; }
.evo-evolabs__flavours > .elementor-widget { width: auto !important; max-width: none; min-width: 0; }
.evo-flav { --evo-flav-wash: var(--evo-page); position: relative; overflow: hidden; border-radius: 0 var(--evo-radius-sig) 0 0; background: var(--evo-flav-wash); -webkit-tap-highlight-color: transparent; }
/* optional light tints (add ONE class to a card: evo-flav--orange / --mint / --cherry / --natural). Off by default: a neutral surface survives any image */
.evo-flav--orange { --evo-flav-wash: color-mix(in srgb, var(--evo-flav-orange) 34%, var(--evo-white)); } .evo-flav--mint { --evo-flav-wash: color-mix(in srgb, var(--evo-flav-mint) 34%, var(--evo-white)); } .evo-flav--cherry { --evo-flav-wash: color-mix(in srgb, var(--evo-flav-cherry) 34%, var(--evo-white)); } .evo-flav--natural { --evo-flav-wash: color-mix(in srgb, var(--evo-flav-natural) 34%, var(--evo-white)); }
.evo-flav .elementor-image-box-wrapper { display: block; text-align: left; }
.evo-flav .elementor-image-box-img { display: block; width: 100% !important; margin: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; }
.evo-flav .elementor-image-box-img a { display: block; width: 100%; height: 100%; }
.evo-flav .elementor-image-box-img img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 70%; border-radius: 0 !important; mix-blend-mode: multiply; transform: scale(1.02); transform-origin: 50% 60%; transition: transform 600ms var(--evo-ease); }
.evo-flav .elementor-image-box-content { position: absolute; inset: 0; width: 100%; padding: 0; pointer-events: none; }
.evo-flav .elementor-image-box-title {
	position: absolute; left: 0; top: 0; max-width: 84%; margin: 0 !important; padding: 12px 16px 10px 16px; background: var(--evo-white); text-align: left; pointer-events: auto;      /* a white name tab with the flavour's dot: reads clear of ANY image behind it */
	font-family: var(--e-global-typography-h3-font-family), serif !important; font-weight: 700 !important; font-style: italic !important;
	font-size: clamp(18px, 1.5vw, 22px) !important; letter-spacing: -.005em !important; text-transform: none !important; line-height: 1.1 !important; color: var(--evo-navy);
}
.evo-flav .elementor-image-box-title a { color: inherit !important; text-decoration: none !important; }
.evo-flav .elementor-image-box-title a::after { content: ""; position: absolute; inset: -600px -40px; z-index: 3; }      /* the whole card is one link */
.evo-flav .elementor-image-box-description { display: none !important; }
/* the "Shop all" tile (class evo-flav--all, an Image Box with NO image): a quiet tone of the panel, the words centred, light arrow */
.evo-flav--all { --evo-flav-wash: color-mix(in srgb, var(--evo-white) 10%, var(--evo-evolabs)); min-height: 100%; }
.evo-flav--all, .evo-flav--all .elementor-widget-container, .evo-flav--all .elementor-image-box-wrapper { height: 100%; }
.evo-flav--all .elementor-image-box-content { position: absolute; inset: 0; }
.evo-flav--all .elementor-image-box-title { position: absolute; left: 16px; right: 56px; top: auto; bottom: 14px; max-width: none; padding: 0; background: transparent; color: var(--evo-white) !important; font-size: clamp(20px, 1.7vw, 25px) !important; }
.evo-flav.evo-flav--all .elementor-image-box-content::before { border-color: var(--evo-page); background: transparent; } .evo-flav.evo-flav--all .elementor-image-box-content::after { background: var(--evo-page); }
@media (hover: hover) { .evo-flav.evo-flav--all:hover .elementor-image-box-content::before { background: var(--evo-page); } .evo-flav.evo-flav--all:hover .elementor-image-box-content::after { background: var(--evo-navy); } }
.evo-flav .elementor-image-box-content::before { content: ""; position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--evo-navy); background: var(--evo-white); transition: background-color var(--evo-t-hover) var(--evo-ease); }
.evo-flav .elementor-image-box-content::after { content: ""; position: absolute; z-index: 2; right: 17px; bottom: 17px; width: 16px; height: 16px; background: var(--evo-navy); -webkit-mask: var(--evo-ico-arrow) center / 16px 16px no-repeat; mask: var(--evo-ico-arrow) center / 16px 16px no-repeat; transition: background-color var(--evo-t-hover) var(--evo-ease); }
@media (hover: hover) {
	.evo-flav:hover .elementor-image-box-img img { transform: scale(1.08); }
	.evo-flav:hover .elementor-image-box-content::before { background: var(--evo-navy); } .evo-flav:hover .elementor-image-box-content::after { background: var(--evo-white); }
}
.evo-flav:focus-within .elementor-image-box-img img { transform: scale(1.08); }
.evo-flav:has(a:focus-visible) { outline: 1.5px solid var(--evo-page); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .evo-flav .elementor-image-box-img img { transition: none; } }
@media (max-width: 1024px) { .evo-evolabs__panel { flex-direction: column !important; align-items: stretch !important; } .evo-evolabs__panel > .e-con { width: 100% !important; } .evo-evolabs__brand { align-items: flex-start; } .evo-evolabs__logo img { margin: 0 0 0 -30px; } }
@media (max-width: 767px) { .evo-evolabs__flavours { gap: 8px; } .evo-flav .elementor-image-box-img { aspect-ratio: 1 / 1; } .evo-flav .elementor-image-box-img img { object-position: 50% 50%; transform: scale(1.1) translateY(7%); } .evo-flav .elementor-image-box-title { padding: 8px 10px 6px 10px; font-size: 14.5px !important; } .evo-flav .elementor-image-box-content::before { right: 8px; bottom: 8px; width: 26px; height: 26px; } .evo-flav .elementor-image-box-content::after { right: 13px; bottom: 13px; width: 16px; height: 16px; } .evo-evolabs .evo-cta, .evo-evolabs .evo-cta .elementor-button-wrapper, .evo-evolabs .evo-cta .elementor-button { width: 100%; } }

/* ---------------------------------------------------------------- EVOPURE VS THE REST (CSS class evo-versus) — centred intro, then ONE clean static table
   The table itself is the [evo_compare] block (evopure-blocks.php + blocks.css) — columns and rows are typed in its Shortcode widget.
   No tabs, no sticky parts. Motion: the table fades up once, then its marks tick in row by row. */
.evo-versus .elementor-widget { margin: 0 !important; }
.evo-versus__head { align-items: center; text-align: center; }
.evo-versus__head .elementor-widget { width: 100%; text-align: center; }
.evo-versus__title .elementor-heading-title { margin: 0; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.1 !important; text-wrap: balance; }
.evo-versus__text, .evo-versus__text p { margin: 0 auto; max-width: 36em; text-wrap: pretty; text-align: center; }
.evo-versus .evo-versus__table { width: 100% !important; max-width: 1040px !important; align-self: center; }

/* ---------------------------------------------------------------- SPLIT (CSS class evo-split; add evo-split--flip to put the image on the right) — Our Story · Sustainability
   One image with the signature corner + a text column: eyebrow (caps), New Spirit heading, 1–2 paragraphs, optional facts row, a text-link CTA. */
.evo-split .elementor-widget { margin: 0 !important; }
.evo-split > .e-con-inner { align-items: center; }
.evo-split--flip > .e-con-inner { flex-direction: row-reverse; }
.evo-split__media { line-height: 0; }
.evo-split__media img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0 var(--evo-radius-sweep) 0 0 !important; }
.evo-split__copy { align-items: flex-start; text-align: left; }
.evo-split__eyebrow .elementor-heading-title { margin: 0; font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.4 !important; }
.evo-split__title .elementor-heading-title { margin: 0; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.1 !important; text-wrap: balance; }
.evo-split__text, .evo-split__text p { margin: 0; max-width: 34em; text-wrap: pretty; }
.evo-split__text p + p { margin-top: 14px; }
.evo-split__facts { align-items: flex-start; }
.evo-split__fact { width: auto !important; }
.evo-split__factnum .elementor-heading-title { margin: 0; font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
.evo-split__factlabel .elementor-heading-title { margin: 0; font-size: 10.5px !important; letter-spacing: .14em !important; line-height: 1.4 !important; }
@media (max-width: 767px) { .evo-split > .e-con-inner, .evo-split--flip > .e-con-inner { flex-direction: column !important; } .evo-split__media img { aspect-ratio: 16 / 11; border-radius: 0 var(--evo-radius-sweep) 0 0 !important; } }

/* ---------------------------------------------------------------- OUR STORY (CSS class evo-story) — a composed, text-led block. No image.
   Row 1 (.evo-story__top): LEFT the eyebrow + one large New Spirit line · RIGHT a lead paragraph, the story, the founders' sign-off and the link.
   Row 2 (.evo-story__facts): three facts across the full width, each opening with a short rule. */
.evo-story .elementor-widget { margin: 0 !important; }
.evo-story__top { align-items: flex-start; }
.evo-story__lead { align-items: flex-start; text-align: left; }
.evo-story__eyebrow .elementor-heading-title { margin: 0; font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.4 !important; }
.evo-story__title .elementor-heading-title { margin: 0; font-size: clamp(32px, 3.4vw, 52px) !important; line-height: 1.05 !important; letter-spacing: -.01em; text-wrap: balance; }
.evo-story__title em { font-style: italic; font-weight: 300; }
.evo-story__body { align-items: flex-start; text-align: left; }
.evo-story__intro, .evo-story__intro p { margin: 0; max-width: 28em; font-size: clamp(18px, 1.45vw, 20.5px) !important; line-height: 1.5 !important; color: var(--evo-navy); text-wrap: pretty; }
.evo-story__text, .evo-story__text p { margin: 0; max-width: 34em; text-wrap: pretty; }
.evo-story__text p + p { margin-top: 14px; }
.evo-story__sign .elementor-heading-title { margin: 0; font-size: 11px !important; letter-spacing: .16em !important; line-height: 1.4 !important; }
/* the three facts sit UNDER the title in the left column as a short ledger: figure left, caps label right, hairline rules between. */
.evo-story__facts { width: 100%; max-width: 460px; margin-top: 8px !important; }
.evo-story__facts > .e-con { width: 100% !important; max-width: none; }
.evo-story__fact { display: grid !important; grid-template-columns: 176px minmax(0, 1fr); align-items: baseline; column-gap: 20px; text-align: left; --padding-top: 12px !important; --padding-bottom: 11px !important; --padding-block-start: 12px !important; --padding-block-end: 11px !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 14%, transparent); }
.evo-story__fact:last-child { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--evo-navy) 14%, transparent); }
.evo-story__fact > .elementor-widget { width: auto !important; }
.evo-story__factnum .elementor-heading-title { margin: 0; font-size: clamp(21px, 1.7vw, 25px) !important; line-height: 1.05 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evo-story__factlabel .elementor-heading-title { margin: 0; font-size: 10.5px !important; letter-spacing: .14em !important; line-height: 1.45 !important; }
/* both columns hang from the same line: the lead paragraph starts level with the title (the eyebrow sits above that line) */
@media (min-width: 768px) { .evo-story__top { align-items: flex-start !important; } .evo-story__body { --padding-top: 40px !important; --padding-block-start: 40px !important; } }
.evo-story__foot { align-items: center; flex-wrap: wrap !important; }
.evo-story__foot > .elementor-widget { width: auto !important; }
/* phones: one column, in reading order: title → story → the ledger last */
@media (max-width: 767px) {
	.evo-story__top { flex-direction: column !important; }
	.evo-story__top > .e-con { width: 100% !important; }
	.evo-story__lead { display: contents !important; }
	.evo-story__eyebrow { order: 1; } .evo-story__title { order: 2; } .evo-story__body { order: 3; } .evo-story__facts { order: 4; max-width: none; margin-top: 4px !important; }
	.evo-story__fact { grid-template-columns: 158px minmax(0, 1fr); column-gap: 12px; } .evo-story__factnum .elementor-heading-title { font-size: 23px !important; }
}

/* ---------------------------------------------------------------- SUSTAINABILITY (CSS class evo-sustain) — full-bleed, cinematic
   The photo (or a video) is the SECTION'S OWN background: Style → Background → Image (or Video). A navy veil — strongest behind the text — keeps the
   write-up readable over any picture. Content is overlaid in light: eyebrow · New Spirit heading · write-up · the Greenspark figures (count up) · button.
   The slow-spinning "Earth Positive" badge is the [evo_badge] shortcode (its words are typed in the Shortcode widget). */
.evo-sustain { position: relative; isolation: isolate; overflow: hidden; background-color: var(--evo-navy); background-size: cover; background-position: 50% 50%; }
.evo-sustain::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0; width: auto !important; height: auto !important; opacity: 1 !important; pointer-events: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--evo-navy-deep) 86%, transparent) 0%, color-mix(in srgb, var(--evo-navy-deep) 62%, transparent) 42%, color-mix(in srgb, var(--evo-navy-deep) 12%, transparent) 100%) !important; }
.evo-sustain > .e-con-inner { position: relative; z-index: 1; min-height: clamp(520px, 72svh, 720px); justify-content: center; }
.evo-sustain .elementor-widget { margin: 0 !important; }
.evo-sustain__copy { align-items: flex-start; text-align: left; }
.evo-sustain__eyebrow .elementor-heading-title { margin: 0; font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.4 !important; }
.evo-sustain__title .elementor-heading-title { margin: 0; font-size: clamp(38px, 4.2vw, 64px) !important; line-height: 1.04 !important; letter-spacing: -.01em; text-wrap: balance; }
/* TWO-TIER HEADING (any heading): wrap the second tier in <span class="evo-tier2">…</span> → it drops to its own line in the functional sans */
.evo-tier2 { display: block; margin-top: .42em; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-style: normal; font-weight: 500; font-size: .44em; letter-spacing: .01em; line-height: 1.2; text-transform: none; }
.evo-sustain__text, .evo-sustain__text p { margin: 0; max-width: 32em; text-wrap: pretty; }
.evo-sustain__text p + p { margin-top: 12px; }
.evo-sustain__facts { align-items: flex-start; flex-wrap: wrap !important; }
.evo-sustain__fact { width: auto !important; }
.evo-sustain__factnum .elementor-heading-title { margin: 0; font-size: clamp(30px, 2.8vw, 42px) !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
.evo-sustain__factlabel .elementor-heading-title { margin: 0; font-size: 10.5px !important; letter-spacing: .14em !important; line-height: 1.45 !important; }
.evo-sustain .evo-sustain__badge { position: absolute !important; z-index: 2; right: clamp(24px, 7vw, 120px); bottom: clamp(40px, 9vh, 96px); width: auto !important; line-height: 0; }
/* phones: the photo gets its own clear band at the top (badge over it), then melts into navy where the write-up sits. Reads as a picture, not a tint */
@media (max-width: 767px) {
	.evo-sustain { background-size: auto 360px !important; background-position: 64% 0 !important; background-repeat: no-repeat !important; }
	.evo-sustain::before { background: linear-gradient(180deg, color-mix(in srgb, var(--evo-navy) 8%, transparent) 0, color-mix(in srgb, var(--evo-navy) 30%, transparent) 170px, var(--evo-navy) 352px, var(--evo-navy) 100%) !important; }
	.evo-sustain > .e-con-inner { min-height: 0; justify-content: flex-end; }
	.evo-sustain__copy { --padding-top: 292px !important; --padding-block-start: 292px !important; }
	.evo-sustain .evo-sustain__badge { right: 16px; top: 24px; bottom: auto; --evo-badge-size: 108px; }
	.evo-sustain__facts { gap: 20px 28px !important; }
	.evo-sustain .evo-cta, .evo-sustain .evo-cta .elementor-button-wrapper, .evo-sustain .evo-cta .elementor-button { width: 100%; }
}
.elementor-editor-active .evo-sustain .evo-sustain__badge { position: absolute !important; }

/* ---------------------------------------------------------------- DAILY ROUTINE (CSS class evo-routine) — ONE large image card that plays Morning → Midday → Evening
   The image is the hero, but CONTAINED: it sits inside the page width on the section's own white / neutral block (the section's padding is the space
   around it), squared, with the big signature corner top-right. It never touches the screen edges or the sections beside it. Everything else lives INSIDE the image, overlaid: the time label, a short title, one line and
   the product(s) for that moment. It autoplays (progress lines + arrows to override, like Reviews), on phones too — never a plain stack.
   Each moment = ONE container with the class evo-routine__slide: its photo is that container's Style → Background → Image; inside it the container
   evo-routine__content holds the widgets. The words before the " · " in the time label ("Morning · 07:00") name its progress segment.
   home.js runs it; --evo-routine-dur = seconds per moment. In the editor the three slides are laid open one under the other. */
.evo-routine { --evo-routine-dur: 6.5s; --evo-routine-pad: clamp(24px, 4.6vw, 64px); }      /* --evo-routine-pad = the words' inset from the card's own edge */
.evo-routine .elementor-widget { margin: 0 !important; }
.evo-routine__stage { position: relative; display: grid !important; width: 100%; min-height: clamp(520px, 72svh, 660px); overflow: hidden; isolation: isolate; border-radius: 0 var(--evo-radius-sweep) 0 0; background: var(--evo-navy); }
.evo-routine__stage > .evo-routine__slide { grid-area: 1 / 1; position: relative; width: 100% !important; max-width: none; min-height: inherit; display: flex !important; flex-direction: column; justify-content: center;
	padding: 64px var(--evo-routine-pad) 124px !important; background-size: cover; background-position: 50% 50%; }
.evo-routine__slide::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0; width: auto !important; height: auto !important; opacity: 1 !important; pointer-events: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--evo-navy-deep) 84%, transparent) 0%, color-mix(in srgb, var(--evo-navy-deep) 58%, transparent) 38%, color-mix(in srgb, var(--evo-navy-deep) 8%, transparent) 72%, transparent 100%) !important; }      /* the veil sits behind the words only; the rest of the photo stays clear */
.evo-routine.is-live .evo-routine__slide { opacity: 0; visibility: hidden; transition: opacity 700ms var(--evo-ease), visibility 0s linear 700ms; }
.evo-routine.is-live .evo-routine__slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--evo-ease), visibility 0s; }
.evo-routine__content { position: relative; z-index: 1; width: min(520px, 100%) !important; align-items: flex-start; text-align: left; }
.evo-routine__time .elementor-heading-title { margin: 0; font-size: 11.5px !important; letter-spacing: .18em !important; line-height: 1.4 !important; }
.evo-routine__title .elementor-heading-title { margin: 0; font-size: clamp(34px, 3.8vw, 58px) !important; line-height: 1.04 !important; letter-spacing: -.01em; text-wrap: balance; }
.evo-routine__text, .evo-routine__text p { margin: 0; max-width: 28em; text-wrap: pretty; }
.evo-routine__products { width: 100%; max-width: 400px; margin-top: 6px !important; }
.evo-routine__products .elementor-widget { width: 100% !important; }
.evo-routine .evo-rprod { background: var(--evo-white); border-radius: 0 var(--evo-radius-sig) 0 0; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding-right: 16px; }
.evo-routine .evo-rprod__img { width: 76px; height: 76px; }
.evo-routine .evo-rprod__name { font-size: 18px; }
/* controls, overlaid on the image foot: arrows + one labelled progress segment per moment (click a segment to jump) */
.evo-routine__controls { position: absolute !important; z-index: 2; width: auto !important; left: var(--evo-routine-pad); right: var(--evo-routine-pad); bottom: 40px; display: flex; align-items: flex-end; gap: 28px; }
.evo-routine__controls .evo-best__nav { position: static; display: flex; flex: none; }
.evo-routine__controls .evo-best__btn { border-color: var(--evo-page) !important; color: var(--evo-page) !important; background: transparent !important; }
.evo-routine__controls .evo-best__btn:hover, .evo-routine__controls .evo-best__btn:focus-visible { background: var(--evo-page) !important; color: var(--evo-navy) !important; }
.evo-routine__segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; width: min(440px, 100%); }
.evo-routine__seg { display: block; margin: 0; padding: 0 0 12px; text-align: left; cursor: pointer; position: relative; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent;
	font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--evo-page) !important; opacity: .62; transition: opacity var(--evo-t-hover) var(--evo-ease); }
.evo-routine__seg[aria-current="true"], .evo-routine__seg:hover { opacity: 1; }
.evo-routine__seg:focus-visible { outline: 1.5px solid var(--evo-page); outline-offset: 4px; }
.evo-routine__seg::before, .evo-routine__seg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.evo-routine__seg::before { background: color-mix(in srgb, var(--evo-page) 30%, transparent); }
.evo-routine__seg::after { background: var(--evo-page); transform-origin: 0 50%; transform: scaleX(var(--evo-seg, 0)); }
.evo-routine.is-auto .evo-routine__seg::after { transition: transform 120ms linear; }
@media (prefers-reduced-motion: no-preference) {
	.evo-routine.is-live .evo-routine__slide.is-active .evo-routine__content > * { animation: evo-fade-up 560ms var(--evo-ease) both; animation-delay: 160ms; }
	.evo-routine.is-live .evo-routine__slide.is-active .evo-routine__content > *:nth-child(2) { animation-delay: 220ms; } .evo-routine.is-live .evo-routine__slide.is-active .evo-routine__content > *:nth-child(3) { animation-delay: 280ms; }
	.evo-routine.is-live .evo-routine__slide.is-active .evo-routine__content > *:nth-child(4) { animation-delay: 340ms; }
}
@media (max-width: 767px) {
	.evo-routine { --evo-routine-pad: 18px; }
	.evo-routine__stage { min-height: clamp(580px, 80svh, 660px); border-radius: 0 var(--evo-radius-card) 0 0; }
	.evo-routine__stage > .evo-routine__slide { justify-content: flex-end; padding: 36px var(--evo-routine-pad) 100px !important; background-position: 50% 30%; }
	.evo-routine__slide::before { background: linear-gradient(180deg, color-mix(in srgb, var(--evo-navy-deep) 12%, transparent) 0%, color-mix(in srgb, var(--evo-navy-deep) 40%, transparent) 30%, color-mix(in srgb, var(--evo-navy-deep) 88%, transparent) 62%, color-mix(in srgb, var(--evo-navy-deep) 94%, transparent) 100%) !important; }
	.evo-routine__title .elementor-heading-title { font-size: 32px !important; }
	.evo-routine__text, .evo-routine__text p { font-size: 16px !important; }
	.evo-routine__products { max-width: none; } .evo-routine .evo-rprod { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; } .evo-routine .evo-rprod__img { width: 64px; height: 64px; } .evo-routine .evo-rprod__name { font-size: 16.5px; } .evo-routine .evo-rprod__eyebrow { display: none; }
	.evo-routine__controls { left: var(--evo-routine-pad); right: var(--evo-routine-pad); bottom: 26px; gap: 16px; } .evo-routine__segs { gap: 10px; } .evo-routine__seg { font-size: 10px; letter-spacing: .12em; }
	.evo-routine__controls .evo-best__nav { display: none; }      /* phones: swipe or tap a segment */
}
.elementor-editor-active .evo-routine__stage { display: flex !important; flex-direction: column; gap: 24px; min-height: 0; border-radius: 0; background: transparent; }
.elementor-editor-active .evo-routine__slide { opacity: 1 !important; visibility: visible !important; min-height: 560px; }

/* ---------------------------------------------------------------- REFER A FRIEND (CSS class evo-refer) — "give £10, get £10". The block is ready; the referral ENGINE is not wired yet
   A COMPACT BAND, about the footprint of the Subscription block: copy (small coral tag, the ONLY coral here · New Spirit heading · the mechanic in one line) ·
   the two vouchers · ONE button (→ /refer-a-friend/ until the rewards platform is chosen), left to right.
   The vouchers: two layered vouchers = Shortcode [evo_refer_art give="£10" get="£10" …] (type your own amounts + lines). Navy and white only; the back voucher slides
   out from behind the front one as the block arrives. */
.evo-refer { --evo-refer-bg: var(--e-global-color-sand); }
.evo-refer .elementor-widget { margin: 0 !important; }
.evo-refer > .e-con-inner { align-items: center; }
.evo-refer__copy { align-items: flex-start; text-align: left; }
.evo-refer__tag .elementor-heading-title { display: inline-block; margin: 0; padding: 7px 10px 6px; background: var(--evo-offer); color: var(--evo-white) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; line-height: 1 !important; }
.evo-refer__title .elementor-heading-title { margin: 0; font-size: clamp(26px, 2.3vw, 34px) !important; line-height: 1.12 !important; text-wrap: balance; }
.evo-refer__title em { font-style: italic; font-weight: 300; }
.evo-refer__text, .evo-refer__text p { margin: 0; max-width: 32em; text-wrap: pretty; }
.evo-refer__cta { flex: none; width: auto !important; }
.evo-refer__art { display: flex; justify-content: center; flex: none; width: auto !important; }
.evo-refer .evo-rart { --evo-rart-w: clamp(168px, 13.4vw, 192px); }
.evo-refer .evo-rart__card { padding: 13px 16px; border-radius: 0 calc(var(--evo-radius-sig) * 2) 0 0; } .evo-refer .evo-rart__card b { font-size: clamp(34px, 3vw, 42px); } .evo-refer .evo-rart__card i, .evo-refer .evo-rart__card em { font-size: 8.5px; letter-spacing: .13em; }
.evo-refer .evo-rart__card::before, .evo-refer .evo-rart__card::after { width: 12px; height: 12px; margin-top: -6px; } .evo-refer .evo-rart__card::before { left: -6px; } .evo-refer .evo-rart__card::after { right: -6px; }
.evo-rart { --evo-rart-w: clamp(240px, 22vw, 320px); --evo-rart-x: calc(var(--evo-rart-w) * .58); --evo-rart-y: calc(var(--evo-rart-w) * -.27); position: relative; width: calc(var(--evo-rart-w) * 1.58); height: calc(var(--evo-rart-w) * .89); isolation: isolate; }
.evo-rart__card { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; width: var(--evo-rart-w); aspect-ratio: 1 / .62; padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px); box-sizing: border-box; border-radius: 0 var(--evo-radius-card) 0 0; text-align: left; }
.evo-rart__card--give { z-index: 2; background: var(--evo-navy); color: var(--evo-white); }
.evo-rart__card--get { z-index: 1; background: var(--evo-white); color: var(--evo-navy); align-items: flex-end; text-align: right; transform: translate3d(var(--evo-rart-x), var(--evo-rart-y), 0); }      /* the second voucher sits up and to the right; its words live in the part you can see */
.evo-rart__card--get > * { max-width: calc(58% - 18px); }      /* its words wrap inside the part of the voucher that shows */
.evo-rart__card i, .evo-rart__card em { font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-style: normal; font-weight: var(--evo-caps-w); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.evo-rart__card em { opacity: .72; }
.evo-rart__card b { font-family: var(--e-global-typography-h2-font-family), serif; font-weight: 700; font-style: italic; font-size: clamp(52px, 5.4vw, 80px); line-height: .9; letter-spacing: -.015em; }
/* the ticket notches: two half-circles of the section's own tone bitten out of each voucher's sides */
.evo-rart__card::before, .evo-rart__card::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--evo-refer-bg); }
.evo-rart__card::before { left: -9px; } .evo-rart__card::after { right: -9px; }
.evo-rart__card--get::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
	html.evo-anim body:not(.elementor-editor-active) .evo-rart .evo-rart__card--get { transition: transform 900ms var(--evo-ease) 150ms; }
	html.evo-anim body:not(.elementor-editor-active) .evo-rart:not(.is-in) .evo-rart__card--get { transform: translate3d(0, 0, 0); }      /* the second voucher slides out from behind the first as the block arrives */
}
@media (max-width: 1024px) { .evo-refer > .e-con-inner { flex-direction: column !important; align-items: center; text-align: center; } .evo-refer__copy { align-items: center; text-align: center; width: 100% !important; } .evo-refer__copy .elementor-widget { width: 100%; text-align: center; } .evo-refer__text p { margin-inline: auto; } }
@media (max-width: 767px) {
	.evo-refer { --padding-top: 36px !important; --padding-bottom: 40px !important; --padding-block-start: 36px !important; --padding-block-end: 40px !important; }
	.evo-refer .evo-rart { --evo-rart-w: min(41vw, 160px); }
	.evo-refer__cta, .evo-refer__cta .elementor-button-wrapper, .evo-refer__cta .elementor-button { width: 100% !important; }
}
}

/* ---------------------------------------------------------------- FAQ (CSS class evo-faqs) — centred heading, then the [evo_faq] accordion in a readable column */
.evo-faqs .elementor-widget { margin: 0 !important; }
.evo-faqs__head { align-items: center; text-align: center; }
.evo-faqs__title .elementor-heading-title { margin: 0; text-align: center; font-size: clamp(30px, 2.9vw, 44px) !important; line-height: 1.12 !important; }
.evo-faqs__sub, .evo-faqs__sub p { margin: 0 auto; text-align: center; max-width: 34em; }
.evo-faqs .evo-faqs__list { width: 100% !important; max-width: 920px !important; align-self: center; }      /* a readable column, centred */
.evo-faqs__more { align-self: center; }

/* placeholder bands for sections still to come (staging only) */
.evo-home-todo .elementor-heading-title { opacity: .55; }