/* ===========================================================================
   Palette. Green and yellow on white.

   Tokens are named for the JOB, never the colour. The previous build's
   stylesheet carried three palettes in a fortnight and the colour names
   outlived two of them. A future swap is the block below and nothing else.

   THE RULE THAT CANNOT BEND: the yellow is never darkened, and nothing is
   outlined to force a colour to work. White on #FFC700 is 1.6:1, so type on a
   yellow ground is set in deep green instead, which is about 9:1 and needs no
   trickery. White type goes on a GREEN ground, where it belongs. Yellow TEXT
   only ever sits on green or ink, never on white, where it is 1.4:1.
   ======================================================================== */
:root{
  --brand:        #07662F;   /* primary green, 7.12:1 on white */
  --brand-lift:   #12A24C;
  --brand-press:  #054E24;   /* the keyline colour */
  --brand-night:  #06301A;
  --accent:       #FFC700;   /* yellow. Never darkened. */
  --accent-pale:  #FFF9E8;
  --mint-pale:    #F2FAF5;

  --ink:          #10231A;
  --ink-soft:     #566A5E;
  --ink-faint:    #8A978F;
  --paper:        #FFFFFF;
  --line:         #E8EDE9;
  --line-strong:  #D2DBD5;
  --sale:         #B3261E;

  --wrap: 1240px;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- header
   Three light bars on white. Clean, roomy, green type. */
.bar-promo{
  background:var(--accent);color:var(--ink);
  text-align:center;font-size:13px;font-weight:700;padding:10px 16px;
}
.bar-promo a{text-decoration:underline;text-underline-offset:3px}
.bar-util{background:#fff;border-bottom:1px solid var(--line);font-size:12.5px;
          color:var(--ink-soft);padding:9px 0}
.bar-util .wrap{display:flex;gap:22px;align-items:center;justify-content:flex-end}
.bar-util a:hover{color:var(--brand)}
.bar-util .loc{margin-right:auto;display:flex;align-items:center;gap:9px}
.bar-util .chip{
  background:var(--accent);color:var(--ink);font-weight:800;
  padding:3px 9px;font-size:11px;letter-spacing:.04em;
}
.bar-main{background:#fff;padding:22px 0}
.bar-main .wrap{display:flex;align-items:center;gap:30px}
.logo{display:flex;flex-direction:column;line-height:1;flex:0 0 auto}
.logo .mark{font-size:30px;font-weight:900;letter-spacing:.16em;color:var(--brand)}
.logo .tag{font-size:11px;letter-spacing:.1em;color:var(--ink-soft);margin-top:5px}
.search{flex:1;display:flex;max-width:600px;border:2px solid var(--brand)}
.search input{
  flex:1;border:0;padding:12px 16px;font-size:14px;font-family:inherit;
  min-width:0;outline:none;
}
.search button{
  border:0;background:var(--brand);color:#fff;font-weight:800;
  padding:0 24px;font-size:13px;cursor:pointer;letter-spacing:.05em;
}
.search button:hover{background:var(--brand-lift)}
.hdr-acts{display:flex;gap:20px;align-items:center;font-size:13px}
.cartbtn{position:relative;font-weight:700;color:var(--brand)}
.cartbtn .count{
  position:absolute;top:-8px;right:-12px;background:var(--accent);color:var(--ink);
  font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:10px;
  display:grid;place-items:center;padding:0 5px;
}
.bar-nav{background:#fff;border-top:1px solid var(--line);
         border-bottom:1px solid var(--line)}
.bar-nav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.bar-nav .wrap::-webkit-scrollbar{display:none}
.bar-nav a{
  color:var(--ink);font-size:13.5px;font-weight:600;padding:14px 16px;
  white-space:nowrap;border-bottom:3px solid transparent;
}
.bar-nav a:hover{color:var(--brand)}
.bar-nav a.on{color:var(--brand);border-bottom-color:var(--accent);font-weight:800}
.bar-ship{background:var(--mint-pale);font-size:12.5px;padding:11px 0;
          color:var(--ink-soft)}
.bar-ship .wrap{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.bar-ship b{color:var(--brand)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:#fff;overflow:hidden;
      border-bottom:1px solid var(--line)}
.hero-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;position:relative;display:grid;
       grid-template-columns:1fr 1fr;align-items:center;gap:40px;
       padding:56px 0;min-height:380px}
.slide-txt{padding:0 24px 0 max(24px,calc((100vw - var(--wrap))/2 + 24px))}
.slide h2{margin:0 0 16px;font-size:46px;line-height:1.05;font-weight:900;
          letter-spacing:-.025em;color:var(--ink)}
.slide h2 em{font-style:normal;color:var(--brand)}
.slide p{margin:0 0 26px;color:var(--ink-soft);font-size:16px;max-width:44ch}
.slide .kicker{
  display:inline-block;background:var(--accent);color:var(--ink);
  font-size:11.5px;font-weight:800;letter-spacing:.11em;padding:6px 12px;
  margin-bottom:18px;
}
.slide-img{height:100%;min-height:320px;display:grid;place-items:center;
           background:var(--mint-pale)}
.slide-img img{width:100%;height:100%;object-fit:contain;padding:34px}
.btn{
  display:inline-block;background:var(--brand);color:#fff;
  font-weight:800;font-size:14px;padding:14px 32px;letter-spacing:.03em;
  border:0;cursor:pointer;
}
.btn:hover{background:var(--brand-lift)}
.btn.yellow{background:var(--accent);color:var(--ink)}
.btn.yellow:hover{background:#FFD633}
.btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand);
           padding:12px 30px}
.btn.ghost:hover{background:var(--brand);color:#fff}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  background:#fff;border:1px solid var(--line-strong);cursor:pointer;
  color:var(--brand);font-size:20px;display:grid;place-items:center;
  border-radius:50%;
}
.hero-arrow.l{left:14px} .hero-arrow.r{right:14px}
.hero-arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:8px;
           justify-content:center}
