/* ============================================================
   DORIAN — public customer stylesheet
   Responsive architecture:
     mobile  <600px   app-like, bottom nav, 2-col grids
     tablet  600–1023 wider sections, 3-col grids, bottom nav kept
     desktop ≥1024   container 1280px, top nav, 4-col grids,
                     hero editorial split, menu rail, modal sheet
   All layouts use logical properties: RTL mirrors automatically.
   ============================================================ */

@import url("tokens.1121cddb5022.css");

/* ---------- fonts (self-hosted, subset) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-400-normal.15ccd91d7a8f.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.b8dca52ca5f9.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-arabic-400-normal.b640f7cc5918.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-arabic-700-normal.bb99562a6788.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-latin-400-normal.034ef8ba89c4.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-latin-700-normal.3c577e3e4448.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.4fa3d81d41ab.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.106892212ea7.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.64891a810259.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html.no-scroll { overflow: hidden; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--dorian); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--dorian); color: var(--ivory); }

/* ---------- layout primitives ---------- */
.container {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
}
.app-canvas { min-height: 100dvh; background: var(--bg); position: relative; display: flex; flex-direction: column; }
.screen { flex: 1; padding-block-end: calc(var(--nav-h) + var(--sab) + var(--sp-6)); }

.skip-link {
  position: fixed; inset-block-start: calc(var(--sat) + 8px); inset-inline-start: 8px;
  z-index: 100; background: var(--espresso); color: var(--ivory);
  padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-small);
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- header (mobile: brand + lang · desktop: full nav) ---------- */
.top-header {
  position: sticky; inset-block-start: 0; z-index: 30;
  padding-block-start: var(--sat);
  background: var(--ivory);
  transition: box-shadow var(--dur) var(--ease);
}
.top-header.is-scrolled { box-shadow: var(--lift); }
.top-header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-3);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--dorian); margin-inline-end: auto; }
.brand-word { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0.02em; }
.brand-sub { font-size: var(--fs-caption); color: var(--coffee); letter-spacing: 0.14em; text-transform: uppercase; }
html[dir="rtl"] .brand-sub { letter-spacing: 0; }
.brand-logo { height: 38px; width: auto; }
.brand .img-missing { height: 38px; }

.top-nav { display: none; align-items: center; gap: var(--sp-2); }
.top-nav-link {
  min-height: 44px; display: inline-flex; align-items: center;
  padding-inline: var(--sp-4); border-radius: var(--r-pill);
  color: var(--coffee); font-weight: 500; font-size: var(--fs-body);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.top-nav-link:hover { color: var(--dorian); background: var(--dorian-08); }
.top-nav-link[aria-current="page"] { color: var(--dorian); font-weight: 600; }

.lang-switch {
  min-height: 44px; min-inline-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--sp-3); border-radius: var(--r-pill);
  border: var(--hairline); color: var(--coffee);
  font-size: var(--fs-small); font-weight: 600;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lang-switch:active { color: var(--dorian); border-color: var(--dorian); }

/* ---------- bottom navigation (mobile + tablet only) ---------- */
.bottom-nav {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40;
  background: var(--ivory); border-block-start: var(--hairline);
  padding-block-end: var(--sab);
}
.bottom-nav-inner {
  max-width: 640px; margin-inline: auto; height: var(--nav-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 44px; color: var(--coffee);
  font-size: var(--fs-caption); font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease);
}
.bottom-nav-item svg {
  width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.bottom-nav-item .nav-dot {
  width: 4px; height: 4px; border-radius: var(--r-pill);
  background: transparent; transition: background var(--dur-fast) var(--ease);
}
.bottom-nav-item[aria-current="page"] { color: var(--dorian); font-weight: 600; }
.bottom-nav-item[aria-current="page"] .nav-dot { background: var(--dorian); }

/* ---------- shared section chrome ---------- */
.section { padding-block-start: clamp(28px, 4.5vw, 52px); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); margin-block-end: var(--sp-4);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 600; line-height: 1.2; color: var(--espresso);
}
.section-sub { font-size: var(--fs-small); color: var(--coffee); margin-block-start: 2px; }
.section-link {
  min-height: 44px; display: inline-flex; align-items: center; gap: 4px;
  color: var(--dorian); font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
}

/* horizontal scrollers (mobile behaviour) */
.hscroller {
  display: flex; gap: var(--sp-3);
  padding-inline: var(--sp-4); padding-block-end: var(--sp-2);
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hscroller::-webkit-scrollbar { display: none; }
.hscroller > * { scroll-snap-align: start; flex: 0 0 auto; }
.section .hscroller { margin-inline: calc(-1 * var(--sp-4)); }  /* full-bleed scroll inside containers */

/* at tablet/desktop these sections become grids (no fake scrolling) */
@media (min-width: 600px) {
  .responsive-cards, .responsive-pairs { margin-inline: 0; padding-inline: 0; }
  .responsive-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5) var(--sp-4); overflow: visible;
  }
  .responsive-pairs {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4); overflow: visible;
  }
}
@media (min-width: 1024px) {
  .responsive-cards { grid-template-columns: repeat(4, 1fr); }
  .responsive-pairs { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- hero ---------- */
.hero-wrap { margin-block-start: var(--sp-4); }
.hero {
  background: var(--dorian); border-radius: var(--r-xl);
  overflow: hidden; position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr;
}
.hero-content { padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px); color: var(--ivory); }
.hero-logo { max-width: 180px; margin-block-end: var(--sp-3); }
.hero-logo img { height: clamp(34px, 6vw, 52px); width: auto; object-fit: contain; }
.hero-eyebrow {
  font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ivory-60); margin-block-end: var(--sp-2);
}
html[dir="rtl"] .hero-eyebrow { letter-spacing: 0.04em; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.2vw, 3rem);
  line-height: 1.22; font-weight: 600; white-space: pre-line;
}
.hero-sub { margin-block-start: var(--sp-2); color: var(--ivory-85); font-size: var(--fs-small); }
.hero-cta {
  margin-block-start: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding-inline: var(--sp-5);
  background: var(--ivory); color: var(--dorian); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-body);
  transition: transform var(--dur-fast) var(--ease);
}
.hero-cta:active { transform: scale(0.98); }
.hero-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .hero-cta svg { transform: scaleX(-1); }
.hero-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero-media .img-hero {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-missing { aspect-ratio: 3 / 2; background: var(--oxblood); }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(103, 0, 1, 0.18), transparent 40%);
}

