/*
 * Public business page. Colors, fonts and logo shape come from the per-business
 * custom properties in <style id="eb-theme"> (see Public/ThemeCss.cs).
 */

@font-face { font-family: "Vazirmatn"; src: url("/fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn"; src: url("/fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Estedad"; src: url("/fonts/estedad-arabic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Estedad"; src: url("/fonts/estedad-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("/fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("/fonts/noto-naskh-arabic-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lalezar"; src: url("/fonts/lalezar-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Lalezar"; src: url("/fonts/lalezar-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }

/* Classes below set display, which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  line-height: 1.8;
}

h1, h2 { font-family: var(--font-heading); line-height: 1.4; }

a { color: inherit; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.4rem 1rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}

/* A sample business's pages (_SampleBar): the platform speaking, so fixed colors like the preview banner. */
.sample-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  padding: 0.55rem 1rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
}

.sample-bar strong {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
}

.sample-bar a {
  color: #fff;
  font-weight: 700;
}

.sample-toast {
  position: fixed;
  inset-inline: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 28rem;
  margin-inline: auto;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* ---------- Hero ---------- */

.hero { position: relative; }

/* Over the cover, on the end side: the language link and the light/dark switch. */
.hero__tools {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "English" / "فارسی": the same page in the other language (only when the owner turned English on). */
.lang-switch {
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lang-switch:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Visitor's light/dark switch. Shows the moon in light mode and the sun in dark mode. */
.mode-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mode-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mode-toggle .sun { display: none; }
:root[data-mode="dark"] .mode-toggle .sun { display: block; }
:root[data-mode="dark"] .mode-toggle .moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] .mode-toggle .sun { display: block; }
  :root[data-mode="auto"] .mode-toggle .moon { display: none; }
}

.cover {
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-soft));
  overflow: hidden;
}

.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.identity {
  position: relative;
  padding: 0 16px;
  margin-top: -48px;
  text-align: center;
}

.logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.5rem;
  border-radius: var(--logo-radius);
  border: 4px solid var(--c-bg);
  background: var(--c-surface);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
}

.logo img { width: 100%; height: 100%; object-fit: contain; }

/* Transparent logos get a backdrop only in the mode where they would vanish (see ImageTone). */
.logo.ink-light { background: #1f1f1f; }
:root[data-mode="dark"] .logo.ink-light { background: var(--c-surface); }
:root[data-mode="dark"] .logo.ink-dark { background: #ffffff; }

@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] .logo.ink-light { background: var(--c-surface); }
  :root[data-mode="auto"] .logo.ink-dark { background: #ffffff; }
}

.logo span {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-primary);
}

.identity h1 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); }

.meta { margin: 0.1rem 0 0; color: var(--c-muted); font-size: 0.95rem; }

.tagline { margin: 0.5rem 0 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-size: 0.9rem;
}

.status::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #9ca3af;
}

a.status { color: inherit; text-decoration: none; cursor: pointer; }

.status.is-open::before { background: #16a34a; }
.status.is-closed::before { background: #dc2626; }

.to-top {
  position: fixed;
  inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 16px;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.45);
  cursor: pointer;
}

.to-top:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* One row up to four; five or six go 3 + 3, seven or eight 4 + 4. A short last row stretches to the edges. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 16px 0;
}

.actions > .action { flex: 1 1 0; min-width: 72px; }
.actions:has(> .action:nth-child(5)) > .action { flex-basis: calc(33.34% - 0.5rem); }
.actions:has(> .action:nth-child(7)) > .action { flex-basis: calc(25% - 0.5rem); }

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 0.25rem;
  text-align: center;
  line-height: 1.4;
  border-radius: 14px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.action .icon { width: 1.5rem; height: 1.5rem; }

.action:focus-visible, .chip:focus-visible, .row-link:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* ---------- Sections ---------- */

.card {
  margin: 1rem 16px 0;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.card h2 .icon { color: var(--c-primary); }

.card p { margin: 0 0 0.5rem; }
.card p:last-child { margin-bottom: 0; }

.muted { color: var(--c-muted); }

.hours { width: 100%; border-collapse: collapse; }

.hours td { padding: 0.35rem 0.5rem; border-top: 1px solid var(--c-border); }
.hours tr:first-child td { border-top: 0; }
.hours td:last-child { text-align: end; }
.hours tr.closed td:last-child { color: var(--c-muted); }

.hours tr.today td {
  background: var(--c-primary-soft);
  font-weight: 700;
}

.hours tr.today td:first-child { border-radius: 0 8px 8px 0; }
.hours tr.today td:last-child { border-radius: 8px 0 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-text);
  font-size: 0.9rem;
  text-decoration: none;
}

.chip .icon { color: var(--c-primary); }

/* Filters are real buttons: without this they keep the browser's border and show no choice. */
button.chip {
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button.chip[aria-pressed="true"] {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.row-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--c-border);
  text-decoration: none;
}

.row-link:first-of-type { border-top: 0; }
.row-link .icon { color: var(--c-primary); }
.row-link .ltr { direction: ltr; unicode-bidi: isolate; }
.row-link small { color: var(--c-muted); margin-inline-start: auto; }

/* ---------- Business card landing (/c/{code}) ---------- */

.vcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0 2rem;
  text-align: center;
}

.vcard__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--logo-radius);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.vcard__name { margin: 1rem 16px 0; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.4; }
.vcard__subtitle { margin: 0.25rem 16px 0; color: var(--c-muted); }

