@charset "UTF-8";
/* ==========================================================================
   ALL CAPS — Design System
   Brand swatch:
   #291C0E espresso · #6E473B clay · #A78D78 latte · #BEB5A9 oat · #E1D4C2 cream
   The site is LIGHT by default (paper / cream). Dark is a deliberate accent —
   any block can flip the whole token set by adding .on-dark.
   ========================================================================== */

/* ---------- Ploni (drop the licensed files into assets/fonts/) ---------- */
@font-face{font-family:'Ploni';src:url('../fonts/ploni-ultralight-aaa.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-regular-aaa.woff2')    format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-medium-aaa.woff2')     format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-demibold-aaa.woff2')   format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-bold-aaa.woff2')       format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-ultrabold-aaa.woff2')  format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Ploni';src:url('../fonts/ploni-black-aaa.woff2')      format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ---- brand ramp (fixed) ---- */
  --espresso:#291C0E;
  --espresso-d:#160F07;
  --clay:#6E473B;
  --latte:#A78D78;
  --oat:#BEB5A9;
  --cream:#E1D4C2;
  --paper:#FAF6F0;          /* warm near-white — the site's main ground */
  --white:#FFFFFF;
  --crema:#B07A2E;          /* accent on light */
  --crema-lite:#D6A756;     /* accent on dark */

  /* ---- semantic tokens (LIGHT default) ---- */
  --bg:var(--paper);
  --panel:var(--white);
  --ink:var(--espresso);
  --ink-2:#5B4230;
  --ink-3:#8C7660;
  --accent:var(--crema);
  --on-accent:#FFFFFF;
  --line:rgba(41,28,14,.13);
  --line-2:rgba(41,28,14,.07);
  --surface:rgba(41,28,14,.035);
  --surface-2:rgba(41,28,14,.07);
  --shadow:0 24px 50px -30px rgba(41,28,14,.5);

  /* ---- type ---- */
  --font:'Ploni','Ploni ML v2 AAA','Ploni DL AAA',Heebo,'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step--1:clamp(.78rem,.75rem + .15vw,.88rem);
  --step-0:clamp(.95rem,.9rem + .22vw,1.05rem);
  --step-1:clamp(1.22rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.65rem,1.4rem + 1vw,2.1rem);
  --step-3:clamp(2.3rem,1.75rem + 2.1vw,3.4rem);
  --step-4:clamp(2.6rem,1.8rem + 3.6vw,5.6rem);

  /* ---- space & shape ---- */
  --navh:clamp(72px,7.5vw,96px);   /* the hero offsets itself by exactly this */
  --gutter:clamp(1rem,4vw,3.5rem);
  --wrap:1440px;
  --r-s:10px; --r-m:16px; --r-l:26px; --r-xl:36px; --r-pill:999px;
  --sect:clamp(4.5rem,9vw,9rem);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* ---- live ambient (JS drives these from the active hero slide) ---- */
  /* the first hero slide's ambience (Dolce Gusto); JS swaps these per slide */
  --amb:#C9A227;
  --amb-deep:#3A2E08;
}

/* ---- the dark flip ---- */
.on-dark{
  --bg:var(--espresso-d);
  --panel:#1D1409;
  --ink:var(--cream);
  --ink-2:var(--oat);
  --ink-3:#8C7A69;
  --accent:var(--crema-lite);
  --on-accent:var(--espresso);
  --line:rgba(225,212,194,.15);
  --line-2:rgba(225,212,194,.08);
  --surface:rgba(225,212,194,.05);
  --surface-2:rgba(225,212,194,.1);
  --shadow:0 24px 50px -28px rgba(0,0,0,.85);
  background:var(--bg);color:var(--ink);
}
/* mid-tone cream band */
.on-cream{--bg:var(--cream);--panel:#F0E7DA;--surface:rgba(41,28,14,.045);--surface-2:rgba(41,28,14,.09);
  background:var(--bg);color:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--crema-lite);color:var(--espresso)}

.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap--wide{--wrap:1300px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type utilities ---------- */
.eyebrow{
  font-size:var(--step--1);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:clamp(18px,3vw,42px);height:1px;background:currentColor;opacity:.55;flex:none}
.h-sect{font-size:var(--step-3);font-weight:400;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.h-sect em{font-style:normal;font-weight:700}
.lede{color:var(--ink-2);font-weight:400;max-width:52ch;text-wrap:pretty}
.sect__head-l{min-width:0}
/* Latin brand names inside Hebrew copy — keeps bidi ordering sane */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.en{font-weight:500;letter-spacing:.18em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95em 1.9em;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:var(--step-0);line-height:1;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease);
  box-shadow:0 10px 26px -14px rgba(41,28,14,.8);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42),transparent 80%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 36px -18px rgba(41,28,14,.9)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(-4px)}
.btn--dark{background:var(--espresso);color:var(--cream)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--surface-2);box-shadow:none}
.btn--sm{padding:.7em 1.35em;font-size:var(--step--1)}
.btn--block{width:100%}

.ibtn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:inherit;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.ibtn:hover{background:var(--surface-2)}
.ibtn:active{transform:scale(.94)}

/* ==========================================================================
   Announcement + header
   ========================================================================== */
.topbar{
  background:var(--espresso);color:var(--oat);
  font-size:var(--step--1);position:relative;z-index:60;
}
.topbar__track{display:flex;align-items:center;justify-content:center;gap:2.5rem;height:38px;overflow:hidden}
.topbar__item{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.topbar__item svg{width:15px;height:15px;color:var(--crema-lite);flex:none}
@media (max-width:800px){
  .topbar{overflow:hidden}
  .topbar__track{gap:0;justify-content:flex-start}
  .topbar__item{position:absolute;inset:0;justify-content:center;opacity:0;transform:translateY(8px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .topbar__item.is-on{opacity:1;transform:none}
}

/* header floats over the dark hero, then turns to paper once you scroll */
.site-header{
  position:sticky;top:0;z-index:50;
  --ink:var(--cream);--ink-3:#8C7A69;--line:rgba(225,212,194,.15);--surface:rgba(225,212,194,.05);
  --surface-2:rgba(225,212,194,.12);--accent:var(--crema-lite);
  color:var(--ink);
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),
             transform .45s var(--ease),color .45s var(--ease);
}
.site-header::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--line);opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.site-header.is-stuck::after{opacity:1}
.site-header.has-mega::after{opacity:0}
.site-header.is-stuck,
.site-header.has-mega{
  --ink:var(--espresso);--ink-3:#8C7660;--line:rgba(41,28,14,.13);--surface:rgba(41,28,14,.035);
  --surface-2:rgba(41,28,14,.08);--accent:var(--crema);
  background:rgba(250,246,240,.86);backdrop-filter:blur(22px) saturate(1.3);
}
.site-header.has-mega{background:var(--paper)}
.site-header.has-mega .cart-btn__count{background:var(--crema);color:#fff}
.site-header.is-hidden{transform:translateY(-101%)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(.75rem,2vw,2rem);height:var(--navh)}
.nav__left,.nav__right{display:flex;align-items:center;gap:.4rem}
.nav__left{justify-content:flex-end}
/* nav links stay next to the logo; the icon cluster is pushed to the far left
   edge of the bar (in RTL that's the end of this column, hence the order swap) */
.nav__right{justify-content:space-between;gap:1.5rem}
.nav__right .menu{order:1}
.nav__icons{display:flex;align-items:center;gap:.4rem;order:2}

/* ---------- brand medallion ---------- */
.brand{display:flex;align-items:center;justify-self:center}

.brand__badge{
  position:relative;flex:none;display:grid;place-items:center;
  width:clamp(58px,5.4vw,78px);height:clamp(58px,5.4vw,78px);
  transition:transform .55s var(--ease);
}
.brand__mark{
  position:relative;z-index:2;width:100%;height:100%;border-radius:50%;
  transition:box-shadow .5s var(--ease);
  box-shadow:0 0 0 1px rgba(225,212,194,.22),0 0 22px -6px rgba(214,167,86,.45);
}
/* black disc that grows in behind the mark once the page starts scrolling */
.brand__plate{
  position:absolute;z-index:1;inset:-15px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#2E200F,#0A0603 72%);
  box-shadow:0 0 0 1px rgba(214,167,86,.4),0 16px 36px -14px rgba(11,7,4,.95);
  transform:scale(.5);opacity:0;
  transition:transform .6s var(--ease),opacity .45s var(--ease);
}
/* slowly rotating "ALL CAPS · CHOOSE YOUR COFFEE" ring inside the disc's rim */
/* explicit size: an <svg> with auto width falls back to its intrinsic viewBox */
.brand__ring{
  position:absolute;z-index:2;inset:-15px;pointer-events:none;
  width:calc(100% + 30px);height:calc(100% + 30px);max-width:none;
  opacity:0;transition:opacity .5s var(--ease);
  animation:ringspin 30s linear infinite;
}
.brand__ring text{
  font-family:var(--font),system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;
  fill:var(--crema-lite);text-transform:uppercase;
  direction:ltr;unicode-bidi:isolate;   /* the page is RTL; SVG textPath needs LTR */
}
@keyframes ringspin{to{transform:rotate(360deg)}}
.site-header.is-stuck .brand__badge{transform:translateY(4px) scale(1.02)}
.site-header.is-stuck .brand__plate{transform:scale(1);opacity:1}
.site-header.is-stuck .brand__ring{opacity:1}
.site-header.is-stuck .brand__mark{box-shadow:0 0 0 1px rgba(214,167,86,.3)}
@media (prefers-reduced-motion:reduce){.brand__ring{animation:none}}

.brand__word{display:none}   /* the badge carries the brand on its own */
.brand__word--off{display:flex;flex-direction:column;line-height:1}
.brand__word b{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.brand__word span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:.28em}

/* ---------- top-level menu ---------- */
.menu{display:flex;align-items:center;gap:clamp(.1rem,.8vw,.8rem)}
.menu__item{position:static}
.menu__link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.7rem clamp(.6rem,1vw,1.05rem);border-radius:var(--r-pill);
  font-size:var(--step-0);position:relative;white-space:nowrap;
  transition:color .3s var(--ease);
}
.menu__link::after{
  content:"";position:absolute;inset-inline:clamp(.6rem,1vw,1.05rem);bottom:.42rem;height:1.5px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease);
}
.menu__link:hover,.menu__item.is-open>.menu__link{color:var(--accent)}
.menu__link:hover::after,.menu__item.is-open>.menu__link::after{transform:scaleX(1)}
.menu__chev{opacity:.6;transition:transform .35s var(--ease)}
.menu__item.is-open .menu__chev{transform:rotate(180deg)}

/* ==========================================================================
   Mega menu
   ========================================================================== */
