/* ==========================================================================
   Beauté Fatale Spa — client web app layout
   Design tokens, reset and base type live in tokens.css (shared with /admin).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.app {
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Screens that own the whole viewport start below the notch. */
.scroll > .screen { padding-top: max(8px, var(--safe-top)); }
.scroll > .screen--flush { padding-top: 0; }
.header-slot:not(:empty) + .scroll > .screen { padding-top: 2px; }

.header-slot:empty, .cta-slot:empty { display: none; }

/* The fixed header. It sits above the scrolling area and never moves. */
.header-slot {
  flex-shrink: 0;
  padding-top: max(8px, var(--safe-top));
  background: var(--bg);
  position: relative;
  z-index: 10;
}
/* A hairline appears only once content has scrolled beneath it. */
.header-slot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 160ms ease;
}
.app.is-scrolled .header-slot::after { opacity: 1; }
.header-slot .home-head { padding-bottom: 12px; }

.screen { display: flex; flex-direction: column; }

/* Wider screens (tablets, desktop, phones in landscape) centre the same column.
   No frame, no card edge — the page background matches the app background so
   there is nothing to see around it. */
@media (min-width: 560px) {
  .app { max-width: 480px; }
}

/* --------------------------------------------------------------------------
   Bottom navigation
   -------------------------------------------------------------------------- */

.bottom-nav {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 9px 0 max(10px, var(--safe-bottom));
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -8px 24px rgba(42, 33, 32, 0.04);
}
.bottom-nav:empty { display: none; }

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-item span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; }
.nav-item.is-active { color: var(--rose-deep); }
.nav-item.is-active span { font-weight: 800; }

/* --------------------------------------------------------------------------
   Top bar / section titles
   -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 12px;
  flex-shrink: 0;
}
.topbar-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.2px;
}
.topbar-spacer { width: 38px; flex-shrink: 0; }

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.icon-btn--round {
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.icon-btn--lg { width: 40px; height: 40px; border-radius: 13px; }

.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section--tight { gap: 10px; }
.section--loose { gap: 14px; }
.section-title { padding: 0 20px; }
.section-title h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  letter-spacing: 0.1px;
}
.section-title p { font-size: 13.5px; font-weight: 500; color: var(--muted); margin-top: 4px; }

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.lede {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}

.rule { height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   Buttons, badges, chips
   -------------------------------------------------------------------------- */

.btn {
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  width: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:active { transform: scale(0.985); }
.btn--sm { height: 42px; font-size: 14px; }
.btn--primary { background: var(--rose-deep); color: #fff; box-shadow: 0 10px 22px rgba(177, 92, 110, 0.28); }
.btn--gold { background: var(--gold); color: #fff; box-shadow: 0 8px 18px rgba(184, 147, 90, 0.3); }
.btn--outline { background: #fff; color: var(--ink); border: 1.4px solid var(--line); }
.btn--ghost { background: transparent; color: var(--rose-deep); }

.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--rose-deep);
  color: #fff;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}
.badge--gold { background: var(--cream); color: var(--gold-deep); }
.badge--rose { background: var(--rose-soft); color: var(--rose-deep); }
.badge--ink { background: rgba(42, 33, 32, 0.06); color: var(--ink); }

.chip-row {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  overflow-x: auto;
}
.chip {
  height: 36px;
  padding: 0 15px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
  color: var(--body);
  border: 1px solid var(--line);
}
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16.7px;
  font-weight: 700;
  flex-shrink: 0;
}

.danger-confirm { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.danger-confirm strong { font-size: 15px; }
.danger-confirm p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.btn--danger { background: #9d2f3f; color: #fff; }
.btn--danger:disabled { opacity: 0.6; }

.deposit-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
}
.deposit-note .ic { color: var(--rose-deep); flex-shrink: 0; margin-top: 1px; }
.deposit-note strong { display: block; font-size: 14px; }
.deposit-note span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- visual home page editing (?edit=1, owner only) ---- */
.edit-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--ink); color: #fff;
}
.edit-bar-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-right: auto; }
.edit-bar-ok { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #7ddba1; }
.edit-bar-error { font-size: 12.5px; color: #ffb3b3; }
.edit-bar .btn { flex-shrink: 0; }

.is-editable {
  outline: 1.5px dashed rgba(184, 147, 90, 0.75);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
}
.is-editable:focus { outline: 2px solid var(--gold); outline-offset: 3px; }

.home-hero { position: relative; }
.photo-swap {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(42, 33, 32, 0.88); color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.photo-swap.is-busy { opacity: 0.6; pointer-events: none; }

.avatar--photo { overflow: hidden; background: var(--bg); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--lg { width: 76px; height: 76px; font-size: 28px; }

.photo-picker { display: flex; align-items: center; gap: 16px; }
.photo-picker-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-picker label { cursor: pointer; margin: 0; }
.photo-picker label.is-busy { opacity: 0.6; pointer-events: none; }

/* --------------------------------------------------------------------------
   Cards, panels, image slots
   -------------------------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.panel-dark {
  background: var(--ink);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.panel-dark::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: var(--blob, 140px);
  height: var(--blob, 140px);
  border-radius: 50%;
  background: var(--blob-color, rgba(184, 147, 90, 0.18));
}
.panel-dark > * { position: relative; }

/* Photo placeholders. Drop a real <img> inside to fill one. */
.slot {
  background: var(--cream);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.slot span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px;
  text-align: center;
}
.slot img { width: 100%; height: 100%; object-fit: cover; }

.cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 15.4px;
  background: var(--cream);
  color: var(--rose-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Sticky bottom action bars
   -------------------------------------------------------------------------- */

.cta-slot { flex-shrink: 0; }
.cta-bar {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 14px 20px max(18px, var(--safe-bottom));
}
.cta-bar--plain { background: transparent; border-top: 0; padding: 20px 20px max(18px, var(--safe-bottom)); }
.cta-bar--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -10px 30px rgba(42, 33, 32, 0.06);
}
.cta-price { font-size: 20px; font-weight: 800; color: var(--ink); }
.cta-price small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.cta-bar--split .btn { max-width: 190px; }
.cta-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  color: var(--rose-deep);
  font-weight: 800;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 14px;
}

.wordmark-logo { height: 30px; width: auto; }
.home-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.wordmark { display: flex; align-items: center; gap: 9.5px; }
.wordmark-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.wordmark-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 17.2px;
  letter-spacing: 0.3px;
  line-height: 1;
}

.home-body { display: flex; flex-direction: column; gap: 22px; padding-bottom: 4px; }
.home-hero { margin: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.home-hero .slot { height: 200px; border-radius: 22px; }

/* ---- Main menu (hamburger) ---- */

.menu-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(42, 33, 32, 0.42);
}

/* Slides from the left, capped so it never fills a tablet edge to edge. */
.main-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 41;
  width: min(84vw, 340px);
  background: #fff;
  display: flex; flex-direction: column;
  padding-top: max(12px, var(--safe-top));
  box-shadow: 8px 0 32px rgba(42, 33, 32, 0.18);
  animation: menu-in 0.22s ease;
}
@keyframes menu-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .main-menu { animation: none; } }

