/* ════════════════════════════════════════════════════════════════
   کافه سها — منو
   Apple Liquid Glass, in the brand's two colours: paper #FEFEFE and
   ink #5C0307 (the logo). Every grey is the ink thinned on paper.
   Restraint is the luxury: one panel + hairlines, glass only where
   layers overlap, hierarchy from weight + size + tone.
   Static page: everything here is plain CSS — no script drives any of it.
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────
   Vazirmatn  → body and controls (clear at small sizes)
   Markazi    → headings and item names (an elegant Persian Naskh)
   The «سها» in the hero is the brand's own logotype, inline SVG.    */
@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn%5Bwght%5D.woff2") format("woff2"),
       url("https://unpkg.com/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn%5Bwght%5D.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "Soha Display";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/markazi-text@5.3.0/files/markazi-text-arabic-wght-normal.woff2") format("woff2"),
       url("https://unpkg.com/@fontsource-variable/markazi-text@5.3.0/files/markazi-text-arabic-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

:root {
  color-scheme: light;

  /* ── The two brand colours ── */
  --paper: #fefefe;
  --ink:   #5c0307;

  /* ── Tones: the ink thinned on paper (contrast on paper in brackets) ── */
  --bg:        var(--paper);
  --surface:   #f8f4f4;   /* ink 4%   — panels, cards */
  --surface-2: #f3eced;   /* ink 7% */
  --hover:     #f2ebeb;   /* ink 7.5% — row hover */
  --press:     #ece2e3;   /* ink 11% */
  --text:      var(--ink);   /* (14:1) */
  --text-body: #74292c;   /* ink 85%  (9.9:1) — long-form body */
  --text-2:    #89494c;   /* ink 72%  (6.5:1) — secondary */
  --text-3:    #965d60;   /* ink 64%  (5.1:1) — captions, still AA on panels */
  --text-4:    #b58d8f;   /* ink 45%  — quiet marks */
  --faint:     #c9abad;   /* ink 33%  — chevrons */
  --hairline:  rgba(92, 3, 7, 0.1);
  --hairline-2: rgba(92, 3, 7, 0.18);
  --fill:      rgba(92, 3, 7, 0.05);
  --fill-2:    rgba(92, 3, 7, 0.085);
  --edge:      inset 0 0 0 1px rgba(92, 3, 7, 0.06);

  /* ── Accent: the ink itself; whatever sits on it is paper ── */
  --accent:       var(--ink);
  --accent-soft:  var(--ink);
  --accent-fill:  var(--ink);
  --accent-hover: #6c0a0f;
  --accent-press: #470205;
  --accent-tint:  rgba(92, 3, 7, 0.08);
  --on-accent:    var(--paper);
  --live:         var(--ink);

  /* ── Type ── */
  --font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI Variable Text", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Soha Display", "Vazirmatn", -apple-system, "Segoe UI", Tahoma, serif;

  /* ── Radius tiers ── */
  --r-pill:  999px;
  --r-chip:  6px;
  --r-thumb: 12px;
  --r-sheet: 16px;
  --r-card:  18px;
  --r-panel: 22px;
  --r-hero:  26px;

  /* ── Shadows (always two-layer, tinted with the ink) ── */
  --sh-card:    0 1px 2px rgba(92, 3, 7, 0.05), 0 8px 24px rgba(92, 3, 7, 0.06);
  --sh-panel:   0 1px 3px rgba(92, 3, 7, 0.05), 0 14px 40px rgba(92, 3, 7, 0.06);
  --sh-lift:    0 2px 6px rgba(92, 3, 7, 0.07), 0 16px 40px rgba(92, 3, 7, 0.13);
  --sh-overlay: 0 2px 8px rgba(40, 2, 4, 0.1), 0 30px 80px rgba(40, 2, 4, 0.24);

  /* ── Layout ── */
  --max-read: 720px;
  --max-grid: 1080px;
  --pad-x: 22px;
  --section: clamp(34px, 6vw, 56px);
  --catbar-h: 60px;

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--catbar-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* price + toman sign; the sign takes the text colour, a step quieter */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* relative: keeps the hidden «تومان» label inside scrolling rows instead of widening the page */
.money { position: relative; display: inline-flex; align-items: center; gap: 0.2em; white-space: nowrap; }
.toman { flex: none; width: 1.08em; height: 1.08em; color: currentColor; opacity: 0.62; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.container {
  width: 100%;
  max-width: var(--max-grid);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.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;
  inset-inline-start: 16px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out-quart);
}
.skip-link:focus { transform: none; }

.ic { flex: none; }

/* ── Shared controls ─────────────────────────────────────────── */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.text-link:hover { text-decoration-color: var(--accent); }

.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: rgba(254, 254, 254, 0.78);
  border: 1px solid rgba(92, 3, 7, 0.08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(40, 2, 4, 0.08);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

.btn-pill,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.2s var(--ease-out-quart), border-color 0.2s, transform 0.1s ease-out;
}
.btn-pill {
  padding-inline: 32px;
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(92, 3, 7, 0.22);
}
.btn-pill:hover { background: var(--accent-hover); }
.btn-ghost {
  padding-inline: 24px 22px;
  border: 1px solid rgba(92, 3, 7, 0.22);
  background: transparent;
  color: var(--text);
}
.btn-ghost .ic { color: var(--text-2); }
.btn-ghost:hover { border-color: rgba(92, 3, 7, 0.42); background: var(--fill); }
.btn-pill:active,
.btn-ghost:active { transform: scale(0.97); }

/* ── Hero: a star chart in ink — the Big Dipper and the star «سها» ── */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(40px, env(safe-area-inset-top)) var(--pad-x) 112px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(52% 38% at 50% 58%, rgba(92, 3, 7, 0.055), transparent 72%),
    var(--paper);
}

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
/* the stars sit behind the text; a mask fades them out through the middle of the hero,
   so no star ever reads as stray punctuation beside a line of text */
.hero-stars {
  -webkit-mask-image: radial-gradient(ellipse 50% 44% at 50% 50%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 50% 44% at 50% 50%, transparent 55%, #000 100%);
}
.hero-stars circle { fill: var(--ink); }
.twinkle { animation: twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes twinkle {
  from { opacity: var(--o, 0.4); }
  to   { opacity: 0.06; }
}

.hero-inner {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 760px;
}

.dipper {
  width: clamp(220px, min(36vw, 40vh), 360px);
  height: auto;
  overflow: visible;
  margin-bottom: clamp(4px, 1.6vh, 18px);
}
.dipper-line { fill: none; stroke: rgba(92, 3, 7, 0.24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dipper-star { fill: rgba(92, 3, 7, 0.78); }
.soha-star { fill: var(--ink); }
.soha-glow {
  fill: rgba(92, 3, 7, 0.14);
  transform-box: fill-box;
  transform-origin: center;
  animation: soha-pulse 3.4s ease-in-out infinite;
}
@keyframes soha-pulse {
  0%, 100% { transform: scale(0.65); opacity: 0.5; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.soha-label { fill: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-2);
}

/* the «سها» logotype, drawn in ink (traced from assets/img/logo hero.png) */
.hero-word {
  margin-top: clamp(8px, 1.6vh, 16px);
  line-height: 0;
  color: var(--ink);
}
.hero-logo {
  display: block;
  width: auto;
  height: clamp(132px, min(36vw, 24vh), 224px);
  fill: currentColor;
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(16px, 3vh, 30px);
  color: var(--accent);
}
.hero-rule span { width: clamp(52px, 10vw, 104px); height: 1px; }
.hero-rule span:first-child { background: linear-gradient(to right, rgba(92, 3, 7, 0.32), transparent); }
.hero-rule span:last-child  { background: linear-gradient(to left, rgba(92, 3, 7, 0.32), transparent); }

.hero-lede {
  margin-top: 18px;
  max-width: 32em;
  font-size: clamp(17px, 2.3vw, 20px);
  line-height: 1.95;
  color: var(--text-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 44px;
  padding: 4px 8px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  transition: color 0.2s;
}
.scroll-cue:hover { color: var(--text); }
.scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(92, 3, 7, 0.14);
}
.scroll-line span {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent);
  animation: scroll-dot 2.4s var(--ease-out-quart) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}

/* ── Featured ───────────────────────────────────────────────── */
.featured { padding-top: clamp(56px, 9vw, 104px); }

.label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 18px;
}
.label { font-family: var(--font-display); font-size: clamp(30px, 4vw, 38px); font-weight: 700; line-height: 1.35; }
.label-sub { font-size: 14px; color: var(--text-3); }

.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74%, 290px);
  gap: 14px;
  margin-inline: calc(var(--pad-x) * -1);
  padding: 4px var(--pad-x) 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }

.card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--edge), var(--sh-card);
}