.mega-scrim{
  position:fixed;inset:0;z-index:44;background:rgba(22,15,7,.4);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mega-scrim.is-on{opacity:1;visibility:visible}
.mega{
  position:absolute;top:calc(100% - 8px);left:50%;z-index:55;
  width:min(1300px, calc(100vw - var(--gutter) * 2));
  translate:-50% 0;   /* physical left + physical translate — inset-inline would double-shift in RTL */
  background:var(--paper);color:var(--espresso);
  border:1px solid rgba(41,28,14,.1);border-radius:var(--r-l);
  box-shadow:0 34px 70px -34px rgba(41,28,14,.5),0 2px 10px -6px rgba(41,28,14,.25);
  opacity:0;transform:translateY(-10px) scale(.985);transform-origin:50% 0;
  pointer-events:none;overflow:hidden;
  transition:opacity .3s var(--ease),transform .34s var(--ease);
}
.mega[hidden]{display:none}
.mega.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.mega__inner{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(160px,.85fr) minmax(170px,.9fr);
  gap:clamp(1rem,2vw,2.2rem);padding:clamp(1.4rem,2.2vw,2rem);align-items:start;
  width:100%;max-width:none;
}
.mega__label{
  display:block;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--crema);font-weight:600;margin-bottom:1.1rem;
}
/* three across → two tidy rows of discs, so the panel reads balanced */
.mega__brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem}
/* The beans panel has eight roasters where the others have three or four.
   Spanning the full width pushed the bundle and the "find it by machine" link
   below the fold — they belong on the same line. Four narrower discs across
   keeps all eight in two rows inside the normal column instead. */
.mega[data-panel="beans"] .mega__brands{grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem}
.mega[data-panel="beans"] .btile{padding:.7rem .35rem}
.mega[data-panel="beans"] .btile__disc{width:46px;height:46px}
.mega[data-panel="beans"] .btile__name{font-size:.76rem;line-height:1.25}
.mega[data-panel="beans"] .btile__count{font-size:.6rem}
/* two columns, not three: this panel has no shortcuts list */
.mega[data-panel="beans"] .mega__inner{grid-template-columns:minmax(0,2.1fr) minmax(180px,.9fr)}

/* brand tile — black disc echoing the ALL CAPS badge */
.btile{
  display:grid;justify-items:center;gap:.5rem;text-align:center;
  padding:.85rem .4rem .8rem;border-radius:var(--r-m);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.btile:hover{background:rgba(41,28,14,.045);transform:translateY(-3px)}
.btile__disc{
  width:clamp(56px,4.2vw,66px);height:clamp(56px,4.2vw,66px);border-radius:50%;
  display:grid;place-items:center;flex:none;position:relative;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 0 0 1px rgba(41,28,14,.12),0 10px 22px -12px rgba(11,7,4,.8);
  transition:box-shadow .35s var(--ease),transform .45s var(--ease);
}
.btile__disc::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--crema);opacity:0;transform:scale(.85);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.btile:hover .btile__disc{transform:scale(1.05);box-shadow:0 0 0 1px rgba(214,167,86,.5),0 14px 26px -12px rgba(11,7,4,.9)}
.btile:hover .btile__disc::after{opacity:.55;transform:scale(1)}
.btile__disc img{width:100%;height:100%;object-fit:contain}
.btile__disc img.inv{filter:brightness(0) invert(1);opacity:.92}
.btile__name{font-size:var(--step--1);font-weight:600;line-height:1.25}
.btile__count{font-size:.68rem;color:var(--ink-3)}

.mega__side{display:grid;gap:1.4rem;align-content:start}
.mega__side--links{border-inline-start:1px solid rgba(41,28,14,.1);padding-inline-start:clamp(1.2rem,2.2vw,2rem)}
.mega__promo{
  position:relative;display:grid;gap:.3rem;padding:1.2rem 1.3rem;border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--espresso),#3E2A17);color:var(--cream);overflow:hidden;
  transition:transform .4s var(--ease)}
