/* ============================================================
   VIRGIN BEANS — brand system per official Graphic Charter v1.0
   Palette: raw coffee green -> roasted brown -> ivory, ochre accent.
   Type: Newsreader (display) + Plus Jakarta Sans (UI) + Noto Naskh Arabic.
   ============================================================ */
:root{
  --raw-coffee:#66704A;
  --deep-raw:#465038;
  --roasted:#4A2F25;
  --espresso:#241713;
  --ivory:#EFE7D7;
  --ivory-dim:#e6dcc6;
  --ochre:#A86F3D;
  --ochre-light:#c28a54;
  --burgundy:#551B2C;
  --ink-line: rgba(36,23,19,.14);
  --ink-line-strong: rgba(36,23,19,.28);
  --cream-line: rgba(239,231,215,.16);
  --cream-line-strong: rgba(239,231,215,.3);

  --font-display:'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-ui:'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-arabic:'Noto Naskh Arabic', serif;

  --container:1240px;
  --edge: clamp(20px, 5vw, 64px);
  --radius-s:4px;
  --radius-m:8px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ivory); color:var(--espresso);
  font-family:var(--font-ui); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
img,svg{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:2px solid var(--ochre); outline-offset:2px; border-radius:2px;}
.container{max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge);}
.hairline{height:1px; background:var(--ink-line); border:0; margin:0;}
.hairline.on-dark{background:var(--cream-line);}
.eyebrow{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ochre);}
.on-dark .eyebrow{color:var(--ochre-light);}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* dark section wrapper */
.on-dark{background:var(--espresso); color:var(--ivory);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--ivory);}
.bg-raw{background:var(--deep-raw); color:var(--ivory);}
.bg-raw h1,.bg-raw h2,.bg-raw h3{color:var(--ivory);}
.bg-ivory-dim{background:var(--ivory-dim);}

/* buttons */
.btn{font-family:var(--font-ui); font-weight:700; font-size:13.5px; letter-spacing:.02em; padding:14px 24px; border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--burgundy); color:var(--ivory); border-color:var(--burgundy);}
.btn-primary:hover{background:#6b2436; border-color:#6b2436;}
.btn-outline{background:transparent; color:var(--ivory); border-color:rgba(239,231,215,.6);}
.btn-outline:hover{border-color:var(--ivory); background:rgba(239,231,215,.08);}
.btn-ghost{background:transparent; color:var(--espresso); border-color:var(--ink-line-strong);}
.btn-ghost:hover{border-color:var(--espresso);}
.on-dark .btn-ghost{color:var(--ivory); border-color:var(--cream-line-strong);}
.on-dark .btn-ghost:hover{border-color:var(--ivory);}
.btn-dark{background:var(--espresso); color:var(--ivory); border-color:var(--espresso);}
.btn-dark:hover{background:var(--deep-raw); border-color:var(--deep-raw);}
.btn-block{width:100%;}
.btn-sm{padding:10px 16px; font-size:12.5px;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.btn-icon{background:transparent; border:0; color:currentColor; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:var(--radius-s);}
.btn-icon:hover{background:var(--ink-line);}
.on-dark .btn-icon:hover{background:var(--cream-line);}

/* logo */
.logo-mark{flex:none;}
.logo-lockup{display:flex; align-items:center; gap:10px;}
.logo-word{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:.01em; line-height:1;}
.logo-tag{display:block; font-family:var(--font-ui); font-size:8.5px; font-weight:700; letter-spacing:.22em; color:var(--ochre); margin-top:2px;}

/* announcement bar */
.announce{background:var(--raw-coffee); color:var(--ivory); font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.04em; display:flex; align-items:center; justify-content:center; gap:36px; padding:9px var(--edge); text-align:center; flex-wrap:wrap;}
.announce span{display:inline-flex; align-items:center; gap:7px; opacity:.95;}
.announce svg{flex:none; opacity:.8;}
@media (max-width:700px){ .announce span:nth-child(2){display:none;} }
@media (max-width:480px){ .announce span:nth-child(3){display:none;} }

/* header — light theme */
.site-header{position:sticky; top:0; z-index:40; background:rgba(239,231,215,.96); backdrop-filter:blur(10px); color:var(--espresso); border-bottom:1px solid var(--ink-line);}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--edge);}
.brand{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; color:var(--espresso);}
.logo-word{color:var(--espresso);}
.main-nav{display:flex; align-items:center; gap:24px; font-family:var(--font-ui); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;}
.main-nav > button, .main-nav > .nav-drop > button{background:none; border:0; color:var(--roasted); cursor:pointer; padding:8px 0; display:inline-flex; align-items:center; gap:3px;}
.main-nav button:hover{color:var(--espresso);}
.main-nav button.is-active{color:var(--burgundy);}
.main-nav .care{font-size:9px; opacity:.6;}
.nav-drop{position:relative;}
.nav-drop-panel{position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--ink-line); border-radius:var(--radius-m); box-shadow:0 20px 40px rgba(36,23,19,.15); padding:8px; min-width:190px; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(4px); transition:opacity .15s ease, transform .15s ease; z-index:50;}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-drop-panel button{text-transform:none; font-weight:600; letter-spacing:0; padding:9px 12px !important; border-radius:var(--radius-s); text-align:left; color:var(--roasted) !important;}
.nav-drop-panel button:hover{background:var(--ivory-dim); color:var(--espresso) !important;}
.header-actions{display:flex; align-items:center; gap:2px;}
.lang-switch{display:flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:11.5px; font-weight:700; color:var(--roasted); padding:0 6px;}
.lang-switch button{background:none; border:0; color:inherit; cursor:pointer; padding:2px; opacity:.55;}
.lang-switch button.is-active{opacity:1; color:var(--espresso);}
.lang-switch span{opacity:.35;}
.header-divider{width:1px; height:18px; background:var(--ink-line-strong); margin:0 6px;}
.icon-btn{position:relative; background:none; border:0; color:var(--espresso); cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:9px; font-family:var(--font-ui); font-size:13px; font-weight:600; border-radius:var(--radius-s);}
.icon-btn:hover{background:var(--ink-line);}
.bag-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; background:var(--burgundy); color:var(--ivory); border-radius:999px; font-size:10px; font-weight:800; position:absolute; top:2px; right:2px;}
.hide-mobile{display:inline-flex;}
.show-mobile{display:none; background:none; border:0; color:var(--espresso); cursor:pointer; padding:8px;}
@media (max-width:980px){ .main-nav{display:none;} .hide-mobile{display:none;} .show-mobile{display:inline-flex;} }