.card-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.92;
  background:
    radial-gradient(110% 80% at 50% 112%, rgba(92, 3, 7, 0.11), transparent 62%),
    linear-gradient(180deg, var(--paper), var(--surface-2));
}
.card-stage .drink-art { position: absolute; inset: 6% 0 4%; width: 100%; height: 90%; }
.card-stage img { width: 100%; height: 100%; object-fit: cover; }

/* name, then description */
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px 18px;
}
.card-name { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.4; }
.card-desc { order: 1; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }

/* ── Category bar: sticky glass, plain anchor links ─────────── */
.catbar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: clamp(28px, 5vw, 48px);
  background: rgba(254, 254, 254, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 12px rgba(92, 3, 7, 0.05);
}

.catbar-inner {
  display: flex;
  align-items: center;
  height: var(--catbar-h);
}

.seg-scroller {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 6px;
}
.seg-scroller::-webkit-scrollbar { display: none; }

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--fill);
  /* Chromium 140+: the link of the section on screen lights up, no script involved */
  scroll-target-group: auto;
}
.seg-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 15px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out-quart), background-color 0.3s var(--ease-out-quart);
}
.seg-item::after { content: ""; position: absolute; inset: -6px 0; }   /* 48px hit area */
.seg-item:hover { color: var(--text); }
.seg-item:focus-visible { outline-offset: -2px; }
/* its own rule on purpose: a browser that does not know :target-current drops only this one */
.seg-item:target-current { background: var(--accent-fill); color: var(--on-accent); }

