/** Shopify CDN: Minification failed

Line 17:0 All "@import" rules must come first
Line 617:0 All "@import" rules must come first
Line 1368:0 All "@import" rules must come first
Line 1952:0 All "@import" rules must come first
Line 2552:0 All "@import" rules must come first
Line 3111:0 All "@import" rules must come first
Line 3676:0 All "@import" rules must come first
Line 4222:0 All "@import" rules must come first
Line 4773:0 All "@import" rules must come first
Line 5329:0 All "@import" rules must come first
... and 2 more hidden warnings

**/
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
[role="button"], button { cursor: pointer; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp img { display: block; max-width: 100%; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp ol, .svp ul { list-style: none; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-grid { display: grid; grid-template-columns: 1fr; gap: 16px; grid-template-areas: "rating" "head" "media" "body"; }
.svp .jr-rating { grid-area: rating; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.svp .jr-avs { display: inline-flex; flex: 0 0 auto; }
.svp .jr-avs img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255, 255, 255); }
.svp .jr-avs img + img { margin-left: -11px; }
.svp .jr-stars { color: rgb(242, 169, 59); font-size: 14px; letter-spacing: 1.5px; white-space: nowrap; }
.svp .jr-rtxt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.svp .jr-head { grid-area: head; margin: 0px; font-weight: 800; letter-spacing: -0.015em; font-size: clamp(27px, 6.2vw, 44px); line-height: 1.12; }
.svp .jr-media { grid-area: media; }
.svp .jr-media img { width: 100%; height: auto; display: block; border-radius: 18px; }
.svp .jr-body { grid-area: body; }
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.svp .jr-list { list-style: none; margin: 0px 0px 24px; padding: 0px; display: grid; gap: 12px; }
.svp .jr-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.svp .jr-list svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--green); }
.svp .jr-cta { display: flex; flex-direction: column; gap: 11px; align-items: stretch; }
.svp .jr-cta .scrollbuy-btn { width: 100%; }
.svp .jr-note { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.svp .jr-note svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--green); }
.svp .jr-grid { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr); gap: 15px 56px; grid-template-areas: "rating media" "head media" "body media"; align-items: start; }
.svp .jr-media { align-self: center; }
.svp .jr-head { margin-top: 2px; }
.svp .jr-cta { align-items: center; align-self: flex-start; width: max-content; max-width: 100%; }
.svp .jr-cta .scrollbuy-btn { width: auto; }
.svp .jr-note { justify-content: center; }
@media (min-width: 900px) {
  .svp .jr-grid { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr); gap: 15px 56px; grid-template-areas: "rating media" "head media" "body media"; align-items: start; }
  .svp .jr-media { align-self: center; }
  .svp .jr-head { margin-top: 2px; }
  .svp .jr-cta { align-items: center; align-self: flex-start; width: max-content; max-width: 100%; }
  .svp .jr-cta .scrollbuy-btn { width: auto; }
  .svp .jr-note { justify-content: center; }
}
.svp .scrollbuy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--green,#2F7A4E); color: rgb(255, 255, 255); border: 0px; border-radius: 100px; padding: 16px 38px; min-height: 52px; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s, filter 0.15s; max-width: 100%; }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
.svp .scrollbuy-btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .svp .bundle.pulse { animation: auto ease 0s 1 normal none running none; }
  .svp .scrollbuy-btn { transition: none; }
}
.svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
@media (max-width: 600px) {
  .svp-stickybar__inner { grid-template-columns: 1fr auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; }
  .svp-stickybar__prod img { width: 40px; height: 40px; }
  .svp-stickybar__rating { display: none; }
  .svp-stickybar__title { font-size: 12.5px; margin-top: 0px; }
  .svp-stickybar__price .sb-now { font-size: 15px; }
  .svp-stickybar__price .sb-was { font-size: 11.5px; }
  .svp-stickybar__price .sb-save { display: none; }
  .svp-stickybar__cta { padding: 13px 18px; font-size: 13.5px; min-height: 46px; }
  .svp-stickybar__cta .sb-cta-price { display: none; }
  .svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
  .svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
  .svp .buy2 { max-width: none; }
  .svp .buy2 .buy-cta { min-height: 56px; font-size: 16px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */
.svp-stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid #e2e2e2; box-shadow:0 -4px 16px rgba(0,0,0,.08); transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .svp-stickybar.show{ transform:translateY(0); }
  .svp-stickybar__inner{ max-width:1180px; margin:0 auto; padding:10px 20px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
  .svp-stickybar__prod{ display:flex; align-items:center; gap:12px; min-width:0; }
  .svp-stickybar__prod img{ width:52px; height:52px; object-fit:cover; border-radius:8px; flex:none; background:#f4f7ef; }
  .svp-stickybar__meta{ min-width:0; }
  .svp-stickybar__rating{ font-size:12px; color:#5a5a5a; font-weight:600; letter-spacing:.02em; }
  .svp-stickybar__rating .svp-stickybar__rev{ color:#8a8a8a; font-weight:500; }
  .svp-stickybar__title{ font-size:14px; font-weight:700; color:#1E2A22; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .svp-stickybar__cta{ background:#1a1a1a; color:#fff; border:0; border-radius:999px; padding:14px 30px; font-size:14.5px; font-weight:700; letter-spacing:.03em; cursor:pointer; transition:background .2s; white-space:nowrap; }
  .svp-stickybar__cta:hover{ background:#000; }
  @media(max-width:600px){
    .svp-stickybar__inner{ padding:8px 12px; gap:10px; }
    .svp-stickybar__prod img{ width:44px; height:44px; }
    .svp-stickybar__title{ font-size:13px; }
    .svp-stickybar__cta{ padding:12px 20px; font-size:13px; }
    .svp-stickybar__rating{ font-size:11px; }
  }

  .svp .svp-ci__badge{ display:inline-block; background:#E7F2E9; color:#1E5A31; font-size:11px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:6px; margin:4px 0 6px; text-transform:uppercase; }
  .svp .svp-ci__save{ display:inline-block; background:#FDE7E3; color:#B23A2E; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; margin-top:4px; }
  .svp .svp-ci__right{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
  
  .svp .b-row3{ display:block; margin-top:4px; font-size:12.5px; color:var(--green,#2F7A4E); font-weight:700; letter-spacing:.01em; }.svp .b-pill{ display:inline-block; }

  /* ---------- sticky bar: live rung + price ---------- */
  .svp-stickybar__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:2px; line-height:1.2; }
  .svp-stickybar__price .sb-now{ font-size:16px; font-weight:800; color:#1E2A22; }
  .svp-stickybar__price .sb-was{ font-size:12.5px; color:#8a8a8a; text-decoration:line-through; }
  .svp-stickybar__price .sb-was:empty, .svp-stickybar__price .sb-save:empty, .svp-stickybar__price .sb-now:empty{ display:none; }
  .svp-stickybar__price .sb-save{ font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#1E5A31; background:#E7F2E9; border-radius:100px; padding:2px 8px; white-space:nowrap; }
  .svp-stickybar__cta .sb-cta-price{ font-weight:800; }
  .svp-stickybar{ padding-bottom:env(safe-area-inset-bottom); }

  /* ---------- add-to-cart: struck anchor inside the button ---------- */
  .svp .buy-cta .svp-cta-was{ font-size:.78em; font-weight:600; opacity:.62; text-decoration:line-through; margin-left:7px; }
  .svp .buy-cta .svp-cta-was:empty{ display:none; }
  .svp .buy-cta{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 2px; min-height:54px; }

  /* ---------- second buy box ---------- */
  .svp .buy2{ max-width:560px; margin:0 auto; }
  .svp .buy2 .bundles{ margin-bottom:14px; }
  .svp .buy2 .buy-cta{ width:100%; }
  .svp .buy2 .svp-pay{ margin-top:12px; }
  .svp .buy2-guar{ text-align:center; font-size:12.5px; color:var(--ink-soft,#6b7169); margin-top:10px; }
  .svp .buy2-sec .head{ margin-bottom:22px; }
  .svp .buy2-media{ display:flex; justify-content:center; margin:0 0 6px; }
  .svp .buy2-media img{ width:100%; max-width:330px; height:auto; aspect-ratio:1/1; object-fit:cover;
                        border-radius:var(--r); border:1px solid var(--line); background:#fff; }
  @media(max-width:600px){ .svp .buy2-media img{ max-width:230px; } }

  /* ---------- eyebrow above the bundle ladder ---------- */
  .svp .ladder-eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 11px;
                        font-size:11.5px; font-weight:800; letter-spacing:.16em;
                        text-transform:uppercase; color:var(--green); }
  .svp .ladder-eyebrow::before, .svp .ladder-eyebrow::after{
                        content:''; flex:1 1 auto; height:1px; background:var(--line); }
  .svp .ladder-eyebrow span{ flex:0 0 auto; white-space:nowrap; }
  @media(max-width:360px){ .svp .ladder-eyebrow{ font-size:10.5px; letter-spacing:.12em; gap:7px; } }

  /* ---------- scrolling offer bar ---------- */
  .svp .mq{ background:var(--green); color:#fff; overflow:hidden; padding:11px 0; }
  .svp .mq-track{ display:flex; align-items:center; width:max-content; animation:svpMq 26s linear infinite; }
  .svp .mq-i{ font-size:13.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
  .svp .mq-i b{ font-weight:800; }
  .svp .mq-d{ font-size:11px; opacity:.72; padding:0 22px; }
  @keyframes svpMq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media(max-width:600px){ .svp .mq-i{ font-size:12px; } .svp .mq-d{ padding:0 15px; } }
  @media(prefers-reduced-motion:reduce){ .svp .mq-track{ animation:none; } }

  /* ---------- why-it-works stat band ---------- */
  .svp .st-band{ background:var(--green); color:#fff; text-align:center; }
  .svp .st-head{ margin:0 0 10px; color:#fff; font-weight:800; letter-spacing:-.01em;
                 font-size:clamp(25px,5.2vw,38px); line-height:1.16; }
  .svp .st-sub{ margin:0 auto 30px; max-width:680px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); }
  .svp .st-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  .svp .st-card{ background:#fff; border-radius:16px; padding:24px 18px; display:flex;
                 flex-direction:column; align-items:center; gap:14px; }
  .svp .st-ring{ position:relative; width:96px; height:96px; border-radius:50%; flex:0 0 auto;
                 background:conic-gradient(var(--green) calc(var(--p) * 1%), #E2E8DE 0); }
  .svp .st-ring::after{ content:''; position:absolute; inset:11px; border-radius:50%; background:#fff; }
  .svp .st-ring span{ position:absolute; inset:0; display:grid; place-items:center; z-index:1;
                      font-size:21px; font-weight:800; color:var(--green); }
  .svp .st-cap{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink); max-width:230px; }
  .svp .st-cta{ margin-top:30px; }
  /* scoped to the band so it beats the base .scrollbuy-btn rule regardless of source order */
  .svp .st-band .scrollbuy-btn{ background:var(--cream); color:var(--ink); }
  .svp .st-band .scrollbuy-btn:hover{ filter:brightness(.97); }
  @media(min-width:700px){ .svp .st-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
  @media(min-width:1000px){ .svp .st-grid{ grid-template-columns:repeat(4,1fr); } }

  /* ---------- problem → 30-day journey ---------- */
  /* Mobile first: one column, image sits straight after the headline so the promise is seen
     before the proof points. Desktop re-flows to text-left / image-right via grid areas,
     so the markup is written once. */
  .svp .jr-grid{ display:grid; grid-template-columns:1fr; gap:16px;
                 grid-template-areas:"rating" "head" "media" "body"; }
  .svp .jr-rating{ grid-area:rating; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .svp .jr-avs{ display:inline-flex; flex:0 0 auto; }
  .svp .jr-avs img{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
  .svp .jr-avs img + img{ margin-left:-11px; }
  .svp .jr-stars{ color:#F2A93B; font-size:14px; letter-spacing:1.5px; white-space:nowrap; }
  .svp .jr-rtxt{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .svp .jr-head{ grid-area:head; margin:0; font-weight:800; letter-spacing:-.015em;
                 font-size:clamp(27px,6.2vw,44px); line-height:1.12; }
  .svp .jr-media{ grid-area:media; }
  .svp .jr-media img{ width:100%; height:auto; display:block; border-radius:18px; }
  .svp .jr-body{ grid-area:body; }
  .svp .jr-body > p{ margin:0 0 18px; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
  .svp .jr-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; }
  .svp .jr-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; line-height:1.45; }
  .svp .jr-list svg{ flex:0 0 20px; width:20px; height:20px; margin-top:1px; color:var(--green); }
  .svp .jr-cta{ display:flex; flex-direction:column; gap:11px; align-items:stretch; }
  .svp .jr-cta .scrollbuy-btn{ width:100%; }
  .svp .jr-note{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
                 font-size:13px; color:var(--ink-soft); }
  .svp .jr-note svg{ flex:0 0 16px; width:16px; height:16px; color:var(--green); }
  @media(min-width:900px){
    .svp .jr-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:56px; row-gap:15px;
                   grid-template-areas:"rating media" "head media" "body media"; align-items:start; }
    .svp .jr-media{ align-self:center; }
    .svp .jr-head{ margin-top:2px; }
    /* shrink the CTA stack to the button's width so the guarantee line centres under it,
       while the stack as a whole still sits flush left in the text column */
    .svp .jr-cta{ align-items:center; align-self:flex-start; width:max-content; max-width:100%; }
    .svp .jr-cta .scrollbuy-btn{ width:auto; }
    .svp .jr-note{ justify-content:center; }
  }

  /* ---------- scroll-to-buy ---------- */
  .svp .scrollbuy{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:38px auto 4px; padding:0 18px; text-align:center; }
  .svp .scrollbuy-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:2px;
    background:var(--green,#2F7A4E); color:#fff; border:0; border-radius:100px;
    padding:16px 38px; min-height:52px; font-size:15.5px; font-weight:800; letter-spacing:.01em;
    cursor:pointer; transition:transform .15s ease, filter .15s ease; max-width:100%;
  }
  .svp .scrollbuy-btn:hover{ filter:brightness(1.08); }
  .svp .scrollbuy-btn:active{ transform:translateY(1px); }
  .svp .scrollbuy-note{ font-size:12.5px; color:var(--ink-soft,#6b7169); }
  .svp .scrollbuy--dark .scrollbuy-btn{ background:var(--lime,#A6D257); color:#12271A; }
  .svp .scrollbuy--dark .scrollbuy-note{ color:rgba(255,255,255,.66); }
  /* pulse the rung the shopper was sent to, so the jump is legible */
  @keyframes svpPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,122,78,0); } 30%{ box-shadow:0 0 0 6px rgba(47,122,78,.22); } }
  .svp .bundle.pulse{ animation:svpPulse 1.4s ease-out; }
  @media (prefers-reduced-motion:reduce){
    .svp .bundle.pulse{ animation:none; }
    .svp .scrollbuy-btn{ transition:none; }
  }

  /* ---------- mobile ---------- */
  @media(max-width:600px){
    .svp-stickybar__inner{ grid-template-columns:1fr auto; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:10px; }
    .svp-stickybar__prod img{ width:40px; height:40px; }
    .svp-stickybar__rating{ display:none; }         /* the price matters more than the stars here */
    .svp-stickybar__title{ font-size:12.5px; margin-top:0; }
    .svp-stickybar__price .sb-now{ font-size:15px; }
    .svp-stickybar__price .sb-was{ font-size:11.5px; }
    .svp-stickybar__price .sb-save{ display:none; }  /* keeps the row to one line on narrow phones */
    .svp-stickybar__cta{ padding:13px 18px; font-size:13.5px; min-height:46px; }
    .svp-stickybar__cta .sb-cta-price{ display:none; } /* price already sits beside the rung name */
    .svp .scrollbuy{ margin-top:30px; padding:0 16px; }
    .svp .scrollbuy-btn{ width:100%; padding:16px 22px; font-size:15px; }
    .svp .buy2{ max-width:none; }
    .svp .buy2 .buy-cta{ min-height:56px; font-size:16px; }
  }
  @media(max-width:380px){
    .svp-stickybar__prod img{ display:none; }
    .svp-stickybar__cta{ padding:12px 14px; font-size:13px; }
  }

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
[role="button"], button { cursor: pointer; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .st-band { background: var(--green); color: rgb(255, 255, 255); text-align: center; }
.svp .st-head { margin: 0px 0px 10px; color: rgb(255, 255, 255); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(25px, 5.2vw, 38px); line-height: 1.16; }
.svp .st-sub { margin: 0px auto 30px; max-width: 680px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.svp .st-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.svp .st-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.svp .st-ring { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--green) calc(var(--p) * 1%), #E2E8DE 0); }
.svp .st-ring span { position: absolute; inset: 0px; display: grid; place-items: center; z-index: 1; font-size: 21px; font-weight: 800; color: var(--green); }
.svp .st-cap { margin: 0px; font-size: 14.5px; line-height: 1.45; color: var(--ink); max-width: 230px; }
.svp .st-cta { margin-top: 30px; }
.svp .st-band .scrollbuy-btn { background: var(--cream); color: var(--ink); }
.svp .st-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 700px) {
  .svp .st-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.svp .st-grid { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1000px) {
  .svp .st-grid { grid-template-columns: repeat(4, 1fr); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.svp .scrollbuy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--green,#2F7A4E); color: rgb(255, 255, 255); border: 0px; border-radius: 100px; padding: 16px 38px; min-height: 52px; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s, filter 0.15s; max-width: 100%; }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
.svp .scrollbuy-btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .svp .bundle.pulse { animation: auto ease 0s 1 normal none running none; }
  .svp .scrollbuy-btn { transition: none; }
}
.svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
@media (max-width: 600px) {
  .svp-stickybar__inner { grid-template-columns: 1fr auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; }
  .svp-stickybar__prod img { width: 40px; height: 40px; }
  .svp-stickybar__rating { display: none; }
  .svp-stickybar__title { font-size: 12.5px; margin-top: 0px; }
  .svp-stickybar__price .sb-now { font-size: 15px; }
  .svp-stickybar__price .sb-was { font-size: 11.5px; }
  .svp-stickybar__price .sb-save { display: none; }
  .svp-stickybar__cta { padding: 13px 18px; font-size: 13.5px; min-height: 46px; }
  .svp-stickybar__cta .sb-cta-price { display: none; }
  .svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
  .svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
  .svp .buy2 { max-width: none; }
  .svp .buy2 .buy-cta { min-height: 56px; font-size: 16px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
[role="button"], button { cursor: pointer; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp img { display: block; max-width: 100%; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
.svp .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .stars-frac { position: relative; display: inline-block; line-height: 0; }
.svp .stars-frac .sf-row { display: inline-flex; gap: 2px; white-space: nowrap; }
.svp .stars-frac .sf-fill { position: absolute; top: 0px; left: 0px; overflow: hidden; }
.svp .stars-frac .sf-bg svg { color: rgba(140, 140, 140, 0.34); }
.svp .stars-frac .sf-fill svg { color: rgb(255, 176, 32); }
.svp .stars-frac svg { width: 15px; height: 15px; flex: 0 0 auto; }
.svp .stars { display: inline-flex; gap: 2px; color: var(--lime); }
.svp .stars svg { width: 18px; height: 18px; }
.svp section.block { padding: 40px 0px; }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .eyebrow.block-eb { display: block; margin-bottom: 10px; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .rev-slider-wrap { position: relative; }
.svp .reviews-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 12px; scrollbar-width: none; }
.svp .rev { flex: 0 0 84%; scroll-snap-align: start; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--sh-sm); overflow: hidden; }
.svp .rev-photo { margin: -26px -26px 18px; }
.svp .rev-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; display: block; }
.svp .rev { flex-basis: calc(33.3333% - 13.3333px); }
@media (min-width: 760px) {
  .svp .rev { flex-basis: calc(33.3333% - 13.3333px); }
}
.svp .rev-arrow { position: absolute; top: 46%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgb(255, 255, 255); border: 1px solid var(--line); display: none; place-items: center; box-shadow: var(--sh-md); z-index: 4; color: var(--ink); }
.svp .rev-arrow { display: grid; }
@media (min-width: 760px) {
  .svp .rev-arrow { display: grid; }
}
.svp .rev-prev { left: -16px; }
.svp .rev-next { right: -16px; }
.svp .rev-arrow svg { width: 20px; height: 20px; }
.svp .rev .stars svg { width: 16px; height: 16px; }
.svp .rev-q { font-size: 15px; line-height: 1.6; margin: 12px 0px 16px; }
.svp .rev-who { display: flex; align-items: center; gap: 11px; }
.svp .rev-av { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-weight: 700; color: var(--green-deep); overflow: hidden; }
.svp .rev-name { font-size: 14px; font-weight: 700; }
.svp .rev-vf { font-size: 11.5px; color: var(--green); font-weight: 600; }
.svp .revw-vf { font-size: 11px; }
.svp .rev .rev-who { align-items: center; }
.svp .rev-vf { color: rgb(26, 138, 77); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.svp .rev-vf .vf-ic { width: 13px; height: 13px; flex: 0 0 auto; }
.svp .revw-vf { background: rgb(232, 245, 238); border-radius: 999px; padding: 3px 9px; font-size: 11px; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
[role="button"], button { cursor: pointer; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp ol, .svp ul { list-style: none; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
.svp .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.cream { background: var(--cream); }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .head p { margin-top: 12px; font-size: 16.5px; color: var(--ink-soft); }
.svp .eyebrow.block-eb { display: block; margin-bottom: 10px; }
.svp .timeline { position: relative; max-width: 680px; margin: 0px auto; padding-left: 52px; display: flex; flex-direction: column; gap: 24px; }
.svp .tl-row { position: relative; }
.svp .tl-node { position: absolute; left: -38px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: rgb(255, 255, 255); font-size: 13px; font-weight: 800; line-height: 28px; text-align: center; box-shadow: rgb(255, 255, 255) 0px 0px 0px 5px; z-index: 2; }
.svp .tl-list { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 6px; }
.svp .tl-list li { position: relative; padding-left: 19px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.svp .tl-card { display: flex; align-items: center; gap: 20px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-sm); padding: 16px 20px; }
.svp .tl-body { flex: 1 1 0%; min-width: 0px; }
.svp .tl-when { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(255, 255, 255); background: var(--green); padding: 5px 12px; border-radius: 100px; margin-bottom: 8px; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .timeline { padding-left: 40px; gap: 18px; }
.svp .tl-card { flex-direction: column; align-items: stretch; gap: 0px; padding: 0px; overflow: hidden; }
.svp .tl-body { padding: 15px 16px 17px; }
.svp .tl-node { left: -30px; width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
.svp .tl-list li { font-size: 13.5px; }
.svp .tl-body h3 { font-size: 17px; }
@media (max-width: 520px) {
  .svp .timeline { padding-left: 40px; gap: 18px; }
  .svp .timeline::before { top: 0px; bottom: 0px; }
  .svp .tl-card { flex-direction: column; align-items: stretch; gap: 0px; padding: 0px; overflow: hidden; }
  .svp .tl-media { width: 100%; }
  .svp .tl-img { width: 100%; border-radius: 0px; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 45%; }
  .svp .tl-body { padding: 15px 16px 17px; }
  .svp .tl-node { left: -30px; width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
  .svp .tl-list li { font-size: 13.5px; }
  .svp .tl-body h3 { font-size: 17px; }
  .svp .tl-body p { font-size: 13.5px; }
}
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.svp .scrollbuy { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 38px auto 4px; padding: 0px 18px; text-align: center; }
.svp .scrollbuy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--green,#2F7A4E); color: rgb(255, 255, 255); border: 0px; border-radius: 100px; padding: 16px 38px; min-height: 52px; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s, filter 0.15s; max-width: 100%; }
.svp .scrollbuy-note { font-size: 12.5px; color: var(--ink-soft,#6b7169); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
.svp .scrollbuy-btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .svp .bundle.pulse { animation: auto ease 0s 1 normal none running none; }
  .svp .scrollbuy-btn { transition: none; }
}
.svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
.svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
@media (max-width: 600px) {
  .svp-stickybar__inner { grid-template-columns: 1fr auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; }
  .svp-stickybar__prod img { width: 40px; height: 40px; }
  .svp-stickybar__rating { display: none; }
  .svp-stickybar__title { font-size: 12.5px; margin-top: 0px; }
  .svp-stickybar__price .sb-now { font-size: 15px; }
  .svp-stickybar__price .sb-was { font-size: 11.5px; }
  .svp-stickybar__price .sb-save { display: none; }
  .svp-stickybar__cta { padding: 13px 18px; font-size: 13.5px; min-height: 46px; }
  .svp-stickybar__cta .sb-cta-price { display: none; }
  .svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
  .svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
  .svp .buy2 { max-width: none; }
  .svp .buy2 .buy-cta { min-height: 56px; font-size: 16px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
[role="button"], button { cursor: pointer; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .vcar-sec { padding: 48px 0px 8px; }
.svp .vcar { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: thin; }
.svp .vcar-item { position: relative; flex: 0 0 auto; width: 208px; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; background: var(--paper-2); box-shadow: var(--sh-sm); cursor: pointer; }
.svp .vcar-item { width: 236px; }
@media (min-width: 760px) {
  .svp .vcar-item { width: 236px; }
}
.svp .vcar-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.svp .vcar-grad { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(10, 20, 14, 0.45), transparent 42%); pointer-events: none; }
.svp .vcar-sound { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; z-index: 7; transition: transform 0.15s; }
.svp .vcar-sound svg { width: 15px; height: 15px; fill: rgb(255, 255, 255); }
.svp section.block { padding: 40px 0px; }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .head p { margin-top: 12px; font-size: 16.5px; color: var(--ink-soft); }
.svp .vid-fb { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: rgb(24, 119, 242); margin-bottom: 10px; }
.svp .vid-fb-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp img { display: block; max-width: 100%; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
.svp .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp .why-works { background: rgb(255, 255, 255); color: var(--ink); }
.svp .why-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; max-width: 1120px; margin: 0px auto; }
.svp .why-grid { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
@media (min-width: 880px) {
  .svp .why-grid { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
}
.svp .ww-head { margin: 0px 0px 38px; }
.svp .why-works .eyebrow { color: var(--green); }
.svp .ww-head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.018em; margin: 8px 0px 0px; color: var(--ink); }
.svp .ww-head h2 em { font-style: italic; color: var(--green); }
.svp .why-text .ww-sub { color: var(--ink-soft); margin-bottom: 28px; font-size: 15.5px; line-height: 1.65; max-width: 54ch; }
.svp .ww-list { display: grid; gap: 14px; }
.svp .ww-item { display: flex; gap: 15px; align-items: flex-start; background: var(--dark); color: rgb(255, 255, 255); border-radius: var(--r); padding: 18px 20px; }
.svp .ww-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r); background: var(--lime-soft); display: grid; place-items: center; color: var(--lime); }
.svp .ww-ic svg { width: 23px; height: 23px; }
.svp .ww-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; color: rgb(255, 255, 255); }
.svp .ww-item p { font-size: 13.5px; color: rgba(255, 255, 255, 0.66); line-height: 1.55; }
.svp .ww-stats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 30px; }
.svp .ww-stat b { display: block; font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.02em; }
.svp .ww-stat span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.svp .why-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh-md); background: var(--paper-2); border: 1px solid var(--line); }
.svp .why-img { order: -1; }
@media (max-width: 879px) {
  .svp .why-img { order: -1; }
}
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
b, strong { font-weight: bolder; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp img { display: block; max-width: 100%; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .benefits { background: var(--green); color: rgb(255, 255, 255); }
.svp .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; padding: 30px 0px; }
.svp .benefits-grid { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 760px) {
  .svp .benefits-grid { grid-template-columns: repeat(4, 1fr); }
}
.svp .benefit { text-align: center; }
.svp .benefit svg, .svp .benefit .ben-ic { width: 34px; height: 34px; margin: 0px auto 10px; color: var(--lime); object-fit: contain; }
.svp .benefit b { display: block; font-size: 15px; }
.svp .benefit span { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.cream { background: var(--cream); }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0px auto; }
.svp .compare { grid-template-columns: 1fr; }
@media (max-width: 680px) {
  .svp .compare { grid-template-columns: 1fr; }
}
.svp .compare-col { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-sm); }
.svp .compare-col.win { border: 2px solid var(--green); }
.svp .compare-col h3 { font-family: var(--serif); text-align: center; font-size: 20px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.svp .compare-col.win h3 { color: var(--green); }
.svp .crow { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 13px; font-size: 14.5px; }
.svp .crow svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp img { display: block; max-width: 100%; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
.svp .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.cream { background: var(--cream); }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .head p { margin-top: 12px; font-size: 16.5px; color: var(--ink-soft); }
.svp .eyebrow.block-eb { display: block; margin-bottom: 10px; }
.svp .ingr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svp .ingr-grid { grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin: 0px auto; }
@media (min-width: 760px) {
  .svp .ingr-grid { grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin: 0px auto; }
}
.svp .ingr-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 24px; text-align: center; box-shadow: var(--sh-sm); }
.svp .ingr-ic { width: 100%; aspect-ratio: 1 / 1; margin: 0px 0px 16px; border-radius: var(--r); background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.svp .ingr-ic img { width: 100%; height: 100%; object-fit: cover; }
.svp .ingr-card h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.svp .ingr-dose { display: inline-block; margin: 5px 0px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--green-deep); background: var(--chip-bg); padding: 3px 10px; border-radius: 100px; }
.svp .ingr-card p { font-size: 14px; color: var(--ink-soft); }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
.svp .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.dark { background: var(--dark); color: rgb(255, 255, 255); }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .guar { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; max-width: 920px; margin: 0px auto; }
.svp .guar { grid-template-columns: auto 1fr; gap: 48px; }
@media (min-width: 760px) {
  .svp .guar { grid-template-columns: auto 1fr; gap: 48px; }
}
.svp .guar-seal { width: 120px; height: 120px; border-radius: 50%; background: var(--seal-bg); display: grid; place-items: center; color: var(--lime); margin: 0px auto; }
.svp .guar-seal svg { width: 56px; height: 56px; }
.svp .guar h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; }
.svp .guar p { color: rgba(255, 255, 255, 0.72); max-width: 48ch; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp ol, .svp ul { list-style: none; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.cream { background: var(--cream); }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .facts-grid { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: 1000px; margin: 0px auto; }
.svp .facts-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
@media (min-width: 820px) {
  .svp .facts-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.svp .facts-panel { background: rgb(255, 255, 255); border: 1px solid var(--ink); border-radius: var(--r); padding: 22px; }
.svp .facts-panel h4 { font-size: 24px; font-weight: 800; border-bottom: 8px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; }
.svp .facts-panel .fserv { font-size: 13px; border-bottom: 3px solid var(--ink); padding: 4px 0px; display: flex; justify-content: space-between; font-weight: 700; }
.svp .facts-panel .frow { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0px; border-bottom: 1px solid var(--line); }
.svp .facts-panel .frow b { font-weight: 700; }
.svp .facts-panel .ffoot { font-size: 11px; color: var(--ink-soft); margin-top: 8px; }
.svp .howto h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; margin-bottom: 18px; }
.svp .howto ol { display: grid; gap: 4px; }
.svp .howto li { display: flex; align-items: center; gap: 14px; padding: 14px 0px; border-bottom: 1px solid var(--line); font-size: 16px; }
.svp .howto li:first-child { border-top: 1px solid var(--line); }
.svp .ho-num { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--green); color: rgb(255, 255, 255); font-weight: 800; display: grid; place-items: center; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sticky{position:sticky}.block{display:block}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');.svp{
  --green: #2F7A4E;
  --green-deep: #235C3B;
  --lime: #A6D257;
  --cta: #D98A3C;
  --cta-hover: #C2772E;
  --cream: #F4F7EF;
  --paper: #ffffff;
  --paper-2: #EAF0E4;
  --ink: #1B2A21;
  --ink-soft: #5C6B60;
  --line: #E1E8DB;
  --dark: #16241B;
  --chip-bg: rgba(166, 210, 87, 0.32);
  --seal-bg: rgba(166, 210, 87, 0.18);
  --scrim: rgba(22, 36, 27, 0.4);
  --announce-bg: #2F7A4E;
  --announce-ink: #ffffff;
  --lime-soft: rgba(166, 210, 87, 0.16);
  --brand-glow: rgba(47, 122, 78, 0.45);
  --cta-ink: #ffffff;
  --cta-soft: rgba(217, 138, 60, 0.07);
  --cta-glow: rgba(217, 138, 60, 0.45);--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-w: 600;
  --serif-ls: -.015em;--sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-md: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);
  --r: 5px;
  font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.svp *{ box-sizing:border-box; margin:0; padding:0; }
.svp img{ display:block; max-width:100%; }
.svp button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.svp a{ color:inherit; text-decoration:none; }
.svp ol,.svp ul{ list-style:none; }
.svp .serif{ font-family:var(--serif); }
.svp .shell{ max-width:1180px; margin:0 auto; padding:0 16px; }
.svp .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* announce + nav */
.svp .announce{ background:var(--announce-bg); color:var(--announce-ink); padding:9px 0; overflow:hidden; }
.svp .announce-track{ display:flex; width:max-content; animation:ann-marquee 60s linear infinite; }
.svp .announce-track span{ white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:0 20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.svp .announce .ann-ic{ width:12px; height:12px; flex:none; }
.svp .announce:hover .announce-track{ animation-play-state:paused; }
@keyframes ann-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .svp .announce-track{ animation:none; } }
@media(max-width:560px){ .svp .announce{ padding:8px 0; } .svp .announce-track span{ font-size:10.5px; padding:0 13px; letter-spacing:0; } }
@media(max-width:360px){ .svp .announce-track span{ font-size:9.5px; padding:0 11px; } }
.svp .bar{ border-bottom:1px solid var(--line); background:var(--cream); }
.svp .bar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.svp .nav-left{ justify-self:start; } .svp .nav-right{ justify-self:end; }
.svp .icon-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .15s; }
.svp .icon-btn:hover{ background:var(--cream); } .svp .icon-btn svg{ width:21px; height:21px; }
.svp .brand{ justify-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.svp .brand-logo{ display:block; height:26px; width:auto; }
.svp .foot .brand-logo{ height:30px; margin:0 auto; }
.svp .menu-head .brand-logo{ height:24px; }
.svp .lk-word{ font-family:var(--serif); font-weight:var(--serif-w); font-size:25px; letter-spacing:-.01em; color:var(--green-deep); }
.svp .lk-sub{ font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.svp .menu-scrim{ position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; }
.svp .menu-scrim.show{ opacity:1; pointer-events:auto; }
.svp .menu-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:70; transform:translateX(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-md); }
.svp .menu-drawer.show{ transform:translateX(0); }
.svp .menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.svp .menu-links{ display:flex; flex-direction:column; padding:8px 20px; }
.svp .menu-links a{ padding:15px 2px; font-size:16.5px; font-weight:600; border-bottom:1px solid var(--line); }

/* hero */
.svp .hero{ padding:18px 0 8px; background:var(--cream); }
/* hero breathes wider than the 1180px reading width used by the text sections below */
@media(min-width:900px){ .svp .hero .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); } }
/* Mobile: gallery first, then the heading, then the offer. Desktop: the heading sits at the top of
   the right-hand buy column while the gallery keeps the left column across both rows. */
.svp .hero-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  grid-template-areas:"media" "head" "buy";
}
.svp .hero-head{ grid-area:head; }
.svp .gallery-sticky{ grid-area:media; }
.svp .buy{ grid-area:buy; }
/* rating sits above the title, so the rating carries the small gap and the title carries the gap
   to whatever follows it (gallery on mobile, subtitle on desktop). */
.svp .hero-head .rating-row{ margin-bottom:8px; }
.svp .hero-head .title{ margin-bottom:0; }
@media(min-width:900px){
  .svp .hero-grid{
    grid-template-columns:1fr 1fr; gap:0 48px; align-items:start;
    grid-template-areas:"media head" "media buy";
    /* The gallery spans both rows, so without this the row algorithm hands spare height to row 1
       and drops a phantom gap between the rating and the subtitle. Row 1 = exactly the heading. */
    grid-template-rows:min-content 1fr;
  }
  .svp .hero-head{ margin-bottom:0; }
  .svp .hero-head .title{ margin-bottom:10px; }
}
.svp .gallery-sticky{ position:relative; }
@media(min-width:900px){ .svp .gallery-sticky{ position:sticky; top:20px; } }
.svp .g-main{ position:relative; }
.svp .g-hero{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
/* On phones a square hero eats an entire screen before the offer is reachable. Cap it at 60vh and
   let object-fit keep the bottle centred rather than letterboxing. */
@media(max-width:899px){
  /* max-height, not height: on a narrow phone the square is already under 60vh and forcing a
     height would make the gallery TALLER, not shorter. This only bites on wide/short viewports. */
  .svp .g-hero{ max-height:60vh; object-position:center 45%; }
  .svp .g-thumbs{ grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .svp .g-thumbs .t img{ aspect-ratio:1/1; }
}
.svp .g-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:transparent; border:none; color:#fff; display:grid; place-items:center; z-index:3; transition:background .15s, color .15s; }
.svp .g-arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.svp .g-arrow:hover{ background:rgba(255,255,255,.92); color:#1B2A21; }
.svp .g-arrow:hover svg{ filter:none; }
.svp .g-prev{ left:12px; } .svp .g-next{ right:12px; }
.svp .g-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.svp .g-thumbs .t{ border-radius:var(--r); overflow:hidden; outline:2px solid transparent; outline-offset:2px; cursor:pointer; transition:outline-color .15s; }
.svp .g-thumbs .t.active{ outline-color:var(--green); }
.svp .g-thumbs .t img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream); }
.svp .gallery-testi{ margin-top:16px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.svp .gt-stars{ display:flex; gap:2px; margin-bottom:8px; }
.svp .gt-stars svg{ width:15px; height:15px; color:#FFB020; }
.svp .gt-quote{ font-size:14px; line-height:1.55; color:#1B2A21; margin:0 0 11px; }
.svp .gt-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.svp .gt-seal{ width:16px; height:16px; color:#00AA5D; flex:none; }
.svp .gt-verified{ font-size:12.5px; font-weight:700; color:#1B2A21; }
.svp .gt-name{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:767px){ .svp .gallery-testi{ display:none; } }

.svp .stars-frac{ position:relative; display:inline-block; line-height:0; }
.svp .stars-frac .sf-row{ display:inline-flex; gap:2px; white-space:nowrap; }
.svp .stars-frac .sf-fill{ position:absolute; top:0; left:0; overflow:hidden; }
.svp .stars-frac .sf-bg svg{ color:rgba(140,140,140,.34); }
.svp .stars-frac .sf-fill svg{ color:#FFB020; }
.svp .stars-frac svg{ width:15px; height:15px; flex:none; }
.svp .rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.svp .stars{ display:inline-flex; gap:2px; color:var(--lime); }
.svp .stars svg{ width:18px; height:18px; }
.svp .rating-row .count{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.svp h1.title{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(23px,2.7vw,32px); line-height:1.12; letter-spacing:-.02em; margin-bottom:6px; }
.svp .subtitle{ font-size:16px; color:var(--ink-soft); max-width:none; margin-bottom:18px; }
.svp .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; margin-bottom:13px; }
.svp .hero-trust span{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.svp .hero-trust svg{ width:18px; height:18px; color:var(--green); flex:none; }
/* Inverted chip icons: pale ground, dark green mark — same palette as the SAVE chips, instead of
   near-black discs. The icon art is flat lime on transparent, so it is drawn as a mask and takes
   currentColor rather than being recoloured with a fragile filter chain. */
.svp .hero-trust .ht-cir{ width:32px; height:32px; border-radius:50%; background:var(--chip-bg); color:var(--green-deep); display:inline-grid; place-items:center; flex:none; }
.svp .hero-trust .ht-cir svg{ width:17px; height:17px; color:var(--green-deep); }
.svp .hero-trust .ht-cir .ht-ic{
  width:19px; height:19px; flex:none; display:block; background-color:currentColor;
  -webkit-mask:var(--ht-img) center/contain no-repeat;
          mask:var(--ht-img) center/contain no-repeat;
}

/* bundle selector */
.svp .sel-label{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:4px 0 11px; }
.svp .sel-label::before, .svp .sel-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.svp .bundles{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.svp .bundle{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.svp .bundle:hover{ border-color:var(--green); }
.svp .bundle.sel{ border-color:var(--green); border-width:2px; box-shadow:0 8px 22px -10px var(--brand-glow); background:var(--cream); }
.svp .b-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; align-self:start; }
.svp .bundle.sel .b-radio{ border-color:var(--green); }
.svp .bundle.sel .b-radio::after{ content:''; width:11px; height:11px; border-radius:50%; background:var(--green); }
.svp .b-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.svp .b-row1, .svp .b-row2{ display:flex; align-items:center; gap:9px; }
/* Narrow phones: keep the rung name on one line and let the save badge drop beneath it,
   rather than letting the name wrap and strand the badge between its two lines.
   No media query needed — the wrap only triggers when the row genuinely runs out of room. */
.svp .b-row1{ flex-wrap:wrap; row-gap:4px; }
.svp .b-name{ white-space:nowrap; }
.svp .b-name{ font-weight:800; font-size:15.5px; } .svp .b-sub{ font-size:12.5px; color:var(--ink-soft); }
/* These three are swapped between one-time and refill copy by JS, so they are always in the
   DOM — collapse them when the active mode has nothing to put in them. */
.svp .b-save:empty, .svp .b-sub:empty, .svp .b-was:empty{ display:none; }
.svp .b-save{ font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-deep); background:var(--chip-bg); padding:2px 8px; border-radius:100px; white-space:nowrap; }
.svp .b-now{ font-size:16.5px; font-weight:800; white-space:nowrap; } .svp .b-was{ font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; white-space:nowrap; }
/* price is its own grid column so it centres against the card, not against the first text row */
.svp .b-price{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; align-self:start; }
/* one shared line-box height for the rung name, the radio and the live price, so all three
   sit on the same line however their font sizes differ */
.svp .b-row1{ min-height:22px; }
.svp .b-name, .svp .b-now{ line-height:22px; }
.svp .b-radio{ margin-top:0; }
.svp .b-row2:not(:has(.b-sub:not(:empty))){ display:none; }
.svp .b-banner{ position:absolute; top:-10px; right:14px; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 12px; border-radius:100px; }

.svp .buy-cta{ width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:14px; font-size:1.05rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 26px -10px var(--cta-glow); transition:background .15s, transform .12s; }
.svp .buy-cta:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.svp .refill-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:7px; }
.svp .svp-notice{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; background:#ffffff; border:1px solid var(--line); border-radius:9px; }
.svp .svp-notice-ic{ width:18px; height:18px; flex:none; color:#EAB308; margin-top:1px; }
.svp .svp-notice-txt strong{ display:block; font-size:13px; font-weight:800; color:#1B2A21; }
.svp .svp-notice-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; }
.svp .svp-pay{ text-align:center; margin-top:11px; }
.svp .svp-pay img{ display:block; margin:0 auto; width:100%; max-width:300px; height:auto; opacity:.85; }
.svp .svp-guarantee{ display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
.svp .svp-guar-badge{ width:60px; height:auto; flex:none; }
.svp .svp-guar-txt strong{ display:block; font-size:14px; font-weight:800; color:var(--green); }
.svp .svp-guar-txt span{ display:block; font-size:12.5px; color:#5C6B60; line-height:1.4; margin-top:2px; }
.svp .assure{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.svp .assure span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); } .svp .assure svg{ width:16px; height:16px; color:var(--green); }

/* video carousel */
.svp .vcar-sec{ padding:48px 0 8px; }
.svp .vcar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; scrollbar-width:thin; }
.svp .vcar::-webkit-scrollbar{ height:6px; } .svp .vcar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.svp .vcar-item{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; scroll-snap-align:start; background:var(--paper-2); box-shadow:var(--sh-sm); cursor:pointer; }
@media(min-width:760px){ .svp .vcar-item{ width:236px; } }
.svp .vcar-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.svp .vcar-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,14,.45), transparent 42%); pointer-events:none; }
.svp .vcar-cap{ position:absolute; left:12px; right:46px; bottom:12px; z-index:6; color:#fff; font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.svp .vcar-sound{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:7; transition:transform .15s; }
.svp .vcar-sound:hover{ transform:scale(1.08); } .svp .vcar-sound svg{ width:15px; height:15px; fill:#fff; }

/* section scaffold */
.svp section.block{ padding:40px 0; }
/* ingredient plate: photo behind, real HTML type on the left (no scrim — the plate's left side is #030303) */
.svp section.block.ingr-visual{ position:relative; padding:0; background:#000; overflow:hidden; }
.svp .ingr-visual .iv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.svp .ingr-visual .iv-shell{ position:relative; z-index:2; }
.svp .iv-text{ padding:96px 0; max-width:44%; color:#fff; }
.svp .iv-text .eyebrow{ color:var(--lime); }
.svp .iv-text h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:var(--serif-ls); margin:8px 0 0; color:#fff; }
.svp .iv-latin{ font-style:italic; font-size:15px; color:rgba(255,255,255,.55); margin-top:6px; }
.svp .iv-spec{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--lime); }
.svp .iv-body{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.svp .iv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:30px; }
.svp .iv-fact{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.svp .iv-fic{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.svp .iv-fic svg{ width:18px; height:18px; }
@media(max-width:879px){
  /* stays a background: the plate is subject-right, so a narrow cover crop lands on the
     roots — text needs a scrim here, unlike desktop where it sits on true black */
  .svp .ingr-visual .iv-img{ object-position:right center; }
  .svp .ingr-visual::before{ content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.80) 100%); }
  .svp .iv-text{ max-width:none; padding:64px 0; }
  .svp .iv-facts{ grid-template-columns:1fr; gap:13px; }
}
.svp section.block.cream{ background:var(--cream); } .svp section.block.dark{ background:var(--dark); color:#fff; }
.svp .head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.svp .head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.015em; }
.svp .head p{ margin-top:12px; font-size:16.5px; color:var(--ink-soft); }
.svp section.block.dark .head p{ color:rgba(255,255,255,.72); }
.svp .eyebrow.block-eb{ display:block; margin-bottom:10px; }

/* trust-benefits bar */
.svp .benefits{ background:var(--green); color:#fff; }
.svp .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:30px 0; }
@media(min-width:760px){ .svp .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.svp .benefit{ text-align:center; }
.svp .benefit svg, .svp .benefit .ben-ic{ width:34px; height:34px; margin:0 auto 10px; color:var(--lime); object-fit:contain; }
.svp .benefit b{ display:block; font-size:15px; } .svp .benefit span{ font-size:12.5px; color:rgba(255,255,255,.70); }

/* why active */
.svp .why-works{ background:#fff; color:var(--ink); }
.svp .why-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; max-width:1120px; margin:0 auto; }
@media(min-width:880px){ .svp .why-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.svp .ww-head{ margin:0 0 38px; }
.svp .why-works .eyebrow{ color:var(--green); }
.svp .ww-head h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.018em; margin:8px 0 0; color:var(--ink); }
.svp .ww-head h2 em{ font-style:italic; color:var(--green); }
.svp .why-text .ww-sub{ color:var(--ink-soft); margin-bottom:28px; font-size:15.5px; line-height:1.65; max-width:54ch; }
.svp .ww-list{ display:grid; gap:14px; }
.svp .ww-item{ display:flex; gap:15px; align-items:flex-start; background:var(--dark); color:#fff; border-radius:var(--r); padding:18px 20px; }
.svp .ww-ic{ flex:none; width:44px; height:44px; border-radius:var(--r); background:var(--lime-soft); display:grid; place-items:center; color:var(--lime); }
.svp .ww-ic svg{ width:23px; height:23px; }
.svp .ww-item h3{ font-size:16px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em; color:#fff; }
.svp .ww-item p{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.55; }
.svp .ww-stats{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; }
.svp .ww-stat b{ display:block; font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(30px,3.4vw,42px); line-height:1; letter-spacing:-.02em; }
.svp .ww-stat span{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }

/* ── contrast layout: the image IS the argument, so it is shown, not scrimmed ── */
.svp .why-works.ww-contrast{ background:var(--dark); color:#fff; }
.svp .why-works.ww-contrast .eyebrow{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-head h2{ color:#fff; }
.svp .why-works.ww-contrast .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-sub{ color:rgba(255,255,255,.75); max-width:68ch; }
.svp .why-works.ww-contrast .why-img{ display:none; }
.svp .why-works.ww-contrast .ww-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.svp .why-works.ww-contrast .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-contrast .ww-stat span{ color:rgba(255,255,255,.7); }
.svp .ww-caps{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:30px 0 44px; }
.svp .ww-cap{ display:flex; gap:18px; align-items:center; }
.svp .ww-cap-img{ flex:none; width:104px; height:104px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.16); }
.svp .ww-cap.good .ww-cap-img{ border-color:var(--lime); }
.svp .ww-cap b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.svp .ww-cap.bad b{ color:rgba(255,255,255,.42); }
.svp .ww-cap.good b{ color:var(--lime); }
.svp .ww-cap p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); }
@media(max-width:879px){ .svp .ww-caps{ grid-template-columns:1fr; gap:20px; } .svp .ww-cap-img{ width:84px; height:84px; } }
/* contrast layout: full width, single column (no image track), cards + caps 2-up */
@media(min-width:880px){
  .svp .why-works.ww-contrast > .shell{ max-width:1600px; padding:0 clamp(16px,4vw,48px); }
  .svp .why-works.ww-contrast .why-grid{ grid-template-columns:1fr; max-width:none; gap:0; }
  .svp .why-works.ww-contrast .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-contrast .ww-caps{ grid-template-columns:1fr 1fr; gap:26px 56px; }
}


/* ── full-bleed background variant ── */
.svp .why-works.ww-bg{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.svp .why-works.ww-bg .ww-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* text now spans full width, so the scrim must cover edge to edge: photo becomes atmosphere, not subject */
.svp .why-works.ww-bg .ww-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.93) 100%); }
.svp .why-works.ww-bg > .shell{ position:relative; z-index:2; }
.svp .why-works.ww-bg .eyebrow{ color:var(--lime); }
.svp .why-works.ww-bg .ww-head h2{ color:#fff; }
.svp .why-works.ww-bg .ww-head h2 em{ color:var(--lime); }
.svp .why-works.ww-bg .ww-sub{ color:rgba(255,255,255,.75); }
.svp .why-works.ww-bg .ww-item{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.svp .why-works.ww-bg .ww-stat b{ color:var(--lime); }
.svp .why-works.ww-bg .ww-stat span{ color:rgba(255,255,255,.7); }
@media(min-width:880px){
  .svp .why-works.ww-bg .why-img{ display:none; }
  .svp .why-works.ww-bg .why-grid{ grid-template-columns:1fr; }   /* no image column — go full width */
  .svp .why-works.ww-bg .ww-list{ grid-template-columns:1fr 1fr; gap:16px; }
  .svp .why-works.ww-bg .ww-sub{ max-width:62ch; }
}
@media(max-width:879px){
  .svp .why-works.ww-bg .ww-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 60%); }
  .svp .why-works.ww-bg .why-img{ display:none; }
}

.svp .why-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-md); background:var(--paper-2); border:1px solid var(--line); }
@media(max-width:879px){ .svp .why-img{ order:-1; } }
.svp .vid-fb{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1877F2; margin-bottom:10px; }
.svp .vid-fb-ic{ width:20px; height:20px; flex:none; }

/* ingredient cards */
.svp .ingr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:760px){ .svp .ingr-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; margin:0 auto; } }
.svp .ingr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 24px; text-align:center; box-shadow:var(--sh-sm); }
.svp .ingr-ic{ width:100%; aspect-ratio:1/1; margin:0 0 16px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.svp .ingr-ic img{ width:100%; height:100%; object-fit:cover; } .svp .ingr-ic .lt{ font-family:var(--serif); font-size:44px; color:var(--green); }
.svp .ingr-card h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; }
.svp .ingr-dose{ display:inline-block; margin:5px 0 8px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--green-deep); background:var(--chip-bg); padding:3px 10px; border-radius:100px; }
.svp .ingr-card p{ font-size:14px; color:var(--ink-soft); }

/* timeline */
.svp .timeline{ position:relative; max-width:680px; margin:0 auto; padding-left:52px; display:flex; flex-direction:column; gap:24px; }
.svp .timeline::before{ content:""; position:absolute; left:26px; top:92px; bottom:92px; width:2px; background:var(--line); z-index:0; }
.svp .tl-row{ position:relative; }
/* Numbered node: the stage order is information, so show it rather than a decorative dot. */
.svp .tl-node{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; line-height:28px; text-align:center; box-shadow:0 0 0 5px #fff; z-index:2; }
.svp .tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.svp .tl-list li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.svp .tl-list li::before{ content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border-radius:50%; border:2px solid var(--green); }
.svp .tl-card{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; }
.svp .tl-media{ flex:none; width:160px; }
.svp .tl-img{ display:block; width:100%; height:auto; border-radius:10px; }
.svp .tl-body{ flex:1; min-width:0; }
.svp .tl-when{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; border-radius:100px; margin-bottom:8px; }
/* horizontal timeline (opt-in via timeline_layout) */
.svp .timeline.tl-h{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 22px; max-width:1000px; padding-left:0; }
.svp .timeline.tl-h::before{ left:14%; right:14%; top:33px; bottom:auto; width:auto; height:2px; }
.svp .tl-h .tl-row{ z-index:1; }
.svp .tl-h .tl-node{ display:none; }
.svp .tl-h .tl-card{ flex-direction:column; align-items:center; text-align:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:0; }
.svp .tl-h .tl-disc{ width:66px; height:66px; border-radius:50%; background:var(--green); color:var(--lime); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px var(--cream); }
.svp .tl-h .tl-disc svg{ width:28px; height:28px; }
.svp .tl-h .tl-body{ text-align:center; }
@media(max-width:520px){ .svp .timeline.tl-h::before{ display:none; } }
.svp .tl-body h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:19px; margin-bottom:6px; } .svp .tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
@media(max-width:520px){ .svp .timeline{ padding-left:40px; gap:18px; } .svp .timeline::before{ top:0; bottom:0; } .svp .tl-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; } .svp .tl-media{ width:100%; } .svp .tl-img{ width:100%; border-radius:0; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; } .svp .tl-body{ padding:15px 16px 17px; } .svp .tl-node{ left:-30px; width:24px; height:24px; line-height:24px; font-size:12px; } .svp .tl-list li{ font-size:13.5px; } .svp .tl-body h3{ font-size:17px; } .svp .tl-body p{ font-size:13.5px; } }

/* comparison */
.svp .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .svp .compare{ grid-template-columns:1fr; } }
.svp .compare-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.svp .compare-col.win{ border:2px solid var(--green); }
.svp .compare-col h3{ font-family:var(--serif); text-align:center; font-size:20px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.svp .compare-col.win h3{ color:var(--green); }
.svp .crow{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; }
.svp .crow svg{ width:20px; height:20px; flex:none; margin-top:1px; }

/* reviews */
.svp .rev-slider-wrap{ position:relative; }
.svp .reviews-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svp .reviews-grid::-webkit-scrollbar{ display:none; }
.svp .rev{ flex:0 0 84%; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh-sm); overflow:hidden; }
.svp .rev-photo{ margin:-26px -26px 18px; }
.svp .rev-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; display:block; }
@media(min-width:760px){ .svp .rev{ flex-basis:calc((100% - 40px)/3); } }
.svp .rev-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; place-items:center; box-shadow:var(--sh-md); z-index:4; color:var(--ink); }
@media(min-width:760px){ .svp .rev-arrow{ display:grid; } }
.svp .rev-prev{ left:-16px; } .svp .rev-next{ right:-16px; } .svp .rev-arrow svg{ width:20px; height:20px; }
.svp .rev-arrow:hover{ background:var(--cream); }
.svp .rev .stars svg{ width:16px; height:16px; }
.svp .rev-q{ font-size:15px; line-height:1.6; margin:12px 0 16px; }
.svp .rev-who{ display:flex; align-items:center; gap:11px; }
.svp .rev-av{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-weight:700; color:var(--green-deep); overflow:hidden; }
.svp .rev-av img{ width:100%; height:100%; object-fit:cover; }
.svp .rev-name{ font-size:14px; font-weight:700; } .svp .rev-vf{ font-size:11.5px; color:var(--green); font-weight:600; }

/* guarantee */
.svp .guar{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .svp .guar{ grid-template-columns:auto 1fr; gap:48px; } }
.svp .guar-seal{ width:120px; height:120px; border-radius:50%; background:var(--seal-bg); display:grid; place-items:center; color:var(--lime); margin:0 auto; }
.svp .guar-seal svg{ width:56px; height:56px; }
.svp .guar h2{ font-family:var(--serif); font-weight:var(--serif-w); font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; } .svp .guar p{ color:rgba(255,255,255,.72); max-width:48ch; }

/* facts + how to use */
.svp .facts-grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto; }
@media(min-width:820px){ .svp .facts-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
.svp .facts-panel{ background:#fff; border:1px solid var(--ink); border-radius:var(--r); padding:22px; }
.svp .facts-panel h4{ font-size:24px; font-weight:800; border-bottom:8px solid var(--ink); padding-bottom:6px; margin-bottom:6px; }
.svp .facts-panel .fserv{ font-size:13px; border-bottom:3px solid var(--ink); padding:4px 0; display:flex; justify-content:space-between; font-weight:700; }
.svp .facts-panel .frow{ display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.svp .facts-panel .frow b{ font-weight:700; } .svp .facts-panel .ffoot{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.svp .howto h3{ font-family:var(--serif); font-weight:var(--serif-w); font-size:24px; margin-bottom:18px; }
.svp .howto ol{ display:grid; gap:4px; }
.svp .howto li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.svp .howto li:first-child{ border-top:1px solid var(--line); }
.svp .ho-num{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:grid; place-items:center; }

/* all-reviews: Loox-style masonry wall */
.svp .revall-grid{ columns:2; column-gap:12px; max-width:1080px; margin:0 auto; }
@media(min-width:760px){ .svp .revall-grid{ columns:3; } }
@media(min-width:1100px){ .svp .revall-grid{ columns:4; } }
.svp .revall-grid .rev{ display:inline-block; width:100%; flex:none; margin:0 0 12px; padding:16px 18px; break-inside:avoid; border-radius:12px; }
.svp .revall-grid .rev .stars svg{ width:13px; height:13px; }
.svp .revall-grid .rev-q{ font-size:13.5px; line-height:1.55; margin:8px 0 12px; }
.svp .revall-grid .rev-name{ font-size:12.5px; }
.svp .revall-grid .rev-vf{ font-size:11px; }
.svp .revall-grid .rev-av{ width:28px; height:28px; font-size:12px; }
.svp .revall-grid .rev.rev-hid{ display:none; }
.svp .rev-hid{ display:none; }
.svp .revall-morewrap{ text-align:center; margin-top:18px; }
.svp .revall-more{ border:1px solid var(--line); background:#fff; padding:13px 32px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh-sm); }
.svp .revall-more:hover{ background:var(--cream); }

/* all-reviews: summary panel + card chrome */
.svp .revall-sub{ text-align:center; color:#777; margin:6px 0 0; font-size:14.5px; }
.svp .rvws{ display:flex; align-items:center; gap:28px; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px; max-width:900px; margin:0 auto 28px; }
@media(max-width:759px){ .svp .rvws{ flex-direction:column; gap:18px; } .svp .rvws-div{ width:100%; height:1px; align-self:auto; } }
.svp .rvws-score{ text-align:center; min-width:140px; }
.svp .rvws-big{ font-size:44px; font-weight:800; line-height:1; margin-bottom:6px; }
.svp .rvws-total{ font-size:12.5px; color:#777; margin-top:6px; }
.svp .rvws-div{ width:1px; align-self:stretch; background:var(--line); }
.svp .rvws-bars{ flex:1; max-width:280px; width:100%; }
.svp .rvws-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; }
.svp .rvws-lbl{ width:34px; text-align:right; white-space:nowrap; }
.svp .rvws-track{ flex:1; height:8px; border-radius:4px; background:#ececec; overflow:hidden; display:block; }
.svp .rvws-fill{ display:block; height:100%; border-radius:4px; background:#E0A200; }
.svp .rvws-pct{ width:38px; font-size:12px; color:#777; }
.svp .rvws-stats{ display:flex; flex-direction:column; gap:12px; min-width:150px; }
.svp .rvws-stat{ text-align:center; }
.svp .rvws-num{ display:block; font-weight:800; font-size:18px; }
.svp .rvws-slabel{ font-size:11.5px; color:#777; }
.svp .revw-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svp .revw-av{ width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.svp .revw-who{ flex:1; min-width:0; }
.svp .revw-loc{ font-size:11.5px; color:#888; }
.svp .revw-vf{ font-size:11px; }
.svp .revw-title{ font-size:14px; font-weight:700; margin:8px 0 0; }
.svp .revw-date{ font-size:11.5px; color:#999; }
.svp .revw-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.svp .rev .rev-who{ align-items:center; }
.svp .rev-vf{ color:#1a8a4d; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.svp .rev-vf .vf-ic{ width:13px; height:13px; flex:none; }
.svp .revw-vf{ background:#e8f5ee; border-radius:999px; padding:3px 9px; font-size:11px; }
.svp .revall-grid .rev{ transition:box-shadow .18s ease, transform .18s ease; }
.svp .revall-grid .rev:hover{ box-shadow:0 6px 20px -6px rgba(0,0,0,.13); transform:translateY(-2px); }

.svp .tl-note{ max-width:640px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:#555; }
.svp .tl-note strong{ color:#1B2A21; }

/* faq */
.svp .faq-list{ max-width:760px; margin:0 auto; }
.svp .qa{ border-bottom:1px solid rgba(255,255,255,.14); }
.svp .qa-q{ width:100%; text-align:left; color:#fff; padding:20px 0; font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.svp .qa-q::after{ content:'+'; color:var(--lime); font-size:1.6rem; line-height:1; }
.svp .qa.open .qa-q::after{ content:'\2212'; }
.svp .qa-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:rgba(255,255,255,.72); font-size:15px; }
.svp .qa.open .qa-a{ max-height:400px; padding-bottom:20px; }

/* footer */
.svp .foot{ background:var(--dark); color:rgba(255,255,255,.62); padding:48px 24px 110px; text-align:center; font-size:13.5px; }
.svp .foot .lk-word{ color:#fff; } .svp .foot .lk-sub{ color:rgba(255,255,255,.45); }
.svp .foot .disc{ max-width:820px; margin:14px auto; font-size:11.5px; line-height:1.6; }
.svp .foot a{ color:var(--lime); margin:0 8px; }
.svp .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; max-width:560px; margin:12px auto 0; }
.svp .foot-links a{ white-space:nowrap; }

/* sticky mobile cart */
.svp .sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); display:flex; align-items:center; gap:10px; padding:9px 10px; transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease; }
.svp .sticky.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.svp .sticky button{ flex:1 1 auto; width:100%; background:var(--cta); color:var(--cta-ink); border-radius:var(--r); padding:15px 14px; font-weight:800; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:360px){ .svp .sticky button{ padding:12px 12px; font-size:.78rem; } }
@media(min-width:900px){ .svp .sticky{ display:none; } }
.svp .sticky--retired{ display:none !important; }

.svp .reveal{ } /* hook for future scroll anim; content always visible */

@keyframes shopify-rotator { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes shopify-dash { 
  0% { stroke-dashoffset: 280px; }
  50% { stroke-dashoffset: 75px; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280px; transform: rotate(450deg); }
}
@keyframes acceleratedCheckoutLoadingSkeleton { 
  50% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
  75% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-end,.5); }
  100% { opacity: var(--shopify-accelerated-checkout-skeleton-animation-opacity-start,1); }
}
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
[role="button"], button { cursor: pointer; }
.block { display: block; }
.svp * { box-sizing: border-box; margin: 0px; padding: 0px; }
.svp button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.svp .shell { max-width: 1180px; margin: 0px auto; padding: 0px 16px; }
@keyframes ann-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp section.block { padding: 40px 0px; }
.svp section.block.dark { background: var(--dark); color: rgb(255, 255, 255); }
.svp .head { text-align: center; max-width: 720px; margin: 0px auto 44px; }
.svp .head h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.svp .tl-body h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; margin-bottom: 6px; }
.svp .tl-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.svp .faq-list { max-width: 760px; margin: 0px auto; }
.svp .qa { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.svp .qa-q { width: 100%; text-align: left; color: rgb(255, 255, 255); padding: 20px 0px; font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.svp .qa-a { max-height: 0px; overflow: hidden; transition: max-height 0.3s; color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.svp .qa.open .qa-a { max-height: 400px; padding-bottom: 20px; }
@keyframes svpMq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.svp .jr-body > p { margin: 0px 0px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.svp .scrollbuy { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 38px auto 4px; padding: 0px 18px; text-align: center; }
.svp .scrollbuy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--green,#2F7A4E); color: rgb(255, 255, 255); border: 0px; border-radius: 100px; padding: 16px 38px; min-height: 52px; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s, filter 0.15s; max-width: 100%; }
.svp .scrollbuy-note { font-size: 12.5px; color: var(--ink-soft,#6b7169); }
.svp .scrollbuy--dark .scrollbuy-btn { background: var(--lime,#A6D257); color: rgb(18, 39, 26); }
.svp .scrollbuy--dark .scrollbuy-note { color: rgba(255, 255, 255, 0.66); }
@keyframes svpPulse { 
  0%, 100% { box-shadow: rgba(47, 122, 78, 0) 0px 0px 0px 0px; }
  30% { box-shadow: rgba(47, 122, 78, 0.22) 0px 0px 0px 6px; }
}
.svp .scrollbuy-btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .svp .bundle.pulse { animation: auto ease 0s 1 normal none running none; }
  .svp .scrollbuy-btn { transition: none; }
}
.svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
.svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
@media (max-width: 600px) {
  .svp-stickybar__inner { grid-template-columns: 1fr auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; }
  .svp-stickybar__prod img { width: 40px; height: 40px; }
  .svp-stickybar__rating { display: none; }
  .svp-stickybar__title { font-size: 12.5px; margin-top: 0px; }
  .svp-stickybar__price .sb-now { font-size: 15px; }
  .svp-stickybar__price .sb-was { font-size: 11.5px; }
  .svp-stickybar__price .sb-save { display: none; }
  .svp-stickybar__cta { padding: 13px 18px; font-size: 13.5px; min-height: 46px; }
  .svp-stickybar__cta .sb-cta-price { display: none; }
  .svp .scrollbuy { margin-top: 30px; padding: 0px 16px; }
  .svp .scrollbuy-btn { width: 100%; padding: 16px 22px; font-size: 15px; }
  .svp .buy2 { max-width: none; }
  .svp .buy2 .buy-cta { min-height: 56px; font-size: 16px; }
}
/* advertorial-clone: force theme JS-driven content visible/expanded (static clone) */
.animate--hidden,[class*='animate--hidden']{opacity:1 !important;transform:none !important;visibility:visible !important;}
[data-gp-reveal],.gp-reveal,[class*='gp-animate'],.gps-lazy{opacity:1 !important;transform:none !important;}
.splide__track{overflow-x:auto !important;}
.splide__list{transform:none !important;display:flex !important;flex-wrap:nowrap !important;width:auto !important;}
.splide__slide{opacity:1 !important;visibility:visible !important;flex:0 0 78% !important;}
@media(min-width:900px){.splide__slide{flex-basis:31% !important;}}
.content-tab__content,[class*='content-tab__content']{display:block !important;opacity:1 !important;height:auto !important;}
.content-tabs__buttons,[class*='content-tabs__buttons']{display:none !important;}
.content-tabs,[class*='content-tabs ']{display:block !important;width:100% !important;}
.content-tabs__tabs,[class*='content-tabs__tabs']{display:block !important;}
.content-tabs__tabs>.content-tab,[class*='content-tabs__tabs']>[class*='content-tab']{display:block !important;position:static !important;opacity:1 !important;visibility:visible !important;height:auto !important;transform:none !important;margin:0 auto 28px !important;max-width:900px !important;}
.content-tab__media,[class*='content-tab__media']{max-width:560px;margin:0 auto;}
details[open] .accordion__content,details[open] .accordion__content-wrapper{max-height:none !important;height:auto !important;overflow:visible !important;display:block !important;}
.accordion .icon-accordion,details .icon-accordion,summary .icon-accordion{display:none !important;}
summary.accordion__summary,details>summary{list-style:none !important;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;}
summary.accordion__summary::-webkit-details-marker,details>summary::-webkit-details-marker{display:none !important;}
.accordion .icon-caret,summary .icon-caret{transition:transform .2s ease;flex:0 0 auto;width:14px;height:14px;}
details[open]>summary .icon-caret,details[open] .accordion__summary .icon-caret{transform:rotate(180deg);}
[class*='gp-carousel'] .gp-content-start{transform:none !important;height:auto !important;display:flex !important;overflow-x:auto !important;}
[class*='gp-carousel'] .gp-content-start>*{flex:0 0 88% !important;height:auto !important;}
[class*='gp-carousel'] [class*='gp-h-full']{height:auto !important;}
[style*='max-width:480px'],[style*='max-width: 480px'],[style*='max-width:500px'],[style*='max-width: 500px']{max-width:720px !important;margin-left:auto !important;margin-right:auto !important;}
[style*='max-width:600px'],[style*='max-width: 600px']{max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}
.media--transparent:not(:has(img)):not(:has(video)):not(:has(svg)),[class*='__image'].media:not(:has(img)):not(:has(video)):not(:has(svg)),[class*='steps-progress-bar']:empty,[class*='steps-progress-bar-background']:empty{display:none !important;min-height:0 !important;height:0 !important;padding:0 !important;}
.content-and-results__image,[class*='content-and-results__image']{display:none !important;}
.rating-stars,[class*='rating-stars'],.rating-stars__container{display:inline-flex !important;align-items:center !important;height:18px !important;gap:2px !important;width:auto !important;}
.rating-stars svg,[class*='rating-stars'] svg,.rating-stars__container svg{width:18px !important;height:18px !important;flex:0 0 18px !important;}
.testimonial-card__quotes,[class*='testimonial-card__quotes']{display:inline-flex !important;height:auto !important;}
.testimonial-card__quotes svg,[class*='testimonial-card__quotes'] svg{width:46px !important;height:46px !important;flex:0 0 46px !important;}
.media:not(:has(img)):not(:has(video)):not(:has(svg)):not(:has(iframe)){padding-bottom:0 !important;min-height:0 !important;}