/* bottom delivery bar */
.delivery-bar{background:var(--burgundy); color:rgba(239,231,215,.92);}
.delivery-bar-inner{display:flex; flex-wrap:wrap; justify-content:center; gap:28px; padding:13px var(--edge); font-family:var(--font-ui); font-size:11.5px; font-weight:700;}
.delivery-bar-inner span{display:inline-flex; align-items:center; gap:7px;}
.delivery-bar-inner svg{opacity:.85;}

/* mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:70; visibility:hidden;}
.mobile-menu.is-open{visibility:visible;}
.mobile-menu .scrim{position:absolute; inset:0; background:rgba(36,23,19,.55); opacity:0; transition:opacity .25s ease;}
.mobile-menu.is-open .scrim{opacity:1;}
.mobile-menu .panel{position:absolute; top:0; right:0; height:100%; width:min(360px,88vw); background:var(--espresso); color:var(--ivory); padding:20px 26px 32px; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; overflow-y:auto;}
.mobile-menu.is-open .panel{transform:translateX(0);}
.mobile-menu .panel-top{display:flex; justify-content:flex-end; padding-bottom:14px;}
.mobile-menu button.menu-link{text-align:left; background:none; border:0; color:var(--ivory); font-family:var(--font-display); font-size:25px; font-weight:500; padding:14px 2px; cursor:pointer; border-bottom:1px solid var(--cream-line);}
.mobile-menu .menu-foot{margin-top:auto; padding-top:20px; font-family:var(--font-ui); font-size:11.5px; color:rgba(239,231,215,.6); display:flex; flex-direction:column; gap:10px;}

/* hero — full-bleed real city photography, a frosted glass card for copy */
.hero{position:relative; overflow:hidden; height:min(74vh,620px); min-height:440px; color:var(--ivory);}
.hero-backdrop{position:absolute; inset:0; overflow:hidden;}
.hero-backdrop img, .hero-backdrop video{width:100%; height:100%; object-fit:cover;}
.hero-backdrop::before{content:'';position:absolute; inset:0; background:linear-gradient(100deg, rgba(24,16,12,.82) 0%, rgba(24,16,12,.62) 30%, rgba(24,16,12,.12) 58%, transparent 72%);}
.hero-glass{
  position:absolute; left:var(--edge); top:15%; z-index:3; max-width:460px; width:calc(100% - var(--edge)*2);
  display:flex; flex-direction:column; gap:15px;
}
.hero-title{font-size:clamp(32px,4.6vw,48px); line-height:1.05; letter-spacing:-.01em; color:var(--ivory); text-shadow:0 2px 18px rgba(0,0,0,.35);}
.hero-desc{font-size:15px; color:rgba(239,231,215,.92); line-height:1.55; text-shadow:0 1px 10px rgba(0,0,0,.3);}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px;}
.hero-nav{position:absolute; left:var(--edge); bottom:30px; z-index:3; display:flex; align-items:center; gap:12px;}
.hero-nav .btn-icon{border:1px solid var(--cream-line-strong); border-radius:50%; width:34px; height:34px; background:rgba(36,23,19,.35);}
.hero-dots{display:flex; gap:6px;}
.hero-dots button{width:6px; height:6px; border-radius:50%; background:rgba(239,231,215,.35); border:0; padding:0; cursor:pointer;}
.hero-dots button.is-active{background:var(--ochre-light); width:18px; border-radius:4px;}
@media (max-width:640px){
  .hero{height:80vh;}
  .hero-backdrop::before{background:linear-gradient(180deg, rgba(24,16,12,.78) 0%, rgba(24,16,12,.55) 34%, transparent 62%);}
  .hero-glass{top:var(--edge); bottom:auto; left:var(--edge); right:var(--edge); max-width:none; width:auto;}
}

/* sections */
.section{padding:88px 0;}
.section-tight{padding:60px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3.4vw,42px); line-height:1.08;}
.section-lede{max-width:54ch; color:var(--roasted); font-size:16px; line-height:1.6; margin-top:12px;}
.on-dark .section-lede{color:rgba(239,231,215,.8);}

/* trust strip */
.trust-strip{display:flex; flex-wrap:wrap; gap:30px; justify-content:center; padding:22px var(--edge); font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--ivory);}
.trust-strip li{list-style:none; display:flex; align-items:center; gap:8px;}
.trust-strip svg{color:var(--ochre-light); flex:none;}

/* home: intro strip */
.intro-strip{background:var(--ivory);}
.intro-strip-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:36px; flex-wrap:wrap;}
.intro-strip-copy h2{font-size:clamp(22px,2.6vw,32px); line-height:1.12; max-width:11ch;}
.accent-stroke{width:64px; height:3px; background:var(--ochre); border-radius:2px; margin-top:14px;}
.intro-strip-lede{max-width:36ch; color:var(--roasted); font-size:14px; line-height:1.6; flex:1; min-width:220px;}
.intro-bullets{display:flex; gap:24px; flex-wrap:wrap;}
.intro-bullet{display:flex; align-items:center; gap:9px; font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--espresso); max-width:118px;}
.intro-bullet svg{color:var(--raw-coffee); flex:none;}
.link-arrow{background:none; border:0; cursor:pointer; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--burgundy); padding:0;}
.link-arrow:hover{text-decoration:underline;}

/* home: city box banner */
/* ---- City Box subscription banner (redesigned) ---- */
.citybox-banner{
  position:relative; overflow:hidden; color:var(--ivory); padding:64px 0;
  background:
    radial-gradient(120% 140% at 12% 0%, #5a6642 0%, rgba(90,102,66,0) 55%),
    radial-gradient(120% 160% at 100% 100%, #3a4230 0%, rgba(58,66,48,0) 60%),
    var(--deep-raw);
}
/* faint bean-dot texture */
.citybox-banner::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:radial-gradient(circle, var(--ivory) 1.5px, transparent 1.6px);
  background-size:26px 26px;
}
.citybox-inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(280px,0.85fr) 1fr; gap:56px; align-items:center;}

.citybox-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:260px;}
.citybox-fan{display:flex; justify-content:center; align-items:flex-end;}
.citybox-poster{
  width:92px; height:auto; border-radius:7px; margin-left:-52px; transform-origin:bottom center;
  box-shadow:0 14px 32px rgba(0,0,0,.4); border:2px solid rgba(239,231,215,.55);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.citybox-poster:first-child{margin-left:0;}
/* the auto-cycling "shuffle": lift the active edition clear of the deck */
.citybox-poster.is-up{
  transform:translateY(-32px) rotate(0deg) scale(1.16) !important;
  z-index:60 !important;
  box-shadow:0 28px 50px rgba(0,0,0,.55);
  border-color:var(--ochre-light);
}
@media (max-width:520px){.citybox-poster{width:72px; margin-left:-46px;}}
.citybox-save{
  position:absolute; top:6px; right:8%; z-index:2; background:var(--ochre); color:#fff;
  font-family:var(--font-ui); font-size:13px; font-weight:800; letter-spacing:.02em;
  width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.35); transform:rotate(8deg);
}