.vcard__save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.vcard__save .icon { width: 1.4em; height: 1.4em; }
.vcard__phones { align-self: stretch; text-align: start; }
.vcard__page { margin-top: 1.5rem; color: var(--c-primary); }

.footer { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 2rem 16px 0; text-align: center; font-size: 0.8rem; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; }
.footer .footer__report { font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px; }
.footer a { color: var(--c-muted); text-decoration: none; }
.footer a strong { color: var(--c-primary); }

@media (min-width: 641px) {
  .cover { border-radius: 0 0 20px 20px; }
}

/* ---------- Menu (Items module) ---------- */

.menu {
  margin: 1.25rem 0 0;
}

.menu__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 16px 0.5rem;
  font-size: 1.2rem;
}

.menu__title .icon { color: var(--c-primary); }

/* Tobacco shops: the age limit and health warning, above the products. */
.menu__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 16px 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--c-text) 18%, var(--c-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-text) 5%, var(--c-surface));
  font-size: 0.9rem;
  line-height: 1.7;
}

.menu__notice .icon { flex: none; margin-top: 0.2rem; color: var(--c-text); }

/* Search, the out-of-stock switch and the section shortcuts stay at the top while scrolling a long menu. */
.menu__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.menu__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 16px 0;
}

.menu__tools:not(:has(+ .menu__tabs:not([hidden]))) { padding-bottom: 0.6rem; }

.menu__search {
  position: relative;
  flex: 1 1 12rem;
  display: flex;
  align-items: center;
}

.menu__search > .icon {
  position: absolute;
  inset-inline-start: 0.7rem;
  color: var(--c-muted);
  pointer-events: none;
}

.menu__search input {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
}

.menu__search input::placeholder { color: var(--c-muted); }
.menu__search input::-webkit-search-cancel-button { display: none; }

.menu__search input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent);
}

.menu__clear {
  position: absolute;
  inset-inline-end: 0.3rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}

.menu__clear:focus-visible { outline: 2px solid var(--c-primary); }

/* A pill like the tabs, holding a small switch (the checkbox restyled); it fills in when on. */
.menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  padding-inline-end: 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.menu__toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  background: var(--c-primary-soft);
}

.menu__toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-muted) 40%, var(--c-border));
  cursor: pointer;
}

.menu__toggle input::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  inset-inline-start: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.menu__toggle input:checked { background: var(--c-primary); }
.menu__toggle input:checked::before { inset-inline-start: calc(100% - 1.1rem); background: var(--c-on-primary); }
.menu__toggle input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.menu__empty { margin: 1.5rem 16px 0; text-align: center; }

.menu__tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 16px;
  scrollbar-width: none;
}

.menu__tabs::-webkit-scrollbar { display: none; }

.menu__tabs a {
  flex: none;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-text);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.menu__tabs a.is-active {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.menu__section {
  margin: 1rem 16px 0;
  scroll-margin-top: calc(var(--menu-bar, 52px) + 12px); /* below the sticky bar (business.js measures it) */
}

.menu__section h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}

.menu__section-desc { margin: 0 0 0.5rem; font-size: 0.9rem; }