.hero-dots i{width:8px;height:8px;background:var(--line-strong);cursor:pointer;
             border-radius:50%}
.hero-dots i.on{background:var(--accent);width:26px;border-radius:4px}

/* ---------------------------------------------------------------- sections */
.sec{padding:64px 0}
.sec.tint{background:var(--mint-pale)}
.sec.tint-2{background:var(--accent-pale)}

/* THE SECTION BAND. Full width GREEN rectangle, text centred inside it.
   White on #07662F is 7.12:1, so it reads on its own and nothing needs an
   outline. The subtitle sits tight under the heading rather than floating. */
.secbar{
  background:var(--brand);padding:28px 24px;margin-bottom:30px;text-align:center;
}
.secbar h2{
  margin:0;font-size:clamp(21px,2.5vw,32px);font-weight:900;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.1;color:#fff;
}
.secbar p{
  margin:5px 0 0;font-size:13px;font-weight:500;color:#C5E0CF;
}
.secbar .more{
  display:inline-block;margin-top:12px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--accent);
  border-bottom:2px solid var(--accent);padding-bottom:2px;
}
.secbar .more:hover{color:#fff;border-bottom-color:#fff}
/* yellow variant, kept for the rare band that should shout */
.secbar.yellow{background:var(--accent)}
.secbar.yellow h2{color:var(--brand-press)}
.secbar.yellow p{color:var(--brand-press)}
.secbar.yellow .more{color:var(--brand-press);border-bottom-color:var(--brand-press)}

/* category tiles */
.cattiles{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 20px}
.cattile{text-align:center}
.cattile .disc{
  aspect-ratio:1;border-radius:50%;background:var(--mint-pale);display:grid;
  place-items:center;overflow:hidden;border:2px solid transparent;
  transition:border-color .15s;
}
.cattile:hover .disc{border-color:var(--accent)}
.cattile .disc img{width:74%;height:74%;object-fit:contain;transition:transform .4s}
.cattile:hover .disc img{transform:scale(1.08)}
.cattile b{display:block;margin-top:13px;font-size:14.5px;font-weight:800;
           line-height:1.25;color:var(--ink)}
.cattile span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-faint)}

