/* /book — editorial matte-charcoal booking flow (no green, no gradients on surfaces) */
body { background: var(--obsidian); }
#app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));
  background: rgba(10, 10, 10, .86); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(212, 175, 55, .25); border-bottom: 1px solid var(--line-soft);
}
.brand { flex: 1; text-align: center; line-height: 1.15; }
.brand strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
.lang { min-width: 44px; min-height: 44px; border-radius: 22px; border: 1px solid var(--line-soft); background: transparent; color: var(--gold); font-weight: 500; letter-spacing: .14em; }
.steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 8px calc(20px + var(--sar)) 6px calc(20px + var(--sal)); }
.steps li { flex: 1; height: 1px; background: var(--line-soft); transition: background .3s; }
.steps li.on { background: var(--gold); }
main { flex: 1; padding: 22px calc(18px + var(--sar)) 150px calc(18px + var(--sal)); }
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 14px 0 8px; }
.lede { color: var(--ivory-dim); margin: 0 0 22px; letter-spacing: .02em; }

/* Step 1 — catalogue */
.tabs { display: flex; gap: 22px; overflow-x: auto; margin: 0 calc(-18px - var(--sar)) 18px calc(-18px - var(--sal)); padding: 0 calc(18px + var(--sar)) 0 calc(18px + var(--sal)); border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; color: var(--ivory-dim); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--gold); }
.eyebrow.sub { display: block; margin: 0 2px 12px; color: var(--ivory-dim); }
.svc { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 16px 14px 16px 18px; transition: border-color .2s, transform .12s; }
.svc.on { border-color: var(--gold); }
.svc.feature { padding: 22px 16px 22px 20px; }
.svc.feature .name { font-size: 21px; }
.svc .body { flex: 1; min-width: 0; }
.svc .name { font-family: var(--serif); font-size: 18px; line-height: 1.25; }
.svc .meta { font-size: 14px; color: var(--ivory-dim); margin-top: 3px; letter-spacing: .03em; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper .n { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.stepper .icon-btn { width: 44px; height: 44px; font-size: 22px; line-height: 1; }
.family { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ivory-dim); margin: 14px 2px 16px; }
.family svg { flex: 0 0 auto; color: var(--gold); margin-top: 2px; }

/* Step 2 — date button, calendar sheet, day periods */
.datebtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 18px; margin-bottom: 22px; text-align: left; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--graphite); }
.datebtn .dv { flex: 1; font-family: var(--serif); font-size: 19px; }
.datebtn .chev { color: var(--gold); }
.lv { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); }
.lv.yellow { background: #E0C068; }
.lv.red { background: var(--bad); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.cal-nav .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.cal-title { font-family: var(--serif); font-weight: 400; font-size: 20px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { margin-bottom: 6px; }
.cal-wd span { text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-dim); }
.cal-day { position: relative; aspect-ratio: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--graphite); font-variant-numeric: tabular-nums; }
.cal-day i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.cal-day.yellow i { background: #E0C068; }
.cal-day.red i { background: var(--bad); }
.cal-day.red { color: var(--ivory-dim); }
.cal-day.off { border-color: transparent; background: none; color: rgba(255, 255, 255, .22); }
.cal-day.sel { border-color: var(--gold); background: var(--graphite-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 16px 0 6px; font-size: 12px; color: var(--ivory-dim); }
.period { margin-bottom: 22px; }
.period-h { font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 2px 12px; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.slot { min-height: 52px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--graphite); font-weight: 400; letter-spacing: .02em; font-variant-numeric: tabular-nums; position: relative; }
.slot.premium { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: #0B0F17; border-color: rgba(212, 175, 55, .45); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .08); }
.slot .vip-badge { font-size: 8px; line-height: 1; letter-spacing: .1em; color: var(--gold2); font-weight: 500; white-space: nowrap; }
.slot.premium[aria-pressed="true"] { background: #0B0F17; color: var(--gold2); border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2); }
.slot[aria-pressed="true"] { background: var(--gold); color: #14110A; border-color: var(--gold); font-weight: 600; }
.legend { margin: 6px 2px 14px; font-size: 13px; color: var(--ivory-dim); }
.legend b { color: var(--gold); font-weight: 500; }
.legend .vip-mark { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #0B0F17; border: 1px solid rgba(212, 175, 55, .45); color: var(--gold2); font-size: 12px; letter-spacing: .08em; }
.rates { margin-top: 4px; }
.rates .rate { padding: 4px 0; font-family: var(--serif); font-size: 17px; }
.rates .rate b { color: var(--gold); font-weight: 500; }
.wait { text-align: left; }
.wait h3 { font-size: 22px; margin-bottom: 4px; }
.wait-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 10px 0 14px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, .35); }
.wait-note { margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .07); font-size: 14px; line-height: 1.5; text-align: left; }
.wait-note ol { margin: 8px 0 0; padding-left: 20px; }
.wait-note li { margin-bottom: 6px; }
.wait-pwa { margin: 6px 0 12px; font-size: 13px; line-height: 1.45; }
.wait .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.skel { height: 52px; border-radius: 12px; background: linear-gradient(100deg, #0F141D 30%, rgba(212,175,55,.14) 50%, #0F141D 70%); background-size: 200% 100%; border: 1px solid rgba(212,175,55,.06); animation: sh 1.4s infinite linear; }
@keyframes sh { to { background-position: -200% 0; } }
/* Reschedule flow: charcoal skeleton with a soft gold pulse, and the protected-appointment note. */
#resched-note { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(212,175,55,.3); background: rgba(212,175,55,.06); color: #E6CF8A; font-size: 13.5px; line-height: 1.5; }
#resched-note ~ * .skel, #resched-note ~ .skel { background: linear-gradient(100deg, #12161e 30%, rgba(212,175,55,.16) 50%, #12161e 70%); background-size: 200% 100%; animation: sh 1.4s infinite linear, goldpulse 1.8s ease-in-out infinite; }
@keyframes goldpulse { 50% { box-shadow: 0 0 18px -4px rgba(212,175,55,.35); } }

/* Step 3 */
.sum { margin-bottom: 18px; }
.sum .when { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin: 6px 0 2px; }
.sum ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); }
.sum li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sum .tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 22px; }
.paymodes { display: grid; gap: 10px; margin: 14px 0 4px; }
.paymodes .eyebrow { margin: 0; }
.paymode { display: block; width: 100%; padding: 14px 16px; text-align: left; }
.paymode small { display: block; margin-top: 4px; }
.paymode.prepay { border-color: var(--gold); }
.paymode.on { box-shadow: 0 0 0 2px var(--gold) inset; }
.paymode .opt-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; letter-spacing: .12em; }
.fine { font-size: 13px; color: var(--ivory-dim); margin: 10px 2px 0; }

/* Dock */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 560px; margin: 0 auto;
  padding: 12px calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal));
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .97) 28%);
}
.dock .sumline { display: flex; justify-content: space-between; font-size: 14px; color: var(--ivory-dim); margin: 0 4px 8px; }
.dock .sumline b { color: var(--ivory); font-weight: 500; }