.mega__promo:hover{transform:translateY(-3px)}
.mega__promo b{font-size:var(--step-0);font-weight:600}
.mega__promo span{font-size:var(--step--1);color:var(--oat)}
.mega__promo em{font-style:normal;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crema-lite);font-weight:600}
.mega__promo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(100% 90% at 100% 0%,rgba(214,167,86,.3),transparent 62%)}
.mega__promo>*{position:relative}
.mega__cta{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.9rem 1.1rem;border-radius:var(--r-m);border:1px dashed rgba(41,28,14,.2);
  font-size:var(--step--1);color:var(--ink-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.mega__cta:hover{border-color:var(--crema);color:var(--crema);background:rgba(214,167,86,.07)}
.mega__links li+li{margin-top:.15rem}
.mega__links a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 0;font-size:var(--step-0);color:var(--ink-2);
  border-bottom:1px solid rgba(41,28,14,.07);
  transition:color .3s var(--ease),padding-inline-start .3s var(--ease);
}
.mega__links a:hover{color:var(--crema);padding-inline-start:.35rem}
.mega__links a svg{opacity:.4}
.cart-btn{position:relative}
.cart-btn__count{
  position:absolute;top:-3px;inset-inline-start:-3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font-size:.66rem;font-weight:700;line-height:1;
}
.site-header .cart-btn__count{background:var(--crema-lite);color:var(--espresso)}
.burger,.ibtn--mob{display:none}
@media (max-width:1080px){
  .menu{display:none}
  .burger,.ibtn--mob{display:grid}
  :root{--navh:74px}
  /* burger + search on the right, logo centred, cart + account on the left —
     a balanced three-column bar with nothing left dangling */
  .nav{grid-template-columns:1fr auto 1fr;gap:.5rem}
  .nav__left{order:1;justify-content:flex-start;gap:.35rem}
  .brand{order:2;justify-self:center}
  .nav__right{order:3;justify-content:flex-end;gap:.35rem}
  .nav__right .menu{display:none}
  .nav__icons{gap:.35rem}
  /* search already sits beside the burger on the right — don't repeat it */
  .nav__icons #searchBtn{display:none}
  .ibtn{width:42px;height:42px}
}
@media (max-width:560px){
  .brand__badge{width:50px;height:50px}
  /* the bar is only 66px tall here — keep the medallion inside it */
  .brand__plate,.brand__ring{inset:-8px}
  .brand__ring{width:calc(100% + 16px);height:calc(100% + 16px)}
  .brand__ring text{font-size:9px;letter-spacing:.14em}
  .ibtn{width:40px;height:40px}
  .ibtn svg{width:18px;height:18px}
}

/* ==========================================================================
   HERO — dark, cinematic, ambient morphs with the active capsule
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  margin-top:calc(-1 * var(--navh));padding-top:var(--navh);
  overflow:hidden;isolation:isolate;
}
.hero__amb{position:absolute;inset:0;z-index:-2;background:var(--bg)}
.hero__amb::before,.hero__amb::after{content:"";position:absolute;inset:0;transition:background 1.1s var(--ease)}
.hero__amb::before{
  background:
    radial-gradient(105% 70% at 50% 44%, color-mix(in oklab,var(--amb) 26%, transparent) 0%, transparent 60%),
    radial-gradient(80% 55% at 50% 104%, color-mix(in oklab,var(--amb-deep) 55%, transparent) 0%, transparent 72%);
}
.hero__amb::after{
  background:radial-gradient(46% 34% at 50% 46%, color-mix(in oklab,var(--amb) 30%, transparent), transparent 72%);
  filter:blur(70px);opacity:.85;
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hero__vign{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 45%,rgba(10,6,3,.7) 100%)}

.hero__brands{
  position:relative;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,1.2vw,1.2rem);
  /* The row used to butt straight up against the rail — zero gap — so the tabs
     and the capsules read as one stacked block. The bottom padding separates
     the two. */
  padding:clamp(1.1rem,2.4vw,2rem) var(--gutter) clamp(.9rem,2vw,1.9rem);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.hero__brands::-webkit-scrollbar{display:none}
.hero-brand{
  padding:.55rem 1.05rem;border-radius:var(--r-pill);white-space:nowrap;
  font-size:var(--step--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid transparent;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.hero-brand:hover{color:var(--oat)}
.hero-brand.is-on{color:var(--cream);background:rgba(225,212,194,.1);border-color:var(--line)}

.hero__stage{
  flex:1;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.5rem,2vw,2rem);padding-inline:clamp(.5rem,3vw,3rem);min-height:0;
  /* The stage is flex:1 and the rail centres inside it, so padding on the tabs
     above is simply absorbed — the artwork recentres and nothing moves. The
     separation has to come from here: this offsets the centring downward, which
     is what actually opens a gap under the brand tabs. */
  padding-block-start:clamp(.5rem,2.4vw,2.4rem);
}
.hero__rail{
  position:relative;height:var(--rail);display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;cursor:grab;
  --rail:min(46svh,430px);
  /* Everything in the stage is measured off the rail, not off the viewport.
     Sizing the capsule from `vw` was the bug: on a wide, short window the
     artwork grew past the top of the photographed band and the band's edge
     cut straight across it. */
  /* A length, not a percentage. `calc(100vh + var(--horizon))` on the wall
     resolves a percentage against the wall's own container — the full-height
     scene — not against the rail, which pushed the counter a screen and a half
     down the page and left it zero pixels tall. */
  --horizon:calc(var(--rail) * .76);        /* where the counter begins */
  --cap:min(calc(var(--rail) * .58),270px); /* and how big the thing on it is */
}
/* The room the capsule was photographed in. The wall is a gradient rather than
   a picture: an image would have to be cropped to fit, and then the horizon
   would land at a different height on every screen — which is exactly what
   made the capsule float. This way the counter starts at `--horizon` on every
   viewport, and the capsule is anchored to the same number. */
.hero__scene{
  /* The set is the whole section, not a band inside it: the copy and the
     buttons stand on the same counter the capsule does. It is stretched a
     screen past the rail in both directions and clipped by .hero, which is
     what lets the horizon stay tied to the rail while the picture fills the
     section. */
  position:absolute;top:-100vh;bottom:-100vh;left:50%;translate:-50% 0;width:100vw;
  z-index:0;pointer-events:none;overflow:hidden;
  background:#EFE9E4;
}
/* Wall above the line, counter below it, split from one photographed set at
   the counter's own back edge — so the join is the real edge, and it lands on
   `--horizon` at every viewport size instead of wherever a crop happened to
   put it. Each half is anchored to the seam: the wall by its bottom, the
   counter by its top. */
.hero__wall{position:absolute;left:0;right:0;top:0;height:calc(100vh + var(--horizon));overflow:hidden}
.hero__wall img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.hero__counter{
  /* Started 26px early and masked in over exactly that distance, so the stone
     dissolves into the plaster instead of meeting it on a ruled line. */
  position:absolute;left:0;right:0;top:calc(100vh + var(--horizon) - 26px);bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
  /* The photographed slab is only so deep. Stretching it to the bottom of the
     section magnified it two and a half times and the veining dissolved, so it
     is drawn at its own scale and the surface carries on beneath it — starting
     on the exact colour of the picture's last row, then lifting as polished
     stone does as it comes toward you. */
  background:linear-gradient(to bottom,#E9E3DD 0,#F1ECE6 30%,#F8F4EF 65%,#FBF8F3 100%);
}
.hero__counter img{width:100%;height:auto;display:block}
.hero__rail:active{cursor:grabbing}
/* the outlined numeral kept poking out from behind the capsule and reading as
   a glitch — the intensity dots under the title carry that information instead */
.hero__ghost{display:none}
.caps{position:relative;width:100%;height:100%;z-index:1}
.cap{
  /* Anchored by its base, not its middle: `top` is the counter's own horizon
     and the translate lifts the capsule so it rests on it. */
  position:absolute;top:var(--horizon);left:50%;width:var(--cap);
  transform-origin:50% 100%;will-change:transform,opacity;
  transition:transform .8s var(--ease),opacity .55s var(--ease);
  pointer-events:none;
}
.cap__art{width:100%;height:auto;display:block;position:relative;z-index:2}
/* the contact shadow — small, dark and tight where the capsule meets stone */
.cap::after{
  content:"";position:absolute;z-index:1;left:50%;bottom:-2%;translate:-50% 0;
  width:96%;height:14%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(41,28,14,.42),transparent 70%);
  filter:blur(7px);
}
/* and the reflection: the same bitmap, flipped, dissolving into the marble */
.cap__refl{
  position:absolute;top:100%;left:0;width:100%;height:auto;display:block;z-index:0;
  /* squashed as well as flipped: a full-height mirror image reads as a second
     capsule rather than as polished stone */
  transform:scaleY(-.5);transform-origin:50% 0;opacity:.28;
  -webkit-mask-image:linear-gradient(to top,transparent 46%,#000 100%);
          mask-image:linear-gradient(to top,transparent 46%,#000 100%);
}
.cap.is-active{z-index:5}
.cap.is-side{cursor:pointer;pointer-events:auto}
.hero--light .cap.is-side .cap__art{filter:drop-shadow(0 12px 16px rgba(41,28,14,.18)) saturate(.9)}
.cap.is-side .cap__refl{opacity:.18}
.hero__pool{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:min(60vw,520px);height:64px;pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in oklab,var(--amb) 50%,transparent), transparent 72%);
  filter:blur(20px);opacity:.7;transition:background 1.1s var(--ease);
}

.hero__copy{
  position:relative;z-index:6;text-align:center;
  padding:0 var(--gutter) clamp(1rem,2.2vw,2rem);
  display:grid;justify-items:center;gap:.55rem;
}
.hero__intensity{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.dots-int{display:inline-flex;gap:3px}
.dots-int i{width:5px;height:5px;border-radius:50%;background:rgba(225,212,194,.25)}
.dots-int i.on{background:var(--crema-lite)}
.hero__brandname{font-size:var(--step--1);letter-spacing:.28em;text-transform:uppercase;color:var(--crema-lite);font-weight:600}
.hero__title{font-size:var(--step-3);font-weight:200;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.hero__title b{font-weight:700}
.hero__price{display:flex;align-items:baseline;gap:.4rem;font-weight:600;font-size:var(--step-1)}
.hero__price-from{font-weight:400;font-size:var(--step--1);color:var(--ink-2)}
.hero__cta{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.45rem}

.hero__arrow{
  width:clamp(46px,4.4vw,60px);height:clamp(46px,4.4vw,60px);border-radius:50%;
  display:grid;place-items:center;flex:none;z-index:7;color:var(--cream);
  border:1px solid var(--line);background:rgba(225,212,194,.05);backdrop-filter:blur(10px);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.hero__arrow svg{width:22px;height:22px}
.hero__arrow:hover{background:rgba(225,212,194,.15);transform:scale(1.06)}
.hero__arrow:active{transform:scale(.95)}

.hero__dots{display:flex;gap:.5rem;justify-content:center;padding-bottom:clamp(2.2rem,4vw,3.2rem);position:relative;z-index:6}
.hero__dot{width:26px;height:3px;border-radius:2px;background:rgba(225,212,194,.22);overflow:hidden;position:relative}
.hero__dot i{position:absolute;inset:0;background:var(--crema-lite);transform:scaleX(0);transform-origin:100% 50%}
.hero__dot.is-on i{animation:dotfill 6s linear forwards}
.hero.is-paused .hero__dot.is-on i{animation-play-state:paused}
@keyframes dotfill{to{transform:scaleX(1)}}

.scrollcue{
  position:absolute;bottom:1.6rem;inset-inline-start:clamp(1rem,3vw,2.6rem);z-index:6;
  display:grid;justify-items:center;gap:.45rem;font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);pointer-events:none;
}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--crema-lite),transparent);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ==========================================================================
   Hero in daylight
   The stage keeps its shape, its ambience and its motion — only the ground
   under it turns light, so every colour that was tuned for a dark room has to
   be restated: the glow loses its black partner, the shadows go warm-grey
   instead of black, and every cream-on-dark control flips to ink-on-paper.
   ========================================================================== */
.hero--light{
  --bg:var(--paper);
  --ink:var(--espresso);--ink-2:#5B4230;--ink-3:#8C7660;
  --accent:var(--crema);--on-accent:#FFFFFF;
  --line:rgba(41,28,14,.13);--line-2:rgba(41,28,14,.07);
  --surface:rgba(41,28,14,.035);--surface-2:rgba(41,28,14,.07);
  background:var(--bg);color:var(--ink);
}
/* The photographed counter is the stage now, so the whole-screen brand wash is
   gone: two backgrounds fighting each other only muddied both. The brand comes
   through as `--tint` on the tab and the title instead. */
.hero--light .hero__amb::before,
.hero--light .hero__amb::after{background:none}
.hero--light .hero__pool{display:none}
/* overlay grain lightens a dark ground and dirties a light one */
.hero--light .hero__grain{opacity:.1;mix-blend-mode:multiply}
.hero--light .hero__vign{
  background:
    linear-gradient(to bottom, rgba(253,250,247,.86) 0%, rgba(253,250,247,0) 18%),
    linear-gradient(to top,    rgba(253,250,247,.4) 0%, rgba(253,250,247,0) 26%);
}
/* a long soft shadow cast across the stone, on top of the tight contact one */
.hero--light .cap__art{filter:drop-shadow(0 18px 22px rgba(41,28,14,.22))}
.hero--light .hero-brand:hover{color:var(--ink-2)}
.hero--light .hero-brand.is-on{
  color:#fff;background:var(--tint,var(--espresso));border-color:transparent;
  box-shadow:0 4px 16px -8px color-mix(in oklab,var(--tint,#291C0E) 70%,transparent);
  transition:background .5s var(--ease),color .35s var(--ease),box-shadow .5s var(--ease);
}
/* the bold half of the headline carries the same colour */
.hero--light .hero__title b{color:var(--tint,var(--espresso));transition:color .5s var(--ease)}
.hero--light .hero__arrow{
  color:var(--espresso);border-color:rgba(41,28,14,.1);background:rgba(255,255,255,.62);
  box-shadow:0 6px 20px -14px rgba(41,28,14,.9);
}
.hero--light .hero__arrow:hover{background:#fff;box-shadow:0 8px 22px -12px rgba(41,28,14,.9)}
.hero--light .hero__brandname{color:var(--crema)}
.hero--light .dots-int i{background:rgba(41,28,14,.18)}
.hero--light .dots-int i.on{background:var(--crema)}
.hero--light .hero__dot{background:rgba(41,28,14,.2)}
.hero--light .hero__dot i{background:var(--crema)}
.hero--light .scrollcue{color:var(--ink-2);opacity:.8}
.hero--light .scrollcue i{background:linear-gradient(var(--crema),transparent)}

/* the bar floats over the hero, so on the front page it has to read as ink
   from the very top instead of waiting for the scrolled state to flip it */
body.home .site-header:not(.is-stuck):not(.has-mega){
  --ink:var(--espresso);--ink-3:#8C7660;--line:rgba(41,28,14,.13);
  --surface:rgba(41,28,14,.035);--surface-2:rgba(41,28,14,.08);--accent:var(--crema);
}
body.home .site-header:not(.is-stuck):not(.has-mega) .cart-btn__count{
  background:var(--crema);color:#fff;
}

@media (max-width:860px){
  .hero__stage{grid-template-columns:1fr;padding-inline:0;padding-block-start:.4rem}
  .hero__arrow{position:absolute;top:50%;translate:0 -50%}
  /* Keep the sides the grid gives them on desktop: in RTL the first item —
     prev — sits on the right, so prev is inline-start and next is inline-end.
     These were the other way round, which put each arrow on the side opposite
     the direction its chevron points. */
  .hero__arrow--prev{inset-inline-start:.35rem}
  .hero__arrow--next{inset-inline-end:.35rem}
  .hero__rail{--rail:min(42svh,370px);--horizon:calc(var(--rail) * .73)}
  .scrollcue{display:none}

  /* Room to breathe on a phone.
     The trio is 2.15x as wide as the capsule at its centre, so the old
     280px floor filled a 390px screen edge to edge — the artwork ran under
     the arrows and the whole hero read as one solid block. The capsule is
     sized off the viewport here, and the rail keeps a lane clear on each
     side for the arrows to sit in rather than on top of. */
  /* On a phone only the immediate neighbours peek in; the outer ring has no
     room left once the arrows have their lane. */
  .cap:not(.is-active):not(.is-side){opacity:0 !important;pointer-events:none}
  /* A 38px blur is drawn relative to the artwork, not the screen: around a
     260px capsule it spreads into a dark cloud that reads as a grey panel
     behind the image. Scaled to the smaller slot it reads as a shadow again —
     and a narrower blur is far cheaper to redraw on every frame of the swipe. */
  .cap__art{filter:drop-shadow(0 10px 14px rgba(41,28,14,.2))}
  .hero__rail{padding-inline:52px}
  .hero__arrow{width:40px;height:40px}
  .hero__arrow svg{width:18px;height:18px}

  /* the pool of light was sized for the wide layout */
  .hero__pool{width:min(74vw,360px);height:52px}

  /* and a little air between the capsule, the copy and the dots. The copy is
     pulled up into the tail of the counter's fade so the band does not read as
     an empty white gap on a short screen. */
  .hero__copy{gap:.7rem;padding-top:.5rem;margin-top:-1.4rem}
  .hero__dots{padding-bottom:clamp(1.4rem,3.5vw,2.2rem)}
}
@media (max-width:1080px){
  /* fixed app bar (76px) + announcement bar (38px) both eat into the first screen */
  .hero{min-height:calc(100svh - 114px)}
  .hero__dots{padding-bottom:.7rem}
  .hero__copy{padding-bottom:.5rem;gap:.3rem}
  /* The frosted bar reads as glass over a wide desktop page, but on a phone a
     white product card sliding under 74px of 86%-opaque blur looks like the
     card has been sliced in half. Opaque here, and no blur — which a phone also
     has to repaint on every scroll frame.
     The scrolled state is what carries the background, hence .is-stuck. */
  .site-header.is-stuck,
  .site-header.has-mega{
    background:var(--paper);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  .hero__brands{padding-top:.5rem;padding-bottom:.7rem;justify-content:flex-start;scroll-padding-inline:40%;gap:.25rem}
  /* the spacers let the active tab centre itself instead of hugging the edge */
  .hero__brands::before,.hero__brands::after{content:"";flex:0 0 26vw}
  .hero-brand{padding:.5rem .85rem;letter-spacing:.1em}
}
@media (max-width:560px){
  .hero__cta{flex-direction:column;width:min(100%,320px)}
  .hero__cta .btn{width:100%}
  .hero__cta .btn--ghost{background:none;border:0;text-decoration:underline;
    text-underline-offset:4px;padding-block:.5em;box-shadow:none;font-weight:400;color:var(--ink-2)}
  .hero__title{font-size:clamp(2.15rem,9vw,2.9rem)}
}

/* ==========================================================================
   Brand marquee — light band
   ========================================================================== */
.marquee{
  background:var(--espresso-d);border-block:1px solid rgba(225,212,194,.1);
  padding:clamp(2.2rem,4vw,3.6rem) 0;overflow:hidden;position:relative;
  --mark: clamp(74px,7.6vw,116px);        /* the optical box every mark fills */
}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(50px,12vw,170px);z-index:2;pointer-events:none}
.marquee::before{inset-inline-start:0;background:linear-gradient(to left,transparent,var(--espresso-d))}
.marquee::after{inset-inline-end:0;background:linear-gradient(to right,transparent,var(--espresso-d))}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
/* Pause on hover so a moving logo can actually be clicked; also pause when the
   keyboard lands on one. */
/* Only where a pointer can actually hover. On a phone :hover sticks to whatever
   the finger last touched, so brushing the band while scrolling froze it until
   the next tap somewhere else — the "sometimes it doesn't move" report. */
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track{animation-play-state:paused}
}
@keyframes slide{to{transform:translateX(50%)}}

/* Every logo gets the same slot, so the row reads as one rhythm rather than
   five loose sizes. The slot is a fixed layout box; the artwork is scaled
   inside it and is free to overflow the slot's transparent margins. */
.marquee__item{
  position:relative;flex:none;display:block;
  width:calc(var(--mark) * 2.2);height:var(--mark);
  --scale:1;
  border-radius:var(--r-m);
}
/* The track slides under the pointer, so the target has to be forgiving. */
.marquee__item:focus-visible{outline:2px solid var(--crema-lite);outline-offset:4px}
/* Absolute, not grid-centred: a mark scaled past its slot overflows to the
   bottom under grid alignment, which knocked the wordmarks off the line. */
.marquee__item img{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  height:calc(var(--mark) * var(--scale));width:auto;max-width:none;object-fit:contain;
  opacity:.92;
  transition:opacity .4s var(--ease),scale .4s var(--ease);
}
.marquee__item:hover img{opacity:1;scale:1.06}

/* These five files are square canvases whose logos fill wildly different
   fractions of them — Nespresso's wordmark inks 4.8% of its canvas, Espresso
   Club's badge 11.6%. Scaling by height alone would leave the wordmarks
   looking tiny, so each scale is set to even out the printed *area*, nudged
   toward equal height where a mark is very wide or very tall. */
.marquee__item[data-brand="nespresso"]{--scale:1.62}
.marquee__item[data-brand="lavazza"]  {--scale:1.30}
.marquee__item[data-brand="dolce"]    {--scale:1.12}
.marquee__item[data-brand="club"]     {--scale:1.00}
.marquee__item[data-brand="essse"]    {--scale:1.02}

/* ==========================================================================
   Section chrome
   ========================================================================== */
.sect{padding-block:var(--sect);position:relative}
.sect--white{background:var(--white)}
.sect__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sect__head-l{display:grid;gap:.9rem}
.head-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* ---------- rail arrows ---------- */
.rail-nav{display:flex;gap:.4rem}
.rail-nav[hidden]{display:none}
.rail-nav__btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease),opacity .3s var(--ease);
}
.rail-nav__btn svg{width:20px;height:20px}
.rail-nav__btn:hover:not(:disabled){background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.rail-nav__btn:active:not(:disabled){transform:scale(.93)}
.rail-nav__btn:disabled{opacity:.3;cursor:default}
.on-cream .rail-nav__btn{background:var(--white)}

/* ==========================================================================
   Home banner
   Two separate pictures rather than one image cropped by CSS: the wide strip
   and the tall one are different compositions, and <picture> swaps the file
   itself, so a phone never downloads the desktop art. The aspect ratios come
   from the uploaded files (inlined by allcaps_banner_html) so the page below
   does not jump while the image loads.
   ========================================================================== */
.promo{padding:clamp(1.4rem,3vw,2.6rem) var(--gutter);background:var(--bg)}
.promo__link{
  display:block;max-width:var(--wrap);margin-inline:auto;
  border-radius:var(--r-l);overflow:hidden;position:relative;
  box-shadow:0 18px 40px -30px rgba(41,28,14,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
a.promo__link:hover{transform:translateY(-3px);box-shadow:0 24px 46px -26px rgba(41,28,14,.75)}
a.promo__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.promo__pic,.promo__pic img{display:block;width:100%}
.promo__pic img{height:auto;aspect-ratio:var(--d);object-fit:cover}
@media (max-width:768px){
  .promo{padding-inline:clamp(.9rem,4vw,var(--gutter))}
  .promo__link{border-radius:var(--r-m)}
  .promo__pic img{aspect-ratio:var(--m)}
}

/* ==========================================================================
   Machine picker
   ========================================================================== */
.picker{position:relative;overflow:hidden}
.picker__layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;
}
@media (max-width:960px){.picker__layout{grid-template-columns:1fr;gap:2.2rem}}

/* No frame: the clip was graded so its backdrop is pure white, and `multiply`
   drops that white straight onto the section ground — the machine reads as if
   it were shot on the page itself. */
.picker__media{
  position:relative;margin:0;aspect-ratio:4/5;
  display:grid;place-items:center;
  /* `.wrap` sets z-index, which isolates the stacking context — without a
     backdrop of its own the video's multiply would have nothing to blend into,
     so paint the section ground right here. */
  background:var(--bg);
}
@media (max-width:960px){.picker__media{aspect-ratio:16/11}}
/* The still and the clip occupy the same square. The still is always painted;
   the clip is transparent until it reports it is playing, so a phone that will
   not play video simply shows the photograph. */
.picker__still,
.picker__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
}
.picker__video{opacity:0;transition:opacity .5s var(--ease)}
.picker__media.is-playing .picker__video{opacity:1}
/* once the clip is up the still underneath is redundant, and leaving it behind
   a semi-transparent frame would double the image during the fade */
.picker__media.is-playing .picker__still{opacity:0;transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .picker__video{display:none}
  .picker__media.is-playing .picker__still{opacity:1}
}

.picker__video{
  /* Absolutely placed, not just width/height:100%.
     .picker__media is a centring grid, so a percentage height on the item did
     not resolve — the video kept its own 720x962 ratio and stood 458px tall
     inside a 236px box. With overflow:hidden on the media that clipped the
     machine away and left a slice of empty frame, which read as a broken
     video on a phone. Anchoring to the box makes object-fit:contain do its
     job at every width. */
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
  /* h.264 never quite reaches 255 on the graded backdrop — lift it the last
     few levels so multiply lands exactly on the section ground */
  filter:brightness(1.04);
}
/* Reduced motion means "don't animate", not "show nothing" — the script parks
   the clip on a frame instead, so the element has to stay visible. Hiding it
   here is what left phones with Reduce Motion on looking at an empty box. */
@media (prefers-reduced-motion:reduce){
  .picker__dot{animation:none}
}

/* Safari drops a blended <video> unless it owns a compositing layer. */
.picker__video{transform:translateZ(0);backface-visibility:hidden}

/* Where the blend is unavailable, a white panel beats an invisible machine.
   Two ways it can be unavailable:

   1. the property is unsupported — @supports catches that;
   2. it is supported but does nothing useful on a <video>. iOS decodes video
      into its own hardware layer, which cannot take part in mix-blend-mode, so
      multiply renders the element completely invisible. The poster frame goes
      with it, which is why a phone that blocks autoplay showed an empty box
      rather than a still. @supports cannot see this — the property *is*
      supported — so .no-vblend is set from JS.

   Both land on the same treatment: the machine on a white panel. */
@supports not (mix-blend-mode:multiply){
  .picker__media{background:#fff;border-radius:var(--r-xl);overflow:hidden}
  .picker__video{mix-blend-mode:normal;filter:none}
}
.no-vblend .picker__media{background:#fff;border-radius:var(--r-xl);overflow:hidden}
.no-vblend .picker__video{mix-blend-mode:normal;filter:none}

/* On phones and tablets the blend is simply not attempted. Whether a given
   handset composites a blended <video> correctly is not something the page can
   test, and the failure mode is the worst one available — a blank box where the
   product should be. The white panel looks deliberate and always renders. */
@media (max-width:960px){
  .picker__media{background:#fff;border-radius:var(--r-xl);overflow:hidden}
  .picker__video{mix-blend-mode:normal;filter:none}
}
.picker__badge{
  position:absolute;inset-inline-start:0;bottom:2%;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:rgba(22,15,7,.82);backdrop-filter:blur(10px);
  color:var(--cream);font-size:var(--step--1);font-weight:500;
}
.picker__dot{width:7px;height:7px;border-radius:50%;background:var(--crema-lite);flex:none;
  animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* The video that shared this row is gone, so the picker owns the section:
   one centred column of copy with the machines spread across the full width. */
.picker__layout{display:block}
.picker__copy{display:grid;gap:1.15rem;align-content:center;justify-items:center;text-align:center}
.picker__copy .lede{max-width:58ch}
.picker__grid{
  display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.5rem,1.1vw,1rem);margin-top:.9rem;
}
@media (max-width:1100px){.picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.picker__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.picker__all{
  display:inline-flex;align-items:center;gap:.5rem;justify-self:center;
  font-size:var(--step--1);color:var(--ink-3);
  border-bottom:1px solid transparent;padding-bottom:.15rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.picker__all:hover{color:var(--crema);border-bottom-color:currentColor}

/* machine card — compact, the disc echoes the header medallion */
.mach{
  position:relative;display:grid;gap:.5rem;place-items:center;text-align:center;
  padding:clamp(.9rem,1.6vw,1.15rem) .6rem clamp(.8rem,1.4vw,1rem);
  border-radius:var(--r-l);background:var(--white);border:1px solid var(--line-2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  overflow:hidden;isolation:isolate;
}
.mach::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(120% 90% at 50% 0%,rgba(214,167,86,.15),transparent 70%);
}
.mach:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.mach:hover::before{opacity:1}
.mach__logo{
  /* the client asked for these bigger — the disc is the thing you scan for.
     With the video gone the row runs the full width, so each card has more
     room and the disc grows with it. */
  width:clamp(76px,6.6vw,108px);height:clamp(76px,6.6vw,108px);border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 0 0 1px rgba(41,28,14,.1),0 8px 18px -10px rgba(11,7,4,.8);
  transition:transform .45s var(--ease);
}
.mach__logo::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--crema);
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.mach:hover .mach__logo{transform:scale(1.05)}
.mach:hover .mach__logo::after{opacity:.5;transform:scale(1)}
.mach__logo img{width:100%;height:100%;object-fit:contain;padding:10%}
.mach__logo img.inv{filter:brightness(0) invert(1);opacity:.92}
.mach__name{font-size:var(--step--1);font-weight:600;line-height:1.2}
.mach__count{font-size:.68rem;color:var(--ink-3)}
.mach__go{display:none}

/* ==========================================================================
   Category rail
   ========================================================================== */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(clamp(230px,26vw,340px),1fr);
  gap:clamp(.7rem,1.4vw,1.2rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.5rem;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scroll-padding-inline:var(--gutter);   /* snap points line up with the padding edge */
}
.rail::-webkit-scrollbar{display:none}
/* the imagery is clean product-on-white, so the caption plate is light too */
.cat{
  position:relative;scroll-snap-align:start;border-radius:var(--r-l);overflow:hidden;
  aspect-ratio:3/4;display:flex;align-items:flex-end;isolation:isolate;background:var(--white);
  border:1px solid var(--line-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.cat__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;   /* lift the product out of the caption zone */
  transition:transform 1s var(--ease)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 34%)}
.cat:hover .cat__img{transform:scale(1.05)}
.cat__body{padding:clamp(1.2rem,2.4vw,1.9rem);display:grid;gap:.3rem;width:100%;color:var(--espresso)}
.cat__kicker{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--crema);font-weight:600}
.cat__title{font-size:var(--step-1);font-weight:600;line-height:1.15}
.cat__go{display:flex;align-items:center;gap:.45rem;font-size:var(--step--1);color:var(--ink-3);margin-top:.35rem}
.cat__go svg{transition:transform .4s var(--ease)}
.cat:hover .cat__go svg{transform:translateX(-5px)}

/* ---------- decorative loose beans ---------- */
.beans-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beans-deco img{
  position:absolute;width:var(--w,72px);height:auto;opacity:var(--o,.16);
  transform:rotate(var(--r,0deg));filter:blur(var(--b,0px));
}
.sect,.beans,.picker,.footer{position:relative}
.sect>.wrap,.footer>.wrap{position:relative;z-index:1}

/* ---------- scroll progress ---------- */
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:80;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:100% 50%;
  background:linear-gradient(to left,var(--crema-lite),var(--crema));
}

/* ---------- filter chips ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.filter{
  padding:.45em 1.05em;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-2);background:var(--white);white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter:hover{border-color:var(--latte)}
.filter.is-on{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.filter span{opacity:.55;font-size:.9em;margin-inline-start:.3em}

/* ==========================================================================
   Product cards
   ========================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:clamp(.7rem,1.4vw,1.3rem);align-items:stretch}
.prod{
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-m);
  background:var(--white);border:1px solid var(--line-2);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.prod:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow)}
.prod__media{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.prod__media img{width:100%;height:100%;object-fit:contain;padding:11%;transition:transform .7s var(--ease)}
.prod:hover .prod__media img{transform:scale(1.06)}
/* the numeral reads left-to-right; the badge itself follows the page */
.prod__badge bdi{direction:ltr;unicode-bidi:isolate}
.prod__badge{
  position:absolute;top:.7rem;inset-inline-start:.7rem;z-index:2;
  padding:.3em .75em;border-radius:var(--r-pill);background:var(--espresso);color:var(--crema-lite);
  font-size:.66rem;font-weight:600;letter-spacing:.08em;
}
.prod__badge--sale{background:#8E3B22;color:#FFE6D6}
/* the wishlist heart's own styles live in shop.css, where the behaviour is */
.prod__body{padding:clamp(.85rem,1.6vw,1.15rem);display:flex;flex-direction:column;gap:.28rem;flex:1}
.prod__brand{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);font-weight:600}
.prod__name{font-size:var(--step-0);font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;max-height:2.7em}
.prod__unit{font-size:var(--step--1);color:var(--ink-3)}
.prod__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.7rem}
.prod__price{display:flex;align-items:baseline;gap:.45rem;font-weight:700;font-size:var(--step-1)}
.prod__price del{font-size:var(--step--1);font-weight:400;color:var(--ink-3)}
.prod__add{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--espresso);color:var(--cream);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.prod__add:hover{transform:scale(1.09);background:var(--crema)}
.prod__add:active{transform:scale(.94)}

/* A rail at every width, not only on phones. It used to wrap into rows on
   desktop, which left the arrows with nothing to scroll — so they hid, and the
   section read as a plain grid. */
.prod-grid--scroll{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(230px,23vw,290px);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scroll-padding-inline:var(--gutter);
  padding-bottom:.4rem;
}
.prod-grid--scroll::-webkit-scrollbar{display:none}
.prod-grid--scroll .prod{scroll-snap-align:start}
@media (max-width:980px){ .prod-grid--scroll{grid-auto-columns:38vw} }

@media (max-width:720px){
  .prod-grid--scroll{grid-auto-columns:64vw}

  /* Browsing grids go two-up on phones — one long column buries the range. */
  .prod-grid:not(.prod-grid--scroll){grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .prod-grid:not(.prod-grid--scroll) .prod__body{padding:.7rem .75rem .8rem}
  .prod-grid:not(.prod-grid--scroll) .prod__media img{padding:10%}
  .prod-grid:not(.prod-grid--scroll) .prod__foot{padding-top:.55rem;gap:.35rem}
  .prod-grid:not(.prod-grid--scroll) .prod__add{width:34px;height:34px}
  .prod-grid:not(.prod-grid--scroll) .prod__add svg{width:16px;height:16px}
  .prod-grid:not(.prod-grid--scroll) .prod__price{font-size:var(--step-0)}
  .prod-grid:not(.prod-grid--scroll) .prod__badge{top:.45rem;inset-inline-start:.45rem;font-size:.6rem;padding:.25em .6em}
  /* No hover on touch — keep the wishlist button permanently available. */
  .prod-grid:not(.prod-grid--scroll) .prod__fav{opacity:1;transform:none;width:30px;height:30px}
}

/* ==========================================================================
   Cinematic pinned story — the dark interlude
   ========================================================================== */
.story{position:relative}
.story__track{height:300svh}
.story__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;
  padding-block:clamp(4.5rem,10vh,7.5rem) clamp(3rem,7vh,5rem);
}
.story__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(58% 44% at 50% 66%,rgba(214,167,86,.2),transparent 68%)}

.story__steps{position:relative;z-index:2;grid-row:1;display:grid;place-items:center;
  width:100%;pointer-events:none}
.story__step{
  grid-area:1/1;text-align:center;max-width:min(90vw,660px);padding-inline:var(--gutter);
  opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.story__step.is-on{opacity:1;transform:none}
.story__step h3{font-size:var(--step-3);font-weight:200;line-height:1.05;letter-spacing:-.02em}
.story__step h3 b{font-weight:700}
.story__step p{color:var(--ink-2);font-weight:400;margin-top:.8rem}
.story__num{font-size:.68rem;letter-spacing:.3em;color:var(--crema-lite);text-transform:uppercase;
  margin-bottom:.9rem;display:block}

/* three stages cross-fade in place — the object never leaves the safe area */
.story__objs{
  position:relative;z-index:1;grid-row:2;display:grid;place-items:center;
  width:100%;height:100%;min-height:0;
}
.story__obj{
  grid-area:1/1;width:auto;
  max-height:min(100%, clamp(150px,22vw,290px));max-width:min(72vw,320px);
  object-fit:contain;will-change:transform,opacity;
  opacity:0;transform:scale(.86) translateY(18px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.72));
}
.story__obj.is-on{opacity:1}

.story__rail{grid-row:3;display:flex;gap:.5rem;z-index:2}
.story__rail i{width:26px;height:3px;border-radius:2px;background:rgba(225,212,194,.22);
  transition:background .4s var(--ease),width .4s var(--ease)}
.story__rail i.is-on{background:var(--crema-lite);width:40px}

/* mobile: the app bar eats the bottom of the pin, and 100svh jumps as the
   browser chrome hides — lock the pin to the visible area and shrink the object */
@media (max-width:860px){
  .story__track{height:260svh}
  .story__pin{
    height:calc(100svh - 76px);
    padding-block:clamp(2.2rem,7vh,4rem) clamp(1.4rem,4vh,2.4rem);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .story__step h3{font-size:clamp(2.05rem,8vw,2.7rem)}
  .story__step p{font-size:var(--step--1);margin-top:.6rem}
  .story__num{margin-bottom:.6rem}
  .story__obj{max-height:min(100%,34svh);max-width:62vw}
}

/* ==========================================================================
   Value props
   ========================================================================== */
/* it used to butt straight against the dark story block above it */
.sect--values{padding-block:clamp(3.5rem,7vw,6rem)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.value{background:var(--white);padding:clamp(1.5rem,3vw,2.2rem);display:grid;gap:.55rem;
  transition:background .4s var(--ease)}
.value:hover{background:var(--paper)}
/* the supplied icons are line drawings with far more detail than the little
   glyphs they replace, so they need room and a lighter touch */
/* The supplied icons are detailed line drawings at four different viewBoxes, so
   they need a fixed box and their own colour; `currentColor` in the files lets
   this one rule tint the whole row. `stroke-width` is set for the one that is
   drawn with strokes rather than fills. */
.value svg{
  width:42px;height:42px;color:var(--crema);flex:none;
  display:block;overflow:visible;
}
.value svg [stroke]{vector-effect:non-scaling-stroke}
.value{align-content:start;gap:.7rem}
.value h4{line-height:1.3}
@media (max-width:720px){ .value svg{width:34px;height:34px} }
.value h4{font-size:var(--step-0);font-weight:600}
.value p{font-size:var(--step--1);color:var(--ink-3);line-height:1.55}

/* ==========================================================================
   Beans — cream editorial
   ========================================================================== */
/* The section is one photographic band. The picture is bled to every edge and
   the copy sits on the empty half of the counter, so nothing is boxed. */
.beans{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;align-items:center;
  min-height:clamp(460px,44vw,660px);
  padding-block:clamp(3.5rem,7vw,6rem);
  border-block:1px solid rgba(41,28,14,.10);
}
.beans__bg{position:absolute;inset:0;z-index:0}
.beans__bg img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
/* physical `to left`: the subject is on the left of the photograph in every
   direction mode, so the scrim always fades from the copy side inwards */
.beans__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to left,
    var(--cream) 0 20%, rgba(225,212,194,.94) 32%,
    rgba(225,212,194,.62) 46%, rgba(225,212,194,0) 62%);
}
.beans .wrap{position:relative;z-index:1}
.beans__grid{display:grid;grid-template-columns:minmax(300px,.92fr) 1.08fr;align-items:center}
.beans__copy{display:grid;gap:1.4rem;align-content:start;max-width:44ch}
@media (max-width:980px){
  /* stacked: the picture reads as its own band, the copy on cream beneath it */
  .beans{display:block;min-height:0;padding-block:0}
  .beans__bg{position:relative;inset:auto;aspect-ratio:3/2;max-height:56vh}
  .beans__bg img{object-position:center}
  .beans__scrim{background:linear-gradient(to bottom,transparent 52%,rgba(225,212,194,.75) 82%,var(--cream))}
  .beans .wrap{padding-block:1.5rem clamp(3rem,8vw,4rem);margin-top:-8%}
  .beans__grid{grid-template-columns:1fr}
  .beans__copy{max-width:none}
}

/* bags stand on a shared baseline, nothing cropped, nothing boxed */
.beans__stack{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(.4rem,1.6vw,1.6rem);min-height:clamp(230px,26vw,360px);
}
.beans__stack::after{      /* soft shadow they all sit on */
  content:"";position:absolute;inset-inline:4%;bottom:0;height:30px;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(41,28,14,.3),transparent 74%);
  filter:blur(10px);
}
.beanbag{
  position:relative;z-index:1;display:block;flex:0 1 auto;
  transition:transform .55s var(--ease),filter .55s var(--ease);
}
.beanbag img{
  width:auto;height:clamp(160px,20vw,290px);object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 22px 22px rgba(41,28,14,.3));
}
.beanbag:nth-child(3) img{height:clamp(190px,24vw,340px)}   /* hero bag, dead centre of five */
.beanbag:hover{transform:translateY(-12px) scale(1.03);z-index:2}
.beans__brands{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  padding:.45em 1em;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-2);background:var(--white);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.chip:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}

