/* PO!NTS — homepage rebuild.
   Structure mirrors ollys-snacks.com section-by-section.
   Palette + button geometry pulled from Olly's actual computed styles
   (colors + component shapes aren't proprietary; their copy/photography is,
   so those stay PO!NTS' own). Headline/body font is Roc Grotesk Condensed /
   Roc Grotesk, served via our own licensed Typekit kit (linked in index.html
   head). Oswald / Plus Jakarta Sans stay as the fallback stack for anywhere
   that kit hasn't loaded yet or isn't authorized for the domain. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* The page is a fluid frame. --frame is the widest the content ever gets,
   --gutter is the breathing room at the edges; both scale with the window so
   nothing is ever boxed into a narrow column on a wide screen. */
:root{--frame:1800px;--gutter:clamp(20px,3.4vw,72px);}
html,body{overflow-x:hidden;max-width:100%;}
:root{
  --paper:#FFFFFF;
  --paper-2:#F7F2FA;
  --ink:#440099;        /* Olly's "Dark Purple" — used as body text + brand ink */
  --ink-soft:#7A65A5;    /* Olly's "Deluge" */
  --purple:#61439B;      /* Olly's "Purple" */
  --pink:#E67AAE;        /* Olly's accent pink */
  --twilight:#E2C7D6;    /* pastel */
  --spindle:#C6E3EE;     /* pastel blue */
  --edgewater:#C8E0D4;   /* pastel green */
  --peach:#F5D0BA;       /* Olly's "Mandy's Pink" */
  --card:#FFFFFF;
  --line:rgba(68,0,153,0.14);
  --shadow: 0 1px 2px rgba(68,0,153,0.06), 0 12px 32px -16px rgba(68,0,153,0.30);
  --radius: 20px;         /* Olly's pill-button radius, reused as the site radius */
  --radius-card: 10px;
  --deal-bg:#E67AAE;      /* daily deal band */

  /* flavour palette — sampled from the real product photography */
  --f-blue:#0C9FE3;        /* Blue Raspberry */
  --f-passion:#6069B5;     /* Passion Fruit  */
  --f-peach:#FA9B29;       /* Peach Mango    */
  --f-straw:#EE2657;       /* Strawberry Lime*/
  --c-dark:#6CAEA0;        /* Dark Chocolate */
  --c-orange:#DAA46A;      /* Dark & Orange  */
  --c-milk:#ADCCD9;        /* Milk           */
  --c-toffee:#C9A880;      /* Milk & Toffee (wrapper reads near-white, warmed so it tints) */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'roc-grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{
  font-family:'roc-grotesk-condensed','Oswald',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  line-height:0.96;
  letter-spacing:0.01em;
  margin:0;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{width:100%;max-width:var(--frame);margin:0 auto;padding-inline:var(--gutter);}
.btn{
  font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:0.01em;
  padding:12px 30px;border-radius:20px;
  display:inline-block;border:3px solid transparent;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--pink);color:#fff;border-color:var(--pink);}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);}
.btn-outline-dark{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-white{background:#fff;color:var(--ink);border-color:#fff;}
.btn-outline-white{border-color:#fff;color:#fff;background:transparent;}

/* real product shots — transparent PNGs, so they sit on any ground */
.tile-art,
.card-art{
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
  padding:18px;
}
.tile-art img,
.card-art img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .45s ease;
}
.tile:hover .tile-art img,
.card:hover .card-art img{transform:scale(1.06);}

.deepdive-art{
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
  border-radius:var(--radius-card);
  padding:28px;
}
.deepdive-art img{width:100%;height:100%;object-fit:contain;}

/* placeholder image block — swap with real photography */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg, rgba(26,20,48,0.06) 0 10px, rgba(26,20,48,0.02) 10px 20px);
  border:1px dashed var(--line);
  color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;
  text-align:center;padding:10px;
}

/* ---------- 1. MARQUEE ---------- */
.marquee{
  background:var(--ink);color:#fff;
  overflow:hidden;white-space:nowrap;padding:9px 0;
}
.marquee-track{display:inline-block;animation:scroll 22s linear infinite;}
.marquee span{
  font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:0.8rem;letter-spacing:0.02em;
  padding:0 28px;
}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- 2. NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:18px;padding-inline:var(--gutter);width:100%;max-width:var(--frame);margin:0 auto;gap:24px;}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-weight:600;font-size:0.86rem;text-transform:uppercase;letter-spacing:0.03em;}
.nav-links a{border-bottom:2px solid transparent;padding-bottom:2px;}
.nav-links a:hover{border-color:var(--pink);}
.logo{display:flex;align-items:center;}
.logo img{height:42px;width:auto;display:block;}
.nav-right{display:flex;align-items:center;gap:20px;}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:transparent;}
.nav-cart{font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.85rem;display:flex;align-items:center;gap:8px;}
.nav-cart .dot{background:var(--pink);color:#fff;border-radius:999px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;}
.nav-toggle{display:none;background:none;border:none;}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- 3. HERO ---------- */
/* Flat solid-purple banner — matches Olly's actual hero treatment (no gradient/diagonal) */
/* The hero photo carries its own purple field on the left (#45009A, which is
   a hair off --ink #440099, so the seam is invisible). Copy sits in that field;
   the photo's subjects stay in the right-hand third. */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:right center;
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(72px,9vw,132px);padding-inline:var(--gutter);width:100%;max-width:var(--frame);margin:0 auto;}
.hero .eyebrow{color:#fff;opacity:0.85;margin-bottom:16px;}
.hero h1{color:#fff;font-size:clamp(2.6rem,6.4vw,5rem);max-width:13ch;}
.hero p{color:#fff;font-size:1.1rem;max-width:34ch;margin-top:20px;opacity:0.92;line-height:1.5;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}
/* keep the copy inside the purple field so it never lands on the faces */
@media (min-width:901px){
  /* Left-aligned, not centred: the centred 1180px container pushed the copy
     toward the middle of wide screens. The gutter scales a little with the
     viewport so it isn't stranded on the edge of an ultra-wide display. */
  .hero-inner{max-width:var(--frame);}
  .hero .eyebrow,.hero h1,.hero p,.hero-cta{max-width:min(46%,600px);}
  .hero{min-height:560px;display:flex;align-items:center;}
}
/* narrow screens: cover-cropping would eat the purple field, so stack instead */
@media (max-width:900px){
  /* On a phone the photo stops being a block sitting under the copy and becomes
     the room the copy is standing in: full-bleed behind the text, dimmed right
     back so the white headline still carries, with a gradient scrim over it so
     the contrast holds wherever the faces happen to land. */
  .hero{display:block;}
  .hero-photo{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:68% center;
    opacity:.26;
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 55%, transparent) 0%,
      color-mix(in srgb, var(--ink) 30%, transparent) 46%,
      color-mix(in srgb, var(--ink) 72%, transparent) 100%);
  }
  .hero-inner{position:relative;z-index:2;padding:72px 20px 76px;}
  .hero h1,.hero p,.hero .eyebrow{max-width:none;}
  .hero h1{font-size:clamp(2.4rem,10.5vw,3.4rem);}
  .hero p{font-size:1.02rem;}
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}

/* ---------- 4. QUOTE CAROUSEL (under hero) ---------- */
.press{padding-block:38px;border-bottom:1px solid var(--line);}
.press-track{position:relative;min-height:64px;}
.press-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.press-slide.active{opacity:1;position:relative;}
.press-slide p{font-size:1.05rem;font-weight:600;max-width:56ch;margin:0 auto;color:var(--ink);}
.press-dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.press-dots button{width:7px;height:7px;border-radius:50%;border:none;background:var(--line);padding:0;}
.press-dots button.active{background:var(--pink);}

/* ---------- 4.5 DOSE CHARTS (per product) ---------- */
.dosecharts{padding-block:88px 40px;}
.dosecharts-head{max-width:min(760px,100%);margin-bottom:clamp(40px,5vw,72px);}
.dosecharts-head h2{font-size:clamp(2.2rem,4.5vw,3.2rem);}
.dosecharts-head p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;line-height:1.55;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}

