:root {
    --cream: #ffffff;
    --cream-warm: #f5f1e7;
    --paper: #ffffff;
    --ink: #1a140d;
    --ink-mid: #4a3f31;
    --ink-soft: #7a6b58;
    --charcoal: #1a1410;
    --crema: #b8854a;
    --crema-light: #e8d4a8;
    --olive: #5d6b3f;
    --terra: #c25a3f;
    --terra-dark: #a3472f;
    --coffee: #4a2c1a;
    --rule: #e5e0d3;
    --rule-soft: #efebde;
    --rule-strong: #1a1410;
    --primary: var(--terra);
    --primary-dark: var(--terra-dark);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    --radius: 12px;
    --radius-lg: 18px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Charter', 'Iowan Old Style', 'Cambria', Georgia, serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 88px;
  }
  .sans { font-family: -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif; }
  h1, h2, h3, .display { font-family: 'Charter', 'Iowan Old Style', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
  .loading { padding: 80px 24px; text-align: center; color: var(--ink-soft); font-family: -apple-system, system-ui, sans-serif; }

  .topnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--rule); }
  .topnav-inner { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; font-size: 13px; }
  .topnav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
  .topnav-brand img { width: 22px; height: 28px; }
  .topnav-brand-name { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); text-transform: lowercase; }
  .topnav-divider { width: 1px; height: 18px; background: var(--rule); flex-shrink: 0; }
  .topnav-back { color: var(--ink-mid); text-decoration: none; display: flex; align-items: center; gap: 6px; }
  @media (max-width: 480px) {
    .topnav-brand-name { display: none; }
    .topnav-crumbs { font-size: 12px; }
  }
  .topnav-crumbs { color: var(--ink-soft); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topnav-crumbs a { color: var(--ink-soft); text-decoration: none; }
  .topnav-crumbs a:hover { color: var(--coffee); text-decoration: underline; }
  .topnav-share { background: none; border: 1px solid var(--rule); color: var(--ink-mid); padding: 5px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; }

  .hero { position: relative; min-height: 460px; color: #fff; padding: 80px 24px 32px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero.has-bg::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-image: var(--hero-bg); z-index: -2; }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,13,0.05) 0%, rgba(26,20,13,0.55) 70%, rgba(26,20,13,0.85) 100%); z-index: -1; }
  .hero { background: var(--charcoal); }
  .hero.has-bg { background: transparent; }
  .hero-logo {
    width: 78px; height: 78px; border-radius: 50%;
    background: #fff center/cover no-repeat;
    border: 3px solid rgba(255,255,255,0.95);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
    margin-bottom: 14px;
    flex-shrink: 0;
    background-size: cover;
  }
  .hero-tag-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .hero-tag { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 4px; color: #fff; }
  .hero-tag.open { background: rgba(93, 107, 63, 0.95); }
  .hero-tag.closed { background: rgba(180, 60, 60, 0.92); }
  .hero h1 { font-size: clamp(40px, 8vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
  .hero-tagline { font-size: clamp(16px, 3vw, 19px); font-style: italic; color: rgba(255,255,255,0.92); max-width: 540px; margin-bottom: 18px; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
  .hero-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; color: rgba(255,255,255,0.85); }
  .hero-meta .dot { opacity: 0.5; }
  .hero-meta .star { color: var(--crema-light); }

  .info-bar { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 14px 0; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; }
  .info-bar-inner { max-width: 720px; margin: 0 auto; padding: 0 18px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .info-pill { display: flex; align-items: center; gap: 6px; color: var(--ink-mid); text-decoration: none; }
  .info-pill .lbl { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
  .info-pill .val { color: var(--ink); font-weight: 500; }
  .info-pill a, .info-pill.link { color: var(--coffee); text-decoration: none; }
  .info-pill.link:hover { text-decoration: underline; }
  .info-divider { width: 1px; height: 22px; background: var(--rule); }

  .section { max-width: 720px; margin: 0 auto; padding: 40px 24px; }
  .section.tight { padding: 20px 24px; }
  .section-eyebrow { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
  .section h2 { font-size: clamp(26px, 5vw, 32px); margin-bottom: 18px; color: var(--ink); }

  .perfect-for { background: var(--cream-warm); padding: 24px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
  .perfect-for-inner { max-width: 720px; margin: 0 auto; padding: 0 18px; display: flex; gap: 8px; flex-wrap: wrap; font-family: -apple-system, system-ui, sans-serif; }

  /* Accent tiles row — shared visual language with the Mini App.
     4-up grid on desktop, 2x2 on mobile. */
  .accent-row {
    max-width: 720px; margin: 18px auto 8px; padding: 0 18px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font-family: -apple-system, system-ui, sans-serif;
  }
  @media (max-width: 720px) {
    .accent-row { grid-template-columns: 1fr 1fr; }
  }
  .accent-tile {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid var(--rule-soft);
    text-decoration: none; color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
    min-height: 80px;
  }
  .accent-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
  .accent-tile-icon { font-size: 20px; line-height: 1.1; flex-shrink: 0; }
  .accent-tile-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .accent-tile-label {
    font-family: var(--serif, Charter, Georgia, serif);
    font-weight: 600; font-size: 14.5px; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
  }
  .accent-tile-foot {
    font-size: 11.5px;
    opacity: .72;
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .accent-tile-sub { font-weight: 400; opacity: .75; font-size: 13px; }
  /* Tone variants matching the Mini App's tile palette */
  .accent-tile.tone-terra { background: var(--terra, #c25a3f); color: #fff; border-color: var(--terra-dark, #a3472f); }
  .accent-tile.tone-terra .accent-tile-foot { color: rgba(255,255,255,.86); opacity: 1; }
  .accent-tile.tone-mint { background: var(--mint, #5ad6a5); color: #1a140d; border-color: rgba(0,0,0,.08); }
  .accent-tile.tone-ink { background: var(--charcoal, #1a1410); color: #f4eede; border-color: rgba(255,255,255,.08); }
  .accent-tile.tone-ink .accent-tile-foot { color: rgba(244,238,222,.78); opacity: 1; }
  .accent-tile.tone-paper { background: var(--paper, #fff); color: var(--ink, #1a140d); border-color: var(--rule, #e5e0d3); }
  /* Tag pills — subtle outline, mint text accent on hover */
  .pill { background: var(--paper); border: 1px solid var(--rule); padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--ink-mid); display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, color .15s; }
  .pill:hover { border-color: var(--mint, #5ad6a5); color: var(--ink); }
  .pill .emoji { font-size: 14px; }

  .gallery-strip { display: flex; gap: 8px; padding: 16px 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .gallery-strip::-webkit-scrollbar { display: none; }
  .gallery-strip img { width: 280px; height: 200px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; scroll-snap-align: start; cursor: pointer; transition: transform 0.15s; }
  .gallery-strip img:hover { transform: scale(1.02); }
  .gallery-strip img:first-child { margin-left: max(0px, calc(50vw - 360px)); }
  /* Lightbox for tapping a gallery photo */
  .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .lightbox.active { opacity: 1; pointer-events: auto; }
  .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
  .lightbox-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.18); border: none; color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

  .story p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; color: var(--ink-mid); }
  .story p:first-of-type::first-letter { font-size: 56px; float: left; line-height: 0.9; margin: 6px 8px 0 0; font-weight: 600; color: var(--coffee); }
  .story a { color: var(--coffee); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .story a:hover { color: var(--terra); }
  .story-img-inline { margin: 26px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  .story-img-inline img { width: 100%; height: auto; display: block; }
  .story-img-inline .caption { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.88); padding: 10px 14px; background: var(--charcoal); text-align: center; font-style: italic; letter-spacing: 0.01em; }
  .pull-quote { border-left: 3px solid var(--crema); padding: 6px 0 6px 20px; margin: 28px 0; font-size: 19px; font-style: italic; color: var(--coffee); line-height: 1.45; }

  .signatures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .sig-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
  .sig-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .sig-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--cream-warm); }
  .sig-card-body { padding: 12px 14px 16px; }
  .sig-card-eyebrow { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); margin-bottom: 4px; }
  .sig-card-name { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .sig-card-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; font-family: -apple-system, system-ui, sans-serif; }

  .updates-list { display: flex; flex-direction: column; gap: 14px; }
  .update-card { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 18px 20px; font-family: -apple-system, system-ui, sans-serif; }
  .update-date { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
  .update-body { font-size: 14px; color: var(--ink-mid); line-height: 1.6; }
  .update-body strong { color: var(--ink); }
  .update-body p { margin-bottom: 12px; }
  .update-body p:last-child { margin-bottom: 0; }

  /* Offers panel — mint left accent (was terra), proper black eyebrow text */
  /* Server-rendered content (functions/[[path]].js renderBusinessContent()),
     placed INSIDE #app in place of "Loading…". It is the visible page for a
     crawler or anyone without JS; render() replaces it with the full app.
     Plainly styled and fully visible — never clipped or hidden (1 Sep 2026). */
  .ol-seo-content { --sc-cream: #F4EEDE; --sc-paper: #ffffff; --sc-ink: #1A1A1A; --sc-muted: rgba(26,26,26,.5); --sc-rule: rgba(26,26,26,.08);
    max-width: 460px; margin: 0 auto; min-height: 100vh; background: var(--sc-cream); color: var(--sc-ink);
    font-family: Inter, -apple-system, 'SF Pro Text', system-ui, sans-serif; line-height: 1.5; padding: 0 0 48px; box-shadow: 0 0 60px rgba(0,0,0,.18); }
  .ol-seo-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--sc-rule); }
  .ol-seo-head h1 { font-family: Outfit, Inter, -apple-system, system-ui, sans-serif; font-weight: 700; font-size: 23px; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
  .ol-seo-loc { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); margin-top: 5px; }
  .ol-seo-sec { margin: 12px 14px 0; background: var(--sc-paper); border: 1px solid var(--sc-rule); border-radius: 18px; padding: 16px 18px; }
  .ol-seo-sec h2 { font-family: Outfit, Inter, -apple-system, system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin: 0 0 8px; }
  .ol-seo-sec h3 { font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
  .ol-seo-sec p { margin: 0 0 10px; font-size: 14px; }
  .ol-seo-sec p:last-child, .ol-seo-sec ul:last-child, .ol-seo-sec dl:last-child { margin-bottom: 0; }
  .ol-seo-sec ul { margin: 0 0 10px 18px; padding: 0; font-size: 14px; }
  .ol-seo-sec li { margin-bottom: 4px; }
  .ol-seo-sec dl { margin: 0; font-size: 14px; }
  .ol-seo-sec dt { font-weight: 600; margin-top: 10px; }
  .ol-seo-sec dt:first-child { margin-top: 0; }
  .ol-seo-sec dd { margin: 3px 0 0; color: rgba(26,26,26,.72); }
  /* Desktop: the page's website skin is a wide column, so the pre-render block
     is one too — the phone card only makes sense under 900px (2 Sep 2026). */
  @media (min-width: 900px) {
    .ol-seo-content { max-width: 800px; min-height: 0; background: transparent; box-shadow: none; padding: 24px 24px 56px; }
    .ol-seo-head { padding: 8px 0 18px; }
    .ol-seo-head h1 { font-size: 34px; }
    .ol-seo-sec { margin: 14px 0 0; padding: 22px 26px; border-radius: 20px; }
    .ol-seo-sec h2 { font-size: 20px; }
    .ol-seo-sec p, .ol-seo-sec ul, .ol-seo-sec dl, .ol-seo-sec h3 { font-size: 15px; }
  }
  .offers { background: var(--paper); color: var(--ink); padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--rule); border-left: 4px solid var(--mint, #5ad6a5); margin: 8px 0; box-shadow: var(--shadow-sm); }
  .offers-eyebrow { font-family: -apple-system, system-ui, sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink, #1a140d); font-weight: 700; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
  .offers-eyebrow-icon { display: inline-flex; color: var(--ink, #1a140d); }
  .offers-eyebrow-icon svg { width: 20px; height: 20px; }
  .offers-text { font-size: 18px; line-height: 1.4; color: var(--ink); }

  .custom-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
  /* Custom buttons — Mini App tile palette, alternating tones */
  .custom-btn { flex: 1 1 calc(50% - 5px); min-width: 140px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); text-decoration: none; font-family: -apple-system, system-ui, sans-serif; transition: transform 0.12s ease, box-shadow 0.12s ease; border: 1px solid transparent; background: var(--ink, #1a140d); color: var(--cream, #f4eede); }
  .custom-btn:nth-child(3n+2) { background: var(--mint, #5ad6a5); color: #14241b; }
  .custom-btn:nth-child(3n+3) { background: var(--terra, #c25a3f); color: #fff; }
  .custom-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
  .custom-btn-icon { flex-shrink: 0; display: inline-flex; align-items: center; }
  .custom-btn-icon svg { width: 22px; height: 22px; }
  .custom-btn-body { flex: 1; min-width: 0; }
  .custom-btn-label { font-size: 14px; font-weight: 700; color: inherit; margin-bottom: 2px; }
  .custom-btn-sub { font-size: 12px; color: inherit; opacity: .78; }

  .loyalty-panel { background: linear-gradient(135deg, var(--cream-warm) 0%, var(--paper) 100%); border: 1px solid var(--crema); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; gap: 20px; align-items: center; }
  .loyalty-stamp-preview { flex-shrink: 0; width: 96px; height: 96px; transform: rotate(-9deg); opacity: 0.92; filter: drop-shadow(0 2px 3px rgba(74, 44, 26, 0.25)); }
  .loyalty-stamp-preview svg { width: 100%; height: 100%; display: block; }
  .loyalty-text-wrap { flex: 1; }
  .loyalty-headline { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .loyalty-sub { font-size: 14px; color: var(--ink-soft); font-family: -apple-system, system-ui, sans-serif; margin-bottom: 12px; }
  .loyalty-cta-btn { display: inline-block; background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 8px; font-family: -apple-system, system-ui, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s; }
  .loyalty-cta-btn:hover { background: var(--primary-dark); }

  .menu-tabs { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--cream-warm); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: -apple-system, system-ui, sans-serif; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { padding: 8px 16px; border-radius: 999px; font-size: 13px; color: var(--ink-mid); cursor: pointer; white-space: nowrap; border: none; background: transparent; transition: all 0.15s; }
  .menu-tab.active { background: var(--paper); color: var(--coffee); box-shadow: var(--shadow-sm); }
  .menu-section { display: none; }
  .menu-section.active { display: block; background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 6px; padding: 4px 22px; }
  .menu-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule-strong); align-items: flex-start; }
  .menu-item:last-child { border-bottom: none; }
  .menu-item-img { flex-shrink: 0; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--cream-warm); display: flex; align-items: center; justify-content: center; font-size: 22px; }
  .menu-item-body { flex: 1; }
  .menu-item-name { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  .menu-item-desc { font-size: 13px; color: var(--ink-soft); font-family: -apple-system, system-ui, sans-serif; line-height: 1.4; margin-bottom: 4px; }
  .menu-item-tags { display: flex; gap: 6px; }
  .menu-item-tag { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--olive); padding: 2px 6px; background: rgba(93, 107, 63, 0.1); border-radius: 3px; }
  .menu-item-price { flex-shrink: 0; font-size: 16px; font-weight: 500; color: var(--coffee); align-self: flex-start; }

  .hours-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px 0; font-family: -apple-system, system-ui, sans-serif; }
  .hours-row { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--rule-soft); font-size: 14px; }
  .hours-row:last-child { border-bottom: none; }
  .hours-row.today { background: var(--cream-warm); }
  .hours-row.today .hours-day { font-weight: 600; color: var(--coffee); }
  .hours-day { color: var(--ink-mid); }
  .hours-time { color: var(--ink); font-weight: 500; }

  .booking-band { background: var(--charcoal); color: #fff; padding: 32px 24px; border-radius: var(--radius); text-align: center; }
  .booking-band h3 { font-size: 22px; margin-bottom: 6px; color: #fff; }
  .booking-band p { font-size: 14px; color: rgba(255, 255, 255, 0.72); font-family: -apple-system, system-ui, sans-serif; margin-bottom: 18px; }
  .booking-btn { display: inline-block; background: var(--primary); color: #fff; padding: 12px 28px; border-radius: 8px; font-family: -apple-system, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.15s; }
  .booking-btn:hover { background: var(--primary-dark); }

  .map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); height: 320px; }
  .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

  .practical-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  /* Practical info — uniform ink tiles */
  .practical-item { padding: 16px 16px; background: var(--ink, #1a140d); color: var(--cream, #f4eede); border: none; border-radius: var(--radius); font-family: -apple-system, system-ui, sans-serif; }
  .practical-item-icon { margin-bottom: 6px; display: inline-flex; }
  .practical-item-icon svg { width: 22px; height: 22px; }
  .practical-item-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; opacity: .72; margin-bottom: 2px; }
  .practical-item-value { font-size: 14px; color: inherit; }

  .reviews-summary { display: flex; gap: 24px; align-items: center; padding: 20px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 18px; }
  .reviews-score { font-size: 44px; font-weight: 600; color: var(--coffee); line-height: 1; }
  .reviews-stars { color: var(--crema); font-size: 16px; margin-bottom: 4px; }
  .reviews-count { font-family: -apple-system, system-ui, sans-serif; font-size: 13px; color: var(--ink-soft); }
  .review-card { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); font-family: -apple-system, system-ui, sans-serif; }
  .review-card:last-of-type { border-bottom: none; }
  .review-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .review-author { font-size: 14px; font-weight: 600; color: var(--ink); }
  .review-date { font-size: 12px; color: var(--ink-soft); }
  .review-stars-inline { color: var(--crema); font-size: 13px; margin-bottom: 4px; }
  .review-text { font-size: 14px; color: var(--ink-mid); line-height: 1.55; }
  .leave-review-btn { display: inline-block; margin-top: 16px; color: var(--coffee); text-decoration: none; font-family: -apple-system, system-ui, sans-serif; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--coffee); padding-bottom: 1px; }
  /* join Open Locally (site-wide member CTA) */
  .join-ol-grid { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  .join-ol-qr { width: 128px; height: 128px; flex: 0 0 auto; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 10px; }
  .join-ol-qr svg { width: 100%; height: 100%; display: block; }
  .join-ol-body { flex: 1; min-width: 220px; }
  .join-ol-body p { margin: 0 0 10px; }
  .join-ol-prize { font-family: -apple-system, system-ui, sans-serif; font-size: 14px; }
  .join-ol-btn { display: inline-block; margin-top: 4px; background: var(--mint, #5ad6a5); color: #14241b; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-family: -apple-system, system-ui, sans-serif; }
  @media (max-width: 560px) { .join-ol-qr { display: none; } }

  .footer-credit { text-align: center; padding: 36px 24px 24px; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--rule); margin-top: 20px; }
  .footer-credit a { color: var(--coffee); text-decoration: none; }
  .footer-credit a:hover { text-decoration: underline; }

  .bottom-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cream); border-top: 1px solid var(--rule); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); z-index: 100; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
  .bottom-cta-inner { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; }
  .bottom-cta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; padding: 14px 20px; border-radius: 10px; font-family: -apple-system, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; }
  .bottom-cta-btn:hover { background: var(--primary-dark); }
  .bottom-cta-btn.secondary { flex: 0 0 auto; background: var(--paper); color: var(--primary); border: 1px solid var(--rule); }
  .bottom-cta-btn.secondary:hover { background: var(--cream-warm); }

  @media (max-width: 600px) {
    .hero { padding: 60px 18px 24px; min-height: 420px; }
    .hero-logo { width: 64px; height: 64px; border-width: 2px; margin-bottom: 12px; }
    .info-bar-inner { gap: 10px; }
    .info-divider { display: none; }
    .section { padding: 32px 18px; }
    .perfect-for { padding: 18px 0; }
    .gallery-strip { padding: 12px 18px; }
    .gallery-strip img:first-child { margin-left: 0; }
    .gallery-strip img { width: 240px; height: 170px; }
    .loyalty-panel { flex-direction: column; text-align: center; padding: 24px 20px; }
    .reviews-summary { flex-direction: column; align-items: flex-start; gap: 8px; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     BUTTON-APP SKIN  (html.skin-button — only when ?skin=button)
     Clean, self-contained render of the Clipper / niche-app look, fed by the
     same OL business data the website view uses. All classes are `ba-` (button
     app) namespaced and scoped under html.skin-button so the default website
     render is 100% untouched. Palette + sizing copied faithfully from the real
     app (barbers_mini_app/styles.css): Outfit display, Inter body, JetBrains
     Mono kicker labels; terracotta + mint + sepia on warm paper. Add
     html.skin-button.theme-dark for the golf/bike dark variant — tone-ink
     tiles flip to cream automatically, same as the real app.
     ═══════════════════════════════════════════════════════════════════════ */
  html.skin-button {
    --terra: #E85A3A; --terra-2: #D44E2D; --mint: #4FD4A0; --sepia: #C9A876;
    --ink: #1A1A1A; --ink-dim: rgba(26,26,26,.65); --ink-muted: rgba(26,26,26,.45);
    --cream: #F0EAD9; --paper: #F4EEDE; --paper-shade: #EBE3CC; --rule: rgba(26,26,26,.08);
    --brand: var(--terra);
    /* match the app background (cream/dark) — NOT the dark desktop "stage",
       which was peeking through at the top edge / safe-area as a black line.
       The desktop phone-frame stage is restored below at >=900px. */
    background: var(--cream);
    font-family: Inter, -apple-system, system-ui, sans-serif;
  }
  html.skin-button.theme-dark {
    --cream: #15110d; --paper: #1d1812; --paper-shade: #251f17;
    --ink: #fdf9ec; --ink-dim: rgba(253,249,236,.85); --ink-muted: rgba(253,249,236,.62);
    --rule: rgba(253,249,236,.1);
  }
  html.skin-button body {
    background: var(--cream); color: var(--ink); padding: 0;
    font-family: Inter, -apple-system, system-ui, sans-serif; line-height: 1.5;
  }
  html.skin-button #app {
    position: relative; max-width: 460px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
    background: var(--cream);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    box-shadow: 0 0 60px rgba(0,0,0,.18);
  }
  html.skin-button .loading { color: var(--ink-dim); }

  /* DESKTOP: a page, not a phone in a void.
     Until 3 Sep 2026 this line was `background:#1a1a1a` — a near-black "stage"
     behind a 460px column. On a phone the column IS the screen and that stage is
     never seen; on a laptop it reads as a black void with a strip of app in the
     middle, which is exactly what Glenn saw. The app column stays (it is the
     same component the phone gets, and the whole point is one build), but it now
     sits on the site's own paper with an ink border and the offset shadow the
     rest of Open Locally uses — so a listing reads as a web page that happens to
     contain the app, rather than a screenshot of a phone. */
  @media (min-width: 900px) {
    html.skin-button {
      background: #f6f0e2;
      background-image:
        radial-gradient(circle at 18% 12%, rgba(90,214,165,.16), transparent 42%),
        radial-gradient(circle at 84% 78%, rgba(194,90,63,.13), transparent 46%);
      background-attachment: fixed;
    }
    html.skin-button body { background: transparent; }
    html.skin-button #app {
      max-width: 520px;
      min-height: 0;
      margin: 26px auto 40px;
      border: 2px solid #101010;
      border-radius: 22px;
      box-shadow: 8px 8px 0 #101010;
      overflow: hidden;
    }
  }


  /* ── Hero banner — slim photo header with the name on top (OL house style) ── */
  /* Inset rounded photo header — a card, like everything else on the page.
     Narrower than full-bleed so it can be a touch taller and crop less. */
  html.skin-button .ba-banner { position: relative; height: 172px; margin: 10px 14px 0; border-radius: 22px; overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 6px 18px rgba(10,8,6,.16); }
  html.skin-button .ba-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  html.skin-button .ba-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,.04) 0%, rgba(10,8,6,.34) 46%, rgba(10,8,6,.9) 100%); }
  html.skin-button .ba-banner-solid::after { background: linear-gradient(180deg, rgba(10,8,6,.12) 0%, rgba(10,8,6,.42) 100%); }
  html.skin-button .ba-banner-text { position: relative; z-index: 1; padding: 18px 20px; color: #fff; width: 100%; }
  html.skin-button .ba-banner-name { font-family: Outfit, sans-serif; font-weight: 700; font-size: 23px; line-height: 1.04; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
  html.skin-button .ba-banner-tagline { font-size: 13px; opacity: .92; margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
  html.skin-button .ba-banner-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-top: 8px; opacity: .94; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  html.skin-button .ba-banner-rating { white-space: nowrap; }

  /* Clean text-strip header — used when the business has no hero image. */
  html.skin-button .ba-header-strip { padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); }
  html.skin-button .ba-strip-name { font-family: Outfit, sans-serif; font-weight: 700; font-size: 23px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
  html.skin-button .ba-strip-loc { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 5px; }

  /* ── Info pill row ── */
  html.skin-button .ba-pills { display: flex; gap: 7px; overflow-x: auto; padding: 12px 16px 2px; scrollbar-width: none; }
  html.skin-button .ba-pills::-webkit-scrollbar { display: none; }
  html.skin-button .ba-pill-info { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 11px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; text-decoration: none; }
  html.skin-button .ba-pill-info b { color: var(--ink); font-weight: 600; }
  html.skin-button .ba-pill-ico { display: inline-flex; opacity: .7; }
  html.skin-button .ba-pill-ico svg { width: 13px; height: 13px; }

  /* ── Action pill row (custom_buttons: Book / Walk-in / Instagram) ── */
  html.skin-button .ba-actions { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 2px; scrollbar-width: none; }
  html.skin-button .ba-actions::-webkit-scrollbar { display: none; }
  html.skin-button .ba-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; background: #1a1410; color: var(--cream); }
  html.skin-button .ba-action:nth-child(3n+2) { background: var(--mint); color: #14241b; }
  html.skin-button .ba-action:nth-child(3n+3) { background: var(--terra); color: #fff; }
  html.skin-button .ba-action-ico { display: inline-flex; }
  html.skin-button .ba-action-ico svg { width: 16px; height: 16px; }

  /* ── Tile grid — the signature button-app home ── */
  html.skin-button .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px 16px 4px; }
  html.skin-button .ba-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 108px; border: 0; border-radius: 22px; padding: 15px 15px 14px; text-align: left; cursor: pointer; font: inherit; transition: transform .15s ease; }
  /* "Reward ready" badge on the loyalty tile when a reward is unclaimed — so a
     milestone earned on a visit (which no longer auto-opens the card) still shows
     in-app, not only in the Telegram text. */
  html.skin-button .ba-tile-badge { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 3px; background: #1f9d68; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.22); animation: baBadgePop .4s cubic-bezier(.2,1.3,.4,1); }
  @keyframes baBadgePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  html.skin-button .ba-tile:active { transform: translateY(2px); }
  html.skin-button .ba-tile.t-terra { background: var(--terra); color: var(--cream); }
  html.skin-button .ba-tile.t-mint  { background: var(--mint);  color: #1A1A1A; }
  html.skin-button .ba-tile.t-ink   { background: #0c0a07; color: #fdf9ec; }
  html.skin-button.theme-dark .ba-tile.t-ink { background: #fdf9ec; color: #1A1A1A; }
  html.skin-button .ba-tile-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.32); }
  html.skin-button .ba-tile.t-ink .ba-tile-ico { background: rgba(253,249,236,.14); }
  html.skin-button.theme-dark .ba-tile.t-ink .ba-tile-ico { background: rgba(26,26,26,.08); }
  html.skin-button .ba-tile-ico svg { width: 21px; height: 21px; }
  html.skin-button .ba-tile-label { font-family: Outfit, sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.05; letter-spacing: -.01em; margin-top: auto; padding-top: 11px; }
  html.skin-button .ba-tile-sub { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; opacity: .72; margin-top: 5px; }

  /* ── Compact home (layout "D", 2026-07-30): one uniform button size, two
     across, up to 10 — icon left, label+sub right. Tiles keep .ba-tile so the
     reward badge + tone classes carry over; .ba-chip just reshapes them. ── */
  /* minmax(0,1fr) + min-width:0 on the buttons: without them, the nowrap
     label/sub text sets the grid track's min-content width and the two columns
     overflow the phone screen (Glenn saw exactly this, 30 Jul). */
  html.skin-button .ba-grid.ba-compact { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; padding: 10px 12px 2px; }
  html.skin-button .ba-tile.ba-chip { flex-direction: row; align-items: center; gap: 10px; min-width: 0; min-height: 68px; border-radius: 17px; padding: 12px; }
  html.skin-button .ba-tile.ba-chip .ba-tile-ico { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; }
  html.skin-button .ba-tile.ba-chip .ba-tile-ico svg { width: 19px; height: 19px; }
  /* Label ABOVE subtitle: the txt wrapper must be a column — its children are
     inline spans and were rendering side-by-side on one line (Glenn, 30 Jul). */
  html.skin-button .ba-tile.ba-chip .ba-tile-txt { min-width: 0; display: flex; flex-direction: column; }
  /* Labels WRAP (Glenn: "Products & Services" must fit) — up to two lines,
     subtitle still underneath. */
  html.skin-button .ba-tile.ba-chip .ba-tile-label { margin-top: 0; padding-top: 0; font-size: 13.5px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.skin-button .ba-tile.ba-chip .ba-tile-sub { margin-top: 3px; font-size: 8px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Reward badge on a chip: TOP-LEFT over the icon's corner (Glenn 30 Jul —
     centred-right sat on the wording; top-left at worst clips the icon). */
  html.skin-button .ba-tile.ba-chip .ba-tile-badge { top: 4px; left: 4px; right: auto; font-size: 9px; padding: 2px 6px; }
  /* The customer's stamp-QR hero card above the grid — tap opens the loyalty
     sheet (full-size QR at its top). The mini QR is real and usually scans;
     the sheet is the guaranteed scan surface. */
  /* Full width like the grid (16px margins — Glenn: don't pull it in), FLAT:
     a slim strip, not a tall card. The 56px mini QR is a preview; the loyalty
     sheet's 200px QR is the scan surface. */
  html.skin-button .ba-qrhero { display: flex; align-items: center; gap: 11px; margin: 12px 16px 0; padding: 7px 12px; width: calc(100% - 32px); min-width: 0; background: var(--paper); border: 1.5px solid var(--terra); border-radius: 15px; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
  html.skin-button .ba-qrhero:active { transform: translateY(1px); }
  html.skin-button .ba-qrhero img { width: 56px; height: 56px; border-radius: 8px; background: #fff; flex-shrink: 0; }
  html.skin-button .ba-qrhero-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 14px; }
  html.skin-button .ba-qrhero-sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; line-height: 1.35; }
  html.skin-button .ba-qrhero-go { margin-left: auto; color: var(--terra); font-weight: 800; font-size: 18px; }

  /* ── About card ── */
  html.skin-button .ba-about { margin: 16px 16px 0; padding: 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; }
  html.skin-button .ba-about-body { font-size: 14px; line-height: 1.55; color: var(--ink-dim); }
  html.skin-button .ba-about-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--brand); font-weight: 600; font-size: 14px; background: none; border: 0; cursor: pointer; font-family: Outfit, sans-serif; }

  /* ── Section head + horizontal strip (specials / offers) ── */
  html.skin-button .ba-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 26px 18px 12px; }
  html.skin-button .ba-sec-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
  html.skin-button .ba-sec-link { color: var(--brand); font-weight: 600; font-size: 13px; background: none; border: 0; cursor: pointer; font-family: Inter, sans-serif; }
  html.skin-button .ba-strip { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  html.skin-button .ba-strip::-webkit-scrollbar { display: none; }
  html.skin-button .ba-strip-card { flex: 0 0 80%; scroll-snap-align: start; background: #0c0a07; color: #fdf9ec; border-radius: 22px; padding: 20px; }
  html.skin-button.theme-dark .ba-strip-card { background: var(--paper); color: var(--ink); }
  html.skin-button .ba-strip-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
  html.skin-button .ba-strip-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 18px; margin-top: 8px; line-height: 1.1; }
  html.skin-button .ba-strip-text { font-size: 13px; opacity: .82; margin-top: 6px; line-height: 1.45; }

  /* ── Bottom tab bar ── */
  html.skin-button .ba-tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--cream); border-top: 1px solid var(--rule); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); z-index: 400; }
  html.skin-button .ba-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; color: var(--ink-muted); font: inherit; padding: 2px 0; }
  html.skin-button .ba-tab-ico { width: 40px; height: 30px; display: grid; place-items: center; border-radius: 999px; transition: background .15s; }
  html.skin-button .ba-tab-ico svg { width: 22px; height: 22px; }
  html.skin-button .ba-tab.active { color: var(--ink); }
  html.skin-button .ba-tab.active .ba-tab-ico { background: var(--brand); color: #fff; }
  html.skin-button .ba-tab-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  html.skin-button .ba-tab-badge { position: absolute; top: -2px; right: calc(50% - 24px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--terra); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

  /* ── Bottom sheet ── */
  /* A sheet sits flush on the bottom edge (24 Aug). It used to stop 66px short
     to leave the tab bar showing — but the backdrop dims and blocks that strip,
     so the nav underneath was only ever decoration you couldn't press. It read
     as a gap under the sheet. The card's own bottom padding clears the phone's
     home bar, and the safe-area inset lives on .ba-sheet-scroll. */
  html.skin-button .ba-sheet { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; padding-bottom: env(safe-area-inset-bottom); }
  html.skin-button .ba-sheet.open { opacity: 1; pointer-events: auto; }
  html.skin-button .ba-sheet-backdrop { position: absolute; inset: 0; background: rgba(10,8,6,.5); }
  html.skin-button .ba-sheet-card { position: relative; width: 100%; max-width: 460px; height: 82vh; max-height: calc(100dvh - 84px); background: var(--cream); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(10,8,6,.28); }
  html.skin-button .ba-sheet.open .ba-sheet-card { transform: translateY(0); }
  /* With the window banner present, keep a tab sheet's top BELOW it (so its header
     is never hidden) — cap the card height by the banner height. */
  html.skin-button.has-win-banner .ba-sheet-card { max-height: calc(100dvh - 84px - var(--ol-win-h, 0px)); }
  html.skin-button .ba-sheet-handle-row { display: flex; padding: 10px 16px 2px; }
  html.skin-button .ba-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-muted); opacity: .4; margin: 0 auto; }
  html.skin-button .ba-sheet-close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink-dim); font-size: 22px; line-height: 1; cursor: pointer; }
  html.skin-button .ba-sheet-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; max-width: 100%; padding: 6px 20px calc(28px + env(safe-area-inset-bottom)); scrollbar-width: none; }
  html.skin-button .ba-sheet-scroll > * { max-width: 100%; box-sizing: border-box; }
  html.skin-button .ba-sheet-scroll::-webkit-scrollbar { display: none; }
  html.skin-button .ba-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 8px; }
  html.skin-button .ba-sheet-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
  html.skin-button .ba-sheet-one { font-size: 14px; color: var(--ink-dim); margin-top: 5px; }
  html.skin-button .ba-sec { margin-top: 24px; }
  html.skin-button .ba-empty { padding: 22px 4px; color: var(--ink-muted); font-size: 14px; }

  /* sheet content primitives */
  html.skin-button .ba-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; }
  html.skin-button .ba-card + .ba-card { margin-top: 10px; }
  html.skin-button .ba-card-title { font-family: Outfit, sans-serif; font-weight: 600; font-size: 16px; }
  html.skin-button .ba-card-sub { font-size: 13px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
  html.skin-button .ba-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; }
  html.skin-button .ba-row + .ba-row { margin-top: 8px; }
  html.skin-button .ba-row-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(232,90,58,.12); color: var(--brand); flex: 0 0 auto; }
  html.skin-button .ba-row-ico svg { width: 19px; height: 19px; }
  html.skin-button .ba-row-t { font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; }
  html.skin-button .ba-row-s { font-size: 13px; color: var(--ink-dim); margin-top: 1px; }
  html.skin-button .ba-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--brand); color: #fff; border: 0; border-radius: 999px; padding: 15px; font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; margin-top: 14px; }
  html.skin-button .ba-cta.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); }
  html.skin-button .ba-cta svg { width: 18px; height: 18px; }

  /* ── Sheet styling OUTSIDE the app skin (Glenn, 2026-08-09) ──────────────
     Every rule above is scoped `html.skin-button`. The public website view is
     NOT in that skin, so on a business page the sheet rendered with NO styling
     at all: no fixed position, no backdrop, no z-index. It simply flowed into
     the document, which is the block of stray text Glenn kept seeing pinned at
     the bottom of business pages — and why the buttons in it looked dead.
     Previous attempts went at the JavaScript; the JS was always fine.
     These are unscoped copies at LOWER specificity, so the in-app rules still
     win wherever the skin is applied and nothing changes inside Telegram.
     Colour vars that only exist under .skin-button carry literal fallbacks. */
  .ba-sheet { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; padding-bottom: env(safe-area-inset-bottom); }
  .ba-sheet.open { opacity: 1; pointer-events: auto; }
  .ba-sheet-backdrop { position: absolute; inset: 0; background: rgba(10,8,6,.5); }
  .ba-sheet-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 84px); background: var(--cream, #fff); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(10,8,6,.28); }
  .ba-sheet.open .ba-sheet-card { transform: translateY(0); }
  .ba-sheet-handle-row { display: flex; padding: 10px 16px 2px; }
  .ba-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-muted, #b3aa9c); opacity: .4; margin: 0 auto; }
  .ba-sheet-close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper, #f4eede); color: var(--ink-dim, #6b6156); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
  .ba-sheet-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; max-width: 100%; padding: 6px 20px calc(28px + env(safe-area-inset-bottom)); scrollbar-width: none; }
  .ba-sheet-scroll > * { max-width: 100%; box-sizing: border-box; }
  .ba-sheet-scroll::-webkit-scrollbar { display: none; }
  .ba-sheet-title { font-family: Outfit, -apple-system, system-ui, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
  .ba-sheet-one { font-size: 14px; color: var(--ink-dim, #6b6156); margin-top: 5px; }
  .ba-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--brand, #c25a3f); color: #fff; border: 0; border-radius: 999px; padding: 15px; font-family: Outfit, -apple-system, system-ui, sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; margin-top: 14px; }
  .ba-cta svg { width: 18px; height: 18px; }
  .ba-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--paper, #f4eede); border: 1px solid var(--rule, #e5e0d3); border-radius: 16px; }
  .ba-row + .ba-row { margin-top: 8px; }
  .ba-row-t { font-family: Outfit, -apple-system, system-ui, sans-serif; font-weight: 600; font-size: 15px; }
  .ba-row-s { font-size: 13px; color: var(--ink-dim, #6b6156); margin-top: 1px; }
  .ba-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand, #c25a3f); display: block; margin-bottom: 8px; font-weight: 600; }
  html.skin-button .ba-prose p { font-size: 15px; line-height: 1.65; color: var(--ink-dim); margin-bottom: 14px; }
  html.skin-button .ba-prose a { color: var(--brand); }
  html.skin-button .ba-fine { font-size: 12px; color: var(--ink-muted); margin-top: 16px; line-height: 1.45; }

  /* loyalty stamp card */
  /* Flex-wrap centred: full rows sit evenly like a grid; only a partial LAST row
     (odd remainder) drops and CENTRES. The cell basis subtracts a FULL --per-row
     gaps'-worth of slack (not per-row-1), so exactly --per-row fit per row with
     headroom — no sub-pixel over-fill wrapping (that was the old 6/4 bug). */
  html.skin-button .ba-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; margin: 14px 0 4px; }
  html.skin-button .ba-stamps .ba-stamp { flex: 0 0 calc((100% - var(--per-row, 5) * 10px) / var(--per-row, 5)); }
  /* Visit programme = a PROGRESS BAR, not a punch card. Visits can run to 50/100
     (milestone-shaped, not tactile), so a grid would wrap ugly — a bar scales to
     any threshold and reads as "you're getting there". */
  html.skin-button .ba-prog { padding: 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; margin: 14px 0 4px; }
  html.skin-button .ba-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  html.skin-button .ba-prog-count { font-family: Outfit, sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); }
  html.skin-button .ba-prog-count b { color: var(--brand); }
  html.skin-button .ba-prog-word { font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
  html.skin-button .ba-prog-track { height: 14px; border-radius: 999px; background: var(--rule); overflow: hidden; }
  html.skin-button .ba-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #f0693f); width: 0; transition: width .6s cubic-bezier(.3,1,.4,1); }
  html.skin-button .ba-prog.reached .ba-prog-fill { background: linear-gradient(90deg, #1f9d68, #29c07f); }
  html.skin-button .ba-prog.just .ba-prog-track { animation: baProgPulse 30s ease-out forwards; }
  @keyframes baProgPulse { 0% { box-shadow: 0 0 0 0 rgba(232,90,58,.5); } 12% { box-shadow: 0 0 0 6px rgba(232,90,58,0); } 100% { box-shadow: 0 0 0 0 rgba(232,90,58,0); } }
  @media (prefers-reduced-motion: reduce) { html.skin-button .ba-prog-fill { transition: none; } html.skin-button .ba-prog.just .ba-prog-track { animation: none; } }
  html.skin-button .ba-stamp { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 18px; }
  html.skin-button .ba-stamp.on { color: #fff;
    /* Glossy depth (2026-08-14) — matches the chat-card artwork pass: lighter
       crown, darker base, soft drop + inner highlight. Falls back to the flat
       brand fill on engines without color-mix. */
    background: var(--brand);
    background: radial-gradient(circle at 35% 28%,
      color-mix(in srgb, var(--brand), #fff 28%),
      var(--brand) 55%,
      color-mix(in srgb, var(--brand), #000 22%));
    box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.30); }
  html.skin-button .ba-stamp.off { border: 1.5px dashed var(--rule); color: var(--ink-muted); }
  /* referral bonus stamp — terracotta, so it reads apart from a bought stamp */
  html.skin-button .ba-stamp.bonus.on { color: #fff;
    background: #c65d3b;
    background: radial-gradient(circle at 35% 28%, #dd7f5e, #c65d3b 55%, #a34527);
    box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.30); }
  /* Milestone (gold) + reward (green): an outline circle with a solid coloured
     star inside (centred SVG) — always the goal badge, matching the key below. */
  html.skin-button .ba-stamp.starbadge.ms { border: 2px solid #e0a012; color: #e0a012; }
  html.skin-button .ba-stamp.starbadge.reward { border: 2px solid #1f9d68; color: #1f9d68; }
  html.skin-button .ba-stamp.starbadge svg { width: 58%; height: 58%; display: block; }
  html.skin-button .ba-stamp.starbadge .cup-fill { fill: currentColor; }

  /* completed-card trophies — a shelf, not another stamp grid. Deliberately
     smaller and squarer than a stamp so it doesn't read as "more to collect". */
  html.skin-button .ba-trophy-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  html.skin-button .ba-trophy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); }
  html.skin-button .ba-trophy svg { width: 22px; height: 22px; display: block; }
  html.skin-button .ba-trophy span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .04em; line-height: 1; }
  html.skin-button .ba-trophy.on { border-color: #1f9d68; color: #1f9d68; background: rgba(31,157,104,.07); }
  html.skin-button .ba-trophy.on .cup-fill { fill: currentColor; }
  html.skin-button .ba-trophy.off { color: var(--ink-muted); }
  html.skin-button .ba-trophy.off .cup-fill { fill: none; stroke: currentColor; stroke-width: 1.3; }
  html.skin-button .ba-trophy-count { margin-top: 9px; font-size: 12.5px; color: var(--ink-dim); text-align: center; }
  html.skin-button .ba-trophy-count b { color: var(--ink); font-family: Outfit, sans-serif; font-weight: 800; font-size: 15px; }
  /* Cup stamps (approved 2026-06-25 design): the stamp IS a drink cup, not a
     circle. Same state colours as the tick version — brand=earned, gold=milestone,
     terracotta=bonus, muted outline=not yet. The reward slot keeps the green FREE. */
  html.skin-button .ba-stamp.cup { background: none !important; border: none !important; box-shadow: none !important; padding: 2px; }
  html.skin-button .ba-stamp.cup svg { width: 100%; height: 100%; display: block; overflow: visible; }
  html.skin-button .ba-stamp.cup .cup-fill { fill: currentColor; stroke: none; }
  html.skin-button .ba-stamp.cup .cup-straw { stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; }
  html.skin-button .ba-stamp.cup.on { color: var(--brand); }
  html.skin-button .ba-stamp.cup.off { color: var(--rule); }
  html.skin-button .ba-stamp.cup.off .cup-fill { fill: none; stroke: currentColor; stroke-width: 1.3; }
  html.skin-button .ba-stamp.cup.ms.on { color: #e0a012; }
  html.skin-button .ba-stamp.cup.bonus.on { color: #c65d3b; }
  /* "+1 just now" flash on the stamp the current scan just added. */
  @keyframes baJustPulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,104,.55); } 70% { box-shadow: 0 0 0 11px rgba(31,157,104,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,104,0); } }
  @keyframes baJustFade { 0%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } }
  html.skin-button .ba-stamp.just { position: relative; border-radius: 50%; animation: baJustPulse 1.3s ease-out 4; }
  html.skin-button .ba-stamp.just::after { content: '+1'; position: absolute; top: -8px; right: -6px; background: #1f9d68; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; box-shadow: 0 1px 5px rgba(0,0,0,.3); animation: baJustFade 30s ease-out forwards; pointer-events: none; }
  /* Reward earned: the final slot turns a solid green coin with 🎉, gently pulsing,
     until it's claimed — glanceable for staff. */
  @keyframes baRewardFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(31,157,104,.55); } 50% { box-shadow: 0 0 0 8px rgba(31,157,104,0); } }
  html.skin-button .ba-stamp.reward-done { background: #1f9d68; color: #fff; font-size: 21px; border: none; animation: baRewardFlash 1.5s ease-in-out infinite; }
  /* Share-with-a-mate: green pulsing CTA that appears right after a scan stamp. */
  @keyframes baSharePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,157,104,.5); } 50% { box-shadow: 0 0 0 7px rgba(31,157,104,0); } }
  /* Thin standout pill, ALWAYS visible (points them to share any time), sits
     right under the card. Flashes on a fresh purchase stamp to catch the eye. */
  html.skin-button .ba-share-pulse { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; max-width: 100%; margin: 10px auto 2px; padding: 9px 20px; border: none; border-radius: 999px; background: linear-gradient(135deg, #1f9d68, #12b76a); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(18,183,106,.35); }
  html.skin-button .ba-share-pulse svg { width: 17px; height: 17px; flex-shrink: 0; }
  html.skin-button .ba-share-pulse.flash { animation: baShareFlash 1.5s ease-in-out 3; }
  @keyframes baShareFlash { 0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(18,183,106,.35); } 50% { transform: scale(1.08); box-shadow: 0 8px 26px rgba(18,183,106,.7); } }
  html.skin-button .ba-share-pulse.popin { animation: baSharePopIn .5s cubic-bezier(.2,1.3,.4,1) forwards, baShareNudge 2.2s ease-in-out 1s 2; }
  @keyframes baShareNudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  @keyframes baSharePopIn { 0% { transform: scale(.8) translateY(10px); opacity: 0; } 60% { transform: scale(1.06) translateY(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { html.skin-button .ba-stamp.just, html.skin-button .ba-stamp.reward-done { animation: none; } html.skin-button .ba-share-pulse.popin { animation: none; transform: scale(1); opacity: 1; } html.skin-button .ba-stamp.just::after { animation: none; } }
  html.skin-button .ba-leg { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #4a4236; font-weight: 600; margin: 5px 0; justify-content: center; }
  html.skin-button .ba-leg-star { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; line-height: 0; }
  html.skin-button .ba-leg-star svg { width: 100%; height: 100%; }
  html.skin-button .ba-leg-star.gold { color: #e0a012; }
  html.skin-button .ba-leg-star.green { color: #1f9d68; }
  html.skin-button .ba-leg-star.terra { color: #c65d3b; }
  html.skin-button .ba-leg-star .cup-fill { fill: currentColor; }
  html.skin-button .ba-bonus-note { font-size: 12px; color: #b07d10; font-weight: 600; margin: 8px 0 0; text-align: center; }
  html.skin-button .ba-earn { display: flex; flex-wrap: wrap; gap: 8px; }
  html.skin-button .ba-earn-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 9px 14px; font-size: 13px; }

  /* spin wheel */
  html.skin-button .ba-wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0; }
  /* The wheel is sized by the screen's HEIGHT as well as its width (24 Aug).
     Sized by width alone it was always 300px, so on a phone under ~760px of
     visible height the Spin button was pushed below the fold — half of it hid
     behind the tab bar and a press on the visible sliver missed. 38vh leaves
     the wheel untouched at 300px on a normal phone and only shrinks it on a
     short screen, where a slightly smaller wheel beats an unpressable button. */
  html.skin-button .ba-wheel { width: min(86vw, 300px, 38vh); height: min(86vw, 300px, 38vh); }
  html.skin-button .ba-wheel-rot { transform-origin: 112px 112px; transition: transform 3.8s cubic-bezier(.16,.84,.28,1); }
  html.skin-button .ba-wheel-res { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); text-align: center; }

  /* leaderboard */
  html.skin-button .ba-lead-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
  html.skin-button .ba-lead-row + .ba-lead-row { margin-top: 8px; }
  html.skin-button .ba-lead-rank { font-family: Outfit, sans-serif; font-weight: 700; font-size: 16px; width: 26px; color: var(--brand); }
  html.skin-button .ba-lead-name { flex: 1; font-weight: 500; font-size: 14px; }
  html.skin-button .ba-lead-pts { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-dim); }
  html.skin-button .ba-lead-row.me { background: rgba(232,90,58,.1); border-color: rgba(232,90,58,.3); }

  /* QR block */
  html.skin-button .ba-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; }
  html.skin-button .ba-qr-code { width: 196px; height: 196px; background: #fff; border-radius: 14px; padding: 12px; display: grid; place-items: center; }
  html.skin-button .ba-qr-code svg, html.skin-button .ba-qr-code img, html.skin-button .ba-qr-code canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
  html.skin-button .ba-qr-cap { font-size: 13px; color: var(--ink-dim); text-align: center; line-height: 1.4; }

  /* hours / map / gallery / menu inside sheets */
  html.skin-button .ba-hours { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
  html.skin-button .ba-hours-row { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--rule); }
  html.skin-button .ba-hours-row:last-child { border-bottom: 0; }
  html.skin-button .ba-hours-row.today { background: var(--paper-shade); font-weight: 600; }
  html.skin-button .ba-map { width: 100%; height: 220px; border: 0; border-radius: 16px; margin-top: 6px; display: block; }
  html.skin-button .ba-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.skin-button .ba-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
  html.skin-button .ba-menu-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
  html.skin-button .ba-menu-tabs::-webkit-scrollbar { display: none; }
  html.skin-button .ba-menu-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); font: inherit; font-size: 13px; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
  html.skin-button .ba-menu-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
  html.skin-button .ba-menu-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  html.skin-button .ba-menu-item:last-child { border-bottom: 0; }
  html.skin-button .ba-menu-item-body { flex: 1; min-width: 0; }
  html.skin-button .ba-menu-item-name { font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; }
  html.skin-button .ba-menu-item-desc { font-size: 13px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }
  html.skin-button .ba-menu-item-price { font-weight: 600; color: var(--brand); flex: 0 0 auto; }

  /* chat */
  html.skin-button .ba-chat-log { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
  html.skin-button .ba-chat-msg { max-width: 82%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
  html.skin-button .ba-chat-msg.bot { background: var(--paper); align-self: flex-start; border-bottom-left-radius: 5px; }
  html.skin-button .ba-chat-msg.me { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
  html.skin-button .ba-chat-form { display: flex; gap: 8px; padding-top: 10px; }
  html.skin-button .ba-chat-input { flex: 1; border: 1px solid var(--rule); border-radius: 999px; padding: 12px 16px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
  html.skin-button .ba-chat-send { width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
  html.skin-button .ba-chat-send svg { width: 20px; height: 20px; }

  /* account */
  html.skin-button .ba-acct-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 18px; }
  html.skin-button .ba-acct-av { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
  html.skin-button .ba-acct-av svg { width: 30px; height: 30px; }
  html.skin-button .ba-acct-name { font-family: Outfit, sans-serif; font-weight: 700; font-size: 18px; }
  html.skin-button .ba-acct-sub { font-size: 13px; color: var(--ink-dim); }

  /* inbox */
  html.skin-button .ba-inbox-row { display: flex; gap: 12px; padding: 15px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; }
  html.skin-button .ba-inbox-row + .ba-inbox-row { margin-top: 8px; }
  html.skin-button .ba-inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); margin-top: 6px; flex: 0 0 auto; }
  html.skin-button .ba-inbox-t { font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; }
  html.skin-button .ba-inbox-s { font-size: 13px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
  html.skin-button .ba-inbox-dot { display: none; }
  html.skin-button .ba-inbox-row.unread .ba-inbox-dot { display: block; background: #2fae82; }
  html.skin-button .ba-inbox-row.unread .ba-inbox-t { font-weight: 800; }
  html.skin-button .ba-inbox-row { cursor: pointer; }

  /* ── On-page content sections below the tile grid (match the real app body) ── */
  html.skin-button .ba-content { padding: 0 16px; }
  html.skin-button .ba-pcard { background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 18px; }
  html.skin-button .ba-pcard + .ba-pcard { margin-top: 12px; }
  html.skin-button .ba-pcard-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
  html.skin-button .ba-pcard-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.12; letter-spacing: -.015em; margin-top: 8px; }
  html.skin-button .ba-pcard-text { font-size: 14px; color: var(--ink-dim); line-height: 1.5; margin-top: 8px; }
  html.skin-button .ba-pcard-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
  /* signature / featured strip */
  html.skin-button .ba-sig { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
  html.skin-button .ba-sig::-webkit-scrollbar { display: none; }
  html.skin-button .ba-sig-card { flex: 0 0 200px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
  html.skin-button .ba-sig-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--paper-shade); }
  html.skin-button .ba-sig-body { padding: 10px 12px 12px; }
  html.skin-button .ba-sig-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
  html.skin-button .ba-sig-name { font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.25; }
  html.skin-button .ba-sig-desc { font-size: 12px; color: var(--ink-dim); margin-top: 3px; line-height: 1.35; }
  /* four small bordered icon tiles (book / walk-in / find us …) */
  html.skin-button .ba-smalltiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 16px; }
  html.skin-button .ba-smalltile { display: flex; flex-direction: column; gap: 5px; padding: 13px 13px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 86px; justify-content: flex-start; text-decoration: none; transition: background .15s; }
  html.skin-button .ba-smalltile:active { background: var(--paper-shade); }
  html.skin-button .ba-smalltile-ico { color: var(--brand); }
  html.skin-button .ba-smalltile-ico svg { width: 24px; height: 24px; }
  html.skin-button .ba-smalltile-label { font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--ink); margin-top: auto; }
  html.skin-button .ba-smalltile-sub { font: 500 9.5px/1.3 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
  html.skin-button .ba-smalltile-primary { background: linear-gradient(135deg, rgba(232,90,58,.16), rgba(79,212,160,.12)); border-color: var(--brand); }
  html.skin-button .ba-smalltile-primary .ba-smalltile-label { color: var(--brand); }
  /* "Explore Open Locally" — web look-alike only; sells the wider app. */
  /* Sits high on the page (right under the description) because it's the only
     thing selling the WIDER app to a cold scanner — bigger, with the brand pin,
     so it reads as Open Locally rather than another button for this one shop. */
  html.skin-button .ba-explore-ol { display: flex; align-items: center; gap: 14px; width: calc(100% - 32px); margin: 12px 16px 4px; padding: 18px 18px; border: none; border-radius: 18px; background: linear-gradient(135deg, #0b1220, #17324a); color: #fff; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 6px 20px rgba(10,18,32,.28); }
  html.skin-button .ba-explore-ol-mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: rgba(90,214,165,.13); display: flex; align-items: center; justify-content: center; }
  html.skin-button .ba-explore-ol-mark svg { width: 25px; height: 25px; display: block; }
  html.skin-button .ba-explore-ol-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  html.skin-button .ba-explore-ol-t { font-weight: 800; font-size: 16.5px; letter-spacing: -.2px; }
  html.skin-button .ba-explore-ol-s { font-size: 13px; color: #b9c6d4; line-height: 1.4; }
  html.skin-button .ba-explore-ol-arrow { flex: 0 0 auto; color: #5ad6a5; font-size: 19px; font-weight: 700; }
  html.skin-button .ba-explore-hero { background: linear-gradient(135deg, #0b1220, #17324a); color: #fff; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
  html.skin-button .ba-explore-hero-t { font-weight: 800; font-size: 17px; line-height: 1.25; }
  html.skin-button .ba-explore-hero-s { font-size: 13px; color: #c3cfdb; margin-top: 5px; line-height: 1.4; }

  /* ── Accessibility + touch-target polish (no visual resize) ──
     Expand tap areas to >=44px via invisible ::before overlays / insets so the
     visible boxes keep the existing cream look but hit comfortably on mobile. */
  :focus-visible { outline: 2px solid var(--brand, #E85A3A); outline-offset: 2px; }
  html.skin-button a.ba-pill-info { position: relative; }
  html.skin-button a.ba-pill-info::before { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }   /* 30px + 14px = 44px */
  html.skin-button .ba-sheet-close { display: flex; align-items: center; justify-content: center; }
  html.skin-button .ba-sheet-close::before { content: ''; position: absolute; inset: -5px; }   /* 34px + 10px = 44px */
  /* Round mini close (✕) / back (‹) buttons inside the dynamically-built
     queue + booking sheets — same trick, no visible size change. */
  html.skin-button .ba-mini-x { position: relative; }
  html.skin-button .ba-mini-x::before { content: ''; position: absolute; inset: -8px; }   /* 28px + 16px = 44px */

  /* ── Loading skeleton (button skin only) — hero block + 6 rounded tiles ── */
  html.skin-button .ba-skel { padding: 10px 14px 0; }
  html.skin-button .ba-skel-hero { height: 172px; border-radius: 22px; margin: 0 0 14px; }
  html.skin-button .ba-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 2px; }
  html.skin-button .ba-skel-tile { height: 108px; border-radius: 22px; }
  html.skin-button .ba-skel-box { background: linear-gradient(100deg, var(--paper) 30%, var(--paper-shade) 50%, var(--paper) 70%); background-size: 200% 100%; animation: baShimmer 1.4s ease-in-out infinite; }
  @keyframes baShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { html.skin-button .ba-skel-box { animation: none; } }

  /* ── Friendly error card (button skin) — replaces bare serif dead-ends ── */
  html.skin-button .ba-errcard { max-width: 340px; margin: 64px auto; padding: 28px 24px; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; font-family: Inter, -apple-system, system-ui, sans-serif; color: var(--ink); }
  html.skin-button .ba-errcard-ico { font-size: 40px; line-height: 1; }
  html.skin-button .ba-errcard-title { font-family: Outfit, sans-serif; font-weight: 700; font-size: 20px; margin-top: 12px; }
  html.skin-button .ba-errcard-sub { font-size: 14px; color: var(--ink-dim); margin-top: 6px; line-height: 1.5; }
  html.skin-button .ba-errcard-link { display: inline-block; margin-top: 18px; padding: 11px 20px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }