/* =========================================================================
   OMNI COFFEE — design system
   ========================================================================= */

:root{
  color-scheme: light;
  --stone:       #EDEAE1;
  --stone-deep:  #E1D9C8;
  --stone-line:  #D8CFBB;
  --paper-line:  rgba(27,22,16,.14);
  --ink:         #1C1712;
  --ink-soft:    #6B6053;
  --ink-faint:   #948A7B;
  --flame:       #C4451D;
  --flame-dark:  #9E3714;
  --flame-tint:  #F3DDD1;
  --brass:       #8F6F39;
  --espresso:    #15100B;
  --espresso-2:  #1E1710;
  --espresso-3:  #241C13;
  --cream:       #EFE7D5;
  --cream-soft:  #C7BBA1;
  --good:        #4C7A4F;
  --good-tint:   #DEE9DA;
  --warn:        #A6791E;
  --warn-tint:   #F1E4C4;
  --bad:         #A1392B;
  --bad-tint:    #F0DAD3;
  --wb:          #7A17E0;
  --ozon:        #005BFF;
  --shadow-lg:   0 30px 60px -30px rgba(20,14,8,.5);
  --shadow-md:   0 16px 34px -20px rgba(20,14,8,.4);
  --radius-s:    3px;
  --radius-m:    10px;
  --radius-l:    18px;
  --maxw:        1260px;
  --header-h:    72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.97;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
.tnum{ font-variant-numeric:tabular-nums; }
.mono{ font-family:"IBM Plex Mono",monospace; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eyebrow{
  display:none;
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  align-items:center; gap:.55em; color:var(--brass);
}
.eyebrow::before{ content:""; width:1.4em; height:1px; background:currentColor; display:inline-block; }
.eyebrow svg{ width:14px; height:14px; flex:none; }
.on-dark .eyebrow{ color:var(--cream-soft); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
main{ display:block; min-height:60vh; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.95em 1.5em; border-radius:2px; border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn svg{ width:14px; height:14px; flex:none; }
.btn-flame{ background:var(--flame); color:var(--cream); }
.btn-flame:hover{ background:var(--flame-dark); }
.btn-line{ border-color:currentColor; color:inherit; background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:transparent; padding:.7em 1em; }
.btn-ghost:hover{ color:var(--ink); background:var(--stone-deep); }
.btn-block{ width:100%; }
.btn-sm{ padding:.62em 1em; font-size:.72rem; }
.on-dark .btn-line{ color:var(--cream); }
.on-dark .btn-line:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.btn-wb, .btn-ozon{ background:var(--espresso); color:#fff; }
.btn-wb:hover, .btn-ozon:hover{ background:var(--ink); }
.btn-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--paper-line);
  background:transparent; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-icon:hover{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.btn-icon svg{ width:16px; height:16px; }
.btn-icon.is-active{ background:var(--flame); border-color:var(--flame); color:#fff; }

.stamp{ width:56px; height:56px; border-radius:50%; border:1.4px dashed currentColor; display:flex; align-items:center; justify-content:center; flex:none; }
.stamp svg{ width:26px; height:26px; }

section{ position:relative; }
.section{ padding:clamp(56px,8vw,100px) 0; }
.section-sm{ padding:clamp(36px,5vw,56px) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); max-width:22ch; margin-top:12px; }
.section-head .lead{ max-width:40ch; color:var(--ink-soft); font-size:.98rem; }
.on-dark{ background:var(--espresso); color:var(--cream); }
.on-dark .section-head .lead{ color:var(--cream-soft); }
.on-dark .ink-soft{ color:var(--cream-soft) !important; }
.on-stone-deep{ background:var(--stone-deep); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================================
   HEADER
   ========================================================================= */
.top-bar{
  background:var(--espresso-3); color:var(--cream-soft); font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.04em;
}
.top-bar .wrap{ max-width:none; display:flex; justify-content:space-between; align-items:center; padding-top:7px; padding-bottom:7px; gap:20px; }
.top-bar a{ opacity:.9; }
.top-bar a:hover{ opacity:1; color:var(--cream); }
.top-bar-links{ display:flex; gap:22px; }
@media (max-width:760px){ .top-bar .wrap{ justify-content:center; } .top-bar-links{ display:none; } }

header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(21,16,11,.96); backdrop-filter:blur(10px);
  color:var(--cream); border-bottom:1px solid rgba(239,231,213,.08);
  transition:background .3s ease;
}

.head-row{ display:flex; align-items:center; gap:22px; padding:15px clamp(20px,4vw,48px); }
.logo{ display:flex; align-items:baseline; gap:.5em; font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:1.55rem; letter-spacing:.01em; text-transform:uppercase; color:var(--cream); flex:none; }
.logo em{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.6rem; font-weight:500; letter-spacing:.14em; color:var(--cream-soft); text-transform:uppercase; }

nav.main-nav{ display:flex; align-items:center; gap:4px; flex:1; }
nav.main-nav > .nav-item{ position:relative; }
nav.main-nav > .nav-item > a, nav.main-nav > .nav-item > button.nav-link{
  display:flex; align-items:center; gap:6px; background:none; border:none;
  font-size:.85rem; letter-spacing:.02em; color:var(--cream); padding:10px 12px; border-radius:2px;
  opacity:.92; transition:opacity .2s ease, background .2s ease;
}
nav.main-nav > .nav-item > a:hover, nav.main-nav > .nav-item > button.nav-link:hover{ opacity:1; background:rgba(239,231,213,.08); }
nav.main-nav .caret{ width:9px; height:9px; opacity:.7; }

.mega{
  position:absolute; top:100%; left:0; margin-top:8px; width:520px;
  background:var(--espresso-2); border:1px solid rgba(239,231,213,.1); border-radius:var(--radius-m);
  box-shadow:var(--shadow-lg); padding:10px; display:none; z-index:50; min-height:262px;
}
/* invisible bridge over the margin-top gap so the cursor never leaves the nav-item */
.mega::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
/* open state is driven by JS (hover intent with close delay) — see initMegaMenu() */
.nav-item.is-open .mega{ display:block; }
nav.main-nav > .nav-item.is-open > button.nav-link{ opacity:1; background:rgba(239,231,213,.08); }
nav.main-nav > .nav-item.is-open > button.nav-link .caret{ transform:rotate(180deg); }
nav.main-nav .caret{ transition:transform .2s ease; }
.mega-cat{ position:static; }
.mega-cat-link{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; border-radius:6px; font-size:.88rem; font-weight:600; width:220px; }
.mega-cat-link svg{ width:11px; height:11px; opacity:.55; flex:none; }
.mega-cat-link:hover, .mega-cat.is-active .mega-cat-link{ background:rgba(239,231,213,.08); }
/* sub-panel starts exactly where the category column ends (10px padding + 220px) — no dead zone */
.mega-sub{
  display:none; flex-direction:column; position:absolute; left:230px; right:0; top:0; bottom:0;
  padding:10px 10px 10px 10px; z-index:51;
}
.mega-sub::before{ content:""; position:absolute; left:10px; top:12px; bottom:12px; border-left:1px solid rgba(239,231,213,.14); }
.mega-sub > a{ margin-left:18px; }
.mega-cat.is-active .mega-sub{ display:flex; }
.mega-sub a{ padding:9px 12px; border-radius:6px; font-size:.82rem; }
.mega-sub a:hover{ background:rgba(239,231,213,.08); }
.mega-sub a.mega-sub-all{ margin-top:4px; padding-top:12px; border-top:1px solid rgba(239,231,213,.12); color:var(--flame); font-weight:600; display:flex; align-items:center; gap:6px; }
.mega-sub a.mega-sub-all svg{ width:11px; height:11px; }
.mega-all-link{ display:flex; align-items:center; gap:8px; margin-top:2px; padding:11px 14px; border-radius:6px; font-weight:600; color:var(--flame); font-size:.88rem; }
.mega-all-link svg{ width:11px; height:11px; flex:none; }
.mega-all-link:hover{ background:rgba(239,231,213,.08); }

.head-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.hd-icon{ position:relative; width:40px; height:40px; border-radius:50%; border:1px solid rgba(239,231,213,.22); background:transparent; color:var(--cream); display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease,border-color .2s ease; }
.hd-icon:hover{ background:rgba(239,231,213,.1); border-color:var(--cream); }
.hd-icon svg{ width:16px; height:16px; }
.hd-badge{ position:absolute; top:-4px; right:-4px; background:var(--flame); color:#fff; font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:600; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }

.burger{ display:none; width:34px; height:26px; border:none; background:none; flex-direction:column; justify-content:space-between; padding:2px; flex:none; }
.burger span{ height:2px; background:var(--cream); border-radius:2px; }

.search-overlay{
  position:fixed; inset:0; background:rgba(15,11,7,.88); z-index:200; display:none;
  align-items:flex-start; justify-content:center; padding:14vh 20px 20px;
}
.search-overlay.is-open{ display:flex; }
.search-box{ width:100%; max-width:680px; }
.search-box form{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--flame); padding-bottom:14px; }
.search-box input{ flex:1; background:none; border:none; outline:none; color:var(--cream); font-family:"Big Shoulders Display",sans-serif; font-size:1.7rem; text-transform:uppercase; letter-spacing:.01em; }
.search-box input::placeholder{ color:var(--cream-soft); }
.search-box button.icon-btn{ background:none; border:none; color:var(--cream); }
.search-box button.icon-btn svg{ width:20px; height:20px; }
.search-hint{ margin-top:16px; font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--cream-soft); }
.search-hint a{ color:var(--flame); }
.search-close{ position:absolute; top:26px; right:clamp(20px,4vw,48px); }

@media (max-width:1080px){
  nav.main-nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:640px){
  .logo em{ display:none; }
  .head-row{ gap:10px; padding-left:16px; padding-right:16px; }
  .head-actions{ gap:6px; }
  .head-actions .hd-icon:not(#cartIcon){ display:none; }
  .top-bar{ display:none; }
}
.mobile-drawer{ display:none; }
body.nav-open .mobile-drawer{
  display:block; position:fixed; inset:0; z-index:150; background:var(--espresso-2);
  overflow-y:auto; padding:20px clamp(20px,4vw,48px) 40px;
}
.mobile-drawer .drawer-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid rgba(239,231,213,.1); margin-bottom:10px; }
.mobile-drawer a, .mobile-drawer .md-group > span{ display:block; padding:12px 0; font-size:1.05rem; border-bottom:1px solid rgba(239,231,213,.08); color:var(--cream); }
.mobile-drawer .md-sub{ padding-left:16px; }
.mobile-drawer .md-sub a{ font-size:.92rem; color:var(--cream-soft); border-bottom:none; padding:8px 0; }
@media (min-width:1081px){ .mobile-drawer{ display:none !important; } }

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.crumbs{ padding:16px 0; font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.03em; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--flame); }
.crumbs .sep{ opacity:.5; }
.on-dark .crumbs{ color:var(--cream-soft); }
.on-dark .crumbs a{ color:var(--cream-soft); }

/* =========================================================================
   PAGE HERO (inner pages)
   ========================================================================= */
.page-hero{ background:var(--espresso); color:var(--cream); padding:34px 0 52px; }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3.4rem); margin-top:12px; max-width:22ch; }
.page-hero .lead{ margin-top:16px; max-width:60ch; color:var(--cream-soft); font-size:1rem; }
.page-hero .crumbs{ padding-top:0; }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer.site-footer{ background:var(--espresso-2); color:var(--cream-soft); padding:56px 0 24px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:32px; }
.foot-logo{ color:var(--cream); font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:1.6rem; text-transform:uppercase; }
.foot-grid > div > p{ margin-top:14px; font-size:.86rem; max-width:32ch; }
.foot-col h4{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); margin-bottom:14px; font-weight:500; }
.foot-col ul{ display:grid; gap:9px; }
.foot-col a{ font-size:.88rem; transition:color .2s ease; }
.foot-col a:hover{ color:var(--cream); }
.foot-social{ display:flex; gap:10px; margin-top:14px; }
.foot-bottom{ margin-top:44px; padding-top:20px; border-top:1px solid rgba(239,231,213,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.76rem; font-family:"IBM Plex Mono",monospace; }
.foot-bottom a{ color:var(--cream-soft); }
.foot-bottom a:hover{ color:var(--cream); }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   TICKER (home)
   ========================================================================= */
.ticker{ background:var(--espresso-2); color:var(--cream-soft); overflow:hidden; border-bottom:1px solid rgba(239,231,213,.08); }
.ticker-track{ display:flex; width:max-content; animation:tickerMove 44s linear infinite; padding:12px 0; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }
@keyframes tickerMove{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } }
.ticker-track span{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; padding:0 26px; white-space:nowrap; border-right:1px solid rgba(239,231,213,.18); }

