:root{
    --orange:#E9961C;
    --blue:#1E4B7A;
    --berry:#A6244E;
    --ink:#111111;
    --bg:#E6E6E6;
    --bg-2:#CFCFCF;
    --muted:#3A3A3A;
    --font:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  [hidden]{display:none!important}
  html,body{height:100%}
  body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}

  /* ---------- NAV ---------- */
  .nav{
    position:relative;z-index:10;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:26px 5vw 0 4.7vw;
    font-size:15px;
  }
  .nav__logo{
    color:var(--ink);text-decoration:none;justify-self:center;display:block;
    transition:color .8s ease;            /* tracks the carousel flavour */
  }
  .nav__logo .wordmark{height:34px;width:auto;display:block;overflow:visible;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .nav__logo:hover .wordmark{transform:scale(1.04)}
  /* the rings ripple outward from the centre on hover */
  .nav__logo .wordmark g circle{transform-box:fill-box;transform-origin:center;opacity:1}
  .nav__logo:hover .wordmark g circle{animation:ripple 1.1s cubic-bezier(.22,.61,.36,1)}
  .nav__logo:hover .wordmark g circle:nth-child(2){animation-delay:.09s}
  .nav__logo:hover .wordmark g circle:nth-child(3){animation-delay:.18s}
  @keyframes ripple{0%{opacity:.2;transform:scale(.72)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

  .nav__links{display:flex;gap:14px;list-style:none}
  .nav__links--left{justify-self:end;margin-right:54px}
  .nav__links a{
    position:relative;display:flex;align-items:center;gap:7px;
    color:#3A3A3A;text-decoration:none;white-space:nowrap;
    padding:9px 12px;
  }

  /* the label rolls up and a darker copy rises from below */
  .roll{display:block;position:relative;overflow:hidden;height:1.45em}
  .roll span{
    display:block;line-height:1.45;
    transition:transform .44s cubic-bezier(.62,.02,.24,1);
  }
  /* same weight in both copies, or the wider one would be clipped by the mask */
  .roll span + span{
    position:absolute;left:0;top:0;width:100%;
    transform:translateY(102%);color:var(--ink);
  }
  .nav__links a:hover .roll span{transform:translateY(-102%)}
  .nav__links a:hover .roll span + span{transform:translateY(0)}
  .nav__links a:hover,.nav__links a[aria-expanded="true"]{color:var(--ink)}
  .nav__links a[aria-current]{color:var(--ink);font-weight:600}
  /* a dot marks the page you are on */
  .nav__links a[aria-current]::after{
    content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;border-radius:50%;
    background:currentColor;transform:translateX(-50%);
  }


  .chev{
    display:inline-block;width:7px;height:7px;flex:none;
    border-right:1.5px solid;border-bottom:1.5px solid;
    transform:translateY(-3px) rotate(45deg);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  [aria-expanded="true"] .chev{transform:translateY(1px) rotate(-135deg)}
  .nav__right{justify-self:stretch;display:flex;gap:6px;align-items:center;margin-left:54px}
  .nav__right .nav__links{margin-right:auto}
  .nav__right > a span{display:none}
  .nav__right > a{
    position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
    color:var(--ink);text-decoration:none;
    transition:background .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);
  }
  .nav__right > a:hover{background:rgba(17,17,17,.075);transform:translateY(-2px)}
  .nav__right > a:active{transform:translateY(0)}
  .nav__right svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  .nav__right > a:hover svg{transform:scale(1.06)}
  .cart{position:relative}
  /* white disc + black digit: under the nav's difference blend this inverts to a dark disc
     on light backdrops and a light disc on dark ones, so the count always reads */
  .cart__count{
    position:absolute;top:2px;right:2px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;
    width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .cart__count.is-bump{transform:scale(1.35)}

  /* ---------- SHOP MEGA MENU ---------- */
  .menu{
    position:absolute;left:4.7vw;right:5vw;top:calc(100% + 18px);z-index:10;
    background:#fff;border-radius:10px;padding:28px;
    max-height:calc(100vh - 130px);overflow-y:auto;
    box-shadow:0 30px 80px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06);
    font-size:14px;
    animation:menu-in .2s ease;
  }
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .menu__top{display:grid;grid-template-columns:290px 330px 330px 1fr;gap:44px;align-items:start}

  .menu__cats{list-style:none}
  .menu__cats li{border-bottom:1px solid #E6E6E6}
  .menu__cats li.is-active{background:linear-gradient(180deg,#F5F5F5,#EDEDED);border-radius:8px;border-bottom:0;margin-bottom:6px}
  .menu__cats a{display:block;padding:16px 20px;color:var(--ink);text-decoration:none}
  .menu__cats b{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em}
  .menu__cats span{display:block;font-size:13.5px;color:#4A4A4A;margin-top:3px}
  .menu__cats a:hover b{text-decoration:underline}
  .menu__cat{display:block;padding:16px 20px;position:relative}
  .menu__cats .is-soon{cursor:not-allowed}
  .menu__cats .is-soon b,.menu__cats .is-soon span{color:#9A9A9A}
  .menu__cats .is-soon i{
    position:absolute;right:16px;top:18px;font-style:normal;font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#B5B5B5;padding:4px 8px;border-radius:4px;
  }

  .menu__label{font-size:16px;font-weight:500;margin:6px 0 14px}
  .menu__item{
    position:relative;display:grid;grid-template-columns:66px 1fr;gap:16px;align-items:center;
    background:#F5F5F5;border-radius:8px;padding:12px;margin-bottom:10px;
    color:var(--ink);text-decoration:none;
  }
  .menu__item:hover{background:#EEEEEE}
  .menu__thumb{
    height:66px;border-radius:6px;background:#E3E3E3;
    display:grid;place-items:center;text-align:center;
    font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#7A7A7A;padding:4px;line-height:1.3;
  }
  .menu__item b{display:block;font-size:15px;font-weight:400;line-height:1.25;letter-spacing:-.01em}
  .menu__item small{display:block;font-size:12px;color:#3A3A3A;margin-top:6px}
  .menu__new{
    position:absolute;right:0;top:-8px;font-style:normal;font-size:12px;font-weight:500;
    background:var(--ink);color:#fff;padding:5px 9px;border-radius:4px;text-transform:uppercase;letter-spacing:.02em;
  }

  .menu__promo{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);text-decoration:none;justify-self:center;width:100%;max-width:340px}
  .menu__pill{font-style:normal;font-size:13px;font-weight:500;background:var(--ink);color:#fff;padding:7px 14px;border-radius:5px;text-transform:uppercase;letter-spacing:.02em}
  .menu__promo-img{
    width:100%;height:220px;margin:20px 0 26px;border-radius:8px;background:#F1F1F1;
    display:grid;place-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8A8A8A;
  }
  .menu__promo b{font-size:24px;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
  .menu__promo strong{font-weight:700}
  .menu__promo u{margin-top:10px;font-size:17px;text-transform:uppercase;text-underline-offset:4px}

  @media (max-width:1280px){
    .menu__top{grid-template-columns:240px 1fr 1fr;gap:28px}
    .menu__promo{grid-column:1/-1;max-width:100%}
    .menu__promo-img{height:160px}
  }
  @media (max-width:860px){
    .menu{display:none}
  }
  @media (prefers-reduced-motion:reduce){.menu{animation:none}}

  /* ---------- LEFT COPY ---------- */
  .copy{
    position:relative;z-index:2;
    padding:110px 0 0 4.7vw;
    max-width:720px;
  }
  .eyebrow{font-size:12px;letter-spacing:.42em;text-transform:uppercase;font-weight:500;margin-bottom:30px}
  .headline{
    font-weight:800;
    font-size:clamp(56px,6.4vw,112px);
    line-height:.85;
    letter-spacing:-.045em;
  }
  .headline .w1{display:block;color:var(--ink)}
  .headline .w2{display:block}
  .headline .o{color:var(--orange)}
  .headline .b{color:var(--blue)}
  .headline .r{color:var(--berry)}
  .headline .k{color:var(--ink)}
  .sub{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:22px 0 0;max-width:520px;font-weight:400}

  .feats{display:flex;gap:40px;margin-top:44px;list-style:none}
  .feats li{display:flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;font-weight:500}
  .feats svg{width:30px;height:30px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}

  .ctas{display:flex;gap:16px;margin-top:44px}
  .btn{
    font:inherit;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    padding:20px 52px;border:1.5px solid var(--ink);cursor:pointer;
    display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
    transition:background .25s,color .25s;
  }
  .btn--dark{background:var(--ink);color:#fff}
  .btn--dark:hover{background:#333}
  .btn--ghost{background:transparent}
  .btn--ghost:hover{background:var(--ink);color:#fff}
  .btn svg{width:18px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}


  /* ---------- RIGHT SIDE LABELS ---------- */
  .side{
    display:none; /* ponytail: overlaps the hero video; re-enable if video shrinks */
    position:absolute;right:3.2vw;top:19vh;z-index:2;
    font-size:14px;letter-spacing:.24em;text-transform:uppercase;line-height:1.45;font-weight:500;color:#2B2B2B;
  }
  .side p{padding-bottom:22px;margin-bottom:24px;position:relative}
  .side p:not(:last-child)::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:1px;background:#2B2B2B}

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .nav__links{gap:6px}
    .nav__links--left{margin-right:26px}
    .nav__links a{padding:9px 8px}
    .nav__right{gap:4px;margin-left:26px}
    .side{display:none}
  }
  @media (max-width:860px){
    .nav{order:1;grid-template-columns:auto 1fr}
    .nav__links{display:none}
    .nav__logo{justify-self:start}
    .nav__right{gap:20px;margin-left:0;justify-content:flex-end}
    .nav__right a span{display:none}
    .copy{order:2;padding:44px 5vw 28px;max-width:100%}
    .sub{font-size:20px}
    .feats{flex-wrap:wrap;gap:20px 28px}
    .ctas{flex-wrap:wrap}
    .btn{padding:16px 30px}
  }


/* ================= FLAVORS ================= */
.flavors{
  background:linear-gradient(180deg,#EAEAEA 0%,#F3F3F3 12%,#F3F3F3 100%);
  padding:80px 4.7vw 64px;
  color:var(--ink);
}

/* head: headline left, supporting line right, on one baseline */
.flavors__head{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;
  padding-bottom:28px;border-bottom:1px solid rgba(17,17,17,.18);
}
.flavors__head h2{font-weight:800;font-size:clamp(36px,3.8vw,60px);line-height:.92;letter-spacing:-.045em}
.flavors__head p{font-size:15px;line-height:1.5;max-width:44ch;color:#3A3A3A;justify-self:end}

/* grid: three columns divided by hairlines */
.flavors__grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.flavor{
  position:relative;
  padding:0 28px 28px 0;
  display:grid;
  grid-template-rows:220px auto 3em auto auto; /* image | name | 2-line desc | facts | buy – same rows in every column */
  row-gap:0;
}
.flavor + .flavor{padding-left:28px;border-left:1px solid rgba(17,17,17,.18)}

/* product: fixed box so all three shots sit at the same size and baseline */
.flavor__visual{
  position:relative;
  margin:28px 0 0;
  height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  perspective:900px;
}
/* glow behind the product, in the stick's own colour: wide soft bloom + tighter core */
.flavor__visual::before,
.flavor__visual::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  transition:opacity .4s,transform .4s;
}
.flavor__visual::before{                                  /* wide bloom */
  left:0;right:0;top:8%;bottom:2%;
  background:radial-gradient(closest-side,var(--tint) 0%,transparent 70%);
  filter:blur(28px);opacity:.55;
  animation:breathe 6s ease-in-out infinite;
}
.flavor__visual::after{                                   /* saturated core */
  left:22%;right:22%;top:30%;bottom:14%;
  background:radial-gradient(closest-side,var(--tint-strong) 0%,transparent 72%);
  filter:blur(18px);opacity:.45;
  animation:breathe 6s ease-in-out -3s infinite;
}
.flavor__visual.is-hover::before{opacity:.8;transform:scale(1.08)}
.flavor__visual.is-hover::after{opacity:.7;transform:scale(1.12)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.flavor--berry{--tint:#F2A9B5;--tint-strong:#E0173A}
.flavor--orange{--tint:#FFD1A3;--tint-strong:#EE7A12}
.flavor--grape{--tint:#C9BEF0;--tint-strong:#5A3FBF}
.flavor__visual img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:bottom;display:block;
  transform-style:preserve-3d;
  transition:transform .15s ease-out,filter .3s;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.2));
  will-change:transform;
}
.flavor__visual.is-hover img{filter:drop-shadow(0 36px 30px rgba(0,0,0,.26))}

.flavor h3{font-weight:800;font-size:clamp(22px,1.5vw,26px);letter-spacing:-.04em;line-height:1;margin-top:20px}
.flavor__desc{font-size:14px;line-height:1.45;color:#3A3A3A;margin-top:8px;max-width:38ch;align-self:start}

/* nutrition strip from the pack */
.flavor__facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(17,17,17,.18);
}
.flavor__facts dt{font-size:11px;color:#6B6B6B}
.flavor__facts dd{font-size:13px;font-weight:600;margin-top:3px;letter-spacing:-.01em}

.flavor__buy{display:flex;align-items:center;justify-content:space-between;padding-top:20px}
.flavor__price{font-size:18px;font-weight:600;letter-spacing:-.02em}
.flavor__price span{font-size:12px;font-weight:400;color:#6B6B6B;margin-left:8px}
.flavor__cta{
  font-size:13px;font-weight:600;color:#fff;background:var(--ink);text-decoration:none;
  padding:10px 18px;border-radius:999px;
  transition:background .2s,transform .2s;
}
.flavor__cta:hover{background:#2C2C2C}
.flavor__cta:focus-visible,.flavors__all:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.flavors__foot{
  max-width:1320px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:20px;border-top:1px solid rgba(17,17,17,.18);
  font-size:14px;color:#6B6B6B;
}
.flavors__all{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px}

@media (prefers-reduced-motion:reduce){
  .flavor__visual img{transition:none}
  .flavor__visual::before,.flavor__visual::after{animation:none}
}
@media (max-width:1100px){
  .flavors{padding:80px 4.7vw 64px}
  .flavors__head{grid-template-columns:1fr;gap:20px}
  .flavors__head p{justify-self:start}
  .flavors__grid{grid-template-columns:1fr}
  .flavor{padding:0 0 40px;grid-template-rows:260px auto auto auto auto}
  .flavor + .flavor{padding-left:0;border-left:0;padding-top:40px;border-top:1px solid rgba(17,17,17,.18)}
  .flavor__visual{margin-top:24px;max-width:420px;width:100%;justify-self:center}
}
@media (max-width:560px){
  .flavors__head h2{font-size:40px}
  .flavor__buy{flex-direction:column;align-items:flex-start;gap:16px}
  .flavors__foot{flex-direction:column;align-items:flex-start}
}

/* ================= SHARED SECTION FURNITURE ================= */
/* ponytail: one head + one reveal rule shared by every new section. */
.sec__head{
  max-width:1320px;margin:0 auto 32px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;
  padding-bottom:24px;border-bottom:1px solid rgba(17,17,17,.18);
}
.sec__head h2{font-weight:800;font-size:clamp(32px,3.2vw,52px);line-height:.94;letter-spacing:-.045em}
.sec__head p{font-size:15px;line-height:1.5;max-width:44ch;color:#3A3A3A;justify-self:end}
.sec__head--row{align-items:center}

/* scroll reveal – opacity + small rise, staggered by --d, plays once */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ================= POURQUOI ================= */
.why{background:#F3F3F3;padding:72px 4.7vw 64px}
.why__grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.why__item{padding:8px 34px 0 0;display:grid;grid-template-rows:72px auto auto;align-content:start}
.why__item + .why__item{padding-left:34px;border-left:1px solid rgba(17,17,17,.18)}
.why__stat{
  font-weight:800;font-size:clamp(44px,4.4vw,68px);letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;align-self:end;
}
.why__icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(17,17,17,.2);align-self:end;
}
.why__icon svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why__item h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:16px}
.why__item p:last-child{font-size:14.5px;line-height:1.5;color:#3A3A3A;margin-top:8px;max-width:36ch}

/* ================= PACKS ================= */
.packs{background:#EDEDED;padding:72px 4.7vw 64px}
.packs__grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pack{
  position:relative;background:#fff;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow .3s,transform .3s;
}
.pack:hover{box-shadow:0 18px 40px rgba(0,0,0,.12);transform:translateY(-3px)}
.pack__media{aspect-ratio:4/3;overflow:hidden;background:#F1F1F1}
.pack__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pack:hover .pack__media img{transform:scale(1.045)}
.pack__tag{
  position:absolute;top:12px;left:12px;z-index:1;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:5px 10px;border-radius:4px;
}
.pack__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.pack__body h3{font-size:21px;font-weight:600;letter-spacing:-.025em}
.pack__what{font-size:13.5px;color:#5A5A5A;margin-top:5px}
.pack__price{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:14px}
.pack__price s{font-size:14px;font-weight:400;color:#9A9A9A;margin-left:7px}
.pack__cta{
  margin-top:16px;text-align:center;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:11px 18px;
  transition:background .2s,color .2s;
}
.pack__cta:hover{background:var(--ink);color:#fff}
.pack__cta--dark{background:var(--ink);color:#fff}
.pack__cta--dark:hover{background:#2C2C2C;border-color:#2C2C2C}

/* ================= BIENFAITS ================= */
.benefits{background:#F3F3F3;padding:72px 4.7vw 64px}
.benefits__in{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:56px;align-items:center;
}
.benefits__media{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#E4E4E4}
.benefits__media img{width:100%;height:100%;object-fit:cover;object-position:26% 42%;display:block}
.benefits__body h2{font-weight:800;font-size:clamp(30px,3vw,46px);line-height:.96;letter-spacing:-.045em}
.benefits__intro{font-size:15px;line-height:1.5;color:#3A3A3A;margin-top:14px;max-width:46ch}

.acc{margin-top:26px;border-top:1px solid rgba(17,17,17,.18)}
.acc__item{border-bottom:1px solid rgba(17,17,17,.18)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:inherit;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  background:none;border:0;padding:18px 0;cursor:pointer;text-align:left;
}
.acc__btn i{position:relative;width:14px;height:14px;flex:none}
.acc__btn i::before,.acc__btn i::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.6px;background:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.acc__btn i::after{transform:rotate(90deg)}
.acc__item.is-open .acc__btn i::after{transform:rotate(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p{font-size:14.5px;line-height:1.55;color:#3A3A3A;max-width:52ch;padding-bottom:18px}
@media (prefers-reduced-motion:reduce){
  .acc__panel{transition:none}
  .acc__btn i::before,.acc__btn i::after{transition:none}
}

/* ================= AVIS ================= */
.reviews{background:#EDEDED;padding:72px 4.7vw 64px;overflow:hidden}
.reviews__tools{display:flex;align-items:center;gap:24px;justify-self:end}
.reviews__score{font-size:14px;color:#3A3A3A;white-space:nowrap}
.reviews__score b{font-weight:600;color:var(--ink)}
.reviews__nav{display:flex;gap:8px}
.reviews__nav button{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.reviews__nav button:hover{background:var(--ink);color:#fff}
.reviews__nav svg{width:17px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reviews__row{
  max-width:1320px;margin:0 auto;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:4px;
}
.reviews__row::-webkit-scrollbar{display:none}
.review{
  scroll-snap-align:start;
  background:#fff;border-radius:12px;padding:22px 22px 20px;
  display:flex;flex-direction:column;
}
.review__stars{color:var(--orange);font-size:15px;letter-spacing:.16em}
.review blockquote{font-size:15.5px;line-height:1.5;letter-spacing:-.01em;margin-top:12px;flex:1}
.review figcaption{font-size:13.5px;font-weight:600;margin-top:18px}
.review figcaption span{display:block;font-weight:400;color:#7A7A7A;margin-top:2px}

/* ================= FOOTER ================= */
.foot{background:#0C0C0C;color:#fff;padding:82px 4.7vw 0;overflow:hidden}
.foot__top{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr .8fr .8fr .8fr 1.3fr;gap:40px;
}
.foot__logo{font-weight:800;font-size:28px;letter-spacing:-.04em;position:relative;display:inline-block}
.foot__logo i{position:absolute;right:-13px;top:3px;width:9px;height:9px;border-radius:50%;background:#fff}
.foot__tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#C9C9C9;margin-top:10px}
.foot__blurb{font-size:14px;line-height:1.5;color:#B4B4B4;margin-top:18px;max-width:34ch}
.foot__form{
  display:flex;align-items:center;gap:8px;margin-top:22px;max-width:330px;
  border:1px solid #3A3A3A;border-radius:999px;padding:5px 5px 5px 20px;
  transition:border-color .25s;
}
.foot__form:focus-within{border-color:#8A8A8A}
.foot__form input{
  flex:1;min-width:0;font:inherit;font-size:14px;color:#fff;background:none;border:0;padding:10px 0;
}
.foot__form input::placeholder{color:#8A8A8A}
.foot__form input:focus{outline:none}
.foot__form button{
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;flex:none;
  background:#fff;display:grid;place-items:center;transition:background .2s;
}
.foot__form button:hover{background:var(--orange)}
.foot__form svg{width:16px;height:11px;stroke:#0C0C0C;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foot__note{font-size:12.5px;line-height:1.5;color:#8A8A8A;margin-top:12px;max-width:34ch}
.foot__note.is-ok{color:var(--orange)}
.foot__social{list-style:none;display:flex;gap:18px;margin-top:24px}
.foot__social a{display:grid;place-items:center;color:#fff;opacity:.78;transition:opacity .2s,transform .2s}
.foot__social a:hover{opacity:1;color:#fff;transform:translateY(-2px)}
.foot__social svg{width:20px;height:20px;fill:currentColor;stroke:none}

.foot__col h3{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #3A3A3A;display:inline-block}
.foot__col ul{list-style:none;margin-top:18px;display:grid;gap:13px}
.foot__col a{font-size:14px;color:#C9C9C9;text-decoration:none;transition:color .2s}
.foot__col a:hover{color:#fff}

.foot__cta{border-left:1px solid #2A2A2A;padding-left:40px}
.foot__kicker{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.foot__big{font-weight:800;font-size:clamp(28px,2.9vw,48px);line-height:.94;letter-spacing:-.045em;text-transform:uppercase;margin-top:16px;color:rgba(255,255,255,.46)}
.foot__big span{color:#fff}
.foot__shop{
  display:inline-flex;align-items:center;gap:12px;margin-top:20px;
  font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:#fff;color:#0C0C0C;padding:17px 32px;border-radius:999px;
  transition:transform .2s,filter .2s;
}
.foot__shop:hover{transform:translateY(-2px);filter:brightness(1.07)}
.foot__shop svg{width:17px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot__marks{list-style:none;display:flex;gap:22px;margin-top:26px}
.foot__marks li{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;line-height:1.4;color:#C9C9C9}
.foot__marks svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.foot__wordmark{
  font-weight:800;font-size:16.8vw;line-height:.78;letter-spacing:-.05em;white-space:nowrap;
  margin:44px -4.9vw -2vw;text-align:center;
  color:transparent;background:linear-gradient(180deg,#5E5E5E 0%,#2A2A2A 62%,#181818 100%);
  -webkit-background-clip:text;background-clip:text;
  user-select:none;
}
.foot__bottom{
  max-width:1320px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 0 26px;position:relative;
}
.foot__stayrow{display:flex;align-items:center;gap:14px}
.foot__badge{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);color:#fff;
}
.foot__badge svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round}
.foot__stay{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1.7;color:#8A8A8A}
.foot__legal{list-style:none;display:flex;gap:22px;margin-left:auto;align-items:center}
.foot__legal a{font-size:13px;color:#8A8A8A;text-decoration:none;transition:color .2s}
.foot__legal a:hover{color:#fff}
.foot__copy{font-size:13px;color:#8A8A8A;position:relative;padding-left:26px}
.foot__copy::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.22)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sec__head{grid-template-columns:1fr;gap:16px}
  .sec__head p{justify-self:start}
  .sec__head--row{grid-template-columns:1fr}
  .reviews__tools{justify-self:start}
  .why__grid{grid-template-columns:1fr;gap:28px}
  .why__item{padding:0 0 28px;grid-template-rows:auto auto auto}
  .why__item + .why__item{padding-left:0;border-left:0;border-top:1px solid rgba(17,17,17,.18);padding-top:28px}
  .packs__grid{grid-template-columns:1fr;gap:16px}
  .benefits__in{grid-template-columns:1fr;gap:32px}
  .benefits__media{max-width:520px}
  .foot__top{grid-template-columns:1fr 1fr;gap:36px}
  .foot__brand{grid-column:1/-1}
  .foot__cta{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid #2A2A2A;padding-top:32px}
  .foot__wordmark{font-size:19vw;margin-bottom:-2.4vw}
}
@media (max-width:640px){
  .why,.packs,.benefits,.reviews{padding:52px 5vw 44px}
  .foot{padding:52px 5vw 0}
  .reviews__row{grid-auto-columns:minmax(238px,82%)}
  .foot__top{grid-template-columns:1fr}
  .foot__marks{flex-wrap:wrap;gap:16px}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .foot__legal{margin-left:0}
  .foot__copy{padding-left:0}
  .foot__copy::before{display:none}
}

/* ================= PILL BUTTON (shared: label + circular arrow) ================= */
.fh__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{
  display:inline-flex;align-items:center;gap:16px;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  border:0;border-radius:999px;cursor:pointer;padding:7px 8px 7px 24px;
  transition:background .25s,color .25s,transform .2s;
}
.pill i{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;transition:transform .3s cubic-bezier(.22,.61,.36,1),background .25s;
}
.pill svg{width:17px;height:12px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill--dark{background:var(--ink);color:#fff}
.pill--dark:hover{transform:translateY(-2px)}
.pill--dark:hover i{transform:translateX(4px)}
.pill--dark.is-added{background:#2E9E4F}
.pill--soft{background:rgba(17,17,17,.07);color:var(--ink);padding:16px 24px}
.pill--lg{font-size:15px;padding:8px 9px 8px 30px;gap:18px}
.pill--lg i{width:44px;height:44px}
.pill--soft:hover{background:rgba(17,17,17,.13);transform:translateY(-2px)}

/* ================= OVERLAY + PANELS ================= */
.ovl{
  position:fixed;inset:0;z-index:180;
  background:rgba(12,12,12,.44);
  opacity:0;transition:opacity .3s ease;
}
.ovl.is-open{opacity:1}

/* ---- right-hand drawers (cart, search) ---- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:200;
  width:min(430px,100vw);
  background:#F6F6F6;color:var(--ink);
  display:flex;flex-direction:column;
  box-shadow:-24px 0 64px rgba(0,0,0,.2);
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.drawer.is-open{transform:none}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px 18px;border-bottom:1px solid rgba(17,17,17,.14);
}
.drawer__head h2{font-size:19px;font-weight:600;letter-spacing:-.02em}
.drawer__head h2 span{color:#7A7A7A;font-weight:400}
.drawer__close{
  width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer;
  border:1.5px solid rgba(17,17,17,.22);background:transparent;color:var(--ink);
  display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s;
}
.drawer__close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.drawer__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

.drawer__body{flex:1;overflow-y:auto;padding:18px 24px 24px}

/* free-shipping progress */
.ship{padding:16px 24px;border-bottom:1px solid rgba(17,17,17,.14);background:#F0F0F0}
.ship__msg{font-size:13px;color:#3A3A3A}
.ship__msg b{font-weight:600;color:var(--ink)}
.ship__bar{height:4px;border-radius:999px;background:rgba(17,17,17,.12);margin-top:10px;overflow:hidden}
.ship__bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--orange);transition:width .45s cubic-bezier(.22,.61,.36,1)}
.ship.is-free .ship__bar i{background:#2E9E4F}

/* cart line */
.line{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.12)}
.line:first-child{padding-top:2px}
.line__img{width:74px;height:82px;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.line__img img{width:100%;height:100%;object-fit:contain;padding:6px}
.line__info h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.line__meta{font-size:12.5px;color:#6B6B6B;margin-top:3px}
.qty{display:inline-flex;align-items:center;gap:0;margin-top:12px;border:1.5px solid rgba(17,17,17,.18);border-radius:999px;overflow:hidden}
.qty button{
  width:28px;height:28px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:15px;line-height:1;
  color:var(--ink);display:grid;place-items:center;transition:background .18s;
}
.qty button:hover{background:rgba(17,17,17,.08)}
.qty span{min-width:26px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.line__end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.line__price{font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.line__rm{
  font:inherit;font-size:12px;color:#7A7A7A;background:none;border:0;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px;transition:color .2s;
}
.line__rm:hover{color:var(--berry)}

/* empty state */
.empty{text-align:center;padding:56px 10px}
.empty svg{width:44px;height:44px;stroke:#9A9A9A;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.empty h3{font-size:17px;font-weight:600;margin-top:16px}
.empty p{font-size:14px;color:#6B6B6B;margin-top:6px}
.empty button{
  margin-top:20px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 24px;
  transition:background .2s;
}
.empty button:hover{background:#2C2C2C}

/* drawer footer */
.drawer__foot{padding:18px 24px 22px;border-top:1px solid rgba(17,17,17,.14);background:#F0F0F0}
.drawer__row{display:flex;align-items:baseline;justify-content:space-between;font-size:15px}
.drawer__row b{font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.drawer__row--muted{font-size:12.5px;color:#6B6B6B;margin-top:6px}
.drawer__cta{
  width:100%;margin-top:16px;height:50px;border:0;border-radius:8px;cursor:pointer;
  background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:600;
  transition:background .2s,transform .1s;
}
.drawer__cta:hover{background:#2C2C2C}
.drawer__cta:active{transform:scale(.995)}
.drawer__cta.is-done{background:#2E9E4F}
.drawer__fine{font-size:11.5px;color:#7A7A7A;text-align:center;margin-top:10px}

/* ---- search ---- */
.search__field{
  display:flex;align-items:center;gap:10px;margin:16px 24px 0;
  border:1.5px solid rgba(17,17,17,.18);border-radius:999px;padding:0 14px;background:#fff;
  transition:border-color .2s;
}
.search__field:focus-within{border-color:var(--ink)}
.search__field > svg{width:18px;height:18px;stroke:#6B6B6B;fill:none;stroke-width:1.7;stroke-linecap:round;flex:none}
.search__field input{flex:1;min-width:0;font:inherit;font-size:15px;border:0;background:none;padding:13px 0;color:var(--ink)}
.search__field input:focus{outline:none}
.search__field input::-webkit-search-cancel-button,
.search__field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search__field button{
  width:22px;height:22px;border:0;background:rgba(17,17,17,.1);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;flex:none;color:var(--ink);
}
.search__field button svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.search__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7A7A7A;font-weight:600}
.search__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.search__chips button{
  font:inherit;font-size:13px;cursor:pointer;color:var(--ink);
  background:#fff;border:1px solid rgba(17,17,17,.14);border-radius:999px;padding:8px 14px;
  transition:background .2s,border-color .2s;
}
.search__chips button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.search__results{list-style:none;margin-top:18px;display:grid;gap:8px}
.search__results a{
  display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;
  background:#fff;border-radius:10px;padding:10px 14px 10px 10px;text-decoration:none;color:var(--ink);
  transition:background .2s;
}
.search__results a:hover{background:#ECECEC}
.search__results .thumb{width:54px;height:58px;border-radius:6px;background:#F1F1F1;display:grid;place-items:center;overflow:hidden}
.search__results .thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.search__results b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.search__results small{display:block;font-size:12.5px;color:#6B6B6B;margin-top:2px}
.search__results i{font-style:normal;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.search__none{font-size:14px;color:#6B6B6B;margin-top:18px}

/* ---- account modal ---- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;overflow-y:auto}
.modal__panel{
  width:min(440px,100%);background:#FAFAF8;border-radius:22px;padding:34px 30px 28px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.8) inset;
  font-family:"Inter Tight",var(--font);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__close{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:#EFEDEA;color:#111;transition:background .2s,transform .25s;
}
.modal__close:hover{background:#E4E1DD;transform:rotate(90deg)}
.modal__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.modal__panel h2{font-family:"Source Serif 4",Georgia,serif;font-size:40px;font-weight:700;letter-spacing:-.025em;line-height:1.05;padding-right:48px}
.modal__sub{font-size:15px;line-height:1.5;color:#555;margin-top:10px;max-width:34ch}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#EEECE9;border-radius:16px;padding:5px;margin-top:22px}
.tabs button{
  font:inherit;font-size:15px;font-weight:500;cursor:pointer;color:#555;
  background:transparent;border:0;border-radius:12px;height:46px;transition:background .25s,color .25s,box-shadow .25s;
}
.tabs button.is-active{background:#fff;color:#111;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)}

.acc-form{display:grid;gap:16px;margin-top:22px}
.acc-form > label:not(.check){display:grid;gap:9px;font-size:14px;font-weight:600;color:#111}
.fld{position:relative;display:block}
.fld > svg{position:absolute;left:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);fill:none;stroke:#666;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fld input{
  width:100%;height:52px;padding:0 48px 0 50px;font:400 15px "Inter Tight",var(--font);color:#111;
  background:#fff;border:1px solid #E2E0DC;border-radius:12px;transition:border-color .2s,box-shadow .2s;
}
.fld input::placeholder{color:#8a8a8a}
.fld input:focus{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.fld__eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:none;cursor:pointer;display:grid;place-items:center;color:#555}
.fld__eye:hover{background:#F2F0ED;color:#111}
.fld__eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fld__eye[aria-pressed="true"] svg{stroke:#111}
.fld__eye[aria-pressed="true"]::after{content:"";position:absolute;width:22px;height:1.6px;background:#111;transform:rotate(-40deg);border-radius:2px}

.acc-form__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc-form__row a{font-size:13.5px;color:#111;text-decoration:underline;text-underline-offset:3px}
.check{display:flex;align-items:center;gap:12px;font-size:14px;color:#222;cursor:pointer}
.check input{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;border-radius:6px;cursor:pointer;
  border:1.5px solid #CFCCC7;background:#fff;transition:background .2s,border-color .2s;
}
.check input:checked{
  background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:#111;
}
.acc-btn{
  margin-top:6px;height:58px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,#2B2B2B,#0B0B0B);color:#fff;font:500 17px "Inter Tight",var(--font);
  box-shadow:0 12px 28px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.12) inset;transition:transform .2s,box-shadow .2s;
}
.acc-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.acc-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,.26)}
.acc-btn:hover svg{transform:translateX(4px)}
.modal__note{font-size:13px;margin-top:14px;text-align:center;min-height:1em}
.modal__note.is-ok{color:#2E7D46;font-weight:600}
.modal__note.is-err{color:#B3261E}

.drawer :focus-visible,.modal :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:560px){
  .drawer{width:100vw}
  .drawer__head,.ship,.drawer__body,.drawer__foot{padding-left:18px;padding-right:18px}
  .search__field{margin-left:18px;margin-right:18px}
  .modal__panel{padding:28px 20px 22px}
  .modal__panel h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .drawer,.ovl,.modal__panel,.ship__bar i{transition:none}
}

/* ================= PRODUCT PAGE ================= */
.pdp{
  --accent:#EE7A12;
  --tint:#F1E7DA;
  position:fixed;inset:0;z-index:100;
  overflow-y:auto;overscroll-behavior:contain;
  background:#F4F4F4;
  color:var(--ink);
  animation:pdp-in .35s ease;
}
@keyframes pdp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pdp__page{max-width:1320px;margin:0 auto;padding:0 40px 40px}

/* nav (mirrors the site header) */
.pdp__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px;font-size:14px}
.pdp__nav .nav__logo .wordmark{height:28px}
.pdp__links{display:flex;gap:30px;list-style:none}
.pdp__links--left{justify-self:end;margin-right:56px}
.pdp__links a{color:var(--ink);text-decoration:none}
.pdp__tools{justify-self:stretch;display:flex;gap:24px;align-items:center;margin-left:56px}
.pdp__tools .pdp__links{margin-right:auto}
.pdp__tools > a span{display:none}
.pdp__tools a{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.pdp__tools svg,.pdp__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pdp__close{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.pdp__close:hover{background:var(--ink)}
.pdp__close:hover svg{stroke:#fff}

/* layout: gallery | buy */
.pdp__grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:32px;align-items:start;padding-top:4px}

/* ---- gallery ---- */
.pdp__gallery{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:12px}
.pdp__thumbs{display:flex;flex-direction:column;gap:12px;grid-row:1;margin-top:24px}
.pdp__thumbs button{
  position:relative;width:60px;height:64px;border-radius:6px;overflow:hidden;cursor:pointer;
  background:#E9E4DC;border:1.5px solid transparent;padding:0;
  transition:border-color .2s;
}
.pdp__thumbs button.is-active{border-color:var(--ink)}
.pdp__thumbs img,.pdp__thumbs video{width:100%;height:100%;object-fit:cover;display:block}
.pdp__thumbs [data-view="stick"] img{object-position:50% 0;transform:scale(2.1);transform-origin:50% 8%}
.pdp__thumbs [data-view="fruit"] img{object-position:100% 100%;transform:scale(1.9);transform-origin:90% 75%}
.pdp__thumbs [data-view="base"] img{object-position:0 100%;transform:scale(2);transform-origin:15% 85%}
.pdp__thumbs [data-view="video"]{background:#D9D9D9}
.pdp__play{
  position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;
}
.pdp__play::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}

.pdp__stage{
  position:relative;grid-column:2;grid-row:1;
  aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  padding:36px 34px;
  background:
    linear-gradient(118deg,transparent 50%,rgba(0,0,0,.045) 62%,rgba(0,0,0,.045) 78%,transparent 90%),
    linear-gradient(160deg,#F7F3EC 0%,var(--tint) 100%);
}
.pdp__eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:500}
.pdp__hero{font-weight:800;font-size:clamp(34px,3.4vw,52px);line-height:.95;letter-spacing:-.045em;margin-top:16px}
.pdp__hero span{color:var(--accent)}
.pdp__tagline{font-size:14px;margin-top:12px;color:#2B2B2B}
.pdp__stats{list-style:none;margin-top:30px;display:grid;gap:18px;width:max-content}
.pdp__stats li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:center}
.pdp__stats svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;grid-row:span 2}
.pdp__stats b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pdp__stats span{font-size:12.5px;color:#3A3A3A}
.pdp__script{
  position:absolute;font-family:"Caveat",cursive;font-weight:500;font-size:21px;line-height:1.05;color:#2B2B2B;
}
.pdp__script--right{right:6%;top:22%;transform:rotate(-14deg);text-align:center}
.pdp__script--left{left:5.5%;bottom:6%;transform:rotate(-12deg)}
.pdp__product{
  position:absolute;right:-2%;bottom:0;width:64%;max-height:74%;object-fit:contain;object-position:bottom right;
  filter:drop-shadow(0 30px 28px rgba(0,0,0,.22));
  transition:transform .5s ease,transform-origin .5s;
  transform-origin:100% 100%;
}
.pdp__stage[data-view="stick"] .pdp__product{transform:scale(1.7) translate(-14%,20%)}
.pdp__stage[data-view="fruit"] .pdp__product{transform:scale(1.6) translate(4%,12%)}
.pdp__stage[data-view="base"] .pdp__product{transform:scale(1.9) translate(-8%,-2%);transform-origin:0 100%}
.pdp__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.pdp__stage[data-view="video"] .pdp__video{display:block}
.pdp__stage[data-view="video"] > :not(.pdp__video){visibility:hidden}

.pdp__badges{
  grid-column:2;grid-row:2;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#ECECEC;border-radius:10px;padding:16px 8px;
}
.pdp__badges li{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12.5px;line-height:1.3}
.pdp__badges li + li{border-left:1px solid rgba(17,17,17,.15)}
.pdp__badges svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- buy panel ---- */
.pdp__crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:#6B6B6B;margin-top:8px}
.pdp__crumbs a{color:#6B6B6B;text-decoration:none}
.pdp__crumbs i{width:5px;height:5px;border-right:1.3px solid #9A9A9A;border-top:1.3px solid #9A9A9A;transform:rotate(45deg)}
.pdp__buy h1{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:12px}
.pdp__rating{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px}
.pdp__stars{display:flex;gap:2px}
.pdp__stars svg{width:15px;height:15px;fill:#F2A12E}
.pdp__rating a{color:var(--ink);font-weight:500}
.pdp__desc{font-size:14px;line-height:1.5;color:#4A4A4A;margin-top:12px;max-width:46ch}
.pdp__tiles{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.pdp__tiles li{background:#ECECEC;border-radius:8px;padding:10px 12px}
.pdp__tiles b{display:block;font-size:14px;font-weight:600}
.pdp__tiles span{font-size:11.5px;color:#5A5A5A}
.pdp__rule{border:0;border-top:1px solid rgba(17,17,17,.15);margin:18px 0 14px}
.pdp__label{font-size:13.5px}
.pdp__label b{font-weight:600}

.pdp__swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pdp__swatches button{
  font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;
  background:#fff;border:1.5px solid #E2E2E2;border-radius:8px;padding:6px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .2s;
}
.pdp__swatches button:hover{border-color:#BDBDBD}
.pdp__swatches button.is-selected{border-color:var(--accent);border-width:2px;padding:5px 5px 7px}
.pdp__swatch-img{display:block;width:100%;height:64px;border-radius:6px;overflow:hidden;background:#F1F1F1}
.pdp__swatches button.is-selected .pdp__swatch-img{background:color-mix(in srgb,var(--accent) 45%,#fff)}
.pdp__swatch-img img{width:100%;height:100%;object-fit:contain;padding:6px}

.pdp__plan{
  position:relative;display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;column-gap:12px;
  background:#fff;border:1.5px solid #E2E2E2;border-radius:10px;padding:14px 16px;margin-top:10px;cursor:pointer;
  transition:border-color .2s;
}
.pdp__plan input{position:absolute;opacity:0;pointer-events:none}
.pdp__radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #8A8A8A;display:grid;place-items:center}
.pdp__plan.is-selected .pdp__radio{border-color:var(--ink)}
.pdp__plan.is-selected .pdp__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.pdp__plan-name{font-size:14px;font-weight:600}
.pdp__save{font-size:11.5px;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:4px 10px}
.pdp__plan-price{justify-self:end;display:flex;align-items:baseline;gap:10px}
.pdp__plan-price b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.pdp__plan-price s{font-size:13px;color:#9A9A9A}
.pdp__perks{grid-column:1/-1;list-style:none;margin:10px 0 0 30px;display:grid;gap:7px;font-size:13.5px}
.pdp__perks li{display:flex;align-items:center;gap:10px}
.pdp__perks svg{width:16px;height:16px;fill:var(--ink);stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pdp__deliver{
  grid-column:1/-1;margin-top:12px;
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  border:1.5px solid #E2E2E2;border-radius:8px;overflow:hidden;font-size:13.5px;
}
.pdp__deliver > span{padding:10px 14px;color:#4A4A4A;border-right:1.5px solid #E2E2E2}
.pdp__deliver select{
  font:inherit;font-size:13.5px;color:var(--ink);border:0;background:#fff;padding:10px 14px;width:100%;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);
  background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%;background-size:6px 6px;background-repeat:no-repeat;
}
.pdp__plan--once{grid-template-columns:auto 1fr auto}
.pdp__plan--once .pdp__plan-name{font-weight:500}
.pdp__plan--once .pdp__plan-price b{font-size:15px}

.pdp__add{
  width:100%;margin-top:10px;height:50px;border-radius:8px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:14px;
  transition:background .2s,transform .1s;
}
.pdp__add:hover{background:#2A2A2A}
.pdp__add:active{transform:scale(.995)}
.pdp__add i{font-style:normal;opacity:.7}
.pdp__add.is-added{background:#1F7A3E}
.pdp__trust{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px}
.pdp__trust li{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px;line-height:1.35;color:#2B2B2B}
.pdp__trust li + li{border-left:1px solid rgba(17,17,17,.15)}
.pdp__trust svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.pdp :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the product grid: whole product is clickable */
.flavor__visual,.flavor h3{cursor:pointer}

@media (max-width:1280px){
  .pdp__grid{grid-template-columns:minmax(0,1fr) 400px;gap:24px}
  .pdp__page{padding:0 24px 32px}
  .pdp__links{gap:18px}
  .pdp__links--left{margin-right:32px}
  .pdp__tools{gap:18px;margin-left:32px}
}
@media (max-width:1024px){
  .pdp__grid{grid-template-columns:1fr}
  .pdp__nav{grid-template-columns:auto 1fr}
  .pdp__links{display:none}
  .pdp__nav .nav__logo{justify-self:start}
  .pdp__tools{margin-left:0;justify-content:flex-end}
  .pdp__tools a span{display:none}
  .pdp__gallery{grid-template-columns:1fr}
  .pdp__thumbs{grid-row:3;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .pdp__thumbs button{flex:none}
  .pdp__stage,.pdp__badges{grid-column:1}
  .pdp__stage{grid-row:1}
  .pdp__badges{grid-row:2;grid-template-columns:repeat(2,1fr);row-gap:16px}
  .pdp__badges li + li{border-left:0}
  .pdp__badges li:nth-child(2n){border-left:1px solid rgba(17,17,17,.15)}
}
@media (max-width:640px){
  .pdp__page{padding:0 16px 32px}
  .pdp__nav{height:68px}
  .pdp__stage{aspect-ratio:auto;padding:28px 22px 46% }
  .pdp__stats{grid-template-columns:1fr 1fr;gap:16px;width:auto}
  .pdp__script{display:none}
  .pdp__product{width:78%}
  .pdp__buy h1{font-size:26px}
  .pdp__tiles{grid-template-columns:repeat(2,1fr)}
  .pdp__plan{grid-template-columns:auto 1fr;row-gap:10px}
  .pdp__plan-price{grid-column:1/-1;justify-self:start}
  .pdp__save{justify-self:start}
  .pdp__deliver{grid-template-columns:1fr}
  .pdp__deliver > span{border-right:0;border-bottom:1.5px solid #E2E2E2}
  .pdp__trust{grid-template-columns:1fr;gap:12px}
  .pdp__trust li{justify-content:flex-start}
  .pdp__trust li + li{border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .pdp{animation:none}
  .pdp__product{transition:none}
}