/* =========================================================
   Yael Bakery — base: tokens, themes, shell, components
   ========================================================= */

/* ---------- Tokens: light (default) ---------- */
:root,
html[data-yb-theme="light"] body{
  color-scheme: light;
  --bg:#FBF6EF;
  --bg-2:#F4ECE1;
  --surface:#FFFDF9;
  --surface-2:#F3EADF;
  --ink:#2B2420;
  --ink-2:#6B5D53;
  --ink-3:#85766B;
  --line:#E7DACB;
  --line-strong:#D3C1AE;
  --brand:#3F5B44;
  --brand-press:#324A38;
  --brand-soft:#E3EADD;
  --on-brand:#FBF7F2;
  --clay:#A9644D;
  --clay-soft:#F4E3D9;
  --blush:#EADBCF;
  --focus:#2F6B3A;
  --warn:#7E5210;
  --ok:#2E5A37; --ok-bg:#DFEAD9;
  --muted-bg:#EEE6DC;
  --shadow-1:0 1px 2px rgba(43,36,32,.05), 0 6px 16px -8px rgba(43,36,32,.16);
  --shadow-2:0 22px 48px -20px rgba(43,36,32,.38);
  --scrim:rgba(30,23,18,.46);
  --topbar-bg:rgba(251,246,239,.9);
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#1B1714; --bg-2:#211C18; --surface:#27211C; --surface-2:#312A24;
    --ink:#F2EAE0; --ink-2:#CBBBAD; --ink-3:#A39385;
    --line:#3A322B; --line-strong:#4E443B;
    --brand:#9CC2A3; --brand-press:#B6D5BB; --brand-soft:#28382B; --on-brand:#10201A;
    --clay:#E3A68A; --clay-soft:#3A2A22; --blush:#3A2F28; --focus:#B6D5BB;
    --warn:#EBC57E; --ok:#A8D0AE; --ok-bg:#223427;
    --muted-bg:#2E2822;
    --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -10px rgba(0,0,0,.55);
    --shadow-2:0 22px 48px -20px rgba(0,0,0,.75);
    --scrim:rgba(0,0,0,.62);
    --topbar-bg:rgba(27,23,20,.9);
  }
}
:root[data-theme="dark"],
html[data-yb-theme="dark"] body{
  color-scheme: dark;
  --bg:#1B1714; --bg-2:#211C18; --surface:#27211C; --surface-2:#312A24;
  --ink:#F2EAE0; --ink-2:#CBBBAD; --ink-3:#A39385;
  --line:#3A322B; --line-strong:#4E443B;
  --brand:#9CC2A3; --brand-press:#B6D5BB; --brand-soft:#28382B; --on-brand:#10201A;
  --clay:#E3A68A; --clay-soft:#3A2A22; --blush:#3A2F28; --focus:#B6D5BB;
  --warn:#EBC57E; --ok:#A8D0AE; --ok-bg:#223427;
  --muted-bg:#2E2822;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -10px rgba(0,0,0,.55);
  --shadow-2:0 22px 48px -20px rgba(0,0,0,.75);
  --scrim:rgba(0,0,0,.62);
  --topbar-bg:rgba(27,23,20,.9);
}

/* ---------- Tokens: accessibility high contrast (wins over themes) ---------- */
html[data-a11y-contrast="high"] body{
  color-scheme: light;
  --bg:#FFFFFF; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --ink:#000000; --ink-2:#000000; --ink-3:#1F1F1F;
  --line:#000000; --line-strong:#000000;
  --brand:#00380F; --brand-press:#00250A; --brand-soft:#FFFFFF; --on-brand:#FFFFFF;
  --clay:#6B1C00; --clay-soft:#FFFFFF; --blush:#FFFFFF; --focus:#0033CC;
  --warn:#000000; --ok:#000000; --ok-bg:#B9F0C2;
  --muted-bg:#FFFFFF;
  --shadow-1:none; --shadow-2:0 0 0 2px #000;
  --scrim:rgba(0,0,0,.7);
  --topbar-bg:#FFFFFF;
}

:root{
  --font-ui:'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-serif:'Frank Ruhl Libre', 'David', 'Times New Roman', serif;
  --font-hand:'Gveret Levin', 'Frank Ruhl Libre', 'David', serif;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --tabbar-h:4.4rem;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --page-pad:clamp(16px, 4.5vw, 40px);
  --maxw:1120px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 1rem/1.6 var(--font-ui);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-serif); font-weight:700; line-height:1.2; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
