/* ============================================================
   Hearth — marketplace UI
   Warm, photo-first, Facebook-Marketplace-style layout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --bg: #faf8f4;
  --card: #fff;
  --ink: #2b2521;
  --muted: #8a8177;
  --line: #eae4da;
  --brand: #9a3f22;
  --brand-dark: #7c2f15;
  --brand-soft: #f7ede2;
  --brand-fade: #fdf6ee;
  --good: #3d7549;
  --good-soft: #ebf3ea;
  --bad: #8f3030;
  --bad-soft: #f8e9e6;
  --radius: 12px;
  --shadow: 0 1px 2px #2b25210f, 0 4px 14px #2b25210a;
  --topbar: 64px;
  --sat: env(safe-area-inset-top, 0px);   /* iPhone notch / Dynamic Island inset */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior: none; }
.topbar, .tabbar, .btn, .chip, .tab, .brand-logo, .save-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 'Montserrat', system-ui, sans-serif; }
/* Page = column of topbar / main / footer; main stretches so the footer always
   reaches the bottom, even on short pages */
#root { min-height: 100dvh; display: flex; flex-direction: column; }
#root > main { flex: 1 0 auto; width: 100%; }
img { display: block; }
/* Headings wear the brand serif — the same face as the "tabehut." wordmark.
   Body and UI text stay on the clean sans. */
