/* ==========================================================================
   EVERLEAF CANNABIS — design system v2
   Warm ivory canvas, deep evergreen brand colour, terracotta and gold as
   accents. Editorial serif display, geometric sans interface, condensed
   sans for labels. Soft layered elevation, generous radii, restrained motion.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* ground */
  --bg:#FAF8F3;
  --ivory:#F6F2E9;
  --surface:#FFFEFB;
  --surface-2:#F8F4EB;

  /* brand */
  --evergreen:#123B2A;
  --forest:#1D543C;
  --botanical:#477452;
  --moss:#3C6446;
  --leaf:#4F6B49;
  --sage:#9CAF91;
  --sage-soft:#D7DED0;
  --sage-pale:#B4C4AA;
  --sage-text:#C3CFBC;
  --sand:#E5D7C2;
  --sand-deep:#E3DAC7;
  --terra:#9E4F32;
  --terra-soft:#B96848;
  --gold:#D8BE7C;
  --gold-deep:#A8873F;
  --gold-mid:#B99A55;

  /* ink */
  --ink:#1A211C;
  --ink-strong:#16201A;
  --body:#4A5148;
  --muted:#5A6055;
  --muted-2:#626A61;

  /* per-format plate tints, used behind cut-out packshots */
  --tone-flower:#E7ECE1;
  --tone-shake:#E9E3D5;
  --tone-prerolls:#F0E9DC;
  --tone-vapes:#E6ECE7;
  --tone-edibles:#F3EADA;
  --tone-concentrates:#F1E7D6;
  --tone-tinctures:#E9EFE6;
  --tone-topicals:#EDEBE2;
  --tone-accessories:#ECE9E1;

  /* lines */
  --line:rgba(18,59,42,.07);
  --line-2:rgba(18,59,42,.14);
  --line-3:rgba(18,59,42,.22);
  --line-dark:rgba(156,175,145,.24);

  /* type */
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --label:"Archivo Narrow","Manrope",system-ui,sans-serif;

  /* radius */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:26px; --r-2xl:30px;
  --r-3xl:34px; --r-pill:999px;

  /* product rails — how wide a card is, and therefore how many are in view.
     The carousel controller measures the rendered width and derives its own
     scroll step, so this is the only thing that needs changing. */
  --rail-gap:18px; --rail-card:215px;

  /* elevation */
  --sh-xs:0 1px 2px rgba(20,40,30,.05);
  --sh-sm:0 1px 2px rgba(20,40,30,.05),0 18px 34px -30px rgba(18,59,42,.8);
  --sh-md:0 1px 2px rgba(20,40,30,.05),0 22px 40px -30px rgba(18,59,42,.8),inset 0 1px 0 rgba(255,255,255,.85);
  --sh-lg:0 30px 70px -30px rgba(18,59,42,.5),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-xl:0 46px 90px -54px rgba(18,59,42,1);
  --sh-btn:0 18px 34px -18px rgba(18,59,42,.95);
  --sh-inset:inset 0 0 0 1px rgba(18,59,42,.07);

  /* motion */
  --e:cubic-bezier(.32,.72,0,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --d1:.24s; --d2:.34s; --d3:.6s;

  /* layout */
  --wrap:min(1340px,92vw);
  --hdr:88px;
}

/* --- 2. BASE ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-wrap:pretty;overflow-x:clip;
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(156,175,145,.30), transparent 62%),
    radial-gradient(900px 520px at -10% 22%, rgba(229,215,194,.42), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--forest);text-decoration:none;transition:color var(--d1) var(--e)}
a:hover{color:var(--terra)}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}
::selection{background:var(--sage-soft)}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(18,59,42,.18);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:rgba(18,59,42,.3)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-200vw;top:8px;z-index:200;background:var(--evergreen);
  color:#FAF8F3;padding:14px 22px;border-radius:var(--r-pill);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-family:var(--label)}
.skip:focus{left:12px;color:#FAF8F3}
.wrap{width:var(--wrap);margin-inline:auto}
/* Long-form pages sit in a narrower, centred measure. */
.wrap--doc{width:min(1040px,92vw)}
[data-num]{font-variant-numeric:tabular-nums}
.hs{scrollbar-width:none;-ms-overflow-style:none}
.hs::-webkit-scrollbar{display:none}

/* --- 3. TYPE ------------------------------------------------------------- */
.dsp{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em}
.dsp em{font-style:italic}
.eyebrow{font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--moss)}
.eyebrow--terra{color:var(--terra)}
.eyebrow--gold{color:var(--gold-deep)}
.eyebrow--pale{color:var(--sage-pale)}
.lbl{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase}
.h1{font-family:var(--display);font-size:clamp(46px,6vw,88px);line-height:.96;
  letter-spacing:-.022em;color:var(--ink-strong)}
.h2{font-family:var(--display);font-size:clamp(32px,3.9vw,50px);line-height:1.06;
  color:var(--ink-strong)}
.h3{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.1}
.lead{font-size:16.5px;line-height:1.72;color:var(--body)}
.small{font-size:12px;color:var(--muted)}
.note{font-size:11.5px;line-height:1.65;color:var(--muted)}
.rule{display:block;width:72px;height:2px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(158,79,50,.7),rgba(71,116,82,.5))}