/* =========================================================================
   HERO SLIDER (home)
   ========================================================================= */
.hero{ position:relative; height:70vh; min-height:600px; overflow:hidden; background:var(--espresso); }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s ease; display:flex; align-items:flex-end; }
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide .field{ position:absolute; inset:0; background-size:cover; }
.hero-slide[data-i="0"] .field{ background:radial-gradient(ellipse 60% 80% at 82% 18%, rgba(196,69,29,.35), transparent 60%), radial-gradient(ellipse 70% 60% at 12% 92%, rgba(143,111,57,.28), transparent 65%), linear-gradient(160deg,#1a130c,#0e0b07 70%); }
.hero-slide[data-i="1"] .field{ background:radial-gradient(ellipse 55% 75% at 14% 12%, rgba(143,111,57,.4), transparent 60%), radial-gradient(ellipse 65% 60% at 88% 88%, rgba(196,69,29,.25), transparent 65%), linear-gradient(200deg,#181009,#0d0a06 75%); }
.hero-slide[data-i="2"] .field{ background:radial-gradient(ellipse 60% 70% at 88% 15%, rgba(196,69,29,.3), transparent 60%), radial-gradient(ellipse 55% 65% at 8% 85%, rgba(196,69,29,.18), transparent 65%), linear-gradient(160deg,#181008,#0c0906 70%); }
.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px) clamp(48px,7vw,80px); color:var(--cream); }
.hero-inner .eyebrow{ margin-bottom:16px; color:var(--cream-soft); }
.hero-inner .eyebrow::before{ background:var(--flame); height:2px; }
.hero-inner h1{ font-size:clamp(2.3rem,6.4vw,4.8rem); max-width:24ch; color:var(--cream); }
.hero-inner .sub{ margin-top:20px; max-width:46ch; font-size:1.02rem; color:var(--cream-soft); }
.hero-cta{ margin-top:30px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-controls{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; padding:0 clamp(20px,4vw,48px); max-width:var(--maxw); margin:0 auto; }
.hero-dots{ display:flex; gap:10px; padding:18px 0; }
.hero-dot{ width:64px; height:3px; background:rgba(239,231,213,.25); border:none; position:relative; overflow:hidden; }
.hero-dot .fill{ position:absolute; inset:0; width:0%; background:var(--flame); }
.hero-dot.is-active .fill{ animation:heroProgress 6s linear forwards; }
@keyframes heroProgress{ from{ width:0% } to{ width:100% } }
@media (prefers-reduced-motion: reduce){ .hero-dot.is-active .fill{ animation:none; width:100%; } }
.hero-arrows{ margin-left:auto; display:flex; gap:8px; padding:14px 0; }
.hero-arrow{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(239,231,213,.3); background:transparent; color:var(--cream); display:flex; align-items:center; justify-content:center; }
.hero-arrow:hover{ background:rgba(239,231,213,.12); border-color:var(--cream); }
.hero-arrow:focus{ outline:none; }
.hero-arrow:focus-visible{ outline:2px solid var(--cream); outline-offset:2px; }
.hero-arrow svg{ width:15px; height:15px; }

/* =========================================================================
   ABOUT / FACTS (home)
   ========================================================================= */
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.about-copy p{ color:var(--ink-soft); margin-bottom:16px; max-width:56ch; }
.quote-card{ border:1px solid var(--paper-line); background:var(--stone-deep); padding:32px 28px; border-radius:var(--radius-m); }
.quote-card .stamp{ color:var(--flame); margin-bottom:18px; }
.quote-card blockquote{ font-family:"Big Shoulders Display",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.7rem; line-height:1; margin:0 0 14px; }
.quote-card cite{ font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft); }
.facts-row{ margin-top:48px; padding-top:36px; border-top:1px solid var(--paper-line); display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.fact{ display:flex; flex-direction:column; gap:12px; }
.fact .ico{ color:var(--flame); }
.fact .ico svg{ width:24px; height:24px; }
.fact strong{ font-size:.92rem; font-weight:600; }
.fact span{ font-size:.84rem; color:var(--ink-soft); }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } .facts-row{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   STATS
   ========================================================================= */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(239,231,213,.14); border-left:1px solid rgba(239,231,213,.14); }
.stat-tile{ padding:32px 26px; border-right:1px solid rgba(239,231,213,.14); border-bottom:1px solid rgba(239,231,213,.14); }
.stat-num{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:clamp(2.2rem,4vw,3.4rem); color:var(--cream); display:flex; align-items:baseline; gap:.15em; }
.stat-num .unit{ font-size:.4em; font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--brass); text-transform:uppercase; }
.stat-label{ margin-top:8px; font-size:.8rem; color:var(--cream-soft); max-width:22ch; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   PRODUCT CARD / BAG VISUAL
   ========================================================================= */
.p-card{ display:flex; flex-direction:column; position:relative; }
.p-card .bag-link{ display:block; position:relative; }
.bag{ aspect-ratio:3/4; border-radius:5px 5px 26px 26px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:16px 15px; }
.bag.tint-light{ background:linear-gradient(165deg,#EFE6D2,#DED0AF); color:var(--ink); }
.bag.tint-dark{ background:linear-gradient(165deg,#2A2016,#120D08); color:var(--cream); }
.bag::before{ content:""; position:absolute; top:0; left:0; right:0; height:26%; background:rgba(0,0,0,.08); }
.bag.tint-dark::before{ background:rgba(255,255,255,.05); }
.bag::after{ content:""; position:absolute; top:16%; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; opacity:.5; }
.bag .spec{ position:relative; font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.05em; text-transform:uppercase; opacity:.75; }
.bag .region{ position:relative; font-family:"Big Shoulders Display",sans-serif; font-weight:800; text-transform:uppercase; font-size:1.32rem; line-height:.98; }
.bag .stamp{ width:32px; height:32px; position:relative; opacity:.8; }
.bag .stamp svg{ width:15px; height:15px; }
.bag.bag-mini{ padding:8px; }
.bag.bag-mini .spec{ display:none; }
.bag.bag-mini .region{ font-size:.6rem; line-height:1.1; }
.bag.bag-mini .stamp{ width:16px; height:16px; }
.bag.bag-mini .stamp svg{ width:8px; height:8px; }
.bag.bag-mini::after{ width:8px; height:8px; top:10%; }
.p-card .fav-btn{ position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(20,15,10,.55); border:none; color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.p-card .fav-btn svg{ width:16px; height:16px; }
.p-card .fav-btn.is-active{ color:var(--flame); }
.p-card .fav-btn.is-active svg{ fill:var(--flame); }
.card-badges{ margin-top:12px; display:flex; gap:6px; flex-wrap:wrap; }
.p-card .notes{ margin-top:14px; font-size:.85rem; color:var(--ink-soft); min-height:2.7em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.p-card .rating-row{ margin-top:8px; }
.p-card .price-row{ margin-top:10px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.p-card .price{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.3rem; }
.p-card .price .old{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint); text-decoration:line-through; font-weight:400; margin-left:6px; }
.p-card .weight{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; }
.p-card .cart-row{ margin-top:auto; padding-top:12px; display:flex; gap:8px; }
.p-card .cart-row .btn{ flex:1; padding:.7em 1em; font-size:.72rem; }
.on-dark .p-card .notes{ color:var(--cream-soft); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.35em .65em; border-radius:2px; }
.badge-new{ background:var(--flame); color:#fff; }
.badge-hit{ background:var(--brass); color:#fff; }
.badge-out{ background:var(--espresso); color:var(--cream-soft); }
.badge-ok{ background:var(--good-tint); color:var(--good); }
.badge-warn{ background:var(--warn-tint); color:var(--warn); }
.badge-bad{ background:var(--bad-tint); color:var(--bad); }

.star-row{ display:inline-flex; align-items:center; gap:6px; }
.star-row .stars{ display:inline-flex; gap:2px; color:var(--brass); }
.star-row .stars svg{ width:13px; height:13px; }
.star-row .stars svg.is-off{ opacity:.25; }
.star-row .count{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
.on-dark .star-row .count{ color:var(--cream-soft); }

.grid-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1080px){ .grid-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .grid-cards{ grid-template-columns:1fr 1fr; gap:14px; } }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:34px; }
.tab-btn{ border:1px solid var(--paper-line); background:transparent; color:var(--ink-soft); padding:.68em 1.15em; border-radius:2px; font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; transition:all .2s ease; }
.tab-btn.is-active{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.on-dark .tab-btn{ border-color:rgba(239,231,213,.25); color:var(--cream-soft); }
.on-dark .tab-btn.is-active{ background:var(--flame); color:#fff; border-color:var(--flame); }

.carousel-wrap{ position:relative; }
.carousel{ display:none; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 -4px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.carousel.is-active{ display:flex; }
.carousel .p-card{ scroll-snap-align:start; flex:0 0 clamp(220px,25vw,270px); }
.carousel-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.carousel-nav button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--paper-line); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.carousel-nav button:hover{ background:var(--ink); color:var(--stone); }
.carousel-nav svg{ width:15px; height:15px; }

/* =========================================================================
   ROASTING PROCESS
   ========================================================================= */
.process-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; position:relative; }
.process-row::before{ content:""; position:absolute; top:19px; left:0; right:0; height:1px; background:rgba(239,231,213,.18); }
.p-step{ position:relative; padding-right:18px; }
.p-step .n{ font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.8rem; color:var(--flame); background:var(--espresso); display:inline-block; padding-right:12px; position:relative; z-index:1; }
.p-step .n.n-bright{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:.02em; padding-right:14px; }
.p-step h3{ font-size:1.02rem; text-transform:none; font-family:"IBM Plex Sans",sans-serif; font-weight:700; letter-spacing:0; margin:14px 0 8px; }
.p-step p{ font-size:.85rem; color:var(--cream-soft); }
@media (max-width:960px){ .process-row{ grid-template-columns:1fr; gap:30px; } .process-row::before{ display:none; } }
.roast-callout{ margin-top:52px; display:grid; grid-template-columns:1fr 1.3fr; gap:36px; align-items:center; border:1px solid rgba(239,231,213,.16); border-radius:var(--radius-m); padding:30px; background:rgba(239,231,213,.03); }
.roast-callout .big{ font-family:"Big Shoulders Display",sans-serif; font-weight:900; color:var(--cream); font-size:clamp(2.1rem,3.8vw,3rem); line-height:.9; }
.roast-callout .big span{ color:var(--flame); }
.roast-callout p{ color:var(--cream-soft); margin-top:10px; max-width:32ch; font-size:.9rem; }
@media (max-width:800px){ .roast-callout{ grid-template-columns:1fr; } }

/* =========================================================================
   PROSE / GENERIC TEXT PAGE
   ========================================================================= */
.prose{ max-width:74ch; }
.prose h2{ font-size:1.5rem; margin-top:2.2em; margin-bottom:.6em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.1rem; text-transform:none; font-family:"IBM Plex Sans",sans-serif; font-weight:700; letter-spacing:0; margin-top:1.6em; margin-bottom:.5em; }
.prose p{ color:var(--ink-soft); margin-bottom:1.1em; }
.prose ul{ margin-bottom:1.1em; display:grid; gap:8px; }
.prose ul li{ position:relative; padding-left:20px; color:var(--ink-soft); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--flame); }
.prose table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.92rem; }
.prose table th, .prose table td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--paper-line); }
.prose table th{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.info-hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.info-card{ border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:26px; display:flex; flex-direction:column; gap:10px; background:#fff2; transition:border-color .2s ease, transform .2s ease; }
.info-card:hover{ border-color:var(--flame); transform:translateY(-3px); }
.info-card svg{ width:24px; height:24px; color:var(--flame); }
.info-card h3{ font-size:1rem; text-transform:none; font-family:"IBM Plex Sans",sans-serif; font-weight:700; }
.info-card span{ font-size:.86rem; color:var(--ink-soft); }
@media (max-width:900px){ .info-hub-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .info-hub-grid{ grid-template-columns:1fr; } }

.accordion-item{ border-bottom:1px solid var(--paper-line); }
.accordion-item summary{ cursor:pointer; padding:18px 0; font-weight:600; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; list-style:none; }
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary::after{ content:"+"; font-family:"IBM Plex Mono",monospace; font-size:1.2rem; color:var(--flame); }
.accordion-item[open] summary::after{ content:"–"; }
.accordion-item .a-body{ padding:0 0 18px; color:var(--ink-soft); font-size:.92rem; max-width:70ch; }

/* =========================================================================
   FORMS
   ========================================================================= */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.on-dark .field label{ color:var(--cream-soft); }
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=date],.field input[type=password],.field input[type=number],.field select,.field textarea{
  border:1px solid var(--paper-line); background:#fff8; border-radius:2px; padding:.85em 1em; font-size:.92rem; color:var(--ink); outline:none; transition:border-color .2s ease;
  width:100%;
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea{ background:rgba(239,231,213,.06); border-color:rgba(239,231,213,.22); color:var(--cream); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--flame); }
.field textarea{ resize:vertical; min-height:100px; }
.field .hint{ font-size:.78rem; color:var(--ink-faint); }
.field.has-error input{ border-color:var(--bad); }
.field .err{ font-size:.78rem; color:var(--bad); display:none; }
.field.has-error .err{ display:block; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.check-row{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--ink-soft); }
.check-row input{ margin-top:3px; accent-color:var(--flame); }
.radio-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-pill span{ display:inline-flex; padding:.6em 1.1em; border:1px solid var(--paper-line); border-radius:2px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.radio-pill input:checked + span{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.on-dark .radio-pill span{ border-color:rgba(239,231,213,.25); }
.on-dark .radio-pill input:checked + span{ background:var(--flame); color:#fff; border-color:var(--flame); }

.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--paper-line); border-radius:2px; }
.qty-stepper button{ width:32px; height:34px; background:none; border:none; font-size:1rem; color:var(--ink); }
.qty-stepper button:hover{ background:var(--stone-deep); }
.qty-stepper span{ min-width:28px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.86rem; }

.otp-row{ display:flex; gap:10px; }
.otp-row input{ width:48px; height:56px; text-align:center; font-family:"Big Shoulders Display",sans-serif; font-size:1.5rem; border:1px solid var(--paper-line); border-radius:4px; background:#fff8; outline:none; }
.on-dark .otp-row input{ background:rgba(239,231,213,.06); border-color:rgba(239,231,213,.25); color:var(--cream); }
.otp-row input:focus{ border-color:var(--flame); }

/* =========================================================================
   FILTERS / CATALOG
   ========================================================================= */
.catalog-layout{ display:grid; grid-template-columns:250px 1fr; gap:40px; align-items:start; }
.filters{ position:sticky; top:calc(var(--header-h) + 16px); display:flex; flex-direction:column; gap:26px; }
.filter-group{ border-bottom:1px solid var(--paper-line); padding-bottom:20px; }
.filter-group h4{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; color:var(--ink-faint); }
.filter-check{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:.88rem; cursor:pointer; }
.filter-check input{ accent-color:var(--flame); }
.filter-check .fc-count{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
.price-range{ display:flex; gap:10px; align-items:center; }
.price-range input{ width:100%; border:1px solid var(--paper-line); border-radius:2px; padding:.55em .7em; font-size:.85rem; }
@media (max-width:960px){ .catalog-layout{ grid-template-columns:1fr; } .filters{ position:static; flex-direction:row; flex-wrap:wrap; gap:14px; } .filter-group{ border:none; padding:0; } }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.toolbar .count{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-faint); }
.cs-select{ position:relative; width:100%; font-family:"IBM Plex Mono",monospace; font-size:.78rem; }
.cs-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--paper-line); background:#fff; padding:.6em 1em; text-transform:uppercase; letter-spacing:.03em; border-radius:2px; color:var(--ink); }
.cs-trigger:hover{ border-color:var(--ink-faint); }
.cs-trigger .caret{ width:11px; height:11px; opacity:.6; flex:none; transition:transform .15s ease; }
.cs-select.is-open .cs-trigger .caret{ transform:rotate(180deg); }
.cs-select.is-open .cs-trigger{ border-color:var(--flame); }
.cs-menu{ display:none; position:absolute; top:100%; left:0; right:0; margin-top:6px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m); box-shadow:var(--shadow-lg); padding:6px; z-index:40; }
.cs-select.is-open .cs-menu{ display:block; }
.cs-option{ padding:9px 12px; border-radius:6px; text-transform:uppercase; letter-spacing:.03em; font-size:.78rem; color:var(--ink-soft); cursor:pointer; }
.cs-option:hover{ background:var(--stone); color:var(--ink); }
.cs-option.is-active{ background:var(--flame); color:#fff; }

.pagination{ display:flex; gap:8px; justify-content:center; margin-top:44px; }
.pagination button{ width:38px; height:38px; border:1px solid var(--paper-line); background:transparent; border-radius:2px; font-family:"IBM Plex Mono",monospace; font-size:.82rem; }
.pagination button.is-active{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.pagination button:hover:not(.is-active){ border-color:var(--ink); }

/* =========================================================================
   PRODUCT DETAIL
   ========================================================================= */
.pd-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:start; }
.pd-gallery-main{ max-width:420px; }
.pd-gallery-main .bag{ box-shadow:var(--shadow-md); }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; }
.pd-thumbs .bag{ aspect-ratio:1/1; width:64px; cursor:pointer; border:2px solid transparent; }
.pd-thumbs .bag.is-active{ border-color:var(--flame); }
.pd-sku{ margin-bottom:10px; }
.pd-title{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.pd-meta{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.pd-price{ margin-top:22px; display:flex; align-items:baseline; gap:12px; }
.pd-price .amount{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:2.2rem; }
.pd-price .old{ font-family:"IBM Plex Mono",monospace; text-decoration:line-through; color:var(--ink-faint); }
.pd-weight{ margin-top:18px; }
.pd-weight-label{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; display:block; }
.pd-actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pd-market{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.pd-market .btn{ flex:1; min-width:190px; }
.pd-availability{ margin-top:16px; font-size:.86rem; }
.pd-specs{ margin-top:10px; }
.pd-specs table{ width:100%; border-collapse:collapse; }
.pd-specs td{ padding:11px 0; border-bottom:1px solid var(--paper-line); font-size:.9rem; }
.pd-specs td:first-child{ color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; width:46%; }
.review-item{ padding:22px 0; border-bottom:1px solid var(--paper-line); }
.review-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.review-id{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.review-author{ font-weight:600; font-size:.94rem; }
.review-date{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink-faint); }
.review-text{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; max-width:70ch; }
.review-form{ margin-top:26px; padding-top:26px; border-top:1px solid var(--paper-line); }
.rate-picker{ display:flex; gap:6px; }
.rate-picker button{ background:none; border:none; color:var(--ink-faint); }
.rate-picker button svg{ width:24px; height:24px; }
.rate-picker button.is-on{ color:var(--brass); }
@media (max-width:900px){ .pd-grid{ grid-template-columns:1fr; } }

.brew-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.brew-tile{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:20px; }
.brew-tile .ico{ width:32px; height:32px; color:var(--flame); flex:none; }
.brew-tile h4{ font-family:"IBM Plex Sans",sans-serif; font-weight:700; text-transform:none; letter-spacing:0; font-size:.95rem; margin-bottom:6px; }
.brew-tile .link-btn{ background:none; border:none; padding:0; color:var(--brass); font-family:"IBM Plex Mono",monospace; font-size:.74rem; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.04em; }
.brew-tile .link-btn svg{ width:10px; height:10px; }
.brew-tile .link-btn:hover{ color:var(--flame); }
.storage-note{ margin-top:26px; padding:20px; border:1px solid var(--paper-line); border-radius:var(--radius-m); }
.storage-note h4{ display:flex; align-items:center; gap:8px; font-family:"IBM Plex Sans",sans-serif; font-weight:700; text-transform:none; font-size:.95rem; margin-bottom:8px; }
.storage-note h4 svg{ width:18px; height:18px; color:var(--brass); flex:none; }
.storage-note p{ color:var(--ink-soft); font-size:.9rem; max-width:70ch; }
@media (max-width:760px){ .brew-grid{ grid-template-columns:1fr; } }

.consent-check{ display:flex; align-items:flex-start; gap:10px; font-size:.78rem; color:var(--ink-soft); cursor:pointer; }
.consent-check input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--flame); }
.on-dark .consent-check{ color:var(--cream-soft); }

/* =========================================================================
   CART
   ========================================================================= */
.cart-layout{ display:grid; grid-template-columns:1fr .42fr; gap:46px; align-items:start; }
.cart-item{ display:grid; grid-template-columns:76px 1fr auto auto auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--paper-line); }
.cart-item .bag{ width:76px; aspect-ratio:3/4; }
.cart-item .ci-name{ font-weight:600; font-size:.95rem; }
.cart-item .ci-meta{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); margin-top:4px; }
.cart-item .ci-price{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.15rem; white-space:nowrap; }
.cart-item .ci-remove{ background:none; border:none; color:var(--ink-faint); }
.cart-item .ci-remove:hover{ color:var(--bad); }
.cart-item .ci-remove svg{ width:17px; height:17px; }
@media (max-width:700px){ .cart-item{ grid-template-columns:56px 1fr; grid-template-areas:"img name" "img meta" "img controls"; } .cart-item .ci-price{ grid-area:controls; } }

@media (max-width:900px){
  .cart-layout{ grid-template-columns:1fr; }
  .checkout-layout{ grid-template-columns:1fr; }
}
.summary-card{ border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:26px; position:sticky; top:calc(var(--header-h) + 16px); }
@media (max-width:900px){ .summary-card{ position:static; } }
.summary-card h3{ font-size:1rem; text-transform:none; font-family:"IBM Plex Sans",sans-serif; font-weight:700; margin-bottom:18px; }
.summary-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:9px 0; border-bottom:1px solid var(--paper-line); color:var(--ink-soft); }
.summary-row.total{ color:var(--ink); font-weight:700; font-size:1.05rem; border-bottom:none; padding-top:16px; }
.promo-row{ display:flex; gap:8px; margin:16px 0; }
.promo-row input{ flex:1; border:1px solid var(--paper-line); border-radius:2px; padding:.7em .9em; font-size:.85rem; }
.promo-row--applied{ align-items:center; justify-content:space-between; background:var(--stone); border-radius:2px; padding:.6em .9em; font-size:.82rem; color:var(--ink-soft); }
.promo-row--applied b{ color:var(--ink); }
.promo-row--applied .btn-icon{ width:26px; height:26px; }
.promo-row--applied .btn-icon svg{ width:13px; height:13px; }

.empty-state{ text-align:center; padding:70px 20px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.empty-state .ico{ width:64px; height:64px; color:var(--ink-faint); }
.empty-state h3{ font-size:1.3rem; }
.empty-state p{ color:var(--ink-soft); max-width:40ch; }
.on-dark .empty-state p{ color:var(--cream-soft); }

/* =========================================================================
   CHECKOUT
   ========================================================================= */
.checkout-layout{ display:grid; grid-template-columns:1fr .42fr; gap:46px; align-items:start; }
@media (max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } }
.checkout-block{ padding:26px 0; border-bottom:1px solid var(--paper-line); }
.checkout-block:first-child{ padding-top:0; }
.checkout-block h3{ font-size:1.1rem; margin-bottom:18px; }
/* grid children default to min-width:auto — long nowrap lines in the summary pushed it off-screen */
.checkout-layout > *, .cart-layout > *{ min-width:0; }
.span-2{ grid-column:1/-1; }

.field label .opt{ text-transform:none; letter-spacing:0; opacity:.8; }
.field .hint[hidden]{ display:none; }
[data-field] .err{ display:none; font-size:.78rem; color:var(--bad); }
[data-field].has-error .err{ display:block; flex-basis:100%; margin-top:6px; }
.field.has-error textarea{ border-color:var(--bad); }
[data-field].has-error .co-card, [data-field].has-error.co-empty{ border-color:var(--bad); }
.consent-check a{ color:var(--flame); text-decoration:underline; text-underline-offset:2px; }

.co-sub{ margin-top:22px; }
.co-label{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.co-hint{ font-size:.8rem; color:var(--ink-faint); margin:10px 0 0; line-height:1.5; }
.co-hint a, .co-empty a{ color:var(--flame); white-space:nowrap; }
.co-muted{ color:var(--ink-faint); font-weight:400; }

/* selectable cards: method / zone / pickup point / payment */
.co-option{ position:relative; display:block; cursor:pointer; }
.co-option input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.co-card{
  display:flex; flex-direction:column; gap:3px; height:100%; padding:14px 16px;
  border:1px solid var(--paper-line); border-radius:var(--radius-s); background:#fff5;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.co-card b{ font-weight:600; font-size:.92rem; color:var(--ink); }
.co-option:hover .co-card{ border-color:var(--ink-faint); }
.co-option input:checked + .co-card{ border-color:var(--ink); background:#fffc; box-shadow:inset 0 0 0 1px var(--ink); }
.co-option input:focus-visible + .co-card{ outline:2px solid var(--flame); outline-offset:2px; }
.co-card-top{ display:flex; align-items:center; gap:10px; }
.co-card-sub{ font-size:.8rem; color:var(--ink-soft); line-height:1.4; }
.co-card-meta{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
.co-ico{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--stone-deep); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; }
.co-ico svg{ width:16px; height:16px; }
.co-option input:checked + .co-card .co-ico{ background:var(--flame); color:#fff; }

.co-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.co-zones, .co-pvz-list{ display:grid; gap:8px; }
.co-zone-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.co-zone-price{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink); white-space:nowrap; }
.co-pays{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-addr-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }

.radio-pill input:disabled + span{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.radio-pills .err{ width:100%; }

.co-pickup{ display:grid; gap:14px; padding:18px; border:1px solid var(--paper-line); border-radius:var(--radius-s); background:#fff5; }
.co-info{ display:flex; gap:12px; align-items:flex-start; }
.co-info b{ display:block; font-weight:600; font-size:.92rem; }
.co-info span:not(.co-ico){ display:block; font-size:.82rem; color:var(--ink-soft); }
.co-link{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--flame); }
.co-link svg{ width:12px; height:12px; }

.co-quick{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:.78rem; color:var(--ink-faint); }
.co-chip{ border:1px solid var(--paper-line); background:transparent; border-radius:999px; padding:.3em .85em; font-size:.78rem; color:var(--ink); }
.co-chip:hover{ border-color:var(--ink); }
.co-empty{ padding:18px; border:1px dashed var(--paper-line); border-radius:var(--radius-s); font-size:.86rem; color:var(--ink-soft); }

.co-free{ font-size:.8rem; color:var(--ink-soft); padding:10px 0 4px; }
.co-free-bar{ height:4px; background:var(--stone-deep); border-radius:2px; overflow:hidden; margin-top:6px; }
.co-free-bar span{ display:block; height:100%; background:var(--flame); border-radius:2px; }
.co-when{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; background:var(--stone-deep); border-radius:var(--radius-s); font-size:.8rem; color:var(--ink-soft); line-height:1.45; }
.co-when svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--ink); }

@media (max-width:640px){
  .co-methods, .co-pays{ grid-template-columns:1fr; }
  .co-addr-4{ grid-template-columns:1fr 1fr; }
}
.mini-line{ display:flex; justify-content:space-between; gap:14px; font-size:.86rem; padding:8px 0; border-bottom:1px dashed var(--paper-line); color:var(--ink-soft); }
.mini-line span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-line span:last-child{ flex:none; color:var(--ink); font-weight:600; }

/* =========================================================================
   ACCOUNT
   ========================================================================= */
.account-layout{ display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:start; }
.account-nav{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--paper-line); border-radius:var(--radius-m); overflow:hidden; }
.account-nav a{ display:flex; align-items:center; gap:10px; padding:14px 16px; font-size:.9rem; border-bottom:1px solid var(--paper-line); color:var(--ink-soft); }
.account-nav a:last-child{ border-bottom:none; }
.account-nav a svg{ width:16px; height:16px; }
.account-nav a:hover{ background:var(--stone-deep); color:var(--ink); }
.account-nav a.is-active{ background:var(--ink); color:var(--stone); }
.account-user{ padding:18px 16px; border-bottom:1px solid var(--paper-line); display:flex; align-items:center; gap:12px; }
.account-user .av{ width:40px; height:40px; border-radius:50%; background:var(--flame); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Big Shoulders Display",sans-serif; font-weight:800; }
.account-user strong{ display:block; font-size:.9rem; }
.account-user span{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
@media (max-width:900px){ .account-layout{ grid-template-columns:1fr; } .account-nav{ flex-direction:row; flex-wrap:wrap; } .account-nav a{ border-bottom:none; border-right:1px solid var(--paper-line); flex:1 1 auto; justify-content:center; } }

.order-card{ border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:20px 22px; margin-bottom:16px; }
.order-card .oc-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.order-card .oc-num{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-faint); }
.order-card .oc-items{ display:flex; gap:8px; margin-bottom:14px; }
.order-card .oc-items .bag{ width:46px; aspect-ratio:3/4; }
.order-card .oc-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.order-card .oc-total{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.1rem; }

.status-track{ display:flex; margin:30px 0 40px; }
.status-track .st{ flex:1; text-align:center; position:relative; }
.status-track .st::before{ content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:var(--paper-line); z-index:0; }
.status-track .st:first-child::before{ display:none; }
.status-track .st.is-done::before{ background:var(--flame); }
.status-track .dot{ width:30px; height:30px; border-radius:50%; background:var(--stone); border:2px solid var(--paper-line); margin:0 auto 10px; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.status-track .st.is-done .dot{ background:var(--flame); border-color:var(--flame); }
.status-track .st.is-done .dot svg{ width:14px; height:14px; color:#fff; }
.status-track .lbl{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.status-track .st.is-done .lbl{ color:var(--ink); }
@media (max-width:640px){ .status-track{ flex-direction:column; gap:18px; align-items:flex-start; } .status-track .st{ display:flex; align-items:center; gap:12px; text-align:left; } .status-track .st::before{ display:none; } .status-track .dot{ margin:0; } }

/* =========================================================================
   SEARCH / 404
   ========================================================================= */
.result-page-hero{ padding:38px 0 20px; }
.notfound{ text-align:center; padding:clamp(60px,10vw,120px) 20px; }
.notfound .code{ font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:clamp(5rem,18vw,11rem); line-height:.85; color:var(--flame); }
.notfound h2{ margin-top:10px; font-size:1.6rem; }
.notfound p{ margin-top:14px; color:var(--ink-soft); max-width:44ch; margin-left:auto; margin-right:auto; }
.notfound .actions{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================================
   MODALS / TOASTS
   ========================================================================= */
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,11,7,.65); z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.is-open{ display:flex; }
.modal-card{ background:var(--stone); border-radius:var(--radius-l); max-width:440px; width:100%; padding:36px 32px; position:relative; box-shadow:var(--shadow-lg); text-align:center; }
.modal-close{ position:absolute; top:16px; right:16px; }
.modal-card .ico-ok{ width:60px; height:60px; border-radius:50%; background:var(--good-tint); color:var(--good); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.modal-card .ico-ok svg{ width:28px; height:28px; }
.modal-card h3{ font-size:1.4rem; }
.modal-card p{ margin-top:12px; color:var(--ink-soft); font-size:.92rem; }
.modal-card .m-actions{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.toast-stack{ position:fixed; top:calc(var(--header-h) + 74px); right:20px; z-index:280; display:flex; flex-direction:column; gap:12px; width:min(340px,calc(100vw - 40px)); }
.toast{ background:var(--espresso-2); color:var(--cream); border-radius:var(--radius-m); padding:16px 18px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow-lg); animation:toastIn .25s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.toast .bag{ width:44px; aspect-ratio:3/4; flex:none; }
.toast .t-ico{ width:38px; height:38px; border-radius:50%; background:var(--good-tint); color:var(--good); display:flex; align-items:center; justify-content:center; flex:none; }
.toast .t-ico svg{ width:18px; height:18px; }
.toast .t-body{ flex:1; }
.toast .t-title{ font-weight:600; font-size:.88rem; }
.toast .t-sub{ font-size:.78rem; color:var(--cream-soft); margin-top:2px; }
.toast .t-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.toast .t-actions a, .toast .t-actions button{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; }
.toast .t-actions .btn{ padding:.5em .8em; }
.toast .t-close{ background:none; border:none; color:var(--cream-soft); flex:none; }
.toast .t-close svg{ width:14px; height:14px; }

/* =========================================================================
   MISC
   ========================================================================= */
.divider{ height:1px; background:var(--paper-line); margin:40px 0; }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:800px){ .contact-info-grid{ grid-template-columns:1fr; } }
.contact-tile{ border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:24px; }
.contact-tile .ico{ color:var(--flame); margin-bottom:14px; }
.contact-tile .ico svg{ width:24px; height:24px; }
.contact-tile h4{ font-family:"IBM Plex Sans",sans-serif; font-weight:700; font-size:.95rem; text-transform:none; margin-bottom:6px; }
.contact-tile p{ color:var(--ink-soft); font-size:.9rem; }
.map-panel{ margin-top:40px; border:1px solid var(--paper-line); border-radius:var(--radius-m); overflow:hidden; }
.map-frame{ width:100%; height:360px; background:linear-gradient(160deg,var(--stone-deep),var(--stone)); position:relative; }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.map-cap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 20px; font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-faint); border-top:1px solid var(--paper-line); }
.map-cap a{ color:var(--flame); font-weight:500; text-transform:uppercase; display:flex; gap:6px; align-items:center; }
.map-cap a svg{ width:12px; height:12px; }

.school-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.school-badge{ aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 30% 25%, #2c2116, var(--espresso) 70%); display:flex; align-items:center; justify-content:center; position:relative; border:1px dashed var(--cream-soft); }
.school-badge .txt{ text-align:center; color:var(--cream); font-family:"Big Shoulders Display",sans-serif; }
.school-badge .txt .line1{ font-size:.7rem; letter-spacing:.2em; font-family:"IBM Plex Mono",monospace; color:var(--brass); display:block; margin-bottom:10px; }
.school-badge .txt .line2{ font-size:1.8rem; font-weight:800; display:block; }
.school-badge svg.cup{ width:44px; height:44px; margin:0 auto 12px; color:var(--flame); }
.prog-list{ margin-top:20px; display:grid; gap:12px; }
.prog-list li{ display:flex; gap:14px; align-items:flex-start; font-size:.93rem; }
.prog-list svg{ width:16px; height:16px; color:var(--flame); flex:none; margin-top:3px; }
@media (max-width:900px){ .school-grid{ grid-template-columns:1fr; } .school-badge{ max-width:220px; margin:0 auto; } }

.news-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.news-card{ border-top:2px solid var(--flame); padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.news-tag{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.news-card h3{ font-family:"IBM Plex Sans",sans-serif; font-weight:700; text-transform:none; letter-spacing:0; font-size:1.05rem; line-height:1.3; }
.news-card .rd{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--flame); font-weight:600; }
.news-card .rd svg{ width:12px; height:12px; }
.news-card .n-date{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint); }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .news-grid{ grid-template-columns:1fr; } }

.news-grid--page .news-card{ border:1px solid var(--paper-line); border-top:2px solid var(--flame); border-radius:var(--radius-m); padding:20px; background:var(--cream); }

.whs-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px; }
.whs-step{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:20px; }
.whs-step .n{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.3rem; color:var(--flame); flex:none; width:1.4em; }
.whs-step p{ font-size:.9rem; color:var(--ink-soft); }
.whs-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.whs-tier{ padding:22px 20px; border-radius:var(--radius-m); background:var(--espresso); color:var(--cream); }
.whs-tier .ico{ width:26px; height:26px; color:var(--flame); margin-bottom:14px; }
.whs-tier .vol{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.3rem; }
.whs-tier p{ margin-top:8px; font-size:.86rem; color:var(--cream-soft); }
.whs-form-wrap{ margin-top:56px; max-width:640px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .whs-steps{ grid-template-columns:1fr; } .whs-tiers{ grid-template-columns:1fr; } }

.vac-card{ border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:24px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:14px; flex-wrap:wrap; transition:border-color .2s ease; }
.vac-card:hover{ border-color:var(--flame); }
.vac-card h3{ font-family:"IBM Plex Sans",sans-serif; font-weight:700; text-transform:none; font-size:1.08rem; }
.vac-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink-faint); }
.vac-salary{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.1rem; white-space:nowrap; }

.article-body{ max-width:74ch; }
.article-meta{ display:flex; gap:16px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.share-row{ display:flex; gap:10px; margin-top:36px; padding-top:24px; border-top:1px solid var(--paper-line); align-items:center; }