h1, h2 { font-family: 'Fraunces', serif; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ic { flex: none; }

/* ---------------- Buttons & badges ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 600 14px 'Montserrat'; cursor: pointer; text-decoration: none; transition: background .15s; }
.btn:hover { background: #f4efe8; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: inset 0 1px 0 #ffffff2e, 0 1px 2px #7c2f1538; }
.btn-primary:hover { background: var(--brand-dark); box-shadow: inset 0 1px 0 #ffffff2e, 0 4px 12px #7c2f152e; }
.btn.grow { flex: 1; }
.btn.wide { width: 100%; margin-top: 18px; }
.btn.round { width: 42px; padding: 0; border-radius: 50%; }
.btn.danger { color: var(--bad); border-color: #e5c9c2; }
.btn.on { color: var(--brand-dark); border-color: #e2c6b6; background: var(--brand-fade); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 11px 'Montserrat'; font-style: normal; }

/* ---------------- Top bar ---------------- */
.topbar { position: sticky; top: 0; z-index: 20; height: calc(var(--topbar) + var(--sat)); display: flex; align-items: center; gap: 20px; padding: var(--sat) clamp(14px, 3vw, 36px) 0; background: #faf9f0e8; -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border-bottom: 1px solid var(--line); }
.menu-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -6px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.menu-btn:hover { background: #f2ede4; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 38px; width: auto; display: block; }
/* min-width: 0 — a text input has an intrinsic width (~170px) that would otherwise
   stop the search shrinking and push the logo off the right edge on phones */
.search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 21px; background: #fff; color: var(--muted); transition: border-color .15s ease, box-shadow .15s ease; }
.search:focus-within { border-color: #d8c5ad; box-shadow: 0 0 0 3px #9a3f2214; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 14px 'Montserrat'; color: var(--ink); }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.navlink { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 9px; color: #55504a; font-weight: 600; text-decoration: none; white-space: nowrap; }
.navlink:hover { background: #f4efe8; }
.navlink.on { color: var(--brand-dark); background: var(--brand-soft); }
.topnav .btn-primary { margin-left: 8px; }
/* position:relative + overflow:hidden + an absolutely-filled img keep the
   photo locked to the circle — %-height images inside a grid span can escape
   it on iOS Safari and render as a tall oval. */
.avatar { position: relative; overflow: hidden; width: 36px; height: 36px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #eac9a2; color: #74331d; font-weight: 700; font-size: 13px; flex: none; align-self: center; text-decoration: none; }
.avatar.big { width: 42px; height: 42px; }
.avatar.xl { width: 68px; height: 68px; font-size: 22px; }
.avatar.on { box-shadow: 0 0 0 2px var(--brand); }
.topnav .avatar { margin-left: 10px; }

/* ---------------- Bottom tab bar (mobile) ---------------- */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fffdfa; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 9px; color: #787168; text-decoration: none; font: 600 10.5px 'Montserrat'; }
.tab.on { color: var(--brand); }
.tab .badge { position: absolute; top: 4px; left: calc(50% + 6px); }

/* ---------------- Browse ---------------- */
.market { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; max-width: 1560px; margin: 0 auto; padding: 26px clamp(14px, 3vw, 36px) 60px; }
.market.no-controls { grid-template-columns: 1fr; }   /* guests: no sidebar, feed spans the width */
.sidebar { position: sticky; top: calc(var(--topbar) + var(--sat) + 26px); height: max-content; }
.sidebar h2 { font-size: 22px; margin: 2px 0 14px; }
.loc { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font: 600 14px 'Montserrat'; cursor: pointer; text-align: left; }
.loc span { flex: 1; }
.radius { display: block; margin-top: 14px; font: 600 13px 'Montserrat'; color: #4c463f; }
.radius input, .fp-radius input { display: block; width: 100%; margin-top: 8px; accent-color: var(--brand); }
/* No location yet → the slider means nothing, so it reads (and is) inert */
.radius-wrap.off { opacity: .45; }
.radius-range:disabled { cursor: not-allowed; }
.radius-preset:disabled { opacity: .55; cursor: not-allowed; }
.side-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.side-sec > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.side-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: 500 14px 'Montserrat'; color: #4c463f; cursor: pointer; text-align: left; }
.side-cat i { font-style: normal; width: 22px; text-align: center; font-size: 16px; }
.side-cat:hover { background: #f2ede4; }
.side-cat.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.side-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 22px 4px 0; }

.results { min-width: 0; }
.titleline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; }
.titleline h1 { margin: 0; font-size: 26px; letter-spacing: -.4px; }
#result-meta { color: var(--muted); font-size: 13px; }
/* Browse controls (logged in): location · distance · Filters · Sort as soft
   pills on ONE line. Never wraps — on very narrow phones the row scrolls
   sideways instead (bleeding into the page padding so that looks natural). */
.filterbar { display: none; flex-wrap: nowrap; gap: 6px; margin: 0 -14px 14px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filterbar::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); font: 600 13px 'Montserrat'; color: #4c463f; cursor: pointer; white-space: nowrap; }
.chip b { font-weight: 700; margin: 0 -2px; }
.chip i { font-style: normal; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.filterbar .chip { height: 37px; padding: 0 12px; background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); font-weight: 700; font-size: 13.5px; }
.filterbar .chip.on { background: var(--brand); color: #fff; }
.filterbar .chip .ic:last-child:not(:first-child) { margin: 0 -4px 0 -2px; opacity: .85; }   /* the ▾ caret hugs the label */
/* Guests: their one Browse control — set a search location — shows on all widths */
.filterbar.guest { display: flex; align-items: center; }
.guest-loc-note { font: 500 12.5px 'Montserrat'; color: var(--muted); white-space: nowrap; }
@media (min-width: 1021px) { .no-controls .filterbar.guest { margin: 0 0 14px; padding: 0; } }
.fp-row { display: flex; flex-wrap: wrap; gap: 7px; }
.fp-radius { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 600 13px 'Montserrat'; color: #4c463f; white-space: nowrap; }
.fp-radius input { flex: 1; margin-top: 0; }

/* ---------------- Cards ---------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px 16px; }
/* "See all N listings" under the capped profile grid */
.see-all { display: block; margin: 16px auto 0; }
.card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.photo { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #ece7df; }
/* Hairline ring so light photos keep a defined edge against the warm page */
.photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #2b25211a; pointer-events: none; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.card .photo { transition: box-shadow .22s ease, transform .12s ease; }
.card:hover .photo { box-shadow: 0 10px 28px #2b252122; }
.card:hover .photo img { transform: scale(1.04); }
.photo em, .heroimg em { position: absolute; left: 10px; bottom: 10px; background: #2b2521e0; color: #fff; font: 600 12px 'Montserrat'; font-style: normal; padding: 5px 9px; border-radius: 7px; }
.photo em { bottom: auto; top: 10px; }   /* price tag owns the bottom-left corner */
.price-tag { position: absolute; left: 10px; bottom: 10px; background: #2b2521e0; color: #fff; font: 700 13px 'Montserrat'; padding: 5px 9px; border-radius: 7px; }
.video-tag { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; background: #2b2521e0; color: #fff; font: 700 11px 'Montserrat'; padding: 4px 8px; border-radius: 7px; z-index: 1; }
.video-tag .ic { fill: currentColor; }
/* Card previews just show a play mark — the word "Video" was noise */
.video-tag.play-only { width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.video-tag.play-only .ic { margin-left: 1px; }
/* Founding Neighbors — the first 100 accounts wear the flame */
/* The owner's per-post analytics, on the listing page only */
.detail-stats { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--brand-fade); border: 1px solid var(--line); color: #4c463f; }
.detail-stats b { font: 700 14px 'Montserrat'; font-variant-numeric: tabular-nums; }
.detail-stats small { font-size: 11.5px; color: var(--muted); }
/* Per-post analytics on your own cards (profile page) */

/* ⋯ under the heart: hide / report / block without opening the listing.
   (.save-btn.dots-btn so this outranks .save-btn's own top: 9px, which is
   declared later in the file — equal specificity had both at the same spot) */
.save-btn.dots-btn { top: 49px; color: #6b5c50; font-weight: 700; }
.card-menu .menu-list { margin-top: 4px; }
/* Multi-dish tick list in the order-ask modal — each ticked dish reveals its
   own pickup-time field, so different dishes can ask for different times */
.dish-list { display: flex; flex-direction: column; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fffdfa; max-height: 300px; overflow-y: auto; }
.dish-row + .dish-row { border-top: 1px solid var(--line); }
.dish-pick { display: flex; align-items: center; gap: 10px; padding: 12px 2px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.dish-pick .grow { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dish-pick b { color: var(--brand-dark); font-size: 13px; }
.dish-pick input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; margin: 0; }
/* The pickup-time line unfolds under a ticked dish: a small label, then the
   field — left-aligned and roomy, instead of a bare centered box (which iOS
   rendered as a cramped misfit). */
.dish-when-wrap { display: none; }
.dish-row.on .dish-when-wrap { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 28px; }
.when-label { flex: none; font: 600 11px 'Montserrat'; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.video-ph { position: absolute; inset: 0; display: grid; place-items: center; background: #2b2521; color: #fff; }
.video-ph .ic { fill: currentColor; }
.hero-video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.save-btn { position: absolute; right: 9px; top: 9px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fffdfae6; color: #6b3a28; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px #0002; transition: transform .12s; }
.save-btn:hover { transform: scale(1.08); }
.save-btn.on { color: var(--brand); }
.sold .photo img { filter: grayscale(.5); opacity: .75; }
.cardtext { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px 0; }
.cardtext span { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardtext small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 52px; background: linear-gradient(135deg, #f6e8d8, #eadbc8); }
.photo-ph.small { width: 46px; height: 46px; border-radius: 9px; font-size: 22px; }

/* ---------------- Empty states ---------------- */
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 20px; }
/* "Nothing within your radius" — say the real reason, offer the way out */
.empty-why b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.empty-why p { margin: 0 auto; max-width: 380px; line-height: 1.5; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 16px; }
.empty.big { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 70px 20px; }
.empty.big b { font-size: 17px; color: var(--ink); }
.empty.big p { margin: 0; max-width: 340px; }
.empty.big .ic { color: #cfc6b9; }
.empty.big .btn { margin-top: 8px; }

/* ---------------- Listing detail ---------------- */
.detail { max-width: 1200px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 36px) 70px; }
.back { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--brand-dark); font: 600 14px 'Montserrat'; cursor: pointer; padding: 4px 0 18px; }
.detailgrid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 40px; align-items: start; }
.gallery { position: sticky; top: calc(var(--topbar) + var(--sat) + 20px); }
.heroimg { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #ece7df; }
.heroimg img { width: 100%; height: 100%; object-fit: cover; }
.heroimg em { font-size: 14px; padding: 7px 12px; }
.heroimg .photo-ph { font-size: 90px; }
/* Swipeable filmstrip: one slide per photo, snapping as you drag across */
.hero-track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; }
.hero-count { position: absolute; right: 10px; top: 10px; background: #2b2521e0; color: #fff; font: 600 12px 'Montserrat'; padding: 4px 10px; border-radius: 20px; font-variant-numeric: tabular-nums; pointer-events: none; }
/* Listing gallery thumbnails — tap to slide the filmstrip to that photo/video */
.gthumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.gthumbs::-webkit-scrollbar { display: none; }
.gthumb { position: relative; flex: none; width: 62px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #ece7df; cursor: pointer; }
.gthumb.on { border-color: var(--brand); }
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb .tile-ph { position: absolute; inset: 0; display: grid; place-items: center; background: #2b2521; color: #fff; }
.gthumb .gplay { position: absolute; inset: 0; display: grid; place-items: center; background: #2b252155; color: #fff; }
.gthumb .gplay .ic, .gthumb .tile-ph .ic { fill: currentColor; }
.panel h1 { margin: 0; font-size: 30px; letter-spacing: -.5px; }
.price { font: 700 24px 'Fraunces'; margin: 10px 0 4px; }
.price span { font: 400 13px 'Montserrat'; color: var(--muted); }
.listmeta { color: var(--muted); font-size: 13px; }
.stock { margin-top: 14px; padding: 9px 12px; border-radius: 9px; background: var(--good-soft); color: var(--good); font-weight: 600; font-size: 13px; width: max-content; max-width: 100%; }
.stock.out { background: var(--bad-soft); color: var(--bad); }
.actions { display: flex; gap: 9px; margin-top: 16px; }

.msgbox { margin-top: 18px; padding: 15px; border-radius: 14px; background: var(--brand-fade); border: 1px solid #f0e2d1; }
.msgbox > b { font-size: 14px; }
.msgbox p { margin: 8px 0 12px; color: #5c5248; font-size: 13px; line-height: 1.5; }
.owner-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.owner-actions .btn-primary { flex: 1; }

/* Themed confirm dialog (replaces the browser's native popup) */
.confirm-text { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.55; color: #5c5248; }
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.confirm-actions .btn { flex: 1; }
.confirm-actions .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; }
/* "You bought this dish" — shown to the buyer once the cook marks it sold */
.bought { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--good-soft); color: var(--good); font-weight: 600; font-size: 13px; }
.bought > span:first-of-type { flex: 1; }
.bought .btn { background: #fff; }
/* Quick replies — shown in an empty chat before the first message */
.quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
.quick button { border: 1px solid #e7d7c4; background: #fff; border-radius: 15px; padding: 7px 11px; font: 500 12.5px 'Montserrat'; color: #5c5248; cursor: pointer; }
.quick button:hover { border-color: var(--brand); color: var(--brand-dark); }
.msgbox > small { display: block; margin-top: 9px; color: var(--muted); font-size: 11.5px; }

.specs { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.specs.about { margin-top: 16px; padding-top: 0; border-top: 0; }   /* About sits directly under Details */
.specs h2 { margin: 0 0 11px; font-size: 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facts .wide { grid-column: 1 / -1; }
.facts .wide span { font-weight: 500; line-height: 1.5; }
.facts div { background: #f6f2ea; border-radius: 10px; padding: 11px 12px; }
.facts b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.facts span { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; }
.desc { margin: 0; line-height: 1.6; color: #4c463f; }

/* Approximate pickup-area map: OSM tiles laid on a grid, a soft blob over the
   neighbourhood, and no interactivity — it's a picture, not a map widget. */
.areamap-wrap { margin-top: 18px; }
.areamap { position: relative; width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #e9e4da; isolation: isolate; }
.areamap img { position: absolute; display: block; max-width: none; -webkit-user-select: none; user-select: none; pointer-events: none; }
/* Warm the map slightly so it belongs to the page rather than sitting on it */
.areamap::after { content: ''; position: absolute; inset: 0; background: #9a3f2210; pointer-events: none; }
.areamap-blob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; background: #3d754933; border: 2px solid #3d754977; pointer-events: none; }
.areamap-credit { position: absolute; right: 5px; bottom: 4px; z-index: 1; padding: 1px 5px; border-radius: 4px; background: #fffdfacc; color: #5c5248; font: 500 9.5px 'Montserrat'; }
.areamap-note { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.seller { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fffdfa; }
a.seller { text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; }
a.seller:hover { border-color: var(--brand); background: #fff; }
a.seller > .ic:last-child { margin-left: auto; flex: none; color: var(--muted); }
.seller span .ic { vertical-align: -2px; margin-right: 1px; }
/* 5-🔥 rating scale: unlit flames are greyed out */
.fires { display: inline-flex; align-items: center; gap: 1px; }
.fires i { font-style: normal; font-size: 13px; filter: grayscale(1); opacity: .3; }
.fires i.lit { filter: none; opacity: 1; }
.fires b { margin-left: 5px; font-weight: 700; color: var(--ink); }
.fires small { margin-left: 3px; color: var(--muted); }
.fires i.lit + b, .fires i:only-of-type { margin-right: 4px; }
.seller div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seller b { font-size: 15px; }
.seller span { font-size: 12.5px; color: var(--muted); }

/* Reviews — under the cook's card on a listing, on their profile, and on the
   full #/reviews page. One review = name · flames · when / note / dish */
.reviews { margin-top: 18px; }
.reviews h2 { margin: 0 0 4px; font-size: 17px; }
.review { padding: 12px 0; }
.review + .review { border-top: 1px solid var(--line); }
.review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-head b { font-size: 14px; }
.review-head > small { margin-left: auto; color: var(--muted); font-size: 12px; }
.review p { margin: 6px 0 0; line-height: 1.55; color: #4c463f; font-size: 13.5px; }
.review-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rbadge { font: 600 11.5px 'Montserrat'; background: var(--brand-soft); color: var(--brand-dark); padding: 4px 9px; border-radius: 12px; white-space: nowrap; }
/* A reviewer's photos/video of the dish — small tiles, tap for full screen */
.review-shots { display: flex; gap: 6px; margin-top: 8px; }
.rshot { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #ece7df; cursor: pointer; }
.rshot img, .rshot video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rshot .gplay { position: absolute; inset: 0; display: grid; place-items: center; background: #2b252155; color: #fff; pointer-events: none; }
.rshot .gplay .ic { fill: currentColor; }
/* Media picker inside the review modal — same tiles as the sell form */
.review-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
/* Full-screen viewer */
.overlay.lightbox { display: grid; place-items: center; background: #171310f2; padding: 16px; }
.overlay.lightbox img, .overlay.lightbox video { max-width: 100%; max-height: 88vh; border-radius: 12px; }
.modal-x.light { position: absolute; top: calc(14px + var(--sat, 0px)); right: 14px; color: #fff; background: #ffffff22; border-radius: 50%; width: 36px; height: 36px; z-index: 1; }
.review-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.review-foot small { color: var(--muted); font-size: 12px; }
.review-foot .link-btn { margin-left: auto; padding: 0; font-size: 11.5px; }
.reviews-list { max-width: 640px; }
.reviews-page .page-head { flex-wrap: wrap; }
.empty-emoji { font-size: 40px; line-height: 1; }
.notes-empty { margin: 0; max-width: 480px; }
.profile h2 small { font-family: 'Montserrat'; font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }

.trust { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 14px; border-radius: 12px; background: var(--good-soft); color: var(--good); font-weight: 600; font-size: 12.5px; }
.trust span { display: flex; align-items: center; gap: 7px; }
.trust small { color: #6f6a5f; font-weight: 400; line-height: 1.45; margin-top: 2px; }

.related { margin-top: 46px; }
.related h2 { font-size: 21px; margin: 0 0 16px; }
.detail-cta { display: none; }

/* ---------------- Inbox / chat ---------------- */
.inbox { display: grid; grid-template-columns: 350px minmax(0, 1fr); max-width: 1200px; margin: 0 auto; height: calc(100dvh - var(--topbar) - var(--sat)); border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #fffdfa; }
.threads { border-right: 1px solid var(--line); padding: 18px 12px; overflow-y: auto; }
.threads h1 { font-size: 24px; margin: 4px 8px 14px; }
/* Chats / In progress / Finished */
.inbox-tabs { display: flex; gap: 8px; margin: 0 4px 12px; overflow-x: auto; scrollbar-width: none; }
.inbox-tabs::-webkit-scrollbar { display: none; }
.inbox-tabs .chip { flex: none; }
.tab-empty { margin: 8px; }
/* Swipe-to-delete: the row slides left over a fixed Delete button */
.thread-wrap { position: relative; overflow: hidden; border-radius: 11px; }
.thread-del { position: absolute; top: 0; right: 0; bottom: 0; width: 76px; border: 0; border-radius: 0 11px 11px 0; background: var(--bad); color: #fff; font: 600 11px 'Montserrat'; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.thread-del .ic { stroke: currentColor; }
.thread { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 10px; border-radius: 11px; text-decoration: none; color: inherit; background: var(--bg); transition: transform .18s ease; }
.thread:hover { background: #f4efe7; }
.thread.on { background: var(--brand-soft); }
.tmid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tmid small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .tmid small { color: var(--ink); font-weight: 700; }
/* Live order progress right on the row: label + slim fill bar */
.tprog { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tprog small, .thread.unread .tmid .tprog small { font: 700 10.5px 'Montserrat'; color: var(--brand-dark); white-space: nowrap; overflow: visible; }
.tprog-track { flex: 1; max-width: 110px; height: 4px; border-radius: 2px; background: #eadfce; overflow: hidden; }
.tprog-fill { display: block; height: 100%; border-radius: 2px; background: var(--brand); transition: width .3s ease; }
.tprog.ready small { color: var(--good); }
.tprog.ready .tprog-fill { background: var(--good); }
.thread i { font-style: normal; font-size: 11px; color: var(--muted); align-self: flex-start; margin-top: 4px; }
/* Unread count on the row — replaces the old plain dot */
.thread .badge { align-self: center; margin-top: 0; font-size: 11px; color: #fff; flex: none; }

.chatpane { display: flex; flex-direction: column; min-width: 0; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-top { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.chat-back { display: none; color: var(--ink); }
.who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-context { display: flex; align-items: center; gap: 11px; margin: 12px 16px 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; }
.chat-context img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; }
.chat-context div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.chat-context b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-context span { font-size: 12px; color: var(--muted); }
.chat-context i { font-style: normal; font-weight: 700; color: var(--brand-dark); font-size: 12.5px; }
/* Sold / review strip under the listing card in a chat */
.sale-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-fade); border: 1px solid #f0e2d1; font-size: 13px; color: #5c5248; }
/* The message keeps a real minimum width — when buttons would squeeze it into
   a one-word-per-line column, they wrap below the text instead. */
.sale-bar > span:first-of-type { flex: 1 1 auto; min-width: min(60%, 100%); line-height: 1.4; }
.sale-bar .btn.small, .sale-bar .link-btn { flex: none; }
.sale-bar .link-btn { padding: 4px 2px; color: var(--brand-dark); }
.sale-bar.done { background: var(--good-soft); border-color: #d9e8d6; color: var(--good); font-weight: 600; }
.sale-bar.done > .ic { flex: none; }
.sale-bar .fires { vertical-align: -1px; }
.sale-bar .fires i { font-size: 12px; }
.sale-bar b { font-weight: 700; }
/* "Mark as sold" dish picker */
/* Tappable chat header (avatar + name → the cook's public page) */
.chat-who { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }

/* Order tracking: requested → being made → ready for pickup */
.sale-bar.order { flex-wrap: wrap; }
/* Several live orders with one person fold into a details dropdown */
.order-group { margin: 10px 16px 0; border: 1px solid #f0e2d1; border-radius: 12px; background: var(--brand-fade); overflow: hidden; }
.order-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 11px 12px; font: 600 13px 'Montserrat'; color: var(--brand-dark); -webkit-user-select: none; user-select: none; }
.order-group summary::-webkit-details-marker { display: none; }
.order-group summary::before { content: '▸'; font-size: 11px; transition: transform .15s ease; }
.order-group[open] summary::before { transform: rotate(90deg); }
.order-group .sale-bar { margin: 0; border: 0; border-top: 1px solid #f0e2d1; border-radius: 0; }
.order-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.order-steps { display: flex; width: 100%; margin-top: 9px; }
.ostep { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 10.5px 'Montserrat'; color: var(--muted); text-align: center; }
.ostep i { width: 10px; height: 10px; border-radius: 50%; background: #ddd3c3; }
.ostep.on { color: var(--brand-dark); }
.ostep.on i { background: var(--brand); }
.ostep:not(:first-child)::before { content: ''; position: absolute; top: 4px; right: calc(50% + 9px); left: calc(-50% + 9px); height: 2px; background: #ddd3c3; }
.ostep.on:not(:first-child)::before { background: var(--brand); }
.chat-history { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.chat-empty { margin: auto 0 0; padding: 14px; border-radius: 14px; background: var(--brand-fade); border: 1px solid #f0e2d1; }
.chat-empty p { margin: 0 0 4px; font-size: 13px; color: #5c5248; line-height: 1.5; }
.chat-empty .quick { margin-bottom: 0; }
.bubble { max-width: 75%; width: max-content; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.bubble.them { background: #f0eae0; border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.chat-compose { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-compose input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--line); border-radius: 21px; background: #f4f0e9; padding: 0 15px; font: 14px 'Montserrat'; outline: 0; }

/* ---------------- Generic page (Saved) ---------------- */
.page { max-width: 1200px; margin: 0 auto; padding: 28px clamp(14px, 3vw, 36px) 60px; }
.page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 26px; }
.page-head span { color: var(--muted); font-size: 13px; }

/* ---------------- Sell ---------------- */
.sell { max-width: 640px; margin: 0 auto; padding: 34px clamp(14px, 3vw, 36px) 70px; }
.eyebrow { margin: 0; font: 700 11.5px 'Montserrat'; letter-spacing: 1.2px; color: var(--brand); text-transform: uppercase; }
.sell h1 { margin: 6px 0 8px; font-size: 30px; }
.sub { margin: 0; color: var(--muted); line-height: 1.5; }
/* Stashed half-written listings — resume or delete from right above the form */
.drafts { margin-top: 20px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; }
.drafts > .field-label { display: block; margin: 0 0 4px; font-weight: 600; color: #453f38; }
.drafts .opt { font-weight: 400; color: var(--muted); font-size: 12px; }
.draft-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.draft-row + .draft-row { border-top: 1px solid var(--line); }
.draft-row.editing { opacity: .6; }
.draft-row img, .draft-row .photo-ph.small { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; display: grid; place-items: center; background: #ece7df; }
.draft-row .grow { flex: 1; min-width: 0; }
.draft-row b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-row small { color: var(--muted); font-size: 12px; }
.draft-row .link-btn { flex: none; padding: 6px; color: var(--muted); }
.sell-form .draft-btn { margin-top: 10px; }
.sell-form { margin-top: 22px; }
.sell-form label { display: block; font-weight: 600; margin-top: 15px; color: #453f38; }
.sell-form .field-label { margin-top: 15px; font-weight: 600; color: #453f38; font-size: inherit; }
.sell-form .opt { font-weight: 400; color: var(--muted); }
.sell-form input:not([type=checkbox]), .sell-form select, .sell-form textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid #ddd5c9; border-radius: 10px; background: #fff; padding: 11px 12px; font: 14px 'Montserrat'; }
.sell-form textarea { height: 90px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.checkline { display: flex; gap: 10px; align-items: start; font-weight: 400 !important; font-size: 12.5px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.checkline input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
/* Links sit outside the label so a tap on the sentence always toggles the box
   and a tap on a link always opens the page — never a coin flip on a phone */
.checkline-links { margin: 6px 0 0 30px; font-size: 12px; color: var(--muted); }
.checkline-links a { color: var(--brand-dark); font-weight: 600; }
/* "Pickup area" on the Sell form — says where the listing will land before
   you post it, since that comes from your profile rather than this form */
.pickup-area { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding: 12px 13px; border: 1px solid #f0e2d1; border-radius: 12px; background: var(--brand-fade); }
.pickup-area > .ic { flex: none; color: var(--brand); }
.pickup-area .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pickup-area b { font-size: 13.5px; }
.pickup-area small { color: #5c5248; font-size: 11.5px; line-height: 1.45; }
.pickup-area .btn { flex: none; }
.pickup-area.unset { background: var(--bad-soft); border-color: #eccfc8; }
.pickup-area.unset > .ic { color: var(--bad); }

/* Edit listing: Available / Sold out switch, and Remove under Save */
.avail-label { margin-top: 15px; font-weight: 600; color: #453f38; }
.seg.avail, .seg.deliv { margin: 6px 0 0; }
.avail-hint { margin-left: 0; }
.sell-form .btn.danger.wide { margin-top: 10px; }
.sell .back { padding-bottom: 8px; }
/* Pencil on your own cards (where the heart would be) */
.edit-btn { color: var(--brand-dark); }
.tipcard { border: 1px solid var(--line); border-radius: 14px; background: #fffdfa; padding: 16px; margin-bottom: 16px; }
.tipcard > b { font-size: 14px; }
.tipcard ul { margin: 10px 0 0; padding-left: 18px; color: #55504a; line-height: 1.7; font-size: 13px; }
.mini { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.mini a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.mini span { color: var(--muted); }
.mini button { border: 0; background: none; color: var(--bad); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.mini-link { display: block; margin-top: 12px; font: 600 12.5px 'Montserrat'; color: var(--brand-dark); text-decoration: none; }

/* Photo upload */
.upload { position: relative; margin-top: 6px; min-height: 130px; border: 1.5px dashed #d5cabb; border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); cursor: pointer; overflow: hidden; text-align: center; padding: 14px; }
.upload:hover { border-color: var(--brand); color: var(--brand-dark); }
.upload b { font-size: 13.5px; color: #4c463f; }
.upload .up-hint { font-size: 11.5px; font-weight: 400; }
.upload.has-photo { min-height: 190px; border-style: solid; padding: 0; }
.upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.change-tag { position: absolute; right: 9px; bottom: 9px; background: #2b2521cc; color: #fff; font: 600 11px 'Montserrat'; padding: 5px 9px; border-radius: 7px; z-index: 1; }

/* Sell/Edit media grid: photo tiles (first = cover) + optional video + add tile */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.mtile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #ece7df; border: 1px solid var(--line); }
.mtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile .mx { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #2b2521cc; color: #fff; font-size: 11px; line-height: 1; cursor: pointer; z-index: 1; }
.mtile .cover-tag { position: absolute; left: 4px; bottom: 4px; background: #2b2521cc; color: #fff; font: 600 10px 'Montserrat'; padding: 2px 6px; border-radius: 6px; }
.mtile .video-tag { right: auto; left: 4px; bottom: 4px; padding: 3px 6px; font-size: 10px; }
.mtile .tile-ph { position: absolute; inset: 0; display: grid; place-items: center; background: #2b2521; color: #fff; }
.mtile .tile-ph .ic { fill: currentColor; }
.mtile.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed #d5cabb; background: #fff; color: var(--muted); font: 600 11.5px 'Montserrat'; cursor: pointer; text-align: center; padding: 4px; }
.mtile.add:hover { border-color: var(--brand); color: var(--brand-dark); }
.mtile.add small { font: 500 10px 'Montserrat'; color: var(--muted); }

/* Sell/Edit: category picker button + allergen chips */
.cat-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 600 14px 'Montserrat'; color: var(--ink); cursor: pointer; text-align: left; }
.cat-btn .ic { margin-left: auto; color: var(--muted); }
.allergen-pick { margin-top: 6px; }
.cat-modal { display: flex; flex-direction: column; }
.cat-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding: 0 12px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--muted); }
.cat-search input { flex: 1; border: 0; outline: 0; background: none; font: 500 14px 'Montserrat'; color: var(--ink); }
.cat-list { max-height: 46vh; overflow-y: auto; }
.cat-list .menu-ic { font-size: 17px; }
.row-hint { font-weight: 500; font-size: 12px; color: var(--muted); }

/* ---------------- Profile ---------------- */
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-info { flex: 1; min-width: 220px; }
.profile-info h1 { margin: 0; font-size: 26px; }
.profile-info p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.profile-info .bio { color: #4c463f; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.field-label { display: block; font: 600 13px 'Montserrat'; color: #4c463f; }
.profile-form { max-width: 480px; margin-top: 18px; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffdfa; }
.profile-form .btn { margin-top: 16px; }
/* Kitchen location: ZIP box + "Use my location" side by side, status line under */
.loc-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.loc-row input { flex: 1; min-width: 0; margin-top: 0 !important; }
.loc-row .btn { flex: none; margin-top: 0 !important; height: auto; white-space: nowrap; }
.loc-status { display: flex; align-items: flex-start; gap: 5px; margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.loc-status .ic { flex: none; margin-top: 2px; color: var(--brand); }
.loc-nudge { margin: 18px 0 0; max-width: 480px; }
.loc-nudge > b { display: inline-flex; align-items: center; gap: 6px; }
.loc-nudge .btn { margin-top: 2px; }
.loc-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--brand-fade); border: 1px solid #f0e2d1; color: #5c5248; }
.loc-note .ic { color: var(--brand); }
.loc-note .link-btn { color: var(--brand-dark); padding: 0; font-size: 12px; }
.cardtext small b { font-weight: 700; color: var(--brand-dark); }
.pstats { display: flex; gap: 12px; margin: 20px 0 6px; }
.pstats > div, .pstats > a { flex: 1; max-width: 160px; background: #fffdfa; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; color: inherit; text-decoration: none; }
.pstats > a:hover { background: #f4efe7; }
.pstats b { display: block; font: 700 20px 'Fraunces'; }
.pstats span { font-size: 11.5px; color: var(--muted); }
.profile h2 { font-size: 20px; margin: 26px 0 14px; }

/* ---------------- Location modal ---------------- */
/* The modal centres with `margin: auto` rather than `place-items: center` on
   the overlay: when it's taller than the screen it then scrolls, instead of
   having its top and bottom clipped with the buttons out of reach. */
.overlay { position: fixed; inset: 0; z-index: 50; background: #2b2521a8; display: grid; overflow-y: auto; overscroll-behavior: contain; padding: calc(18px + var(--sat)) 18px calc(18px + env(safe-area-inset-bottom)); }
body.locked { overflow: hidden; }   /* any overlay open → page behind doesn't scroll */

/* Slide-in menu drawer */
.drawer-overlay { padding: 0; place-items: stretch start; }
.drawer { width: min(340px, 86vw); height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #faf9f0; padding: calc(var(--sat) + 16px) 16px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 0 40px #0004; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-head .modal-x { position: static; }
/* Account menu contents */
.menu-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fffdfa; box-shadow: var(--shadow); color: inherit; font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.menu-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-card b { font-size: 15px; }
.menu-card > div > span { font-size: 12.5px; color: var(--muted); }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 600 14.5px 'Montserrat'; text-decoration: none; text-align: left; cursor: pointer; }
.menu-row:hover { background: #f2ede4; }
.menu-row span { flex: 1; }
.menu-row > .ic { color: var(--muted); }
.menu-row.on { color: var(--brand-dark); }
.menu-row.on > .ic { color: var(--brand); }
.menu-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ece6dc; color: var(--ink); flex: none; }
.menu-ic .ic { color: var(--ink); }
.menu-fine { margin: 16px 6px 0; font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.menu-fine a { color: var(--muted); text-decoration: none; }
.menu-fine a:hover { text-decoration: underline; }
/* Desktop: a dropdown card under ☰ instead of a full-height drawer */
@media (min-width: 761px) {
  .drawer-overlay { background: transparent; }
  .drawer { position: absolute; top: calc(var(--topbar) + var(--sat) + 6px); left: 10px; width: 360px; height: auto; max-height: calc(100dvh - var(--topbar) - 30px); border-radius: 16px; padding: 14px 14px 16px; box-shadow: 0 12px 40px #0003, 0 0 0 1px var(--line); }
  .drawer .drawer-head { display: none; }
  .overlay.enter .drawer { animation: pop-in .18s cubic-bezier(.2, .8, .2, 1) both; }
  .overlay.closing .drawer { animation: fade-out .15s ease-in both; }
  /* Sheets that also open on desktop (the "Mark as sold" picker) — a centred card, not edge to edge */
  .sheet { max-width: 520px; margin: 0 auto; }
}

/* Bottom sheet (Browse distance / filters on phones) */
.sheet-overlay { padding: 0; align-items: end; }
.sheet { width: 100%; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: #faf9f0; border-radius: 22px 22px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px #0003; }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: #d8d0c4; margin: 0 auto 14px; }
.sheet .drawer-head { margin-bottom: 6px; }
.sheet-sub { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.sheet-big { margin: 0 0 6px; font: 700 34px 'Fraunces', serif; }
.sheet-big b { font-weight: 700; }
.sheet .radius-range { display: block; width: 100%; margin: 6px 0 14px; accent-color: var(--brand); }
.sheet .presets { margin-bottom: 4px; }
.sheet .fp-row { margin: 8px 0 4px; }
.sheet .side-note { margin: 8px 0 4px; }
.sheet .link-btn { margin-top: 10px; color: var(--brand-dark); }
.sheet .btn.wide { margin-top: 18px; }

/* ---------------- Motion ----------------
   Overlays animate in when they first open (.enter is added by render()) and
   out when dismissed (.closing). Pages fade up on navigation. Pressables get
   a tiny press so taps feel acknowledged. */
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise-in   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rise-out  { from { transform: none; } to { transform: translateY(100%); } }
@keyframes slide-in  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slide-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes pop-in    { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes page-in   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.overlay.enter { animation: fade-in .18s ease-out both; }
.overlay.enter .sheet { animation: rise-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.overlay.enter .drawer { animation: slide-in .26s cubic-bezier(.2, .8, .2, 1) both; }
.overlay.enter .modal { animation: pop-in .2s cubic-bezier(.2, .8, .2, 1) both; }
.overlay.closing { animation: fade-out .19s ease-in both; pointer-events: none; }
.overlay.closing .sheet { animation: rise-out .19s ease-in both; }
.overlay.closing .drawer { animation: slide-out .19s ease-in both; }
main.enter { animation: page-in .2s ease-out both; }
.btn, .chip, .tab, .card, .save-btn, .side-cat, .thread, .settings-list a, .settings-list button, .menu-btn, .loc { touch-action: manipulation; }
.btn, .chip, .tab, .card .photo, .side-cat, .loc, .menu-btn { transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.btn:active, .chip:active, .side-cat:active, .loc:active, .menu-btn:active { transform: scale(.96); }
.card:active .photo { transform: scale(.98); }
.tab:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .overlay.enter, .overlay.enter .sheet, .overlay.enter .drawer, .overlay.enter .modal, .overlay.closing, .overlay.closing .sheet, .overlay.closing .drawer, main.enter { animation: none; }
  .btn, .chip, .tab, .card .photo, .side-cat, .loc, .menu-btn { transition: none; }
}

.modal { width: 100%; max-width: 400px; margin: auto; background: #faf9f0; border-radius: 18px; padding: 20px 20px 24px; box-shadow: 0 12px 40px #0004; }
.modal-head { position: relative; text-align: center; }
.modal-logo { display: block; height: 40px; width: auto; margin: 2px auto 0; }
.modal-x { position: absolute; right: -4px; top: -2px; border: 0; background: none; font-size: 16px; color: var(--ink); cursor: pointer; padding: 4px 8px; }
.modal-q { text-align: center; font-weight: 700; font-size: 15px; margin: 22px 0 14px; }
.loc-cta { display: flex; margin: 0 auto; border-color: var(--brand); color: var(--brand-dark); border-radius: 22px; }
.modal-or { text-align: center; font-weight: 700; margin: 14px 0; }
/* What your search is pinned to right now, and the way back out of it — a ZIP
   typed once used to stick with no visible way to clear it */
.loc-actions { display: flex; gap: 10px; margin-top: 10px; }
.loc-actions .btn { flex: 1; }
/* Radios/checkboxes keep their native size — this rule once inflated the
   report form's radio buttons into giant circles */
.modal form input:not([type=radio]):not([type=checkbox]) { display: block; width: 100%; height: 44px; border: 1px solid #ddd5c9; border-radius: 10px; padding: 0 13px; font: 16px 'Montserrat'; text-align: center; background: #fff; }
.modal .btn.wide { border-radius: 22px; }

/* Consent / report modal extras */
.modal-title { display: block; font-family: 'Fraunces', serif; font-size: 19px; }
.consent-text { font-size: 13.5px; line-height: 1.55; color: #4c463f; margin: 0 0 16px; text-align: center; }
.consent-text a, .modal-fine a { color: var(--brand-dark); font-weight: 600; }
.modal-fine { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); text-align: center; }
/* Request-to-order: pickup time picker */
.order-ask { margin-top: 14px; }
.order-ask .field-label { margin-bottom: 8px; font-size: 14px; }
.order-ask .btn.wide { margin-top: 14px; }
/* iOS Safari treats datetime-local specially: it ignores a fixed height (the
   field collapses), and the value text renders misaligned unless the
   ::-webkit-date-and-time-value pseudo is styled too. So: auto height with a
   min, flex centering, and appearance reset — not the generic 44px input box. */
.modal form input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  line-height: 1.2;
}
.modal form input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: center;
  margin: 0;
}
/* The per-dish time field in the order-ask rows: left-aligned next to its
   label, not the centered full-width box (the extra .dish-row in the selector
   outweighs the :not() chain on the generic modal input rule above). */
.modal form .dish-row input.dish-when { flex: 1; min-width: 0; width: auto; text-align: left; justify-content: flex-start; padding: 8px 11px; font-size: 16px; }
.modal form .dish-row input.dish-when::-webkit-date-and-time-value { text-align: left; margin: 0; }
.report-form { margin-top: 14px; }
.report-form .btn.danger.wide { margin-top: 14px; background: #fff; }
.report-form .radio { display: flex; align-items: center; gap: 9px; padding: 9px 4px; font-size: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.report-form .radio input { accent-color: var(--brand); margin: 0; }
.report-form textarea { display: block; width: 100%; height: 76px; margin-top: 12px; border: 1px solid #ddd5c9; border-radius: 10px; padding: 10px 12px; font: 14px 'Montserrat'; resize: vertical; background: #fff; }

/* Review modal: five big tappable flames + a thank-you note */
.review-sub { margin: 14px 0 4px; text-align: center; font-size: 13.5px; line-height: 1.5; color: #4c463f; }
.fire-pick { display: flex; justify-content: center; gap: 2px; margin: 8px 0 0; }
.fire-pick button { border: 0; background: none; font-size: 36px; line-height: 1; padding: 4px 3px; cursor: pointer; filter: grayscale(1); opacity: .32; transition: transform .12s ease, opacity .12s ease, filter .12s ease; }
.fire-pick button.lit { filter: none; opacity: 1; }
.fire-pick button:active { transform: scale(1.18); }
.badge-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 10px 0 12px; }
.badge-pick .chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
.fire-label { margin: 4px 0 10px; min-height: 20px; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--brand-dark); }
.review-form textarea { display: block; width: 100%; height: 92px; border: 1px solid #ddd5c9; border-radius: 10px; padding: 10px 12px; font: 14px 'Montserrat'; resize: vertical; background: #fff; }
.review-form .btn.wide { margin-top: 14px; }

/* Auth modal */
.seg { display: flex; margin: 0 0 14px; padding: 3px; border-radius: 11px; background: #efe9df; }
.seg button { flex: 1; height: 36px; border: 0; border-radius: 9px; background: none; font: 600 13.5px 'Montserrat'; color: #6b645b; cursor: pointer; }
.seg button.on { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px #0001; }
.auth-form input { display: block; width: 100%; height: 46px; margin-top: 10px; border: 1px solid #ddd5c9; border-radius: 10px; padding: 0 13px; font: 16px 'Montserrat'; background: #fff; }
.auth-form .btn.wide { margin-top: 14px; }
/* Sign in with Apple / Google, above the email form */
.oauth-btn { width: 100%; height: 46px; margin-top: 9px; background: #fff; font-size: 14.5px; }
.oauth-btn:first-child { margin-top: 0; }
.oauth-mark { flex: none; }
.oauth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; color: var(--muted); font-size: 12px; }
.oauth-or::before, .oauth-or::after { content: ''; flex: 1; height: 1px; background: #e6ded2; }
/* Turnstile widget — takes up no room until Cloudflare has drawn it, so the
   form doesn't jump while the script loads. */
.captcha { display: flex; justify-content: center; margin-top: 12px; }
.captcha:empty { display: none; }
.auth-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--brand-fade); border: 1px solid #f0e2d1; color: var(--brand-dark); font-size: 13px; line-height: 1.45; }
.link-btn.center { display: block; margin: 12px auto 0; color: var(--brand-dark); }
.link-btn.center:hover { color: var(--brand); }
.link-btn.center b { font-weight: 700; }

/* Safety controls (report / block) */
.safety-row { display: flex; gap: 18px; margin-top: 14px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 0; font: 600 12.5px 'Montserrat'; color: var(--muted); cursor: pointer; }
.link-btn:hover { color: var(--bad); }
.chat-tools { margin-left: auto; display: flex; gap: 2px; }
.chat-tools .tool { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.chat-tools .tool:hover { background: #f4efe7; color: var(--bad); }
/* The header 🛎️ — the one inviting action up there, so it wears the brand */
.chat-tools .tool.order-tool { background: var(--brand-soft); color: var(--brand-dark); }
.chat-tools .tool.order-tool:hover { background: var(--brand-fade); color: var(--brand); }
.blocklist { max-width: 480px; }
.blocklist .mini { padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; }
.blocklist .grow { flex: 1; }
.btn.small { height: 32px; padding: 0 12px; font-size: 12.5px; }
.settings-list { display: flex; flex-direction: column; max-width: 480px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; overflow: hidden; }
.settings-list i { float: right; font-style: normal; color: var(--muted); }
.settings-list em { font-style: normal; color: var(--muted); font-weight: 600; font-size: 12.5px; }
/* Unhiding isn't destructive the way unblocking's neighbour is — don't paint it red */
.blocklist.soft .mini button { color: var(--brand-dark); }
.settings-list.danger-group { margin-top: 18px; }
.settings-list a, .settings-list button { display: block; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 500 14px 'Montserrat'; color: var(--ink); text-decoration: none; cursor: pointer; }
.settings-list > :last-child { border-bottom: 0; }
.settings-list a:hover, .settings-list button:hover { background: #f4efe7; }
.settings-list .danger-link { color: var(--bad); font-weight: 600; }

/* Legal pages */
.legal { max-width: 720px; }
.legal h1 { font-size: 28px; margin: 4px 0 4px; }
.legal-date { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; }
.legal h2 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { line-height: 1.6; color: #3f3934; font-size: 14.5px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--brand-dark); font-weight: 600; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; font-size: 13.5px; }

/* ---------------- Site footer ---------------- */
.foot { flex: none; margin-top: 64px; background: #26201b; color: #cbc2b6; }
.foot-inner { display: grid; grid-template-columns: minmax(240px, 1.5fr) 1fr 1fr 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 46px clamp(14px, 3vw, 36px) 28px; }
.foot-wordmark { font: 700 26px/1 'Fraunces', serif; letter-spacing: -.5px; color: #f3ece2; }
.foot-wordmark i { font-style: normal; color: #d96a3f; }
.foot-brand p { margin: 14px 0 0; max-width: 300px; font-size: 13px; line-height: 1.65; color: #a89d8f; }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.foot-col b { font: 700 11px 'Montserrat'; text-transform: uppercase; letter-spacing: 1px; color: #877c6e; margin-bottom: 3px; }
.foot-col a { color: #cbc2b6; text-decoration: none; width: max-content; transition: color .15s ease; }
.foot-col a:hover { color: #fff; }
.foot-fine { max-width: 1200px; margin: 0 auto; padding: 16px clamp(14px, 3vw, 36px) 26px; border-top: 1px solid #ffffff14; font-size: 12px; color: #877c6e; }

/* Text fields: a soft brand ring on focus instead of the harsh default */
.sell-form input:not([type=checkbox]):focus, .sell-form select:focus, .sell-form textarea:focus,
.auth-form input:focus, .modal form input:focus, .report-form textarea:focus,
.review-form textarea:focus, .chat-compose input:focus, .cat-search input:focus {
  outline: none; border-color: #cdb69a; box-shadow: 0 0 0 3px #9a3f2214;
}

/* ---------------- Toast ---------------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(6px); background: #2b2521; color: #fff; padding: 10px 17px; border-radius: 20px; font: 600 13px 'Montserrat'; z-index: 60; opacity: 0; transition: .25s; pointer-events: none; max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* The "leave a review" banner — drops in from the top like a push
   notification, above any overlay (overlays are z-50, toast z-60) */
.revpop { position: fixed; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%) translateY(-16px); display: flex; align-items: center; gap: 11px; width: min(480px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 34px #2b252140; z-index: 61; opacity: 0; transition: .28s cubic-bezier(.2, .8, .2, 1); }
.revpop.show { opacity: 1; transform: translateX(-50%); }
.revpop-emoji { font-size: 22px; flex: none; }
.revpop-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.revpop-txt b { font-size: 13.5px; }
.revpop-txt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.revpop .btn { flex: none; }
.revpop-x { border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px; flex: none; align-self: flex-start; margin: -2px -4px 0 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px) {
  .market { grid-template-columns: 1fr; gap: 0; padding-top: 16px; }
  .sidebar { display: none; }
  .filterbar { display: flex; }
  .detailgrid { grid-template-columns: 1fr; gap: 24px; }
  .gallery { position: static; }
}

@media (max-width: 760px) {
  :root { --topbar: 58px; }
  body { padding-bottom: 76px; }
  .topbar { gap: 12px; }
  .topnav { display: none; }
  .brand { margin-left: auto; }   /* topnav is hidden, so the logo carries the push right */
  .brand-logo { height: 30px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); }
  .toast { bottom: 86px; }

  /* 16px inputs prevent iOS Safari's auto-zoom on focus */
  .search input, .dm input, .chat-compose input, .report-form textarea, .review-form textarea,
  .sell-form input:not([type=checkbox]), .sell-form select, .sell-form textarea { font-size: 16px; }

  /* Roomier report reasons — 9px padding put these under the 44px touch target */
  .report-form .radio { padding: 12px 4px; font-size: 15px; }

  /* Comfortable 44px touch targets (Apple HIG) */
  .btn { height: 44px; }
  .btn.round { width: 44px; }
  .chip { height: 38px; }
  .dm input, .chat-compose input { height: 44px; }
  .save-btn { width: 36px; height: 36px; }
  .save-btn.dots-btn { top: 51px; }   /* heart is 36px tall here — keep the gap */
  .tab { padding: 9px 0 10px; }

  .grid { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .titleline h1 { font-size: 21px; }
  .cardtext span { font-size: 13px; }

  /* Listing detail */
  .detail { padding: 12px 14px 120px; }
  .heroimg { border-radius: 12px; }
  .panel h1 { font-size: 24px; }
  .actions { display: none; }   /* the sticky bottom CTA carries Message on phones */
  .detail-cta { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fffdfa; border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .detail-cta > div { display: flex; flex-direction: column; }
  .detail-cta b { font-size: 17px; }
  .detail-cta small { color: var(--muted); font-size: 11px; }
  .detail-cta .btn { flex: 1; }
  .detail-cta.owner { gap: 8px; }
  /* Your listing: Edit / Sold out / Remove live in this bottom bar on phones —
     the copy inside the page panel hides so nothing shows twice */
  .route-listing .owner-actions { display: none; }
  body.route-listing .tabbar { display: none; }
  body.route-listing { padding-bottom: 0; }

  /* Inbox */
  .inbox { display: block; height: auto; border: 0; }
  .threads { border: 0; padding: 14px 10px; }
  .chatpane { display: none; }
  body.chat-open .threads { display: none; }
  body.chat-open .chatpane { display: flex; height: calc(100dvh - var(--topbar) - var(--sat)); }
  body.chat-open .tabbar { display: none; }
  body.chat-open { padding-bottom: 0; }
  .chat-back { display: grid; place-items: center; }

  /* Sell */
  .sell { display: block; padding: 24px 16px 90px; }
  .sell h1 { font-size: 25px; }
  .sell-side { margin-top: 26px; }

  /* Footer: brand on top, link columns side by side */
  .foot { margin-top: 40px; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 30px 16px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  /* The listing page's fixed bottom CTA floats over the page end — keep the
     last footer line readable above it */
  .route-listing .foot-fine { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}