/* ============================================================
   LILVAA, hair & skin care · homepage styles (vanilla CSS)
   Type:  Playfair Display (display)  +  Buenard (body)
   ============================================================ */

/* Brand wordmark font. Resort Sans (self-hosted; DEMO/eval license,
   swap for the purchased file before launch). */
@font-face{ font-family:'Resort Sans'; src:url('../fonts/resort-sans.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Resort Sans'; src:url('../fonts/resort-sans-light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }

/* ---------- design tokens ---------- */
:root{
  /* brand palette. LILVAA: burnt orange + warm off-white (from the packaging)
     #e05a09 IS the packaging orange and owns every large field on the page.
     It only reaches 3.73:1 with white, which clears WCAG's large-text bar (3:1)
     but not the normal-text bar (4.5:1), so anything sitting on it is sized to
     qualify as large text (>=18.66px bold, or >=24px regular). Small chips can't
     do that, so they get --orange-chip, which never touches an orange field. */
  --orange:       #e05a09;   /* packaging orange, all large fields + primary buttons */
  --orange-chip:  #bc4906;   /* small chips only: badges, cart count, reel buttons, footer, 5.13:1 */
  --orange-chip-h:#9d3d05;   /* hover for those */
  --orange-ink:   #ad4305;   /* orange AS text/icon on light bands, 4.7:1 on --cream (AA) */

  /* the large-text floor, in absolute px, rem would shrink below it on mobile,
     because the body scale bottoms out at 16px. */
  --lg-text: 18.7px;
  --text:         #3a1e0c;   /* warm dark brown, body text + headings on light */
  --paper:        #fffefa;   /* warm off-white, page bg + text on orange */
  --cream:        #f7e3d1;   /* soft peach, alternating bands */
  --cream-2:      #fdf3ec;   /* card surface */
  --tan:          #f8e6d3;   /* newsletter inner card */
  --muted:        #7d5a41;   /* warm taupe, secondary text. Was #9a7257, which
                                failed AA on every surface it sat on (4.23:1 on
                                paper, 3.43:1 on cream). This passes on all four
                                backgrounds, min 4.94:1. */
  --line:         rgba(58,30,12,.16);
  --line-light:   rgba(255,255,255,.4);

  /* type */
  --display: 'Playfair Display', 'Times New Roman', serif;
  --body:    'Buenard', Georgia, 'Times New Roman', serif;

  /* metrics */
  --wrap: 1280px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;

  --c: var(--orange); /* per-section accent, overridable */

  /* torn-paper ripple, one tileable period of the wave divider (symmetric
     down-arch + up-arch). Drawn as a mask so per-wave --from/--to still work. */
  --wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 340 40'%3E%3Cpath d='M0 20 C57 34 113 34 170 20 C227 6 283 6 340 20 L340 40 L0 40 Z' fill='%23fff'/%3E%3C/svg%3E");
  --wave-period: min(340px, 33vw);

  /* brand sparkle ✦, 4-point twinkle (concave sides), used as a mask so it
     inherits currentColor wherever it's placed. */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.5 9.5 14.5 11.5 24 12 C14.5 12.5 12.5 14.5 12 24 C11.5 14.5 9.5 12.5 0 12 C9.5 11.5 11.5 9.5 12 0 Z'/%3E%3C/svg%3E");
}

/* reusable sparkle glyph */
.sparkle{ display:inline-block; width:1em; height:1em; background:currentColor; -webkit-mask:var(--sparkle) center/contain no-repeat; mask:var(--sparkle) center/contain no-repeat; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(16px,1.04vw,18px);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.06; margin:0; color:var(--text); }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(54px,7vw,104px); position:relative; }
.bg-cream{ background:var(--cream); }
.bg-paper{ background:var(--paper); }
/* Everything on this band is sized up to clear the large-text bar, so the band
   itself can stay the exact packaging orange. */
.bg-orange{ background:var(--orange); color:var(--paper); }
.bg-orange h1,.bg-orange h2,.bg-orange h3,.bg-orange .richtext__body{ color:var(--paper); }
.bg-orange .richtext__body{ font-size:clamp(24px,1.5vw,26px); }  /* >=24px regular = large text */
.bg-orange .eyebrow{ color:var(--paper); font-size:var(--lg-text); }  /* bold already */
.bg-orange .btn--ghost{ --fg:var(--paper); border-color:var(--paper); box-shadow:none; }
.bg-orange .btn--ghost:hover{ background:var(--paper); color:var(--orange-ink); }

/* ---------- torn-paper wave dividers (signature, responsive ripple) ----------
   The wavy edge is a horizontally-tiled CSS mask: each hump is a fixed width
   (--wave-period) that repeats, so the ripple stays equally wavy at any screen
   width instead of stretching flat. --from = colour above the crest,
   --to = colour of the filled wave below it. */
.wave{
  --from:var(--paper); --to:var(--cream);
  position:relative; display:block; line-height:0; z-index:5;
  height:clamp(30px,3.6vw,58px);
  margin-top:-1px; pointer-events:none;
  /* The bottom of the element is ALWAYS --to, never --from.
     The mask shape is fully opaque below 85% of its height (the path drops to
     y=34 of a 40-unit viewBox, then fills straight down), so painting --to
     there is invisible in the normal case. It matters when the height lands on
     a fractional device pixel, which clamp(30px,3.6vw,58px) usually does: the
     mask's bottom edge is then anti-aliased, and whatever sits behind it bleeds
     through as a hairline. Behind it is now the same colour as the shape, so
     nothing is left to bleed. Which width and DPR trigger it varies, hence
     fixing the cause rather than one reported width. */
  background:linear-gradient(to bottom, var(--from) 0 86%, var(--to) 86% 100%);
}
.wave::after{
  /* inset bottom -1px on purpose: the filled shape overlaps the next section by
     a pixel, which is the same colour as --to, so a fractional boundary between
     the two cannot show a gap either. */
  content:""; position:absolute; inset:0 0 -1px; background:var(--to);
  -webkit-mask:var(--wave-shape) repeat-x bottom / var(--wave-period) 101%;
          mask:var(--wave-shape) repeat-x bottom / var(--wave-period) 101%;
}
.wave svg{ display:none; } /* legacy inline paths, shape now drawn via CSS mask */

/* ---------- subtle paper grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.28em;
  font-size:.74rem; color:var(--orange-ink); margin:0 0 1rem; font-weight:700;
}
.eyebrow::before{
  content:""; display:inline-block; width:.82em; height:.82em; margin-right:.55em;
  vertical-align:-.05em; background:currentColor;
  -webkit-mask:var(--sparkle) center/contain no-repeat; mask:var(--sparkle) center/contain no-repeat;
}
.eyebrow--light{ color:rgba(255,255,255,.82); }

.btn{
  /* packaging orange + bold at the large-text floor = 3.73:1 and compliant */
  --bg:var(--orange); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-weight:700; letter-spacing:.01em;
  padding:.9em 2em; border-radius:100px; font-size:var(--lg-text);
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  box-shadow:0 10px 22px -14px rgba(168,72,30,.8);
}
.btn::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.16);
  transform:translateX(-101%) skewX(-14deg); transition:transform .6s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -16px rgba(168,72,30,.85); }
.btn:hover::after{ transform:translateX(101%) skewX(-14deg); }
.btn--ghost{ --bg:transparent; --fg:var(--text); border:1.5px solid var(--text); box-shadow:none; }
.btn--ghost:hover{ background:var(--text); color:var(--paper); }
.btn--light{ --bg:#fff; --fg:var(--text); }
.btn--orange{ --bg:var(--orange); --fg:#fff; box-shadow:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; letter-spacing:.02em; }
.link-arrow svg{ transition:transform .3s var(--ease); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* section heading block */
.shead{ text-align:center; margin-bottom:clamp(28px,3.6vw,52px); }
.shead__title{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-style:italic; }
.shead__sub{ color:var(--muted); margin:.7rem auto 0; max-width:48ch; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{ background:var(--orange); color:#fff; text-align:center; font-size:var(--lg-text); font-weight:700; letter-spacing:.04em; padding:.6rem 1rem; position:relative; z-index:60; }
.announce p{ margin:0; }

/* ============================================================
   HEADER  (transparent over hero → solid on scroll)
   ============================================================ */
.header{ position:sticky; top:0; z-index:50; color:#fff; transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s; }
.header__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.header.is-stuck{ background:var(--paper); color:var(--text); box-shadow:0 1px 0 var(--line), 0 14px 30px -26px rgba(0,0,0,.5); }

.header__nav{ display:flex; align-items:center; gap:1.8rem; font-size:.96rem; letter-spacing:.01em; }
.header__nav--right{ justify-content:flex-end; }
.navlink{ position:relative; padding:.4em 0; display:inline-flex; align-items:center; gap:.35em; }
.navlink::after{ content:""; position:absolute; left:0; bottom:.1em; width:100%; height:1.3px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.navlink:hover::after,.has-mega:hover .navlink::after{ transform:scaleX(1); }
.navlink svg{ transition:transform .3s; }
.has-mega:hover .navlink svg{ transform:rotate(180deg); }

.header__logo{ justify-self:center; text-align:center; }
.logo-text{ font-family:'Resort Sans', var(--display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.85rem); letter-spacing:.2em; white-space:nowrap; }

.header__icons{ display:flex; align-items:center; gap:.2rem; }
.iconbtn{ position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; transition:background .25s; }
.iconbtn:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.iconbtn__count{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--orange-chip); color:#fff; border-radius:100px; font-size:.6rem; font-weight:700;
  display:grid; place-items:center; font-family:var(--body);
}
.header__burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; }
.header__burger span{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }

/* mega menu */
.has-mega{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%; background:var(--paper); color:var(--text);
  border-top:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-mega:hover .mega, .mega:hover{ opacity:1; visibility:visible; transform:none; }
.mega__inner{ max-width:var(--wrap); margin-inline:auto; padding:clamp(1.6rem,3vw,2.4rem) var(--gutter); display:grid; grid-template-columns:repeat(3,1fr) 1.2fr; gap:clamp(1rem,2.4vw,2.4rem); }
.mega__list a{ display:block; padding:.5rem 0; font-size:1.02rem; border-bottom:1px solid var(--line); transition:color .25s, padding-left .25s; }
.mega__list a:hover{ color:var(--orange-ink); padding-left:.3rem; }
.mega__feature{ border-radius:var(--radius); overflow:hidden; position:relative; min-height:170px; }
.mega__feature img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.mega__feature span{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-family:var(--display); font-style:italic; font-size:1.2rem; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.mega__col h4{ font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--muted); margin-bottom:.6rem; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer{ position:fixed; inset:0; z-index:80; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(30,28,12,.5); opacity:0; transition:opacity .4s; }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(88vw,360px);
  background:var(--paper); color:var(--text); padding:1.6rem 1.5rem; transform:translateX(102%);
  transition:transform .45s var(--ease); display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__close{ align-self:flex-end; font-size:1.4rem; width:42px; height:42px; }
.drawer__nav{ display:flex; flex-direction:column; margin-top:.6rem; }
.drawer__nav a{ font-family:var(--display); font-size:1.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.drawer__foot{ margin-top:auto; padding-top:1.4rem; }
.drawer__foot .btn{ width:100%; }

/* ============================================================
   HERO  (video + text overlay)
   ============================================================ */
.hero{ position:relative; min-height:clamp(560px,86vh,820px); display:flex; align-items:center; justify-content:center; text-align:center; margin-top:calc(-1*var(--header-h)); color:#fff; overflow:hidden; background:var(--orange); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(40,38,18,.35), rgba(40,38,18,.15) 40%, rgba(40,38,18,.45)); }
.hero__content{ position:relative; z-index:2; padding:var(--header-h) var(--gutter) 4rem; max-width:900px; }
.hero__sparkle{ display:block; width:clamp(26px,3vw,42px); height:clamp(26px,3vw,42px); margin:0 auto 1.2rem; background:#fff; -webkit-mask:var(--sparkle) center/contain no-repeat; mask:var(--sparkle) center/contain no-repeat; filter:drop-shadow(0 2px 12px rgba(0,0,0,.35)); }
.hero__title{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(2.8rem,8vw,6rem); line-height:1; color:#fff; text-shadow:0 3px 24px rgba(0,0,0,.3); text-wrap:balance; max-width:16ch; margin-inline:auto; }
.hero__sub{ margin:1.1rem auto 1.9rem; max-width:none; font-size:clamp(.85rem,1vw,1rem); letter-spacing:.01em; color:rgba(255,255,255,.9); }
.hero .wave{ position:absolute; bottom:0; left:0; width:100%; z-index:3; background:transparent; margin:0; height:clamp(40px,5vw,78px); }

/* ============================================================
   RICH TEXT  (At LILVAA / Radically Transparent)
   ============================================================ */
.richtext{ text-align:center; }
.richtext__inner{ max-width:820px; margin-inline:auto; }
.richtext__title{ font-size:clamp(2rem,4.4vw,3.2rem); font-style:italic; margin-bottom:1.2rem; }
.richtext__body{ color:var(--muted); font-size:1.12rem; }
.richtext .btn{ margin-top:1.8rem; }

/* ============================================================
   CAROUSEL  (shared: best sellers / gift boxes / testimonials)
   ============================================================ */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{ display:flex; gap:clamp(14px,1.6vw,26px); transition:transform .6s var(--ease); will-change:transform; }
.carousel__track.is-dragging{ transition:none; cursor:grabbing; }
.carousel__nav{ display:flex; gap:.7rem; justify-content:flex-end; margin-top:1.6rem; }
.round-btn{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); color:var(--text); display:grid; place-items:center; font-size:1.2rem; transition:background .3s, color .3s, transform .3s, border-color .3s; }
.round-btn:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:scale(1.05); }
.round-btn[disabled]{ opacity:.35; pointer-events:none; }
.dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.dots button{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:transform .3s, background .3s; }
.dots button.is-active{ background:var(--orange); transform:scale(1.4); }

/* product / gift card */
.pcard{ flex:0 0 calc((100% - 3*clamp(14px,1.6vw,26px))/4); min-width:0; }
.pcard__media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:var(--cream-2); display:block;
}
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__badge{ position:absolute; top:12px; left:12px; z-index:3; background:var(--orange-chip); color:#fff; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:.34em .7em; border-radius:100px; }
.pcard__add{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3; transform:translateY(140%);
  background:var(--paper); color:var(--text); font-weight:700; font-size:.86rem; padding:.7em 1em;
  border-radius:100px; box-shadow:0 12px 26px -12px rgba(0,0,0,.4); transition:transform .45s var(--ease), background .3s, color .3s; white-space:nowrap; text-align:center;
}
/* Also reveal on keyboard focus: the button is translated out of an
   overflow:hidden box, so without this a keyboard user can focus a control they
   cannot see. */
.pcard:hover .pcard__add,
.pcard:focus-within .pcard__add{ transform:none; }
/* Touch devices have no hover, so the slide-in reveal never fires and the
   button stays clipped outside its overflow:hidden parent, unreachable. Show
   it permanently wherever hover is unavailable. */
@media (hover: none){
  .pcard__add{ transform:none; }
}
.pcard__add:hover{ background:var(--orange-chip); color:#fff; }
.pcard__info{ padding:1rem .2rem 0; text-align:center; }
.pcard__name{ font-family:var(--display); font-size:1.16rem; }
.pcard__price{ margin-top:.35rem; font-size:.96rem; color:var(--text); }
.pcard__price del{ color:var(--muted); margin-right:.45em; }
.pcard__price ins{ text-decoration:none; }

/* ============================================================
   COLLAGE  (next level / natural & honest)
   ============================================================ */
.collage{ padding:0; background:var(--cream); }
.collage__grid{ display:grid; grid-template-columns:1.25fr 1fr; grid-auto-rows:1fr; gap:6px; min-height:clamp(420px,52vw,640px); }
.collage__tile{ position:relative; overflow:hidden; }
.collage__tile img,.collage__tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.collage__tile:hover img{ transform:scale(1.05); }
.collage__tile--main{ grid-row:1 / span 2; }
.collage__tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(40,38,18,.05), rgba(40,38,18,.4)); }
.collage__cap{ position:absolute; z-index:2; color:#fff; font-family:var(--display); font-style:italic; line-height:1; text-shadow:0 3px 18px rgba(0,0,0,.4); }
.collage__cap--main{ left:8%; top:50%; transform:translateY(-50%); font-size:clamp(2.4rem,6vw,5rem); }
.collage__cap--sm{ left:8%; bottom:8%; font-size:clamp(1.3rem,2.4vw,2rem); max-width:8em; }

/* ============================================================
   PROVEN RESULTS  (image + text slideshow)
   ============================================================ */
.proven__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.proven__title{ font-size:clamp(2.2rem,4.6vw,3.4rem); font-style:italic; }
.proven__body{ color:var(--muted); margin:1.2rem 0 1.8rem; }
.proven__show{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -40px rgba(60,50,20,.6); }
.proven__tag{ position:absolute; top:12px; left:12px; z-index:4; background:#fff; color:var(--text); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.35em .8em; border-radius:100px; }
.proven__caption{ margin:.9rem 2px 0; font-size:.9rem; color:var(--muted); }

/* before / after drag-to-compare slider */
.ba{ position:relative; aspect-ratio:16/12; --ba-pos:50%; cursor:ew-resize; touch-action:none; overflow:hidden; }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.ba__img--before{ filter:saturate(.7) brightness(.94) contrast(.96) sepia(.12); }
.ba__img--after{ filter:saturate(1.08) brightness(1.05) contrast(1.03); clip-path:inset(0 0 0 var(--ba-pos)); }
.ba__label{ position:absolute; bottom:14px; z-index:3; background:rgba(43,42,22,.5); color:#fff; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:.34em .9em; border-radius:100px; pointer-events:none; }
.ba__label--before{ left:14px; } .ba__label--after{ right:14px; }
.ba__divider{ position:absolute; top:0; bottom:0; left:var(--ba-pos); width:2px; margin-left:-1px; z-index:3; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
.ba__handle{ position:absolute; top:50%; left:var(--ba-pos); transform:translate(-50%,-50%); z-index:4; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--text); display:grid; place-items:center; box-shadow:0 6px 18px -4px rgba(0,0,0,.45); cursor:ew-resize; }
.ba__handle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--orange), 0 6px 18px -4px rgba(0,0,0,.45); }

/* ============================================================
   SHOPPABLE VIDEO REEL  (Real People. Real Stories.)
   ============================================================ */
.reel{ display:flex; gap:clamp(12px,1.4vw,18px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; cursor:grab; scrollbar-width:none; user-select:none; }
.reel::-webkit-scrollbar{ display:none; }
.reel.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.vcard{ position:relative; flex:0 0 clamp(210px,21vw,250px); aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; background:#cfcdc4; box-shadow:0 22px 44px -30px rgba(60,50,20,.6); }
.vcard video{ width:100%; height:100%; object-fit:cover; }
.vcard__grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(40,38,18,.7)); }
.vcard__foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.7rem; }
.vcard__prod{ display:flex; align-items:center; gap:.55rem; color:#fff; margin-bottom:.55rem; }
.vcard__thumb{ width:34px; height:34px; border-radius:7px; object-fit:cover; flex:0 0 auto; background:#fff; }
.vcard__prod b{ font-family:var(--display); font-size:.86rem; font-weight:500; display:block; line-height:1.15; }
.vcard__prod span{ font-size:.8rem; opacity:.92; }
.vcard__cart{ display:grid; grid-template-columns:1fr auto; gap:2px; }
.vcard__cart button{ background:var(--orange-chip); color:#fff; font-weight:700; font-size:.84rem; padding:.6em; display:grid; place-items:center; transition:background .25s; }
.vcard__cart button:first-child{ border-radius:8px 0 0 8px; }
.vcard__cart button:last-child{ border-radius:0 8px 8px 0; padding-inline:.7em; }
.vcard__cart button:hover{ background:var(--orange-chip-h); }
.vcard__cart button[disabled]{ background:#9a9874; cursor:default; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tcard{ flex:0 0 calc((100% - 3*clamp(14px,1.6vw,26px))/4); min-width:0; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.tcard__avatar{ width:clamp(150px,17vw,185px); aspect-ratio:1/1; border-radius:14px; object-fit:cover; }
.tcard__stars{ color:var(--orange-ink); letter-spacing:.14em; font-size:.95rem; }
.tcard__quote{ font-size:.98rem; color:var(--text); line-height:1.6; }
.tcard__name{ font-family:var(--display); font-style:italic; margin-top:auto; }

/* auto-scrolling testimonial marquee (continuous loop, pause on hover) */
.tmarquee{ overflow:hidden; }
.tmarquee__track{ display:flex; gap:clamp(14px,1.6vw,26px); width:max-content; will-change:transform; cursor:grab; user-select:none; }
.tmarquee__track.is-dragging{ cursor:grabbing; }
.tmarquee .tcard{ flex:0 0 clamp(270px,24vw,330px); }
@media (prefers-reduced-motion:reduce){ .tmarquee{ overflow-x:auto; } .tmarquee__track{ cursor:auto; } }

/* ============================================================
   WAVY TEXT MARQUEE  (phrase flowing along a sine wave)
   ============================================================ */
.wavemq{ overflow:hidden; background:var(--paper); padding-block:clamp(48px,7vw,100px); display:grid; place-items:center; }
.wavemq__svg{ display:block; width:4800px; height:200px; }
.wavemq__text{ font-family:var(--display); font-style:italic; font-size:42px; fill:var(--text); }
@media (max-width:700px){ .wavemq__text{ font-size:30px; } }

/* ============================================================
   BLOG
   ============================================================ */
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.acard{ display:flex; flex-direction:column; }
.acard__media{ aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; display:block; position:relative; }
.acard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.acard:hover .acard__media img{ transform:scale(1.05); }
.acard__body{ padding:1.2rem .2rem 0; text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; }
.acard__title{ font-family:var(--display); font-size:1.32rem; line-height:1.25; margin-bottom:.6rem; }
.acard__excerpt{ color:var(--muted); font-size:.96rem; margin-bottom:1.2rem; }
.acard .btn{ margin-top:auto; }

/* ============================================================
   NEWSLETTER  (orange band, tan card, torn-paper top & bottom)
   ============================================================ */
.news{ background:var(--orange); position:relative; }   /* band carries no text, the tan card holds it all */
.news__card{ max-width:680px; margin-inline:auto; background:var(--tan); color:var(--text); border-radius:calc(var(--radius)*1.6); padding:clamp(2rem,5vw,3.6rem); text-align:center; }
.news__title{ font-size:clamp(2rem,4.6vw,3.2rem); font-style:italic; }
.news__sub{ margin:.8rem auto 1.6rem; max-width:46ch; }
.news__form{ display:flex; gap:.7rem; max-width:520px; margin-inline:auto; }
/* border/placeholder were still the pre-rebrand olive (78,76,31), now brand
   brown at alphas that clear AA on the tan card. */
.news__form input{ flex:1; min-width:0; padding:.95em 1.3em; border-radius:100px; border:1.5px solid rgba(58,30,12,.55); background:transparent; color:var(--text); font-family:var(--body); font-size:1rem; }
.news__form input::placeholder{ color:rgba(58,30,12,.7); }
.news__form input:focus{ outline:none; border-color:var(--text); }
.news__ok{ margin:.9rem 0 0; font-weight:700; }

/* ============================================================
   JOIN OUR CIRCLE, community gallery tiles
   ============================================================ */
.gcard{ flex:0 0 calc((100% - 4*clamp(14px,1.6vw,26px))/5); min-width:0; position:relative; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; display:block; background:var(--cream-2); }
.gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gcard:hover img{ transform:scale(1.06); }
.gcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(40,38,18,.4)); opacity:0; transition:opacity .3s; }
.gcard:hover::after{ opacity:1; }
.gcard__ig{ position:absolute; top:10px; right:10px; z-index:2; color:#fff; opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s; filter:drop-shadow(0 1px 5px rgba(0,0,0,.6)); }
.gcard:hover .gcard__ig{ opacity:1; transform:none; }
@media (max-width:1080px){ .gcard{ flex-basis:calc((100% - 3*clamp(14px,1.6vw,26px))/4); } }
@media (max-width:780px){ .gcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); } }
@media (max-width:520px){ .gcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); } }

/* ============================================================
   SCROLLING ICON MARQUEE  (trust badges)
   ============================================================ */
.ribbon{ background:var(--cream); color:var(--text); overflow:hidden; padding:.85rem 0; border-block:1px solid var(--line); }
.ribbon__track{ display:flex; gap:clamp(2rem,4vw,3.4rem); width:max-content; white-space:nowrap; animation:marquee 34s linear infinite; }
.ribbon__item{ font-family:var(--display); font-style:italic; font-size:1.15rem; display:flex; align-items:center; gap:.55rem; color:var(--text); }
.ribbon__item svg{ width:22px; height:22px; flex:none; color:var(--orange-ink); }

/* ============================================================
   FOOTER
   ============================================================ */
/* The one large field that can't take the packaging orange: the acknowledgement
   paragraph, link columns and legal bar are all small by necessity and can't be
   sized up to the large-text floor. Nothing orange sits next to it (the ribbon
   above is cream), so the shade shift is never visible as a seam. */
.footer{ background:var(--orange-chip); color:#fff; padding-top:clamp(48px,6vw,80px); position:relative; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1.1fr; gap:clamp(2rem,4vw,4rem); padding-bottom:2.6rem; }
.footer__ack{ font-size:.92rem; line-height:1.6; }
.footer__social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.7); display:grid; place-items:center; transition:background .3s, color .3s; }
.footer__social a:hover{ background:#fff; color:var(--orange-ink); }
.footer__col a{ display:block; padding:.36rem 0; transition:color .25s, padding-left .25s; }
.footer__col a:hover{ color:#fff; padding-left:.3rem; }
.footer__news h4{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.5rem; color:#fff; margin-bottom:1rem; }
.footer__news .news__form{ flex-direction:column; max-width:none; }
.footer__news input{ color:#fff; border-color:rgba(255,255,255,.7); }
.footer__news input::placeholder{ color:rgba(255,255,255,.94); }  /* .85 fell to 4.15:1 on the band */
.footer .btn{ --bg:var(--paper); --fg:var(--orange-ink); box-shadow:none; }
.footer .btn:hover{ --bg:#fff; }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.18); font-size:.85rem; }
.footer__pay{ display:flex; gap:.45rem; flex-wrap:wrap; }
.footer__pay span{ background:#fff; color:#444; border-radius:5px; padding:.25em .5em; font-size:.62rem; font-weight:800; letter-spacing:.03em; }
.footer__region{ display:inline-flex; align-items:center; gap:.4rem; }

/* ============================================================
   "JOIN OUR CIRCLE" POPUP  +  floating tab
   ============================================================ */
.popup{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; visibility:hidden; }
.popup.is-open{ visibility:visible; }
.popup__scrim{ position:absolute; inset:0; background:rgba(30,28,12,.55); opacity:0; transition:opacity .4s; }
.popup.is-open .popup__scrim{ opacity:1; }
.popup__box{ position:relative; width:min(440px,100%); background:var(--paper); border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.6rem); text-align:center; transform:translateY(20px) scale(.98); opacity:0; transition:transform .45s var(--ease), opacity .45s; }
.popup.is-open .popup__box{ transform:none; opacity:1; }
.popup__close{ position:absolute; top:.7rem; right:.9rem; font-size:1.3rem; width:36px; height:36px; color:var(--muted); }
.popup__title{ font-size:1.9rem; font-style:italic; margin-bottom:.6rem; }
.popup__sub{ color:var(--muted); font-size:.96rem; margin-bottom:1.4rem; }
.popup__box input{ width:100%; padding:.9em 1.2em; border:1.5px solid var(--line); border-radius:8px; font-family:var(--body); font-size:1rem; margin-bottom:.7rem; }
.popup__box input:focus{ outline:none; border-color:var(--orange); }
.popup__box .btn{ width:100%; border-radius:8px; }
.popup__fine{ font-size:.72rem; color:var(--muted); margin-top:1rem; }

.fab{ position:fixed; left:18px; bottom:18px; z-index:90; background:var(--cream-2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:.7em 1em; font-weight:700; font-size:.9rem; box-shadow:0 12px 30px -16px rgba(0,0,0,.4); display:flex; align-items:center; gap:.6rem; transition:transform .3s; }
.fab:hover{ transform:translateY(-2px); }
.fab span{ color:var(--muted); }

/* ============================================================
   TOAST
   ============================================================ */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%, calc(100% + 40px)); z-index:130; background:var(--text); color:#fff; padding:.85rem 1.4rem; border-radius:100px; font-weight:700; font-size:.9rem; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.toast.is-show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); }
  .tcard{ flex-basis:calc((100% - 2*clamp(14px,1.6vw,26px))/3); }
  .mega__inner{ grid-template-columns:repeat(2,1fr); }
  .mega__feature{ display:none; }
}
@media (max-width:860px){
  :root{ --header-h:68px; }
  .header__nav{ display:none; }
  .header__burger{ display:flex; }
  .header__inner{ grid-template-columns:auto 1fr auto; }
  .header__icons .iconbtn--account,.header__icons .iconbtn--search{ display:none; }
  .proven__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .pcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .tcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .bgrid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .collage__grid{ grid-template-columns:1fr 1fr; }
  .collage__tile--main{ grid-row:auto; grid-column:1 / -1; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .pcard{ flex-basis:calc((100% - clamp(14px,1.6vw,26px))/2); }
  .tcard{ flex-basis:100%; }
  .news__form{ flex-direction:column; }
  .footer__bar{ justify-content:center; text-align:center; }
  .collage__grid{ grid-template-columns:1fr; }
  .collage__tile--main{ aspect-ratio:4/3; }
}

/* ============================================================
   POLICY PAGES  (shipping / returns / privacy / terms / contact)
   Long-form prose. Rendered from content/policies/*.md by
   tools/build-policies.py, edit the Markdown, not the HTML.
   ============================================================ */
.header__inner--simple{ grid-template-columns:1fr; justify-items:center; }

.policy{ background:var(--paper); padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,88px); }
.policy__inner{ max-width:74ch; }
.policy__title{ font-size:clamp(2.2rem,5vw,3.4rem); font-style:italic; margin-bottom:.5rem; }
.policy__meta{ color:var(--muted); font-size:.92rem; margin:0 0 clamp(1.8rem,3vw,2.6rem); }

.policy__inner h2{
  font-size:clamp(1.45rem,2.6vw,1.9rem); font-style:italic;
  margin:clamp(2.2rem,4vw,3rem) 0 .7rem; padding-top:clamp(1.2rem,2vw,1.6rem);
  border-top:1px solid var(--line);
}
.policy__inner h3{ font-size:1.18rem; margin:1.8rem 0 .5rem; }
.policy__inner p{ margin:0 0 1.05rem; }
.policy__inner ul{ margin:0 0 1.2rem; padding-left:1.15rem; list-style:disc; }
.policy__inner li{ margin-bottom:.5rem; padding-left:.25rem; }
.policy__inner strong{ font-weight:700; }

/* --orange-ink clears AA on paper (5.81:1); underlined so the link is not
   signalled by colour alone. */
.policy__inner a{ color:var(--orange-ink); text-decoration:underline; text-underline-offset:.18em; }
.policy__inner a:hover{ text-decoration-thickness:2px; }

.policy__inner blockquote{
  margin:1.4rem 0; padding:1.1rem 1.3rem; background:var(--cream-2);
  border-left:4px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0;
}
.policy__inner blockquote p{ margin:0; }

.policy__nav{ background:var(--cream); border-block:1px solid var(--line); padding-block:1.4rem; }
.policy__nav .wrap{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; justify-content:space-between; }
.policy__nav-links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.policy__nav a{ color:var(--orange-ink); text-decoration:underline; text-underline-offset:.18em; }
.policy__nav [aria-current="page"]{ color:var(--text); font-weight:700; }

.footer--simple{ padding-top:clamp(28px,4vw,44px); }
.footer--simple .footer__bar{ border-top:0; }
.footer--simple a{ text-decoration:underline; text-underline-offset:.18em; }

/* ============================================================
   CONSENT CHECKBOXES
   The blocks above style *every* input inside .popup__box,
   .news__card and .footer__news as a full-width text field,
   correct for an email box, wrong for a checkbox, which then goes
   356px wide and shoves its label outside the container.
   Scoped by type so the text fields keep their styling.
   ============================================================ */
.popup__box input[type="checkbox"],
.news__card input[type="checkbox"],
.footer__news input[type="checkbox"],
.news__form input[type="checkbox"] {
	width: auto;
	min-width: 0;
	flex: none;
	margin: .2rem .55rem 0 0;
	padding: 0;
	border-radius: 3px;
	accent-color: var(--orange);
}

/* The consent row is a left-aligned control inside centred cards. */
.news__consent,
.footer__consent {
	display: flex;
	align-items: flex-start;
	gap: .1rem;
	text-align: left;
	line-height: 1.45;
}