/* --- 4. SECTION SHELL ---------------------------------------------------- */
.sec{padding-block:clamp(30px,3.6vw,58px)}
.sec--tight{padding-block:0 clamp(30px,3.6vw,58px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap}
.sec-head--end{align-items:flex-end}
.sec-head__c{text-align:center;max-width:640px;margin-inline:auto}
.panel{background:linear-gradient(160deg,rgba(205,218,197,.55),rgba(233,226,210,.42) 62%,
  rgba(240,224,214,.4));border-radius:var(--r-3xl);
  padding:clamp(30px,3.6vw,56px) clamp(18px,2.4vw,36px);box-shadow:var(--sh-inset)}
.panel--warm{background:linear-gradient(155deg,rgba(240,224,214,.5),rgba(233,226,210,.4) 55%,
  rgba(205,218,197,.38))}
.panel--cool{background:linear-gradient(150deg,rgba(215,222,208,.55),rgba(240,235,223,.45))}
.panel--glass{background:linear-gradient(150deg,rgba(205,218,197,.5),rgba(240,235,223,.55) 58%,
  rgba(240,224,214,.45));backdrop-filter:blur(10px);
  box-shadow:var(--sh-inset),0 26px 50px -40px rgba(18,59,42,.8)}
.dark{background:linear-gradient(145deg,var(--forest),#0E3122 60%);color:#FAF8F3;
  border-radius:var(--r-3xl);box-shadow:var(--sh-xl);position:relative;overflow:hidden}
.dark .h2,.dark .h3,.dark .dsp{color:#FAF8F3}
.dark p{color:var(--sage-text)}

/* The EverLeaf Edit is the homepage's editorial feature. Let it run full-width
   and give the photography more room than the supporting copy. */
#edit .edit__full{width:100%}
#edit .dark{border-radius:0}
#edit .edit__layout{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  max-width:1600px;margin-inline:auto}
#edit .edit__media{position:relative;min-width:0}
#edit .edit__image{border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
#edit .edit__image img{width:100%;height:auto}

/* --- 5. MOTION ----------------------------------------------------------- */
@keyframes elRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes elFade{from{opacity:0}to{opacity:1}}
@keyframes elLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes elDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes elPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes elSlideL{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes elSlideR{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes elSpin{to{transform:rotate(360deg)}}
@keyframes elBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes elShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes elHeart{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* the signature: a botanical rule grows, then the heading, then the content */
.rv{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:no-preference){
  .rv{transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
  .rv[data-in]{opacity:1;transform:none}
  .rv .rule{transform:scaleX(0);transform-origin:center;
    transition:transform .9s var(--e-out) .12s}
  .rv[data-in] .rule{transform:scaleX(1)}
  .stagger>*{opacity:0;transform:translateY(18px);
    transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
  .stagger[data-in]>*{opacity:1;transform:none}
  .stagger[data-in]>*:nth-child(1){transition-delay:.04s}
  .stagger[data-in]>*:nth-child(2){transition-delay:.09s}
  .stagger[data-in]>*:nth-child(3){transition-delay:.14s}
  .stagger[data-in]>*:nth-child(4){transition-delay:.19s}
  .stagger[data-in]>*:nth-child(5){transition-delay:.24s}
  .stagger[data-in]>*:nth-child(6){transition-delay:.29s}
  .stagger[data-in]>*:nth-child(7){transition-delay:.34s}
  .stagger[data-in]>*:nth-child(8){transition-delay:.39s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv,.stagger>*{opacity:1 !important;transform:none !important}
  .lift:hover{transform:none !important}
}

/* interaction primitives */
.lift{transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e),
  background-color var(--d2) var(--e)}
.lift:hover{transform:translateY(-6px)}
.zoom{transition:transform .75s var(--e-out)}
.lift:hover .zoom,.zoomhost:hover .zoom{transform:scale(1.07)}
.arrow{transition:transform .3s var(--e)}
.lift:hover .arrow,a:hover .arrow,button:hover .arrow{transform:translateX(6px)}
.underline{transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)}
.lift:hover .underline,a:hover .underline{transform:scaleX(1)}
.ring{transition:transform .5s var(--e-out),box-shadow .4s var(--e)}
.lift:hover .ring{transform:scale(1.045)}

/* --- 6. BUTTONS ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:17px 32px;border-radius:var(--r-pill);
  background-size:220% 100%;background-position:100% 0;
  transition:background-position .7s var(--e-out),transform .22s var(--e),
    box-shadow .28s var(--e),color var(--d1) var(--e),background-color var(--d1) var(--e)}
.btn:hover{background-position:0 0;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary{background-image:linear-gradient(90deg,var(--forest),var(--evergreen) 50%,var(--forest));
  color:#FAF8F3;box-shadow:var(--sh-btn)}
.btn--primary:hover{color:#FAF8F3}
.btn--cream{background-image:linear-gradient(90deg,#FAF8F3,#E9E2D2 50%,#FAF8F3);
  color:var(--evergreen);box-shadow:0 16px 30px -16px rgba(0,0,0,.5)}
.btn--cream:hover{color:var(--evergreen)}
.btn--ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);color:var(--evergreen);
  box-shadow:inset 0 0 0 1px var(--line-3)}
.btn--ghost:hover{background:var(--evergreen);color:#FAF8F3;
  box-shadow:inset 0 0 0 1px var(--evergreen),0 14px 26px -16px rgba(18,59,42,.9)}
.btn--outline{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.btn--outline:hover{background:rgba(255,255,255,.6);color:var(--evergreen);
  box-shadow:inset 0 0 0 1px var(--line-3)}
.btn--onDark{box-shadow:inset 0 0 0 1px rgba(156,175,145,.45);color:var(--sage-text)}
.btn--onDark:hover{background:rgba(156,175,145,.12);color:#FAF8F3;
  box-shadow:inset 0 0 0 1px var(--sage-pale)}
.btn--sm{padding:13px 22px;font-size:11.5px}
.btn--xs{padding:9px 16px;font-size:11px;letter-spacing:.14em}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn .spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(250,248,243,.35);
  border-top-color:#FAF8F3;animation:elSpin .7s linear infinite;display:block}
.btn--cream .spin{border-color:rgba(18,59,42,.25);border-top-color:var(--evergreen)}

.iconbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-pill);
  cursor:pointer;position:relative;color:var(--ink);
  transition:background var(--d1) var(--e),transform var(--d1) var(--e)}
.iconbtn:hover{background:rgba(18,59,42,.08)}
.iconbtn:active{transform:scale(.94)}
.count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--terra);color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;animation:elPop .3s var(--e-out) both;
  box-shadow:0 4px 10px -4px rgba(158,79,50,.9)}

/* --- 7. FORM ------------------------------------------------------------- */
.input{width:100%;padding:15px 20px;border:0;border-radius:var(--r-pill);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-xs);font-size:14.5px;
  transition:box-shadow var(--d1) var(--e)}
.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--botanical)}
.input::placeholder{color:#8A9186}
textarea.input,.input--box{border-radius:var(--r-md)}
select.input{appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6055' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.err{font-size:12.5px;color:var(--terra);margin-top:8px}
.dark .err{color:#E9B9A4}

/* --- 8. CHIPS / BADGES --------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:9px 17px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(18,59,42,.13);cursor:pointer;color:var(--ink);
  transition:all var(--d1) var(--e)}
.chip:hover{background:var(--evergreen);color:#FAF8F3;transform:translateY(-2px)}
.chip[aria-pressed=true]{background:var(--evergreen);color:#FAF8F3;
  box-shadow:inset 0 0 0 1px var(--evergreen)}
.tagline{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
  padding:5px 11px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-2)}
.badge{position:absolute;top:11px;left:11px;font-family:var(--label);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FAF8F3;
  background:var(--evergreen);padding:6px 12px;border-radius:var(--r-pill);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.6);z-index:3}
.badge--terra{background:var(--terra)}
.badge--gold{background:var(--gold-deep)}

/* --- 9. PRODUCT CARD ----------------------------------------------------- */
.pcard{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);
  transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.pcard:hover,.pcard:focus-within{transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(20,40,30,.05),0 34px 56px -32px rgba(18,59,42,.85),
  inset 0 1px 0 rgba(255,255,255,.85)}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden;margin:8px 8px 0;
  border-radius:18px;background:linear-gradient(160deg,#F4F0E6,#EBE6D9)}
.pcard__media--tone{background:var(--tone,linear-gradient(160deg,#F4F0E6,#EBE6D9))}
.pcard__img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;
  transition:transform .75s var(--e-out),opacity var(--d2) var(--e)}
.pcard__img--photo{inset:0;width:100%;height:100%;object-fit:cover}
.pcard:hover .pcard__img{transform:scale(1.07)}
.pcard__img--alt{opacity:0}
.pcard:hover .pcard__img--alt{opacity:1}
.pcard:hover .pcard__img--main.has-alt{opacity:0}
.pcard__wish{position:absolute;top:9px;right:9px;width:34px;height:34px;display:grid;
  place-items:center;border-radius:var(--r-pill);background:rgba(252,251,247,.78);
  backdrop-filter:blur(8px);box-shadow:0 6px 14px -8px rgba(18,59,42,.7);cursor:pointer;
  color:var(--ink);z-index:4;
  transition:transform var(--d1) var(--e),background var(--d1) var(--e)}
.pcard__wish:hover{background:#FFFDF9;transform:scale(1.1)}
.pcard__wish:active{transform:scale(.92)}
.pcard__wish[aria-pressed=true]{color:var(--terra)}
.pcard__wish[aria-pressed=true] svg{fill:currentColor;animation:elHeart .4s var(--e-out)}
.pcard__body{display:flex;flex-direction:column;gap:7px;padding:16px;flex:1}
.pcard__brand{font-family:var(--label);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leaf)}
.pcard__name{font-family:var(--display);font-size:20px;line-height:1.14;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__name a{color:var(--ink-strong)}
.pcard__name a:hover{color:var(--terra)}
.pcard__meta{font-size:12.5px;color:var(--muted)}
.pcard__spec{display:flex;align-items:center;gap:7px;margin-top:2px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted)}
.pcard__spec b{font-weight:700;color:var(--leaf);font-family:var(--label);letter-spacing:.08em}
.pcard__price{display:flex;align-items:baseline;gap:9px;margin-top:8px}
.pcard__price span:first-child{font-family:var(--display);font-size:23px;color:var(--ink-strong)}
.pcard__was{font-size:12.5px;color:#5E6459;text-decoration:line-through}
.pcard__cta{margin-top:auto;padding-top:12px}

/* compact horizontal card (compass matches, cart recs) */
.hcard{display:flex;gap:16px;align-items:center;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-md)}
.hcard__img{width:88px;height:88px;border-radius:var(--r-md);overflow:hidden;flex:none;
  background:linear-gradient(160deg,#F4F0E6,#EBE6D9);position:relative}
.hcard__img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.hcard__img img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}

/* skeletons */
.skel{background:linear-gradient(90deg,#EFEADD 0%,#F8F5EE 45%,#EFEADD 90%);
  background-size:420px 100%;animation:elShimmer 1.35s linear infinite;border-radius:var(--r-xl)}
.skel--card{aspect-ratio:.62;min-height:280px}
.skel--circle{border-radius:50%;aspect-ratio:1}

/* --- 10. CATEGORY CIRCLES ------------------------------------------------ */
.catrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(122px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;scroll-behavior:smooth}
.cat{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding:8px 4px 12px;border-radius:var(--r-lg);color:var(--ink)}
.cat:hover{color:var(--ink)}
.cat__ring{position:relative;width:100%;aspect-ratio:1/1;max-width:150px;border-radius:50%;
  overflow:hidden;background:linear-gradient(155deg,#F3EEE2,#E1E7DA);display:block;
  box-shadow:0 18px 32px -22px rgba(18,59,42,.85),inset 0 0 0 1px rgba(255,255,255,.75)}
.cat__ring img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain}
.cat__ring img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}
.cat__name{display:block;font-family:var(--label);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.cat__count{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.cat__rule{display:block;height:1.5px;width:34px;margin:8px auto 0;border-radius:var(--r-pill);
  background:var(--terra)}

/* --- 11. CAROUSEL -------------------------------------------------------- */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;gap:var(--rail-gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px}
.carousel__track>.pcard{width:var(--rail-card)}
.carousel__track>*{scroll-snap-align:start}
.community-carousel__track{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.community-carousel__row{display:flex;flex:none;gap:var(--rail-gap);width:max-content}
.community-carousel__row>*{flex:0 0 var(--rail-card);width:var(--rail-card);scroll-snap-align:start}
.carousel__nav{display:flex;gap:8px}
.cbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-xs);
  cursor:pointer;color:var(--evergreen);transition:all var(--d1) var(--e)}
.cbtn:hover{background:var(--evergreen);color:#FAF8F3;transform:translateY(-2px)}
.cbtn:disabled{opacity:.35;pointer-events:none}
.dots{display:flex;gap:7px;align-items:center;justify-content:center}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(18,59,42,.2);cursor:pointer;
  transition:all var(--d1) var(--e);padding:0}
.dot[aria-current=true]{background:var(--forest);width:22px;border-radius:var(--r-pill)}
.dark .dot{background:rgba(250,248,243,.28)}
.dark .dot[aria-current=true]{background:var(--gold)}

/* --- 12. PROMO BAR + HEADER ---------------------------------------------- */
.promobar{background:linear-gradient(90deg,#0F3123,var(--evergreen) 40%,var(--forest));
  color:var(--sage-soft)}
.promobar__row{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:11px 0;font-family:var(--label);
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.promobar span{display:flex;align-items:center;gap:9px}
.promobar b{color:var(--gold);letter-spacing:.18em;font-weight:700}
/* The rotating single-message variant only exists on narrow screens. */
.promobar .promobar__mob{display:none}

.shell{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.62);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:background var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.shell[data-scrolled]{box-shadow:0 10px 34px -22px rgba(18,59,42,.55);
  background:rgba(250,248,243,.86)}
.shell[data-scrolled] .shell__pad{padding-block:8px}
.shell[data-scrolled] .shell__logo{height:58px}
.shell__pad{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:28px;
  padding-block:12px;transition:padding var(--d2) var(--e)}
/* The crest is a near-square lockup rather than a wide wordmark, so it is
   sized by optical weight, not by matching the old logo's pixel height. */
.shell__logo{height:72px;width:auto;transition:height var(--d2) var(--e)}
.burger{width:44px;height:44px;display:none;align-items:center;justify-content:center;
  border-radius:14px;background:rgba(255,255,255,.6);flex:none;cursor:pointer;
  box-shadow:var(--sh-xs),inset 0 0 0 1px rgba(18,59,42,.10);transition:all var(--d1) var(--e)}
.burger:hover{background:rgba(18,59,42,.1)}

.mainnav{display:flex;align-items:center;gap:2px;margin-inline:auto;flex-wrap:nowrap}
.headact .desk,.shell__pad .desk{display:flex}
.navitem{position:relative;display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-radius:var(--r-pill);cursor:pointer;flex:none}
.navitem__pill{position:absolute;inset:0;border-radius:var(--r-pill);background:rgba(18,59,42,.07);
  opacity:0;transform:translateY(3px) scale(.94);
  transition:opacity .26s var(--e),transform .26s var(--e)}
.navitem:hover .navitem__pill,.navitem[data-active] .navitem__pill{opacity:1;transform:none}
.navitem__label{position:relative;white-space:nowrap;font-family:var(--label);font-size:13.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3E463F;
  transition:color var(--d1) var(--e)}
.navitem:hover .navitem__label,.navitem[data-active] .navitem__label{color:var(--evergreen)}
.navitem svg{position:relative}

.headact{display:flex;align-items:center;gap:4px;margin-left:auto}
.loc{display:flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border-radius:var(--r-pill);
  cursor:pointer;text-align:left;transition:background var(--d1) var(--e)}
.loc:hover{background:rgba(18,59,42,.08)}
.loc b{display:block;font-family:var(--label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.loc i{display:block;font-style:normal;font-size:12.5px;font-weight:700}
.cartbtn{position:relative;display:flex;align-items:center;gap:9px;padding:10px 18px 10px 14px;
  border-radius:var(--r-pill);background:linear-gradient(180deg,var(--forest),var(--evergreen));
  color:#FAF8F3;cursor:pointer;box-shadow:0 12px 24px -14px rgba(18,59,42,.9);
  transition:transform var(--d1) var(--e),box-shadow var(--d1) var(--e)}
.cartbtn:hover{transform:translateY(-2px);box-shadow:0 18px 30px -16px rgba(18,59,42,.85)}
.cartbtn b{font-size:12.5px;font-weight:800;letter-spacing:.04em}

.mega{position:absolute;left:0;right:0;top:100%;padding:0 4vw 22px;animation:elFade .2s both}
.mega__inner{width:var(--wrap);margin-inline:auto;background:rgba(252,251,247,.95);
  backdrop-filter:blur(20px);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;
  animation:elRise .34s var(--e-out) both}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:36px;padding:36px 38px 40px}
.mega__col b{display:block;font-family:var(--label);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leaf);font-weight:700}
.mega__col hr{border:0;height:1px;background:linear-gradient(90deg,rgba(18,59,42,.25),transparent);
  margin:12px 0 16px}
.mega__col a{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#2A322C;
  padding:6px 0;transition:color .2s,transform .24s var(--e)}
.mega__col a:hover{color:var(--terra);transform:translateX(4px)}
.mega__promo{position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(145deg,var(--forest),#0F3123);padding:26px;min-height:220px;
  box-shadow:0 20px 40px -24px rgba(18,59,42,.9);display:block}
.mega__promo img{position:absolute;right:-26px;bottom:-16px;width:172px;opacity:.9;
  mask-image:linear-gradient(to right,transparent,#000 34%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34%)}
.mega__cats{display:grid;grid-template-columns:repeat(8,1fr);gap:18px;padding:32px 30px 36px}

/* --- 13. HERO ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden}
.hero__orb{position:absolute;right:-6%;top:-12%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(156,175,145,.5),rgba(215,222,208,0) 66%);
  filter:blur(24px);animation:elBreathe 12s ease-in-out infinite;pointer-events:none}
.hero__grid{position:relative;width:var(--wrap);margin-inline:auto;display:grid;
  grid-template-columns:1fr 1.06fr;gap:clamp(24px,3vw,56px);align-items:center;
  padding:clamp(30px,4.4vw,68px) 0 clamp(26px,3.4vw,50px)}
.hero__pill{display:inline-flex;align-items:center;gap:11px;padding:8px 16px 8px 10px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.62);
  box-shadow:var(--sh-xs),inset 0 0 0 1px rgba(18,59,42,.09)}
.hero__pill i{width:7px;height:7px;border-radius:50%;background:var(--botanical);
  box-shadow:0 0 0 4px rgba(71,116,82,.16)}
.hero h1{margin:24px 0 0}
.hero h1 em{color:var(--forest);font-style:italic;position:relative}
.hero h1 em .swash{position:absolute;left:2%;right:8%;bottom:.1em;height:.09em;
  background:linear-gradient(90deg,rgba(158,79,50,.85),rgba(184,154,85,.5));
  border-radius:var(--r-pill);transform-origin:left;
  animation:elLine 1.1s var(--e-out) both;animation-delay:.75s}
.hero__sub{max-width:440px;margin-top:26px;font-size:17.5px;line-height:1.72;color:var(--body)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero__proof{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.hero__proof div{display:flex;align-items:center;gap:11px;padding:12px 18px 12px 12px;
  border-radius:var(--r-md);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--line)}
.hero__proof span.ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;
  place-items:center;color:var(--moss);background:linear-gradient(150deg,#E4EADD,#D0DAC8)}
.hero__art{position:relative}
.hero__frame{position:relative;border-radius:var(--r-3xl);overflow:hidden;
  box-shadow:0 40px 80px -42px rgba(18,59,42,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.hero__frame img{width:100%;height:auto;animation:elDrift 16s ease-in-out infinite}

/* ---- hero slider ---------------------------------------------------------
   A cross-fade rather than a scroll rail: the frame is a fixed box, and
   sliding a portrait photograph through it would crop badly at every width.
   The first slide is the markup already in the page, so the largest image
   still paints as the LCP element with nothing waiting on JavaScript. */
.hero__frame[data-hero]{display:grid}
.hero__frame[data-hero]>*{grid-area:1/1}
.hero__slide{position:relative;opacity:0;transition:opacity 1.1s var(--e);
  pointer-events:none}
.hero__slide[data-on]{opacity:1;pointer-events:auto}
.hero__slide img{width:100%;height:100%;object-fit:cover;animation:none;
  transform:scale(1.001);transition:transform 8s linear}
.hero__slide[data-on] img{transform:scale(1.07)}
.hero__slide--first{opacity:1}
.hero__slide--first img{animation:elDrift 16s ease-in-out infinite}
.hero__frame[data-hero] .hero__slide--first{opacity:0;transition:opacity 1.1s var(--e)}
.hero__frame[data-hero] .hero__slide--first[data-on]{opacity:1}

.hero__dots{position:absolute;right:18px;bottom:18px;z-index:3;display:flex;gap:7px;
  padding:7px 10px;border-radius:var(--r-pill);background:rgba(11,42,29,.34);
  backdrop-filter:blur(9px)}
.hero__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(250,248,243,.5);cursor:pointer;transition:width var(--d2) var(--e),
  background var(--d2) var(--e)}
.hero__dots button[aria-selected=true]{width:22px;border-radius:99px;background:var(--gold)}
.hero__dots button:focus-visible{outline:2px solid #FAF8F3;outline-offset:2px}

@media (max-width:700px){
  .hero__dots{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .hero__slide,.hero__slide img{transition:none}
  .hero__slide img,.hero__slide--first img{animation:none;transform:none}
}
.hero__tag{position:absolute;left:-16px;bottom:30px;display:flex;align-items:center;gap:14px;
  background:rgba(252,251,247,.88);backdrop-filter:blur(14px);border-radius:20px;
  padding:14px 20px 14px 16px;
  box-shadow:0 24px 46px -26px rgba(18,59,42,.75),inset 0 1px 0 rgba(255,255,255,.9)}
.hero__tag .ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--forest),#0F3123);color:var(--gold)}
.hero__anim>*{animation:elRise .9s var(--e-out) both}
.hero__anim>*:nth-child(1){animation-delay:.05s}
.hero__anim>*:nth-child(2){animation-delay:.13s}
.hero__anim>*:nth-child(3){animation-delay:.23s}
.hero__anim>*:nth-child(4){animation-delay:.33s}
.hero__anim>*:nth-child(5){animation-delay:.43s}
.hero__art{animation:elSlideL 1.1s var(--e-out) both;animation-delay:.1s}

/* --- 14. TRUST STRIP ----------------------------------------------------- */
.trust{width:var(--wrap);margin-inline:auto;display:flex;flex-wrap:wrap;gap:10px;
  background:rgba(255,255,255,.42);backdrop-filter:blur(10px);border-radius:var(--r-xl);
  padding:12px;box-shadow:var(--sh-inset),0 20px 40px -34px rgba(18,59,42,.7)}
.trust>div{flex:1 1 190px;display:flex;align-items:center;gap:13px;padding:16px 18px;
  border-radius:18px;transition:background var(--d2) var(--e)}
.trust>div:hover{background:rgba(255,255,255,.6)}
.trust .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;
  color:var(--moss);background:linear-gradient(150deg,#E7ECE1,#CFDCC6)}
.trust b{display:block;font-family:var(--label);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.trust span.sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* --- 15. PROMOS ---------------------------------------------------------- */
.promo{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  padding:clamp(30px,3.4vw,50px);min-height:300px;display:flex;flex-direction:column;
  justify-content:center}
.promo--dark{background:linear-gradient(140deg,var(--forest),#0F3123 62%);
  box-shadow:0 34px 60px -40px rgba(18,59,42,1)}
.promo--light{background:linear-gradient(140deg,#EFE9DB,#E3DAC7);
  box-shadow:0 30px 54px -40px rgba(18,59,42,.9),inset 0 1px 0 rgba(255,255,255,.7)}
.promo__body{position:relative;z-index:2;max-width:62%}
.promo__art{position:absolute;right:0;top:0;height:100%;width:48%;object-fit:cover;
  mask-image:linear-gradient(to right,transparent,#000 38%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 38%)}
.promo__art--contain{right:-8px;top:auto;bottom:0;height:88%;width:50%;object-fit:contain;
  object-position:bottom right;
  mask-image:linear-gradient(to right,transparent,#000 28%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28%)}
.promo__code{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:9px 16px;
  border-radius:var(--r-pill);background:rgba(250,248,243,.09);
  box-shadow:inset 0 0 0 1px rgba(216,190,124,.35)}
.promo__code b{font-family:var(--label);font-size:13px;color:var(--gold);font-weight:700;
  letter-spacing:.2em}
.ticklist{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ticklist li{display:flex;align-items:center;gap:10px;font-size:14px;color:#41483F}
.ticklist i{width:20px;height:20px;border-radius:50%;background:rgba(71,116,82,.16);
  display:grid;place-items:center;flex:none}

/* --- 16. METRICS --------------------------------------------------------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric{padding:22px 20px;text-align:center;border-radius:var(--r-lg);
  transition:background var(--d2) var(--e)}
.metric:hover{background:rgba(255,255,255,.6)}
.metric b{display:block;font-family:var(--display);font-size:clamp(34px,4.2vw,52px);
  line-height:1;color:var(--evergreen)}
.metric span.l{display:block;font-family:var(--label);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-top:12px}
.metric span.s{display:block;font-size:12px;color:var(--muted);margin-top:6px}

/* --- 17. EXPERIENCE TILES ------------------------------------------------ */
.expgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.exp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:26px 14px;border-radius:var(--r-lg);text-align:center;cursor:pointer;
  background:var(--tint,rgba(255,255,255,.55));box-shadow:var(--sh-inset);color:var(--ink);
  transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.exp:hover{transform:translateY(-5px);box-shadow:0 22px 40px -28px rgba(18,59,42,.8);
  color:var(--ink)}
.exp .ic{color:var(--terra)}
.exp b{font-family:var(--display);font-size:20px;font-weight:400}
.exp span{font-size:11.5px;color:var(--muted);line-height:1.4}

/* --- 18. COMPASS --------------------------------------------------------- */
.compass{display:grid;grid-template-columns:1fr 400px 1fr;gap:34px;align-items:center}
.cdim{background:rgba(255,255,255,.5);border-radius:var(--r-lg);padding:22px 24px;
  box-shadow:var(--sh-inset),0 18px 34px -34px rgba(18,59,42,.9);border:0;margin:0}
.cdim legend{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0;width:100%}
.cdim legend b{font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase}
.cdim legend i{font-size:11.5px;color:var(--leaf);font-weight:600;font-style:italic}
.cdim__opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.copt{font-size:13px;font-weight:600;padding:10px 17px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:all .26s var(--e)}
.copt:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-3)}
.copt[aria-pressed=true],.copt[aria-checked=true]{
  background:linear-gradient(180deg,var(--forest),var(--evergreen));
  color:#FAF8F3;box-shadow:0 12px 22px -14px rgba(18,59,42,.95)}
/* A selected payment chip keeps its own brand colours, so mark the
   choice with the surrounding control instead of recolouring it. */
.copt--pay[aria-checked=true]{background:rgba(18,59,42,.06);
  box-shadow:inset 0 0 0 2px var(--forest)}
.copt--pay{position:relative;padding:9px 14px 9px 38px}
.copt--pay::before{content:'';position:absolute;left:13px;top:50%;width:16px;height:16px;
  margin-top:-8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3);
  transition:box-shadow var(--d1) var(--e)}
.copt--pay[aria-checked=true]::before{box-shadow:inset 0 0 0 5px var(--forest)}
/* The needle is rotated, so its bounding box is wider than the dial. Clipping
   here keeps that out of the page's scroll width on narrow screens. */
.dial{position:relative;aspect-ratio:1/1;display:grid;place-items:center;justify-self:center;
  width:100%;max-width:400px;overflow:hidden;border-radius:50%}
.dial__glow{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(156,175,145,.35),transparent 68%);filter:blur(6px)}
.dial__face{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FFFEFB,#F0EBDE 76%);
  box-shadow:0 40px 70px -44px rgba(18,59,42,.9),inset 0 1px 0 rgba(255,255,255,.9)}
.dial__r1{position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(18,59,42,.08)}
.dial__r2{position:absolute;inset:21%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(18,59,42,.06)}
.dial__ticks{position:absolute;inset:3px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(18,59,42,.28) 0 .34deg,transparent .34deg 7.5deg);
  mask-image:radial-gradient(circle,transparent 90%,#000 91%);
  -webkit-mask-image:radial-gradient(circle,transparent 90%,#000 91%)}
.dial__arc{position:absolute;inset:6%;border-radius:50%;
  background:conic-gradient(var(--forest) 0deg,var(--evergreen) var(--pct,0%),transparent 0);
  mask-image:radial-gradient(circle,transparent 87%,#000 89%);
  -webkit-mask-image:radial-gradient(circle,transparent 87%,#000 89%);
  transition:background .6s var(--e-out)}
.dial__needle{position:absolute;inset:0;display:grid;place-items:center;
  transform:rotate(var(--deg,0deg));transition:transform 1.1s var(--e-out)}
.dial__needle i{display:block;width:2.5px;height:38%;border-radius:var(--r-pill);
  background:linear-gradient(to top,rgba(18,59,42,0),var(--evergreen));
  transform:translateY(-50%);transform-origin:bottom center}
.dial__needle b{position:absolute;top:8.5%;width:10px;height:10px;background:var(--terra);
  border-radius:50%;box-shadow:0 0 0 5px rgba(158,79,50,.16)}
.dial__hub{position:relative;z-index:2;width:42%;aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(150deg,var(--forest),#0E3122);display:grid;place-items:center;
  text-align:center;box-shadow:0 22px 44px -22px rgba(18,59,42,1),inset 0 1px 0 rgba(255,255,255,.12)}
.dial__hub b{font-family:var(--display);font-size:38px;color:#FAF8F3;line-height:1;display:block}
.dial__hub b i{font-size:20px;color:var(--sage-pale);font-style:normal}
.dial__hub span{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage-pale);margin-top:6px;display:block}
.dial__mark{position:absolute;font-family:var(--label);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.dial__mark[data-on]{color:var(--evergreen)}

/* --- 19. EDITORIAL / EDU / JOURNAL --------------------------------------- */
.edu{background:linear-gradient(165deg,rgba(240,232,216,.72),rgba(255,255,255,.5));
  border-radius:var(--r-lg);padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;
  gap:12px;min-height:236px;box-shadow:var(--sh-inset);color:var(--ink)}
.edu:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.edu__top{display:flex;align-items:center;justify-content:space-between}
.edu__num{font-family:var(--display);font-size:17px;color:var(--leaf);font-style:italic}
.edu h3{font-family:var(--display);font-size:27px;line-height:1.1;margin:6px 0 0;
  color:var(--ink-strong)}
.edu p{font-size:14px;line-height:1.68;color:var(--body)}
.edu__go{margin-top:auto;display:flex;align-items:center;gap:9px;font-family:var(--label);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--evergreen)}

.jcard{display:flex;flex-direction:column;gap:14px;border-radius:28px;padding:32px 30px 28px;
  min-height:290px;box-shadow:0 26px 48px -36px rgba(18,59,42,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.jcard__meta{display:flex;align-items:center;gap:11px;font-family:var(--label);font-size:11.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.jcard__meta i{width:18px;height:1px;background:currentColor;display:block}
.jcard h3{font-family:var(--display);font-size:28px;line-height:1.12;margin:6px 0 0}
.jcard p{font-size:14px;line-height:1.68}
.jcard__go{margin-top:auto;display:flex;align-items:center;gap:9px;font-family:var(--label);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

.review{margin:0;background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:var(--r-xl);padding:32px 30px;display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--sh-md);min-height:250px}
.review__stars{display:flex;gap:2px;color:var(--gold-deep)}
.review blockquote{margin:0;font-family:var(--display);font-size:21px;line-height:1.42;
  color:var(--ink-strong)}
.review figcaption{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:18px;
  box-shadow:inset 0 1px 0 rgba(18,59,42,.09)}
.review__av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,var(--sage-soft),#B9C7B0);color:var(--evergreen);
  font-weight:800;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

.fcard{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-radius:var(--r-lg);
  padding:26px 22px;display:flex;flex-direction:column;gap:10px;min-height:214px;
  box-shadow:var(--sh-md)}
.fcard .ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  color:var(--moss);background:linear-gradient(150deg,#E7ECE1,#D5DECB)}
.fcard h3{font-family:var(--display);font-size:23px;margin:8px 0 0}
.fcard p{font-size:13.5px;line-height:1.62;color:var(--body)}
.fcard span.f{margin-top:auto;font-family:var(--label);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

.brandchip{display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  min-width:190px;padding:22px 24px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--sh-md);
  color:var(--ink)}
.brandchip:hover{color:var(--ink)}
.brandchip b{font-family:var(--display);font-size:24px;line-height:1.05;font-weight:400}
.brandchip span{font-size:12px;color:var(--muted)}

/* --- 20. OVERLAYS -------------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(20,32,25,.44);
  backdrop-filter:blur(5px);animation:elFade .22s both}
.modal{position:relative;background:linear-gradient(180deg,#FFFEFB,#F7F3EA);
  border-radius:var(--r-2xl);padding:clamp(26px,3vw,44px);
  box-shadow:0 50px 90px -40px rgba(18,59,42,.7),inset 0 1px 0 rgba(255,255,255,.9);
  animation:elPop .32s var(--e-out) both}
.drawer{position:relative;width:min(460px,100%);height:100%;
  background:linear-gradient(180deg,#FCFBF7,#F5F1E7);display:flex;flex-direction:column;
  box-shadow:-30px 0 70px -30px rgba(18,59,42,.7);animation:elSlideL .38s var(--e-out) both;
  margin-left:auto}
.drawer--left{margin-left:0;margin-right:auto;animation-name:elSlideR;
  box-shadow:30px 0 70px -30px rgba(18,59,42,.6)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;box-shadow:inset 0 -1px 0 var(--line)}
.drawer__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:6px 26px}
.drawer__foot{padding:22px 26px;box-shadow:inset 0 1px 0 var(--line);
  background:rgba(255,255,255,.5)}
.closebtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(18,59,42,.07);cursor:pointer;flex:none;transition:all .2s var(--e)}
.closebtn:hover{background:rgba(18,59,42,.15)}
.closebtn:active{transform:scale(.94)}

.line{display:flex;gap:16px;padding:18px 0;box-shadow:inset 0 -1px 0 var(--line)}
.line__img{width:78px;height:78px;border-radius:var(--r-md);overflow:hidden;flex:none;
  position:relative;background:linear-gradient(160deg,#F4F0E6,#EBE6D9)}
.line__img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.line__img img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}
.qty{display:inline-flex;align-items:center;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.qty button{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  transition:background var(--d1) var(--e)}
.qty button:hover{background:rgba(18,59,42,.07)}
.qty span{min-width:34px;text-align:center;font-size:13.5px;font-weight:700}
.linkbtn{font-size:12px;font-weight:700;color:var(--terra);cursor:pointer;
  font-family:var(--label);letter-spacing:.12em;text-transform:uppercase}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.empty{padding:52px 0;text-align:center}
.empty b{display:block;font-family:var(--display);font-size:26px;margin-bottom:10px}

/* --- 21. TOAST ----------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--forest),
  var(--evergreen));color:#FAF8F3;padding:15px 24px;border-radius:var(--r-pill);
  box-shadow:0 24px 44px -20px rgba(18,59,42,.9);font-size:13.5px;font-weight:600;
  animation:elPop .3s var(--e-out) both;max-width:calc(100vw - 32px)}
.toast .ic{color:var(--gold);flex:none}

/* --- 22. AGE GATE -------------------------------------------------------- */
.gate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:32px;
  animation:elFade .5s both;overflow-y:auto;
  background:radial-gradient(900px 520px at 50% 12%,var(--forest),#0E3122 68%,#0B2A1D)}
.gate__orb{position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(156,175,145,.24),transparent 68%);filter:blur(10px);
  animation:elBreathe 9s ease-in-out infinite;pointer-events:none}
.gate__inner{position:relative;width:min(560px,100%);text-align:center;
  animation:elRise .8s var(--e-out) both}
.gate__inner h1{font-family:var(--display);font-size:clamp(34px,4.6vw,56px);line-height:1.04;
  color:#FAF8F3;margin:18px 0 0}
.gate__inner h1 em{color:#C9D3C1}
.gate__inner p{max-width:430px;margin:20px auto 0;color:var(--sage-text);font-size:15.5px;
  line-height:1.75}
.gate__links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:34px;
  font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.gate__links a{color:#9AAB94}
.gate__links a:hover{color:#FAF8F3}

/* --- 24. FOOTER ---------------------------------------------------------- */
.foot{background:linear-gradient(180deg,#0F3123,#0B2A1D);color:var(--sage-text);
  padding:clamp(48px,5vw,78px) 0 0;margin-top:clamp(30px,4vw,60px)}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:36px}
/* The footer crest links home. It carries its own ground, so it needs no
   plate behind it — only somewhere to put the focus ring. */
.foot__logo{display:inline-block;border-radius:var(--r-md);
  transition:transform var(--d2) var(--e),opacity var(--d2) var(--e)}
.foot__logo:hover{transform:translateY(-2px);opacity:.92}
.foot__logo:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.foot__logo img{display:block}
.foot h3{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#FAF8F3;margin:0 0 20px}
.foot nav ul{display:flex;flex-direction:column;gap:12px}
.foot nav a{display:inline-block;font-size:13.5px;color:#9AAB94;
  transition:color .2s,transform .24s var(--e)}
.foot nav a:hover{color:#FAF8F3;transform:translateX(3px)}
.foot__social{display:flex;gap:10px;margin-top:26px}
.foot__social a{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--sage-pale);background:rgba(250,248,243,.05);
  box-shadow:inset 0 0 0 1px var(--line-dark);transition:all .26s var(--e)}
.foot__social a:hover{background:var(--forest);color:#FAF8F3;transform:translateY(-3px)}
.foot__legal{margin-top:54px;padding:26px 0;box-shadow:inset 0 1px 0 rgba(156,175,145,.2);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.foot__legal a{color:#93A48D;font-size:12px}
.foot__legal a:hover{color:#FAF8F3}
.foot__pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px;
  border-radius:7px;font-family:Arial,Helvetica,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.01em;white-space:nowrap}
.pay i{font-style:normal;font-weight:900}
.foot__base{padding:22px 0 32px;box-shadow:inset 0 1px 0 rgba(156,175,145,.14);display:flex;
  flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:12px;color:#9AAB94}

/* --- 25. SHOP ------------------------------------------------------------ */
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--label);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:18px 0 14px}
.plp{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;align-items:start}
.facets{position:sticky;top:calc(var(--hdr) + 12px);display:flex;flex-direction:column;gap:12px;
  max-height:calc(100vh - var(--hdr) - 28px);overflow:auto;overscroll-behavior:contain;
  padding-right:4px}
.facet{background:rgba(255,255,255,.55);border-radius:var(--r-lg);padding:4px 20px;
  box-shadow:var(--sh-inset)}
.facet__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 0;cursor:pointer;font-family:var(--label);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase}
.facet__head svg{transition:transform var(--d1) var(--e);color:var(--muted)}
.facet__head[aria-expanded=false] svg{transform:rotate(-90deg)}
.facet__opts{display:flex;flex-direction:column;gap:2px;padding-bottom:14px}
.fopt{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;cursor:pointer;
  font-size:13.5px;text-align:left;transition:background var(--d1) var(--e)}
.fopt:hover{background:rgba(255,255,255,.7)}
.fopt[aria-pressed=true]{background:rgba(158,79,50,.09)}
.fopt__box{width:17px;height:17px;flex:none;border-radius:6px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line-3);transition:all var(--d1) var(--e)}
.fopt__box svg{opacity:0;transition:opacity var(--d1) var(--e)}
.fopt[aria-pressed=true] .fopt__box{background:var(--terra);box-shadow:inset 0 0 0 1.5px var(--terra)}
.fopt[aria-pressed=true] .fopt__box svg{opacity:1}
.fopt__l{flex:1;min-width:0}
.fopt__n{font-size:11.5px;color:var(--muted)}
.fopt[data-zero]{opacity:.42}
.plpbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;
  background:rgba(255,255,255,.5);border-radius:var(--r-lg);box-shadow:var(--sh-inset);
  margin-bottom:20px}
.viewtog{display:flex;gap:3px;background:rgba(18,59,42,.06);border-radius:var(--r-pill);padding:3px}
.viewtog button{width:40px;height:36px;display:grid;place-items:center;border-radius:var(--r-pill);
  cursor:pointer;color:var(--muted);transition:all var(--d1) var(--e)}
.viewtog button[aria-pressed=true]{background:var(--evergreen);color:#FAF8F3}
.fchip{display:inline-flex;align-items:center;gap:8px;background:var(--evergreen);color:#FAF8F3;
  border-radius:var(--r-pill);padding:9px 14px;font-size:12px;cursor:pointer;
  transition:background var(--d1) var(--e)}
.fchip:hover{background:var(--terra)}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));border-radius:var(--r-lg);
  padding:14px 18px;box-shadow:var(--sh-md);transition:transform var(--d2) var(--e)}
.prow:hover{transform:translateY(-3px)}
.prow__img{width:70px;height:70px;border-radius:var(--r-md);overflow:hidden;position:relative;
  flex:none;background:linear-gradient(160deg,#F4F0E6,#EBE6D9)}
.prow__img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.prow__img img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}
.noresults{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:var(--r-xl);padding:clamp(32px,4vw,60px);text-align:center;box-shadow:var(--sh-md)}
.progress{width:min(280px,100%);height:3px;border-radius:var(--r-pill);background:rgba(18,59,42,.1);
  overflow:hidden;margin-inline:auto}
.progress i{display:block;height:100%;background:var(--terra);transition:width var(--d3) var(--e-out)}

/* --- 26. PDP ------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:start}
.pdp__gal{position:sticky;top:calc(var(--hdr) + 16px)}
.pdp__stage{position:relative;aspect-ratio:1/1;border-radius:var(--r-2xl);overflow:hidden;
  background:linear-gradient(160deg,#F4F0E6,#EBE6D9);box-shadow:var(--sh-md)}
.pdp__stage img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.pdp__stage img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}
.pdp__thumbs{display:flex;gap:10px;margin-top:12px}
.pdp__thumb{width:74px;height:74px;border-radius:var(--r-md);overflow:hidden;position:relative;
  cursor:pointer;background:linear-gradient(160deg,#F4F0E6,#EBE6D9);
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow var(--d1) var(--e)}
.pdp__thumb[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--forest)}
.pdp__thumb img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.pdp__thumb img.is-photo{inset:0;width:100%;height:100%;object-fit:cover}
.pdp h1{font-family:var(--display);font-size:clamp(30px,4vw,52px);line-height:1.02;
  margin:12px 0 14px;color:var(--ink-strong)}
.pdp__price{font-family:var(--display);font-size:34px;color:var(--ink-strong)}
.spec{border-radius:var(--r-md);overflow:hidden;font-size:13.5px;background:rgba(255,255,255,.5)}
.spec td{padding:12px 16px;box-shadow:inset 0 -1px 0 var(--line)}
.spec tr:last-child td{box-shadow:none}
.spec td:first-child{width:44%;color:var(--muted)}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;cursor:pointer;font-family:var(--label);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-align:left;
  box-shadow:inset 0 -1px 0 var(--line)}
.acc__head svg{transition:transform var(--d1) var(--e);color:var(--muted)}
.acc__head[aria-expanded=false] svg{transform:rotate(-90deg)}
.acc__body{padding:16px 0 22px;font-size:14px;line-height:1.72;color:var(--body)}

/* --- 27. DOC PAGES ------------------------------------------------------- */
.doc{max-width:74ch}
.contact-hero__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.contact-hero__media{margin:0;aspect-ratio:4/3;border-radius:var(--r-3xl);overflow:hidden;
  background:var(--surface-2);box-shadow:0 40px 80px -42px rgba(18,59,42,.85),
  inset 0 1px 0 rgba(255,255,255,.6)}
.contact-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.doc h2{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.08;
  margin:clamp(30px,4vw,52px) 0 14px;color:var(--ink-strong)}
.doc h3{font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin:26px 0 10px}
.doc p{font-size:15.5px;line-height:1.78;color:var(--body);margin:0 0 16px}
.doc p strong{color:var(--ink);font-weight:700}
.doc ul{margin:0 0 18px}
.doc li{position:relative;padding-left:24px;font-size:15px;line-height:1.75;color:var(--body);
  margin-bottom:9px}
.doc li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:1.5px;
  background:var(--terra);border-radius:var(--r-pill)}
.doc dt{font-weight:700;font-size:15px;margin-top:16px}
.doc dd{margin:4px 0 0;font-size:15px;line-height:1.72;color:var(--body)}
.callout{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-md);margin:0 0 20px}
.callout b{display:block;font-family:var(--label);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terra);margin-bottom:8px}
.callout p{font-size:14.5px;margin:0}
.toc{position:sticky;top:calc(var(--hdr) + 16px);align-self:start}
.toc a{display:block;font-size:13.5px;padding:8px 0 8px 14px;color:var(--muted);
  box-shadow:inset 1px 0 0 var(--line-2)}
.toc a:hover,.toc a[aria-current=true]{color:var(--evergreen);
  box-shadow:inset 2px 0 0 var(--forest)}

/* --- 28. MOBILE ---------------------------------------------------------- */
.bottomnav{position:fixed;left:12px;right:12px;bottom:12px;z-index:94;display:none;
  grid-template-columns:repeat(5,1fr);background:rgba(252,251,247,.9);
  backdrop-filter:blur(18px) saturate(1.4);border-radius:var(--r-lg);
  box-shadow:0 20px 40px -20px rgba(18,59,42,.65),inset 0 0 0 1px var(--line)}
.bottomnav a,.bottomnav button{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 4px;font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;position:relative;border-radius:14px}
.bottomnav [aria-current=page]{color:var(--evergreen)}
.bottompad{display:none;height:86px}
.mobmenu a{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:26px;color:var(--ink);padding:14px;border-radius:var(--r-md);
  transition:background .22s var(--e),padding-left .22s var(--e)}
.mobmenu a:hover{background:rgba(18,59,42,.06);padding-left:20px;color:var(--ink)}

/* `desk`/`mob` only toggle visibility — they must not impose a layout,
   or a block element carrying `desk` (the Learn contents rail) becomes a
   flex row and overlaps the article column. */
.desk{display:revert}
.mob{display:none}

@media (max-width:1400px){
  .navitem{padding:10px 11px}
  .navitem__label{font-size:12.5px;letter-spacing:.1em}
  .loc{padding-inline:10px 12px}
}
@media (max-width:1280px){
  .g-6{grid-template-columns:repeat(4,1fr) !important}
  .mega__grid{grid-template-columns:repeat(3,1fr) 1.1fr}
}
@media (max-width:1180px){
  .plp{grid-template-columns:minmax(0,1fr)}
  .facets{display:none}
}
@media (max-width:1080px){
  :root{--hdr:72px}
  .desk{display:none !important}
  .mob{display:flex !important}
  .burger{display:flex}
  .mainnav{display:none}
  .shell__pad{gap:10px;padding-block:12px}
  .shell__logo{height:52px}
  .headact{gap:0}
  .iconbtn{width:38px;height:38px}
  .cartbtn{padding:9px 14px 9px 11px;gap:7px}
  .promobar__row{justify-content:center;padding:9px 0}
  .promobar__row>span{display:none}
  .promobar .promobar__mob{display:flex;font-size:11.5px;text-align:center}
  .hero__grid,.split,.contact-hero__grid{grid-template-columns:1fr !important}
  .compass{grid-template-columns:1fr !important}
  .g-6{grid-template-columns:repeat(3,1fr) !important}
  .g-4,.metrics{grid-template-columns:repeat(2,1fr) !important}
  .expgrid{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:repeat(3,1fr);gap:30px}
  .pdp{grid-template-columns:1fr}
  .pdp__gal{position:static}
  .toc{display:none}
}
@media (max-width:900px){
  /* Horizontal cards need the full column width to stay readable. */
  #el-comp-matches{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:680px){
  /* Two product cards in view on a phone. One at a time reads as a slideshow
     and hides the fact that the rail scrolls at all; two makes the row
     obviously horizontal and still leaves the card legible. The width is
     derived from the wrap (92vw) so the second card lands flush with the
     right-hand edge rather than being cropped at an arbitrary point. */
  :root{--rail-gap:12px;--rail-card:calc((92vw - var(--rail-gap)) / 2)}
  .g-6,.g-4,.g-3,.metrics{grid-template-columns:repeat(2,1fr) !important}
  .expgrid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:repeat(2,1fr)}
  .g-1m{grid-template-columns:1fr !important}
  .bottomnav{display:grid}
  .bottompad{display:block}
  .toast{bottom:100px}
  .hero__orb,.gate__orb{display:none}
  .promo__body{max-width:100%}
  .promo__art{opacity:.28}
  .catrail{grid-auto-columns:minmax(112px,1fr)}
  .drawer{width:100%}
  .sec-head,.sec-head--end{flex-direction:column;align-items:stretch}
}
@media (max-width:680px){
  /* Product grids stay two-up on phones — a single column wastes the screen
     and buries the shelf (brief §46). Card type tightens to suit. */
  #el-products .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important}
  #el-acct-wish{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pcard__body{padding:12px 12px 14px;gap:5px}
  .pcard__name{font-size:17px}
  .pcard__brand{font-size:10.5px;letter-spacing:.12em}
  .pcard__meta,.pcard__spec{font-size:11px}
  .pcard__price span:first-child{font-size:19px}
  .pcard__media{margin:6px 6px 0;border-radius:14px}
  /* The badge has to fit a ~140px card without clipping. */
  .badge{top:8px;left:8px;font-size:9px;letter-spacing:.08em;padding:5px 8px;max-width:calc(100% - 52px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pcard__wish{width:30px;height:30px;top:7px;right:7px}
  .btn--sm{padding:11px 14px;font-size:10.5px;letter-spacing:.08em}
}
@media (max-width:560px){
  /* Text-led cards get the full width rather than two cramped columns. */
  #el-edu,#el-journal,#el-fulfil,.expgrid{grid-template-columns:minmax(0,1fr) !important}
  .edu h3,.jcard h3{font-size:24px}
}
@media (min-width:1081px){
  .mob{display:none !important}
}

/* --- 29. UTILITIES ------------------------------------------------------- */
.grid{display:grid}
/* Grid items default to min-width:auto, which lets a long display-serif word
   push a track wider than its column. Nothing here needs that. */
.grid>*,.metrics>*,.expgrid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gap-sm{gap:12px}.gap{gap:18px}.gap-lg{gap:clamp(20px,2.6vw,34px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mt-xs{margin-top:8px}.mt-sm{margin-top:14px}.mt{margin-top:24px}.mt-lg{margin-top:38px}
.center{text-align:center}
.flexrow{display:flex;align-items:center}
.wrapf{flex-wrap:wrap}

/* --- 30. CAMPAIGN SLIDER + GALLERY --------------------------------------- */
.slider{position:relative;border-radius:var(--r-3xl);overflow:hidden;box-shadow:var(--sh-xl)}
.slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth}
.slider__track::-webkit-scrollbar{display:none}
.slider__track{scrollbar-width:none;-ms-overflow-style:none}
.slide{scroll-snap-align:start;position:relative;min-height:clamp(380px,46vw,560px);
  display:flex;align-items:flex-end;overflow:hidden}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 9s linear}
.slide[data-live] img{transform:scale(1.06)}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,42,29,.88) 0%,rgba(11,42,29,.62) 42%,
  rgba(11,42,29,.12) 74%,rgba(11,42,29,.28) 100%)}
.slide__body{position:relative;z-index:2;padding:clamp(28px,4vw,58px);max-width:min(600px,86%);
  color:#FAF8F3}
.slide__body h3{font-family:var(--display);font-size:clamp(30px,3.8vw,52px);line-height:1.02;
  margin:14px 0 0;color:#FAF8F3}
.slide__body p{font-size:15.5px;line-height:1.7;color:var(--sage-text);margin:16px 0 0;
  max-width:44ch}
.slider__ui{position:absolute;left:0;right:0;bottom:clamp(18px,2.4vw,28px);z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-inline:clamp(28px,4vw,58px);pointer-events:none}
.slider__ui>*{pointer-events:auto}
.slider .cbtn{background:rgba(250,248,243,.14);color:#FAF8F3;
  box-shadow:inset 0 0 0 1px rgba(250,248,243,.3)}
.slider .cbtn:hover{background:#FAF8F3;color:var(--evergreen)}
.slider .dot{background:rgba(250,248,243,.38)}
.slider .dot[aria-current=true]{background:var(--gold)}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.gallery figure{margin:0;position:relative;display:block;aspect-ratio:1;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-sm)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figure::after{content:"";position:absolute;inset:0;background:rgba(11,42,29,0);
  transition:background var(--d2) var(--e)}
.gallery figure:hover::after{background:rgba(11,42,29,.18)}

/* photo heads on editorial cards */
.edu__img,.jcard__img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-md);margin-bottom:16px}
.edu__img img,.jcard__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out)}
.edu:hover .edu__img img,.jcard:hover .jcard__img img{transform:scale(1.06)}
.jcard--photo{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  color:var(--ink)}
.jcard--photo h3{color:var(--ink-strong)}
.jcard--photo p{color:var(--body)}
.jcard--photo .jcard__meta{color:var(--leaf)}
.jcard--photo .jcard__go{color:var(--evergreen)}

/* a photo band for document pages */
.figband{position:relative;border-radius:var(--r-xl);overflow:hidden;margin:0 0 26px;
  box-shadow:var(--sh-md);aspect-ratio:16/7}
.figband img{width:100%;height:100%;object-fit:cover}
.figband figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;color:#FAF8F3;
  font-size:12.5px;background:linear-gradient(180deg,rgba(11,42,29,0),rgba(11,42,29,.72))}

/* Focal points for the documentary Kinfolk set. The same source can now be
   reused safely in a wide slider, a square gallery tile, or an editorial card
   without losing the subject to a centre crop. */
img[data-photo="kinfolk-growroom"]{object-position:50% 58%}
img[data-photo="kinfolk-jar-wall"]{object-position:50% 48%}
img[data-photo="kinfolk-hand-trim"]{object-position:58% 42%}
img[data-photo="kinfolk-macro-flower"]{object-position:50% 42%}
img[data-photo="kinfolk-responsible-use"]{object-position:52% 50%}

@media (max-width:1080px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:680px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide{min-height:420px}
  .slide::after{background:linear-gradient(180deg,rgba(11,42,29,.30) 0%,rgba(11,42,29,.55) 45%,
    rgba(11,42,29,.9) 100%)}
  .slide__body{max-width:100%;padding-bottom:70px}
  .slider__ui{justify-content:center}
  .figband{aspect-ratio:4/3}
}

/* ==========================================================================
   31 · ORDER TRACKING
   A vertical progress list rather than a horizontal bar: the step labels are
   full sentences, and four of them side by side would either wrap badly or be
   abbreviated into something less clear.
   ========================================================================== */
.track{list-style:none;margin:0;padding:0;display:grid}
.track__step{position:relative;display:flex;gap:16px;padding:0 0 22px;min-height:44px}
.track__step:last-child{padding-bottom:0}
.track__step::before{content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;
  background:var(--line-2)}
.track__step:last-child::before{display:none}
.track__step[data-state=done]::before{background:var(--botanical)}
.track__dot{position:relative;z-index:1;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:#FAF8F3;
  box-shadow:inset 0 0 0 2px var(--line-2)}
.track__step[data-state=done] .track__dot{background:var(--botanical);box-shadow:none}
.track__step[data-state=next] .track__dot{box-shadow:inset 0 0 0 2px var(--botanical)}
.track__step[data-state=next] .track__dot::after{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--botanical);animation:elPulseDot 2s var(--e) infinite}
.track__step b{display:block;font-size:15px;line-height:1.35;color:var(--ink-strong)}
.track__step[data-state=wait] b{color:var(--muted);font-weight:500}
.track__step time{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
@keyframes elPulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
@media (prefers-reduced-motion:reduce){.track__dot::after{animation:none}}

/* ==========================================================================
   32 · MOBILE DRAWER SECTIONS
   Two accordions rather than one flat list: site pages and product categories
   are different kinds of thing, and eighteen undifferentiated rows is a
   scroll, not a menu. One open at a time.
   ========================================================================== */
.mobsec{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 16px;border:0;background:none;text-align:left;cursor:pointer;
  border-top:1px solid var(--line-2);color:var(--ink);font-family:var(--ui)}
.mobsec:first-child{border-top:0}
.mobsec__t{flex:1;min-width:0}
.mobsec .lbl{display:block;font-size:11px;letter-spacing:.18em;color:var(--forest);line-height:1.3}
.mobsec__n{display:block;font-size:12px;color:var(--muted);margin-top:3px;
  font-family:var(--ui);letter-spacing:0;text-transform:none}
.mobsec svg{flex:0 0 auto;color:var(--muted);transition:transform var(--d2) var(--e)}
.mobsec[aria-expanded=true]{background:rgba(18,59,42,.045)}
.mobsec[aria-expanded=true] svg{transform:rotate(180deg);color:var(--forest)}
.mobsec:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.mobsec__panel{padding:4px 0 10px}
.mobmenu__c{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}