/* ---------- quick links ---------- */
.quicklink {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  inline-size: 76px; color: var(--espresso);
  font-size: var(--fs-caption); font-weight: 500; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.quicklink-icon {
  inline-size: 60px; block-size: 60px; border-radius: var(--r-lg);
  background: var(--bg-soft); display: grid; place-items: center;
  overflow: hidden; aspect-ratio: 1 / 1;
  transition: transform var(--dur-fast) var(--ease);
}
.quicklink:active .quicklink-icon { transform: scale(0.94); }
.quicklink-icon img { width: 100%; height: 100%; object-fit: cover; }
.quicklink-initial { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--dorian); }
.quicklink-name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.responsive-quicklinks { margin-inline: 0 !important; }
@media (min-width: 1024px) {
  .responsive-quicklinks {
    margin-inline: 0; padding-inline: 0; overflow: visible;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-5) var(--sp-6); padding-block-end: var(--sp-2);
  }
  .quicklink { inline-size: 88px; }
  .quicklink-icon { inline-size: 68px; block-size: 68px; }
}

/* ---------- product cards ---------- */
.grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-3);
}
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-4); }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8) var(--sp-5); }
}

.product-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--r-lg);
  transition: transform var(--dur-fast) var(--ease);
}
.product-card:active { transform: scale(0.97); }
.img-card {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-lg); background: var(--bg-soft);
}
.product-card .img-missing {
  aspect-ratio: 1 / 1; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-soft), var(--cream));
  border: var(--hairline);
}
.card-name {
  font-size: var(--fs-body); font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.card-price { color: var(--dorian); font-weight: 600; font-size: var(--fs-body); display: flex; align-items: baseline; gap: 4px; }
.card-price .cur { font-size: var(--fs-caption); font-weight: 500; color: var(--coffee); }
.sheet-add{display:grid;gap:18px;margin-block:20px}.sheet-field{display:grid;gap:8px;font-size:var(--fs-caption);font-weight:600;color:var(--coffee)}.sheet-add select,.sheet-add textarea{inline-size:100%;min-block-size:50px;border:var(--hairline);border-radius:var(--r-sm);padding:10px 12px;background:var(--bg-raised);font:inherit;color:var(--ink)}.sheet-add textarea{resize:vertical;min-block-size:56px;line-height:1.45}.sheet-quantity{display:inline-grid;grid-template-columns:44px 52px 44px;align-items:center;border:var(--hairline);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-raised);inline-size:max-content;min-block-size:48px}.sheet-quantity button{display:grid;place-items:center;min-block-size:48px;background:var(--cream);font-size:23px;line-height:1}.sheet-quantity output{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.sheet-add button[type="submit"]{min-block-size:52px;border-radius:var(--r-pill);background:var(--dorian);color:var(--ivory);font-weight:700}.sheet-add button[type="submit"]:disabled{background:var(--ink-20);color:var(--ink-50);cursor:not-allowed}

/* ---------- table ordering ---------- */
.order-page { max-inline-size: 760px; padding-block: clamp(28px, 5vw, 64px); }.order-kicker { color: var(--dorian); font-weight: 600; font-size: var(--fs-small); }.order-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--espresso); margin-block: var(--sp-2) var(--sp-5); }.cart-lines { display: grid; gap: var(--sp-3); }.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: var(--hairline); border-radius: var(--r-md); background: var(--bg-raised); }.cart-line h2 { font-size: var(--fs-body); color: var(--espresso); }.cart-line p { font-size: var(--fs-small); color: var(--coffee); }.qty-control { display: inline-grid; grid-template-columns: 32px 28px 32px; align-items: center; text-align: center; }.qty-control input { grid-column: 1 / -1; min-inline-size: 0; block-size: 34px; margin-block-end: var(--sp-2); border: var(--hairline); border-radius: var(--r-sm); padding-inline: 8px; background: var(--bg-raised); }.qty-control button { inline-size: 32px; block-size: 32px; border: var(--hairline); border-radius: 50%; font-size: 1.2rem; }.order-total { display:flex; justify-content:space-between; margin-block: var(--sp-5); padding-block: var(--sp-4); border-block: var(--hairline); font-size: var(--fs-lead); }.order-cta { display:flex; align-items:center; justify-content:center; inline-size:100%; min-block-size:52px; padding:14px 20px; border:0; cursor:pointer; background:#670001; color:#fff; border-radius:var(--r-pill); font-weight:700; text-align:center; }.order-cta:active { transform:scale(.98); }.order-cta:disabled,.order-cta[aria-disabled="true"] { background:#b9a7a7; color:#fff; cursor:not-allowed; opacity:.8; }.order-status { margin-block: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-md); background: var(--dorian); color: var(--ivory); font-family: var(--font-display); font-size: var(--fs-h2); text-align: center; }.alert-enable { min-block-size:44px; padding-inline:var(--sp-4); border:var(--hairline); border-radius:var(--r-pill); color:var(--dorian); font-weight:600; }

.product-card .img-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
}
.product-card .img-wrap .img-card {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.img-wrap .img-featured, .img-wrap .img-pair { display: block; }

.badge {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
  background: var(--ivory); color: var(--dorian); border-radius: var(--r-pill);
  padding: 4px 10px; font-size: var(--fs-caption); font-weight: 600;
  box-shadow: var(--lift); max-inline-size: 80%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge--signature, .badge--pick { background: var(--dorian); color: var(--ivory); }
.badge--seasonal { background: var(--terracotta); color: var(--ivory); }
.badge--loved { background: var(--espresso); color: var(--ivory); }
.badge--new { background: var(--ivory); color: var(--espresso); border: var(--hairline); }

/* unavailable state */
.product-card.is-unavailable .img-wrap { position: relative; }
.product-card.is-unavailable img,
.product-card.is-unavailable .img-missing { filter: grayscale(0.85) opacity(0.65); }
.product-card.is-unavailable .card-name { color: var(--coffee); }
.unavailable-tag {
  position: absolute; inset-block-end: var(--sp-2); inset-inline: var(--sp-2);
  text-align: center; background: rgba(33, 23, 22, 0.72); color: var(--ivory);
  border-radius: var(--r-sm); font-size: var(--fs-caption); padding: 3px 8px;
}

/* ---------- featured cards ---------- */
.featured-card {
  inline-size: min(72vw, 320px);
  display: flex; flex-direction: column; gap: var(--sp-2);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease);
}
.featured-card:active { transform: scale(0.98); }
.featured-card .img-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.featured-card .img-featured {
  display: block; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: center; background: var(--bg-soft);
}
.featured-card .img-missing {
  aspect-ratio: 4 / 5; border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--cream), var(--bg-soft)); border: var(--hairline);
}
.featured-name { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }
.featured-desc {
  font-size: var(--fs-small); color: var(--coffee);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-foot { display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 600px) {
  .featured-card { inline-size: auto; }
}

/* ---------- signature feature ---------- */
.signature-card {
  position: relative; background: var(--oxblood); border-radius: var(--r-xl);
  overflow: hidden; color: var(--ivory); display: block;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease);
}
.signature-card:active { transform: scale(0.99); }
.signature-backdrop { position: absolute; inset: 0; z-index: 0; }
.signature-backdrop .img-hero { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.signature-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(74, 7, 9, 0.82), rgba(46, 4, 6, 0.93));
}
.signature-media { position: relative; z-index: 1; aspect-ratio: 5 / 4; min-height: 0; overflow: hidden; }
.signature-media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.signature-media .img-featured { aspect-ratio: auto; border-radius: 0; }
.signature-body { padding: clamp(20px, 3.5vw, 40px); position: relative; z-index: 1; }
.signature-eyebrow { font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-60); }
html[dir="rtl"] .signature-eyebrow { letter-spacing: 0.02em; }
.signature-name { font-family: var(--font-display); font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 600; margin-block-start: var(--sp-1); }
.signature-desc {
  color: var(--ivory-85); font-size: var(--fs-small); margin-block-start: var(--sp-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.signature-foot { margin-block-start: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); }
.signature-price { font-size: var(--fs-lead); font-weight: 600; display: flex; align-items: baseline; gap: 4px; }
.signature-price .cur { font-size: var(--fs-caption); color: var(--ivory-60); font-weight: 500; }
.signature-go {
  margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 44px; min-block-size: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--ivory-25); color: var(--ivory);
}
.signature-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .signature-go svg { transform: scaleX(-1); }
@media (min-width: 1024px) {
  .signature-card { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .signature-media { height: auto; aspect-ratio: 5 / 4; }
  .signature-media img, .signature-media .img-featured { height: 100%; aspect-ratio: auto; }
}

/* ---------- perfect together ---------- */
.pair-card {
  inline-size: min(78vw, 340px); padding: var(--sp-4);
  background: var(--bg-raised); border: var(--hairline); border-radius: var(--r-xl);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
@media (min-width: 600px) { .pair-card { inline-size: auto; } }
.pair-media { display: flex; align-items: center; gap: var(--sp-2); }
.pair-half {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0; color: inherit; -webkit-tap-highlight-color: transparent;
  text-align: start;
}
.pair-image { display: block; width: 100%; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; border-radius: var(--r-md); background: var(--bg-soft); }
.pair-image img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.pair-image .img-missing { height: 100%; aspect-ratio: auto; }
.pair-name { font-size: var(--fs-small); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-plus {
  align-self: center; inline-size: 28px; block-size: 28px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--dorian-08); color: var(--dorian);
  font-size: var(--fs-small); font-weight: 600; flex: 0 0 auto;
}

/* ---------- menu screen ---------- */
.menu-titleblock {
  padding-block: var(--sp-5) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.menu-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.menu-search-link {
  min-inline-size: 44px; min-block-size: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--bg-soft); color: var(--espresso);
}
.menu-search-link svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.menu-layout { display: grid; grid-template-columns: 1fr; }

.category-bar {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--sat));
  z-index: 20; background: var(--ivory);
  border-block: var(--hairline);
  /* classic RTL-safe full-bleed inside a container */
  inline-size: 100vw; max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}