.items {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.items--list .item {
  display: flex;
  align-items: center; /* name and price centered beside the photo */
  gap: 0.8rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.items--list .item__photo {
  flex: none;
  width: 88px;
  height: 88px;
}

.items--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.items--grid .item {
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.items--grid .item__photo { aspect-ratio: 1; border-radius: 0; }
.items--grid .item__body { padding: 0.6rem 0.7rem 0.75rem; }
.items--grid .item__head { flex-direction: column; align-items: flex-start; gap: 0.1rem; }

.item__photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-primary-soft);
}

.item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Categories that show photos whole (ItemPhotoShape, e.g. paintings): fitted in the same box, never cropped, on a quiet mat. */
.items--whole .item__photo,
.specials--whole .special__photo { background: color-mix(in srgb, var(--c-text) 6%, var(--c-surface)); }
.items--whole .item__photo img,
.specials--whole .special__photo { object-fit: contain; }

.item__sample {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 4px;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.6;
}

.item__body { flex: 1; min-width: 0; }

.item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.item__name { font-weight: 700; }

.item__price {
  flex: none;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.item__price--ask {
  color: var(--c-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

.item__ask {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--c-primary);
  text-decoration: none;
}

.item__ask .icon { width: 1em; height: 1em; }

/* «تیم ما» (Team module) */
.team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.team__person {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-primary) 5%, transparent);
}

.team__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.team__photo--none {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
}

.team__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.team__name { font-weight: 700; }

.team__role { font-size: 0.88rem; }

.team__bio {
  margin: 0;
  font-size: 0.88rem;
  color: var(--c-muted);
}

.team__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.item__desc {
  margin: 0.15rem 0 0;
  color: var(--c-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.item__variants {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.9rem;
}

.item__variants li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0;
  border-top: 1px dashed var(--c-border);
}

.item__variants li:first-child { border-top: 0; }

.item__badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  background: var(--c-border);
  color: var(--c-muted);
  font-size: 0.75rem;
}

.item--out .item__photo,
.item--out .item__name,
.item--out .item__price { opacity: 0.55; }

/* Links from the «ویژه‌ها» strip land below the sticky bar. */
.item { scroll-margin-top: calc(var(--menu-bar, 52px) + 12px); }

/* The price before a discount, struck through beside the new one. */
.item__old {
  margin-inline-end: 0.35rem;
  color: var(--c-muted);
  font-weight: 400;
  font-size: 0.85em;
}

/* The discount («۲۰٪ تخفیف») and the owner's badges («جدید», «گیاهی»). */
.item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.item__chip {
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-text);
  font-size: 0.75rem;
  line-height: 1.7;
}

.item__chip--off {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 700;
}

/* Filter chips under the search: one at a time, «همه» clears it. Scrolls sideways on narrow screens. */
.menu__filters {
  display: flex;
  flex: 1 1 100%;
  min-width: 0; /* scroll inside rather than widen the page */
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.menu__filters::-webkit-scrollbar { display: none; }

.menu__filter {
  flex: none;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu__filter[aria-pressed="true"] {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.menu__filter:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- «ویژه‌ها»: discounted and promoted items in a sideways strip (Pro) ---------- */

.specials { margin: 0.25rem 0 0.75rem; }

.specials__title {
  margin: 0 16px 0.4rem;
  font-family: var(--font-heading);
  font-size: 1rem;
}

.specials__list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0.1rem 16px 0.5rem;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.specials__list::-webkit-scrollbar { display: none; }

.specials__list li { flex: none; scroll-snap-align: start; }

.special {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 9.5rem;
  height: 100%;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
  border-radius: 14px;
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
}

.special:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.special__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.4rem;
  border-radius: 10px;
  object-fit: cover;
  background: var(--c-primary-soft);
}

.special__badge {
  align-self: flex-start;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.7;
}

/* Items without a photo keep the cards even. */
.special__photo--none {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--c-primary) 55%, transparent);
}

.special__photo--none .icon { width: 2.2rem; height: 2.2rem; }

/* Over the photo's corner. */
.special__photo + .special__badge {
  position: absolute;
  top: 0.85rem;
  inset-inline-start: 0.85rem;
}

.special__name {
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.special__price {
  margin-top: auto;
  padding-top: 0.2rem;
  color: var(--c-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.special__price s {
  display: block;
  color: var(--c-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* ---------- Listings (real estate, car dealers): cards on the business page, the listing page, the calculators ---------- */

.listings { margin: 1.25rem 0 0; }

.listings__tools {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 16px 0.75rem;
}

.listings__selects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.listings__selects select,
.listings__selects input,
.converter__field input,
.converter__field select {
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}

.listings__selects input::placeholder { color: var(--c-muted); }

.listings__selects select:focus-visible,
.listings__selects input:focus-visible,
.converter__field input:focus-visible,
.converter__field select:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

.listings__grid {
  list-style: none;
  margin: 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.75rem;
}

.listing {
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.listing__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.listing__link:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -3px; border-radius: 16px; }

.listing__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-primary-soft);
  overflow: hidden;
}

.listing__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.listing__no-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--c-primary) 55%, var(--c-primary-soft));
}

.listing__no-photo .icon { width: 3rem; height: 3rem; }