.main-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 14px; border-bottom: 1px solid var(--line);
}
.main-menu-head strong {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink);
}

.main-menu-links { flex: 1; overflow-y: auto; padding: 8px; }
.main-menu-group + .main-menu-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.main-menu-heading {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); padding: 4px 12px 6px;
}
.main-menu-link {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 12px; border-radius: 12px; text-align: left;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.main-menu-link:active { background: var(--bg); }
.main-menu-link .ic { color: var(--rose-deep); flex-shrink: 0; }
/* The trailing chevron is the only one that should drift right. */
.main-menu-link .ic:last-child { margin-left: auto; color: var(--muted); }
.main-menu-link span { min-width: 0; }

.main-menu-foot {
  padding: 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.main-menu-foot a { font-size: 14px; font-weight: 700; color: var(--rose-deep); }
.main-menu-foot span { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }

/* ---- Our team ---- */

/* .screen is a bare flex column with no gap of its own, so each block on
   this page states its own breathing room rather than touching its neighbour. */
.team-screen .lede { margin-bottom: 18px; }
.team-list { display: flex; flex-direction: column; gap: 14px; }
.team-cta { margin-top: 24px; padding-bottom: 8px; }

/* Cards became buttons when they gained a profile link — the chevron marks
   that there is somewhere to go. */
.team-card { width: 100%; text-align: left; }
.team-card > .ic { margin-left: auto; align-self: center; color: var(--muted); flex-shrink: 0; }

/* ---- One member's public profile ---- */
.member-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.member-photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: var(--cream); }
.member-photo--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--rose-deep);
}
.member-head h1 {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  color: var(--ink); margin-top: 14px;
}
.member-title { font-size: 13px; font-weight: 700; color: var(--rose-deep); margin-top: 3px; }
.member-bio {
  font-size: 14px; font-weight: 500; color: var(--body);
  line-height: 1.65; margin-top: 20px; white-space: pre-line;
}
.member-sections { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
.member-section .member-bio { margin-top: 8px; }
.member-cta { margin-top: 28px; padding-bottom: 8px; display: flex; justify-content: center; }
.team-card { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
.team-photo {
  width: 76px; height: 76px; border-radius: 16px; object-fit: cover; flex-shrink: 0;
  background: var(--cream);
}
.team-photo--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--rose-deep);
}
.team-card-text { min-width: 0; flex: 1; }
.team-card-text strong {
  display: block; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.team-card-title {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--rose-deep);
  margin-top: 2px;
}
.team-card-bio {
  font-size: 13px; font-weight: 500; color: var(--body);
  line-height: 1.55; margin-top: 7px; white-space: pre-line;
}

