/* ============================================================
   JLM Booking — Pass 2 design
   Two fully designed themes driven by CSS custom properties:
   - Light: warm paper + deep leaf green (default / system light)
   - Dark:  deep-forest theme (designed, not an inversion)
   Theme resolution:
   - No data-theme on <html>  -> follows prefers-color-scheme
   - data-theme="light"      -> light, overrides the media query
   - data-theme="dark"       -> dark,  overrides the media query
   The saved choice ("jlm-theme" in localStorage: system|light|dark)
   is applied before first paint by the inline script in index.html.
   Gold (--accent) is decorative only: rules, rings and badges.
   It is never used for body text.
   ============================================================ */

/* ---------- Light theme (tokens) — re-based on Jamie's logo,
   Oct 25, 2026: deep #002C27, leaf deepened for AA #4C7C3E,
   highlight tint #E7F0DC. Mirrors the app's ThemePalette. ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F5EF;
  --surface: #FFFFFF;
  --surface-alt: #E7F0DC;
  --primary: #002C27;
  --action: #4C7C3E;
  --on-action: #FFFFFF;
  --accent: #C29B3C;
  --ink: #14231C;
  --ink-2: #44563C;
  --divider: #D8E2CC;
  --err: #B00020;
  --success: #2E6B30;
  --header-bg: #002C27;
  --header-ink: #FFFFFF;
  --sel: #DCEBD2;
  --shadow: 0 1px 2px rgba(20, 35, 28, 0.05), 0 10px 30px rgba(20, 35, 28, 0.08);
  --shadow-hover: 0 2px 4px rgba(20, 35, 28, 0.07), 0 14px 36px rgba(20, 35, 28, 0.12);
}

/* ---------- Dark theme (tokens) — the logo's layered greens ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #03120E;
  --surface: #073428;
  --surface-alt: #0C4634;
  --primary: #B6D7A5;
  --action: #5B944E;
  --on-action: #02120E;
  --accent: #D9B45C;
  --ink: #F2F7EC;
  --ink-2: #B9C9A8;
  --divider: #1E4A3A;
  --err: #DE7A8D;
  --success: #8FCB8F;
  --header-bg: #002C27;
  --header-ink: #F2F7EC;
  --sel: #0E4A35;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);
}

/* System dark — only when no explicit theme is set, so an explicit
   data-theme="light" always overrides the media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #03120E;
    --surface: #073428;
    --surface-alt: #0C4634;
    --primary: #B6D7A5;
    --action: #5B944E;
    --on-action: #02120E;
    --accent: #D9B45C;
    --ink: #F2F7EC;
    --ink-2: #B9C9A8;
    --divider: #1E4A3A;
    --err: #DE7A8D;
    --success: #8FCB8F;
    --header-bg: #002C27;
    --header-ink: #F2F7EC;
    --sel: #0E4A35;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

:root {
  --font-display: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  transition: background-color 0.25s ease, color 0.25s ease;
}

::selection { background: var(--surface-alt); color: var(--ink); }

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
}

h2 {
  font-size: 24px;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

a { color: var(--primary); }
a:hover { color: var(--action); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Header ---------- */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 24px 20px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow);
}

/* Platform mark floats on the brand colour — NO square/background
   box. Small in the header (0.3.6): the header is the JLB platform
   layer only; the business's own branding lives in .biz-banner. */
header .logo {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  flex: none;
}

header h1 {
  margin: 0;
  font-size: 26px;
  color: var(--header-ink);
}

header .tag {
  margin: 5px 0 0;
  font-size: 14.5px;
  color: var(--header-ink);
  opacity: 0.88;
  max-width: 46ch;
}

/* Theme toggle — pill sitting on the header in both themes */
.theme-toggle {
  margin-left: auto;
  align-self: flex-start;
  flex: none;
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:active { transform: translateY(1px); }

/* ---------- Layout ---------- */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}

section { margin-bottom: 8px; }

footer {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 20px;
  font-size: 14px;
  color: var(--ink-2);
  border-top: 1px solid var(--divider);
}
footer a { color: var(--primary); }