.dose-product{padding:44px 0;border-top:1px solid var(--line);}
.dose-product:last-child{border-bottom:1px solid var(--line);}
.dose-product-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap;}
.dose-product-head h3{font-size:1.5rem;}
.dose-product-head .unit{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--ink-soft);text-transform:none;letter-spacing:0.02em;}

.dose-row{display:grid;--gap:clamp(20px,2.2vw,40px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(210px,(100% - 2*var(--gap))/3),1fr));}
.dose-row.tiers-4{--gap:clamp(20px,2.2vw,40px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(200px,(100% - 3*var(--gap))/4),1fr));}
@media (max-width:860px){
}
@media (max-width:480px){
}

.dose-tier{text-align:center;}
.dose-icon{
  width:92px;height:92px;margin:0 auto 16px;overflow:visible;cursor:default;
}
.dose-icon img{width:100%;height:100%;transition:transform 0.7s;}
.dose-tier:hover .dose-icon img{transform:rotate(360deg);}
.dose-tier .range{font-family:'roc-grotesk-condensed','Oswald',sans-serif;font-weight:700;font-size:1.8rem;text-transform:uppercase;}
.dose-tier .name{font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pink);margin-top:2px;}
.dose-tier .mg{font-family:'JetBrains Mono',monospace;font-size:0.74rem;color:var(--ink-soft);margin-top:6px;}
.dose-tier .desc{margin-top:10px;font-size:0.88rem;color:var(--ink-soft);line-height:1.5;max-width:22ch;margin-left:auto;margin-right:auto;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}

/* buy row — shop the product directly from its dose chart */
.dose-buy{
  display:grid;--gap:clamp(14px,1.4vw,24px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(248px,(100% - 3*var(--gap))/4),1fr));
  margin-bottom:40px;padding-bottom:32px;border-bottom:1px dashed var(--line);
}

.dose-buy-label{
  grid-column:1/-1;margin-bottom:-6px;
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);
}
.buy-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.buy-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.buy-art{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);padding:14px;
}
.buy-art img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease;}
.buy-card:hover .buy-art img{transform:scale(1.06);}
.buy-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1;}
.buy-name{font-weight:700;font-size:0.88rem;line-height:1.25;}
.buy-meta{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--ink-soft);}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;}
.buy-price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.95rem;}
.buy-add{
  font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.02em;
  background:var(--ink);color:#fff;border:none;border-radius:20px;padding:8px 14px;
}
.buy-add:hover{background:var(--pink);}

/* ---------- 5. CATEGORY TILES ---------- */
.categories{padding-block:88px;}
.categories-head{margin-bottom:36px;}
.categories-head h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.tile-grid{display:grid;--gap:clamp(16px,1.6vw,28px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(262px,(100% - 3*var(--gap))/4),1fr));}
.tile{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--card);box-shadow:var(--shadow);}
.tile .ph{aspect-ratio:1/1;}
.tile-body{padding:18px 18px 22px;}
.tile-body .name{font-family:'roc-grotesk-condensed','Oswald',sans-serif;text-transform:uppercase;font-weight:700;font-size:1.3rem;}
.tile-body .sub{color:var(--ink-soft);font-size:0.88rem;margin-top:4px;}

/* ---------- 8. MISSION BAND ---------- */
.mission{background:var(--purple);color:#fff;padding:100px 0;text-align:center;position:relative;overflow:hidden;}
.mission::before{content:"";position:absolute;left:-100px;top:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,var(--pink) 0%,transparent 70%);opacity:0.35;}
.mission-inner{position:relative;z-index:2;max-width:min(860px,100%);margin:0 auto;}
.mission h2{font-size:clamp(2rem,5vw,3.2rem);}
.mission p{margin-top:20px;font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,0.85);font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}
.mission .btn{margin-top:30px;}

/* ---------- 9. VALUE PROPS (3 icons) ---------- */
.values{padding-block:96px;}
.values-head{text-align:center;max-width:min(760px,100%);margin:0 auto clamp(40px,5vw,68px);}
.values-head h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.value-grid{display:grid;--gap:clamp(20px,2.2vw,40px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(258px,(100% - 3*var(--gap))/4),1fr));}
.value{text-align:center;padding:0 12px;}
.value .icon{
  width:88px;height:88px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
}
.value .icon img{width:100%;height:100%;transition:transform 0.7s;}
.value:hover .icon img{transform:rotate(360deg);}
.value h3{font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;text-transform:none;font-weight:800;font-size:1.08rem;}
.value p{color:var(--ink-soft);font-size:0.92rem;margin-top:10px;line-height:1.55;}

/* ---------- 10. PRODUCT DEEP-DIVE BAND ---------- */
.deepdive{padding-block:96px;background:var(--paper-2);}
.deepdive-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:clamp(32px,4vw,72px);align-items:center;}
@media (max-width:860px){.deepdive-inner{grid-template-columns:1fr;}}
.deepdive h2{font-size:clamp(2rem,4.5vw,2.9rem);}
.deepdive p{margin-top:18px;color:var(--ink-soft);font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.6;max-width:58ch;}
.deepdive .btn{margin-top:26px;}
.deepdive .ph{aspect-ratio:4/3;border-radius:var(--radius-card);}