/* PWA install banner sits above the dock */
.rs-install { bottom: calc(96px + var(--sab)) !important; }

.done { text-align: center; padding: 40px 8px; }
.done .ring { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 30px; }

/* Photo-first catalogue: photo block on top (4:5, soft fade into obsidian), type block below. Nothing overlaps the photo. */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc.svc-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius); background: #0B0F17; }
.svc-card .svc-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.svc-card .svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card .svc-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(11, 15, 23, 0), #0B0F17); pointer-events: none; }
.svc-card .body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 4px 12px 12px; }
.svc-card .name, .svc-card.feature .name { font-family: var(--serif); font-size: 17px; line-height: 1.25; color: #F5F5F7; }
.svc-card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.svc-card .meta { color: #E7E2D6; margin: 0; font-size: 13px; }
.svc-card .btn, .svc-card .stepper { margin-top: auto; }
.svc-card .btn.quiet { width: 100%; }
.svc-card .stepper { width: 100%; justify-content: space-between; }
.svc-card { touch-action: manipulation; cursor: pointer; }
button, .tab, .svc-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:active, .svc-card:active { transform: scale(0.97); transition: transform 100ms ease-out; }
@media (prefers-reduced-motion: reduce) { button:active, .svc-card:active { transform: none; } }

/* ===== HAUTE LUXURY HOMOLOGATION — same palette/architecture as the landing =====
   Obsidian #0B0F17 · Graphite #161B26 · Champagne gold #D4AF37 (surfaces only) · Platinum #F4F7FB · Silver #9CA3AF */
:root {
  --obsidian: #0B0F17; --obsidian-2: #161B26; --graphite: #161B26; --graphite-2: #1D2431;
  --gold: #D4AF37; --gold2: #D4AF37; --gold-soft: #E6C96A;
  --ivory: #F4F7FB; --ivory-dim: #9CA3AF;
  --line: rgba(212, 175, 55, .2); --line-soft: rgba(212, 175, 55, .2);
  --glass: rgba(22, 27, 38, .9); --bar-bg: rgba(11, 15, 23, .88); --field: rgba(244, 247, 251, .04); --sheet-bg: #161B26;
  --serif: "Cormorant Garamond", ui-serif, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
html, body, #app { background: #0B0F17; color: #F4F7FB; font-family: var(--sans); }
h1, h2, h3, .brand strong, .svc .name, .datebtn .dv, .cal-title, .sum .when, .sum .tot, .rates .rate, .wait h3, .svc-card .name { font-family: var(--serif); color: #F4F7FB; font-weight: 600; }
h1 { font-size: 36px; letter-spacing: -.005em; }
.top { background: rgba(11, 15, 23, .88); border-top: 1px solid rgba(212, 175, 55, .2); border-bottom: 1px solid rgba(212, 175, 55, .2); }
.dock { background: linear-gradient(180deg, rgba(11, 15, 23, 0), rgba(11, 15, 23, .97) 28%); }
.eyebrow, .period-h, .legend b, .rates .rate b, .gold, .badge.gold, .lang, .datebtn .chev, .family svg { color: #9CA3AF; }
.lang { border-color: rgba(212, 175, 55, .2); }
.card, .svc, .datebtn, .cal-day, .slot, .sum, .input, .chip {
  background: #161B26; border: 1px solid rgba(212, 175, 55, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -18px rgba(0, 0, 0, .8);
}
.card.gilt { border-color: rgba(212, 175, 55, .35); }
.svc.svc-card { background: #161B26; }
.svc-card .svc-photo::after { background: linear-gradient(180deg, rgba(22, 27, 38, 0), #161B26); }
.svc-card .meta, .svc .meta, .lede, .fine, .legend, .cal-legend, .dock .sumline, .muted { color: #9CA3AF; }
.dock .sumline b { color: #F4F7FB; }
.svc.on { border-color: #D4AF37; box-shadow: 0 0 0 1px rgba(212, 175, 55, .35); }
.tab { color: #9CA3AF; } .tab[aria-selected="true"] { color: #F4F7FB; border-bottom-color: #D4AF37; }
.cal-day.sel { border-color: #D4AF37; background: #1D2431; }
.cal-day.off { background: none; box-shadow: none; border-color: transparent; }
.slot.premium, .legend .vip-mark { background: #0B0F17; border-color: rgba(212, 175, 55, .45); color: #F4F7FB; }
.slot .vip-badge { color: #9CA3AF; }
.slot.premium[aria-pressed="true"] { background: linear-gradient(180deg, #E6C96A, #D4AF37); color: #0B0F17; border-color: #D4AF37; }
.slot.premium[aria-pressed="true"] .vip-badge { color: #0B0F17; }
/* Selected slot + confirm: champagne gold with 3D relief */
.slot[aria-pressed="true"] {
  background: linear-gradient(180deg, #E6C96A 0%, #D4AF37 55%, #B8932A 100%); color: #0B0F17; border-color: #D4AF37; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 6px 16px -4px rgba(212, 175, 55, .45);
}
.btn.primary {
  background: linear-gradient(180deg, #E6C96A 0%, #D4AF37 55%, #B8932A 100%); color: #0B0F17; border: 0; font-family: var(--sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 10px 24px -8px rgba(212, 175, 55, .5);
}
.btn { color: #F4F7FB; border-color: rgba(212, 175, 55, .35); }
.btn.quiet { color: #F4F7FB; border-color: rgba(212, 175, 55, .2); }
.chip[aria-pressed="true"], .chip.on { background: #D4AF37; color: #0B0F17; border-color: #D4AF37; }
.input { color: #F4F7FB; font-family: var(--sans); }
.input:focus { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }
.sheet { background: linear-gradient(180deg, #161B26, #0B0F17); border-color: rgba(212, 175, 55, .2); }
.msg.bad { color: #E58A80; }
/* apple-design: spring transitions + press feedback */
#view > * { animation: stepIn .5s var(--spring) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.slot, .btn, .svc, .svc-card, .cal-day, .datebtn, .chip, .icon-btn { transition: transform .35s var(--spring), background .25s, border-color .25s, box-shadow .25s; }
.slot:active, .btn:active, .cal-day:active, .datebtn:active, .chip:active, .svc-card:active { transform: scale(.97); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { #view > * { animation: none; } .slot:active, .btn:active, .cal-day:active, .datebtn:active, .chip:active { transform: none; } }

/* ===== LIGHT THEME (Marfil Alabastro) — follows the landing's data-theme, live ===== */
:root[data-theme="light"] {
  --obsidian: #FBF9F5; --obsidian-2: #F3EFE7; --graphite: #FFFFFF; --graphite-2: #F3EFE7;
  --gold: #9B7A28; --gold2: #9B7A28; --gold-soft: #7E6220;
  --ivory: #1A1A1A; --ivory-dim: #55555C;
  --line: rgba(155, 122, 40, .3); --line-soft: rgba(155, 122, 40, .24);
  --glass: rgba(255, 255, 255, .92); --bar-bg: rgba(251, 249, 245, .88); --field: rgba(0, 0, 0, .04); --sheet-bg: #FBF9F5;
}
:root[data-theme="light"] html, :root[data-theme="light"] body, :root[data-theme="light"] #app { background: #FBF9F5; color: #1A1A1A; }
:root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] .brand strong, :root[data-theme="light"] .svc .name,
:root[data-theme="light"] .datebtn .dv, :root[data-theme="light"] .cal-title, :root[data-theme="light"] .sum .when, :root[data-theme="light"] .sum .tot,
:root[data-theme="light"] .rates .rate, :root[data-theme="light"] .wait h3, :root[data-theme="light"] .svc-card .name { color: #1A1A1A; }
:root[data-theme="light"] .top { background: rgba(251, 249, 245, .88); border-color: rgba(155, 122, 40, .3); }
:root[data-theme="light"] .dock { background: linear-gradient(180deg, rgba(251, 249, 245, 0), rgba(251, 249, 245, .97) 28%); }
:root[data-theme="light"] .eyebrow, :root[data-theme="light"] .period-h, :root[data-theme="light"] .legend b, :root[data-theme="light"] .rates .rate b,
:root[data-theme="light"] .gold, :root[data-theme="light"] .lang, :root[data-theme="light"] .datebtn .chev, :root[data-theme="light"] .family svg,
:root[data-theme="light"] .slot .vip-badge, :root[data-theme="light"] .tab, :root[data-theme="light"] .svc-card .meta, :root[data-theme="light"] .svc .meta,
:root[data-theme="light"] .lede, :root[data-theme="light"] .fine, :root[data-theme="light"] .legend, :root[data-theme="light"] .cal-legend,
:root[data-theme="light"] .dock .sumline, :root[data-theme="light"] .muted { color: #55555C; }
:root[data-theme="light"] .tab[aria-selected="true"], :root[data-theme="light"] .dock .sumline b, :root[data-theme="light"] .btn, :root[data-theme="light"] .btn.quiet, :root[data-theme="light"] .input { color: #1A1A1A; }
:root[data-theme="light"] .card, :root[data-theme="light"] .svc, :root[data-theme="light"] .svc.svc-card, :root[data-theme="light"] .datebtn, :root[data-theme="light"] .cal-day,
:root[data-theme="light"] .slot, :root[data-theme="light"] .sum, :root[data-theme="light"] .input, :root[data-theme="light"] .chip {
  background: #FFFFFF; border-color: rgba(155, 122, 40, .24); color: #1A1A1A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 45, 10, .12), 0 10px 24px -14px rgba(60, 45, 10, .3);
}
:root[data-theme="light"] .svc-card .svc-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF); }
:root[data-theme="light"] .svc.on { border-color: #9B7A28; box-shadow: 0 0 0 1px rgba(155, 122, 40, .45); }
:root[data-theme="light"] .cal-day.sel { background: #F3EFE7; border-color: #9B7A28; }
:root[data-theme="light"] .cal-day.off { background: none; box-shadow: none; color: rgba(0, 0, 0, .25); }
:root[data-theme="light"] .slot.premium, :root[data-theme="light"] .legend .vip-mark { background: #F3EFE7; border-color: rgba(155, 122, 40, .5); color: #1A1A1A; }
:root[data-theme="light"] .slot[aria-pressed="true"], :root[data-theme="light"] .btn.primary, :root[data-theme="light"] .slot.premium[aria-pressed="true"] {
  background: linear-gradient(180deg, #B8923A 0%, #9B7A28 60%, #7E6220 100%); color: #fff; border-color: #9B7A28;
}
:root[data-theme="light"] .slot.premium[aria-pressed="true"] .vip-badge { color: #fff; }
:root[data-theme="light"] .chip[aria-pressed="true"], :root[data-theme="light"] .chip.on { background: #9B7A28; color: #fff; border-color: #9B7A28; }
:root[data-theme="light"] .sheet { background: linear-gradient(180deg, #FFFFFF, #FBF9F5); border-color: rgba(155, 122, 40, .3); }
:root[data-theme="light"] .skel { background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.08), rgba(0,0,0,.03)); background-size: 200% 100%; }
html, body, #app { transition: background-color .4s ease, color .4s ease; }

/* ===== LANDING PARITY — warm multi-layer hover lift + instant Apple press ===== */
@media (hover: hover) {
  .btn:hover, .slot:hover, .cal-day:not(.off):hover, .datebtn:hover, .chip:hover, .svc:hover, .svc-card:hover, .tab:hover, .lang:hover, .icon-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .25), 0 10px 22px -8px rgba(212, 175, 55, .35), 0 24px 44px -18px rgba(212, 175, 55, .28);
  }
  .tab:hover { transform: none; box-shadow: none; color: var(--ivory); }
  :root[data-theme="light"] .btn:hover, :root[data-theme="light"] .slot:hover, :root[data-theme="light"] .cal-day:not(.off):hover, :root[data-theme="light"] .datebtn:hover,
  :root[data-theme="light"] .chip:hover, :root[data-theme="light"] .svc:hover, :root[data-theme="light"] .svc-card:hover {
    border-color: rgba(155, 122, 40, .6);
    box-shadow: 0 2px 4px rgba(60, 45, 10, .14), 0 10px 22px -8px rgba(155, 122, 40, .38), 0 24px 44px -18px rgba(60, 45, 10, .3);
  }
  .slot[aria-pressed="true"]:hover, .btn.primary:hover { filter: brightness(1.06); }
}
.slot:active, .btn:active, .cal-day:active, .datebtn:active, .chip:active, .svc:active, .svc-card:active, .icon-btn:active, .lang:active, .tab:active { transform: scale(.97) !important; transition-duration: 80ms; }
.cal-day.off:active { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .slot:hover, .btn:hover, .cal-day:hover, .datebtn:hover, .chip:hover, .svc:hover, .svc-card:hover { transform: none; }
  .slot:active, .btn:active, .cal-day:active, .datebtn:active, .chip:active, .svc:active, .svc-card:active, .icon-btn:active, .lang:active { transform: none !important; }
}

/* Haircuts showcase mosaic: real cuts, head-first crops */
.cut-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
.cut-mosaic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; border-radius: 10px; display: block; background: var(--obsidian-2); }
.cut-mosaic img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }
.svc-card .svc-photo img { object-position: center 28%; }

/* M3 spatial layer: same brass-light / obsidian-vignette canvas as the home hero, full 100dvh x 100vw, no colour seam. */
html,body{background:#07090E}
body{background:radial-gradient(ellipse 70% 45% at 50% 22%,rgba(201,162,74,.18) 0%,rgba(201,162,74,.06) 45%,transparent 72%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 45%,#05070B 100%),#07090E;background-attachment:fixed;min-height:100dvh;min-width:100vw}
.top{background:rgba(18,20,26,.75);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%)}
.datebtn,.cal-day,.slot{backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);background:rgba(18,20,26,.75);border-color:rgba(212,175,55,.12)}
#legal-media { font-size: 11.5px; line-height: 1.55; letter-spacing: .01em; opacity: .85; }

.brand-crest{display:block;width:42px;height:42px;margin:0 auto 4px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(212,175,55,.45))}

/* header: geometric centre for the brand block, independent of back/lang button widths */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.top #back { justify-self: start; }
.top .lang { justify-self: end; }
.top .brand { flex: none; grid-column: 2; }

/* touch: no text selection / callout / drag on category tabs and service cards */
.tabs, .tab, .svc, .svc-card, .dock, .btn, .stepper { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
.svc img { -webkit-user-drag: none; }
html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; overscroll-behavior-x: none !important; }

/* categories: fixed centred button row, no horizontal scroll */
.tabs { overflow-x: hidden !important; overflow-y: hidden; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0 0 18px 0 !important; padding: 0 !important; touch-action: pan-y; }
.tab { flex: 0 0 auto; }
/* continuous dark background, full viewport height on every step */
html:not([data-theme="light"]), html:not([data-theme="light"]) body, html:not([data-theme="light"]) #app { background: #0c0d10 !important; }
html[data-theme="light"], html[data-theme="light"] body, html[data-theme="light"] #app { background: #FBF9F5 !important; }
#app { min-height: 100dvh !important; }
main { min-height: 100dvh; padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }

/* Confirmation screen: vertically centred editorial block (v10) */
#booking-done { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 120px); text-align: center; margin: 0 auto; }
#booking-done .done-note { max-width: 36ch; margin: 4px auto 22px; line-height: 1.5; }
#booking-done #done-home { display: flex; align-items: center; justify-content: center; text-decoration: none; }
#booking-done .btn-link { margin: 18px auto 0; padding: 8px 12px; background: none; border: 0; color: inherit; opacity: .6; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Booking confirmed: floating glass note + reschedule return nav */
#booking-done .done-float { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; width: min(440px, calc(100% - 32px)); box-sizing: border-box; margin: 0; padding: 16px 18px; border-radius: 22px; text-align: center; line-height: 1.45; font-size: .9rem; color: #F4F7FB; background: rgba(5,8,14,.78); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(212,175,55,.4); box-shadow: 0 18px 50px -10px rgba(0,0,0,.85); }
#booking-done { padding-bottom: 110px; }
.resched-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.resched-nav .btn { flex: 1 1 140px; }

/* Reschedule: minimal liquid-glass pill + tenue glass note; fluid touch scroll */
.resched-wrap { display: flex; justify-content: center; }
.resched-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 auto 16px; padding: 6px 16px; border-radius: 9999px; font-size: 13px; line-height: 1.3; color: #D4AF37; background: rgba(11,15,23,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(212,175,55,.3); }
.resched-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resched-pill .pill-link { flex: 0 0 auto; padding: 4px 0; background: none; border: 0; color: #D4AF37; font: 600 13px/1.3 inherit; font-family: inherit; cursor: pointer; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.resched-pill .pill-link:hover, .resched-pill .pill-link:focus-visible { color: #F5D77F; border-bottom-color: #F5D77F; outline: none; }
.glass-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; color: #F4F7FB; background: rgba(11,15,23,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(212,175,55,.3); }
html, body { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/* Success screen: clear the Dynamic Island / notch / clock on iPhone. */
#booking-done { padding-top: max(44px, env(safe-area-inset-top, 44px)); }

/* A2P / CTIA: two independent SMS consents, quiet-luxury */
.consents { margin: 18px 0 6px; display: grid; gap: 10px; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #0B0F17; border: 1px solid rgba(212,175,55,.22); border-radius: 12px; font-size: 12.5px; font-weight: 300; line-height: 1.55; letter-spacing: .01em; color: #9CA3AF; cursor: pointer; }
.consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #D4AF37; }
.consent:has(input:checked) { border-color: rgba(212,175,55,.55); color: #C9CED6; }
.consent-links { margin: 2px 2px 0; font-size: 12px; font-weight: 300; color: #9CA3AF; }
.consent-links a { color: #D4AF37; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Private Suite Sessions — Apple HIG "Liquid Glass" (dark default, light via :root[data-theme="light"]) ===== */
:root {
  --lg-bg: rgba(18, 16, 14, .85); --lg-text: #F4EBDD; --lg-sub: rgba(244, 235, 221, .72); --lg-accent: #D4AF37;
  --lg-edge: rgba(212, 175, 55, .38); --lg-shine: rgba(255, 238, 196, .55); --lg-shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
  --lg-ease: cubic-bezier(.32, .72, 0, 1);
}
:root[data-theme="light"] {
  --lg-bg: rgba(251, 250, 246, .85); --lg-text: #1C1917; --lg-sub: rgba(28, 25, 23, .72); --lg-accent: #B58A3C;
  --lg-edge: rgba(181, 138, 60, .45); --lg-shine: rgba(255, 255, 255, .95); --lg-shadow: 0 18px 38px -24px rgba(90, 64, 20, .38);
}
.glass-plate { position: relative; margin: 12px 0 14px; padding: 16px 18px 17px; border-radius: 20px; background: var(--lg-bg); color: var(--lg-text);
  border: 1px solid var(--lg-edge); box-shadow: inset 0 1px 0 var(--lg-shine), var(--lg-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); overflow: hidden; }
.glass-plate::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lg-shine), transparent); } /* champagne micro-reflection */
.glass-plate .gp-kicker { display: block; margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-accent); }
.glass-plate .gp-body { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lg-text); }
.glass-plate.pending { padding: 20px 20px 22px; }
.glass-plate.pending .gp-body { color: var(--lg-sub); color: var(--lg-text); }
/* Private session slots: frosted tile, hairline bevel, never a flat black block in light mode */
.slot.premium { background: var(--lg-bg); color: var(--lg-text); border: 1px solid var(--lg-edge); box-shadow: inset 0 1px 0 var(--lg-shine);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  transition: transform .2s var(--lg-ease), box-shadow .2s var(--lg-ease); }
.slot.premium { min-width: 0; padding: 6px 8px; }
.slot.premium .vip-badge { color: var(--lg-accent); font-size: 8px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; white-space: normal; text-align: center; max-width: 100%; }
.slot.premium:hover { box-shadow: inset 0 1px 0 var(--lg-shine), 0 6px 18px -10px var(--lg-accent); }
.slot.premium:active { transform: scale(.98); }
.slot.premium[aria-pressed="true"] { background: var(--lg-accent); color: #14110A; border-color: var(--lg-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px var(--lg-accent); }
.slot.premium[aria-pressed="true"] .vip-badge { color: #14110A; }
.legend .vip-mark { background: var(--lg-bg); border: 1px solid var(--lg-edge); color: var(--lg-accent); box-shadow: inset 0 1px 0 var(--lg-shine); }
/* Floating "Request VIP Session" button: 1px overhead light, springy touch response */
.btn.vip-request { background: linear-gradient(180deg, #E7CB74 0%, #C9A23C 100%); color: #1A1407; border: 1px solid rgba(255, 244, 205, .55); font-weight: 600; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 26px -12px rgba(181, 138, 60, .75);
  transition: transform .2s var(--lg-ease), filter .2s var(--lg-ease), box-shadow .2s var(--lg-ease); }
.btn.vip-request:hover { filter: brightness(1.07) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 30px -12px rgba(181, 138, 60, .9); }
.btn.vip-request:active { transform: scale(.98); }
.btn.vip-request:disabled { filter: grayscale(.25) opacity(.7); }
@media (prefers-reduced-motion: reduce) { .btn.vip-request, .slot.premium { transition: none; } }

.glass-plate .gp-kicker::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--lg-accent); font-size: 10px; line-height: 1; letter-spacing: 0; vertical-align: 1px; }
.glass-plate { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 55%); }
:root[data-theme="light"] .glass-plate { background-image: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%); }
.glass-plate.pending .gp-kicker { text-align: center; }
:root[data-theme="light"] .btn.vip-request, :root[data-theme="light"] .btn.vip-request:hover { color: #1A1407; background: linear-gradient(180deg, #E9CF7E 0%, #CBA445 100%); border-color: rgba(255, 255, 255, .7); }
/* consent cards follow the theme (were fixed obsidian blocks in light mode) */
:root[data-theme="light"] .consent, :root[data-theme="light"] .consents .consent { background: rgba(255, 255, 255, .72); border: 1px solid var(--line-soft); color: #3A3A40;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="light"] .consent a, :root[data-theme="light"] .consent-links a { color: #7E6220; }

/* VIP link: discreet champagne-gold text link under the regular grid */
.vip-link { display: block; width: 100%; margin: 18px 0 6px; padding: 10px 4px; background: none; border: 0; text-align: center; cursor: pointer;
  font: inherit; font-size: 13.5px; letter-spacing: .02em; color: var(--lg-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lg-edge); }
.vip-link:hover { filter: brightness(1.12); }
#vip-panel select { width: 100%; }
/* iPhone-style single time box inside the Liquid Glass card */
.vip-clock { width: 100%; box-sizing: border-box; min-height: 52px; padding: 10px 14px; border-radius: 16px; font: 600 24px/1.2 var(--serif, Georgia, serif); letter-spacing: .04em; text-align: center;
  color: var(--lg-text); background: rgba(255, 255, 255, .06); border: 1px solid var(--lg-edge); box-shadow: inset 0 1px 0 var(--lg-shine); color-scheme: dark; -webkit-appearance: none; appearance: none; }
:root[data-theme="light"] .vip-clock { background: rgba(255, 255, 255, .7); color-scheme: light; }
.vip-clock:focus { outline: none; border-color: var(--lg-accent); box-shadow: inset 0 1px 0 var(--lg-shine), 0 0 0 3px rgba(212, 175, 55, .25); }
#vip-panel .rate { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14.5px; border-top: 1px solid rgba(212, 175, 55, .16); }
#vip-panel .msg { margin: 8px 0 0; min-height: 0; }
#vip-panel .msg:empty { display: none; }
/* amber pending ring */
#pending-review { border-color: rgba(245, 158, 11, .55); }
#pending-review::after { content: ""; position: absolute; inset: 5px; border-radius: 16px; border: 1px solid rgba(212, 175, 55, .35); pointer-events: none; }
/* Uniform with the consent boxes: same dark glass, 12px radius, 12/14 padding, 1px champagne hairline, brand type, no "!" alert icon */
.glass-plate, .glass-plate.pending { margin: 12px 0 14px; padding: 12px 14px; background: #0B0F17; background-image: none; border: 1px solid rgba(212, 175, 55, .22); border-radius: 12px;
  box-shadow: none; font-size: 12.5px; font-weight: 300; line-height: 1.55; letter-spacing: .01em; color: #9CA3AF;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass-plate::before, .glass-plate .gp-kicker::before, #pending-review::after { content: none !important; display: none !important; }
#pending-review { border-color: rgba(212, 175, 55, .22); }
.glass-plate .gp-kicker, .glass-plate.pending .gp-kicker { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-transform: none; text-align: left; color: #D4AF37; }
.glass-plate .gp-body, .glass-plate.pending .gp-body { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: #9CA3AF; }
#vip-panel .rate { font-size: 12.5px; font-weight: 300; border-top-color: rgba(212, 175, 55, .16); }
#vip-panel .rate b { font-weight: 500; color: #F4F7FB; }
:root[data-theme="light"] .glass-plate, :root[data-theme="light"] .glass-plate.pending { background: rgba(255, 255, 255, .72); border: 1px solid var(--line-soft); color: #3A3A40;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="light"] .glass-plate .gp-body { color: #3A3A40; }
:root[data-theme="light"] .glass-plate .gp-kicker { color: #7E6220; }
:root[data-theme="light"] #vip-panel .rate b { color: #1A1A1A; }

/* ===== Waitlist card: Apple liquid glass ===== */
.card.wait {
  border-radius: 18px; padding: 22px;
  background: rgba(18, 16, 14, .75); border: 1px solid rgba(212, 175, 55, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 32px -4px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(25px) saturate(180%); backdrop-filter: blur(25px) saturate(180%);
}
.wait h3 { display: flex; align-items: center; gap: 10px; font-weight: 400; color: #F3EBDD; }
.wait .wait-ico { display: inline-flex; flex: 0 0 auto; color: #D4AF37; }
.wait .muted { color: rgba(243, 235, 221, .72); }
.wait .btn.primary {
  background: linear-gradient(135deg, #D4AF37, #B58A3C); color: #1C1917; border-color: transparent;
  transition: transform .2s cubic-bezier(.32, .72, 0, 1), box-shadow .2s;
}
.wait .btn.primary:active { transform: scale(.98); }
:root[data-theme="light"] .card.wait {
  background: rgba(251, 250, 246, .85); border-color: rgba(181, 138, 60, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 32px -4px rgba(60, 45, 10, .08);
}
:root[data-theme="light"] .wait h3 { color: #1C1917; }
:root[data-theme="light"] .wait .wait-ico { color: #B58A3C; }
:root[data-theme="light"] .wait .muted { color: #55555C; }
:root[data-theme="light"] .wait .btn.primary { background: linear-gradient(135deg, #D4AF37, #B58A3C); color: #1C1917; }