.category-track {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  inline-size: min(100% - 32px, 1280px); margin-inline: auto;
}
.category-track::-webkit-scrollbar { display: none; }
.category-chip {
  flex: 0 0 auto; scroll-snap-align: center; min-height: 40px; padding-inline: var(--sp-4);
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  border: var(--hairline); color: var(--coffee);
  font-size: var(--fs-small); font-weight: 500; background: transparent;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.category-chip.is-active { background: var(--dorian); border-color: var(--dorian); color: var(--ivory); font-weight: 600; }

.menu-section { scroll-margin-block-start: calc(var(--header-h) + var(--sat) + 64px); padding-block-start: var(--sp-6); }
.menu-section-head { padding-block-end: var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-3); }
.menu-section-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.menu-section-count { font-size: var(--fs-caption); color: var(--coffee); }

/* desktop: category rail + content */
@media (min-width: 1024px) {
  .menu-layout { grid-template-columns: 220px 1fr; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .category-bar {
    position: sticky; inset-block-start: calc(var(--header-h) + var(--sat) + 24px);
    inline-size: auto; max-inline-size: none; margin-inline: 0;
    border: 0; background: transparent;
  }
  .category-track { flex-direction: column; gap: 2px; overflow: visible; padding: 0; inline-size: auto; margin-inline: 0; }
  .category-chip {
    justify-content: flex-start; inline-size: 100%; border: 0;
    border-radius: var(--r-md); padding-inline: var(--sp-4); font-size: var(--fs-body);
  }
  .category-chip:hover { background: var(--dorian-08); color: var(--dorian); }
  .category-chip.is-active { background: var(--dorian); color: var(--ivory); }
  .menu-section { padding-block-start: var(--sp-8); }
  .menu-section-head { border-block-end: var(--hairline); }
}

/* ---------- search ---------- */
.search-container { max-width: 760px; }
.search-field {
  margin-block-start: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); min-height: 52px;
  padding-inline: var(--sp-4); background: var(--bg-raised);
  border: var(--hairline); border-radius: var(--r-lg);
}
.search-field:focus-within { border-color: var(--dorian); }
.search-field svg { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--coffee); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-lead); color: var(--espresso); }
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--ink-30); }
.search-clear { min-inline-size: 44px; min-block-size: 44px; margin-inline-end: calc(-1 * var(--sp-2)); display: none; place-items: center; color: var(--coffee); }
.search-clear svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.search-clear.is-visible { display: grid; }
.search-prompt { padding: var(--sp-12) var(--sp-6); text-align: center; }
.search-prompt-title { font-family: var(--font-display); font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 600; color: var(--espresso); }
.search-prompt-sub { margin-block-start: var(--sp-2); color: var(--coffee); font-size: var(--fs-small); }
.search-results { padding-block-start: var(--sp-2); display: grid; gap: 2px; }
.search-result {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); width: 100%; text-align: start;
  -webkit-tap-highlight-color: transparent; border-radius: var(--r-md);
}
.search-result:active { background: var(--dorian-08); }
.search-result img { inline-size: 56px; block-size: 56px; border-radius: var(--r-md); object-fit: cover; background: var(--bg-soft); flex: 0 0 auto; }
.search-result .img-missing { inline-size: 56px; block-size: 56px; border-radius: var(--r-md); background: var(--bg-soft); flex: 0 0 auto; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-meta { font-size: var(--fs-caption); color: var(--coffee); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-price { color: var(--dorian); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }

/* ---------- empty & error states ---------- */
.empty-state { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--coffee); }
.empty-state svg {
  inline-size: 44px; block-size: 44px; margin-inline: auto; margin-block-end: var(--sp-3);
  stroke: var(--ink-30); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.empty-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--espresso); font-weight: 600; }