.listing__deal,
.listing__status,
.listing__count {
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.7;
}

.listing__photo .listing__deal,
.listing__photo .listing__status,
.listing__photo .listing__count { position: absolute; top: 0.6rem; }

.listing__deal { background: var(--c-primary); color: var(--c-on-primary); }
.listing__photo .listing__deal { inset-inline-start: 0.6rem; }

.listing__status { background: #1f1f1f; color: #ffffff; }
.listing__status--reserved { background: #b45309; }
.listing__photo .listing__status { inset-inline-end: 0.6rem; }

/* A car whose price went down lately (Pro). */
.listing__drop {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: #15803d;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.7;
}

.listing__drop .icon { width: 1.1em; height: 1.1em; }

.listing__old {
  margin-inline-end: 0.4rem;
  color: var(--c-muted);
  font-size: 0.85em;
  font-weight: 400;
}

.listing__count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgb(0 0 0 / 0.55);
  color: #ffffff;
  font-weight: 600;
}

.listing__photo .listing__count { top: auto; bottom: 0.6rem; inset-inline-end: 0.6rem; }
.listing__count .icon { width: 1em; height: 1em; }

.listing__body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem 0.85rem; }
.listing__title { font-weight: 700; line-height: 1.5; }
.listing__meta { color: var(--c-muted); font-size: 0.85rem; }
.listing__price { color: var(--c-primary); font-weight: 700; }

.verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block: 0.25rem;
  color: var(--c-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.verified .icon { width: 1.15em; height: 1.15em; }

.trust__note { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; color: var(--c-primary); font-size: 0.9rem; }
.trust__note .icon { flex: none; width: 1.2em; height: 1.2em; }
.trust__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.trust__facts dt { color: var(--c-muted); font-size: 0.8rem; }
.trust__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.trust__heading { margin: 1rem 0 0.5rem; font-size: 1rem; }

.certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cert {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-primary) 7%, transparent);
}
/* A document is read whole, whatever its shape. */
.cert__image { flex: none; width: 72px; height: 96px; object-fit: contain; border-radius: 8px; background: #ffffff; cursor: zoom-in; }
.cert__title { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.cert__line { display: block; font-size: 0.85rem; overflow-wrap: anywhere; }

.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; }
/* Always a white tile: a client's transparent logo is drawn for one, and it isn't the owner's theme. */
.client { display: flex; aspect-ratio: 1; padding: 0.5rem; border-radius: 12px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--c-muted) 25%, transparent); }
.client img { width: 100%; height: 100%; object-fit: contain; }

.branches__filter { margin: 0 0 0.75rem; }
.branches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.branch {
  padding: 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-primary) 7%, transparent);
}

.branch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.branch__name { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.branch__kind { flex: none; color: var(--c-muted); font-size: 0.8rem; }
.branch__place, .branch__address { margin: 0.15rem 0 0; color: var(--c-muted); font-size: 0.9rem; }
.branch .chips { margin-top: 0.5rem; }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-primary) 7%, transparent);
  color: inherit;
  text-decoration: none;
}

.file__icon, .file__action { display: flex; flex: none; color: var(--c-primary); }
.file__icon .icon { width: 1.75rem; height: 1.75rem; }
.file__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file__title { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.file__meta { color: var(--c-muted); font-size: 0.85rem; }

@media (hover: hover) {
  .file:hover { background: color-mix(in srgb, var(--c-primary) 13%, transparent); }
}

.listing__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.listing__facts > span {
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* Sold or rented: still shown for a while, quieter. */
.listing--closed .listing__photo img { filter: grayscale(0.85); opacity: 0.8; }
.listing--closed .listing__price { color: var(--c-muted); text-decoration: line-through; }

.listings__fee {
  margin: 0.9rem 16px 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--c-primary-soft);
  font-size: 0.9rem;
  white-space: pre-line;
}

.converter__fields { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }
.converter__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--c-muted); }
.converter__field input { flex: none; font-size: 1rem; direction: ltr; text-align: end; }
.converter__field select { flex: none; font-size: 1rem; }

.converter__results { display: grid; gap: 0.4rem; margin: 0.2rem 0 0; }

.converter__results > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: var(--c-primary-soft);
}

.converter__results dt { font-size: 0.9rem; }
.converter__results dd { margin: 0; font-weight: 700; color: var(--c-primary); }
.converter__note { font-size: 0.85rem; }

/* A car's body diagram: seen from above, each part colored by what was done to it. The conditions keep fixed
   colors (like the status ribbons) so they read the same on every theme; the legend and the lines below say it in words. */