/* ==========================================================================
   Magazine
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(1rem,2vw,1.8rem)}
.post{display:grid;gap:.9rem;align-content:start}
.post__media{border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/10;background:var(--white);border:1px solid var(--line-2)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post__media img{transform:scale(1.06)}
.post__meta{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crema);font-weight:600}
.post h3{font-size:var(--step-1);font-weight:500;line-height:1.25}
.post p{color:var(--ink-3);font-size:var(--step--1);line-height:1.6}

/* ==========================================================================
   Footer club sign-up
   ========================================================================== */
.club{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding-bottom:clamp(2.2rem,4vw,3.4rem);
  border-bottom:1px solid var(--line-2);margin-bottom:clamp(2.2rem,4vw,3.4rem);
}
@media (max-width:820px){.club{grid-template-columns:1fr;gap:1.5rem}}
.club__copy{display:grid;gap:.7rem}
.club__copy .h-sect{font-size:var(--step-2)}
.club__copy .lede{font-size:var(--step-0)}
.club__form{display:flex;gap:.5rem;flex-wrap:wrap;width:min(100%,460px)}
.club__form input{
  flex:1 1 210px;min-width:0;padding:1em 1.3em;border-radius:var(--r-pill);
  background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--cream);font:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.club__form input::placeholder{color:var(--ink-3)}