[dir="ltr"], .ltr{ direction:ltr; unicode-bidi:isolate; }
.ico{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
:where(svg.ico){ width:24px; height:24px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.num{ font-variant-numeric:tabular-nums; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:fixed; top:8px; right:8px; z-index:1000;
  background:var(--brand); color:var(--on-brand);
  padding:10px 16px; border-radius:999px; font-weight:700;
  transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:999px;
  font-weight:600; font-size:1rem; line-height:1.2;
  border:1.5px solid transparent;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn svg{ width:20px; height:20px; flex-shrink:0; }
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--brand); color:var(--on-brand); }
.btn--primary:hover{ background:var(--brand-press); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn--soft{ background:var(--brand-soft); color:var(--brand); }
.btn--soft:hover{ background:var(--line); }
.btn--block{ width:100%; }
.btn--sm{ min-height:40px; padding:0 16px; font-size:.9rem; }
.btn[aria-disabled="true"], .btn:disabled{
  background:var(--muted-bg); color:var(--ink-3); border-color:transparent; cursor:not-allowed; transform:none;
}
.icon-btn{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:999px; color:var(--ink);
  transition:background-color .2s ease;
}
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn svg{ width:24px; height:24px; }
.link{ color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);
  backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:6px;
  padding:8px calc(var(--page-pad) - 8px);
  min-height:60px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-inline-end:auto; padding:4px; border-radius:12px; }
.brand img{ width:40px; height:40px; border-radius:50%; background:#FBF8F3; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family:var(--font-serif); font-weight:500; font-size:1.08rem; letter-spacing:.01em; }
.brand__tag{ font-size:.72rem; color:var(--ink-2); letter-spacing:.02em; }
.topbar__actions{ display:flex; align-items:center; gap:4px; }
.desk-nav, .desk-only{ display:none !important; }

.badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-grid; place-items:center;
  background:var(--clay); color:#FFF8F3;
  font-size:.72rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.badge[data-count="0"]{ display:none; }

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(5, 1fr); align-items:end;
  padding:6px 6px calc(6px + var(--safe-b));
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(43,36,32,.35);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px;
  min-height:52px; padding:4px 2px; border-radius:14px;
  font-size:.72rem; font-weight:500; color:var(--ink-2);
}
.tab svg{ width:24px; height:24px; }
.tab[aria-current="page"]{ color:var(--brand); font-weight:700; }
.tab[aria-current="page"] svg{ stroke-width:2.1; }
.tab--cart{ position:relative; }
.tab__fab{
  position:relative;
  width:58px; height:58px; margin-top:-26px; margin-bottom:2px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:var(--on-brand);
  box-shadow:0 10px 22px -8px rgba(63,91,68,.65), 0 0 0 5px var(--surface);
  transition:transform .2s ease;
}
.tab__fab svg{ width:27px; height:27px; }
.tab__fab .badge{ position:absolute; top:-2px; left:-4px; box-shadow:0 0 0 2px var(--surface); }
.tab--cart:active .tab__fab{ transform:scale(.95); }
.tab__fab.is-bump{ animation:bump .45s ease; }
@keyframes bump{ 0%{transform:scale(1)} 35%{transform:scale(1.14)} 100%{transform:scale(1)} }

/* ---------- Floating accessibility button ---------- */
.a11y-fab{
  position:fixed; z-index:65;
  left:12px; bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:#1F4E8C; color:#FFFFFF;
  box-shadow:0 8px 20px -8px rgba(15,35,70,.6);
  border:2px solid #FFFFFF;
}
.a11y-fab svg{ width:28px; height:28px; }
.a11y-fab:hover{ background:#173D6E; }

/* ---------- Scrim / drawer ---------- */
.scrim{
  position:fixed; inset:0; z-index:80; background:var(--scrim);
  opacity:0; transition:opacity .25s ease;
}
.scrim.is-open{ opacity:1; }
.drawer{
  position:fixed; top:0; bottom:0; right:0; z-index:90;
  width:min(330px, 86vw);
  background:var(--surface); color:var(--ink);
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-2);
  transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.drawer.is-open{ transform:none; }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 16px 12px 8px; border-bottom:1px solid var(--line);
}
.drawer__body{ flex:1; overflow-y:auto; padding:10px 10px 24px; }
.drawer__group + .drawer__group{ margin-top:14px; }
.drawer__label{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--ink-3);
  padding:8px 12px 6px;
}
.drawer__link{
  display:flex; align-items:center; gap:14px;
  min-height:48px; padding:8px 12px; border-radius:12px;
  font-weight:500; color:var(--ink);
}
.drawer__link svg{ width:22px; height:22px; color:var(--ink-2); flex-shrink:0; }
.drawer__link:hover{ background:var(--surface-2); }
.drawer__link[aria-current="page"]{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.drawer__link[aria-current="page"] svg{ color:var(--brand); }
button.drawer__link{ width:100%; text-align:right; }
.drawer__link .badge{ margin-inline-start:auto; }
.drawer:focus, .sheet__panel:focus{ outline:none; }
.drawer__foot{
  display:flex; gap:6px; padding:12px 16px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);
}

