/* jungle.discount - warm, product-forward.

   Rebuilt against conversion research rather than editorial taste:

   - LIGHT, WARM GROUND. Warm neutrals read as trustworthy and light palettes
     read as cleaner and more transparent, which is what a price site needs.
     The previous near-black board looked severe and hid the goods.
   - THE PHOTOGRAPH IS THE HERO. Enlarging product images is the single
     best-evidenced lever in e-commerce - one test found a 28% size increase
     produced a 63% lift. So the image gets the top half of every card, on
     white, at 4:3.
   - HIGH-CONTRAST WARM CTA. Contrast matters more than hue, and warm CTAs
     (orange/red) test best; a vermilion button on cream is both.
   - FOUR COLUMNS MAX. Scanning time rises sharply past four columns; two on
     mobile.
   - SAVINGS FRAMED BY PRICE. Percentage reads bigger under $100, dollars read
     bigger over it, so each card leads with whichever is the stronger claim.

   Type is Avenir Next throughout - humanist, rounded, warm - rather than the
   condensed grotesque, which was the coldest thing on the old page. */
:root{
  --ground:#FBF4E9; --ground-2:#F4EADA; --surface:#FFFFFF;
  --ink:#2B211A; --ink-2:#6B5B4D; --ink-3:#9A8B7C;
  --line:#E8DAC6; --line-2:#D8C6AE;
  --cta:#D6452B; --cta-dark:#B5341D;
  --save:#1E7A4E; --save-soft:#E4F2E9;
  --honey:#E9A13B; --honey-soft:#FBEBD2;
  --v:#D6452B;
  --sans:"Avenir Next","Avenir","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,52px);
  --sec:clamp(40px,5vw,72px);
  --r:14px;
  --shadow:0 1px 2px rgba(43,33,26,.06),0 8px 24px -12px rgba(43,33,26,.18);
  --shadow-lift:0 2px 6px rgba(43,33,26,.08),0 18px 40px -18px rgba(43,33,26,.28);
  --tnum:"tnum" 1,"lnum" 1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;padding:14px var(--pad);
  background:rgba(251,244,233,.92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.mast__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.mast__brand span{font:800 22px/1 var(--sans);letter-spacing:-.03em}
.mast__brand b{font-weight:500;color:var(--ink-2)}
.mark{width:30px;height:30px;flex:none}
.mast__nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.mast__nav a{text-decoration:none;font:600 14px/1 var(--sans);padding:10px 13px;
  border-radius:999px;color:var(--ink-2)}
.nav__v:hover{background:var(--ground-2);color:var(--ink)}
.nav__v.is-on{background:var(--ink);color:#fff}
.nav__about{border:1px solid var(--line-2)}
.nav__about:hover{background:var(--surface);color:var(--ink)}

/* ---------- freshness strip ---------- */
.strip{background:var(--ground-2);border-bottom:1px solid var(--line)}
.strip__line{margin:0;padding:9px var(--pad);display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;font:600 13px/1.4 var(--sans);color:var(--ink-2)}
.strip__line b{color:var(--ink);font-weight:700}
.strip__sep{color:var(--line-2)}
.strip__dot{width:9px;height:9px;border-radius:50%;background:var(--save);flex:none;
  animation:pulse 3s ease-out infinite}
.strip__sweep{display:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,122,78,.4)}70%,100%{box-shadow:0 0 0 8px rgba(30,122,78,0)}}
html[data-stale] .strip{background:var(--honey-soft)}
html[data-stale] .strip__dot{background:var(--honey);animation:none}
.previewbar,.stalebar{display:none;padding:12px var(--pad);font:600 14px/1.5 var(--sans)}
.previewbar{background:#EFE6F7;color:#4A3566}
.stalebar{background:var(--honey);color:#3A2A10}
html[data-preview] .previewbar{display:block}
html[data-stale] .stalebar{display:block}
.stalenote{display:none}
html[data-stale] .stalenote{display:block;margin:6px 0 0;font:700 13px/1.4 var(--sans);
  color:var(--cta-dark)}
.dash{display:none;color:var(--ink-3)}
html[data-stale] .dash{display:inline}
html[data-stale] .card__pct,html[data-stale] .card__price,html[data-stale] .row__pct,
html[data-stale] .price,html[data-stale] .tag__pct,html[data-stale] .tag__price,
html[data-stale] .board em{display:none}

main{padding:0 var(--pad) 80px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(36px,5vw,64px) 0}
.eyebrow{margin:0 0 14px;font:700 13px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cta)}
.eyebrow a{color:var(--cta);text-decoration:none}
.hero h1{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.03em;max-width:17ch;
  font-weight:800;text-wrap:balance}
.hero h1 i{font-style:normal;color:var(--cta)}
.lede{margin:18px 0 0;max-width:46ch;color:var(--ink-2);font-size:18px}
.hero__cta{display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  background:var(--cta);color:#fff;text-decoration:none;padding:15px 26px;
  border-radius:999px;font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.hero__cta:hover{background:var(--cta-dark)}

/* category board */
.board{list-style:none;margin:0;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.board li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 8px;border-radius:10px}
.board li+li{border-top:1px solid var(--line)}
.board li:hover{background:var(--ground)}
.board b{font-weight:700;font-size:15px;white-space:nowrap}
.board .dots{border-bottom:2px dotted var(--line-2);transform:translateY(-3px)}
.board i{display:none}
.board em{font-style:normal;font-weight:800;font-size:21px;color:var(--cta);
  background:var(--honey-soft);padding:4px 10px;border-radius:999px}

/* ---------- section heads ---------- */
.feed__head,.videos .feed__head{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;
  justify-content:space-between;padding:var(--sec) 0 20px}
.feed__head h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.025em}
.views{display:inline-flex;background:var(--ground-2);border-radius:999px;padding:4px}
.views__b{appearance:none;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:9px 18px;border-radius:999px;font:700 14px/1 var(--sans)}
.views__b.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* ---------- the product grid: four columns, photo-led ---------- */
.labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:1120px){.labels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.label{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
.label:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.label__imgwrap{position:relative;background:#fff;padding:14px}
.label__img{width:100%;height:190px;object-fit:contain;background:#fff}
.label__pct{position:absolute;top:12px;left:12px;display:inline-flex;align-items:baseline;
  gap:3px;background:var(--cta);color:#fff;padding:7px 11px;border-radius:999px;
  font-weight:800;box-shadow:0 4px 10px rgba(214,69,43,.32)}
.label__pct b{font-size:19px;letter-spacing:-.02em}
.label__pct i{font-style:normal;font-size:12px;font-weight:700}
.label__cat{position:absolute;top:14px;right:12px;background:rgba(255,255,255,.94);
  color:var(--ink-2);font:700 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:6px 9px;border-radius:999px;border:1px solid var(--line)}
.label__body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1}
.label__title a{text-decoration:none;color:inherit}
.label__title a:hover{color:var(--cta)}
.label__title{min-height:2.8em;font-size:15px;line-height:1.4;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.label__price{display:grid;grid-template-columns:auto auto;justify-content:start;
  align-items:baseline;gap:2px 8px;margin-top:auto}
.label__save{grid-column:1/-1;justify-self:start;margin-top:4px}
.label__price b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.label__price s{color:var(--ink-3);font-size:15px}
.label__save{background:var(--save-soft);color:var(--save);
  font-weight:700;font-size:13px;padding:4px 9px;border-radius:999px}
.label__go{display:block;text-align:center;background:var(--cta);color:#fff;
  border-radius:999px;padding:12px;font-weight:700;font-size:15px;text-decoration:none}
.label__go:hover{background:var(--cta-dark)}
.label__scan{font:400 11px/1.4 var(--mono);color:var(--ink-3)}

/* ---------- compact list ---------- */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:84px 74px minmax(0,1fr) minmax(0,.75fr) auto auto;
  gap:clamp(12px,2vw,22px);align-items:center;padding:14px 18px}
.row+.row{border-top:1px solid var(--line)}
.row:hover{background:var(--ground)}
.row__rank{display:none}
.row__thumb{grid-column:1}
.row__img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:10px;
  border:1px solid var(--line)}
.row__pct{display:inline-flex;align-items:baseline;gap:2px;background:var(--cta);color:#fff;
  padding:6px 10px;border-radius:999px;font-weight:800;justify-self:start}
.row__pct b{font-size:17px}
.row__pct i{font-style:normal;font-size:11px}
.row__title{font-size:16px;font-weight:600;line-height:1.35}
.row__title a{text-decoration:none}
.row__title a:hover{color:var(--cta)}
.row__scan{margin:5px 0 0;display:flex;flex-wrap:wrap;gap:10px;font:400 11px/1.4 var(--mono);
  color:var(--ink-3)}
.row__cat{color:var(--cta);font-weight:600}
.row__joke{margin:0;font-size:14px;font-style:italic;color:var(--ink-2)}
.price{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  white-space:nowrap}
.price__now{font-size:21px;font-weight:800;letter-spacing:-.02em}
.price__list{color:var(--ink-3);font-size:13px}
.price__save{color:var(--save);font-size:13px;font-weight:700}
.row__go{background:var(--cta);color:#fff;text-decoration:none;padding:11px 18px;
  border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;justify-self:end}
.row__go:hover{background:var(--cta-dark)}

/* ---------- videos ---------- */
.videos__note{margin:0;max-width:44ch;color:var(--ink-2);font-size:16px}
.vidrow{display:grid;grid-auto-flow:column;grid-auto-columns:236px;justify-content:start;
  gap:18px;overflow-x:auto;padding:4px 2px 20px;scroll-snap-type:x proximity}
.vid{margin:0;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.vid video{display:block;width:236px;aspect-ratio:9/16;background:#111}
.vid figcaption{padding:12px 14px 14px}
.vid figcaption b{display:block;font-size:15px;font-weight:700}
.vid figcaption span{display:block;margin-top:4px;font:600 12px/1.4 var(--sans);color:var(--ink-2)}
@media(max-width:600px){.vidrow{grid-auto-columns:172px}.vid video{width:172px}}

/* ---------- category hub ---------- */
.hub{padding:clamp(30px,4vw,52px) 0 0}
.hub h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.03em}
.hub__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.42fr);
  gap:clamp(24px,4vw,48px);margin-top:20px;align-items:start}
.hub__prose p{margin:0 0 18px;max-width:64ch;color:var(--ink);font-size:17px;line-height:1.7}
.hub__prose .hub__sig{font-style:italic;color:var(--ink-2);border-left:3px solid var(--honey);
  padding-left:14px;font-size:15px}
.hub__essay{padding:var(--sec) 0 0;border-top:1px solid var(--line);margin-top:var(--sec)}
.hub__side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);position:sticky;top:88px}
.hub__side h2{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.hub__side dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;margin:0;font-size:14px}
.hub__side dt{color:var(--ink-2)}
.hub__side dd{margin:0;text-align:right;font-weight:700}