.empty-hint { font-size: var(--fs-small); margin-block-start: var(--sp-1); }

/* ---------- skeletons ---------- */
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--cream) 40%, var(--bg-raised) 50%, var(--cream) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--cream); }
}
.skeleton-card { height: 300px; border-radius: var(--r-lg); }
.skeleton-row { height: 76px; }

/* ---------- product sheet: bottom sheet mobile → modal desktop ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(33, 23, 22, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 61;
  max-width: var(--canvas-max); margin-inline: auto;
  background: var(--ivory);
  border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
  max-height: min(92dvh, calc(100dvh - 20px)); display: flex; flex-direction: column;
  transform: translateY(104%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
  box-shadow: 0 -4px 24px rgba(33, 23, 22, 0.12);
}
.sheet.is-open { transform: translateY(0); visibility: visible; }
.sheet-backdrop.is-open { opacity: 1; visibility: visible; }

.sheet-grab { padding-block: var(--sp-2); cursor: grab; touch-action: none; }
.sheet-grab::before {
  content: ""; display: block; inline-size: 36px; block-size: 4px;
  margin-inline: auto; border-radius: var(--r-pill); background: var(--ink-30);
}
.sheet-scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl); }
.sheet-close {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 5;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(33, 23, 22, 0.45); color: var(--ivory);
}
.sheet-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }

@media (min-width: 1024px) {
  .sheet {
    inset-block-start: 50%; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: auto; left: 50%; right: auto;
    inline-size: min(1000px, calc(100vw - 64px));
    max-width: none;
    border-radius: var(--r-xl);
    max-height: min(86dvh, 860px);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
  }
  html[dir="rtl"] .sheet { transform: translate(-50%, -46%); }
  .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
  html[dir="rtl"] .sheet.is-open { transform: translate(-50%, -50%); }
  .sheet-grab { display: none; }
  .sheet-scroll { border-radius: var(--r-xl); display: grid; grid-template-columns: minmax(360px, .95fr) minmax(360px, 1.05fr); align-items: start; }
  .sheet-media { position: sticky; inset-block-start: 0; }
  .sheet-body { min-inline-size: 0; }
  .sheet-close { background: rgba(33, 23, 22, 0.6); }
}

/* gallery */
.gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--cream);
  border-start-start-radius: inherit; border-start-end-radius: inherit;
  aspect-ratio: 1 / 1;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  flex: 0 0 100%; inline-size: 100%;
  block-size: 100%; aspect-ratio: auto; object-fit: cover;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.gallery-dots { display: flex; justify-content: center; gap: 6px; padding-block: var(--sp-2); }