.citybox-content{min-width:0;}
.citybox-eyebrow{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-light); margin-bottom:14px;}
.citybox-eyebrow svg{color:var(--ochre-light);}
.citybox-content h2{color:var(--ivory); font-size:clamp(28px,3.2vw,42px); line-height:1.08; letter-spacing:-.01em;}
.citybox-lede{color:rgba(239,231,215,.85); font-size:15px; line-height:1.6; margin:16px 0 22px; max-width:52ch;}
.citybox-perks{display:grid; grid-template-columns:repeat(3,auto); gap:14px 28px; justify-content:start; margin-bottom:26px;}
.citybox-perk{display:flex; align-items:center; gap:9px; font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ivory);}
.citybox-perk svg{color:var(--ochre-light); flex:none;}
.citybox-actions{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.citybox-cta{background:var(--ivory); color:var(--espresso); border-color:var(--ivory); padding:15px 28px;}
.citybox-cta:hover{background:#fff; border-color:#fff;}
.citybox-note{font-family:var(--font-ui); font-size:12px; color:rgba(239,231,215,.7);}
@media (max-width:900px){
  .citybox-inner{grid-template-columns:1fr; gap:38px;}
  .citybox-perks{grid-template-columns:repeat(2,auto);}
}
@media (max-width:520px){
  .citybox-poster{width:92px; margin-left:-28px;}
  .citybox-perks{grid-template-columns:1fr;}
}

/* home: feature tiles */
.feature-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.feature-tile-media{aspect-ratio:4/3; border-radius:var(--radius-m); overflow:hidden; margin-bottom:16px; background:var(--ivory-dim);}
.feature-tile-media img{width:100%; height:100%; object-fit:cover;}
.feature-tile h4{font-size:16.5px; margin-bottom:8px; display:flex; align-items:center; gap:7px;}
.feature-tile p{color:var(--roasted); font-size:13.5px; margin-bottom:12px; line-height:1.5;}
@media (max-width:820px){.feature-tiles{grid-template-columns:1fr; gap:36px;}}

/* four-bean roast legend */
.bean-legend{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start;}
.bean-legend-item{display:flex; flex-direction:column; align-items:center; gap:8px; width:96px; text-align:center; background:none; border:0; cursor:pointer; padding:6px; border-radius:var(--radius-m); font-family:var(--font-ui);}
.bean-legend-item:hover, .bean-legend-item.is-active{background:var(--ink-line);}
.on-dark .bean-legend-item:hover, .on-dark .bean-legend-item.is-active{background:var(--cream-line);}
.bean-legend-item svg{width:34px; height:44px;}
.bean-legend-item b{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;}
.bean-legend-item span{font-size:11px; color:var(--roasted); opacity:.75;}
.on-dark .bean-legend-item span{color:var(--ivory);}

/* product grid + card */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr); gap:20px 16px;}}
@media (max-width:520px){.grid{grid-template-columns:1fr;}}
.card{background:#fff; border:1px solid var(--ink-line); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.card:hover{border-color:var(--ink-line-strong); transform:translateY(-3px); box-shadow:0 16px 34px rgba(36,23,19,.14);}
.card-media{position:relative; aspect-ratio:4/5; background:var(--espresso); overflow:hidden; cursor:pointer;}
.card-media svg{width:100%; height:100%;}
.card-media img{width:100%; height:100%; object-fit:contain; padding:10px;}
.card-quickadd{position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%; background:var(--ivory); color:var(--espresso); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; box-shadow:0 8px 20px rgba(0,0,0,.3);}
.card:hover .card-quickadd, .card-quickadd:focus-visible{opacity:1; transform:translateY(0);}
.card-stock{position:absolute; left:10px; top:10px; background:rgba(36,23,19,.82); color:var(--ochre-light); font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px;}
.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card-meta{font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ochre);}
.card-name{font-size:21px;}
.card-name button{background:none; border:0; padding:0; font:inherit; color:var(--espresso); cursor:pointer; text-align:left;}
.card-name button:hover{color:var(--ochre);}
.card-notes{color:var(--roasted); font-size:14px;}
.card-rating{display:flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:11.5px; color:var(--roasted); opacity:.8;}
.stars{color:var(--ochre); letter-spacing:1px; font-size:12.5px;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px;}
.card-price{font-family:var(--font-display); font-size:18px; color:var(--espresso); font-weight:600;}
.card-cta{font-family:var(--font-ui); font-size:12.5px; font-weight:700; color:var(--ochre); background:none; border:0; cursor:pointer;}
.card-cta:hover{text-decoration:underline;}

/* product configurator card (shop grid + home teaser) */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.product-grid{grid-template-columns:1fr;}}
.product-card{background:#fff; border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:18px; display:flex; flex-direction:column; gap:14px; transition:box-shadow .2s ease, border-color .2s ease;}
.product-card:hover{border-color:var(--ink-line-strong); box-shadow:0 16px 34px rgba(36,23,19,.1);}
.pc-top{display:flex; gap:14px;}
.pc-media{flex:none; width:92px; height:118px; background:var(--espresso); border-radius:var(--radius-s); overflow:hidden; cursor:pointer;}
.pc-media img{width:100%; height:100%; object-fit:contain; padding:6px;}
.pc-info{display:flex; flex-direction:column; gap:4px; justify-content:center; min-width:0;}
.pc-name{font-size:19px; letter-spacing:.01em;}
.pc-name button{background:none; border:0; padding:0; font:inherit; text-transform:uppercase; color:var(--espresso); cursor:pointer; text-align:left;}
.pc-name button:hover{color:var(--burgundy);}
.pc-notes{color:var(--roasted); font-size:13.5px;}
.pc-section{border-top:1px solid var(--ink-line); padding-top:12px;}
.pc-label{font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--roasted); opacity:.6; margin-bottom:8px;}
.pc-roast-row{display:flex; gap:6px;}
.pc-roast-pill{flex:1; text-align:center; font-family:var(--font-ui); font-size:10.5px; font-weight:700; padding:7px 4px; border-radius:var(--radius-s); background:var(--ivory-dim); color:var(--roasted); opacity:.55;}
.pc-roast-pill.is-active{background:var(--raw-coffee); color:var(--ivory); opacity:1;}
.pc-brew-row{display:flex; gap:16px;}
.pc-brew-icon{color:var(--roasted); opacity:.55;}
.pc-pill-row{display:flex; gap:8px; flex-wrap:wrap;}
.pc-pill{font-family:var(--font-ui); font-size:12px; font-weight:700; padding:8px 12px; border-radius:var(--radius-s); border:1px solid var(--ink-line-strong); background:#fff; color:var(--roasted); cursor:pointer;}
.pc-pill:hover{border-color:var(--espresso);}
.pc-pill.is-active{background:var(--raw-coffee); border-color:var(--raw-coffee); color:var(--ivory);}
.pc-hint{font-family:var(--font-ui); font-size:11px; color:var(--burgundy); margin-top:7px; display:flex; align-items:center; gap:5px;}
.pc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--ink-line); padding-top:14px;}
.pc-price{font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--espresso); display:block;}
.pc-tax{font-family:var(--font-ui); font-size:10.5px; color:var(--roasted); opacity:.6; display:block;}
.pc-stock{display:block; font-family:var(--font-ui); font-size:10.5px; font-weight:700; color:var(--burgundy); margin-top:2px;}