/* ---- Virtual consultation block ---- */
.vc-card { margin: 0 20px; overflow: hidden; padding: 0; }
.vc-card .slot { height: 170px; border-radius: 0; }
.vc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; }
.vc-lede { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.vc-copy { font-size: 13px; font-weight: 500; color: var(--body); line-height: 1.55; }

.vc-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 11px 0 3px; border-top: 1px solid var(--line);
}
.vc-fact {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 140px; min-width: 0; color: var(--rose-deep);
}
.vc-fact span { display: flex; flex-direction: column; min-width: 0; }
.vc-fact strong { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.vc-fact em {
  font-size: 11px; font-weight: 600; font-style: normal; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-body .pill-cta { align-self: flex-start; margin-top: 4px; }

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

/* The frames are stacked, not laid side by side: cross-fading avoids the
   horizontal scroll container a sliding track would need, and keeps the
   rounded corners intact. */
/* pan-y hands vertical scrolling to the browser and keeps horizontal for the
   swipe handler — without it the page and the carousel fight over the finger. */
.hero-carousel { position: relative; touch-action: pan-y; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(42, 33, 32, 0.38); cursor: pointer;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.2s ease;
}
.hero-arrow--prev { left: 8px; }
.hero-arrow--next { right: 8px; }
/* Hidden until asked for: on a phone the swipe is the control, and two
   floating buttons over the photo would only crowd it. */
.hero-carousel:hover .hero-arrow,
.hero-arrow:focus-visible { opacity: 1; }
@media (hover: none) {
  .hero-arrow { display: none; }
}
.hero-track { position: relative; height: 200px; }
.hero-frame {
  position: absolute; inset: 0;
  height: 100%; border-radius: 22px;
  opacity: 0; transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-frame.is-active { opacity: 1; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Sits on a pill of its own: over a pale photo, white dots on white are
   invisible, and a per-dot shadow is not enough to separate them. */
.hero-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 99px;
  background: rgba(42, 33, 32, 0.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hero-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.hero-dot.is-active { width: 18px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero-frame { transition: none; }
}

.home-quote {
  padding: 18px 20px 20px;
  --blob: 120px;
  --blob-color: rgba(217, 138, 152, 0.18);
}
.home-quote h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.2px;
}
.home-quote .pill-cta { margin-top: 12px; }

.cat-rail { display: flex; gap: 16px; padding: 0 20px; overflow-x: auto; }
.cat-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  width: 66px;
}
.cat-rail-item .cat-icon { width: 54px; height: 54px; border-radius: 17.3px; }
.cat-rail-item span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--body);
  text-align: center;
  line-height: 1.2;
}

.pick-rail { display: flex; gap: 13px; padding: 0 20px; overflow-x: auto; }
.pick { width: 158px; flex-shrink: 0; }
.pick .slot { height: 118px; border-radius: 18px; }
.pick-name { margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.pick-price { margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--rose-deep); }

.member-promo { margin: 0 20px; padding: 20px 20px 22px; }
.member-promo .ic { color: var(--gold); }
.member-promo h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; margin-top: 10px; }
.member-promo p { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-top: 6px; line-height: 1.45; }
.member-promo .link-gold {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 800;
}