/* ---------- deal page ---------- */
.deal{max-width:1120px;padding:clamp(20px,3vw,36px) 0 0;margin:0 auto}
.tag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(24px,4vw,52px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow);align-items:start}
.tag__media{grid-column:2;grid-row:1/span 6;margin:0}
.tag__hero{width:100%;height:clamp(260px,32vw,400px);object-fit:contain;background:#fff;
  border-radius:12px}
.tag__gal{display:flex;gap:10px;margin-top:12px}
.tag__gal img{width:76px;height:76px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:10px}
.tag__cat{margin:0;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cta)}
.tag__pct{margin:14px 0 0;display:inline-flex;align-items:baseline;gap:5px;
  background:var(--cta);color:#fff;padding:9px 15px;border-radius:999px}
.tag__pct b{font-size:30px;font-weight:800;letter-spacing:-.03em}
.tag__pct i{font-style:normal;font-size:14px;font-weight:700}
.tag h1{margin:16px 0 0;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.25}
.tag__price{margin:18px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tag__price b{font-size:clamp(34px,4vw,44px);font-weight:800;letter-spacing:-.03em}
.tag__price s{color:var(--ink-3);font-size:19px}
.tag__price span{background:var(--save-soft);color:var(--save);font-weight:700;font-size:15px;
  padding:5px 11px;border-radius:999px}
.tag__scan{margin:14px 0 0;font:400 12px/1.5 var(--mono);color:var(--ink-3)}
.deal__joke{margin:18px 0 0;font-style:italic;font-size:18px;color:var(--ink-2)}
.cta{display:inline-block;margin:18px 0 0;background:var(--cta);color:#fff;text-decoration:none;
  padding:16px 30px;border-radius:999px;font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.cta:hover{background:var(--cta-dark)}
.deal__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.6fr);
  gap:clamp(24px,4vw,48px);margin-top:var(--sec);align-items:start}
.deal__disc{margin:14px 0 0;max-width:58ch;color:var(--ink-2);font-size:14px}
.deal__more{margin:var(--sec) 0 14px;font-size:20px;font-weight:800}
.siblings{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.siblings li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow)}
.siblings a{display:flex;flex-direction:column;gap:8px;padding:16px;text-decoration:none;
  font-size:14px;line-height:1.4;color:var(--ink-2);height:100%}
.siblings a:hover{color:var(--ink)}
.siblings b{color:var(--cta);font-size:22px;font-weight:800}

/* ---------- colophon ---------- */
.about{max-width:720px;padding:clamp(30px,4vw,56px) 0 0}
.about h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.03em}
.about__body{margin-top:26px}
.about__body>p:first-child{font-size:20px;color:var(--ink)}
.about__body p{margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.commit{list-style:none;counter-reset:c;margin:32px 0;padding:0;display:grid;gap:14px}
.commit li{counter-increment:c;display:grid;grid-template-columns:52px minmax(0,1fr);
  gap:6px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow)}
.commit li::before{content:counter(c);grid-row:1/3;font-size:30px;font-weight:800;
  color:var(--cta)}
.commit h2{font-size:18px;font-weight:700}
.commit p{margin:6px 0 0!important;font-size:16px!important;color:var(--ink-2)!important}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:36px var(--pad) 56px;background:var(--ground-2)}
.foot__honest{margin:0;max-width:58ch;font-size:16px;color:var(--ink)}
.foot__disc{margin:10px 0 0;max-width:74ch;font-weight:700;font-size:14px;color:var(--cta-dark)}
.foot__meta{margin:16px 0 0;max-width:78ch;font-size:13px;line-height:1.65;color:var(--ink-2)}

@media (max-width:900px){
  .hero,.hub__grid,.deal__cols{grid-template-columns:1fr}
  .tag{grid-template-columns:1fr}
  .tag__media{grid-column:1;grid-row:auto;order:-1}
  .hub__side{position:static}
  .row{grid-template-columns:64px minmax(0,1fr) auto;row-gap:10px;padding:14px}
  .row__img{width:64px;height:64px}
  .row__title{grid-column:2/-1}
  .row__pct{grid-column:2;justify-self:start}
  .row__joke{grid-column:2/-1}
  .price{grid-column:2;align-items:flex-start}
  .row__go{grid-column:3;justify-self:end}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}