.gallery-dot {
  inline-size: 6px; block-size: 6px; border-radius: var(--r-pill);
  background: var(--ink-30); border: 0; padding: 0;
  transform-origin: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery-dot[aria-current="true"] { background: var(--dorian); transform: scaleX(2.66); }

/* sheet content */
.sheet-body { padding: var(--sp-5) var(--sp-5) var(--sp-8); }
.sheet-category { font-size: var(--fs-caption); color: var(--coffee); letter-spacing: 0.08em; }
.sheet-name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; margin-block-start: var(--sp-1); }
.sheet-price { margin-block-start: var(--sp-2); font-size: var(--fs-h3); color: var(--dorian); font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.sheet-price .cur { font-size: var(--fs-small); color: var(--coffee); font-weight: 500; }
@media (max-width:1023px){.sheet{max-height:min(94dvh,calc(100svh - 8px));}.sheet-scroll{display:block}.sheet-media .gallery{aspect-ratio:auto;block-size:clamp(220px,34dvh,340px)}.sheet-media .gallery img,.sheet-media .gallery .img-missing{block-size:100%;inline-size:100%;object-fit:cover}.sheet-body{padding:16px 20px calc(20px + env(safe-area-inset-bottom))}.sheet-category{margin:0}.sheet-name{margin-block-start:4px}.sheet-price{margin-block:4px 0 0}.sheet-close{inset-block-start:max(10px,calc(env(safe-area-inset-top) + 8px));inset-inline-end:12px;background:rgba(33,23,22,.58)}}
.sheet-short { margin-block-start: var(--sp-3); color: var(--ink-70); font-size: var(--fs-body); }
.sheet-unavailable-note {
  margin-block-start: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--cream); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); color: var(--coffee); font-size: var(--fs-small);
}
.sheet-long { margin-block-start: var(--sp-4); color: var(--ink-70); font-size: var(--fs-body); line-height: 1.7; }
.sheet-info { margin-block-start: var(--sp-5); display: grid; gap: var(--sp-3); }
.sheet-info dt { font-size: var(--fs-caption); color: var(--coffee); font-weight: 600; margin-block-end: var(--sp-1); }
.sheet-info dd { color: var(--ink-70); font-size: var(--fs-small); line-height: 1.6; }
.sheet-tags { margin-block-start: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-chip { border: var(--hairline); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-caption); color: var(--coffee); background: var(--bg-raised); }
.sheet-divider { margin-block: var(--sp-6); border: 0; border-block-start: var(--hairline); }
.related-title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; margin-block-end: var(--sp-3); }
.related-scroller { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-2); }
.related-scroller::-webkit-scrollbar { display: none; }
.related-card { flex: 0 0 auto; inline-size: 120px; display: flex; flex-direction: column; gap: var(--sp-1); -webkit-tap-highlight-color: transparent; text-align: start; color: inherit; }
.related-card img { display:block; inline-size: 120px; block-size:120px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); background: var(--bg-soft); }
.related-card .img-missing { inline-size: 120px; aspect-ratio: 1 / 1; border-radius: var(--r-md); background: var(--bg-soft); }
.related-name { font-size: var(--fs-small); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-price { font-size: var(--fs-caption); color: var(--dorian); font-weight: 600; }

/* ---------- footer (subtle, always present) ---------- */
.site-footer { border-block-start: var(--hairline); background: var(--ivory); }
.site-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: var(--sp-4);
  padding-block-end: calc(var(--sp-4) + var(--sab));
  font-size: var(--fs-caption); color: var(--coffee);
}
.site-footer-brand { font-family: var(--font-display); color: var(--dorian); font-weight: 600; }
@media (max-width: 1023.98px) {
  .site-footer { padding-block-end: calc(var(--nav-h) + var(--sab)); }
}

