/* ===========================================================
   KIND ACRES FARM — live menu
   Inherits the main site's tokens: deep forest, sun-gold,
   Fraunces display over Satoshi body. Built phone-first.
   =========================================================== */

:root{
  --ink:#0e1410; --ink-2:#0a0f0b; --field:#16241a; --field-2:#1c2f21;
  --sun:#e7a93a; --sun-hi:#ffd98a; --sun-deep:#bf8024;
  --rust:#c0492b; --sage:#90a878; --cream:#f4ecd9; --cream-dim:#b9ad92;
  --line:rgba(244,236,217,.13); --line-2:rgba(244,236,217,.22);
  --maxw:1240px; --ease:cubic-bezier(.2,.7,.2,1);
  --font-d:"Fraunces",Georgia,serif; --font-b:"Satoshi",system-ui,sans-serif;
  --bar-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--ink);color:var(--cream);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4.5vw,60px)}

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

.kicker{font-family:var(--font-d);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);display:flex;align-items:center;gap:.7em;margin-bottom:1rem}
.kicker::before{content:"";width:26px;height:1px;background:var(--sun);opacity:.7}
.kicker--center{justify-content:center}
.mark{color:var(--sun)}
h1,h2,h3{font-family:var(--font-d);font-weight:900;line-height:1;letter-spacing:-.018em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:.95rem;
  padding:.9em 1.5em;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,border-color .25s}
