/* Design tokens. One source for type, color, and layout on mc.layout pages.
   Dark mode redefines --ink, --mut, and --bg in mc-dark / the theme sheet. */
:root{
  --mc-accent:#1DBF73;
  --mc-ink:#111827;
  --mc-secondary:#647488;
  --mc-surface:#F8FAFC;
  --mc-white:#FFFFFF;
  --mc-bp-mobile:640px;
  --mc-bp-tablet:1024px;
  --mc-bp-laptop:1366px;
  --mc-wrap:1400px;
  --mc-gutter:32px;
  /* Desktop header geometry. The hero copy uses the same numbers so its left
     edge stays on the All Categories box: logo + the gap after it + the
     search border the category box sits inside. The hero's right edge and
     Refresh use --mc-nav-pad, the same inset as the header row. */
  --mc-nav-pad:32px;
  --mc-nav-gap:10px;
  --mc-logo-w:125px;
  --mc-search-border:1px;
  --mc-hero-lead:calc(var(--mc-logo-w) + var(--mc-nav-gap) + var(--mc-search-border));
  /* Extra inset so the card ends on the profile photo when a name sits past it. Set from the header. */
  --mc-hero-trail:0px;
  --mc-section:72px;
  --mc-radius:clamp(12px, 0.4vw + 10px, 14px);
  --mc-gap:24px;
  --mc-btn:clamp(44px, 1vw + 40px, 48px);
  --mc-input:48px;
  --mc-hero:clamp(36px, 2.2vw + 24px, 56px);
  --mc-title:clamp(30px, 1.4vw + 18px, 38px);
  --mc-section-title:clamp(23px, 1vw + 16px, 28px);
  --mc-cols:5;
  --mc-card-title:16px;
  --mc-body:16px;
  --mc-nav:14px;
  --mc-price:21px;
  --mc-meta:13px;
  --mc-badge:12px;
  --mc-leading:1.55;
  --mc-shadow:0 1px 2px rgba(17,24,39,.05);
  --v:var(--mc-accent);
  --v2:#19a866;
  --vd:#128a52;
  --vl:#e8f8f0;
  --mint:var(--mc-accent);
  --mintl:#e8f8f0;
  --sun:#FFB020;
  --ink:var(--mc-ink);
  --ink2:#1f2937;
  --mut:var(--mc-secondary);
  --line:#e2e8f0;
  --bg:var(--mc-surface);
  --r:var(--mc-radius);
  --sh:var(--mc-shadow);
  --fs-hero:var(--mc-hero);
  --fs-h1:var(--mc-title);
  --fs-h2:var(--mc-section-title);
  --fs-h3:18px;
  --sp-sec:var(--mc-section);
  --ease:cubic-bezier(.2,.8,.2,1);
  --mc-font:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Main's side margins: 32px at 1440+, 4.5vw until the phone size. */
@media(max-width:1439px){
  :root{ --mc-gutter:4.5vw; }
}
/* Five cards from 1200px; four, three, then two as the screen gets narrower. */
@media(max-width:1199px){:root{--mc-cols:4}}
@media(max-width:1024px){:root{--mc-gutter:24px;--mc-gap:20px;--mc-cols:3;--mc-section:56px}}
@media(max-width:768px){:root{--mc-cols:2}}
@media(max-width:699px){
  :root{
    --mc-gutter:16px;
    --mc-section:48px;
    --mc-gap:20px;
    --mc-hero:36px;
    --mc-title:30px;
    --mc-section-title:23px;
    --mc-price:19px;
  }
}
@media(max-width:640px){
  :root{
    --mc-gutter:16px;
    --mc-section:48px;
    --mc-gap:16px;
    --mc-cols:2;
    --mc-price:19px;
  }
}
@media(max-width:420px){:root{--mc-cols:1}}
img,video{max-width:100%}
.mc-card,.mc-card-media,.h2-cc,.h2-cc-f,.h2-cc-box,.h2-cc-bar,.h2-hero-in,.h2-hero-copy{min-width:0;max-width:100%}
.mc-card-media,.mc-card-media img{max-width:100%}