/* filter bar */
.filter-bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--ink-line);}
.search-field{position:relative; flex:1; min-width:220px;}
.search-field input{width:100%; background:#fff; border:1px solid var(--ink-line-strong); color:var(--espresso); font-family:var(--font-ui); font-size:14.5px; padding:11px 16px 11px 38px; border-radius:var(--radius-s);}
.search-field svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--roasted); opacity:.6;}
.pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.pill{font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.02em; padding:9px 14px; border-radius:999px; border:1px solid var(--ink-line-strong); background:transparent; color:var(--roasted); cursor:pointer;}
.pill:hover{border-color:var(--espresso);}
.pill.is-active{background:var(--espresso); border-color:var(--espresso); color:var(--ivory);}
.select-field select{background:#fff; border:1px solid var(--ink-line-strong); color:var(--espresso); font-family:var(--font-ui); font-size:12.5px; font-weight:600; padding:10px 32px 10px 13px; border-radius:var(--radius-s); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A2F25'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; cursor:pointer;}
.result-count{font-family:var(--font-ui); font-size:12px; color:var(--roasted); opacity:.7; margin-left:auto;}
.empty-state{padding:64px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.empty-state p{color:var(--roasted); max-width:40ch;}

/* PDP */
.breadcrumbs{display:flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:12px; color:var(--roasted); opacity:.75; padding:20px 0 0;}
.breadcrumbs button{background:none; border:0; color:inherit; cursor:pointer; font:inherit; padding:0;}
.breadcrumbs button:hover{color:var(--ochre);}
.pdp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; padding:30px 0 20px; align-items:flex-start;}
@media (max-width:900px){.pdp-grid{grid-template-columns:1fr; gap:30px;}}
.pdp-media{position:sticky; top:88px; border-radius:var(--radius-m); overflow:hidden; background:var(--espresso);}
.pdp-media svg{width:100%; aspect-ratio:4/5;}
.pdp-media img{width:100%; aspect-ratio:4/5; object-fit:contain; padding:24px;}
@media (max-width:900px){.pdp-media{position:static;}}
.pdp-info{display:flex; flex-direction:column; gap:20px;}
.pdp-title{font-size:clamp(30px,3.8vw,44px); line-height:1.03;}
.pdp-title-ar{font-family:var(--font-arabic); color:var(--roasted); opacity:.7; font-size:18px;}
.pdp-desc{color:var(--roasted); font-size:15.5px; line-height:1.6;}
.opt-group{display:flex; flex-direction:column; gap:9px;}
.opt-label{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--roasted); opacity:.7;}
.opt-row{display:flex; flex-wrap:wrap; gap:9px;}
.opt-btn{font-family:var(--font-ui); font-size:13px; font-weight:700; padding:10px 15px; border-radius:var(--radius-s); border:1px solid var(--ink-line-strong); background:#fff; color:var(--roasted); cursor:pointer;}
.opt-btn:hover{border-color:var(--espresso);}
.opt-btn.is-active{border-color:var(--ochre); background:rgba(168,111,61,.1); color:var(--espresso);}
.qty-stepper{display:inline-flex; align-items:center; border:1px solid var(--ink-line-strong); border-radius:var(--radius-s); overflow:hidden;}
.qty-stepper button{width:36px; height:40px; background:#fff; border:0; color:var(--espresso); font-size:15px; cursor:pointer;}
.qty-stepper button:hover{background:var(--ivory-dim);}
.qty-stepper span{width:36px; text-align:center; font-family:var(--font-ui); font-weight:700;}
.pdp-buybox{border:1px solid var(--ink-line); background:#fff; border-radius:var(--radius-m); padding:20px; display:flex; flex-direction:column; gap:15px;}
.pdp-price-row{display:flex; align-items:baseline; justify-content:space-between;}
.pdp-price{font-family:var(--font-display); font-size:26px; color:var(--espresso); font-weight:600;}
.pdp-price-vat{font-family:var(--font-ui); font-size:11px; color:var(--roasted); opacity:.6;}
.add-row{display:flex; gap:10px;}
.mini-facts{display:grid; grid-template-columns:1fr 1fr; gap:13px 16px; padding-top:4px;}
.mini-fact{display:flex; align-items:flex-start; gap:8px;}
.mini-fact svg{color:var(--ochre); flex:none; margin-top:1px;}
.mini-fact dt{font-family:var(--font-ui); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--roasted); opacity:.65; margin-bottom:2px;}
.mini-fact dd{margin:0; font-size:13px; color:var(--espresso); font-weight:600;}
.accordion{border-top:1px solid var(--ink-line);}
.accordion-item{border-bottom:1px solid var(--ink-line);}
.accordion-item button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; background:none; border:0; cursor:pointer; padding:17px 2px; text-align:left; font-family:var(--font-display); font-size:16.5px; color:var(--espresso);}
.accordion-item .chev{transition:transform .2s ease; color:var(--roasted); opacity:.6; flex:none;}
.accordion-item.is-open .chev{transform:rotate(45deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.accordion-panel-inner{padding:0 2px 19px; color:var(--roasted); font-size:14.5px; line-height:1.6;}
.sticky-buy{position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--espresso); color:var(--ivory); padding:12px var(--edge); display:none; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -10px 30px rgba(0,0,0,.25);}
.sticky-buy.is-visible{display:flex;}
.sticky-buy strong{font-family:var(--font-display); font-size:16px;}
@media (min-width:901px){.sticky-buy{display:none !important;}}

/* reviews */
.reviews-summary{display:flex; align-items:center; gap:18px; padding:24px 0;}
.reviews-score{font-family:var(--font-display); font-size:40px; color:var(--espresso); font-weight:700;}
.review{padding:20px 0; border-top:1px solid var(--ink-line); display:flex; flex-direction:column; gap:6px;}
.review-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-ui); font-size:12px; color:var(--roasted); opacity:.7;}
.review-name{color:var(--espresso); font-weight:700; opacity:1;}
.review-body{color:var(--roasted); font-size:14.5px; line-height:1.6;}
.review-form{display:flex; flex-direction:column; gap:12px; margin-top:20px; padding:20px; background:var(--ivory-dim); border-radius:var(--radius-m);}