/* ---------- Progress ---------- */
#progressWrap {
  position: relative;
  margin: 4px 0 14px;
}
/* Track — a full-width rail behind the fill */
#progressWrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  border-radius: 999px;
}
#progressBar {
  position: relative;
  z-index: 1;
  height: 8px;
  background: var(--action);
  border-radius: 999px;
  width: 5%;
  transition: width 0.3s ease;
}
#stepLabel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--primary);
  margin: 14px 0 6px;
}

#error {
  color: var(--err);
  /* Reserve two lines (audit fix, Oct 27, 2026): most errors wrap to
     two lines at phone width — reserving one line made the page grow
     by a line every time an error appeared. */
  min-height: 2.55em;
  font-weight: 600;
  margin: 4px 0 10px;
}

/* ---------- Buttons ---------- */
button {
  background: var(--action);
  color: var(--on-action);
  border: 1px solid var(--action);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin: 6px 6px 6px 0;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.1s ease;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }

/* Secondary / unselected picker buttons */
button.ghost {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow);
}
button.ghost:hover { border-color: var(--action); filter: none; }

/* Day + time pickers */
button.day,
button.slot {
  border-radius: 999px;
  padding: 10px 18px;
}

/* Selected state — filled, unmistakable, not just an outline */
button.slot[aria-pressed="true"],
button.day[aria-pressed="true"] {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
  box-shadow: var(--shadow);
}

/* Group headcount stepper + promo row + labelled waitlist fields
   (audit round 2): real 48px touch targets, same pill language. */
.spotsstep { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.spotsstep button { min-width: 48px; min-height: 48px; padding: 8px 14px; font-size: 20px; }
.spotsstep button:disabled { opacity: 0.4; cursor: default; }
.spotscount { font-weight: 700; }
.spotslabel { font-weight: 600; }
.promorow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.promorow input { flex: 1 1 160px; min-height: 48px; }
.promorow button { min-height: 48px; }
label.wlfield { display: block; margin: 8px 0; }
label.wlfield span { display: block; font-weight: 600; margin-bottom: 4px; }
label.wlfield input, label.wlfield select { width: 100%; min-height: 48px; }

/* ---------- Forms ---------- */
fieldset {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 14px;
  margin: 14px 0;
}
legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--primary);
  padding: 2px 10px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-bottom: 2px solid var(--accent);
  border-radius: 999px;
}

label {
  display: block;
  margin: 10px 0;
  font-size: 15px;
  color: var(--ink);
}
label.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: 14.5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  margin-top: 5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover { border-color: var(--action); }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--action);
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 2px;
}
input[type="range"] { accent-color: var(--action); margin-top: 5px; }

/* ---------- Booking-page banner (owner setting, Oct 28, 2026):
   the business's own urgent line at the VERY TOP of the page,
   above the launch ribbon. It must be unmissable: full-width band,
   bold large text, dark words on a high-contrast warm amber —
   readable at phone width without zooming. Rendered only when the
   company profile carries the string; [hidden] otherwise, so an
   absent banner leaves no band and no layout placeholder. */
.page-banner {
  background: #FFB020;
  color: #2B1500;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  padding: 14px 16px;
  border-bottom: 3px solid #B45309;
  overflow-wrap: break-word;
}
.page-banner[hidden] { display: none; }

/* ---------- Launch ribbon (Jamie, Oct 27, 2026): slim coming-soon
   strip across the very top, in the site's green. Visual only.
   On/off = window.JLB_RIBBON in index.html's page config. */
.launch-ribbon {
  background: var(--action);
  color: var(--on-action);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 7px 14px;
}
.launch-ribbon[hidden] { display: none; }

/* ---------- Business banner: the tenant's brand, top of the page
   (0.3.6) — profile picture large, business name, tagline ---------- */