.club__form input:focus{outline:none;border-color:var(--crema-lite);background:rgba(0,0,0,.45)}
.club__fine{flex:1 0 100%;font-size:var(--step--1);color:var(--ink-3)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{padding-block:clamp(3rem,6vw,4.5rem) 0}
.brand--footer{justify-self:start;margin-inline-start:0}
.brand--footer .brand__badge{width:92px;height:92px}
.brand--footer .brand__mark{box-shadow:0 0 0 1px rgba(225,212,194,.18)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(1.6rem,4vw,3rem)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h5{font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:1.1rem;font-weight:600}
.footer li+li{margin-top:.6rem}
.footer a{color:var(--ink-3);font-size:var(--step-0);transition:color .3s var(--ease)}
.footer a:hover{color:var(--crema-lite)}
.footer .brand a,.footer .brand{color:var(--cream)}
.footer__about p{color:var(--ink-3);font-size:var(--step--1);line-height:1.7;max-width:34ch;margin-top:1.1rem}
.footer__social{display:flex;gap:.5rem;margin-top:1.3rem}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.5rem;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:var(--step--1);color:var(--ink-3);
}
.pay{display:flex;gap:.4rem;align-items:center}
.pay img{height:22px;width:auto;opacity:.65;border-radius:3px}

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search{position:fixed;inset:0;z-index:90}
.search[hidden]{display:none}
.search__scrim{
  position:absolute;inset:0;background:rgba(18,12,6,.62);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s var(--ease);
}
.search.is-open .search__scrim{opacity:1}
.search__panel{
  position:relative;width:min(720px,calc(100vw - var(--gutter)*2));
  margin:clamp(4rem,12vh,9rem) auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 40px 90px -40px rgba(41,28,14,.7);
  overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);
  max-height:min(72vh,640px);
  opacity:0;transform:translateY(-14px) scale(.985);
  transition:opacity .35s var(--ease),transform .4s var(--ease);
}
.search.is-open .search__panel{opacity:1;transform:none}