/* ── Menu ───────────────────────────────────────────────────── */
.menu { padding-top: 8px; }

.group {
  display: grid;
  gap: 18px;
  padding-block: var(--section);
}
.group + .group { border-top: 1px solid var(--hairline); }

.group-title { font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 42px); font-weight: 700; line-height: 1.3; }

.list {
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--edge), var(--sh-panel);
  --row-pad: clamp(16px, 3vw, 22px);
  --sep: var(--row-pad);
}
.list.has-art { --sep: calc(var(--row-pad) + 44px + 14px); }

.row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 64px;
  padding: 16px var(--row-pad);
}
.has-art .row { align-items: center; }

/* hairlines between rows, inset to the text column (iOS) */
.row-li + .row-li .row::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: var(--sep);
  inset-inline-end: 0;
  height: 1px;
  background: var(--hairline);
}

.row-art { flex: none; width: 44px; height: 52px; display: grid; place-items: center; }
.row-art .drink-art { width: 100%; height: 100%; }

.row-main { flex: 1; min-width: 0; }
.row-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.45; }
.row-desc { margin-top: 1px; font-size: 14px; line-height: 1.8; color: var(--text-2); }

/* optional: only rows that were given a price (see the comment above the menu in index.html) */
.row-price {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}
.has-art .row-price { align-self: center; padding-top: 0; }

/* عکس آیتم (آپلودشده از پنل) */
.row-photo {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--r-thumb);
  background: var(--surface-2);
  box-shadow: var(--edge);
}
.row-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.list.has-photo { --sep: calc(var(--row-pad) + 64px + 14px); }
/* ردیفِ بدون عکس در دسته‌ای که عکس دارد، هم‌تراز با بقیه می‌ماند */
.has-photo .row-main:first-child { margin-inline-start: 78px; }

/* آیتم ناموجود: در منو می‌ماند، ولی کم‌رنگ است و (چون data-id ندارد) به سبد نمی‌رود */
.row.is-soldout .row-art,
.row.is-soldout .row-photo,
.row.is-soldout .row-main { opacity: 0.5; }

/* ── Visit: panorama, details, map ──────────────────────────── */
.visit { padding-block: clamp(64px, 10vw, 120px) clamp(48px, 7vw, 80px); }

.section-head { max-width: var(--max-read); }
.section-title { margin-top: 10px; font-family: var(--font-display); font-size: clamp(42px, 7vw, 68px); font-weight: 700; line-height: 1.25; }
.section-lede { margin-top: 12px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.9; color: var(--text-2); }