.biz-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin: 14px 0 6px;
}
.biz-banner .biz-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex: none;
  /* Fix 6 (Oct 26, 2026): tenant logos render on the surface
     colour inside the shared 14px radius — never sharp corners,
     never a white box on the dark UI. */
  border-radius: var(--radius);
  background: var(--surface);
}
.biz-banner .biz-name {
  margin: 0;
  font-size: 22px;
}
.biz-banner .tag {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* Step 1 (0.3.6): live search + category headings over the cards */
.svcsearch {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 4px;
}
.catch {
  margin: 20px 0 4px;
  font-size: 17px;
}

/* ---------- Cards: services, bookings, quote ---------- */
.svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 10px 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.svc:hover { box-shadow: var(--shadow-hover); border-color: var(--action); }
.svc small {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.45;
}

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin: 12px 0;
  white-space: pre-line;
}

.quote {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin: 14px 0;
  white-space: pre-line;
  line-height: 1.65;
}

.price {
  font-weight: 700;
  white-space: nowrap;
  color: var(--primary);
  font-size: 17px;
}

.policy {
  white-space: pre-line;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0;
}

/* ---------- Misc hooks (kept for app.js / index.html) ---------- */
.big {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
}
.fine { font-size: 12.5px; color: var(--ink-2); opacity: 0.85; }

#wlDone { color: var(--success); font-weight: 600; }

#myBookings .card p { margin: 0 0 8px; }

/* Success wording rendered inline by app.js uses no extra hooks;
   error text is handled by #error above. */

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  header { padding: 18px 16px; }
  header h1 { font-size: 22px; }
  header .logo { width: 48px; height: 48px; }
  .theme-toggle { margin-left: 0; }
  main { padding: 18px 14px 4px; }
  .svc { padding: 14px; }
}

/* ============================================================
   0.3.0 — settled flow additions
   ============================================================ */

/* Keep content clear of the fixed bottom bar */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
footer { margin-bottom: 24px; }

/* ---------- 3-step indicator ---------- */
#steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px;
}
.stepdot {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 6px 12px;
}
.stepdot.current {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
.stepdot.done { color: var(--primary); border-color: var(--action); }

/* ---------- Fixed bottom action bar (every step, safe-area aware) ---------- */
#actionBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 2px solid var(--action);
  box-shadow: 0 -6px 24px rgba(28, 36, 23, 0.14);
}
#barSummary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.35;
  overflow: hidden;
  /* Audit fix (Oct 27, 2026): the summary wrapped to a 3rd line as
     add-ons were toggled and the fixed bar GREW under the user's
     finger (measured 106 -> 123 -> 140px across states, overrunning
     the body's 96px bottom padding and covering page content). Two
     lines max, ellipsis beyond — the bar's height is now stable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#barAction { flex: none; margin: 0; }
#barBack { flex: none; margin: 0; }

/* ---------- Home ---------- */
.lede { font-size: 16.5px; color: var(--ink); }
.bigbook {
  display: block;
  width: 100%;
  font-size: 19px;
  padding: 16px 22px;
  margin: 14px 0 6px;
}
button.svcbtn {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 10px 0;
  font-weight: 600;
}
button.svcbtn:hover { border-color: var(--action); box-shadow: var(--shadow-hover); filter: none; }
button.svcbtn small {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.45;
}
button.small { padding: 7px 14px; font-size: 14px; margin: 0; }

/* ---------- Remembered pick ---------- */
.yourpick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--action);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 10px 0 14px;
  font-weight: 700;
  color: var(--primary);
}
/* Audit fix (Oct 27, 2026): the "Pick your massage…" hint line and
   the your-pick banner swap in the same slot; the banner measured
   18px taller, so every pick/unpick shoved the whole list by 18px.
   Same box, same minimum height — the swap is now shift-free. */
.pickhint {
  display: flex;
  align-items: center;
  min-height: 72px;
  box-sizing: border-box;
  margin: 10px 0 14px;
  padding: 12px 2px;
}
.yourpick { min-height: 72px; box-sizing: border-box; }
.yourpick-line { font-weight: 600; color: var(--primary); }

