/* ============================================================================
   Shop page theme system. Every visual decision on the public shop page reads
   a token set here; the owner's choices (font / mode / corners / hero) switch
   the tokens, never the markup. Loaded after design.css so it wins.
   ========================================================================== */

.shop-page {
  /* Surfaces */
  --sp-bg: #f5f6fb;
  --sp-surface: #ffffff;
  --sp-surface-2: #eef0f6;
  --sp-ink: #181b2a;
  --sp-ink-2: #292f46;
  --sp-muted: #5b6178;
  --sp-line: #e2e4ee;
  --sp-line-2: #d5d8e5;
  --sp-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 10px 30px -18px rgba(20, 21, 26, 0.25);
  --sp-shadow-2: 0 2px 4px rgba(20, 21, 26, 0.05), 0 18px 40px -20px rgba(20, 21, 26, 0.35);
  /* Hero */
  --sp-hero-bg: #15161c;
  --sp-hero-ink: #ffffff;
  --sp-hero-muted: rgba(255, 255, 255, 0.72);
  /* Radii (soft) */
  --sp-r-sm: 8px;
  --sp-r: 14px;
  --sp-r-lg: 20px;
  --sp-r-pill: 999px;
  /* Type */
  --sp-display: "Inter Variable", system-ui, sans-serif;
  --sp-text: "Inter Variable", system-ui, sans-serif;
  --sp-display-weight: 700;
  --sp-display-tracking: -0.03em;
  --sp-display-case: none;

  background: var(--sp-bg);
  color: var(--sp-ink);
  font-family: var(--sp-text);
  -webkit-font-smoothing: antialiased;
}
/* ---- Token bridge --------------------------------------------------------------
   Everything customer-facing (booking flow, manage a visit, account, offers) is written against
   the base design tokens. Inside a themed surface those tokens resolve to the theme, so the whole
   journey follows the owner's choices without a second stylesheet. */