/* ---------- 11. BESTSELLERS GRID ---------- */
.bestsellers{padding-block:96px;}
.bestsellers-head{text-align:center;max-width:min(680px,100%);margin:0 auto clamp(36px,4.5vw,64px);}
.bestsellers-head h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.grid{display:grid;--gap:clamp(16px,1.6vw,28px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(262px,(100% - 3*var(--gap))/4),1fr));}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.card .ph{aspect-ratio:1/1;}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-name{font-weight:700;font-size:0.96rem;}
.card-meta{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--ink-soft);}
.card-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;}
.price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem;}
.price .was{color:var(--ink-soft);text-decoration:line-through;font-weight:400;font-size:0.8rem;margin-right:6px;}
.add{font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-size:0.78rem;font-weight:700;text-transform:uppercase;background:var(--ink);color:#fff;border:none;border-radius:20px;padding:9px 16px;letter-spacing:0.02em;}
.add:hover{background:var(--pink);color:#fff;}

/* ---------- 12. TRUST BANNER ---------- */
.trust-banner{background:var(--pink);color:#fff;text-align:center;padding:22px 20px;}
.trust-banner p{font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.02em;margin:0;}

/* ---------- 13. TESTIMONIAL WALL ---------- */
.testimonials{padding-block:96px;overflow:hidden;}
.testimonials-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:16px;}
.testimonials-head h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.t-nav{display:flex;gap:10px;}
.t-nav button{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);background:transparent;color:var(--ink);font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;}
.t-nav button:hover{background:var(--ink);color:#fff;}
.t-track{display:flex;gap:20px;transition:transform .5s ease;}
.t-viewport{overflow:hidden;width:100%;}
.quote{flex:0 0 calc(33.333% - 14px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:26px 24px;box-shadow:var(--shadow);}
@media (max-width:900px){.quote{flex:0 0 calc(50% - 10px);}}
@media (max-width:600px){.quote{flex:0 0 100%;}}
.quote .stars{color:var(--pink);font-size:0.85rem;letter-spacing:2px;}
.quote p{margin:14px 0 0;font-size:0.96rem;line-height:1.55;}
.quote .who{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;}

/* ---------- 14. FOOTER ---------- */
/* Solid deep-purple footer — matches Olly's footer background exactly */
footer{background:var(--ink);color:#fff;padding:64px 0 36px;}
.foot-grid{display:grid;--gap:clamp(28px,3vw,56px);gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(max(220px,(100% - 3*var(--gap))/4),1fr));}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-logo img{height:39px;width:auto;display:block;margin-left:-3px;}
.foot-tag{color:rgba(255,255,255,0.72);font-size:0.9rem;margin-top:12px;max-width:32ch;line-height:1.5;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.6);margin-bottom:14px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.92rem;}
.foot-col a:hover{color:var(--pink);}
.foot-signup{display:flex;gap:0;border:2px solid #fff;border-radius:20px;overflow:hidden;margin-top:6px;}
.foot-signup input{flex:1;border:none;padding:12px 16px;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-size:0.88rem;background:transparent;color:#fff;}
.foot-signup input::placeholder{color:rgba(255,255,255,0.6);}
.foot-signup input:focus{outline:none;}
.foot-signup button{background:var(--pink);color:#fff;border:none;padding:0 20px;font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.02em;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.15);flex-wrap:wrap;gap:12px;}
.foot-policies{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:0.8rem;color:rgba(255,255,255,0.72);}
.foot-policies a:hover{color:var(--pink);}
.foot-compliance{margin-top:28px;font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:rgba(255,255,255,0.6);line-height:1.7;}

@media (max-width:860px){.logo img{height:33px;}}


/* ---------- COLOUR SYSTEM ----------
   Flavour colours tint the product grounds and the dose tiers, so colour
   carries meaning (which flavour / how strong) instead of just decorating. */

/* thin spectrum rule — a refined nod to the original PO!NTS stripe hero */
.spectrum-rule{
  height:6px;border:0;margin:0;
  background:linear-gradient(90deg,
    var(--f-blue) 0 25%, var(--f-passion) 25% 50%,
    var(--f-peach) 50% 75%, var(--f-straw) 75% 100%);
}

/* flavour-tinted product grounds */
.buy-card:has(img[src*="blue-raspberry"]) .buy-art,
.card:has(img[src*="blue-raspberry"]) .card-art,
.tile:has(img[src*="blue-raspberry"]) .tile-art{background:color-mix(in srgb, var(--f-blue) 16%, #fff);}

.buy-card:has(img[src*="passion-fruit"]) .buy-art,
.card:has(img[src*="passion-fruit"]) .card-art,
.tile:has(img[src*="passion-fruit"]) .tile-art{background:color-mix(in srgb, var(--f-passion) 16%, #fff);}

.buy-card:has(img[src*="peach-mango"]) .buy-art,
.card:has(img[src*="peach-mango"]) .card-art,
.tile:has(img[src*="peach-mango"]) .tile-art{background:color-mix(in srgb, var(--f-peach) 16%, #fff);}

.buy-card:has(img[src*="strawberry-lime"]) .buy-art,
.card:has(img[src*="strawberry-lime"]) .card-art,
.tile:has(img[src*="strawberry-lime"]) .tile-art{background:color-mix(in srgb, var(--f-straw) 16%, #fff);}

.buy-card:has(img[src*="choc-dark.png"]) .buy-art,
.card:has(img[src*="choc-dark.png"]) .card-art,
.tile:has(img[src*="choc-dark.png"]) .tile-art{background:color-mix(in srgb, var(--c-dark) 20%, #fff);}

.buy-card:has(img[src*="choc-dark-orange"]) .buy-art,
.card:has(img[src*="choc-dark-orange"]) .card-art{background:color-mix(in srgb, var(--c-orange) 22%, #fff);}

.buy-card:has(img[src*="choc-milk.png"]) .buy-art,
.card:has(img[src*="choc-milk.png"]) .card-art{background:color-mix(in srgb, var(--c-milk) 26%, #fff);}

.buy-card:has(img[src*="choc-milk-toffee"]) .buy-art,
.card:has(img[src*="choc-milk-toffee"]) .card-art,

.deepdive-art:has(img[src*="peach-mango"]){background:color-mix(in srgb, var(--f-peach) 14%, #fff);}

/* Dose tiers climb the spectrum: light lift -> full send.
   Keyed to the tier's own icon, NOT nth-child — Macro has no Micro tier, so
   positional colouring would make Sparkle blue here and orange there. */
.dose-tier:has(img[src*="micro"])   .name,
.dose-tier:has(img[src*="micro"])   .range{color:var(--f-blue);}
.dose-tier:has(img[src*="sparkle"]) .name,
.dose-tier:has(img[src*="sparkle"]) .range{color:var(--f-peach);}
.dose-tier:has(img[src*="wave"])    .name,
.dose-tier:has(img[src*="wave"])    .range{color:var(--f-straw);}
.dose-tier:has(img[src*="nirvana"])    .name,
.dose-tier:has(img[src*="nirvana"])    .range{color:var(--f-passion);}

/* alternating tinted grounds so sections stop reading as one flat field */
.categories{background:color-mix(in srgb, var(--f-blue) 5%, #fff);}
.dosecharts{background:#fff;}
.deepdive{background:color-mix(in srgb, var(--f-peach) 8%, #fff);}
.bestsellers{background:color-mix(in srgb, var(--f-passion) 6%, #fff);}
.testimonials{background:color-mix(in srgb, var(--c-dark) 7%, #fff);}

/* category tiles get a flavour-keyed top edge */
.tile{border-top:4px solid transparent;}
.tile:nth-child(1){border-top-color:var(--f-passion);}
.tile:nth-child(2){border-top-color:var(--f-blue);}
.tile:nth-child(3){border-top-color:var(--c-dark);}
.tile:nth-child(4){border-top-color:var(--f-straw);}

/* quote cards pick up a rotating accent instead of one flat pink */
.quote:nth-child(4n+1){border-left:4px solid var(--f-blue);}
.quote:nth-child(4n+2){border-left:4px solid var(--f-peach);}
.quote:nth-child(4n+3){border-left:4px solid var(--f-straw);}
.quote:nth-child(4n+4){border-left:4px solid var(--f-passion);}

/* ========================================================================
   DEPTH SYSTEM — floating product, layered glow, grain
   Real macro photography of the actual gummies (PO!NTS/Gummies cutouts)
   and the real chocolate wrappers. Nothing generated, nothing illustrated.
   Two nested elements per piece: the outer <span> carries scroll parallax
   (written by script.js), the inner <img> carries its own idle drift, so
   the two transforms never fight each other.
   ===================================================================== */

.hero,
.dose-product,
.dosecharts,.categories,.mission,.values,
.deepdive,.bestsellers,.testimonials,
footer{position:relative;isolation:isolate;}

/* keep real content above every float layer */
.hero > *:not(.field):not(.hero-photo),
.dosecharts > *:not(.field),.categories > *:not(.field),
.mission > *:not(.field),.values > *:not(.field),
.deepdive > *:not(.field),.bestsellers > *:not(.field),
.testimonials > *:not(.field),footer > *:not(.field){
  position:relative;z-index:3;
}

.field{
  position:absolute;inset:0;
  overflow:hidden;              /* clip the bleed, never a scrollbar */
  pointer-events:none;
  /* no `contain` here: BOTH layout and paint containment create a stacking
     context, which flattens every piece to one level and lets the hero photo
     (a later sibling at z-index 0) paint straight over the whole layer. */
}

.fl{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--w);
  margin-left:calc(var(--w) / -2);
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.fl img{
  width:100%;height:auto;max-width:none;
  transform:rotate(var(--r));
  animation:drift var(--dur,14s) var(--dly,0s) ease-in-out infinite alternate;
  transform-origin:50% 50%;
}
.fl:nth-child(4n+2) img{animation-name:drift-b;}
.fl:nth-child(4n+3) img{animation-name:drift-c;}
.fl:nth-child(4n)   img{animation-name:drift-d;}

/* four different paths, each piece on its own clock, so nothing beats in time */
@keyframes drift{
  from{transform:rotate(var(--r)) translate3d(0,0,0);}
  50% {transform:rotate(calc(var(--r) + 5deg)) translate3d(9px,-9px,0);}
  to  {transform:rotate(calc(var(--r) + 9deg)) translate3d(3px,-19px,0);}
}
@keyframes drift-b{
  from{transform:rotate(var(--r)) translate3d(0,0,0);}
  50% {transform:rotate(calc(var(--r) - 7deg)) translate3d(-12px,-6px,0);}
  to  {transform:rotate(calc(var(--r) - 11deg)) translate3d(-5px,-16px,0);}
}
@keyframes drift-c{
  from{transform:rotate(var(--r)) translate3d(0,0,0);}
  50% {transform:rotate(calc(var(--r) + 9deg)) translate3d(7px,10px,0);}
  to  {transform:rotate(calc(var(--r) + 3deg)) translate3d(14px,-7px,0);}
}
@keyframes drift-d{
  from{transform:rotate(var(--r)) translate3d(0,0,0);}
  50% {transform:rotate(calc(var(--r) - 4deg)) translate3d(-8px,-13px,0);}
  to  {transform:rotate(calc(var(--r) - 12deg)) translate3d(4px,-5px,0);}
}

/* depth tiers. --p is the parallax factor script.js multiplies by.
   Depth comes from scale, opacity and shadow, never from blur: a blurred
   cutout on a light ground reads as a smudge, not as a gummy out of focus. */
.fl{z-index:0;}            /* ALWAYS behind the cards, never over one */
.fl.d1{--p:0.08;opacity:0.40;filter:blur(1.6px) drop-shadow(0 8px 14px rgba(68,0,153,.12));}
.fl.d2{--p:0.18;opacity:0.62;filter:blur(0.5px) drop-shadow(0 12px 20px rgba(68,0,153,.16));}
.fl.d3{--p:0.30;opacity:0.86;filter:drop-shadow(0 18px 26px rgba(68,0,153,.22));}

/* on the dark hero the pieces need light on them, not shadow under them */
.hero .fl.d1{opacity:0.9;filter:drop-shadow(0 12px 22px rgba(0,0,0,0.38));}
.hero .fl{background:radial-gradient(closest-side,rgba(255,255,255,0.17),transparent 72%);}
.hero .fl.d2,.hero .fl.d3{filter:drop-shadow(0 20px 34px rgba(0,0,0,0.45));}

/* soft coloured light behind each band, so nothing sits on flat white */
.dosecharts::before,.categories::before,.mission::before,
.deepdive::before,.bestsellers::before,.testimonials::before{
  content:"";position:absolute;inset:-10% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 12% 22%, color-mix(in srgb,var(--glow-a) 17%,transparent), transparent 70%),
    radial-gradient(38% 44% at 88% 72%, color-mix(in srgb,var(--glow-b) 15%,transparent), transparent 70%);
}
.dosecharts  {--glow-a:var(--f-blue);  --glow-b:var(--f-peach);}
.categories  {--glow-a:var(--f-straw); --glow-b:var(--spindle);}
.mission     {--glow-a:var(--f-passion);--glow-b:var(--pink);}
.deepdive    {--glow-a:var(--f-peach); --glow-b:var(--edgewater);}
.bestsellers {--glow-a:var(--c-toffee);--glow-b:var(--c-dark);}
.testimonials{--glow-a:var(--pink);    --glow-b:var(--f-blue);}

/* fine grain so the grounds read as paper, never as flat fill */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:0.035;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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cards gain real elevation now that there is a z-axis */
.tile,.buy-card,.t-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;}
.tile:hover,.buy-card:hover{
  transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(68,0,153,.07),0 28px 52px -20px rgba(68,0,153,.42);
}

/* The float positions are solved against the wide layout. Below 1200px the
   product grids reflow to fewer columns, the gutters vanish and there is no
   longer anywhere a piece can sit that is not on top of a line of copy, so
   the depth there comes from the colour wash and the grain instead. The hero
   keeps its spill at every width: the artwork gives it room. */
@media (max-width:1199px){
  .field .fl{display:none;}
  .hero .fl{display:block;}
}
@media (max-width:900px){
  .hero .fl{width:calc(var(--w) * 0.62);margin-left:calc(var(--w) * -0.31);}
  .hero .fl.d3{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fl img{animation:none;}
  .fl{transform:none !important;}
}

/* ========================================================================
   CONVERSION LAYER — daily deal band, Buy 4 Get 1, bundle builder,
   cart drawer, sticky mobile bar.
   ===================================================================== */

/* ---------- daily deal band, directly under the hero ----------
   Pink, not ink: sitting the band in the same purple as the hero made the
   two read as one slab. Type is the brand ink on pink, which clears 4.9:1,
   so the small line is legible and not just decorative. */
.deal{background:var(--deal-bg);color:var(--ink);position:relative;overflow:hidden;}
.deal-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-block:26px;flex-wrap:wrap;}
.deal-kicker{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:8px;
  color:var(--ink);opacity:0.74;}
.deal-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 0 rgba(68,0,153,0.55);animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(68,0,153,0);}100%{box-shadow:0 0 0 0 rgba(68,0,153,0);}}
.deal h2{font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--ink);line-height:1;}
.deal p{margin:8px 0 0;font-size:0.95rem;color:var(--ink);opacity:0.88;max-width:46ch;}
.deal-right{display:flex;align-items:center;gap:18px;}
.deal-clock{text-align:right;color:var(--ink);}
.deal-clock-label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  letter-spacing:0.14em;text-transform:uppercase;opacity:0.7;}
.deal-clock-time{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.3rem;
  font-variant-numeric:tabular-nums;}
.btn-deal{background:var(--ink);color:#fff;white-space:nowrap;}
.btn-deal:hover{background:#2C0066;color:#fff;}
@media (max-width:760px){
  .deal-inner{flex-direction:column;align-items:flex-start;gap:16px;}
  .deal-right{width:100%;justify-content:space-between;}
}

/* ---------- Buy 4 Get 1 on every product card ---------- */
.buy-bundle{
  margin-top:10px;width:100%;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,var(--pink),#D45F98);color:#fff;
  padding:9px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.buy-bundle:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(212,95,152,.7);filter:brightness(1.05);}
.buy-bundle:active{transform:translateY(0);}
.bb-head{font-family:'roc-grotesk-condensed','Oswald',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:0.82rem;letter-spacing:0.02em;line-height:1;}
.bb-head em{font-style:normal;text-decoration:underline;text-underline-offset:2px;}
.bb-math{display:flex;align-items:baseline;gap:7px;font-family:'JetBrains Mono',monospace;font-size:0.66rem;}
.bb-math s{opacity:0.72;}
.bb-math b{font-size:0.82rem;}
.bb-math i{font-style:normal;background:rgba(255,255,255,.22);border-radius:20px;padding:1px 6px;}

/* ---------- mix and match builder ---------- */
.builder{padding-block:92px;}
.builder-head{max-width:620px;margin-bottom:26px;}
.builder-head h2{font-size:clamp(1.9rem,4vw,2.7rem);}
.builder-head p{color:var(--ink-soft);margin-top:10px;line-height:1.5;}
.builder-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.bt{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:20px;
  padding:8px 16px;font-size:0.78rem;font-weight:600;transition:all .2s ease;}
.bt:hover{border-color:var(--ink);}
.bt.active{background:var(--ink);color:#fff;border-color:var(--ink);}

.builder-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px;}
.slot{aspect-ratio:1/1;border-radius:14px;border:2px dashed var(--line);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;}
.slot img{width:78%;height:78%;object-fit:contain;}
.slot.filled{border-style:solid;border-color:transparent;background:#fff;box-shadow:var(--shadow);}
.slot .slot-n{position:absolute;top:7px;left:9px;font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;color:var(--ink-soft);}
.slot .slot-x{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;
  border:none;background:var(--ink);color:#fff;font-size:0.72rem;line-height:1;display:none;cursor:pointer;}
.slot.filled .slot-x{display:block;}
.slot.free{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 10%,#fff);}
.slot.free .slot-n{color:var(--pink);font-weight:700;}
.slot.free.unlocked{animation:pop .5s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.86);}60%{transform:scale(1.06);}100%{transform:scale(1);}}
.slot-free-tag{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  background:var(--pink);color:#fff;border-radius:20px;padding:2px 9px;
  font-family:'roc-grotesk-condensed','Oswald',sans-serif;text-transform:uppercase;
  font-size:0.6rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;}

.builder-progress{margin-bottom:26px;}
.bp-track,.dr-track{height:7px;border-radius:20px;background:var(--line);overflow:hidden;}
.bp-fill,.dr-fill{height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--f-blue),var(--f-peach),var(--pink));
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.bp-label,.dr-label{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--ink-soft);}
.bp-label.done,.dr-label.done{color:var(--pink);font-weight:700;}

.builder-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.bg-item{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.bg-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink);}
.bg-item img{width:100%;aspect-ratio:1/1;object-fit:contain;}
.bg-name{font-size:0.7rem;font-weight:700;line-height:1.2;}
.bg-price{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--ink-soft);}

.builder-foot{margin:4px 0 30px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);}
.bf-sum{display:flex;align-items:baseline;gap:10px;font-family:'JetBrains Mono',monospace;}
.bf-was{text-decoration:line-through;color:var(--ink-soft);font-size:0.9rem;}
.bf-now{font-size:1.5rem;font-weight:700;}
.bf-save:empty{display:none;}
.bf-save{background:var(--pink);color:#fff;border-radius:20px;padding:2px 10px;font-size:0.7rem;font-weight:700;}
.btn-bundle{background:var(--ink);color:#fff;border:none;}
.btn-bundle:disabled{opacity:.38;cursor:not-allowed;}
.btn-bundle:not(:disabled):hover{background:var(--pink);}

@media (max-width:980px){.builder-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:700px){
  .builder-slots{grid-template-columns:repeat(5,1fr);gap:7px;}
  .slot .slot-n{font-size:.55rem;}
  .slot-free-tag{font-size:.5rem;padding:1px 6px;}
  .builder-grid{grid-template-columns:repeat(3,1fr);}
  .builder-foot{flex-direction:column;align-items:stretch;}
  .btn-bundle{width:100%;text-align:center;}
}

/* ---------- cart drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(32,0,72,.46);z-index:900;
  opacity:0;transition:opacity .3s ease;}
.drawer-scrim.open{opacity:1;}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw);background:#fff;z-index:901;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.9,.2,1);
  box-shadow:-18px 0 50px -22px rgba(68,0,153,.5);}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line);}
.drawer-head strong{font-family:'roc-grotesk-condensed','Oswald',sans-serif;text-transform:uppercase;font-size:1.1rem;}
.drawer-x{border:none;background:none;font-size:1.6rem;line-height:1;color:var(--ink);}
.drawer-reward{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper-2);}
.drawer-items{flex:1;overflow-y:auto;padding:6px 20px;}
.di{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;}
.di img{width:56px;height:56px;object-fit:contain;background:var(--paper-2);border-radius:9px;flex:none;}
.di-body{flex:1;min-width:0;}
.di-name{font-size:0.82rem;font-weight:700;line-height:1.25;}
.di-meta{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--ink-soft);margin-top:2px;}
.di-qty{display:flex;align-items:center;gap:9px;margin-top:7px;}
.di-qty button{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:0.82rem;line-height:1;}
.di-qty button:hover{border-color:var(--ink);}
.di-qty span{font-family:'JetBrains Mono',monospace;font-size:0.75rem;min-width:14px;text-align:center;}
.di-price{font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:700;}
.di.free .di-price{color:var(--pink);}
.drawer-empty{text-align:center;color:var(--ink-soft);padding:46px 10px;font-size:0.9rem;}
.drawer-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.df-row{display:flex;justify-content:space-between;font-size:0.85rem;margin-bottom:7px;}
.df-save{color:var(--pink);font-weight:700;}
.df-total{font-weight:700;font-size:1.05rem;margin-bottom:14px;}
.btn-checkout{display:block;text-align:center;background:var(--ink);color:#fff;width:100%;}
.btn-checkout:hover{background:var(--pink);}
.df-note{font-size:0.66rem;color:var(--ink-soft);text-align:center;margin:10px 0 0;line-height:1.4;}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;box-shadow:0 -10px 28px -14px rgba(68,0,153,.6);}
.sb-left{display:flex;flex-direction:column;line-height:1.2;}
.sb-left span:first-child{font-family:'JetBrains Mono',monospace;font-size:0.64rem;opacity:.8;}
.sb-left span:last-child{font-weight:700;font-size:1rem;}
.sb-btn{background:#fff;color:var(--ink);border:none;border-radius:20px;padding:10px 20px;
  font-weight:700;font-size:0.8rem;text-transform:uppercase;}
@media (max-width:760px){.sticky-bar:not([hidden]){display:flex;}}

/* cart count in the nav */
.nav-cart .dot{transition:transform .3s cubic-bezier(.2,1.6,.4,1);}
.nav-cart .dot.bump{transform:scale(1.42);}

/* the builder and the deal band were added after the depth layer */
.builder{position:relative;isolation:isolate;}
.builder > *:not(.field){position:relative;z-index:3;}
.builder::before{content:"";position:absolute;inset:-10% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 14% 20%, color-mix(in srgb,var(--f-peach) 17%,transparent), transparent 70%),
    radial-gradient(38% 44% at 86% 74%, color-mix(in srgb,var(--f-blue) 15%,transparent), transparent 70%);}

/* ---------- stylised product riding along in the deal band ----------
   The art is a real column between the copy and the clock, not an overlay,
   so the three zones can never land on top of each other at any width.
   Each day brings its own three pieces, lit from behind to read on purple. */
.deal{min-height:176px;display:flex;align-items:center;}
.deal-inner{gap:22px;}
.deal-left{flex:1 1 360px;min-width:0;}
.deal-art{
  flex:0 0 232px;height:132px;position:relative;align-self:center;
  pointer-events:none;
}
.deal-art .da{
  position:absolute;top:50%;
  filter:drop-shadow(0 14px 24px rgba(68,0,153,.34));
  animation:dealbob 7s ease-in-out infinite alternate;
}
.deal-art .da::before{
  content:"";position:absolute;inset:-34%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 72%);
}
.deal-art .da img{width:100%;height:auto;display:block;}
.deal-art .da1{left:0;   width:104px;transform:translateY(-56%) rotate(-13deg);animation-delay:-1.2s;}
.deal-art .da2{left:84px;width:84px; transform:translateY(-30%) rotate(11deg); animation-delay:-3.4s;}
.deal-art .da3{left:152px;width:72px;transform:translateY(-66%) rotate(-7deg); animation-delay:-5.1s;opacity:.92;}
@keyframes dealbob{from{translate:0 0;}to{translate:0 -7px;}}
.deal-right{flex:0 0 auto;}

@media (max-width:1180px){.deal-art{flex-basis:170px;}.deal-art .da3{display:none;}}
@media (max-width:980px) and (min-width:761px){.deal-art{display:none;}}
@media (prefers-reduced-motion:reduce){.deal-art .da{animation:none;}}

/* each dose block floats its own product: micro cubes over the micro shelf,
   macro clusters over the macro shelf, bars over the chocolate shelf. */
.dose-product > *:not(.field){position:relative;z-index:3;}

/* empty builder slots hold the mark until something is dropped in */
.slot-mark{width:34%;opacity:.14;filter:none;animation:markbob 5.5s ease-in-out infinite alternate;}
.slot.free .slot-mark{opacity:.3;}
@keyframes markbob{from{transform:translateY(0) rotate(-3deg);}to{transform:translateY(-6px) rotate(3deg);}}
.slot.filled .slot-mark{display:none;}
@media (prefers-reduced-motion:reduce){.slot-mark{animation:none;}}

/* the footer ground is dark, so the same opacities read far louder there */
/* Chocolate is an opaque, low-chroma object: at the gummy depth opacities it
   stops reading as chocolate and starts reading as a grey smudge. Each layer
   gets a little more presence so the brown survives the distance. */
/* The 20% code sits right above the checkout button, where the decision is
   actually made, not buried in a banner at the top of the page. */
.df-code{margin:10px 0 0;text-align:center;font-size:0.85rem;line-height:1.45;
  color:var(--ink);background:color-mix(in srgb, var(--pink) 16%, #fff);
  border:1px dashed color-mix(in srgb, var(--pink) 55%, #fff);
  border-radius:10px;padding:9px 12px;
  font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}
.df-code b{font-weight:800;letter-spacing:.01em;}
.marquee b{font-weight:800;}
.fl.d1.cho{opacity:.58;filter:blur(1.1px) drop-shadow(0 8px 14px rgba(40,18,8,.18));}
.fl.d2.cho{opacity:.80;filter:blur(0.3px) drop-shadow(0 12px 20px rgba(40,18,8,.22));}
.fl.d3.cho{opacity:1;filter:drop-shadow(0 18px 26px rgba(40,18,8,.28));}
footer /* The 20% code sits right above the checkout button, where the decision is
   actually made, not buried in a banner at the top of the page. */
.df-code{margin:10px 0 0;text-align:center;font-size:0.85rem;line-height:1.45;
  color:var(--ink);background:color-mix(in srgb, var(--pink) 16%, #fff);
  border:1px dashed color-mix(in srgb, var(--pink) 55%, #fff);
  border-radius:10px;padding:9px 12px;
  font-family:'roc-grotesk','Plus Jakarta Sans',sans-serif;}
.df-code b{font-weight:800;letter-spacing:.01em;}
.marquee b{font-weight:800;}
.fl.d1.cho{opacity:.38;} footer .fl.d2.cho{opacity:.56;} footer .fl.d3.cho{opacity:.72;}
footer .fl.d1{opacity:.26;}
footer .fl.d2{opacity:.42;}
footer .fl.d3{opacity:.60;}

/* ---------- phone: the daily deal band ---------- */
@media (max-width:760px){
  /* The art is absolutely positioned inside a fixed-height column, which on a
     phone reserved a tall empty block of pink with nothing in it. Stack the
     band instead and let the gummies sit inline between the copy and the CTA. */
  .deal{min-height:0;}
  .deal-inner{flex-direction:column;align-items:flex-start;gap:16px;
    padding-block:26px;}
  .deal-left{flex:0 0 auto;width:100%;}
  .deal p{max-width:none;}
  .deal-art{display:block;flex:0 0 auto;width:100%;height:86px;margin:4px 0 0;}
  .deal-art .da1{left:2%;  width:82px;transform:translateY(-50%) rotate(-13deg);}
  .deal-art .da2{left:27%; width:68px;transform:translateY(-26%) rotate(11deg);}
  .deal-art .da3{display:block;left:50%; width:60px;transform:translateY(-58%) rotate(-7deg);}
  .deal-right{width:100%;justify-content:space-between;gap:12px;}
  .deal-clock{text-align:left;}
  .deal-clock-time{font-size:1.15rem;}
  .btn-deal{white-space:nowrap;}
}