.pano-slot { margin-top: clamp(28px, 5vw, 44px); }

/* the panorama is one wide photo inside a box that scrolls sideways (swipe, trackpad, scrollbar) */
.pano {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
  border-radius: var(--r-hero);
  background: var(--surface-2);
  box-shadow: var(--edge), var(--sh-panel);
}
.pano-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(254, 254, 254, 0.7) transparent;
  container-type: inline-size;   /* lets the start marker below be exactly as wide as the visible window */
}
.pano-scroll:focus-visible { outline-offset: -4px; }
.pano-inner { position: relative; height: 100%; width: max-content; }
.pano-img { height: 100%; width: auto; max-width: none; }
/* Chromium 133+: open the photo on its middle. «nearest» scrolls the least that brings this box
   into view, so the box is made as wide as the window and centred on the photo. */
.pano-start { position: absolute; top: 0; bottom: 0; left: calc(50% - 50cqw); width: 100cqw; scroll-initial-target: nearest; }

/* soft vignette, so glass chips always sit on something to refract */
.pano::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(40, 2, 4, 0.2), transparent 22%, transparent 74%, rgba(40, 2, 4, 0.28)),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(40, 2, 4, 0.24));
}

.pano-ui {
  position: absolute;
  inset: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.pano-hint {
  align-self: center;
  margin-bottom: 14px;   /* clear of the scrollbar */
  animation: hint-out 7s ease 3s forwards;
}
.pano-hint .ic { color: var(--text-2); }
@keyframes hint-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); visibility: hidden; }
}

.visit-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.info {
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--edge), var(--sh-panel);
}
.info-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 16px;
  padding: 18px clamp(18px, 3vw, 24px);
}
.info-row + .info-row { border-top: 1px solid var(--hairline); }
.info-label { padding-top: 3px; font-size: 13.5px; color: var(--text-3); }
.info-value { font-size: 15.5px; line-height: 1.9; color: var(--text); }

.hours { display: grid; gap: 6px; }
.hours-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); }
.hours-day { display: inline-flex; align-items: center; gap: 8px; }

/* the grid + paper below is what shows if the map tiles cannot load (offline, or opened as a file) */
.map-card {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  overflow: hidden;
  content-visibility: auto;   /* the tiles are not requested until the card is near the screen */
  border-radius: var(--r-panel);
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(92, 3, 7, 0.08), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(92, 3, 7, 0.06) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(92, 3, 7, 0.06) 31px 32px),
    var(--surface);
  box-shadow: var(--edge), var(--sh-panel);
}
.map-tiles {
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.06);
}
/* the origin is the pin; every tile is placed relative to it (offsets are written in the HTML) */
.map-origin { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.map-origin span {
  position: absolute;
  width: 256px;
  height: 256px;
  background-size: 256px 256px;
  pointer-events: none;
}
/* duotone: the grey map is screened with the ink — dark lines turn ink, light ground stays paper */
.map-card::before,
.map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.map-card::before { background: var(--ink); mix-blend-mode: screen; }
.map-card::after { background: radial-gradient(90% 75% at 50% 42%, transparent 40%, rgba(254, 254, 254, 0.6) 100%); }

.map-pin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: 34px;
  height: 44px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 10px rgba(92, 3, 7, 0.32));
}
.map-pulse {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(92, 3, 7, 0.38);
  animation: map-pulse 2.4s var(--ease-out-quart) infinite;
}
@keyframes map-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to   { transform: scale(4); opacity: 0; }
}