/* ---------- utilities ---------- */
.page-pad { padding-inline: var(--sp-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.toast {
  position: fixed; inset-block-end: calc(var(--nav-h) + var(--sab) + var(--sp-4));
  inset-inline: var(--sp-4); z-index: 70; max-width: 480px; margin-inline: auto;
  background: var(--espresso); color: var(--ivory); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); text-align: center;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.toast.is-visible { opacity: 1; transform: translateY(0); visibility: visible; }
.order-bar{position:fixed;z-index:45;inset-inline:16px;inset-block-end:calc(var(--nav-h) + var(--sab) + 12px);max-inline-size:620px;margin-inline:auto;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:var(--dorian);color:var(--ivory);box-shadow:0 8px 24px rgba(33,23,22,.25);text-decoration:none}.order-bar.is-empty{display:none}.order-bar b{white-space:nowrap}@media(min-width:1024px){.order-bar{inset-block-end:24px}}

/* ---------- breakpoint: desktop nav / no bottom bar ---------- */
@media (min-width: 1024px) {
  .screen { padding-block-end: var(--sp-10); }
  .bottom-nav { display: none; }
  .top-nav { display: flex; }
  .toast { inset-block-end: var(--sp-8); }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); }
  .hero-content { display: flex; flex-direction: column; justify-content: center; }
  .hero-media { aspect-ratio: auto; min-block-size: 420px; }
}