.car-body__wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.car-body__svg { flex: none; width: min(45%, 170px); height: auto; }
.car-body__shell { fill: var(--c-primary-soft); stroke: var(--c-border); stroke-width: 2; }
.car-body__wheel { fill: color-mix(in srgb, var(--c-text) 75%, transparent); }
.car-body__glass { fill: color-mix(in srgb, var(--c-text) 16%, var(--c-surface)); }
.car-body__part { fill: var(--c-surface); stroke: color-mix(in srgb, var(--c-text) 35%, transparent); stroke-width: 1.5; }
.car-body__part--painted, .car-body__key--painted { fill: #f59e0b; background: #f59e0b; }
.car-body__part--repaired, .car-body__key--repaired { fill: #3b82f6; background: #3b82f6; }
.car-body__part--replaced, .car-body__key--replaced { fill: #dc2626; background: #dc2626; }

.car-body__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.car-body__key {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.45rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--c-text) 35%, transparent);
  background: var(--c-surface);
  vertical-align: -0.15em;
}

.car-body__line { margin: 0.6rem 0 0; font-size: 0.9rem; }
.lp-terms { margin: 0 0 0.4rem; padding-inline-start: 1.2rem; }

/* The listing page (/{slug}/listings/{id}) */

.lp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 16px;
}

.lp-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.lp-back > .icon { color: var(--c-primary); }
.lp-back__logo { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 10px; object-fit: contain; background: var(--c-surface); }
.lp-back span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.lp-back strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-back small { color: var(--c-muted); }
.lp-back:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 8px; }

.lp-bar__tools { display: flex; gap: 0.4rem; flex: none; }
/* The header tools are drawn for the cover photo; here they sit on the page. */
.lp-bar .mode-toggle, .lp-bar .lang-switch { position: static; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }
.lp-bar .mode-toggle:focus-visible, .lp-bar .lang-switch:focus-visible { outline-color: var(--c-primary); }

.lp-gallery { position: relative; }

.lp-gallery__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lp-gallery__track::-webkit-scrollbar { display: none; }
.lp-gallery__track li { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; background: var(--c-primary-soft); }
.lp-gallery__track img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-gallery__count {
  position: absolute;
  bottom: 0.7rem;
  inset-inline-end: 0.7rem;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #ffffff;
  font-size: 0.8rem;
}

.lp-head { margin: 1rem 16px 0; }
.lp-head__chips { display: flex; gap: 0.4rem; }
.lp-head h1 { margin: 0.5rem 0 0; font-size: clamp(1.3rem, 5vw, 1.7rem); }
.lp-price { margin: 0.35rem 0 0; color: var(--c-primary); font-size: 1.2rem; font-weight: 800; }
.lp-per-meter { margin: 0.15rem 0 0; font-size: 0.9rem; }
.lp-facts { margin: 0.6rem 0 0; }

.lp-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; margin: 0; }
.lp-details > div { padding: 0.5rem 0.7rem; border-radius: 12px; background: var(--c-primary-soft); }
.lp-details dt { color: var(--c-muted); font-size: 0.8rem; }
.lp-details dd { margin: 0; font-weight: 600; }
.lp-number { margin-top: 0.75rem !important; font-size: 0.85rem; }
.lp-amenities { margin-top: 0; }

.actions button.action { border: 0; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }

.footer .lp-all { color: var(--c-primary); font-size: 0.9rem; font-weight: 600; }

@media (min-width: 641px) {
  .lp-gallery__track li { border-radius: 0 0 20px 20px; overflow: hidden; }
}

/* ---------- Events (Pro): the featured strip, the «رویدادها» list and the event page ---------- */

.event-strip { margin: 1.25rem 0 0.25rem; }

.event-strip__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 16px 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}

.event-strip__title .icon { width: 1.2em; height: 1.2em; color: var(--c-primary); }

.event-strip__list {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0.1rem 16px 0.6rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.event-strip__list::-webkit-scrollbar { display: none; }

/* One featured event fills the row; with more, the next one peeks in. */
.event-strip__list > .event { flex: 0 0 min(15rem, 72%); scroll-snap-align: start; }
.event-strip__list > .event:only-child { flex-basis: min(20rem, 100%); }

.events { margin: 1.25rem 0 0; }

.events__list {
  list-style: none;
  margin: 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.75rem;
}

.event {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-surface);
}

.event__link { display: flex; gap: 0.75rem; padding: 0.6rem; color: inherit; text-decoration: none; flex: 1; }
.event__link:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -3px; border-radius: 16px; }

.event__poster {
  position: relative;
  flex: none;
  width: 6.5rem;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-primary-soft);
}