/* ---------- Sheets (bottom sheet on mobile, dialog on desktop) ---------- */
.sheet{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet__scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; transition:opacity .25s ease;
}
.sheet__panel{
  position:relative; width:100%; max-width:640px;
  max-height:calc(100dvh - 28px);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-2);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.sheet.is-open .sheet__scrim{ opacity:1; }
.sheet.is-open .sheet__panel{ transform:none; }
.sheet__handle{
  width:44px; height:5px; border-radius:99px; background:var(--line-strong);
  margin:10px auto 2px; flex-shrink:0;
}
.sheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 20px 10px 10px; flex-shrink:0;
}
.sheet__title{ font-size:1.35rem; }
.sheet__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 20px 20px; }
.sheet__foot{
  flex-shrink:0; padding:14px 20px calc(14px + var(--safe-b));
  border-top:1px solid var(--line); background:var(--surface);
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; z-index:120; left:50%;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px);
  transform:translate(-50%, 12px);
  display:flex; align-items:center; gap:12px;
  width:max-content; max-width:calc(100vw - 32px);
  padding:10px 10px 10px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  box-shadow:var(--shadow-2);
  font-size:.92rem; font-weight:500;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.toast.is-show{ opacity:1; transform:translate(-50%, 0); }
.toast__action{
  padding:6px 14px; border-radius:999px; font-weight:700;
  background:var(--bg); color:var(--ink);
}