.shop-page {
  --font: var(--sp-text);
  --canvas: var(--sp-bg);
  --surface: var(--sp-surface);
  --ink: var(--sp-ink);
  --ink-2: var(--sp-ink-2);
  --muted: var(--sp-muted);
  --muted-2: var(--sp-muted);
  --line: var(--sp-line);
  --line-2: var(--sp-line-2);
  --accent: var(--sp-accent);
  --accent-dark: var(--sp-accent-dark);
  --accent-grad: linear-gradient(135deg, var(--sp-accent-dark) 0%, var(--sp-accent) 100%);
  --ollo: var(--sp-accent);
  --ollo-soft: var(--sp-soft);
  --on-accent: var(--sp-accent-ink);
  --r-sm: var(--sp-r-sm);
  --r: var(--sp-r);
  --r-lg: var(--sp-r-lg);
  --r-xl: var(--sp-r-lg);
  --r-pill: var(--sp-r-pill);
  --shadow-1: var(--sp-shadow);
  --shadow-2: var(--sp-shadow-2);
}
.shop-page.accent-ollo { --sp-accent: #3a7563; --sp-accent-dark: #3a7563; --sp-soft: #e6f0eb; }
.shop-page.mode-dark {
  --good: #7fc79a; --good-bg: rgba(63, 125, 92, 0.22);
  --warn: #f0a084; --warn-bg: rgba(184, 97, 58, 0.22);
  --note: #e3c98a; --note-bg: rgba(160, 130, 60, 0.22);
  --blocked-a: #1e2027; --blocked-b: #23252d; --blocked-line: #3a3d48;
  --rail: #0a0b0f;
}

.shop-page.mode-dark {
  --sp-bg: #0f1014;
  --sp-surface: #17181e;
  --sp-surface-2: #1e2027;
  --sp-ink: #f3f2ee;
  --sp-ink-2: #d6d5cf;
  --sp-muted: #c2c4cb;
  --sp-line: rgba(255, 255, 255, 0.08);
  --sp-line-2: rgba(255, 255, 255, 0.14);
  --sp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --sp-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  --sp-hero-bg: #0a0b0f;
  color-scheme: dark;
}
.shop-page.corners-sharp { --sp-r-sm: 2px; --sp-r: 4px; --sp-r-lg: 6px; --sp-r-pill: 4px; }

/* Accent stays owner-chosen; map it onto the theme. */
.shop-page { --sp-accent-ink: #ffffff; }
.shop-page.accent-ink { --sp-accent: #1d1f26; --sp-accent-dark: #000; --sp-soft: rgba(29, 31, 38, 0.08); }
.shop-page.mode-dark.accent-ink { --sp-accent: #f3f2ee; --sp-accent-dark: #fff; --sp-accent-ink: #14151a; --sp-soft: rgba(243, 242, 238, 0.12); }
.shop-page.accent-sage { --sp-accent: #3f7d5c; --sp-accent-dark: #2f6247; --sp-soft: rgba(63, 125, 92, 0.12); }
.shop-page.accent-clay { --sp-accent: #a8552f; --sp-accent-dark: #8a4323; --sp-soft: rgba(168, 85, 47, 0.12); }
.shop-page.accent-plum { --sp-accent: #6e3b7a; --sp-accent-dark: #562c60; --sp-soft: rgba(110, 59, 122, 0.12); }
.shop-page.accent-slate { --sp-accent: #4a5568; --sp-accent-dark: #364152; --sp-soft: rgba(74, 85, 104, 0.12); }
.shop-page.mode-dark.accent-sage { --sp-accent: #6fb98f; --sp-accent-dark: #86c9a2; --sp-accent-ink: #0f1014; }
.shop-page.mode-dark.accent-clay { --sp-accent: #e08a62; --sp-accent-dark: #eaa082; --sp-accent-ink: #0f1014; }
.shop-page.mode-dark.accent-plum { --sp-accent: #b782c4; --sp-accent-dark: #c79bd1; --sp-accent-ink: #0f1014; }
.shop-page.mode-dark.accent-slate { --sp-accent: #9aa6ba; --sp-accent-dark: #b2bccc; --sp-accent-ink: #0f1014; }
.shop-page.mode-dark.accent-ollo { --sp-accent: #a8d5c2; --sp-accent-dark: #c4e3d6; --sp-accent-ink: #06110f; --sp-soft: rgba(168, 213, 194, 0.14); }

/* ---- Base overrides -------------------------------------------------------- */
.shop-page h1, .shop-page h2, .shop-page h3, .shop-page .sp-next-time {
  font-family: var(--sp-display);
  font-weight: var(--sp-display-weight);
  letter-spacing: var(--sp-display-tracking);
  text-transform: var(--sp-display-case);
}
.shop-page .button { font-family: var(--sp-text); border-radius: var(--sp-r); }
.shop-page .button.primary { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .button.primary:hover { background: var(--sp-accent-dark); border-color: var(--sp-accent-dark); }
.shop-page .button.secondary { background: var(--sp-surface); border: 1px solid var(--sp-line-2); color: var(--sp-ink); }
.shop-page .button.secondary:hover { background: var(--sp-surface-2); }
.shop-page a { color: var(--sp-accent-dark); }

/* Nav */
.shop-page .sp-nav { background: color-mix(in srgb, var(--sp-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--sp-line); }
.shop-page .sp-brand { color: var(--sp-ink); font-family: var(--sp-display); font-weight: var(--sp-display-weight); letter-spacing: var(--sp-display-tracking); text-transform: var(--sp-display-case); font-size: 17px; }
.shop-page .sp-brand .shop-emblem { border-radius: var(--sp-r-sm); background: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .sp-nav nav a { color: var(--sp-ink-2); }
.shop-page .sp-nav nav a:hover { color: var(--sp-ink); }

/* Logos: transparent PNG/SVG must sit on the page, never in a white box. */
.shop-page img.shop-emblem.shop-logo,
.shop-page img.sp-hero-logo,
.shop-page .sp-footer-brand img.shop-emblem { background: transparent; border: 0; padding: 0; object-fit: contain; box-shadow: none; border-radius: 0; }
.shop-page .sp-brand img.shop-emblem { width: auto; max-width: 140px; height: 32px; }
.shop-page .sp-footer-brand img.shop-emblem { width: auto; max-width: 120px; height: 36px; }

/* ---- Hero ------------------------------------------------------------------- */
.shop-page .sp-hero { background: var(--sp-hero-bg); color: var(--sp-hero-ink); padding: 0; text-align: left; position: relative; overflow: hidden; }
.shop-page .sp-hero::before, .shop-page .sp-hero::after { content: none; }
.shop-page .sp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-page .sp-hero.has-cover .sp-hero-inner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shop-page .sp-hero.no-cover { background: var(--sp-hero-bg); }
.shop-page.mode-light .sp-hero.no-cover { background: var(--sp-surface); color: var(--sp-ink); --sp-hero-ink: var(--sp-ink); --sp-hero-muted: var(--sp-muted); border-bottom: 1px solid var(--sp-line); }
.shop-page .sp-hero-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 88px); display: grid; gap: 0; justify-items: start; }
.shop-page .sp-hero-copy { display: grid; gap: 14px; justify-items: start; max-width: 680px; position: relative; z-index: 1; }
.shop-page .sp-hero-logo { width: auto; height: 64px; max-width: 220px; margin-bottom: 6px; }
.shop-page .sp-hero-initials { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--sp-r); background: var(--sp-accent); color: var(--sp-accent-ink); font-family: var(--sp-display); font-weight: var(--sp-display-weight); font-size: 22px; letter-spacing: 0; }
.shop-page .sp-hero h1 { margin: 0; font-size: clamp(40px, 6.4vw, 84px); line-height: 0.98; color: var(--sp-hero-ink); }
.shop-page .sp-strap { margin: 0; font-size: clamp(17px, 1.6vw, 21px); color: var(--sp-hero-muted); max-width: 46ch; line-height: 1.5; }
.shop-page .sp-open { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--sp-hero-ink); border-radius: var(--sp-r-pill); }
.shop-page.mode-light .sp-hero.no-cover .sp-open { background: var(--sp-surface-2); border-color: var(--sp-line); }
.shop-page .sp-hero-meta { color: var(--sp-hero-muted); justify-content: flex-start; }
.shop-page .sp-hero-rating { color: var(--sp-hero-ink); }
.shop-page .sp-hero-actions { justify-content: flex-start; margin-top: 8px; }
.shop-page .sp-hero-actions .button { min-height: 48px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.shop-page .sp-hero .button.secondary { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: var(--sp-hero-ink); }
.shop-page .sp-hero .button.secondary:hover { background: rgba(255, 255, 255, 0.16); }
.shop-page.mode-light .sp-hero.no-cover .button.secondary { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); }

/* Editorial: photo behind, text bottom-left, gradient from the left and bottom. */
.shop-page.hero-editorial .sp-hero.has-cover .sp-hero-inner { min-height: min(78vh, 720px); align-content: end; }
.shop-page.hero-editorial .sp-hero.has-cover .sp-hero-inner::before { background: linear-gradient(180deg, rgba(8, 9, 12, 0.15) 0%, rgba(8, 9, 12, 0.35) 45%, rgba(8, 9, 12, 0.85) 100%), linear-gradient(90deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 70%); inset: -100vh -100vw; }

/* Centred: classic, text in the middle. */
.shop-page.hero-centred .sp-hero-inner { justify-items: center; text-align: center; min-height: min(70vh, 640px); align-content: center; }
.shop-page.hero-centred .sp-hero-copy { justify-items: center; }
.shop-page.hero-centred .sp-hero-meta, .shop-page.hero-centred .sp-hero-actions { justify-content: center; }
.shop-page.hero-centred .sp-hero.has-cover .sp-hero-inner::before { background: rgba(8, 9, 12, 0.6); inset: -100vh -100vw; }

/* Split: text left on a solid panel, photo right. */
.shop-page.hero-split .sp-hero .sp-hero-img { display: none; }
.shop-page.hero-split .sp-hero.has-cover .sp-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.shop-page.hero-split .sp-hero.has-cover .sp-hero-inner::before { content: none; }
.shop-page.hero-split .sp-hero-side { position: relative; aspect-ratio: 4 / 5; max-height: 620px; width: 100%; }
.shop-page.hero-split .sp-hero-side img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-2); }
.shop-page.mode-light.hero-split .sp-hero.has-cover { background: var(--sp-surface); color: var(--sp-ink); --sp-hero-ink: var(--sp-ink); --sp-hero-muted: var(--sp-muted); border-bottom: 1px solid var(--sp-line); }
.shop-page.mode-light.hero-split .sp-hero.has-cover .sp-open { background: var(--sp-surface-2); border-color: var(--sp-line); }
.shop-page.mode-light.hero-split .sp-hero.has-cover .button.secondary { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); }

/* ---- Sections ---------------------------------------------------------------- */
.shop-page .sp-section { max-width: 1140px; }
.shop-page .sp-section h2 { font-size: clamp(26px, 2.8vw, 36px); color: var(--sp-ink); }
.shop-page .sp-section-head p { color: var(--sp-muted); }
.shop-page .sp-about p { color: var(--sp-ink-2); font-family: var(--sp-text); }
.shop-page.font-editorial .sp-about p, .shop-page.font-heritage .sp-about p { font-family: var(--sp-display); font-weight: 400; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.01em; text-transform: none; }

/* Cards */
.shop-page .sp-next-list button, .shop-page .sp-services button, .shop-page .sp-barber, .shop-page .sp-two > .sp-section {
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg); color: var(--sp-ink); box-shadow: var(--sp-shadow);
}
.shop-page .sp-next-list button:hover, .shop-page .sp-services button:hover { border-color: var(--sp-line-2); box-shadow: var(--sp-shadow-2); }
.shop-page .sp-next-list button { border-radius: var(--sp-r); }
.shop-page .sp-next-list small, .shop-page .sp-service-text small, .shop-page .sp-service-meta small, .shop-page .sp-barber-text small { color: var(--sp-muted); }
.shop-page .sp-next-time { color: var(--sp-accent-dark); font-size: 20px; }
.shop-page .sp-next-list .avatar, .shop-page .sp-next-photo { border-radius: var(--sp-r-sm); }
.shop-page .sp-cat h3 { color: var(--sp-ink); font-size: 17px; }
.shop-page .sp-cat h3::after { background: var(--sp-line-2); }
.shop-page .sp-services button { border-radius: var(--sp-r); }
.shop-page .sp-service-go { background: var(--sp-surface-2); color: var(--sp-muted); }
.shop-page .sp-services button:hover .sp-service-go { background: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .sp-popular { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-pill); }
.shop-page .sp-barber .avatar.large, .shop-page .sp-photo, .shop-page .sp-barber-next { border-radius: var(--sp-r); }
.shop-page .sp-barber-next { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-pill); }
.shop-page .sp-skills em { background: var(--sp-surface-2); border-color: var(--sp-line); color: var(--sp-ink-2); border-radius: var(--sp-r-pill); }
.shop-page .sp-ig { color: var(--sp-muted); }

/* Booking block */
.shop-page .sp-booking { background: var(--sp-surface); border-color: var(--sp-line); }
.shop-page.mode-dark .sp-booking { background: var(--sp-surface); }

/* Hours / find */
.shop-page .sp-hours > div.today { background: var(--sp-soft); }
.shop-page .sp-address a { color: var(--sp-accent-dark); }
.shop-page .sp-address p svg, .shop-page .sp-policies li svg { color: var(--sp-muted); }
.shop-page .sp-policies ul { color: var(--sp-ink-2); }
.shop-page .sp-closures, .shop-page .sp-transport { color: var(--sp-muted); }

/* Gallery */
.shop-page .sp-gallery img { border-radius: var(--sp-r); }

/* Footer */
.shop-page .sp-footer { background: var(--sp-surface); border-top: 1px solid var(--sp-line); }
.shop-page .sp-footer-inner { color: var(--sp-ink-2); }
.shop-page .sp-footer-brand { color: var(--sp-ink); }
.shop-page .sp-footer-brand .shop-emblem { border-radius: var(--sp-r-sm); background: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .sp-footer-links a { color: var(--sp-ink-2); }
.shop-page .sp-footer-links a:hover { color: var(--sp-accent-dark); }

/* Phone */
@media (max-width: 767px) {
  .shop-page .sp-hero-inner { padding: 40px 20px 36px; }
  .shop-page.hero-editorial .sp-hero.has-cover .sp-hero-inner { min-height: min(72vh, 560px); }
  .shop-page.hero-centred .sp-hero-inner { min-height: min(60vh, 480px); }
  .shop-page.hero-split .sp-hero.has-cover .sp-hero-inner { grid-template-columns: 1fr; }
  .shop-page.hero-split .sp-hero-side { aspect-ratio: 16 / 10; order: -1; }
  .shop-page .sp-hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .shop-page .sp-hero-logo { height: 48px; }
  .shop-page .sp-hero-initials { width: 52px; height: 52px; font-size: 18px; }
  .shop-page .sp-hero-actions { width: 100%; }
  .shop-page .sp-hero-actions .button { flex: 1 1 auto; justify-content: center; }
}

/* Dark look: a dark single-colour logo would vanish, so flip it to white there. Photo heroes are
   dark too (scrim), so the hero logo flips whenever there is a cover. Full-colour logos stay as they
   are by turning this off under Shop page → Logo. */
.shop-page.mode-dark.logo-flip .sp-brand img.shop-emblem,
.shop-page.mode-dark.logo-flip .sp-footer-brand img.shop-emblem,
.shop-page.mode-dark.logo-flip img.sp-hero-logo,
.shop-page.mode-light.logo-flip .sp-hero.has-cover:not(.split-light) img.sp-hero-logo { filter: invert(1) brightness(1.6) grayscale(1); }
.shop-page.mode-light.hero-split.logo-flip .sp-hero.has-cover img.sp-hero-logo { filter: none; }

/* Accent-coloured text on dark surfaces uses the theme's lifted accent, not the light-mode one. */
.shop-page.mode-dark .sp-review-reply { border-left-color: var(--sp-accent); }
.shop-page.mode-dark .sp-review-reply strong { color: var(--sp-accent); }
.shop-page.mode-dark.accent-ink .sp-review-reply strong { color: var(--sp-ink); }

/* =============================================================================
   Booking flow · manage a visit · account · offers — themed overrides.
   style.css draws these with fixed light colours; inside a themed surface every
   surface, line, chip and control reads the theme instead. Scoped to .shop-page.
   ============================================================================ */
.shop-page.booking-app, .shop-page .booking-app, .shop-page.customer-area { background: var(--sp-bg); color: var(--sp-ink); font-family: var(--sp-text); }
.shop-page .booking-app.embedded { background: transparent; }

/* Standalone header */
.shop-page .shop-header { color: var(--sp-ink); }
.shop-page .shop-header h1, .shop-page .shop-header .shop-name { font-family: var(--sp-display); font-weight: var(--sp-display-weight); letter-spacing: var(--sp-display-tracking); text-transform: var(--sp-display-case); color: var(--sp-ink); }
.shop-page .shop-header .shop-header-right, .shop-page .shop-header small, .shop-page .shop-header p { color: var(--sp-muted); }
.shop-page .shop-emblem { background: var(--sp-accent); color: var(--sp-accent-ink); border-radius: var(--sp-r-sm); }
.shop-page .mini-shop-emblem { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-sm); }
.shop-page.mode-dark.logo-flip .shop-header img.shop-logo,
.shop-page.mode-dark.logo-flip .mini-shop-emblem.shop-logo,
.shop-page.mode-dark.logo-flip .customer-area .sp-brand img.shop-logo { filter: invert(1) brightness(1.6) grayscale(1); }

/* Booking hero: accent panel, display face */
.shop-page .booking-hero { background: var(--sp-accent); color: var(--sp-accent-ink); border-radius: var(--sp-r-lg); }
.shop-page.accent-ink .booking-hero { background: var(--sp-hero-bg); color: #fff; }
.shop-page.mode-dark.accent-ink .booking-hero { background: var(--sp-surface-2); color: var(--sp-ink); }
.shop-page .booking-hero h1 { font-family: var(--sp-display); font-weight: var(--sp-display-weight); letter-spacing: var(--sp-display-tracking); text-transform: var(--sp-display-case); color: inherit; }
/* Solid ink on the accent panel: no opacity tricks, they cost AA on mid-tone accents. */
.shop-page .booking-hero p, .shop-page .hero-details, .shop-page .hero-details span, .shop-page .hero-copy .eyebrow, .shop-page .hero-seal span, .shop-page .hero-seal > strong, .shop-page .hero-seal > strong > span { color: inherit; }
.shop-page .booking-hero a.hero-link, .shop-page .booking-hero a.hero-link:hover { color: var(--sp-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.shop-page .art-orbit, .shop-page .hero-seal { border-color: color-mix(in srgb, var(--sp-accent-ink) 35%, transparent); }
.shop-page .seal-rule { background: color-mix(in srgb, var(--sp-accent-ink) 45%, transparent); }
.shop-page.accent-ink .booking-hero, .shop-page.accent-ink .booking-hero p, .shop-page.accent-ink .booking-hero span, .shop-page.accent-ink .booking-hero a.hero-link { color: #fff; }
.shop-page.mode-dark.accent-ink .booking-hero, .shop-page.mode-dark.accent-ink .booking-hero p, .shop-page.mode-dark.accent-ink .booking-hero span, .shop-page.mode-dark.accent-ink .booking-hero a.hero-link { color: var(--sp-ink); }

/* Headings inside the flow */
.shop-page .booking-body h1, .shop-page .booking-body h2, .shop-page .booking-body h3,
.shop-page .booking-step h2, .shop-page .public-confirmation h1, .shop-page .public-confirmation h2,
.shop-page .ca-main h1, .shop-page .ca-main h2, .shop-page .ca-main h3, .shop-page .state-card h1 { font-family: var(--sp-display); font-weight: var(--sp-display-weight); letter-spacing: var(--sp-display-tracking); text-transform: var(--sp-display-case); color: var(--sp-ink); }
.shop-page .eyebrow { color: var(--sp-muted); }

/* Progress */
.shop-page .booking-progress button > span { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-muted); }
.shop-page .booking-progress button > i { background: var(--sp-line-2); }
.shop-page .booking-progress button[aria-current="step"] > span { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); box-shadow: 0 0 0 4px var(--sp-soft); }
.shop-page .booking-progress button.done > span { background: var(--sp-soft); border-color: transparent; color: var(--sp-accent-dark); }
.shop-page .booking-progress button[aria-current="step"] { color: var(--sp-ink); }
.shop-page .booking-progress button { color: var(--sp-muted); }

/* Search, filters, cards, chips */
.shop-page .service-search { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); border-radius: var(--sp-r); }
.shop-page .service-search input { color: var(--sp-ink); background: transparent; }
.shop-page .service-search input::placeholder { color: var(--sp-muted); }
.shop-page .filter-chips button, .shop-page .small-toggles button, .shop-page .tip-chips button { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink-2); border-radius: var(--sp-r-pill); }
.shop-page .filter-chips button[aria-pressed="true"], .shop-page .small-toggles button[aria-pressed="true"], .shop-page .tip-chips button[aria-pressed="true"] { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .service-choice, .shop-page .addon-choice, .shop-page .barber-choice, .shop-page .booking-summary, .shop-page .review-appointment, .shop-page .state-card, .shop-page .group-card, .shop-page .ca-card, .shop-page .ca-visit, .shop-page .offer-card { background: var(--sp-surface); border-color: var(--sp-line); color: var(--sp-ink); border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow); }
.shop-page .service-choice, .shop-page .addon-choice, .shop-page .barber-choice { border-radius: var(--sp-r); }
.shop-page .service-choice:hover, .shop-page .addon-choice:hover, .shop-page .barber-choice:hover { border-color: var(--sp-line-2); box-shadow: var(--sp-shadow-2); }
.shop-page .service-choice.chosen, .shop-page .addon-choice.chosen, .shop-page .barber-choice.chosen, .shop-page .barber-choice[aria-pressed="true"] { background: var(--sp-surface); border-color: var(--sp-accent); box-shadow: 0 0 0 1px var(--sp-accent), var(--sp-shadow); }
.shop-page .service-choice small, .shop-page .service-choice p, .shop-page .addon-choice small, .shop-page .barber-choice small, .shop-page .barber-choice p, .shop-page .booking-summary small, .shop-page .summary-meta, .shop-page .review-appointment > p, .shop-page .review-barber { color: var(--sp-muted); }
.shop-page .service-thumb, .shop-page .service-thumb.fade, .shop-page .service-thumb.beard, .shop-page .service-thumb.combo, .shop-page .service-thumb.junior, .shop-page .summary-service-icon { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-sm); }
.shop-page .popular-tag { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-pill); }
.shop-page .choice-radio { border-color: var(--sp-line-2); background: var(--sp-surface); }
.shop-page .service-choice.chosen .choice-radio, .shop-page .addon-choice.chosen .choice-radio { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .summary-price .deposit-line { background: var(--sp-soft); color: var(--sp-accent-dark); border-radius: var(--sp-r-sm); }
.shop-page .summary-price .deposit-line strong, .shop-page .summary-price .deposit-line b { color: var(--sp-accent-dark); }
.shop-page .portrait-selected { background: var(--sp-accent); color: var(--sp-accent-ink); }

/* Dates + times */
.shop-page .booking-dates button { background: var(--sp-surface); border-color: var(--sp-line); color: var(--sp-ink); border-radius: var(--sp-r); }
.shop-page .booking-dates button small { color: var(--sp-muted); }
.shop-page .booking-dates button.chosen { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .booking-dates button.chosen small, .shop-page .booking-dates button.chosen span, .shop-page .booking-dates button.chosen > strong { color: var(--sp-accent-ink); opacity: 1; }
.shop-page .booking-dates button:disabled { background: var(--sp-surface-2); color: var(--sp-muted); border-color: var(--sp-line); }
.shop-page .time-slots button { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); border-radius: var(--sp-r-sm); }
.shop-page .time-slots button:hover { border-color: var(--sp-accent); }
.shop-page .time-slots button.chosen, .shop-page .time-slots button[aria-pressed="true"] { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .time-slots button.chosen small, .shop-page .time-slots button.chosen span, .shop-page .time-slots button[aria-pressed="true"] small { color: var(--sp-accent-ink); opacity: 1; }
.shop-page .time-slots button:disabled { background: var(--sp-surface-2); border-color: var(--sp-line); color: var(--sp-muted); }
.shop-page .time-slots[aria-busy="true"]:empty { background: linear-gradient(90deg, var(--sp-surface-2) 25%, var(--sp-surface) 50%, var(--sp-surface-2) 75%); }

/* Forms */
.shop-page input, .shop-page select, .shop-page textarea, .shop-page .customer-fields textarea { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-line-2); border-radius: var(--sp-r-sm); font-family: var(--sp-text); }
.shop-page input::placeholder, .shop-page textarea::placeholder { color: var(--sp-muted); }
.shop-page input:focus, .shop-page select:focus, .shop-page textarea:focus { border-color: var(--sp-accent); box-shadow: 0 0 0 3px var(--sp-soft); outline: none; }
.shop-page label, .shop-page .field-label { color: var(--sp-ink-2); }
.shop-page .helper, .shop-page .hint { color: var(--sp-muted); }

/* Confirmation + manage */
.shop-page .public-manage-link, .shop-page .online-link-row code { background: var(--sp-surface-2); border-color: var(--sp-line-2); color: var(--sp-ink); border-radius: var(--sp-r-sm); }
.shop-page .booking-footer { color: var(--sp-muted); border-top-color: var(--sp-line); }

/* Buttons + links inside the flow */
.shop-page .button.primary, .shop-page button.primary { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-accent-ink); border-radius: var(--sp-r); }
.shop-page .button.primary:hover, .shop-page button.primary:hover { background: var(--sp-accent-dark); border-color: var(--sp-accent-dark); }
.shop-page .button.secondary, .shop-page button.secondary, .shop-page .button.ghost, .shop-page button.ghost { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); border-radius: var(--sp-r); }
.shop-page .button.secondary:hover, .shop-page button.secondary:hover, .shop-page .button.ghost:hover, .shop-page button.ghost:hover { background: var(--sp-surface-2); }
.shop-page .linklike, .shop-page a:not(.button) { color: var(--sp-accent-dark); }
.shop-page.mode-dark a:not(.button), .shop-page.mode-dark .linklike { color: var(--sp-accent); }

/* Customer account + offer */
.shop-page.customer-area .sp-nav { background: color-mix(in srgb, var(--sp-surface) 88%, transparent); border-bottom: 1px solid var(--sp-line); }
.shop-page.customer-area .sp-brand strong { color: var(--sp-ink); }
.shop-page .ca-tabs { background: var(--sp-surface); border-color: var(--sp-line); }
.shop-page .ca-tabs button { color: var(--sp-muted); }
.shop-page .ca-tabs button[aria-selected="true"], .shop-page .ca-tabs button.active { background: var(--sp-accent); color: var(--sp-accent-ink); }
.shop-page .ca-hero p, .shop-page .ca-main small, .shop-page .ca-main .muted { color: var(--sp-muted); }
.shop-page .sp-footer, .shop-page .customer-area > footer { background: var(--sp-surface); border-top: 1px solid var(--sp-line); color: var(--sp-muted); }
.shop-page .sp-powered { color: var(--sp-muted); }

/* Barber step: the "first available" tile and skill chips follow the accent, not OLLO blue. */
.shop-page .barber-portrait.forest { background: linear-gradient(135deg, var(--sp-accent-dark), var(--sp-accent)); color: var(--sp-accent-ink); }
.shop-page .barber-portrait .any-mark { background: color-mix(in srgb, var(--sp-accent-ink) 16%, transparent); }
.shop-page .barber-choice.any-barber { background: var(--sp-surface); }
.shop-page .barber-skills em { background: var(--sp-surface-2); color: var(--sp-ink-2); }
.shop-page .barber-portrait.plum, .shop-page .barber-portrait.slate, .shop-page .barber-portrait.sage, .shop-page .barber-portrait.sand, .shop-page .barber-portrait.blue, .shop-page .barber-portrait.clay,
.shop-page .service-thumb.plum, .shop-page .service-thumb.slate, .shop-page .service-thumb.sage, .shop-page .service-thumb.sand, .shop-page .service-thumb.blue, .shop-page .service-thumb.clay { background: var(--sp-soft); color: var(--sp-accent-dark); }
.shop-page .waitlist-card { background: var(--sp-surface-2); border-color: var(--sp-line); }
.shop-page .waitlist-card h4 { color: var(--sp-ink); }
.shop-page .waitlist-card p { color: var(--sp-muted); }

/* Date & time step */
.shop-page .next-available { background: var(--sp-surface); border-color: var(--sp-line); border-radius: var(--sp-r-lg); }
.shop-page .next-available .eyebrow { color: var(--sp-muted); }
.shop-page .next-chip { background: var(--sp-surface-2); border-color: var(--sp-line-2); border-radius: var(--sp-r); }
.shop-page .next-chip strong { color: var(--sp-ink); }
.shop-page .next-chip span { color: var(--sp-accent-dark); }
.shop-page.mode-dark .next-chip span { color: var(--sp-accent); }
.shop-page .next-chip:hover { border-color: var(--sp-accent); }
.shop-page .next-chip.chosen { background: var(--sp-accent); border-color: var(--sp-accent); }
.shop-page .next-chip.chosen strong, .shop-page .next-chip.chosen span { color: var(--sp-accent-ink); }
.shop-page .booking-dates button > strong { color: var(--sp-ink); }
.shop-page .booking-dates button.chosen > strong, .shop-page .booking-dates button.chosen > span, .shop-page .booking-dates button.chosen > small { color: var(--sp-accent-ink); }
.shop-page .slot-heading > span { color: var(--sp-muted); }
.shop-page .available-dot { background: var(--sp-accent); }
.shop-page .slot-note, .shop-page .booking-body .helper { color: var(--sp-muted); }

/* Initials avatars: pastel tiles vanish on dark, so use the accent tile there. */
.shop-page.mode-dark .avatar.sage, .shop-page.mode-dark .avatar.sand, .shop-page.mode-dark .avatar.blue, .shop-page.mode-dark .avatar.clay, .shop-page.mode-dark .avatar.plum, .shop-page.mode-dark .avatar.slate { background: var(--sp-soft); color: var(--sp-accent); border-color: transparent; }
.shop-page.mode-dark.accent-ink .avatar.sage, .shop-page.mode-dark.accent-ink .avatar.sand, .shop-page.mode-dark.accent-ink .avatar.blue, .shop-page.mode-dark.accent-ink .avatar.clay, .shop-page.mode-dark.accent-ink .avatar.plum, .shop-page.mode-dark.accent-ink .avatar.slate { background: var(--sp-surface-2); color: var(--sp-ink); }

/* Phone: the sticky actions bar follows the theme surface. */
@media (max-width: 740px) {
  .shop-page .booking-actions { background: color-mix(in srgb, var(--sp-surface) 96%, transparent); border-top-color: var(--sp-line); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); }
}

/* Confirmation + manage page odds and ends the sweep missed on the shared shell. */
.shop-page .hero-seal, .shop-page .hero-seal > strong, .shop-page .hero-seal > strong > span, .shop-page .hero-seal > span { color: inherit; }
.shop-page .hero-art .hero-seal { opacity: 1; }
.shop-page .cancellation-note { background: var(--sp-surface-2); color: var(--sp-ink-2); border-color: var(--sp-line); border-radius: var(--sp-r); }
.shop-page .cancellation-note p, .shop-page .cancellation-note svg, .shop-page .cancellation-note strong { color: var(--sp-ink-2); }
.shop-page .cancellation-note strong { color: var(--sp-ink); }
.shop-page .action-tile { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-line-2); border-radius: var(--sp-r); }
.shop-page .action-tile svg { color: var(--sp-accent-dark); }
.shop-page.mode-dark .action-tile svg { color: var(--sp-accent); }
.shop-page .action-tile:hover { border-color: var(--sp-accent); }
.shop-page .action-tile small, .shop-page .action-tile span { color: var(--sp-muted); }
/* Customer account "your usual" card: inverted panel in both looks. */
.shop-page .ca-usual { background: var(--sp-hero-bg); color: #fff; }
.shop-page .ca-usual .eyebrow, .shop-page .ca-usual p { color: rgba(255, 255, 255, 0.8); }
.shop-page .ca-usual h2 { color: #fff; }
.shop-page.mode-dark .ca-usual { background: var(--sp-surface-2); color: var(--sp-ink); border: 1px solid var(--sp-line); }
.shop-page.mode-dark .ca-usual .eyebrow, .shop-page.mode-dark .ca-usual p { color: var(--sp-muted); }
.shop-page.mode-dark .ca-usual h2 { color: var(--sp-ink); }
.shop-page.mode-dark .ca-usual .button.secondary { background: var(--sp-surface); border-color: var(--sp-line-2); color: var(--sp-ink); }