.event__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.event__no-poster {
  display: grid;
  place-items: center;
  height: 100%;
  color: color-mix(in srgb, var(--c-primary) 55%, transparent);
}

.event__no-poster .icon { width: 2.4rem; height: 2.4rem; }

.event__countdown {
  position: absolute;
  bottom: 0.4rem;
  inset-inline-start: 0.4rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.8;
}

.event__countdown--inline { position: static; align-self: flex-start; }

/* «در حال برگزاری»: green, like the "open now" status. */
.event--now .event__countdown, .event__countdown--now { background: #15803d; color: #ffffff; }

.event__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding-block: 0.15rem; }

.event__featured {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  align-self: flex-start;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface));
  color: var(--c-primary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.8;
}

.event__featured .icon { width: 1em; height: 1em; }

.event__title { font-weight: 700; line-height: 1.5; }

.event__when {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  color: var(--c-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.event__when .icon { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.2em; color: var(--c-primary); }

.event__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--c-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.event__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0.6rem 0.6rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.event__action .icon { width: 1.1em; height: 1.1em; }
.event__action:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Featured: the poster on top, larger. */
.event--featured .event__link { flex-direction: column; gap: 0.5rem; }
.event--featured .event__poster { width: 100%; }
.event--featured .event__countdown { bottom: 0.6rem; inset-inline-start: 0.6rem; font-size: 0.8rem; }

.ep-poster { max-width: 480px; margin: 0 auto; }
.ep-poster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--c-primary-soft); }
.ep-line { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.4rem 0 0; }
.ep-line .icon { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.25em; color: var(--c-primary); }
.ep-line:not(.meta) { font-weight: 600; }

@media (min-width: 641px) {
  .ep-poster img { border-radius: 0 0 20px 20px; }
}

/* ---------- Image viewer (business.js): photos with data-zoom open full screen, dark in both modes ---------- */
img[data-zoom] { cursor: zoom-in; }
img[data-zoom]:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / 0.92); color: #fff; overflow: hidden;
}
.viewer::backdrop { background: transparent; }
.viewer__stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in;
}
.viewer__stage.is-zoomed { cursor: grab; }
.viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.viewer__btn {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.16); color: #fff; cursor: pointer;
}
.viewer__btn svg { width: 26px; height: 26px; fill: currentColor; }
.viewer__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__close { top: max(12px, env(safe-area-inset-top)); inset-inline-end: 12px; }
.viewer__nav { top: 50%; transform: translateY(-50%); }
.viewer__prev { inset-inline-start: 12px; }
.viewer__next { inset-inline-end: 12px; }
/* The chevrons point the way the gallery runs: in RTL, the next photo is on the left. */
[dir="rtl"] .viewer__nav svg { transform: scaleX(-1); }

/* ---------- Decoration and motion (.biz: the business page; the booking pages keep the plain look) ----------
 * Every color derives from the owner's theme tokens, so it works with any preset in both modes.
 * Hover effects are for real pointers only (sticky :hover on touch screens looks broken), and all
 * animation sits in the prefers-reduced-motion: no-preference block at the end. */

/* A soft glow of the brand color behind the top of the page. */
body:has(> .biz) {
  background:
    radial-gradient(900px 440px at 50% -140px, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%) no-repeat,
    var(--c-bg);
}

.biz .cover { position: relative; }

/* Photos ease into the page at the bottom. */
.biz .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--c-bg) 50%, transparent));
  pointer-events: none;
}

/* No cover photo: brand-colored bubbles and a dot grid instead of a flat gradient. */
.biz .cover:not(:has(img)) {
  background:
    radial-gradient(circle at 14% 28%, color-mix(in srgb, var(--c-on-primary) 20%, transparent) 0 38px, transparent 39px),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--c-on-primary) 13%, transparent) 0 72px, transparent 73px),
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--c-on-primary) 16%, transparent) 0 16px, transparent 17px),
    radial-gradient(color-mix(in srgb, var(--c-on-primary) 16%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 55%, var(--c-primary-soft)));
}

.biz .logo {
  position: relative;
  box-shadow: 0 0 0 1px var(--c-border), 0 16px 32px -14px color-mix(in srgb, var(--c-primary) 60%, rgb(0 0 0 / 0.5));
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.biz .mode-toggle { transition: transform 0.3s ease, background-color 0.2s; }
.biz .to-top { transition: transform 0.2s ease; }

/* Action buttons: a colored shadow, a light sheen on top, and a shine that sweeps across on hover. */
.biz .action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--c-primary) 85%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.biz .action::before,
.biz .action::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.biz .action::before {
  inset: 0;
  background: linear-gradient(rgb(255 255 255 / 0.16), transparent 55%);
}