/* promo cards */
.promo3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promo2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pcard{
  position:relative;padding:32px;min-height:200px;display:flex;
  flex-direction:column;justify-content:center;
}
.pcard.green{background:var(--brand);color:#fff}
.pcard.night{background:var(--brand-night);color:#fff}
.pcard.yellow{background:var(--accent);color:var(--ink)}
.pcard.mint{background:var(--mint-pale);color:var(--brand-press);
            border:1px solid var(--line)}
.pcard h3{margin:0 0 10px;font-size:24px;font-weight:900;letter-spacing:-.015em}
.pcard.green h3,.pcard.night h3{color:var(--accent)}   /* yellow type on green */
.pcard p{margin:0 0 20px;font-size:14px;opacity:.92;max-width:34ch}
.pcard .go{font-size:13px;font-weight:800;letter-spacing:.05em;
           text-transform:uppercase;border-bottom:2px solid currentColor;
           align-self:flex-start;padding-bottom:3px}
.pcard.green .go,.pcard.night .go{color:#fff;border-color:var(--accent)}

/* ---------------------------------------------------------------- products */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.rail{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;
      scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.rail > *{flex:0 0 234px;scroll-snap-align:start}

.card{
  background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  position:relative;transition:border-color .15s,box-shadow .15s;
}
.card:hover{border-color:var(--accent);box-shadow:0 6px 22px rgba(16,35,26,.07)}
.card .ph{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:18px}
.card .body{padding:0 16px 18px;display:flex;flex-direction:column;flex:1}
.card .bd{font-size:11px;font-weight:800;color:var(--brand);
          text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.card .nm{font-size:13.5px;line-height:1.4;margin:0 0 12px;flex:1;color:var(--ink);
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
          overflow:hidden}
.card .pr{font-size:17px;font-weight:900;color:var(--ink)}
.card .add{
  margin-top:14px;background:#fff;color:var(--brand);border:2px solid var(--brand);
  padding:10px;font-size:13px;font-weight:800;cursor:pointer;letter-spacing:.03em;
}
.card .add:hover{background:var(--brand);color:#fff}
.card .add.in{background:var(--accent);color:var(--ink);border-color:var(--accent)}

.badge{
  position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;
  padding:5px 10px;letter-spacing:.05em;z-index:2;
}
.badge.deal{background:var(--brand);color:#fff}
.badge.free{background:var(--accent);color:var(--ink)}
.left{
  position:absolute;bottom:12px;left:12px;background:#fff;
  border:1px solid var(--sale);color:var(--sale);font-size:11px;font-weight:800;
  padding:4px 9px;z-index:2;
}
.rate{display:flex;gap:5px;align-items:center;font-size:12px;
      color:var(--ink-faint);margin-bottom:8px}
.rate .st{color:#D9A400;letter-spacing:-1px}

/* ---------------------------------------------------------------- shop */
.shoplay{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.filters{position:sticky;top:16px}
.fgrp{border-bottom:1px solid var(--line);padding:20px 0}
.fgrp:first-child{padding-top:0}
.fgrp:last-child{border-bottom:0}
.fgrp h3{margin:0 0 12px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
         color:var(--brand);font-weight:800}
.fgrp label{display:flex;gap:9px;align-items:center;font-size:13.5px;padding:5px 0;
            cursor:pointer;color:var(--ink-soft)}
.fgrp label:hover{color:var(--brand)}
.fgrp .cnt{margin-left:auto;color:var(--ink-faint);font-size:12px}
.toolbar{display:flex;gap:16px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.toolbar select{padding:10px 12px;border:1px solid var(--line-strong);
                font-family:inherit;font-size:13.5px;background:#fff}
.toolbar .n{color:var(--ink-soft);font-size:13.5px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pager button{
  border:1px solid var(--line-strong);background:#fff;padding:10px 16px;
  font-size:13.5px;cursor:pointer;font-weight:700;color:var(--ink);
}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pager button:disabled{opacity:.35;cursor:default}

/* ---------------------------------------------------------------- product */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:40px 0}
.pdp .gal{border:1px solid var(--line);aspect-ratio:1;display:grid;
          place-items:center;background:#fff;position:relative}
.pdp .gal img{width:100%;height:100%;object-fit:contain;padding:40px}
.pdp h1{margin:8px 0 14px;font-size:31px;line-height:1.2;font-weight:900;
        letter-spacing:-.02em}
.pdp .brandline{font-size:12.5px;font-weight:800;color:var(--brand);
                text-transform:uppercase;letter-spacing:.09em}
.pdp .price{font-size:36px;font-weight:900;color:var(--ink);margin:18px 0}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);
     width:max-content}
.qty button{width:44px;height:48px;border:0;background:#fff;font-size:19px;
            cursor:pointer;color:var(--brand)}
.qty button:hover{background:var(--mint-pale)}
.qty input{width:58px;height:48px;border:0;text-align:center;font-size:16px;
           font-weight:700;font-family:inherit}
.buyrow{display:flex;gap:12px;margin:22px 0}
.buyrow .btn{flex:1;text-align:center}
.offbox{border:1px solid var(--line);margin-top:26px}
.offbox h3{margin:0;background:var(--brand);padding:13px 18px;font-size:13.5px;
           font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.06em}
.offbox ul{margin:0;padding:16px 18px 18px 36px}
.offbox li{font-size:14px;margin-bottom:9px;color:var(--ink-soft)}
.offbox li b{color:var(--brand)}
.promise{display:grid;gap:10px;margin-top:24px}
.promise div{font-size:13.5px;color:var(--ink-soft);display:flex;gap:11px}
.promise div::before{content:'✓';color:var(--brand);font-weight:900}

/* ---------------------------------------------------------------- cart */
.cartlay{display:grid;grid-template-columns:1fr 370px;gap:44px;align-items:start;
         padding:34px 0}
.citem{display:grid;grid-template-columns:104px 1fr auto;gap:20px;padding:22px 0;
       border-bottom:1px solid var(--line);align-items:center}
.citem .ph{border:1px solid var(--line);aspect-ratio:1;display:grid;place-items:center}
.citem .ph img{width:100%;height:100%;object-fit:contain;padding:10px}
.citem .nm{font-size:14.5px;font-weight:700;margin-bottom:4px}
.citem .rm{background:0;border:0;color:var(--ink-faint);font-size:12.5px;
           cursor:pointer;text-decoration:underline;padding:0;margin-top:10px}
.citem .rm:hover{color:var(--sale)}
.summary{border:1px solid var(--line);position:sticky;top:16px}
.summary h2{margin:0;background:var(--brand);padding:14px 20px;font-size:14px;
            font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.06em;
            text-align:center}
.summary .rows{padding:22px 20px}
.srow{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:12px;
      color:var(--ink-soft)}
.srow.save{color:var(--brand);font-weight:700}
.srow.tot{border-top:2px solid var(--ink);padding-top:16px;margin-top:16px;
          font-size:21px;font-weight:900;color:var(--ink)}
.summary .btn{width:100%;margin-top:8px;text-align:center}
.earned{background:var(--accent-pale);border-top:1px solid var(--line);
        padding:16px 20px;font-size:13.5px}
.earned b{color:var(--brand-press)}
.nextup{background:var(--mint-pale);padding:16px 20px;font-size:13.5px;
        border-top:1px solid var(--line)}
.nextup b{color:var(--brand)}
.prog{display:block;height:7px;background:#fff;border:1px solid var(--line);
      margin-top:10px}
.prog i{display:block;height:100%;background:var(--accent)}
.empty{text-align:center;padding:90px 20px}
.empty h2{font-size:26px;margin:0 0 12px}

/* ---------------------------------------------------------------- footer */
footer{background:var(--brand-night);color:#B9D2C3;margin-top:70px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;
       padding:56px 0 44px}
.fgrid h4{margin:0 0 16px;font-size:12.5px;letter-spacing:.1em;
          text-transform:uppercase;color:var(--accent)}
.fgrid a{display:block;padding:5px 0;color:#B9D2C3}
.fgrid a:hover{color:var(--accent)}
.fbrand .mark{font-size:28px;font-weight:900;letter-spacing:.16em;color:#fff}
.fbrand .tag{color:var(--accent);font-size:12px;letter-spacing:.1em;margin:7px 0 18px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:12.5px;
      display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1080px){
  .cattiles{grid-template-columns:repeat(3,1fr)}
  .grid5{grid-template-columns:repeat(4,1fr)}
  .slide h2{font-size:38px}
}
@media(max-width:900px){
  .sec{padding:44px 0}
  .slide{grid-template-columns:1fr;padding:40px 0;min-height:0}
  .slide-img{display:none}
  .slide-txt{padding:0 24px}
  /* the arrows sit over the copy once the slide is one column; the dots
     already give a way through, so drop them rather than inset the text */
  .hero-arrow{display:none}
  .slide h2{font-size:32px}
  .shoplay{grid-template-columns:1fr;gap:26px}
  .filters{position:static}
  .cartlay{grid-template-columns:1fr;gap:26px}
  .summary{position:static}
  .pdp{grid-template-columns:1fr;gap:28px;padding:26px 0}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .secbar{padding:22px 18px;margin-bottom:24px}
}
@media(max-width:680px){
  body{font-size:14px}
  .wrap{padding:0 16px}
  .cattiles{grid-template-columns:repeat(3,1fr);gap:14px}
  .grid4,.grid5{grid-template-columns:repeat(2,1fr);gap:14px}
  .promo3,.promo2{grid-template-columns:1fr}
  .bar-main{padding:14px 0}
  .bar-main .wrap{flex-wrap:wrap;gap:14px}
  .search{order:3;flex:1 0 100%;max-width:none}
  .hdr-acts{margin-left:auto}
  .fgrid{grid-template-columns:1fr}
  .bar-util .hide-s{display:none}
  .bar-ship .wrap{gap:16px}
  .slide h2{font-size:27px}
  .citem{grid-template-columns:76px 1fr;gap:14px}
  .citem > div:last-child{grid-column:2;text-align:left}
}

/* ---------------------------------------------------------------- tables
   Delivery zones, on the home band and the delivery page. */
.tblwrap{overflow-x:auto;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.tbl th{
  background:var(--brand);color:#fff;text-align:left;padding:14px 18px;
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;
}
.tbl td{padding:15px 18px;border-top:1px solid var(--line);color:var(--ink-soft)}
.tbl td b{color:var(--ink)}
.tbl .num{text-align:right;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--mint-pale)}
.muted{color:var(--ink-faint)}

/* ---------------------------------------------------------------- editorial
   About, delivery and help pages. Roomy measure on white. */
.page{max-width:72ch;margin:0 auto;padding:16px 0 20px}
.page h1{font-size:38px;font-weight:900;letter-spacing:-.025em;margin:0 0 10px}
.page .lede{font-size:18px;color:var(--ink-soft);margin:0 0 34px}
.page h2{font-size:21px;font-weight:800;margin:38px 0 12px;color:var(--brand)}
.page p,.page li{color:var(--ink-soft);font-size:15.5px;line-height:1.75}
.page ul{padding-left:22px}
.page .note{
  background:var(--mint-pale);border-left:4px solid var(--accent);
  padding:18px 22px;margin:26px 0;font-size:15px;
}
.page .note b{color:var(--brand-press)}

/* a plain form, used by track and account */
.form{display:grid;gap:14px;max-width:420px;margin-top:22px}
.form label{font-size:13px;font-weight:700;color:var(--ink)}
.form input{
  width:100%;padding:13px 15px;border:1px solid var(--line-strong);
  font-family:inherit;font-size:15px;
}
.form input:focus{outline:2px solid var(--brand);outline-offset:-2px;border-color:var(--brand)}

/* brand index */
.brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.brandcard{
  border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;
  gap:4px;
}
.brandcard:hover{border-color:var(--accent)}
.brandcard b{font-size:15px}
.brandcard span{font-size:12.5px;color:var(--ink-faint)}
.alphabar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:26px}
.alphabar a{
  min-width:34px;text-align:center;padding:7px 9px;border:1px solid var(--line);
  font-weight:800;font-size:13px;color:var(--brand);
}
.alphabar a:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* ---------------------------------------------------------------- lockup
   The supplied artwork is a stacked lockup. The header splits it so the mark
   and the wordmark sit side by side and the bar stays shallow. The tagline is
   baked into the artwork rather than set as live text, because it is yellow
   and needs its green keyline to survive a white ground. */
.logo{flex-direction:row;align-items:center;gap:12px}
.logo-mark{height:44px;width:auto}
.logo-word{height:34px;width:auto}
.fbrand .flogo{width:100%;max-width:290px;height:auto;margin-bottom:18px}
@media(max-width:1000px){
  /* the full lockup squeezes the search field, and the shop name is already
     in the page title and the footer, so the mark carries it alone */
  .logo-word{display:none}
}
@media(max-width:680px){
  .logo-mark{height:36px}
}

/* ---------------------------------------------------------------- bag drawer
   Adding to the bag should show you the bag. Without this the only feedback is
   a number ticking up in the corner, which is how people lose track of what
   they picked and abandon the order. */
.drawer-veil{
  position:fixed;inset:0;background:rgba(14,31,22,.42);opacity:0;
  pointer-events:none;transition:opacity .22s ease;z-index:90;
}
.drawer-veil.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);
  background:#fff;z-index:91;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:-10px 0 40px rgba(14,31,22,.16);
}
.drawer.open{transform:translateX(0)}
.drawer-top{
  background:var(--brand);color:#fff;padding:18px 20px;display:flex;
  align-items:center;gap:12px;flex:0 0 auto;
}
.drawer-top h2{
  margin:0;font-size:14px;font-weight:900;letter-spacing:.07em;
  text-transform:uppercase;
}
.drawer-top .n{font-size:13px;color:#BFE0CC}
.drawer-close{
  margin-left:auto;background:0;border:0;color:#fff;font-size:26px;
  line-height:1;cursor:pointer;padding:0 2px;
}
.drawer-close:hover{color:var(--accent)}
.drawer-body{flex:1;overflow-y:auto;padding:4px 20px}
.drawer-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:16px 20px}
.dline{
  display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.dline .ph{border:1px solid var(--line);aspect-ratio:1;display:grid;place-items:center}
.dline .ph img{width:100%;height:100%;object-fit:contain;padding:5px}
.dline .nm{font-size:13px;font-weight:600;line-height:1.35;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
           overflow:hidden}
.dline .pr{font-size:13.5px;font-weight:800;white-space:nowrap}
.dqty{display:flex;align-items:center;border:1px solid var(--line-strong);
      width:max-content;margin-top:6px}
.dqty button{width:28px;height:28px;border:0;background:#fff;cursor:pointer;
             font-size:15px;color:var(--brand);line-height:1}
.dqty button:hover{background:var(--mint-pale)}
.dqty span{min-width:30px;text-align:center;font-size:13px;font-weight:700}
.dline .rm{background:0;border:0;color:var(--ink-faint);font-size:11.5px;
           cursor:pointer;text-decoration:underline;padding:0;margin-top:5px}
.dline .rm:hover{color:var(--sale)}
.drow{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px;
      color:var(--ink-soft)}
.drow.save{color:var(--brand);font-weight:700}
.drow.tot{font-size:18px;font-weight:900;color:var(--ink);
          border-top:2px solid var(--ink);padding-top:11px;margin-top:11px}
.dnudge{
  background:var(--accent);color:var(--brand-press);font-size:12.5px;
  font-weight:700;padding:10px 12px;margin-bottom:12px;
}
.dnudge .prog{display:block;height:5px;background:rgba(5,78,36,.18);margin-top:7px}
.dnudge .prog i{display:block;height:100%;background:var(--brand-press)}
.drawer .btn{width:100%;text-align:center;margin-top:10px}
.drawer .keep{
  display:block;width:100%;text-align:center;margin-top:10px;font-size:13px;
  color:var(--ink-soft);background:0;border:0;cursor:pointer;
  text-decoration:underline;
}
.dempty{text-align:center;padding:50px 10px;color:var(--ink-faint)}

/* ---------------------------------------------------------------- checkout
   Built for a phone on mobile data: big touch targets, no dropdowns, and the
   total always on screen. */
.cstep{padding:0 0 34px}
.cstep h3{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:18px;
  font-weight:800;letter-spacing:-.01em;
}
.cstep h3 i{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--brand);
  color:#fff;font-style:normal;font-size:14px;font-weight:800;
  display:grid;place-items:center;
}
.fields{display:grid;gap:16px;max-width:460px}
.fld{display:grid;gap:6px}
.fld > span{font-size:13.5px;font-weight:700}
.fld > span em{font-style:normal;font-weight:500;color:var(--ink-faint)}
.fld input{
  width:100%;padding:15px 16px;border:1px solid var(--line-strong);
  font-family:inherit;font-size:16px;background:#fff;color:var(--ink);
}
.fld input:focus{outline:2px solid var(--brand);outline-offset:-2px;border-color:var(--brand)}
.fld input.bad{border-color:var(--sale);outline-color:var(--sale)}
.fld small{font-size:12.5px;color:var(--ink-faint)}
.fld small.err{color:var(--sale);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .chip{
  display:grid;gap:2px;text-align:left;padding:12px 16px;cursor:pointer;
  background:#fff;border:1px solid var(--line-strong);font-family:inherit;
  color:var(--ink);
}
.chips .chip b{font-size:14.5px;font-weight:700}
.chips .chip span{font-size:12.5px;color:var(--ink-faint)}
.chips .chip:hover{border-color:var(--brand)}
.chips .chip.on{border-color:var(--brand);background:var(--mint-pale);
                box-shadow:inset 0 0 0 1px var(--brand)}
.zonenote{margin:12px 0 0;font-size:13.5px;color:var(--ink-faint)}

.picktwo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.paylist{display:grid;gap:10px;max-width:460px}
.opt{
  display:grid;gap:3px;text-align:left;padding:16px;cursor:pointer;background:#fff;
  border:1px solid var(--line-strong);font-family:inherit;color:var(--ink);
}
.opt:hover{border-color:var(--brand)}
.opt.on{border-color:var(--brand);background:var(--mint-pale);
        box-shadow:inset 0 0 0 1px var(--brand)}
.opt b{font-size:15px;font-weight:800}
.opt > span{font-size:15px;font-weight:800;color:var(--brand)}
.opt small{font-size:12.5px;color:var(--ink-faint);line-height:1.4}
.opt.wide{grid-template-columns:1fr}

.needs{
  background:var(--accent-pale);border-left:3px solid var(--accent);
  padding:10px 12px;margin:14px 0 10px;font-size:13px;color:var(--ink);
}
.summary .btn:disabled{opacity:.4;cursor:default}
.summary .btn:disabled:hover{background:var(--brand)}

/* the phone bar. The desktop summary is off screen on a handset, so the total
   and the one button that matters ride along with the page. */
.paybar{display:none}
@media(max-width:900px){
  .paybar{
    display:flex;position:sticky;bottom:0;z-index:40;gap:14px;align-items:center;
    background:#fff;border-top:1px solid var(--line-strong);padding:12px 16px;
    margin:0 -16px;box-shadow:0 -4px 18px rgba(16,35,26,.08);
  }
  .paybar div{display:grid;line-height:1.2}
  .paybar span{font-size:12px;color:var(--ink-faint)}
  .paybar b{font-size:19px;font-weight:900}
  .paybar .btn{margin-left:auto;padding:14px 24px}
  .summary .btn, .needs{display:none}
}
@media(max-width:560px){
  .picktwo{grid-template-columns:1fr}
  .chips .chip{flex:1 1 calc(50% - 5px)}
}

/* active filter chips, so it is always obvious what is narrowing the results */
#active{display:flex;gap:8px;flex-wrap:wrap}
.fchip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--brand);background:var(--mint-pale);color:var(--brand);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
.fchip:hover{background:var(--brand);color:#fff}
.fchip span{font-size:15px;line-height:1}
.fchip.all{border-color:var(--line-strong);background:#fff;color:var(--ink-soft)}
.fchip.all:hover{border-color:var(--sale);background:#fff;color:var(--sale)}

/* ---------------------------------------------------------------- tilt
   Product cards lean toward the pointer. Kept under 10 degrees: past that it
   stops reading as depth and starts reading as a gimmick. Pointer driven only,
   so a touch device gets nothing rather than something janky. */
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .14s ease-out, border-color .15s, box-shadow .15s;
        transform-style:preserve-3d;will-change:transform}
  .cardwrap{perspective:900px}
}
@media (prefers-reduced-motion:reduce){
  .card{transition:border-color .15s,box-shadow .15s !important;transform:none !important}
}

/* ---------------------------------------------------------------- wheel */
.spin{
  display:grid;grid-template-columns:300px 1fr;gap:38px;align-items:center;
  background:var(--brand-night);padding:38px;color:#fff;
}
.spinbox{position:relative;width:280px;height:280px;justify-self:center}
.spinbox svg{display:block}
#wheelSvg{transition:transform 4.4s cubic-bezier(.17,.67,.2,1)}
.spin-needle{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:24px solid var(--accent);z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.spin h2{margin:0 0 10px;font-size:30px;font-weight:900;letter-spacing:-.02em;
         color:var(--accent)}
.spin p{margin:0 0 20px;color:#C5E0CF;font-size:15px;max-width:44ch}
.spin .btn{margin-top:4px}
.spin-won{
  margin-top:18px;background:rgba(255,255,255,.08);border-left:3px solid var(--accent);
  padding:14px 16px;font-size:15px;
}
.spin-won b{color:var(--accent)}
.spin-won small{display:block;margin-top:6px;color:#C5E0CF;font-size:13px}
.spin-rules{margin-top:16px;font-size:12.5px;color:#9BB8A7}
.prizetag{
  display:flex;align-items:center;gap:10px;background:var(--accent);
  color:var(--brand-press);padding:11px 14px;font-size:13.5px;font-weight:700;
  margin-bottom:14px;
}
.prizetag .x{
  margin-left:auto;background:0;border:0;cursor:pointer;font-size:17px;
  line-height:1;color:var(--brand-press);
}
.beaten{
  background:var(--mint-pale);border-left:3px solid var(--brand);
  padding:11px 13px;font-size:12.5px;color:var(--ink-soft);margin:10px 0;
}
.beaten b{color:var(--brand)}
@media(max-width:860px){
  .spin{grid-template-columns:1fr;padding:28px 20px;gap:26px;text-align:center}
  .spin p{margin-inline:auto}
  .spinbox{width:240px;height:240px}
}

/* ---------------------------------------------------------------- markdowns
   The struck figure is our standard price, so it is shown plainly rather than
   shouted. The percent flash carries the urgency. */
.card .was{
  font-size:13px;color:var(--ink-faint);text-decoration:line-through;
  font-weight:600;margin-left:7px;
}
.card .saved{
  font-size:11.5px;font-weight:800;color:var(--sale);margin-top:3px;
  letter-spacing:.01em;
}
.badge.cut{
  background:var(--sale);color:#fff;font-size:12px;font-weight:900;
  letter-spacing:.02em;padding:5px 9px;
}
.pdp .price .was{
  font-size:19px;color:var(--ink-faint);text-decoration:line-through;
  font-weight:600;margin-left:11px;
}
.savebar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#FDECEC;border-left:4px solid var(--sale);padding:12px 15px;
  font-size:14px;font-weight:700;color:var(--sale);margin:-6px 0 18px;
}
.savebar b{
  background:var(--sale);color:#fff;padding:3px 9px;font-size:14px;
  font-weight:900;
}
.savebar small{
  flex:1 0 100%;font-weight:400;color:var(--ink-soft);font-size:12.5px;
  line-height:1.45;
}