/* Nearbury (step 65): Schibsted Grotesk, self-hosted (public/fonts), one family for everything. */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Nearbury tokens (nearbury-ds/kit/tokens.json). The old names stay so every component keeps working:
   --brand violet, --brand-hover violet-deep, --brand-deep violet-text, --brand-mist violet-tint, --night ink. */
:root{--brand:#5B21E6;--brand-hover:#4515BD;--brand-deep:#5B21E6;--brand-mist:#EFE9FD;--night:#17142B;
  --violet:#5B21E6;--violet-deep:#4515BD;--violet-text:#5B21E6;--violet-tint:#EFE9FD;
  --mint:#3EE6B0;--mint-tint:#E3FBF3;--mint-ink:#0B6B4F;--paper:#F7F6FB;--surface:#FFFFFF;--alert:#B8341A;
  --r-sm:6px;--r-md:12px;--r-lg:20px;
  --shadow-card:0 1px 2px rgba(23,20,43,0.06),0 4px 12px rgba(23,20,43,0.06)}
/* Nearbury homepage v2: tokens first, then components. Mobile-first. */
:root{
  --ink:#17142B;
  --ink-2:#4A4560;
  --muted:#4A4560;
  --line:#E4E1EE;
  --bg:#FFFFFF;
  --bg-2:#F7F6FB;
  --ph:#ECEAF3;
  --ph-2:#E4E1EE;
  --accent:#3EE6B0;
  --accent-hover:#3EE6B0;
  --accent-ink:#17142B;
  --r:6px;
  --font:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:64px;
  /* One type scale (step 39, Nearbury sizes in step 65): label 13, body 16, price 18, h3 20, h2 28.
     --fs-display is the page hero only: 28px on phones, 40px (h1) on big screens. */
  --fs-sm:13px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:28px;--fs-display:28px;
  /* Weights: body 400, labels and buttons 600, prices 700, headlines 800. */
  --fw-reg:400;--fw-bold:600;--fw-price:700;--fw-head:800;
}
@media (min-width:1024px){:root{--fs-display:40px}}
h4,h5,h6,b,strong,th{font-weight:var(--fw-bold)}
h1{font-weight:var(--fw-head);letter-spacing:-0.03em}
h2,h3{font-weight:var(--fw-price);letter-spacing:-0.01em}
body{margin:0;background:var(--paper)}
.p{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased}
.p *{box-sizing:border-box}
.p h1,.p h2,.p h3,.p p{margin:0}
.p a{color:var(--ink)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Utility strip */
.strip{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:36px}
.strip__area{display:none}
.strip__loc{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.strip__loc b{font-weight:var(--fw-bold)}
.strip__loc u{text-underline-offset:3px}

/* Header */
.hdr{background:var(--bg);border-bottom:1px solid var(--line)}
.hdr__row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo actions" "search search";gap:var(--s3);padding:var(--s3) 0}
.logo{grid-area:logo;align-self:center;font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-0.045em;line-height:1;color:var(--ink);text-decoration:none}
.search{grid-area:search;display:flex;align-items:center;gap:var(--s2);height:48px;padding:0 var(--s1) 0 var(--s4);border:1.5px solid var(--ink);border-radius:var(--r);background:var(--bg)}
.search svg{flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-md);color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.actions{grid-area:actions;display:flex;align-items:center;gap:var(--s1)}
.toplink{display:none;font-size:var(--fs-md);font-weight:var(--fw-reg);color:var(--ink);text-decoration:none;padding:0 var(--s3);min-height:44px;align-items:center}
.toplink:hover{text-decoration:underline;text-underline-offset:3px}
.iconbtn{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--r);color:var(--ink);cursor:pointer;text-decoration:none}
.iconbtn:hover{background:var(--bg-2)}
.count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 var(--s1);border-radius:var(--r);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center}