/* ---------- Calendar (colour + words, never colour alone) ---------- */
.legend { font-size: 14px; color: var(--ink-2); margin: 10px 0; }
.legend .dot, .daycell::before {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  vertical-align: -1px;
}
.legend .dot.open { background: #2E7D32; }
.legend .dot.few { background: #D9A21B; }
.legend .dot.full { background: #B00020; }
.calgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 10px 0 16px;
}
button.daycell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 2px 8px;
  margin: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--divider);
  box-shadow: none;
  font-size: 12.5px;
}
button.daycell .dlabel { font-weight: 700; line-height: 1.25; text-align: center; }
button.daycell .dword { font-size: 11.5px; color: var(--ink-2); }
button.daycell.open::before { content: ""; background: #2E7D32; }
button.daycell.few::before { content: ""; background: #D9A21B; }
button.daycell.full::before { content: ""; background: #B00020; }
button.daycell.closed::before { content: ""; background: #9AA39B; }
button.daycell.full, button.daycell.closed { opacity: 0.75; }
button.daycell[aria-pressed="true"] {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
button.daycell[aria-pressed="true"] .dword { color: var(--on-action); }
.slots { display: flex; flex-wrap: wrap; gap: 4px; }
.waitlist-join input { margin-bottom: 8px; }

/* ---------- Auth (password OR code) ---------- */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.auth-tabs button.on {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
.authbox input { margin-bottom: 8px; }
.addr-confirm { border-color: var(--action); }

/* ---------- Pay-ahead button (only rendered when payAhead.url exists) ---------- */
a.paybtn {
  display: inline-block;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 20px;
  margin: 6px 6px 6px 0;
}
a.paybtn:hover { filter: brightness(1.08); color: var(--on-action); }

@media (max-width: 560px) {
  .calgrid { grid-template-columns: repeat(4, 1fr); }
  #barSummary { font-size: 12.5px; }
  header .logo { width: 48px; height: 48px; }
}

/* 0.3.4 referral share */
.sharelink { word-break: break-all; font-weight: 600; }

/* ============================================================
   Redesign (Oct 25, 2026) — Cojilio's structure, the app's colours
   Jamie's recipe: the Cojilio booking page's LOOK (wide centred
   column, header bar, two-column hero, category menu + service
   rows + summary rail, dark-green footer) rebuilt BETTER in the
   JLB Booking palette — deep #002C27 / surface #073428 / leaf
   #5B944E / highlight #B6D7A5 — with real per-service photos, a
   search box (Cojilio has none) and our clearer cards.
   ============================================================ */

main { max-width: 1120px; }

/* ---------- Header nav (Book / My bookings / account) ---------- */
.topnav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
button.navlink, a.navlink {
  background: transparent;
  color: var(--header-ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  margin: 0;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
button.navlink:hover, a.navlink:hover { border-color: var(--accent); filter: none; }
header .theme-toggle { margin-left: 0; }

/* ---------- Hero (Cojilio two-column, our colours) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
  margin: 18px 0 10px;
}
.hero-text .biz-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex: none;
}
.hero-text h2.biz-name {
  border-bottom: none;
  padding-bottom: 0;
  margin: 10px 0 2px;
  font-size: 34px;
}
.hero-sub { font-weight: 700; color: var(--primary); margin: 2px 0; font-size: 17px; }
.hero-city { margin: 2px 0; color: var(--ink-2); }
.hero-hours { margin: 6px 0; font-weight: 600; color: var(--success); }
.hero .tag { margin: 6px 0 4px; color: var(--ink-2); max-width: 46ch; }
/* Owner-written About (Oct 27, 2026): a short bio paragraph under
   the tagline; the tenant's own words, line breaks kept. */
.hero .biz-about { margin: 4px 0 2px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 52ch; white-space: pre-line; }
.hero-cta { width: auto; margin-top: 12px; }
/* Audit fix (Oct 27, 2026): the img IS the hero box — a fixed 16/10
   aspect reserves its height before any picture loads, so the page
   never grows/shrinks when the picture arrives or rotates. Tenant
   photos (.cover) fill the box — no empty side bars; the badge/logo
   keeps contain so a logo is never cropped. object-position biases
   the photo crop up a little so faces near the top survive it. */
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center 35%;
  background: var(--surface-alt);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: block;
}
.hero-media img.cover { object-fit: cover; }

/* ---------- Step 1: three columns (menu / cards / summary) ---------- */
.booking-layout {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}
.catmenu {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.catmenu-title { margin: 4px 6px 8px; font-size: 16px; border: none; padding: 0; }
button.catbtn {
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  text-align: left;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
button.catbtn:hover { border-color: var(--action); filter: none; }
button.catbtn.on {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
.booking-centre { min-width: 0; }
.booking-centre > .catch:first-of-type { margin-top: 6px; }

/* Summary rail — Cojilio's card with the overlapping badge, but
   live: picked items, taxes-in total, service count. */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0 18px 16px;
  position: sticky;
  top: 14px;
}
.summary-badge {
  display: inline-block;
  transform: translateY(-11px);
  background: var(--header-bg);
  color: #B6D7A5;
  border: 1px solid var(--divider);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.summary-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--primary);
  margin: 0 0 2px;
}
.summary-empty { font-style: italic; color: var(--ink-2); }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  font-size: 14.5px;
}
.summary-total {
  border-top: 1px solid var(--divider);
  padding-top: 10px;
  font-weight: 700;
  color: var(--primary);
  font-size: 16px;
}
.summary-count { margin-top: 12px; }

/* ---------- Service cards with photos ---------- */
div.svccard {
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: default;
}
button.svccard {
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
}
.svc-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
}
.svcphoto {
  width: 76px;
  height: 76px;
  /* Fix 6 (Oct 26, 2026): service photos follow the one corner
     standard — the shared 14px radius token, same as the apps. */
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-alt);
  flex: none;
}
.svcphoto.islogo { object-fit: contain; padding: 6px; }
/* Add-on rows carry the add-on's own photo at the app's row size
   (48dp in the app's pick cards) — smaller than a service card's. */
.addonrow { align-items: center; }
.addonrow .svcphoto { width: 48px; height: 48px; }
.svcbody { flex: 1 1 auto; min-width: 0; display: block; }
.svcname { display: block; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.svcmeta {
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 2px;
  font-weight: 600;
}
button.svccard .svcbody small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svcdesc { padding: 0 16px 14px; }
.svcdesc small { color: var(--ink-2); line-height: 1.45; display: block; }
.svcdesc small.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svcdesc small.clamp.open { display: block; }
button.readmore {
  background: none;
  border: none;
  color: var(--primary);
  text-decoration: underline;
  padding: 4px 0 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
}
button.readmore:hover { filter: none; }
.svc.selected { background: var(--sel); border-color: var(--action); }

/* ---------- Step panels (day/time + details) ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 12px 0;
}
.panel .quote, .panel .policy { box-shadow: none; }
.addr-card {
  border: 1px solid var(--action);
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 14px 0;
}
.addr-card p { margin: 4px 0; }

/* ---------- Footer: full-width deep green, three columns ---------- */
footer {
  max-width: none;
  margin: 40px 0 0;
  padding: 0;
  background: var(--header-bg);
  color: #F2F7EC;
  border-top: 3px solid var(--accent);
}
.foot-cols {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 20px 36px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 26px;
}
footer h3 { color: #B6D7A5; font-size: 18px; margin: 0 0 8px; }
footer p { margin: 5px 0; }
footer a { color: #B6D7A5; }
footer a:hover { color: #FFFFFF; }
footer .fine { color: #B9C9A8; opacity: 1; }

/* ---------- Redesign responsive ---------- */
@media (max-width: 1020px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .catmenu {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
  }
  .catmenu-title { margin: 0 6px 0 2px; flex: none; }
  button.catbtn { white-space: nowrap; flex: none; }
}
@media (max-width: 760px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .summary-card { position: static; }
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .foot-cols { grid-template-columns: 1fr; gap: 18px; }
  .topnav { order: 3; width: 100%; margin-left: 0; }
  .svcphoto { width: 64px; height: 64px; }
}

/* ============================================================
   0.3.10 — Shop + profile assets (gift cards with scannable QR)
   ============================================================ */

/* Home gift-card banner: the shop's front door on the home view */
.giftbanner {
  border: 1px solid var(--accent);
  background: var(--surface-alt);
  white-space: normal;
}
.giftbanner .big { margin: 0 0 4px; }
.giftbanner p { margin: 4px 0; }

/* Promo card picture (Jamie, Oct 27, 2026, 22:56): a real picture
   area across the top of the card — the owner's chosen photo, or
   the bundled default art for the card — never a tiny icon and
   never a bare card. */
.promocard { overflow: hidden; }
.promopic {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 10px;
  background: var(--surface);
}

/* One owned gift card / invoice inside the profile assets box */
.giftcard {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0;
  white-space: normal;
}
.giftcard p { margin: 4px 0; }

/* The scannable redeem code: QR (white quiet zone baked into the
   canvas by qr.js) + the same code as readable text underneath */
.qrwrap { text-align: center; margin: 8px 0 2px; }
.qrwrap canvas {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.giftcode {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin: 6px 0 2px;
  user-select: all;
}

/* UX pass (Oct 26, 2026): the radius token scale (C2) + the B19
   anchor pulse — the My bookings section rings when the footer
   jump lands on it; static outline under reduced motion. */
:root { --radius-card: 14px; --radius-btn: 12px; --radius-field: 10px; }
button, .bigbook { border-radius: var(--radius-btn); }
input, select, textarea { border-radius: var(--radius-field); }
.lookingfor a { font-weight: 600; }
@keyframes jlb-target-pulse {
  0% { outline: 3px solid var(--action); outline-offset: 3px; }
  100% { outline: 3px solid transparent; outline-offset: 3px; }
}
#myBookings:target { animation: jlb-target-pulse 1.2s ease-out 2; border-radius: var(--radius-card); }
@media (prefers-reduced-motion: reduce) {
  #myBookings:target { animation: none; outline: 3px solid var(--action); outline-offset: 3px; }
}
/* jlb-web 2026-10-26-r3 — fix pass: rotating top pictures (crossfade),
   header language switch, "Follow me" row */
.hero-media img { transition: opacity .4s ease; }
.hero-media img.fadeout { opacity: 0; }
.langswitch { display: inline-flex; gap: 4px; align-items: center; }
.langbtn {
  background: transparent; color: inherit; border: 1px solid currentColor;
  border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; opacity: .75;
}
.langbtn.on { opacity: 1; background: var(--accent); border-color: var(--accent); color: #1C2417; }
.socialrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.social-label { font-weight: 700; }
.socialbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 11px;
  border: 1px solid currentColor;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px;
}
.socialbtn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ---------- Audit pass (Oct 27, 2026 — swarm fixes) ---------- */
/* B7/M101-adjacent: the step holds its ground from first paint, and
   view changes land just under the sticky header (M108). */
#step { min-height: 480px; scroll-margin-top: 76px; }
.skel-line { height: 22px; border-radius: 6px; background: var(--surface-alt); margin: 14px 0; }
.skel-line.w50 { width: 50%; }
.skel-card { height: 92px; border-radius: var(--radius-card, 14px); background: var(--surface-alt); margin: 12px 0; animation: skel-pulse 1.4s ease-in-out infinite; }
@keyframes skel-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel-card { animation: none; } }
/* m18: success line — its own colour, reserved height so it never
   shoves the page when it appears. */
#notice { color: var(--success); font-weight: 600; min-height: 1.5em; margin: 6px 0 0; }
/* m56: the bar's money figure, visually distinct from the summary. */
.bartotal { font-weight: 800; }
.bartotal::before { content: ' · '; font-weight: 600; }
/* M107: the language switch holds its width across EN/FR labels. */
.langswitch { min-width: 118px; justify-content: flex-end; }
/* m132/m134/m135: comfortable tap targets. */
button.small { min-height: 44px; }
.langbtn { padding: 6px 12px; min-height: 44px; min-width: 44px; } /* polish-3: 44px touch guideline */
.socialbtn { min-height: 44px; }
/* M99: hero text lines keep their height while the profile lands. */
.biz-name { min-height: 1.15em; }
.hero-city, .hero-hours { min-height: 1.4em; }
/* M55/M63: checkbox rows (policy agreement, waitlist consent). */
.polrow { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.polrow input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
details summary { cursor: pointer; font-weight: 600; margin-top: 8px; }
.noscript-note { background: var(--surface-alt); padding: 12px 16px; border-radius: 10px; font-weight: 600; }