/* upsell */
.upsell-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){.upsell-grid{grid-template-columns:repeat(2,1fr);}}
.upsell-card{border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:15px; display:flex; gap:13px; align-items:center; background:#fff;}
.upsell-thumb{width:52px; height:52px; border-radius:var(--radius-s); background:var(--espresso); flex:none; overflow:hidden;}
.upsell-thumb svg{width:100%;height:100%;}
.upsell-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.upsell-info{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
.upsell-info b{color:var(--espresso); font-size:13.5px; font-weight:700;}
.upsell-info span{font-family:var(--font-ui); font-size:11.5px; color:var(--roasted); opacity:.7;}
.upsell-add{background:none; border:1px solid var(--ink-line-strong); border-radius:50%; width:29px; height:29px; color:var(--espresso); cursor:pointer; flex:none;}
.upsell-add:hover{border-color:var(--ochre); color:var(--ochre);}

/* city rail */
.city-rail{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;}
.city-chip{flex:none; width:126px; border-radius:var(--radius-m); overflow:hidden; background:var(--espresso); cursor:pointer; text-align:left; border:1px solid var(--ink-line);}
.city-chip svg{width:100%; aspect-ratio:4/5;}
.city-chip img{width:100%; aspect-ratio:4/5; object-fit:contain; padding:6px;}
.city-chip .cc-label{padding:9px 10px; font-family:var(--font-ui); font-size:11.5px; font-weight:700; color:var(--espresso); background:#fff;}

/* build-your-five */
.box-wrap{display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:flex-start;}
@media (max-width:960px){.box-wrap{grid-template-columns:1fr;}}
.slot-row{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.slot{width:54px; height:68px; border-radius:var(--radius-s); border:1.5px dashed var(--ink-line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); color:var(--roasted); opacity:.6; font-size:11px; position:relative; overflow:hidden;}
.slot.is-filled{border-style:solid; border-color:var(--ochre); opacity:1;}
.slot.is-filled svg{position:absolute; inset:0; width:100%; height:100%;}
.slot.is-filled img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2px;}
.slot-remove{position:absolute; top:0; right:0; width:20px; height:20px; background:rgba(36,23,19,.85); border-radius:50%; border:0; color:var(--ivory); font-size:10px; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center;}
.box-progress{font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--roasted); margin-bottom:6px;}
.freq-row{display:flex; gap:9px; flex-wrap:wrap;}
.box-pick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:24px;}
@media (max-width:640px){.box-pick-grid{grid-template-columns:repeat(2,1fr);}}
.box-pick{border:1px solid var(--ink-line); border-radius:var(--radius-m); overflow:hidden; background:#fff; cursor:pointer; text-align:left;}
.box-pick svg{width:100%; aspect-ratio:4/5;}
.box-pick img{width:100%; aspect-ratio:4/5; object-fit:contain; padding:6px;}
.box-pick .bp-body{padding:9px 11px;}
.box-pick .bp-body b{font-size:13.5px; color:var(--espresso); display:block;}
.box-pick .bp-body span{font-family:var(--font-ui); font-size:11px; color:var(--roasted); opacity:.7;}
.box-pick.is-picked{border-color:var(--ochre); box-shadow:0 0 0 1px var(--ochre) inset;}
.box-pick:disabled{opacity:.4; cursor:not-allowed;}
.box-summary{position:sticky; top:88px; border:1px solid var(--ink-line); background:#fff; border-radius:var(--radius-m); padding:22px; display:flex; flex-direction:column; gap:13px;}
.progress-track{height:6px; border-radius:999px; background:var(--ivory-dim); overflow:hidden;}
.progress-fill{height:100%; background:var(--ochre); transition:width .25s ease;}
.how-it-works{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
@media (max-width:640px){.how-it-works{grid-template-columns:1fr;}}
.hiw-step{display:flex; flex-direction:column; gap:6px;}
.hiw-num{width:26px; height:26px; border-radius:50%; background:var(--espresso); color:var(--ivory); font-family:var(--font-ui); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.hiw-step b{font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--espresso);}
.hiw-step span{color:var(--roasted); font-size:13.5px;}

/* cart drawer */
.overlay-scrim{position:fixed; inset:0; background:rgba(36,23,19,.55); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:60;}
.overlay-scrim.is-open{opacity:1; visibility:visible;}
.cart-drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:#fff; z-index:65; box-shadow:-24px 0 60px rgba(36,23,19,.3); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.cart-drawer.is-open{transform:translateX(0);}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--ink-line);}
.cart-head h3{font-size:20px;}
.cart-ship{margin:0 22px; padding:14px 0;}
.cart-ship-text{font-family:var(--font-ui); font-size:12.5px; color:var(--roasted); margin-bottom:8px;}
.cart-ship-text b{color:var(--ochre);}
.cart-items{flex:1; overflow-y:auto; padding:6px 22px;}
.cart-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:40px 20px; text-align:center; color:var(--roasted);}
.cart-line{display:flex; gap:13px; padding:17px 0; border-bottom:1px solid var(--ink-line);}
.cart-line-thumb{width:60px; height:74px; border-radius:var(--radius-s); overflow:hidden; background:var(--espresso); flex:none;}
.cart-line-thumb svg{width:100%;height:100%;}
.cart-line-thumb img{width:100%;height:100%;object-fit:contain;padding:5px;}
.cart-line-body{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;}
.cart-line-top{display:flex; justify-content:space-between; gap:10px;}
.cart-line-top b{font-size:14.5px; color:var(--espresso); font-weight:700;}
.cart-line-meta{font-family:var(--font-ui); font-size:11px; color:var(--roasted); opacity:.7;}
.cart-line-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.cart-line-remove{background:none; border:0; color:var(--roasted); opacity:.7; font-family:var(--font-ui); font-size:11px; cursor:pointer; padding:0; text-decoration:underline;}
.cart-line-remove:hover{color:var(--burgundy); opacity:1;}
.cart-line-price{font-family:var(--font-ui); font-weight:700; color:var(--espresso); font-size:13px;}
.cart-foot{border-top:1px solid var(--ink-line); padding:17px 22px 22px; display:flex; flex-direction:column; gap:13px;}
.cart-subtotal-row{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-ui);}
.cart-subtotal-row b{font-family:var(--font-display); font-size:19px; color:var(--espresso);}

/* toast */
.toast-stack{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(380px,90vw);}
.toast{background:var(--espresso); color:var(--ivory); font-family:var(--font-ui); font-size:13px; font-weight:600; padding:13px 18px; border-radius:var(--radius-m); display:flex; align-items:center; gap:10px; box-shadow:0 14px 34px rgba(0,0,0,.3); opacity:0; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease; width:100%;}
.toast.is-error{background:var(--burgundy);}
.toast.is-visible{opacity:1; transform:translateY(0);}

/* wholesale */
.biz-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:900px){.biz-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.biz-grid{grid-template-columns:1fr;}}
.biz-card{border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:24px 20px; background:#fff;}
.biz-num{color:var(--ochre); margin-bottom:15px; display:inline-flex;}
.biz-card h4{font-size:18px; margin-bottom:8px;}
.biz-card p{color:var(--roasted); font-size:14px; line-height:1.55;}

/* forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--roasted); opacity:.75;}
.field input, .field select, .field textarea{background:#fff; border:1px solid var(--ink-line-strong); color:var(--espresso); font-family:var(--font-ui); font-size:14.5px; padding:11px 13px; border-radius:var(--radius-s); width:100%;}
.field textarea{resize:vertical; min-height:96px;}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--burgundy);}
.field-error{font-family:var(--font-ui); font-size:11.5px; color:var(--burgundy); display:none;}
.field.has-error .field-error{display:block;}
.radio-card{display:flex; align-items:center; gap:12px; border:1px solid var(--ink-line-strong); border-radius:var(--radius-s); padding:13px 15px; cursor:pointer;}
.radio-card input{accent-color:var(--ochre);}
.radio-card.is-active{border-color:var(--ochre); background:rgba(168,111,61,.08);}
.form-success{display:flex; align-items:center; gap:12px; background:rgba(102,112,74,.14); border:1px solid var(--raw-coffee); border-radius:var(--radius-m); padding:15px 17px; color:var(--espresso); font-size:14px;}
.form-error-banner{background:rgba(85,27,44,.1); border:1px solid var(--burgundy); color:var(--burgundy); border-radius:var(--radius-m); padding:13px 16px; font-size:13.5px; font-family:var(--font-ui);}
.form-ok{color:var(--raw-coffee); font-family:var(--font-ui); font-size:13px; font-weight:600; margin-top:6px;}

/* account profile */
.profile-section{padding:22px 0; border-top:1px solid var(--ink-line);}
.profile-section:first-child{border-top:0; padding-top:0;}
.profile-section h3{font-family:var(--font-display); font-size:17px; margin-bottom:14px;}
.profile-section .field{margin-bottom:12px;}
.profile-section .btn{margin-top:4px;}
.address-card{border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:14px 16px; margin-bottom:10px; font-family:var(--font-ui);}
.address-card-head{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.address-card-head b{font-size:14px; color:var(--espresso);}
.address-card p{font-size:13px; color:var(--roasted); opacity:.85; line-height:1.5; margin:0;}
.address-card-actions{display:flex; gap:14px; margin-top:8px;}
.address-form{display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:16px; background:var(--ivory-dim); border-radius:var(--radius-m);}
.btn-link{background:none; border:0; padding:0; font-family:var(--font-ui); font-size:12.5px; font-weight:700; text-decoration:underline; color:var(--roasted); cursor:pointer;}
.chip{display:inline-block; font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--espresso); background:rgba(168,111,61,.16); border-radius:999px; padding:3px 9px;}

/* checkout */
.checkout-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:52px; align-items:flex-start;}
@media (max-width:920px){.checkout-grid{grid-template-columns:1fr;}}
.checkout-step{margin-bottom:32px;}
.checkout-step h3{font-size:19px; margin-bottom:15px; display:flex; align-items:center; gap:10px;}
.checkout-step h3 .num{width:25px; height:25px; border-radius:50%; background:var(--ochre); color:var(--ivory); font-family:var(--font-ui); font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.order-summary{border:1px solid var(--ink-line); background:#fff; border-radius:var(--radius-m); padding:20px; display:flex; flex-direction:column; gap:15px; position:sticky; top:88px;}
.os-line{display:flex; gap:11px; align-items:center;}
.os-thumb{width:44px; height:54px; border-radius:var(--radius-s); overflow:hidden; background:var(--espresso); flex:none;}
.os-thumb svg{width:100%;height:100%;}
.os-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.os-line-info{flex:1; min-width:0;}
.os-line-info b{font-size:13px; color:var(--espresso); display:block;}
.os-line-info span{font-family:var(--font-ui); font-size:10.5px; color:var(--roasted); opacity:.7;}
.os-row{display:flex; justify-content:space-between; font-family:var(--font-ui); font-size:13px; color:var(--roasted);}
.os-row.total{font-size:15px; color:var(--espresso); font-weight:700;}
.os-row.total b{font-family:var(--font-display); font-size:21px;}
.coupon-row{display:flex; gap:8px;}
.coupon-row input{flex:1;}

/* confirmation */
.confirm-wrap{max-width:620px; margin:0 auto; text-align:center; padding:56px 0;}
.confirm-badge{width:70px; height:70px; border-radius:50%; background:var(--raw-coffee); color:var(--ivory); display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.confirm-order{font-family:var(--font-ui); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--roasted); opacity:.7; margin:13px 0 5px;}
.confirm-actions{display:flex; gap:13px; justify-content:center; margin-top:30px; flex-wrap:wrap;}

/* footer */
.site-footer{border-top:1px solid var(--cream-line); background:var(--espresso); color:var(--ivory); padding:72px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:38px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:34px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(239,231,215,.55); margin-bottom:15px;}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-links button, .footer-links a{background:none; border:0; color:rgba(239,231,215,.85); font-family:var(--font-ui); font-size:14px; cursor:pointer; padding:0; text-align:left; text-decoration:none;}
.footer-links button:hover, .footer-links a:hover{color:var(--ochre-light);}
.social-link{display:inline-flex; align-items:center; gap:8px;}
.newsletter-form{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap;}
.newsletter-form input{flex:1; min-width:180px; background:rgba(239,231,215,.08); border:1px solid var(--cream-line-strong); color:var(--ivory); padding:11px 13px; border-radius:var(--radius-s); font-family:var(--font-ui); font-size:13.5px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:56px; padding-top:22px; border-top:1px solid var(--cream-line); font-family:var(--font-ui); font-size:11.5px; color:rgba(239,231,215,.5); flex-wrap:wrap; gap:14px;}
.photo-credits{margin:14px 0 0; font-family:var(--font-ui); font-size:10.5px; line-height:1.7; color:rgba(239,231,215,.35);}
.photo-credits a{color:rgba(239,231,215,.5); text-decoration:underline;}
.photo-credits a:hover{color:var(--ochre-light);}
.payment-marks{display:flex; gap:9px; align-items:center;}
.payment-marks span{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--cream-line-strong); border-radius:3px; padding:4px 8px; font-size:10px; letter-spacing:.03em; color:rgba(239,231,215,.6);}

.view{display:none;}
.view.is-active{display:block;}

.craft-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:820px){.craft-steps{grid-template-columns:1fr;}}
.craft-step{padding-top:16px; border-top:2px solid var(--ochre);}
.craft-step h4{font-size:18px; margin-bottom:7px;}
.craft-step p{color:var(--roasted); font-size:14px; line-height:1.6;}
.roastery-visit-card{display:flex; gap:0; margin-top:40px; border:1px solid var(--ink-line); border-radius:var(--radius-m); overflow:hidden; background:#fff;}
.roastery-visit-media{flex:1; min-width:0;}
.roastery-visit-media img{width:100%; height:100%; object-fit:cover; display:block; min-height:220px;}
.roastery-visit-body{flex:1; padding:32px; display:flex; flex-direction:column; justify-content:center;}
@media (max-width:700px){.roastery-visit-card{flex-direction:column;} .roastery-visit-media img{min-height:180px;}}
.packaging-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){.packaging-grid{grid-template-columns:1fr;}}
.packaging-card{border-radius:var(--radius-m); overflow:hidden; background:var(--ivory-dim); box-shadow:0 14px 30px rgba(36,23,19,.14);}
.packaging-card img{width:100%; display:block;}

/* =========================================================
   MOTION LAYER — heavy graphics & animation
   Everything transform/opacity only (GPU-composited); the
   prefers-reduced-motion rule at the top of this file kills
   all durations, and motion JS also skips its effects.
   ========================================================= */

/* scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:100%; z-index:120; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--ochre), var(--ochre-light)); pointer-events:none;}

/* hero: slow Ken Burns drift + JS parallax on the wrapper */
.hero-backdrop img, .hero-backdrop video{animation:heroKenburns 26s ease-in-out infinite alternate; will-change:transform;}
@keyframes heroKenburns{
  from{transform:scale(1.02) translate3d(0,0,0);}
  to{transform:scale(1.12) translate3d(-1.6%, -1.2%, 0);}
}
.hero-backdrop{will-change:transform;}

/* hero intro sequence */
.hero-glass > *{opacity:0; transform:translateY(26px); animation:heroRise .9s cubic-bezier(.16,1,.3,1) forwards;}
.hero-glass > *:nth-child(1){animation-delay:.08s;}
.hero-glass > *:nth-child(2){animation-delay:.22s;}
.hero-glass > *:nth-child(3){animation-delay:.36s;}
@keyframes heroRise{to{opacity:1; transform:none;}}

/* floating particle canvas over the hero */
.hero-particles{position:absolute; inset:0; z-index:2; pointer-events:none;}

/* scroll reveals — JS adds .reveal + a per-sibling delay, then .is-in */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.is-in{opacity:1; transform:none;}

/* view transition when navigating between pages */
#app.view-enter{animation:viewEnter .5s cubic-bezier(.16,1,.3,1);}
@keyframes viewEnter{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* marquee ticker */
.marquee{background:var(--espresso); color:var(--ivory); overflow:hidden; padding:14px 0; border-top:1px solid rgba(239,231,215,.08); border-bottom:1px solid rgba(239,231,215,.08);}
.marquee-track{display:flex; width:max-content; gap:0; animation:marqueeScroll 34s linear infinite; will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-seq{display:flex; align-items:center; white-space:nowrap;}
.marquee-item{font-family:var(--font-display, inherit); font-size:15px; letter-spacing:.14em; text-transform:uppercase; padding:0 18px; display:flex; align-items:center; gap:18px; color:rgba(239,231,215,.85);}
.marquee-item .tick{color:var(--ochre-light); font-size:12px;}
@keyframes marqueeScroll{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}

/* card media zoom + lift; JS drives the 3D tilt */
.card, .product-card{will-change:transform;}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 50px rgba(36,23,19,.18);}
.card img, .feature-tile-media img, .roastery-visit-media img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.card:hover img{transform:scale(1.06);}
.feature-tile:hover .feature-tile-media img{transform:scale(1.07) rotate(.4deg);}
.tilt{transform-style:preserve-3d; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .2s ease;}
.tilt.is-tilting{transition:box-shadow .35s ease, border-color .2s ease;}

/* primary button sheen sweep */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:-80%; width:55%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform:skewX(-18deg); transition:left .6s ease;}
.btn-primary:hover::after{left:130%;}

/* bag count pop */
@keyframes bagPop{0%{transform:scale(1);} 40%{transform:scale(1.5);} 70%{transform:scale(.92);} 100%{transform:scale(1);}}
.bag-count.is-popping{animation:bagPop .45s cubic-bezier(.34,1.56,.64,1);}

/* section headline underline draw */
.section-head h2{position:relative; display:inline-block;}
.section-head h2::after{content:""; position:absolute; left:0; bottom:-8px; height:3px; width:52px; background:var(--ochre); transform:scaleX(0); transform-origin:0 50%; transition:transform .8s cubic-bezier(.16,1,.3,1) .25s;}
.section-head.reveal.is-in h2::after{transform:scaleX(1);}

/* gentle ambient float for intro bullets & bean legend */
.reveal.is-in .intro-bullet{animation:floatIdle 5.5s ease-in-out infinite;}
.reveal.is-in .intro-bullet:nth-child(2){animation-delay:1.2s;}
.reveal.is-in .intro-bullet:nth-child(3){animation-delay:2.4s;}
.reveal.is-in .intro-bullet:nth-child(4){animation-delay:3.6s;}
@keyframes floatIdle{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}

/* =========================================================
   "Nine cities" section — wide horizontal city cards
   (matches the approved homepage mockup)
   ========================================================= */
.container-wide{max-width:1720px; margin:0 auto; padding:0 var(--edge);}

/* intro strip: title | lede | four bullets with hairline dividers */
.intro-strip-inner{display:flex; align-items:center; justify-content:flex-start; gap:0; flex-wrap:wrap;}
.intro-strip-copy{padding-right:36px;}
.intro-strip-lede{padding-right:36px; flex:none;}
.intro-bullets{display:flex; flex:1; justify-content:space-between; min-width:0; flex-wrap:wrap;}
.intro-bullet{display:flex; align-items:center; gap:12px; font-family:var(--font-ui); font-size:12.5px; font-weight:600; line-height:1.35; padding:6px 26px; border-left:1px solid var(--ink-line); max-width:none;}
.intro-bullet svg{color:var(--roasted); flex:none;}
.intro-bullet span{max-width:9ch;}
@media (max-width:1560px){
  .intro-strip-inner{gap:22px;}
  .intro-bullets{flex-basis:100%; justify-content:flex-start;}
  .intro-bullet:first-child{border-left:0; padding-left:0;}
}
@media (max-width:640px){.intro-bullet{border-left:0; padding:6px 12px 6px 0;}}

/* the product grid: three cards per row, each laid out horizontally
   (bag on the left, product details on the right) */
.product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 26px;}
@media (max-width:1200px){.product-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:760px){.product-grid{grid-template-columns:1fr;}}