.biz .action::after {
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.biz .action .icon { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.biz .action:active { transform: scale(0.96); }

/* Section cards: the heading icon sits in a soft tile. */
.biz .card { transition: border-color 0.25s ease, box-shadow 0.25s ease; }

.card__icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.card__icon .icon { width: 1.15rem; height: 1.15rem; }

.biz .chip { transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; }
.biz .chip .icon { transition: color 0.2s; }
.biz .chip:active { transform: scale(0.96); }

.biz .row-link { transition: padding 0.2s ease, color 0.2s ease; }

/* Menu */

.menu__title-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c-primary) 85%, transparent);
}

.menu__title .menu__title-icon .icon { color: inherit; }

.biz .menu__section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.biz .menu__section h3::before {
  content: "";
  width: 0.3rem;
  height: 1.1em;
  flex: none;
  border-radius: 4px;
  background: var(--c-primary);
}

.biz .menu__bar {
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.biz .menu__tabs a { transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.biz .menu__tabs a.is-active { box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c-primary) 85%, transparent); }

.biz .item { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.biz .item__photo img { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* The strip's cards sit on a faint wash of the brand color. */
.biz .special {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 9%, var(--c-surface)), var(--c-surface) 60%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.biz .menu__filter { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }

.biz .listing { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.biz .listing__photo img { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.biz .listing__deal { box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c-primary) 85%, transparent); }

/* Featured events sit on a wash of the brand color, like the specials strip. */
.biz .event { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.biz .event__poster img { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.biz .event--featured {
  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)), var(--c-surface) 65%);
}
.biz .event__countdown { box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c-primary) 85%, transparent); }
.biz .event__action { transition: background-color 0.2s, color 0.2s; }

.biz .footer a { transition: color 0.2s; }

@media (hover: hover) {
  .biz .logo:hover { transform: rotate(-4deg) scale(1.05); }
  .biz .mode-toggle:hover { transform: rotate(20deg); }
  .biz .to-top:hover { transform: translateY(-3px); }
  .biz a.status:hover { border-color: color-mix(in srgb, var(--c-primary) 50%, var(--c-border)); }

  .biz .action:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 26px -12px color-mix(in srgb, var(--c-primary) 90%, transparent);
  }

  .biz .action:hover::after { left: 130%; }
  .biz .action:hover .icon { transform: scale(1.15); }

  .biz .card:hover {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
    box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c-primary) 75%, transparent);
  }

  .biz .card:hover .card__icon { transform: rotate(-8deg) scale(1.08); }

  .biz .chip:hover {
    background: var(--c-primary);
    color: var(--c-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--c-primary) 85%, transparent);
  }

  .biz .chip:hover .icon { color: var(--c-on-primary); }

  .biz .row-link:hover { padding-inline-start: 0.35rem; color: var(--c-primary); }

  .biz .menu__clear:hover { color: var(--c-text); }
  .biz .menu__toggle:hover { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); }

  .biz .menu__tabs a:not(.is-active):hover { background: color-mix(in srgb, var(--c-primary) 22%, var(--c-primary-soft)); }

  .biz .item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
    box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--c-primary) 75%, transparent);
  }

  .biz .item:hover .item__photo img { transform: scale(1.07); }

  .biz .special:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary);
    box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--c-primary) 80%, transparent);
  }

  .biz .menu__filter[aria-pressed="false"]:hover { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); }

  .biz .listing:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
    box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--c-primary) 75%, transparent);
  }

  .biz .listing:hover .listing__photo img { transform: scale(1.05); }

  .biz .event:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
    box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--c-primary) 75%, transparent);
  }

  .biz .event:hover .event__poster img { transform: scale(1.05); }
  .biz .event__action:hover { background: var(--c-primary); color: var(--c-on-primary); }
  .biz .lp-back:hover strong { color: var(--c-primary); }

  .biz .footer a:hover { color: var(--c-text); }
}

/* Motion: the header plays in on load; cards, menu headings and items fade up as they scroll into view
   (business.js adds .is-visible and a small stagger as --rd). Without JS nothing is hidden. The fill is
   "backwards" only, so hover transforms apply once an entrance ends. */

@keyframes biz-rise {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes biz-pop {
  from { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.06); }
}

@keyframes biz-zoom {
  from { transform: scale(1.12); }
}

@keyframes biz-ping {
  0% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0.55); }
  80%, 100% { box-shadow: 0 0 0 7px rgb(22 163 74 / 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .biz .cover img { animation: biz-zoom 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .biz .logo { animation: biz-pop 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

  .biz .identity > :not(.logo) { animation: biz-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .biz .identity > :nth-child(2) { animation-delay: 0.25s; }
  .biz .identity > :nth-child(3) { animation-delay: 0.32s; }
  .biz .identity > :nth-child(4) { animation-delay: 0.39s; }
  .biz .identity > :nth-child(5) { animation-delay: 0.46s; }

  .biz .action { animation: biz-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .biz .action:nth-child(1) { animation-delay: 0.4s; }
  .biz .action:nth-child(2) { animation-delay: 0.45s; }
  .biz .action:nth-child(3) { animation-delay: 0.5s; }
  .biz .action:nth-child(4) { animation-delay: 0.55s; }
  .biz .action:nth-child(n+5) { animation-delay: 0.6s; }

  .biz .to-top:not([hidden]) { animation: biz-pop 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

  .biz .status.is-open::before { animation: biz-ping 2s ease-out infinite; }
  .biz .event--now .event__countdown { animation: biz-ping 2s ease-out infinite; }

  .biz .menu__toggle { transition: background-color 0.25s, border-color 0.25s; }
  .biz .menu__toggle input { transition: background-color 0.25s; }
  .biz .menu__toggle input::before { transition: inset-inline-start 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.25s; }

  .js .biz [data-reveal]:not(.is-visible) { opacity: 0; }
  .js .biz [data-reveal].is-visible { animation: biz-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s) backwards; }
}

/* ---------- Booking (/{slug}/booking and /r/{token}) ---------- */

.bk { padding-bottom: 2rem; }
.bk-head { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 16px 0; }
.bk-head h1 { margin: 0; font-size: 1.4rem; }
.bk-head p { margin: 0; }
.bk-back {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: 1.2rem; text-decoration: none;
}
.bk-logo { width: 2.75rem; height: 2.75rem; border-radius: 12px; object-fit: contain; background: var(--c-surface); }
.bk-note { white-space: pre-line; }
.bk-small { font-size: 0.85rem; }

.bk-options { display: grid; gap: 0.5rem; }
.bk-option, .bk-chip, .bk-day { position: relative; cursor: pointer; }
.bk-option input, .bk-chip input, .bk-day input { position: absolute; opacity: 0; pointer-events: none; }
.bk-option span {
  display: flex; flex-direction: column; padding: 0.6rem 0.85rem;
  border: 1px solid var(--c-border); border-radius: 12px;
}
.bk-option small, .bk-day small { color: var(--c-muted); font-size: 0.8rem; }
.bk-chip span {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--c-border); font-size: 0.9rem;
}
.bk-option input:checked + span, .bk-chip input:checked + span, .bk-day input:checked + span {
  border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: inset 0 0 0 1px var(--c-primary);
}
.bk-option input:focus-visible + span, .bk-chip input:focus-visible + span, .bk-day input:focus-visible + span {
  outline: 3px solid var(--c-primary); outline-offset: 2px;
}

.bk-days { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day span {
  display: flex; flex-direction: column; align-items: center; min-width: 4.5rem;
  padding: 0.45rem 0.5rem; border: 1px solid var(--c-border); border-radius: 12px; line-height: 1.5;
}
.bk-day.is-closed { cursor: not-allowed; opacity: 0.45; }

.bk-slots { margin-top: 0.85rem; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.5rem; }
.bk-time {
  padding: 0.5rem 0; border-radius: 10px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer;
}
.bk-time.is-selected { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.bk-time:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.bk-summary { font-weight: 600; }
.bk-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.bk-field input, .bk-field textarea {
  font: inherit; padding: 0.6rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text);
}
.bk-field input:focus, .bk-field textarea:focus { outline: 2px solid var(--c-primary); border-color: transparent; }
.bk-error { color: #dc2626; font-size: 0.9rem; }
.bk-trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bk-button {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%;
  padding: 0.75rem; border: 0; border-radius: 12px; background: var(--c-primary); color: var(--c-on-primary);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.bk-button:disabled { opacity: 0.6; cursor: wait; }
.bk-button--danger { background: #dc2626; color: #fff; }
.bk-link { display: block; margin: 1rem 16px 0; text-align: center; color: var(--c-muted); }

.bk-done { text-align: center; }
.bk-done-icon { width: 3rem; height: 3rem; color: #16a34a; }
.bk-done h2 { justify-content: center; }
.bk-status { font-weight: 700; }
.bk-status--confirmed, .bk-status--completed { color: #16a34a; }
.bk-status--pending { color: #d97706; }
.bk-status--canceled, .bk-status--noshow { color: #dc2626; }
.bk-details td:first-child { color: var(--c-muted); width: 6rem; }