.search__bar{
  display:flex;align-items:center;gap:.75rem;
  padding:clamp(.9rem,2vw,1.25rem) clamp(1rem,2.4vw,1.5rem);
  border-bottom:1px solid var(--line-2);background:var(--white);
}
.search__icon{width:22px;height:22px;color:var(--ink-3);flex:none}
.search__bar input{
  flex:1;min-width:0;border:0;background:none;font:inherit;
  font-size:var(--step-1);color:var(--ink);padding:.2rem 0;
}
.search__bar input::placeholder{color:var(--ink-3)}
.search__bar input:focus{outline:none}
.search__bar input::-webkit-search-cancel-button{display:none}
/* The only close control in the bar. There used to be a clear-input "X" beside
   it, and the two glyphs read as two close buttons — one of which appeared to
   do nothing. */
.search__close{flex:none;cursor:pointer}
.search__esc{
  font-size:.62rem;letter-spacing:.12em;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line);border-radius:6px;padding:.3em .5em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.search__close:hover .search__esc{color:var(--ink);border-color:var(--latte)}

.search__body{overflow-y:auto;padding:clamp(.9rem,2vw,1.25rem) clamp(1rem,2.4vw,1.5rem) 1.25rem;
  overscroll-behavior:contain}
.search__block+.search__block{margin-top:1.3rem}
.search__label{
  display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--crema);font-weight:600;margin-bottom:.8rem;
}
.search__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.search__chip{
  padding:.5em 1.05em;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--white);font-size:var(--step--1);color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.search__chip:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}

.search__hit{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:.9rem;
  padding:.6rem;border-radius:var(--r-m);
  transition:background .25s var(--ease);
}
.search__hit+.search__hit{margin-top:.15rem}
.search__hit:hover,.search__hit:focus-visible{background:var(--surface-2);outline:none}
.search__thumb{
  width:56px;height:56px;border-radius:var(--r-s);background:#fff;
  border:1px solid var(--line-2);overflow:hidden;display:grid;place-items:center;
}
.search__thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
.search__hit-txt{min-width:0;display:grid;gap:.1rem}
.search__hit-brand{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);font-weight:600}
.search__hit-name{font-size:var(--step-0);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search__hit-name mark{background:rgba(214,167,86,.35);color:inherit;border-radius:3px;padding:0 .1em}
.search__hit-price{font-weight:700;font-size:var(--step-0);white-space:nowrap}
.search__empty{color:var(--ink-3);font-size:var(--step-0);padding:1.5rem .6rem;text-align:center}

@media (max-width:640px){
  .search__panel{
    width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0;border:0;
    grid-template-rows:auto minmax(0,1fr);
  }
  .search__bar{padding-top:max(1rem,env(safe-area-inset-top))}
  .search__esc{display:none}
  .search__close::after{
    content:"סגירה";font-size:var(--step--1);color:var(--ink-3);
  }
}

/* ==========================================================================
   Mobile app bar + drawer
   ========================================================================== */
.appbar{
  position:fixed;inset-inline:0;bottom:0;z-index:45;display:none;
  padding:.5rem max(.6rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left));
  background:rgba(250,246,240,.9);backdrop-filter:blur(22px) saturate(1.5);
  border-top:1px solid var(--line);
  transition:transform .45s var(--ease);
}
.appbar.is-down{transform:translateY(115%)}
.appbar__row{display:grid;grid-template-columns:repeat(5,1fr);gap:.2rem}
.appbar__item{
  display:grid;justify-items:center;gap:.28rem;padding:.45rem .2rem;border-radius:var(--r-m);
  font-size:.62rem;color:var(--ink-3);position:relative;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.appbar__item svg{width:21px;height:21px}
.appbar__item.is-on{color:var(--espresso);font-weight:600}
.appbar__item:active{background:var(--surface-2)}
.appbar__badge{
  position:absolute;top:.15rem;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:var(--r-pill);background:var(--crema);color:#fff;
  font-size:.6rem;font-weight:700;line-height:1;
}
@media (max-width:1080px){ .appbar{display:block} body{padding-bottom:76px} }

.drawer{position:fixed;inset:0;z-index:70;visibility:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(22,15,7,.55);opacity:0;transition:opacity .45s var(--ease);backdrop-filter:blur(3px)}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,88vw);
  background:var(--paper);border-inline-start:1px solid var(--line);
  transform:translateX(-100%);transition:transform .5s var(--ease);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
}
[dir="rtl"] .drawer__panel{transform:translateX(100%)}
.drawer.is-open{visibility:visible}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--gutter);border-bottom:1px solid var(--line-2)}
.drawer__body{overflow-y:auto;padding:1.2rem var(--gutter)}
.drawer__search{
  display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem;
  padding:.85rem 1.1rem;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);color:var(--ink-3);
}
.drawer__search svg{flex:none}
.drawer__search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink)}
.drawer__search input:focus{outline:none}
.drawer__search:focus-within{border-color:var(--crema)}
/* The label had no top margin at all, so it sat flush against the bottom of
   the account card — closer to the thing above it than to the discs it names. */
.drawer__brands{margin-top:1.5rem;margin-bottom:1.2rem}
.drawer__label{
  display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--crema);font-weight:600;margin-bottom:.9rem;
}
.drawer__discs{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.drawer__discs .btile{padding:.7rem .3rem .8rem}
.drawer__discs .btile__disc{width:52px;height:52px}
.drawer__discs .btile__name{font-size:.72rem}
.drawer__discs .btile__count{display:none}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line-2);font-size:var(--step-1);font-weight:400;
  transition:color .3s var(--ease),padding-inline-start .3s var(--ease);
}
.drawer__link:hover{color:var(--crema);padding-inline-start:.4rem}
.drawer__foot{padding:1.2rem var(--gutter) max(1.2rem,env(safe-area-inset-bottom));border-top:1px solid var(--line-2);display:grid;gap:.6rem}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
/* the hidden state only exists once JS has confirmed it can reveal it again */
.js [data-rise]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js [data-rise].is-in{opacity:1;transform:none}
.js [data-rise-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-rise-stagger].is-in>*{opacity:1;transform:none}

/* ==========================================================================
   Floating widgets — WhatsApp, accessibility, consent
   ========================================================================== */