.rating-row { padding: 0 20px; display: flex; align-items: center; gap: 8px; }
.rating-stars { display: flex; color: var(--gold); }
.rating-score { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rating-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.review-card { margin: 0 20px; padding: 15px; }
.review-card blockquote { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.5; font-style: italic; }
.review-card cite { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 8px; font-style: normal; }

.story-link {
  margin: 0 20px;
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 12px;
  width: calc(100% - 40px);
}
.story-link:last-child { margin-bottom: 24px; }
.story-link .slot { width: 62px; height: 62px; border-radius: 13px; }
.story-link-text { flex: 1; }
.story-link-text strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.story-link-text span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.story-link .ic { color: var(--muted); }

/* --------------------------------------------------------------------------
   Our Story
   -------------------------------------------------------------------------- */

.about { display: flex; flex-direction: column; gap: 20px; padding-bottom: 8px; }
.about-hero { margin: 0 20px; }
.about-hero .slot { height: 190px; border-radius: 20px; }
.about-copy { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.about-copy h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.25; }
.about-copy p { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.6; }
.about-quote { font-family: var(--font-display); font-style: italic; font-size: 15.5px; color: var(--rose-deep); margin-top: 4px; }

.pillars { padding: 0 20px; display: flex; gap: 10px; }
.pillar {
  flex: 1;
  padding: 14px 10px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.pillar .ic { color: var(--rose-deep); }
.pillar span { font-size: 11.5px; font-weight: 700; color: var(--ink); }

.founder { margin: 0 20px; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.founder-head { display: flex; align-items: center; gap: 12px; }
.founder-head strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.founder-head span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.founder p { font-size: 13.5px; font-weight: 500; color: var(--body); line-height: 1.55; }

.value-row { display: flex; align-items: flex-start; gap: 11px; border-radius: 14px; padding: 13px 14px; }
.value-row .ic-lead { color: var(--rose-deep); flex-shrink: 0; margin-top: 1px; }
.value-row strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.value-row span { display: block; font-size: 12.5px; font-weight: 500; color: var(--body); line-height: 1.45; margin-top: 3px; }

.policy { border-radius: 14px; padding: 13px 14px; }
.policy strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.policy span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.45; margin-top: 3px; }

.visit { margin: 0 20px; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.visit-line { display: flex; align-items: flex-start; gap: 10px; }
.visit-line .ic { color: var(--rose-deep); margin-top: 1px; flex-shrink: 0; }
.visit-line span, .visit-line a { font-size: 13.5px; font-weight: 600; color: var(--body); line-height: 1.4; }
.visit dl { display: flex; flex-direction: column; gap: 14px; }
.visit-hours { display: flex; justify-content: space-between; }
.visit-hours dt { font-size: 13px; font-weight: 700; color: var(--ink); }
.visit-hours dd { font-size: 13px; font-weight: 600; color: var(--muted); }

/* --------------------------------------------------------------------------
   Service menu / category / detail
   -------------------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.pad { padding: 0 20px; }

.menu-list { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 17px;
  padding: 14px;
  width: 100%;
}
.menu-row .cat-icon { width: 50px; height: 50px; border-radius: 16px; }
.menu-row-text { flex: 1; min-width: 0; }
.menu-row-text strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.menu-row-text span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.menu-row > .ic { color: var(--muted); flex-shrink: 0; }

.svc-list { display: flex; flex-direction: column; gap: 10px; }
.svc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 15px;
  padding: 13px 14px;
  width: 100%;
}
.svc-row-text { flex: 1; min-width: 0; }
.svc-row-text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.svc-row-text span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.svc-price { font-size: 14.5px; font-weight: 800; color: var(--rose-deep); white-space: nowrap; }
.svc-row > .ic { color: var(--muted); flex-shrink: 0; }

.category-body { display: flex; flex-direction: column; gap: 16px; padding: 2px 20px 24px; }
.addons { display: flex; flex-wrap: wrap; gap: 8px; }

.detail-hero { position: relative; }
.detail-hero .slot { height: 250px; border-radius: 0; }
.detail-hero > .icon-btn { position: absolute; top: max(8px, var(--safe-top)); left: 18px; }

/* Cart + share, opposite the back button. Nested buttons must opt out of the
   absolute positioning the back button uses. */
.detail-hero-actions {
  position: absolute;
  top: max(8px, var(--safe-top));
  right: 18px;
  display: flex;
  gap: 8px;
}
.detail-hero-actions .icon-btn { position: static; }
.detail-body {
  flex: 1;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  margin-top: -18px;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.detail-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink); line-height: 1.2; }
.detail-facts { display: flex; gap: 9px; flex-wrap: wrap; }
.fact {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
}
.fact .ic { color: var(--rose-deep); }
.fact span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* pre-line keeps the line breaks a description was written with — a bulleted
   "how to prepare" list collapses into one run-on paragraph without it —
   while still wrapping normally and folding runs of spaces. */
.detail-copy {
  font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.6;
  white-space: pre-line;
}
.detail-provider { display: flex; align-items: center; gap: 12px; width: 100%; }
.detail-provider-text { flex: 1; }
.detail-provider strong { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.detail-provider span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */

.book-body { display: flex; flex-direction: column; gap: 14px; }
.book-list { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }

.flow-body { display: flex; flex-direction: column; gap: 16px; padding: 2px 20px 20px; }

.summary-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 15px;
  padding: 12px 14px;
}
.summary-chip .cat-icon { width: 40px; height: 40px; border-radius: 12.8px; }
.summary-chip-text { flex: 1; min-width: 0; }
.summary-chip-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-chip-text span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.summary-chip .svc-price { font-size: 14px; }

.provider-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.provider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.6px solid var(--line);
  border-radius: 17px;
  padding: 15px;
  width: 100%;
}
.provider-row.is-active { border-color: var(--rose-deep); }
.provider-row .avatar { width: 48px; height: 48px; font-size: 18.2px; }
.provider-row-text { flex: 1; }
.provider-row-text strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.provider-row-text span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.provider-row.is-active .radio { border-color: var(--rose-deep); background: var(--rose-deep); }

.calendar { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar-head strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.cal-nav {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink);
}
.cal-nav:disabled { opacity: 0.35; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cal-weekdays span { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--bg);
}
.cal-cell--pad { background: none; }
.cal-cell.is-disabled { color: var(--muted); background: none; opacity: 0.4; }
.cal-cell.is-loading { color: var(--muted); background: none; opacity: 0.5; }
.cal-cell.is-selected { background: var(--rose-deep); color: #fff; }
.cal-cell:not(:disabled):not(.is-selected):hover { background: var(--rose-soft); }

.slot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.time-slot {
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--body);
}
.time-slot.is-active { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px 0;
  gap: 18px;
}
.confirm-mark {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); text-align: center; }
.confirm > p { font-size: 13.5px; font-weight: 500; color: var(--muted); text-align: center; line-height: 1.5; }
.receipt {
  width: 100%;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 6px;
}
.receipt-row { display: flex; justify-content: space-between; gap: 16px; }
.receipt-row dt { font-size: 13px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.receipt-row dd { font-size: 13.5px; font-weight: 800; color: var(--ink); text-align: right; }
.receipt-row--total dt { font-weight: 700; color: var(--ink); }
.receipt-row--total dd { font-size: 15px; color: var(--rose-deep); }

/* --------------------------------------------------------------------------
   Membership
   -------------------------------------------------------------------------- */

.plan-list { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 20px; }
.plan-card {
  background: #fff;
  border: 1.6px solid var(--line);
  border-radius: 19px;
  padding: 17px;
  position: relative;
  width: 100%;
}
.plan-card.is-popular { border-color: var(--gold); }
.plan-flag { position: absolute; top: -11px; right: 16px; }
.plan-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.5px; color: var(--ink); }
.plan-card .badge { margin-top: 4px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; }
.plan-price strong { font-size: 22px; font-weight: 800; color: var(--ink); }
.plan-price span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.perk-list { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.perk { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.perk .ic { color: var(--rose-deep); margin-top: 2px; flex-shrink: 0; }
.perk span { font-size: 12.5px; font-weight: 500; color: var(--body); line-height: 1.4; }
.plan-more {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rose-deep);
  font-size: 12.5px;
  font-weight: 800;
}

.plan-hero { padding: 20px; }
.plan-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; margin-top: 10px; }
.plan-hero-price { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.plan-hero-price strong { font-size: 28px; font-weight: 800; color: #fff; }
.plan-hero-price span { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.perk-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
}
.perk-card .ic { color: var(--rose-deep); margin-top: 1px; flex-shrink: 0; }
.perk-card span { font-size: 13.5px; font-weight: 600; color: var(--body); line-height: 1.4; }

.fine-print { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Account & shop
   -------------------------------------------------------------------------- */

.account-body { display: flex; flex-direction: column; gap: 18px; padding: 2px 20px 20px; }
.account-head { display: flex; align-items: center; gap: 14px; }
.account-head .avatar { width: 58px; height: 58px; font-size: 22px; }
.account-head .avatar--guest { background: var(--muted); }
.account-head-text { flex: 1; }
.account-head-text strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.account-head-text span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.guest-card { border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.guest-card .ic { color: var(--rose-deep); }
.guest-card strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.guest-card p { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.guest-card .btn { margin-top: 4px; }

.dark-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--ink);
  border-radius: 16px;
  padding: 15px;
  width: 100%;
}
.dark-row .ic-lead { color: var(--gold); flex-shrink: 0; }
.dark-row-text { flex: 1; text-align: left; }
.dark-row-text strong { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.dark-row-text span { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.dark-row .ic-trail { color: rgba(255, 255, 255, 0.7); flex-shrink: 0; }

.member-card { border-radius: 18px; padding: 17px; display: flex; align-items: center; gap: 13px; --blob: 110px; }
.member-card .ic { color: var(--gold); }
.member-card-text { flex: 1; }
.member-card-text strong { display: block; font-size: 14.5px; font-weight: 800; color: #fff; }
.member-card-text span { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }

.appt {
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 16px;
  padding: 14px;
}
.appt-date {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--cream);
  color: var(--rose-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.appt-date em { font-size: 10px; font-weight: 800; text-transform: uppercase; font-style: normal; }
.appt-date strong { font-size: 15px; font-weight: 800; }
.appt-text { flex: 1; }
.appt-text strong { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.appt-text span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }

.appt-empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.appt-empty .ic { color: var(--muted); }
.appt-empty strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.appt-empty button { font-size: 13px; font-weight: 800; color: var(--rose-deep); }

.stat-row { display: flex; gap: 10px; }
.stat { flex: 1; border-radius: 14px; padding: 13px; text-align: center; }
.stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--rose-deep); }
.stat span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.link-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
}
.link-row + .link-row { border-top: 1px solid var(--line); }
.link-row .ic-lead { color: var(--rose-deep); flex-shrink: 0; }
.link-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--ink); }
.link-row .ic-trail { color: var(--muted); flex-shrink: 0; }

.shop-body { display: flex; flex-direction: column; gap: 14px; padding: 2px 20px 20px; }
/* stretch, not the default: without it a two-line product name makes its
   card taller than its neighbour and the prices stop lining up. */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.product { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.product .slot { height: 140px; border-radius: 16px; }

/* The name takes whatever room it needs and pushes the price to the bottom,
   so every price in a row sits on the same line. */
.product strong { flex: 1; }
.product > span:last-child { margin-top: auto; }
.product strong { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.product > span { font-size: 13px; font-weight: 800; color: var(--rose-deep); }

/* ---- Sold out ---- */

/* Wraps the photo so the tag has something to anchor to. Display is inherited
   from the card, so it does not disturb either layout. */
/* The sold-out badge needs something to anchor to, but this wrapper must not
   become the element that decides the card's height — hence the fixed height
   matching .slot, which it replaced as the image container. */
.product-media { position: relative; display: block; width: 100%; height: 140px; flex-shrink: 0; }
.product-media .slot { height: 100%; }

/* The home rail sizes its images by aspect ratio rather than a fixed height,
   so the wrapper must not impose one there. */
.shop-rail-item .product-media { height: auto; }

.soldout-tag {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: rgba(42, 33, 32, 0.82);
}

/* The card stays legible and tappable — the product page still explains
   itself, it simply cannot be bought. */
.is-soldout .product-media .slot { filter: grayscale(1); opacity: 0.55; }
.is-soldout strong, .is-soldout .shop-rail-name { color: var(--muted); }

.stock-warn, .stock-note {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 700;
}
.stock-warn { color: var(--rose-deep); }
.stock-note { color: var(--muted); }

.btn[disabled] { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
.qty button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.search-body { display: flex; flex-direction: column; gap: 16px; padding: 2px 20px 20px; }

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.search-field .ic { color: var(--muted); flex-shrink: 0; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.search-field input::placeholder { color: var(--muted); font-weight: 500; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px;
  text-align: center;
}
.search-empty .ic { color: var(--muted); }
.search-empty strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.search-empty button { font-size: 13px; font-weight: 800; color: var(--rose-deep); }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.noscript { padding: 40px 24px; font-family: var(--font-body); }
.noscript h1 { font-family: var(--font-display); margin-bottom: 12px; }
.noscript p { color: var(--body); line-height: 1.6; }

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

/* --------------------------------------------------------------------------
   Retail: cart icon, product page, cart, checkout
   -------------------------------------------------------------------------- */

.cart-btn { position: relative; width: 40px; height: 40px; border-radius: 13px; }
.cart-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--rose-deep);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--bg);
}

.shop-grid .product { text-align: left; width: 100%; }
.detail-hero--product .slot { background: #fff; }
.detail-hero--product .slot img { object-fit: contain; padding: 20px; }

.product-thumb-row { display: flex; gap: 9px; padding: 12px 18px 0; overflow-x: auto; }
.product-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 11px; overflow: hidden;
  background: #fff; border: 1.5px solid var(--line);
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.product-thumb.is-active { border-color: var(--rose-deep); }

.how-to { width: 100%; }
.how-to p { font-size: 13.5px; font-weight: 500; color: var(--body); line-height: 1.55; margin-top: 8px; }

.cart-body { display: flex; flex-direction: column; gap: 16px; padding: 2px 20px 24px; }

.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 16px; text-align: center;
}
.cart-empty .ic { color: var(--muted); }
.cart-empty strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.cart-empty button { font-size: 13.5px; font-weight: 800; color: var(--rose-deep); }

.cart-line { display: flex; gap: 13px; padding: 13px; align-items: flex-start; }
.cart-line .slot { width: 66px; height: 66px; border-radius: 13px; background: #fff; border: 1px solid var(--line); }
.cart-line .slot img { object-fit: contain; padding: 6px; }
.cart-line-text { flex: 1; min-width: 0; }
.cart-line-text strong { display: block; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.cart-line-text > span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.cart-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.cart-line-side strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.link-remove { font-size: 11.5px; font-weight: 700; color: var(--muted); }

.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; }
.qty button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.qty em { min-width: 26px; text-align: center; font-size: 13px; font-weight: 800; font-style: normal; color: var(--ink); }

.totals { padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.totals > div { display: flex; justify-content: space-between; gap: 14px; }
.totals dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.totals dd { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.totals-grand dt { font-weight: 800; color: var(--ink); }
.totals-grand dd { font-size: 16px; font-weight: 800; color: var(--rose-deep); }

.order-summary { padding: 15px; display: flex; flex-direction: column; gap: 9px; }
.summary-line { display: flex; justify-content: space-between; gap: 14px; }
.summary-line span { font-size: 13px; font-weight: 600; color: var(--body); }
.summary-line em { font-size: 13px; font-weight: 800; font-style: normal; color: var(--ink); }

.field-label {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.field + .field { margin-top: 12px; }
.field-pair { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 12px; }
.field-pair .field + .field { margin-top: 0; }

.input {
  width: 100%; height: 46px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 14px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
  background: #fff; outline: none;
}
.input:focus { border-color: var(--rose-deep); }
.input::placeholder { color: var(--muted); font-weight: 500; }

.password-input { position: relative; }
.password-input .input { padding-right: 46px; }
.password-eye {
  position: absolute; top: 0; right: 0; height: 46px; width: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.password-eye:hover { color: var(--ink); }

.password-meter { margin-top: 8px; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.password-meter span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.2s ease, background 0.2s ease; }
.password-meter.is-s1 span { width: 20%; background: #C94F4F; }
.password-meter.is-s2 span { width: 45%; background: #D98A3B; }
.password-meter.is-s3 span { width: 65%; background: #C9A73B; }
.password-meter.is-s4 span { width: 85%; background: var(--sage); }
.password-meter.is-s5 span { width: 100%; background: #5E8C5A; }
.password-meter-label { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); min-height: 15px; }

.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.see-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--rose-deep);
  flex-shrink: 0;
  white-space: nowrap;
}
.stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* Auth, account chips, recurring notice */
.form-error {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--rose-deep); line-height: 1.5;
}
.form-error .ic { flex-shrink: 0; margin-top: 1px; }
.inline-link { font-weight: 800; color: var(--rose-deep); font-size: inherit; }

.auth-cta { display: flex; gap: 10px; }
.auth-cta .btn { flex: 1; }

.account-chip { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.account-chip .ic { color: var(--sage); flex-shrink: 0; }
.account-chip-text { flex: 1; min-width: 0; }
.account-chip-text strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.account-chip-text span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.account-chip--guest { flex-direction: column; align-items: stretch; gap: 11px; }

/* Deliberately NOT a card/row like the provider list below it — just a thin
   confirmation line, so it can never be mistaken for a selectable option. */
.booking-as {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 2px; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.booking-as .ic { color: var(--sage); flex-shrink: 0; }
.booking-as strong { color: var(--ink); font-weight: 700; }
.account-chip-actions { display: flex; gap: 9px; }
.account-chip-actions .btn { flex: 1; }

.recurring-note { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; }
.recurring-note .ic { color: var(--rose-deep); flex-shrink: 0; margin-top: 1px; }
.recurring-note strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.recurring-note span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.shop-body .section + .section { margin-top: 6px; }
.product-brand { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; }

/* Shop filters — categories stay on a row, sorting lives in a menu. */
.filter-bar { display: flex; flex-direction: column; gap: 12px; }
.chip-row--flush { padding: 0 20px; margin: 0 -20px; }

.filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filter-count { font-size: 12px; font-weight: 600; color: var(--muted); }

.menu { position: relative; flex-shrink: 0; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: 11px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ic:first-child { color: var(--muted); }
.menu > summary .ic:last-child { color: var(--muted); transition: transform 160ms ease; }
.menu[open] > summary { border-color: var(--rose-deep); color: var(--rose-deep); }
.menu[open] > summary .ic { color: var(--rose-deep); }
.menu[open] > summary .ic:last-child { transform: rotate(180deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 16px 36px rgba(42, 33, 32, 0.16);
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 11px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--body); text-align: left;
}
.menu-item:hover { background: var(--bg); }
.menu-item.is-active { color: var(--rose-deep); font-weight: 800; }
.menu-item .ic { color: var(--rose-deep); flex-shrink: 0; }

.empty-note { font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: center; padding: 30px 0; }

/* All treatments — list / grid toggle */
.view-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.view-bar .lede { flex: 1; }
.view-toggle {
  display: inline-flex; gap: 2px; padding: 3px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.view-btn {
  width: 34px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.view-btn.is-active { background: var(--ink); color: #fff; }

.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.treat-cell {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px; border-radius: 15px; text-align: left; gap: 2px;
}
.treat-cell .slot { width: 100%; height: 96px; border-radius: 11px; margin-bottom: 8px; }
.treat-cell-name { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.treat-cell-price { font-size: 13px; font-weight: 700; color: var(--rose-deep); margin-top: 3px; }
.treat-cell-meta { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Home shop rail — roughly three products visible, free-scrolling (no snap:
   the visitor can stop anywhere, not just on a card boundary). */
.shop-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  padding: 0 20px;
  overflow-x: auto;
}
.shop-rail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  min-width: 0;
}
.shop-rail-item .slot {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--line);
}
.shop-rail-item .slot img { object-fit: contain; padding: 9px; }
.shop-rail-name {
  font-size: 11.5px; font-weight: 700; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-rail-price { font-size: 12px; font-weight: 800; color: var(--rose-deep); }

/* Reviews */
.rating-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; }
.rating-score-big { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1; }
.rating-hero .rating-stars { color: var(--gold); }
.rating-hero p { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.review-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.review-head .avatar { width: 36px; height: 36px; font-size: 13.7px; }
.review-who { flex: 1; min-width: 0; }
.review-who strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.review-who span { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.stars { display: flex; gap: 1px; flex-shrink: 0; }
.stars .on { color: var(--gold); }
.stars .off { color: var(--line); }

/* FAQ / policy accordions */
.qa { padding: 0; overflow: hidden; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 15px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { color: var(--muted); flex-shrink: 0; transition: transform 160ms ease; }
.qa[open] summary .ic { transform: rotate(180deg); }
.qa[open] summary { color: var(--rose-deep); }
.qa p {
  padding: 0 15px 15px;
  font-size: 13px; font-weight: 500; color: var(--body); line-height: 1.6;
}

/* Contact */
.contact-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.contact-action {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 15px 8px; border-radius: 15px; color: var(--ink);
}
.contact-action .ic { color: var(--rose-deep); }
.contact-action span { font-size: 11.5px; font-weight: 700; }

.visit-hours.is-today dt { color: var(--rose-deep); }
.visit-hours.is-today dd { color: var(--ink); font-weight: 700; }
.visit-hours dt em {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--rose-deep);
  background: var(--rose-soft); padding: 2px 6px; border-radius: 99px; margin-left: 6px;
}
.hint-note { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.5; }

.input--area { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; }

.form-ok {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--sage); line-height: 1.5;
}
.form-ok .ic { flex-shrink: 0; margin-top: 1px; }
.book-list .treat-grid, .book-list .svc-list { width: 100%; }
.view-bar.pad { padding: 0 20px; }

/* Appointment & membership management */
.appt { flex-direction: column; align-items: stretch; gap: 12px; }
.appt-head { display: flex; align-items: center; gap: 13px; }
.appt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.appt-actions .btn { flex: 1; min-width: 92px; padding: 0 10px; font-size: 12.5px; }
.appt-note { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.45; }
.manage-row { display: flex; gap: 8px; flex-wrap: wrap; }
.manage-row .btn { flex: 1; min-width: 100px; padding: 0 10px; font-size: 12.5px; }

/* Dedicated account pages */
.appt--link { width: 100%; text-align: left; }
.appt--link .appt-head { width: 100%; }
.appt--link .ic { color: var(--muted); flex-shrink: 0; }

.stat-row-client { display: flex; gap: 10px; }
.stat-tile { flex: 1; padding: 13px; text-align: center; border-radius: 14px; }
.stat-tile strong { display: block; font-size: 20px; font-weight: 800; color: var(--rose-deep); }
.stat-tile span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.policy-row-client { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.policy-row-client strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.policy-row-client span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.switch-client { width: 44px; height: 26px; border-radius: 99px; background: var(--line); position: relative; flex-shrink: 0; transition: background 150ms; }
.switch-client span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 150ms; }
.switch-client.is-on { background: var(--rose-deep); }
.switch-client.is-on span { left: 21px; }

.link-row--danger .ic-lead, .link-row--danger .link-label { color: var(--rose-deep); }
.cart-body .link-row + .link-row { margin-top: 8px; }
/* A tab root keeps its title centred even with the back button present. */
.header-slot .topbar, .screen > .topbar { position: relative; }
.photo-credit { font-size: 11px; font-weight: 500; color: var(--muted); opacity: 0.85; }

/* Video */
.video { margin: 0; }
.video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--ink);
  display: block;
  object-fit: cover;
}
.video--portrait video { aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; }
.video figcaption { margin-top: 9px; }
.video figcaption strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.video figcaption span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.founder .video { margin-top: 4px; }

/* Service menu — grid view */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-cell {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px; border-radius: 16px; text-align: left; gap: 2px;
}
.cat-cell .slot { width: 100%; height: 104px; border-radius: 12px; margin-bottom: 9px; }
.cat-cell-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.cat-cell-meta { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.menu-list .view-bar { margin-bottom: 2px; }

/* ---- "Leave us a Google review" ---- */

/* A card rather than a bare button: it is an ask, not a step in a flow, and
   it sits among the reviews it is asking the reader to join. */
.review-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 20px;
  margin: 4px 0 2px;
  text-align: center;
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--rose-soft);
}
.review-cta-stars { display: flex; gap: 2px; color: var(--gold); }
.review-cta strong { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.review-cta-text { font-size: 13px; font-weight: 500; color: var(--body); line-height: 1.5; max-width: 340px; }
.review-cta-btn { width: auto; padding: 0 20px; margin-top: 6px; pointer-events: none; }
.review-cta:active { transform: scale(0.99); }

/* ---- Home: pieces the wide layout needs, folded away on a phone ----

   The desktop hero, category cards and review row are built from the same
   markup as the phone's. Rather than render two versions, the extra parts
   ship always and are hidden here, where the column is too narrow for them. */

.hero-eyebrow, .hero-lede, .hero-rating,
.cat-rail-blurb, .cat-rail-count { display: none; }
.hero-actions { display: contents; }
.pill-cta--ghost { display: none; }

/* The phone shows one review; the other two are there for the wide layout. */
.review-row { display: contents; }
.review-row .review-card:nth-child(n + 2) { display: none; }
.review-row .review-card .rating-stars { display: none; }

.story-link-text .eyebrow, .story-link-more { display: none; }

/* The section eyebrow ("MENU", "TRENDING") belongs to the wide layout; the
   phone's column is too narrow to spend a line on it. */
.section-eyebrow { display: none; }