/* ---------- Cards, chips, fields ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:18px;
  box-shadow:var(--shadow-1);
}
.card--flat{ box-shadow:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 14px; border-radius:999px;
  background:var(--surface-2); color:var(--ink);
  border:1.5px solid transparent;
  font-size:.9rem; font-weight:600; white-space:nowrap;
}
.chip .count{ font-size:.75rem; color:var(--ink-3); font-weight:600; }
.chip[aria-pressed="true"], .chip.is-active{ background:var(--brand); color:var(--on-brand); }
.chip[aria-pressed="true"] .count, .chip.is-active .count{ color:inherit; opacity:.8; }
.segmented{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  padding:4px; border-radius:14px; background:var(--surface-2);
}
.segmented button{
  min-height:42px; padding:6px 10px; border-radius:11px;
  font-weight:600; font-size:.92rem; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.25;
}
.segmented button small{ font-size:.78rem; font-weight:500; }
.segmented button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
html[data-a11y-contrast="high"] .segmented button[aria-pressed="true"]{ outline:2px solid #000; }

.stepper{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--line-strong); border-radius:999px; background:var(--surface);
}
.stepper button{
  width:42px; height:42px; display:grid; place-items:center; border-radius:999px;
  font-size:1.25rem; line-height:1; color:var(--ink);
}
.stepper button:hover{ background:var(--surface-2); }
.stepper button:disabled{ color:var(--ink-3); cursor:not-allowed; }
.stepper output{ min-width:28px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.stepper--sm button{ width:34px; height:34px; font-size:1.05rem; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field + .field{ margin-top:14px; }
.field label, .field .field__label{ font-size:.88rem; font-weight:600; color:var(--ink); }
.input, .select, .textarea{
  width:100%; min-height:48px; padding:10px 14px;
  border:1.5px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--ink);
  font-size:1rem;
}
.textarea{ min-height:84px; resize:vertical; line-height:1.5; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-3); }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

.list-rows{ list-style:none; }
.list-row{
  display:flex; align-items:center; gap:14px;
  min-height:56px; padding:10px 4px;
}
.list-row + .list-row{ border-top:1px solid var(--line); }
.list-row__icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand);
}
.list-row__icon svg{ width:22px; height:22px; }
.list-row__main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.list-row__label{ font-size:.78rem; color:var(--ink-2); }
.list-row__value{ font-weight:600; overflow-wrap:anywhere; }
.list-row__end{ color:var(--ink-3); }
.list-row__end svg{ width:20px; height:20px; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:28px var(--page-pad) calc(var(--tabbar-h) + var(--safe-b) + 40px);
  color:var(--ink-2); font-size:.88rem;
}
.site-footer__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px;
}
.site-footer__brand{ display:flex; align-items:center; gap:10px; }
.site-footer__brand img{ width:30px; height:30px; border-radius:50%; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.site-footer__links a{ text-decoration:underline; text-underline-offset:3px; padding:6px 0; }

/* ---------- Accessibility panel ---------- */
.a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.a11y-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:88px; padding:10px 8px; border-radius:16px; text-align:center;
  background:var(--surface-2); border:2px solid transparent;
  font-size:.9rem; font-weight:600; line-height:1.25;
}
.a11y-opt svg{ width:26px; height:26px; }
.a11y-opt[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.a11y-row{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px;
  padding:10px 14px; border-radius:16px; background:var(--surface-2);
}
.a11y-row__label{ font-weight:600; }
.a11y-row__ctrl{ display:flex; align-items:center; gap:8px; }
.a11y-row__ctrl button{
  width:44px; height:44px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line-strong);
  font-weight:800; font-size:1.05rem;
}
.a11y-row__ctrl button:disabled{ color:var(--ink-3); cursor:not-allowed; }
.a11y-row__ctrl output{ min-width:52px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.a11y-row .segmented{ flex:1; min-width:196px; max-width:270px; background:var(--surface); }
.a11y-row .segmented button{ min-height:38px; font-size:.88rem; }
.a11y-row .segmented button[aria-pressed="true"]{ background:var(--brand); color:var(--on-brand); box-shadow:none; }

/* ---------- Accessibility modes (set on <html>) ---------- */
html[data-a11y-gray]{ filter:grayscale(1); }
html[data-a11y-links] a,
html[data-a11y-links] button:not(.a11y-opt){
  text-decoration:underline !important; text-underline-offset:3px;
  outline:2px dashed currentColor; outline-offset:2px;
}
html[data-a11y-font] body,
html[data-a11y-font] body *:not(svg):not(path){
  font-family:Arial, 'Heebo', sans-serif !important;
  font-style:normal !important;
}
html[data-a11y-spacing] body :is(p, li, dd, dt, label, summary, h1, h2, h3, h4, a, button, .list-row__value){
  line-height:1.9 !important; letter-spacing:.03em !important; word-spacing:.14em !important;
}
html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html[data-a11y-cursor],
html[data-a11y-cursor] *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 3l28 16-12.5 3.2L28 36l-6 3-6.6-13.6L6 33z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Desktop shell ---------- */
@media (min-width: 960px){
  .tabbar{ display:none; }
  .desk-nav{ display:flex !important; align-items:center; gap:2px; margin-inline:auto; }
  .desk-only{ display:inline-flex !important; }
  .topbar__menu{ display:none; }
  .brand{ margin-inline-end:0; }
  .desk-nav a{
    padding:8px 14px; border-radius:999px; font-weight:500; font-size:.95rem; color:var(--ink-2);
  }
  .desk-nav a:hover{ color:var(--ink); background:var(--surface-2); }
  .desk-nav a[aria-current="page"]{ color:var(--brand); background:var(--brand-soft); font-weight:700; }
  .cart-btn{
    position:relative; align-items:center; gap:8px;
    min-height:44px; padding:0 16px 0 12px; border-radius:999px;
    background:var(--brand); color:var(--on-brand); font-weight:600;
  }
  .cart-btn svg{ width:22px; height:22px; }
  .cart-btn:hover{ background:var(--brand-press); }
  .a11y-fab{ bottom:24px; left:24px; }
  .toast{ bottom:32px; }
  .site-footer{ padding-bottom:40px; }
  .sheet{ align-items:center; padding:24px; }
  .sheet__panel{
    border-radius:var(--r-xl); max-height:min(860px, calc(100dvh - 48px));
    transform:translateY(24px) scale(.98); opacity:0;
    transition:transform .25s ease, opacity .2s ease;
  }
  .sheet.is-open .sheet__panel{ opacity:1; }
  .sheet__handle{ display:none; }
  .sheet__head{ padding:16px 24px 10px 14px; }
  .sheet__body{ padding:0 24px 24px; }
  .sheet__foot{ padding:16px 24px; }
  /* Cart docks to the left edge on desktop */
  .sheet--side{ justify-content:flex-start; align-items:stretch; padding:0; }
  .sheet--side .sheet__panel{
    max-width:440px; max-height:none; height:100%; border-radius:0;
    transform:translateX(-100%); opacity:1;
  }
  .sheet--side.is-open .sheet__panel{ transform:none; }
}