.fabs{
  position:fixed;inset-inline-start:clamp(.9rem,2vw,1.6rem);
  bottom:clamp(.9rem,2vw,1.6rem);z-index:70;
  display:grid;gap:.6rem;
}
@media (max-width:1080px){ .fabs{bottom:calc(76px + .8rem)} }
.fab{
  width:clamp(48px,4vw,56px);height:clamp(48px,4vw,56px);border-radius:50%;
  display:grid;place-items:center;position:relative;
  box-shadow:0 12px 28px -12px rgba(41,28,14,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.fab svg{width:55%;height:55%}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 34px -14px rgba(41,28,14,.85)}
.fab:active{transform:scale(.95)}
.fab--wa{background:#25D366;color:#fff}
.fab--a11y{background:var(--espresso);color:var(--cream);border:1px solid rgba(225,212,194,.2)}
.fab__tip{
  position:absolute;inset-inline-start:calc(100% + .55rem);top:50%;translate:0 -50%;
  white-space:nowrap;padding:.4em .8em;border-radius:var(--r-pill);
  background:var(--espresso);color:var(--cream);font-size:var(--step--1);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),translate .3s var(--ease);
}
.fab:hover .fab__tip,.fab:focus-visible .fab__tip{opacity:1;translate:.25rem -50%}
@media (max-width:640px){ .fab__tip{display:none} }

/* ---------- accessibility panel ---------- */
.a11y{
  position:fixed;inset-inline-start:clamp(.9rem,2vw,1.6rem);
  bottom:calc(clamp(.9rem,2vw,1.6rem) + clamp(48px,4vw,56px)*2 + 1.2rem);
  z-index:71;width:min(340px,calc(100vw - 2rem));
  background:var(--paper);color:var(--espresso);
  border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 30px 70px -30px rgba(41,28,14,.6);
  opacity:0;transform:translateY(10px) scale(.98);transform-origin:0 100%;
  transition:opacity .28s var(--ease),transform .3s var(--ease);
}
.a11y[hidden]{display:none}
.a11y.is-open{opacity:1;transform:none}
@media (max-width:1080px){ .a11y{bottom:calc(76px + clamp(48px,4vw,56px)*2 + 2rem)} }
.a11y__head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.1rem;border-bottom:1px solid var(--line-2)}
.a11y__head h2{font-size:var(--step-0);font-weight:600}
.a11y__x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2)}
.a11y__x svg{width:14px;height:14px}
.a11y__body{padding:1rem 1.1rem 1.1rem;display:grid;gap:.9rem}
.a11y__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.a11y__label{font-size:var(--step--1);color:var(--ink-2)}
.a11y__stepper{display:flex;align-items:center;gap:.2rem;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.15rem;background:var(--white)}
.a11y__stepper button{width:30px;height:30px;border-radius:50%;font-size:1.05rem;line-height:1;
  display:grid;place-items:center;transition:background .25s var(--ease)}
.a11y__stepper button:hover{background:var(--surface-2)}
.a11y__stepper span{min-width:3.4em;text-align:center;font-size:var(--step--1);font-weight:600}
.a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.a11y__opt{
  display:grid;justify-items:center;gap:.35rem;text-align:center;
  padding:.75rem .4rem;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--white);
  font-size:.72rem;line-height:1.25;color:var(--ink-2);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.a11y__opt svg{width:20px;height:20px}
.a11y__opt:hover{border-color:var(--latte)}
.a11y__opt.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
.a11y__reset{
  padding:.6rem;border-radius:var(--r-pill);border:1px dashed var(--line);
  font-size:var(--step--1);color:var(--ink-3);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.a11y__reset:hover{color:var(--crema);border-color:var(--crema)}
.a11y__note{font-size:.7rem;line-height:1.5;color:var(--ink-3)}
.a11y__note a{color:var(--crema);text-decoration:underline;text-underline-offset:2px}

/* ---------- what the toggles actually do ---------- */
html{font-size:calc(100% * var(--a11y-font, 1))}
.a11y-contrast{--ink:#000;--ink-2:#1a1a1a;--ink-3:#333;--bg:#fff;--paper:#fff;--white:#fff;
  --line:rgba(0,0,0,.5);--line-2:rgba(0,0,0,.3);--crema:#6b4400;--accent:#6b4400}
.a11y-contrast .on-dark{--ink:#fff;--ink-2:#f0f0f0;--ink-3:#ddd;--bg:#000;--panel:#000;
  --line:rgba(255,255,255,.6);--line-2:rgba(255,255,255,.35);--accent:#ffd479;--crema-lite:#ffd479}
.a11y-contrast .on-cream{--bg:#fff}
.a11y-contrast img:not(.brand__mark){filter:contrast(1.15)}
.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
.a11y-readable,.a11y-readable *{font-family:Arial,"Segoe UI",system-ui,sans-serif!important;letter-spacing:normal!important}
.a11y-still *,.a11y-still *::before,.a11y-still *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
.a11y-still .marquee__track{animation:none!important}
.a11y-spacing p,.a11y-spacing li,.a11y-spacing .lede{line-height:2!important;letter-spacing:.02em}
.a11y-focus :focus-visible{outline:4px solid #0a58ff!important;outline-offset:3px!important}

/* ---------- privacy notice ---------- */
.consent{
  position:fixed;inset-inline:0;bottom:0;z-index:72;
  padding:0 clamp(.7rem,2vw,1.4rem) clamp(.7rem,2vw,1.4rem);
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.consent[hidden]{display:none}
.consent.is-on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:1080px){ .consent{bottom:76px} }
.consent__inner{
  width:min(720px,100%);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);flex-wrap:wrap;
  padding:clamp(.85rem,1.8vw,1.15rem) clamp(1rem,2.2vw,1.5rem);
  background:rgba(22,15,7,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(225,212,194,.16);border-radius:var(--r-l);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8);
}
.consent__txt{flex:1 1 260px;min-width:0;font-size:var(--step--1);line-height:1.55;color:var(--oat)}
.consent__txt a{color:var(--crema-lite);text-decoration:underline;text-underline-offset:2px}
.consent__btns{display:flex;gap:.45rem;flex:0 0 auto}
.consent__btns .btn{background:var(--crema-lite);color:var(--espresso)}
.consent__btns .btn--ghost{background:none;color:var(--oat);border-color:rgba(225,212,194,.3)}
.consent__btns .btn--ghost:hover{background:rgba(225,212,194,.12)}
@media (max-width:520px){
  .consent__inner{flex-direction:column;align-items:stretch;text-align:center;gap:.9rem}
  /* in a column the flex-basis becomes a HEIGHT — that was inflating the bar */
  .consent__txt{flex:0 0 auto}
  .consent__btns{justify-content:center;flex:0 0 auto}
  .consent__btns .btn{flex:1}
}

/* ==========================================================================
   Account — the header button, its menu, and the drawer card
   ========================================================================== */
.acct{position:relative;display:inline-flex}
.acct__btn{position:relative}
/* a quiet dot, so a signed-in visitor can tell at a glance */
.acct__pip{
  position:absolute;top:7px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--bg);
}

.acct__menu{
  position:absolute;top:calc(100% + .55rem);inset-inline-end:0;z-index:70;min-width:212px;
  display:grid;gap:.1rem;padding:.5rem;
  border-radius:var(--r-l);background:var(--white);border:1px solid var(--line-2);
  box-shadow:0 22px 44px -22px rgba(41,28,14,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.acct:hover .acct__menu,
.acct:focus-within .acct__menu{opacity:1;visibility:visible;transform:none}

.acct__hello{
  display:block;padding:.45rem .7rem .55rem;margin-bottom:.15rem;
  border-bottom:1px solid var(--line-2);
  font-size:.7rem;letter-spacing:.06em;color:var(--ink-3);font-weight:600;
}
.acct__item{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border-radius:var(--r-s);
  font-size:var(--step--1);color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.acct__item svg{width:16px;height:16px;flex:none;color:var(--clay)}
.acct__item:hover{background:var(--surface-2);color:var(--ink)}
.acct__item--out{margin-top:.15rem;border-top:1px solid var(--line-2);border-radius:0 0 var(--r-s) var(--r-s)}
.acct__item--out svg{color:#8E3B22}

/* On a dark header the menu still reads as a light card — keep it that way,
   but the trigger icon inherits the header's own colour. */
.on-dark .acct__menu{color:var(--ink)}

/* ---------- the drawer card ---------- */
.drawer__acct{
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem .95rem;border-radius:var(--r-l);
  background:var(--cream);border:1px solid var(--line-2);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.drawer__acct:hover{border-color:var(--crema)}
.drawer__acct-ico{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--espresso);color:var(--cream);
}
.drawer__acct-ico svg{width:21px;height:21px}
.drawer__acct-txt{display:grid;gap:.1rem;flex:1;min-width:0}
.drawer__acct-txt b{font-size:var(--step-0);font-weight:600;line-height:1.25}
.drawer__acct-txt span{font-size:.76rem;color:var(--ink-3);line-height:1.3}
.drawer__acct > svg{flex:none;color:var(--ink-3)}

.drawer__acct-quick{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:-.2rem;padding-inline:.2rem;
}
.drawer__acct-quick a{
  padding:.35em .8em;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.74rem;color:var(--ink-2);
}
.drawer__acct-quick a:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}

/* On touch there is no hover, and the desktop search button is already hidden
   there, so the icon simply opens the account page — no dropdown to trap a tap. */
@media (hover:none),(max-width:900px){
  .acct__menu{display:none}
}

/* ==========================================================================
   Light islands
   A white or cream panel sitting inside an .on-dark section inherits the dark
   section's cream ink, which lands invisible on its own light ground. This
   restores the light token set for the panel and everything under it.
   ========================================================================== */
.on-light{
  --bg:var(--paper);
  --panel:var(--white);
  --ink:var(--espresso);
  --ink-2:#5B4230;
  --ink-3:#8C7660;
  --accent:var(--crema);
  --on-accent:#FFFFFF;
  --line:rgba(41,28,14,.13);
  --line-2:rgba(41,28,14,.07);
  --surface:rgba(41,28,14,.035);
  --surface-2:rgba(41,28,14,.07);
  color:var(--ink);
}

/* ==========================================================================
   Capsule hub — the shelf picker on the umbrella capsules category
   ========================================================================== */
.caphub__head{max-width:56ch;margin-bottom:clamp(1.6rem,3.4vw,2.6rem);display:grid;gap:.7rem}
.caphub__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.7rem,1.6vw,1rem);
}
.captile{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:clamp(.9rem,2vw,1.15rem);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-l);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.captile:hover{border-color:var(--latte);background:var(--paper);transform:translateY(-2px)}
.captile__disc{
  /* The brand marks are cream on transparent — they are drawn for a dark disc,
     which is what the machine picker gives them. On the light disc this had
     they were all but invisible. */
  width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 0 0 1px rgba(41,28,14,.1),0 6px 14px -8px rgba(11,7,4,.8);
  color:var(--crema-lite);overflow:hidden;   /* the accent tuned for dark grounds */
  transition:transform .35s var(--ease);
}
.captile:hover .captile__disc{transform:scale(1.06)}
.captile__disc img{width:100%;height:100%;object-fit:contain;padding:17%}
.captile__disc svg{width:24px;height:24px}
.captile__txt{min-width:0;display:grid;gap:.15rem}
.captile__kicker{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);font-weight:600;
}
.captile__name{font-size:var(--step-0);font-weight:600;line-height:1.3}
/* the arrow points the way the language reads */
.captile__go{width:18px;height:18px;flex:none;color:var(--ink-3);transition:transform .3s var(--ease),color .3s var(--ease)}
.captile:hover .captile__go{color:var(--espresso);transform:translateX(-4px)}
.caphub__all{margin-top:clamp(1.6rem,3.4vw,2.4rem);display:flex;justify-content:center}

/* ==========================================================================
   Welcome — the one-time "we redesigned" note
   ========================================================================== */
/* Above the search overlay (90) so it is never half-covered, below nothing. */
.welcome{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--gutter)}
.welcome[hidden]{display:none}
.welcome__scrim{
  position:absolute;inset:0;background:rgba(18,12,6,.66);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .5s var(--ease);
}
.welcome.is-open .welcome__scrim{opacity:1}
.welcome__panel{
  position:relative;width:min(460px,100%);max-height:calc(100dvh - 2rem);overflow-y:auto;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(1.6rem,4vw,2.3rem);text-align:center;
  box-shadow:0 40px 90px -30px rgba(11,7,4,.7);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.welcome.is-open .welcome__panel{opacity:1;transform:none}
/* a warm seam along the top edge, the same accent the hero uses */
.welcome__panel::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,transparent,var(--crema-lite),transparent);
}
.welcome__x{
  position:absolute;top:.7rem;inset-inline-end:.7rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.welcome__x svg{width:16px;height:16px}
.welcome__x:hover{background:var(--surface-2);color:var(--ink)}
.welcome__mark{
  width:72px;height:72px;margin:0 auto .9rem;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 10px 24px -12px rgba(11,7,4,.9);
}
.welcome__mark img{width:64%;height:64%;object-fit:contain}
.welcome__kicker{
  display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--crema);font-weight:600;margin-bottom:.35rem;
}
.welcome__title{font-size:clamp(1.5rem,4.6vw,1.95rem);line-height:1.15;font-weight:600}
.welcome__title em{font-style:normal;color:var(--crema)}
.welcome__body{margin-top:.7rem;color:var(--ink-2);font-size:var(--step-0);line-height:1.6}
.welcome__points{
  margin:1.15rem 0 0;padding:1rem;display:grid;gap:.6rem;text-align:start;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-m);
}
.welcome__points li{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.55rem;
  font-size:var(--step--1);color:var(--ink-2);line-height:1.5;
}
.welcome__points svg{width:16px;height:16px;color:var(--crema);margin-top:.15rem}
.welcome__cta{margin-top:1.15rem}
.welcome__foot{margin-top:.85rem;font-size:.72rem;color:var(--ink-3)}
.welcome__foot a{color:var(--crema);text-decoration:underline;text-underline-offset:2px}
body.welcome-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .welcome__scrim,.welcome__panel{transition:none}
}