.city-card{
  background:#fff; border:1px solid var(--ink-line); border-radius:var(--radius-m);
  padding:0; overflow:hidden; display:flex; flex-direction:row; box-shadow:none;
  transition:box-shadow .25s ease, border-color .2s ease, transform .25s ease;
}
.city-card:hover{border-color:var(--ink-line-strong); box-shadow:0 22px 44px rgba(36,23,19,.12); transform:translateY(-4px);}
.cc-media{position:relative; flex:0 0 40%; align-self:stretch; cursor:pointer; background:var(--ivory-dim); padding:18px 14px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cc-media img{position:relative; z-index:1; width:100%; height:auto; max-height:340px; object-fit:contain; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1);}
.city-card:hover .cc-media img{transform:scale(1.05);}
@media (max-width:400px){.city-card{flex-direction:column;} .cc-media{flex-basis:auto;} .cc-media img{max-height:220px;}}
/* decorative scattered coffee beans (varies per product) */
.bean-scatter{position:absolute; inset:0; z-index:2; pointer-events:none;}
.bean{position:absolute; display:block; filter:drop-shadow(0 2px 3px rgba(36,23,19,.3));}
.bean svg{width:100%; height:100%; display:block;}
.city-card:hover .bean{transition:transform .5s cubic-bezier(.16,1,.3,1);}
.cc-body{display:flex; flex-direction:column; gap:13px; padding:18px 18px 18px; flex:1; min-width:0;}
.cc-head{display:flex; flex-direction:column; gap:4px;}
.city-card .pc-name{font-size:21px; letter-spacing:.04em;}
.cc-block{display:flex; flex-direction:column; gap:8px;}
.cc-block .pc-label{margin-bottom:0;}
.cc-brew-row{display:flex; gap:14px; justify-content:space-between;}
.cc-brew{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1;}
.cc-brew-glyph{color:var(--roasted); opacity:.75;}
.cc-brew-name{font-family:var(--font-ui); font-size:9.5px; font-weight:600; color:var(--roasted); opacity:.75; letter-spacing:.02em;}
.cc-hint{font-family:var(--font-ui); font-size:11px; color:var(--roasted); opacity:.75; display:flex; align-items:center; gap:6px;}
.cc-hint-i{font-size:12px;}
.cc-foot{margin-top:auto; display:flex; flex-direction:column; gap:12px; padding-top:6px;}
.cc-price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.city-card .pc-price{font-family:var(--font-display); font-size:24px; font-weight:600;}
.city-card .pc-tax{font-family:var(--font-ui); font-size:11px; color:var(--roasted); opacity:.7;}
.city-card .pc-stock{font-family:var(--font-ui); font-size:11px; color:var(--burgundy); font-weight:700; width:100%;}
.cc-add{width:100%; background:var(--burgundy); border-color:var(--burgundy);}
.cc-add:hover{background:#6a2338; border-color:#6a2338;}

/* pagination */
.pager{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:44px;}
.pager-btn{font-family:var(--font-ui); font-size:13px; font-weight:700; letter-spacing:.02em; padding:10px 18px; border-radius:var(--radius-s); border:1px solid var(--ink-line-strong); background:#fff; color:var(--espresso); cursor:pointer; transition:background-color .15s ease, opacity .15s ease;}
.pager-btn:hover:not(:disabled){background:var(--ivory-dim);}
.pager-btn:disabled{opacity:.35; cursor:default;}
.pager-dots{display:flex; align-items:center; gap:9px;}
.pager-dot{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:var(--ink-line-strong); opacity:.5; cursor:pointer; transition:opacity .15s ease, width .2s ease, background-color .15s ease;}
.pager-dot.is-active{background:var(--burgundy); opacity:1; width:24px; border-radius:5px;}

/* subscription banner: preview | copy | perks row */
.citybox-banner-inner{display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.citybox-copy h2{font-size:clamp(22px,2.2vw,30px);}
.citybox-copy p{margin:10px 0 16px;}
.citybox-perks{display:flex; flex:1; justify-content:space-between; gap:18px; max-width:none; min-width:280px; flex-wrap:wrap;}
.citybox-perk{display:flex; align-items:center; gap:10px; font-size:11.5px; line-height:1.35;}
.btn-outline-light{background:transparent; color:var(--ivory); border:1px solid var(--cream-line-strong);}
.btn-outline-light:hover{background:rgba(239,231,215,.1);}

/* bottom tiles: image beside text, hairline dividers */
.feature-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.feature-tile{display:flex; align-items:center; gap:20px; padding:10px 28px; border-left:1px solid var(--ink-line);}
.feature-tile:first-child{border-left:0; padding-left:0;}
.feature-tile.is-flipped{flex-direction:row-reverse;}
.feature-tile-media{width:42%; flex:none; aspect-ratio:4/3; border-radius:var(--radius-m); overflow:hidden; margin-bottom:0; background:var(--ivory-dim);}
.feature-tile-body{min-width:0;}
.feature-tile-body h4{font-size:17px; margin-bottom:8px; display:flex; align-items:center; gap:7px;}
.feature-tile-body p{color:var(--roasted); font-size:13px; margin-bottom:12px; line-height:1.5;}
@media (max-width:1024px){
  .feature-tiles{grid-template-columns:1fr; gap:26px;}
  .feature-tile{border-left:0; padding:0;}
  .feature-tile.is-flipped{flex-direction:row;}
}
@media (max-width:480px){.feature-tile{flex-direction:column; align-items:flex-start;} .feature-tile.is-flipped{flex-direction:column;} .feature-tile-media{width:100%;}}

/* page banner — reuses the homepage tile graphics on their destination pages */
.page-banner{margin-top:26px; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:24/7; background:var(--ivory-dim); box-shadow:0 14px 30px rgba(36,23,19,.1);}
.page-banner img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:640px){.page-banner{aspect-ratio:16/9;}}