/* Category nav */
.cats{background:var(--bg);border-bottom:1px solid var(--line)}
.cats ul{display:flex;gap:var(--s1);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.cats a{display:inline-flex;align-items:center;height:48px;padding:0 var(--s3);font-size:var(--fs-md);font-weight:var(--fw-reg);color:var(--ink-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.cats a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cats li:first-child a{padding-left:0}

/* Type */
.h-display{font-size:var(--fs-2xl);line-height:1.04;font-weight:var(--fw-head);letter-spacing:-0.04em}
.h2{font-size:var(--fs-2xl);line-height:1.12;font-weight:var(--fw-head);letter-spacing:-0.03em}
.h3{font-size:var(--fs-lg);line-height:1.3;font-weight:var(--fw-price);letter-spacing:-0.01em}
.lede{font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2);max-width:38ch}
.body{color:var(--ink-2)}
.hi{background:var(--accent);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.link{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:48px;padding:0 var(--s5);border-radius:var(--r-md);border:1.5px solid transparent;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn--p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--p:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn--s{background:var(--bg);border-color:var(--ink);color:var(--ink)}
.btn--s:hover{background:var(--bg-2);color:var(--ink)}

/* Image placeholder */
.img{display:flex;align-items:center;justify-content:center;padding:var(--s4);border-radius:var(--r);background:var(--ph);color:var(--muted);font-size:var(--fs-sm);line-height:1.4;text-align:center}
.sec--grey .img{background:var(--ph-2)}
.photo{display:block;width:100%;object-fit:cover;border-radius:var(--r);background:var(--ph)}
.prod__img{aspect-ratio:1/1;margin-bottom:var(--s2);background:#FFFFFF;border:1px solid var(--line);object-fit:contain}
.prod:hover .prod__img{border-color:#C9CBD1}
.prod:hover .prod__name{text-decoration:underline;text-underline-offset:3px}

/* Hero demo panel: a drawn order, no photo */
.demo{display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.demo__search{display:flex;align-items:center;gap:var(--s2);height:48px;padding:0 var(--s4);background:var(--bg);border:1.5px solid var(--ink);border-radius:var(--r);font-size:var(--fs-md);color:var(--ink)}
.demo__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.demo__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.demo__name{grid-column:1;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.demo__shop{grid-column:1;font-size:var(--fs-sm);color:var(--muted)}
.demo__price{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.demo__slot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--fs-md);color:var(--ink-2)}
.demo__track{list-style:none;margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s3)}
.demo__track li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:var(--s3);font-size:var(--fs-md);color:var(--ink)}
.demo__track li.is-next{color:var(--muted)}
.demo__dot{width:12px;height:12px;border-radius:3px;border:2px solid var(--ink);box-sizing:border-box}
.demo__track li.is-next .demo__dot{border-color:var(--muted)}
.demo__dot--done{background:var(--ink)}
.demo__dot--now{background:var(--accent)}
.demo__time{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}

/* Sections */
.sec{padding:var(--s7) 0}
.sec--tight{padding:var(--s6) 0}
.sec--airy{padding:64px 0}
.sec--grey{background:var(--bg-2)}
.sec--line{border-top:1px solid var(--line)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}

/* Hero */
.hero{padding:var(--s7) 0 56px}
.hero .h-display{max-width:12ch}
.hero__grid{display:grid;gap:var(--s6)}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.hero__copy .btn{margin-top:var(--s3)}
.hero__img{aspect-ratio:4/3}

/* Product rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(164px,46%);gap:var(--s3);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s4) * -1);padding:0 var(--s4)}
.prod{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink)}
.prod .img{aspect-ratio:1/1;margin-bottom:var(--s2)}
.prod__name{font-size:var(--fs-md);line-height:1.35}
.prod__price{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.prod__meta{font-size:var(--fs-sm);color:var(--muted)}
.tag{align-self:flex-start;display:inline-flex;align-items:center;height:24px;padding:0 var(--s2);border-radius:var(--r);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}
.tag--plain{background:var(--bg-2);border:1px solid var(--line)}

/* Order steps: big numbers in a row */
.order__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.osteps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.osteps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.osteps__n{font-size:var(--fs-2xl);line-height:1;font-weight:var(--fw-bold);letter-spacing:-0.04em;color:var(--ink)}
.osteps p{margin-top:var(--s1)}
.order__foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.order__note{font-size:var(--fs-md);color:var(--muted)}

/* Seller steps: split */
.sell{display:grid;gap:var(--s6)}
.sell__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.sell__copy .btn{margin-top:var(--s3)}
.ssteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ssteps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.ssteps__n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r);border:1.5px solid var(--ink);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.ssteps p{margin-top:var(--s1)}

/* Footer */
.ftr{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s5)}
.ftr__row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.ftr__links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;padding:0;list-style:none}
.ftr__links a{font-size:var(--fs-md);color:var(--ink-2);text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.ftr__links a:hover{color:var(--ink);text-decoration:underline}
.ftr__base{font-size:var(--fs-sm);color:var(--muted)}

/* Phone sticky action bar (buy, basket, pay). Step 50: the website has no bottom tab bar. */
.mbar{display:none}
.mbar-space{display:none}
@media (max-width:767px){
  /* Step 36: bottom spacing comes from --dock (pannier-layout.css) */
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);border-top:1px solid var(--line);font-family:var(--font);color:var(--ink)}
  .mbar--bottom{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .mbar .btn{flex:1;max-width:220px}
  .mbar__info{display:flex;flex-direction:column;min-width:0}
  .mbar__price{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
  .mbar__sub{font-size:var(--fs-sm);color:#4A4560}
  .mbar-space{display:block;height:76px}
  .p .h-display{font-size:var(--fs-2xl) !important;max-width:none !important}
  .p .h1{font-size:var(--fs-2xl) !important}
  .p .h2{font-size:var(--fs-xl) !important}
  .bignum{font-size:var(--fs-display)}
}

/* Tablet */
@media (min-width:768px){
  .wrap{padding:0 var(--s6)}
  .rail{margin:0 calc(var(--s6) * -1);padding:0 var(--s6);grid-auto-columns:minmax(200px,30%)}
  .ftr__row{flex-direction:row;align-items:center;justify-content:space-between}
}

/* Desktop */
@media (min-width:1024px){
  .strip__area{display:inline}
  .hdr__row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search actions";gap:var(--s5);padding:var(--s4) 0}
  .logo{font-size:var(--fs-2xl);margin-right:var(--s4)}
  .toplink{display:inline-flex}
  .h-display{font-size:var(--fs-2xl)}
  .h2{font-size:var(--fs-2xl)}
  .lede{font-size:var(--fs-lg)}
  .hero{padding:112px 0 120px}
  .hero__grid{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
  .hero__img{aspect-ratio:7/5}
  .sec{padding:var(--s8) 0}
  .sec--tight{padding:var(--s7) 0}
  .sec--airy{padding:112px 0}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:var(--s4)}
  .osteps{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .osteps li{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding:var(--s6) var(--s6) var(--s6) 0;border-bottom:0}
  .osteps li + li{border-left:1px solid var(--line);padding-left:var(--s6)}
  .osteps__n{font-size:var(--fs-2xl)}
  .sell{grid-template-columns:5fr 7fr;gap:var(--s9);align-items:start}
  .hero .h-display{font-size:var(--fs-display);max-width:13ch}
  .hero .lede{font-size:var(--fs-xl)}
}

/* Brand A: Electric Violet leads, Bright Mint for good news */
.btn--p{background:var(--brand);border-color:var(--brand);color:#FFFFFF}.btn--p:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#FFFFFF}
.p a.btn--p,.p .btn--p,.d .btn--p,.d a.btn--p,.now .btn--p,.now a.btn--p{color:#FFFFFF}