/* the value rail sits directly under the bestsellers — halve the gap between */
.sect--tight{padding-top:0}
.sect__note{font-size:var(--step--1);color:var(--ink-3);margin-top:.35rem;max-width:52ch}


/* a brand tile with no logo file falls back to its initial */
.btile__initial{
  font-size:1.25rem;font-weight:600;letter-spacing:.02em;
  color:var(--crema-lite);line-height:1;
}

/* a roaster chip with its mark: the disc is dark because the marks are cream */
.chip--mark{display:inline-flex;align-items:center;gap:.55rem;padding-inline-start:.5rem}
.chip__mark{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
}
.chip__mark img{width:100%;height:100%;object-fit:contain;padding:10%}

/* the roaster row is the section's main navigation, so it is sized like it */
.beans__brands{gap:.6rem}
.beans__brands .chip{
  padding:.62em 1.15em;font-size:var(--step-0);font-weight:500;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
}
.beans__brands .chip--mark{padding-inline-start:.55rem}
.beans__brands .chip__mark{width:32px;height:32px}
.beans .btn{padding:1em 1.9em;font-size:var(--step-0)}
/* on a phone the row has to fit four names across two lines, not four */
@media (max-width:560px){
  .beans__brands{gap:.45rem}
  .beans__brands .chip{padding:.5em .9em;font-size:var(--step--1)}
  .beans__brands .chip__mark{width:24px;height:24px}
  .beans .btn{padding:.85em 1.5em;font-size:var(--step--1)}
}

/* ==========================================================================
   Round 3 — client corrections, 14 Sep
   ========================================================================== */

/* ---- Machine picker on the client's photograph ----
   The machine stands in the left corner of the frame, so the picker moves to
   the empty wall on the right (inline-start in RTL) and the six machines go
   three-by-two. A cream wash from the right keeps the small print legible over
   the darker stone without reaching the machine. */
.picker--photo{isolation:isolate;min-height:clamp(560px,50vw,780px);display:flex;align-items:center}
.picker--photo > .wrap{position:relative;z-index:1;flex:0 1 auto}   /* keep .wrap's own gutter-aware width */
.picker__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.picker__bg img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.picker__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(250,246,240,.9) 0 38%,rgba(250,246,240,.55) 56%,rgba(250,246,240,0) 72%);
}
.picker--photo .picker__copy{
  max-width:min(760px,58%);margin-inline-end:auto;
  justify-items:start;text-align:start;
}
.picker--photo .picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.picker--photo .picker__all{justify-self:start}
.picker--photo .mach{box-shadow:0 12px 28px -22px rgba(41,28,14,.7)}
@media (max-width:960px){
  .picker--photo{display:block;min-height:0;padding-top:0}
  .picker__bg{position:relative;inset:auto;aspect-ratio:1000/824;max-height:62vh}
  .picker__bg img{object-position:center}
  .picker__bg::after{background:linear-gradient(to bottom,rgba(250,246,240,0) 58%,var(--bg) 100%)}
  .picker--photo > .wrap{margin-top:-2.2rem}
  .picker--photo .picker__copy{max-width:none;margin-inline:0;justify-items:center;text-align:center}
  .picker--photo .picker__all{justify-self:center}
}
@media (max-width:520px){ .picker--photo .picker__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- Roasters as discs, the same component as the machine menus ---- */
.beans__brands--discs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem .25rem;max-width:480px;
}
.beans__brands--discs .btile{padding:.6rem .2rem .7rem}
.beans__brands--discs .btile__disc{width:clamp(52px,4.4vw,64px);height:clamp(52px,4.4vw,64px)}
.beans__brands--discs .btile__disc img{padding:12%}
.beans__brands--discs .btile__name{font-size:.78rem}
@media (max-width:980px){ .beans__brands--discs{max-width:none;margin-inline:auto} }

/* ---- Product rails in the category-card style ----
   Cream card, stronger frame, the brand in gold as the category kicker is.
   Product photos are shot on white; `multiply` over the light card drops that
   white, so the pack sits on the card instead of in a white square. */
.prod-grid--scroll .prod{
  border-radius:var(--r-l);
  background:linear-gradient(180deg,#FFFDFA 0%,#F4ECE1 100%);
  border:1px solid rgba(41,28,14,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 30px -24px rgba(41,28,14,.6);
}
.prod-grid--scroll .prod__media{background:transparent}
.prod-grid--scroll .prod__media img{mix-blend-mode:multiply;padding:10%}
.prod-grid--scroll .prod__body{padding:clamp(.95rem,1.8vw,1.3rem);gap:.35rem}
.prod-grid--scroll .prod__brand{color:var(--crema);letter-spacing:.24em;font-size:.66rem}
.prod-grid--scroll .prod__name{font-weight:600}
.prod-grid--scroll .prod__foot{border-top:1px solid rgba(41,28,14,.09);padding-top:.8rem}
@media (hover:hover){ .prod-grid--scroll .prod:hover{border-color:rgba(176,122,46,.5)} }

/* A touch starts a :hover that never ends — the card jumped up 4px and its
   shadow animated under the finger at the start of every swipe. */
@media (hover:none){
  .prod:hover,.cat:hover,.mach:hover,.btile:hover{transform:none;box-shadow:none}
  .prod:hover .prod__media img{transform:none}
}

/* ---- Swiping the rails ----
   Swiping worked, but it fought the finger. `mandatory` snapping dragged every
   short flick back to the card it started on, and nothing stopped a sideways
   swipe at the end of a rail from turning into the browser's back gesture.
   Proximity snapping still settles on a card after a real swipe, and a
   slightly narrower phone card lets the next one show at the edge, so the rail
   reads as something you can move. */
.rail,.prod-grid--scroll{
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:720px){ .prod-grid--scroll{grid-auto-columns:58vw} }

/* ---- Hero on a single photograph (round 3) ----
   Replaces the wall/counter split. Sized to the section itself, not to the
   rail, so `cover` crops the picture to the hero rather than to a box two
   screens tall. Positions are tuned to where the marble sits in the frame. */
.hero__photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.hero--light .hero__vign{
  background:
    linear-gradient(to bottom, rgba(253,250,247,.9) 0%, rgba(253,250,247,.35) 16%, rgba(253,250,247,0) 30%),
    radial-gradient(60% 34% at 50% 84%, rgba(253,250,247,.55), rgba(253,250,247,0) 70%);
}
@media (max-width:860px){ .hero__photo img{object-position:50% 50%} }
/* Desktop: the frame is 21:9 and the hero is closer to 3:2, so `cover` would
   crop the beans and the glass off the sides. Draw the photo at full width,
   anchored to the bottom, and fill what is above it with the wall's own tone —
   the picture's top rows fade into it. */
@media (min-width:861px){
  .hero__photo{background:#EEE1D1}
  .hero__photo picture{position:absolute;left:0;right:0;bottom:0}
  .hero__photo img{
    height:auto;object-fit:initial;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 18%);
  }
}
/* The capsules have to stand on the table, not in front of the wall: the
   photo is drawn a touch wider (raising its back edge) and the rail's
   horizon comes down, so every base lands inside the marble. */
@media (min-width:861px){
  .hero__photo picture{left:-5%;right:-5%}
  .hero__rail{--horizon:calc(var(--rail) * .93)}
}
/* On a phone the bean scatter runs under the intensity dots and the price;
   a soft light pool behind the copy keeps them legible without hiding the beans. */
@media (max-width:860px){
  .hero__copy::before{
    content:"";position:absolute;z-index:-1;left:50%;top:-4%;translate:-50% 0;
    width:130%;height:108%;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 48%,rgba(253,250,247,.82) 0%,rgba(253,250,247,.5) 55%,rgba(253,250,247,0) 100%);
  }
}

/* Roasters on a phone: two to a row, as white cards the same size as the
   "which machine" tiles, rather than four small discs. */
@media (max-width:720px){
  .beans__brands--discs{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;max-width:none}
  .beans__brands--discs .btile{
    gap:.55rem;padding:1rem .6rem .95rem;border-radius:var(--r-l);
    background:var(--white);border:1px solid var(--line-2);
    box-shadow:0 12px 26px -22px rgba(41,28,14,.55);
  }
  .beans__brands--discs .btile__disc{width:76px;height:76px}
  .beans__brands--discs .btile__name{font-size:var(--step--1);font-weight:600}
}
/* margin-inline:auto on a grid item shrinks it to its content — the cards came
   out 103px wide instead of filling the row like the machine tiles. */
@media (max-width:720px){ .beans__brands--discs{margin-inline:0;width:100%;justify-self:stretch} }

/* Phones: the band never stops, and its own compositing layer keeps the slide
   smooth while the page scrolls over it. */
@media (hover:none){
  .marquee__track{animation-play-state:running!important;will-change:transform;backface-visibility:hidden}
  .marquee__item:hover img{scale:1}
}
/* Beans CTA on a phone: centred and full width. */
@media (max-width:720px){
  .beans__cta{display:flex;justify-content:center;width:100%}
  .beans__cta .btn{width:100%;justify-content:center}
}

/* a shelf with no maker's mark (ground coffee) gets the bean icon in cream */
.btile__ico{display:grid;place-items:center;width:52%;height:52%;color:#E8DFD1}
.btile__ico svg{width:100%;height:100%}
/* the hero's chosen capsule is a link now */
.cap.is-active{cursor:pointer;pointer-events:auto}

/* GTranslate's floating switcher sits 20px from the bottom; on screens with the
   fixed bottom app bar that put it on top of the "סל" and "פולים" tabs. */
@media (max-width:1080px){
  #gt_float_wrapper{bottom:calc(73px + 12px + env(safe-area-inset-bottom, 0px)) !important}
}