.btn--solid{background:var(--sun);color:#231701;box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--line-2)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}
@media (hover:hover){
  .btn--solid:hover{transform:translateY(-2px);background:var(--sun-hi)}
  .btn--ghost:hover{transform:translateY(-2px);border-color:var(--cream);background:rgba(244,236,217,.05)}
}

/* ---------- age gate ---------- */
.agegate{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;padding:20px;
  background:rgba(8,12,9,.94);backdrop-filter:blur(8px)}
.agegate[hidden]{display:none}
.agegate__panel{max-width:520px;text-align:center;background:linear-gradient(180deg,#172319,#0e1611);
  border:1px solid var(--line-2);border-radius:4px;padding:clamp(26px,6vw,50px);box-shadow:0 50px 100px -30px #000}
.agegate__mark{width:min(230px,58vw);margin:0 auto 20px}
.agegate__h{font-size:clamp(2rem,7vw,3rem);margin-bottom:.45em}
.agegate__sub{color:var(--cream-dim);font-size:.98rem;margin-bottom:1.6em}
.agegate__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.agegate__fine{margin-top:1.6em;font-size:.72rem;color:rgba(185,173,146,.6)}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:8000;height:var(--bar-h);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 clamp(16px,4.5vw,60px);
  background:rgba(10,15,11,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.bar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.bar__brand img{width:40px;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.bar__name{font-family:var(--font-d);font-weight:600;font-size:.9rem;line-height:1;white-space:nowrap}
.bar__name em{font-style:italic;color:var(--sun);font-weight:500}
/* display:grid outranks the hidden attribute — say so explicitly. */

/* ---------- masthead ---------- */
.mast{padding:clamp(28px,6vw,56px) 0 clamp(16px,3vw,26px)}
.mast__h{font-size:clamp(2.6rem,11vw,5rem)}
.mast__h em{font-style:italic;color:var(--sun);font-weight:400}
.mast__sub{margin-top:.7em;color:var(--cream-dim);font-size:.92rem}
.mast__sub b{color:var(--cream);font-weight:700}

/* ---------- filters ---------- */
.filters{position:sticky;top:var(--bar-h);z-index:7000;background:rgba(10,15,11,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:12px 0 0}
.search{position:relative;display:flex;align-items:center}
.search__i{position:absolute;left:13px;width:17px;height:17px;fill:none;stroke:var(--cream-dim);
  stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.search input{width:100%;padding:.78em 2.4em .78em 2.6em;background:rgba(244,236,217,.05);
  border:1px solid var(--line);border-radius:3px;font-size:.95rem}
.search input::placeholder{color:rgba(185,173,146,.65)}
.search input::-webkit-search-cancel-button{display:none}
.search__x{position:absolute;right:6px;width:32px;height:32px;background:none;border:0;
  font-size:1.4rem;line-height:1;color:var(--cream-dim);cursor:pointer}

.pills{display:flex;gap:8px;overflow-x:auto;padding:11px 0 3px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;padding:.5em 1em;border:1px solid var(--line-2);border-radius:100px;background:transparent;
  font-size:.85rem;font-weight:500;white-space:nowrap;cursor:pointer;color:var(--cream-dim);
  transition:background .2s,color .2s,border-color .2s}
.pill b{font-weight:500;opacity:.55;margin-left:.35em}
.pill.is-on{background:var(--sun);border-color:var(--sun);color:#231701;font-weight:700}
.pill.is-on b{opacity:.65}

.sortrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0 11px}
.sortrow__n{font-size:.78rem;letter-spacing:.05em;color:var(--cream-dim);text-transform:uppercase}
.sort{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.05em}
.sort select{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:.25em .2em;
  font-size:.82rem;text-transform:none;letter-spacing:0;color:var(--cream);cursor:pointer}
.sort select option{background:var(--field)}

/* ---------- grid ---------- */
.grid{display:grid;gap:clamp(10px,2.4vw,20px);padding:clamp(18px,4vw,32px) 0;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{position:relative;display:flex;flex-direction:column;text-align:left;background:linear-gradient(180deg,#152118,#101a13);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s}
@media (hover:hover){.card:hover{transform:translateY(-3px);border-color:var(--line-2)}}
.card__shot{position:relative;aspect-ratio:1;background:var(--ink-2);overflow:hidden}
/* The plate below is absolutely positioned, so the photo has to be too —
   otherwise the plate wins the paint order and hides every image. */
.card__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:sharpen .45s var(--ease) both;transition:transform .5s var(--ease)}
@keyframes sharpen{from{opacity:0}}
@media (hover:hover){.card:hover .card__shot img{transform:scale(1.04)}}

/* Roughly a third of their catalogue has no photo in the POS. A plate that
   looks intentional beats a broken-image grey box. */
.card__plate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5em;padding:14px;text-align:center;background:
    radial-gradient(120% 90% at 50% 0%,rgba(231,169,58,.12),transparent 62%),
    repeating-linear-gradient(135deg,rgba(244,236,217,.028) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#1b2a1e,#111b14)}
.card__plate span{font-family:var(--font-d);font-style:italic;font-size:.82rem;line-height:1.2;
  color:var(--cream-dim);max-width:15ch}
.card__plate svg{width:26px;height:26px;fill:none;stroke:var(--sun);stroke-width:1.3;opacity:.55}

.card__flag{position:absolute;top:8px;left:8px;padding:.28em .6em;border-radius:2px;font-size:.63rem;
  font-weight:900;letter-spacing:.09em;text-transform:uppercase;background:rgba(10,15,11,.82);
  backdrop-filter:blur(4px);border:1px solid var(--line-2);color:var(--cream)}
.card__flag--low{background:rgba(192,73,43,.9);border-color:transparent}
.card__type{position:absolute;top:8px;right:8px;padding:.28em .55em;border-radius:2px;font-size:.63rem;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(144,168,120,.9);color:#101a13}

.card__meat{display:flex;flex-direction:column;flex:1;gap:.3em;padding:11px 12px 13px}
.card__brand{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__name{font-family:var(--font-d);font-weight:600;font-size:.93rem;line-height:1.22;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:.6em}
.card__price{font-family:var(--font-d);font-weight:900;font-size:1.05rem;color:var(--sun);white-space:nowrap}
.card__price i{font-style:normal;font-size:.68rem;font-weight:500;color:var(--cream-dim);letter-spacing:.04em}
.card__size{font-size:.7rem;color:var(--cream-dim);white-space:nowrap}

/* skeleton — holds the layout so nothing jumps when the feed lands */
.card--ghost{pointer-events:none}
.card--ghost .card__shot{background:linear-gradient(100deg,#141f17 30%,#1b2a1e 50%,#141f17 70%);
  background-size:220% 100%;animation:sweep 1.4s var(--ease) infinite}
.ghost{display:block;height:11px;border-radius:2px;background:rgba(244,236,217,.07)}
.ghost--sm{width:45%;height:8px}
.ghost--md{width:30%;height:14px;margin-top:.5em}
@keyframes sweep{to{background-position:-120% 0}}

/* weight-break ladder — how flower is actually bought */
.ladder{margin:0 0 1.3em;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ladder__h{padding:.6em .9em;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);background:rgba(244,236,217,.035);border-bottom:1px solid var(--line)}
.ladder ul{list-style:none}
.ladder li{display:flex;align-items:baseline;gap:10px;padding:.55em .9em;border-bottom:1px solid var(--line)}
.ladder li:last-child{border-bottom:0}
.ladder li span{font-family:var(--font-d);font-size:1rem;font-weight:600;min-width:2ch;color:var(--cream)}
.ladder li em{font-style:normal;font-size:.78rem;color:var(--cream-dim);flex:1}
.ladder li b{font-family:var(--font-d);font-size:1.02rem;color:var(--sun)}

.sentinel{height:1px}
.empty,.fail{text-align:center;color:var(--cream-dim);padding:44px 0 60px;font-size:.95rem}
.fail a{color:var(--sun);border-bottom:1px solid rgba(231,169,58,.4)}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:9200;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(6,9,7,.72);backdrop-filter:blur(3px);
  animation:fade .3s var(--ease)}
.sheet__panel{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg,#182519,#0e1611);border:1px solid var(--line-2);
  border-radius:6px 6px 0 0;box-shadow:0 -30px 80px -20px #000;animation:rise .38s var(--ease);
  -webkit-overflow-scrolling:touch}
@media (min-width:620px){
  .sheet{align-items:center}
  .sheet__panel{border-radius:5px;max-height:88vh;animation:pop .3s var(--ease)}
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
@keyframes pop{from{transform:scale(.97);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
.sheet__x{position:absolute;top:9px;right:9px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(10,15,11,.72);backdrop-filter:blur(6px);border:1px solid var(--line-2);
  font-size:1.5rem;line-height:1;color:var(--cream);cursor:pointer}
.sheet__body{padding:0 0 26px}
.sheet__h{font-size:1.7rem;padding:22px 22px 0}

/* product detail */
.d-shot{position:relative;aspect-ratio:4/3;background:var(--ink-2);overflow:hidden}
.d-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-meat{padding:20px 22px 0}
.d-brand{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:.5em}
.d-name{font-size:1.55rem;line-height:1.08;margin-bottom:.5em}
.d-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1em}
.d-tag{padding:.32em .7em;border:1px solid var(--line-2);border-radius:100px;font-size:.72rem;color:var(--cream-dim)}
.d-tag--type{background:rgba(144,168,120,.9);border-color:transparent;color:#101a13;font-weight:700}
.d-tag--low{background:rgba(192,73,43,.9);border-color:transparent;color:var(--cream);font-weight:700}
.d-desc{color:var(--cream-dim);font-size:.94rem;line-height:1.7;margin-bottom:1.3em}
.d-buy{display:flex;align-items:center;gap:14px;padding:16px 0 0;border-top:1px solid var(--line)}
.d-price{font-family:var(--font-d);font-weight:900;font-size:1.9rem;color:var(--sun);line-height:1}
.d-price i{font-style:normal;font-size:.72rem;font-weight:500;color:var(--cream-dim);letter-spacing:.04em}
.d-buy .btn{flex:1}

/* bag */
.bag-empty{padding:16px 22px 26px;color:var(--cream-dim);font-size:.95rem}
.line{display:flex;gap:12px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.line__shot{width:56px;height:56px;flex:none;border-radius:3px;overflow:hidden;background:var(--ink-2)}
.line__shot img{width:100%;height:100%;object-fit:cover}
.line__meat{flex:1;min-width:0}
.line__n{font-family:var(--font-d);font-weight:600;font-size:.9rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line__p{font-size:.78rem;color:var(--cream-dim);margin-top:.25em}
.qty{display:flex;align-items:center;gap:2px;flex:none;border:1px solid var(--line-2);border-radius:3px}
.qty button{width:32px;height:32px;background:none;border:0;font-size:1.1rem;line-height:1;
  color:var(--cream);cursor:pointer}
.qty span{min-width:22px;text-align:center;font-size:.9rem;font-weight:700}
.bag-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 22px 4px;font-size:.95rem}
.bag-total strong{font-family:var(--font-d);font-size:1.5rem;color:var(--sun)}
.bag-note{padding:0 22px;font-size:.76rem;color:var(--cream-dim)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:34px 0 44px;margin-top:20px}
.foot__line{font-size:.9rem;margin-bottom:.7em}
.foot__line a{color:var(--sun)}
.foot__fine{font-size:.75rem;line-height:1.65;color:rgba(185,173,146,.7);max-width:62ch;margin-bottom:.4em}

body.is-locked{overflow:hidden}

/* The panel takes focus when a sheet opens; it's a scroll container, not a
   control, so it shouldn't wear a focus ring. */
.sheet__panel:focus{outline:none}

/* ===========================================================
   FILTERING
   Faceted panel: a sticky rail on wide screens, a sheet on
   phones. Same single node, moved by JS.
   =========================================================== */

.shell{display:block}
.rail{display:none}
@media (min-width:1100px){
  .shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
  .rail{display:block;position:sticky;top:calc(var(--bar-h) + 150px);max-height:calc(100vh - var(--bar-h) - 170px);
    overflow-y:auto;padding:clamp(18px,4vw,32px) 4px 40px 0;scrollbar-width:thin}
  .rail::-webkit-scrollbar{width:5px}
  .rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
  .filter-btn{display:none !important}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1400px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- filter button + active tags ---------- */
.filter-btn{display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;border:1px solid var(--line-2);
  border-radius:100px;background:transparent;font-size:.84rem;font-weight:700;cursor:pointer;color:var(--cream)}
.filter-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.filter-btn__n{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--sun);color:#231701;
  font-size:.7rem;font-weight:900;display:grid;place-items:center}
.filter-btn__n[hidden]{display:none}

.active{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 12px}
.active[hidden]{display:none}
.tag{padding:.36em .75em;border:1px solid var(--sun);border-radius:100px;background:rgba(231,169,58,.12);
  color:var(--sun);font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tag--all{border-color:var(--line-2);background:transparent;color:var(--cream-dim);font-weight:500}

/* ---------- facets ---------- */
.facets{display:flex;flex-direction:column;gap:22px}
.facet__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:.7em;
  font-family:var(--font-d);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.facet__now{font-family:var(--font-b);font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--cream)}
.facet__none{color:var(--cream-dim);font-size:.88rem}
.facet__q{width:100%;margin-bottom:9px;padding:.5em .7em;background:rgba(244,236,217,.05);
  border:1px solid var(--line);border-radius:3px;font-size:.86rem}
.facet__q::-webkit-search-cancel-button{display:none}
.facet__more{margin-top:8px;background:none;border:0;padding:0;color:var(--sun);font-size:.82rem;
  font-weight:600;cursor:pointer;border-bottom:1px solid rgba(231,169,58,.35)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:.45em .85em;border:1px solid var(--line-2);border-radius:100px;background:transparent;
  color:var(--cream-dim);font-size:.82rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip b{font-weight:500;opacity:.5;margin-left:.4em}
.chip.is-on{background:var(--sun);border-color:var(--sun);color:#231701;font-weight:700}
.chip.is-on b{opacity:.6}

.opts{display:flex;flex-direction:column;gap:1px}
.opt{display:flex;align-items:center;gap:9px;padding:.42em .5em;border-radius:3px;cursor:pointer;font-size:.87rem}
.opt:hover{background:rgba(244,236,217,.04)}
.opt input{appearance:none;width:16px;height:16px;flex:none;border:1px solid var(--line-2);border-radius:2px;
  background:transparent;cursor:pointer;position:relative}
.opt input:checked{background:var(--sun);border-color:var(--sun)}
.opt input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #231701;border-width:0 2px 2px 0;transform:rotate(42deg)}
.opt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream-dim)}
.opt.is-on span{color:var(--cream)}
.opt b{font-weight:500;font-size:.78rem;color:rgba(185,173,146,.65)}

/* ---------- dual range ---------- */
.rng{position:relative;height:30px;display:flex;align-items:center}
.rng__track{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(244,236,217,.14)}
.rng__fill{position:absolute;top:0;height:100%;background:var(--sun);border-radius:2px}
.rng input{position:absolute;left:0;width:100%;margin:0;background:none;pointer-events:none;appearance:none;height:30px}
.rng input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:19px;height:19px;border-radius:50%;
  background:var(--sun);border:2px solid #231701;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:grab}
.rng input::-moz-range-thumb{pointer-events:auto;width:19px;height:19px;border-radius:50%;background:var(--sun);
  border:2px solid #231701;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:grab;border-width:2px}
.rng input::-moz-range-track{background:none}

/* ---------- filter sheet (phone) ---------- */
.sheet--filters .sheet__panel{max-height:86vh}
.sheet__facets{padding:18px 22px 0}
.sheet__done{position:sticky;bottom:0;padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  margin-top:20px;background:linear-gradient(180deg,rgba(14,22,17,0),#0e1611 22%)}

/* The sort row carries three things now (filters button, count, sort). At
   phone widths the count was wrapping mid-phrase — keep it on one line and
   drop the word "Sort", the select speaks for itself. */
.sortrow{flex-wrap:nowrap}
.sortrow__n{white-space:nowrap;flex:none}
@media (max-width:520px){
  .sort span{display:none}
  .sort select{max-width:34vw}
  .sortrow{gap:10px}
  .sortrow__n{font-size:.72rem}
}

/* ===========================================================
   DEALS · QUICK FILTERS · BADGES
   =========================================================== */

.deals{padding:6px 0 22px}
.deals[hidden]{display:none}
.deals__rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.deals__rail::-webkit-scrollbar{display:none}
.deal{flex:none;width:min(74vw,268px);padding:15px 17px;border-radius:4px;
  border:1px solid rgba(231,169,58,.32);
  background:linear-gradient(145deg,rgba(231,169,58,.14),rgba(231,169,58,.03) 62%),linear-gradient(180deg,#182519,#111b14)}
.deal__amt{display:inline-block;font-family:var(--font-d);font-weight:900;font-size:1.5rem;
  line-height:1;color:var(--sun);margin-bottom:.35em}
.deal__n{font-size:.9rem;line-height:1.35;color:var(--cream)}
.deal__who{margin-top:.45em;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}

.quick{display:flex;gap:8px;padding:0 0 2px}
.quick[hidden]{display:none}
.qf{padding:.42em .9em;border:1px solid rgba(231,169,58,.4);border-radius:100px;background:transparent;
  color:var(--sun);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.qf b{font-weight:500;opacity:.6;margin-left:.4em}
.qf.is-on{background:var(--sun);border-color:var(--sun);color:#231701;font-weight:700}
.qf.is-on b{opacity:.65}

.card__flag--deal{background:var(--sun);border-color:transparent;color:#231701}
.card__flag--new{background:var(--sage);border-color:transparent;color:#101a13}
.d-tag--new{background:var(--sage);border-color:transparent;color:#101a13;font-weight:700}
.d-deal{display:flex;align-items:baseline;gap:9px;margin-bottom:1em;padding:.7em .9em;border-radius:3px;
  background:rgba(231,169,58,.1);border:1px solid rgba(231,169,58,.28);font-size:.87rem;color:var(--cream-dim)}
.d-deal b{font-family:var(--font-d);font-size:1rem;color:var(--sun);white-space:nowrap}

.d-deal__w{font-style:normal;color:var(--sage);font-size:.78rem;white-space:nowrap}

/* --- QA fixes ------------------------------------------------------------ */

/* The sticky filter bar is taller than the rail's offset assumed, so the first
   facet heading was sliced in half at >=1100px. */
@media (min-width:1100px){
  .rail{top:calc(var(--bar-h) + 200px);max-height:calc(100vh - var(--bar-h) - 220px)}
}

/* "Best value per gram" clipped mid-word inside a 34vw select. */
@media (max-width:520px){
  .sort select{max-width:42vw;text-overflow:ellipsis}
}

/* A crafted link could put 5,000 characters in one filter tag and give the
   document 40,000px of horizontal scroll. */
.tag{max-width:min(100%,32ch);overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}
.active{max-height:30vh;overflow-y:auto}

/* The price slider stepped in halves off a $0.50 minimum, so a round $20 —
   the commonest price in the catalogue — was never a reachable boundary. */
.rng input{touch-action:none}

/* --- back to the site, and the one action a browse-only menu can honour --- */
.bar__back{width:16px;height:16px;flex:none;fill:none;stroke:var(--cream-dim);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:-2px;transition:stroke .25s}
.bar__brand:hover .bar__back{stroke:var(--sun)}
.bar__call{display:inline-flex;align-items:center;gap:.45em;flex:none;padding:.5em .9em;
  border:1px solid var(--line-2);border-radius:100px;font-size:.85rem;font-weight:600;color:var(--cream)}
.bar__call svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.bar__call:hover{border-color:var(--sun);color:var(--sun)}}
.foot__back{color:var(--sun);border-bottom:1px solid rgba(231,169,58,.35)}