.map-actions {
  position: absolute;
  z-index: 3;
  inset-inline: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.map-actions .glass-chip {
  height: 44px;
  padding-inline: 16px;
  font-size: 14px;
  transition: background-color 0.2s var(--ease-out-quart), transform 0.1s ease-out;
}
.map-actions .glass-chip:hover { background: rgba(254, 254, 254, 0.95); }
.map-actions .glass-chip:active { transform: scale(0.97); }
.map-actions .glass-chip--primary { background: var(--ink); border-color: rgba(254, 254, 254, 0.16); color: var(--on-accent); }
.map-actions .glass-chip--primary:hover { background: var(--accent-hover); }

.map-attrib {
  position: absolute;
  z-index: 3;
  top: 10px;
  inset-inline-end: 12px;
  font-size: 11px;
  color: var(--text-3);
}
.map-attrib:hover { color: var(--text); }

/* ── Drink art — glass drawn in ink on paper; the drinks keep their own colours ── */
.drink-art { overflow: visible; }
.art-glass-fill { fill: rgba(92, 3, 7, 0.03); }
.art-outline { fill: none; stroke: rgba(92, 3, 7, 0.5); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.art-rim { fill: rgba(92, 3, 7, 0.025); stroke: rgba(92, 3, 7, 0.4); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.art-base { fill: rgba(92, 3, 7, 0.09); }
.art-hl { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.2; stroke-linecap: round; }
.art-handle { fill: none; stroke: rgba(92, 3, 7, 0.45); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.art-saucer { fill: rgba(92, 3, 7, 0.04); stroke: rgba(92, 3, 7, 0.3); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.art-surface { fill: rgba(255, 255, 255, 0.16); }
.art-bubble { fill: none; stroke: rgba(70, 45, 30, 0.2); stroke-width: 0.5; }
.art-fizz { fill: rgba(255, 255, 255, 0.3); stroke: rgba(92, 3, 7, 0.22); stroke-width: 0.6; }
.art-dust { fill: #7a4a2c; }
.art-ice { fill: rgba(255, 255, 255, 0.34); stroke: rgba(92, 3, 7, 0.26); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.art-straw { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.art-peel { fill: none; stroke: #f08c00; stroke-width: 2.4; stroke-linecap: round; }
.art-sprig { fill: none; stroke: #6f8f55; stroke-width: 1.3; stroke-linecap: round; }
.art-steam { fill: none; stroke: rgba(92, 3, 7, 0.24); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.art-leader { fill: none; stroke: rgba(92, 3, 7, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 0.8; }
.art-label { fill: var(--text-2); font-family: var(--font); font-weight: 600; }
.art-mint { fill: #5f9e5a; }
.art-mint-stem { fill: none; stroke: #4f8a4b; stroke-width: 1.2; stroke-linecap: round; }
.art-lemon { fill: rgba(255, 218, 80, 0.95); stroke: #e3b11c; stroke-width: 1.4; }
.art-lemon-seg { fill: none; stroke: rgba(255, 250, 220, 0.9); stroke-width: 0.8; }
.art-cake-side { fill: #a8733f; }
.art-cake-top { fill: #f6eee2; }
.art-cake-edge { fill: none; stroke: rgba(92, 3, 7, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.art-cherry { fill: var(--ink); }
.art-cherry-stem { fill: none; stroke: #5f8044; stroke-width: 1.4; stroke-linecap: round; }
.art-vase { fill: rgba(92, 3, 7, 0.03); stroke: rgba(92, 3, 7, 0.45); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.art-water { fill: rgba(120, 165, 220, 0.3); }
.art-metal { fill: rgba(92, 3, 7, 0.07); stroke: rgba(92, 3, 7, 0.45); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.art-bowl { fill: #7d3422; stroke: rgba(92, 3, 7, 0.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art-coal { fill: #ff5a3a; }
.art-hose { fill: none; stroke: rgba(92, 3, 7, 0.45); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.art-hose-tip { fill: none; stroke: rgba(92, 3, 7, 0.6); stroke-width: 3; stroke-linecap: round; }


/* ── Panorama 360 (enhances the scroll strip above once pano360.js is running) ── */
.pano-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;               /* must stay laid out while loading, or the viewer never sees it as visible */
  cursor: grab;
  touch-action: pan-y;          /* vertical swipes still scroll the page; horizontal ones turn the view */
  user-select: none;
  -webkit-user-select: none;
  background-size: auto 100%;   /* flat fallback strip */
  background-repeat: repeat-x;
}
.pano-stage canvas { display: block; width: 100%; height: 100%; }
.pano-stage.is-grabbing { cursor: grabbing; }
.pano.is-360 .pano-scroll { display: none; }
.pano.is-360 .pano-hint .ic { animation: none; }

.pano-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background: rgba(254, 254, 254, 0.25);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.pano-progress span { display: block; height: 100%; width: 0; background: var(--paper); transition: width 0.2s linear; }
.pano.is-loading .pano-progress { opacity: 1; }

.pano-tools {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
}
.pano-tools[hidden] { display: none; }
.pano-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(254, 254, 254, 0.78);
  border: 1px solid rgba(92, 3, 7, 0.08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(40, 2, 4, 0.08);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out-quart), transform 0.1s ease-out;
}
.pano-btn:hover { background: rgba(254, 254, 254, 0.95); }
.pano-btn:active { transform: scale(0.94); }
.pano-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pano-zoom { display: none; }/* انتخاب محیط: بیرون کافه / داخل کافه */
.pano-switch {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 5;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(254, 254, 254, 0.78);
  border: 1px solid rgba(92, 3, 7, 0.08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(40, 2, 4, 0.08);
}
.pano-switch[hidden] { display: none; }
.pano-scene {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.pano-scene:hover { background: rgba(92, 3, 7, 0.07); }
.pano-scene[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pano-scene:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pano.is-switching .pano-stage { opacity: 0.5; transition: opacity 0.25s; }
.pano-zoom { display: none; }
.pano-full .ic-close { display: none; }

/* expanded: the panorama fills the screen (works everywhere, iOS Safari included) */
html.pano-lock, html.pano-lock body { overflow: hidden; }
.pano.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100dvh;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #1d0103;
}
.pano.is-expanded .pano-stage { touch-action: none; }
.pano.is-expanded .pano-zoom { display: inline-grid; }
.pano.is-expanded .pano-full .ic-open { display: none; }
.pano.is-expanded .pano-full .ic-close { display: block; }
.pano.is-expanded .pano-ui { inset: max(14px, env(safe-area-inset-top)) 14px 14px; }
.pano.is-expanded .pano-tools {
  inset-block-end: max(14px, env(safe-area-inset-bottom));
  inset-inline-end: max(14px, env(safe-area-inset-right));
}
.pano.is-expanded .pano-switch {
  inset-block-start: max(14px, env(safe-area-inset-top));
  inset-inline-end: max(14px, env(safe-area-inset-right));
}
.pano.is-expanded::after { display: none; }


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
  .pano { aspect-ratio: 4 / 5; }
  .pano-scene { min-height: 32px; padding: 0 12px; font-size: 13px; }
  .info-row { grid-template-columns: 1fr; gap: 2px; }
  .info-label { padding-top: 0; }
  .hero-actions { width: 100%; }
  .hero-actions > * { flex: 1 1 0; min-width: 140px; padding-inline: 18px; }
}

@media (max-height: 600px) {
  .scroll-cue { display: none; }
  .hero { padding-bottom: 48px; }
}

@media (min-width: 900px) {
  .cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .group { grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
  .group-head { position: sticky; top: calc(var(--catbar-h) + 32px); }
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .map-card { min-height: 0; }
}

/* ── Accessibility preferences ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .map-pulse, .twinkle, .soha-glow, .scroll-line span, .pano-hint { animation: none; }
  .seg-item, .btn-pill, .btn-ghost { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .catbar, .glass-chip {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hairline: rgba(92, 3, 7, 0.3);
    --text-2: #74292c;
    --text-3: #89494c;
    --faint: #965d60;
    --edge: inset 0 0 0 1px rgba(92, 3, 7, 0.35);
  }
  .glass-chip { background: var(--paper); border: 1px solid rgba(92, 3, 7, 0.5); }
}


/* ── بدون هایلایت آبیِ لمس/کلیک ── */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }

/* ── اسکرول‌بار: باریک، گرد و هم‌رنگ برند ── */
@supports selector(::-webkit-scrollbar) {
  /* کروم، سافاری، اج */
  *::-webkit-scrollbar { width: 12px; height: 12px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background-color: rgba(92, 3, 7, 0.26);
    background-clip: content-box;          /* با حاشیهٔ شفاف، میله «شناور» و باریک‌تر دیده می‌شود */
    border: 3px solid transparent;
    border-radius: 99px;
  }
  *::-webkit-scrollbar-thumb:hover { background-color: rgba(92, 3, 7, 0.5); }
  *::-webkit-scrollbar-thumb:active { background-color: rgba(92, 3, 7, 0.65); }
  *::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  /* فایرفاکس */
  * { scrollbar-width: thin; scrollbar-color: rgba(92, 3, 7, 0.35) transparent; }
}