/* Quick-pick note chips + customer suggestion box on the cart. */
.note-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-block-end:var(--sp-2)}
.cart-note-label{grid-column:1/-1;text-align:start;color:var(--dorian);font-weight:700;font-size:var(--fs-small)}
.note-chip{border:var(--hairline);background:var(--bg-raised);color:var(--coffee);border-radius:var(--r-pill);padding:5px 12px;font:inherit;font-size:var(--fs-small);cursor:pointer}
.note-chip.is-on{background:var(--dorian);color:var(--ivory);border-color:var(--dorian)}
.note-suggest{margin-block-start:var(--sp-5);padding:var(--sp-4);border:var(--hairline);border-radius:var(--r-md);display:grid;gap:var(--sp-2)}
.note-suggest label{font-size:var(--fs-small);color:var(--coffee)}
.note-suggest span{display:flex;gap:var(--sp-2)}

/* Customer product dialog: the sheet is a viewport overlay and the child is
   the only scrolling surface. This remains correct in RTL and with dvh on
   mobile browsers whose address bar or keyboard changes the viewport. */
body:not(.admin-body) .sheet {
  position: fixed; inset: 0 !important; z-index: 61; display: flex; align-items: center; justify-content: center;
  inline-size: 100% !important; block-size: 100%; max-inline-size: none !important; max-block-size: none !important;
  padding: 16px; margin: 0; overflow: visible; background: transparent; border-radius: 0;
  box-shadow: none; transform: none !important; opacity: 0; visibility: hidden; pointer-events: none;
}
body:not(.admin-body) .sheet.is-open { transform: none !important; opacity: 1; visibility: visible; pointer-events: auto; }
body:not(.admin-body) .sheet-scroll {
  inline-size: min(100%, 1000px); max-inline-size: calc(100vw - 32px);
  max-block-size: min(92dvh, calc(100dvh - 32px)); min-block-size: 0;
  overflow: hidden; background: var(--ivory); box-shadow: 0 10px 36px rgba(33,23,22,.2);
  border-radius: var(--r-xl); display: flex; flex-direction: column;
}
body:not(.admin-body) .sheet-media { flex: 0 0 auto; max-block-size: min(34dvh, 300px); overflow: hidden; }
body:not(.admin-body) .sheet-body { min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: max(20px, env(safe-area-inset-bottom)); }
@media (min-width:1024px) {
  body:not(.admin-body) .sheet-scroll { display: grid; grid-template-columns: minmax(360px,.95fr) minmax(360px,1.05fr); align-items: stretch; }
  body:not(.admin-body) .sheet-media { max-block-size: none; }
}
/* Final three-zone product dialog contract. */
body:not(.admin-body) .sheet-scroll { display:flex !important; flex-direction:column; block-size:auto; }
body:not(.admin-body) .sheet-media { position:relative; inline-size:100%; background:var(--dorian); border-start-start-radius:var(--r-xl); border-start-end-radius:var(--r-xl); }
body:not(.admin-body) .sheet-media .gallery { background:var(--dorian); border-radius:inherit; }
body:not(.admin-body) .sheet-middle { flex:1 1 auto; min-block-size:0; overflow-y:auto; overscroll-behavior:contain; }
body:not(.admin-body) .sheet-body { overflow:visible; }
body:not(.admin-body) .sheet-footer { flex:0 0 auto; padding:12px 20px max(12px,env(safe-area-inset-bottom)); background:var(--ivory); border-block-start:var(--hairline); }
body:not(.admin-body) .sheet-footer.sheet-add { display:block; margin:0; }
body:not(.admin-body) .sheet-footer button { display:flex; align-items:center; justify-content:center; inline-size:100%; min-block-size:52px; padding:14px 18px; border:0; border-radius:var(--r-pill); background:#670001; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
body:not(.admin-body) .sheet-footer button:active { transform:scale(.98); }
body:not(.admin-body) .sheet-footer button:disabled { background:var(--ink-20); color:var(--ink-60); cursor:not-allowed; }
body:not(.admin-body) .sheet-close { inset-block-start:12px; inset-inline-end:12px; }
@media (max-width:767px) {
  body:not(.admin-body) .sheet {
    inset: auto 0 0 !important; inset-inline: 0 !important; inset-block-start: auto !important; inset-block-end: 0 !important;
    inline-size: 100% !important; block-size: auto; max-block-size: 100dvh !important; padding: 0;
    border-radius: 16px 16px 0 0; transform: translateY(104%) !important; transition: transform 220ms ease, visibility 220ms ease !important;
  }
  body:not(.admin-body) .sheet.is-open { transform: translateY(0) !important; }
  body:not(.admin-body) .sheet-scroll { inline-size: 100%; max-inline-size: 100%; max-block-size: min(92dvh,100dvh); border-radius: 16px 16px 0 0; }
}
.note-suggest input{flex:1;min-inline-size:0;block-size:42px;border:var(--hairline);border-radius:var(--r-sm);padding-inline:10px;font:inherit;background:var(--bg-raised)}
.note-suggest button{border:0;border-radius:var(--r-sm);padding-inline:16px;background:var(--espresso);color:var(--ivory);font-weight:600;cursor:pointer}
.note-suggest-done{color:#52743f;font-size:var(--fs-small);font-weight:600}
.progress-0{width:0%}
.progress-1{width:1%}
.progress-2{width:2%}
.progress-3{width:3%}
.progress-4{width:4%}
.progress-5{width:5%}
.progress-6{width:6%}
.progress-7{width:7%}
.progress-8{width:8%}
.progress-9{width:9%}
.progress-10{width:10%}
.progress-11{width:11%}
.progress-12{width:12%}
.progress-13{width:13%}
.progress-14{width:14%}
.progress-15{width:15%}
.progress-16{width:16%}
.progress-17{width:17%}
.progress-18{width:18%}
.progress-19{width:19%}
.progress-20{width:20%}
.progress-21{width:21%}
.progress-22{width:22%}
.progress-23{width:23%}
.progress-24{width:24%}
.progress-25{width:25%}
.progress-26{width:26%}
.progress-27{width:27%}
.progress-28{width:28%}
.progress-29{width:29%}
.progress-30{width:30%}
.progress-31{width:31%}
.progress-32{width:32%}
.progress-33{width:33%}
.progress-34{width:34%}
.progress-35{width:35%}
.progress-36{width:36%}
.progress-37{width:37%}
.progress-38{width:38%}
.progress-39{width:39%}
.progress-40{width:40%}
.progress-41{width:41%}
.progress-42{width:42%}
.progress-43{width:43%}
.progress-44{width:44%}
.progress-45{width:45%}
.progress-46{width:46%}
.progress-47{width:47%}
.progress-48{width:48%}
.progress-49{width:49%}
.progress-50{width:50%}
.progress-51{width:51%}
.progress-52{width:52%}
.progress-53{width:53%}
.progress-54{width:54%}
.progress-55{width:55%}
.progress-56{width:56%}
.progress-57{width:57%}
.progress-58{width:58%}
.progress-59{width:59%}
.progress-60{width:60%}
.progress-61{width:61%}
.progress-62{width:62%}
.progress-63{width:63%}
.progress-64{width:64%}
.progress-65{width:65%}
.progress-66{width:66%}
.progress-67{width:67%}
.progress-68{width:68%}
.progress-69{width:69%}
.progress-70{width:70%}
.progress-71{width:71%}
.progress-72{width:72%}
.progress-73{width:73%}
.progress-74{width:74%}
.progress-75{width:75%}
.progress-76{width:76%}
.progress-77{width:77%}
.progress-78{width:78%}
.progress-79{width:79%}
.progress-80{width:80%}
.progress-81{width:81%}
.progress-82{width:82%}
.progress-83{width:83%}
.progress-84{width:84%}
.progress-85{width:85%}
.progress-86{width:86%}
.progress-87{width:87%}
.progress-88{width:88%}
.progress-89{width:89%}
.progress-90{width:90%}
.progress-91{width:91%}
.progress-92{width:92%}
.progress-93{width:93%}
.progress-94{width:94%}
.progress-95{width:95%}
.progress-96{width:96%}
.progress-97{width:97%}
.progress-98{width:98%}
.progress-99{width:99%}
.progress-100{width:100%}