/* LAYER 3 — COMPONENTS (derived from semantic tokens)
 * Theme-agnostic — all values reference var(--*)
 */

/* ============================================================
   BASE BODY
   ============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-normal);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

[data-theme="razor"] body {
  background-image: linear-gradient(var(--text) 1px, transparent 1px),
                    linear-gradient(90deg, var(--text) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: 0 0;
  background-attachment: fixed;
  background-blend-mode: normal;
}

[data-theme="razor"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 0.94;
  z-index: -1;
  pointer-events: none;
}

/* Grain overlay for cinematic themes */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity, 0);
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* mix-blend-mode removed — was forcing full-window recomposite on every scroll frame */
  transform: translateZ(0);
  will-change: opacity;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); line-height: var(--lh-none); }
h2 { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

[data-theme="razor"] h1 {
  font-size: clamp(var(--text-5xl), 11vw, var(--text-9xl));
  line-height: 0.85;
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
}

[data-theme="razor"] h2 {
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

[data-theme="noir"] h1 em,
[data-theme="speakeasy"] h1 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-normal);
  color: var(--accent);
}

[data-theme="editorial"] h1 em,
[data-theme="linen"] h1 em {
  color: var(--accent);
  font-style: italic;
  font-weight: var(--fw-normal);
}

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-deco);
  text-transform: uppercase;
}

/* ============================================================
   ESPRESSO TYPOGRAPHY — single rhythm across all sections.
   One eyebrow, one h2 system. Polished by art-director pass.
   Applies on top of theme tokens; does not change other themes.
   ============================================================ */
[data-theme="espresso"] .eyebrow,
[data-theme="espresso"] .footer-heading,
[data-theme="espresso"] .location-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.66 0.082 60 / 0.85);
}

[data-theme="espresso"] .section-header { margin-bottom: clamp(48px, 6vw, 80px); }
[data-theme="espresso"] .section-header .eyebrow { margin-bottom: 18px; }
[data-theme="espresso"] .section-header h2 {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 auto 18px;
  max-width: 24ch;
  text-wrap: balance;
}
[data-theme="espresso"] .section-header h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
[data-theme="espresso"] .section-header p {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--text-muted);
  font-style: italic;
  max-width: 56ch;
  margin: 0 auto;
  text-wrap: balance;
}

.deco {
  font-family: var(--font-accent);
  letter-spacing: var(--ls-deco);
  text-transform: uppercase;
}

a { color: var(--accent); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

/* BRASS BUTTON FAMILY — site-wide unified button surface (espresso theme).
   All .btn-primary / .btn-outline / .btn-ghost share the brass pill geometry
   so secondary CTAs (Book the Full Groom, Get Directions, Yelp, footer)
   feel like the same family as the hero "Reserve a chair" anchor.
   Razor theme keeps its bauhaus override below — espresso owns these rules. */
.btn-primary,
.btn-outline,
.btn-ghost {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: none;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  transition: transform 220ms cubic-bezier(.4,0,.2,1), filter 220ms ease, box-shadow 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  color: oklch(0.12 0.012 50);
  background: linear-gradient(180deg,
    oklch(0.78 0.105 75) 0%,
    oklch(0.66 0.105 65) 38%,
    oklch(0.50 0.090 58) 75%,
    oklch(0.38 0.075 55) 100%);
  border-color: oklch(0.30 0.060 55);
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.45);
  box-shadow:
    inset 0 1.5px 0 oklch(0.96 0.04 80 / 0.55),
    inset 0 -1.5px 0 oklch(0.20 0.03 50 / 0.45),
    0 12px 28px -6px oklch(0.55 0.10 60 / 0.5),
    0 3px 10px -2px oklch(0 0 0 / 0.4);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.06);
  color: oklch(0.12 0.012 50);
  box-shadow:
    inset 0 1.5px 0 oklch(0.96 0.04 80 / 0.65),
    inset 0 -1.5px 0 oklch(0.20 0.03 50 / 0.5),
    0 16px 36px -6px oklch(0.55 0.10 60 / 0.65),
    0 4px 12px -2px oklch(0 0 0 / 0.5);
}
.btn-primary:active { transform: translateY(0); filter: brightness(0.94); }

.btn-outline {
  color: oklch(0.85 0.08 75);
  background: oklch(0.06 0.005 50 / 0.45);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border-color: oklch(0.66 0.105 65 / 0.55);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.04 80 / 0.08),
    0 4px 14px -6px oklch(0 0 0 / 0.4);
}
.btn-outline:hover {
  transform: translateY(-1px);
  color: oklch(0.92 0.08 75);
  border-color: oklch(0.78 0.105 75);
  background: oklch(0.10 0.018 60 / 0.6);
}
.btn-outline:active { transform: translateY(0); }

.btn-ghost {
  color: oklch(0.85 0.08 75);
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover { background: oklch(0.66 0.105 65 / 0.10); color: oklch(0.92 0.08 75); }

.btn-lg { padding: 16px 36px; font-size: 16px; min-height: 56px; }
.btn-xl { padding: 18px 44px; font-size: 17.5px; min-height: 64px; font-weight: 600; }

[data-theme="razor"] .btn {
  border-radius: 0;
  border-width: 2px;
  font-weight: var(--fw-bold);
}
[data-theme="razor"] .btn-primary {
  background: var(--text);
  color: var(--text-inverse);
  border-color: var(--text);
  box-shadow: var(--shadow-accent);
}
[data-theme="razor"] .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--text);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  transition: all var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

[data-theme="razor"] .card {
  border-width: 2px;
  border-color: var(--border);
  box-shadow: none;
  border-radius: 0;
}
[data-theme="razor"] .card:hover {
  box-shadow: var(--shadow-md);
  transform: translate(-2px, -2px);
}

/* ============================================================
   CHIPS / BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

.badge-accent {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-accent);
}

[data-theme="razor"] .badge {
  border-radius: 0;
  border-width: 2px;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
}

/* ============================================================
   DIVIDERS
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--accent);
  margin-block: var(--space-8);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-accent), transparent);
}
.divider-ornament { color: var(--accent); letter-spacing: var(--ls-deco); }

[data-theme="razor"] .divider::before,
[data-theme="razor"] .divider::after {
  background: var(--text);
  height: 2px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header { text-align: center; margin-bottom: var(--space-16); }
.section-header .eyebrow { margin-bottom: var(--space-4); }
.section-header h2 { margin-bottom: var(--space-4); }
.section-header p { max-width: 640px; margin: 0 auto; color: var(--text-muted); font-size: var(--text-lg); }

/* ============================================================
   FORMS
   ============================================================ */
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 80%);
}

label { display: block; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: min(92vw, 720px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ============================================================
   MODAL — fullscreen variant (kiosk mode for try-on)
   Activated via data-fullscreen="true" on .modal + .modal-backdrop
   ============================================================ */
.modal-backdrop[data-fullscreen="true"] {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal[data-fullscreen="true"] {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
  padding: clamp(20px, 4vw, 48px);
  overflow-y: auto;
  /* prevent transform-origin shift glitch on open */
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal[data-fullscreen="true"].is-open {
  transform: none;
}

.modal[data-fullscreen="true"] .modal-close {
  position: fixed;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
  .modal[data-fullscreen="true"] {
    padding: 16px 16px 24px;
  }
  .modal[data-fullscreen="true"] .modal-close {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   THEME SWITCHER UI
   ============================================================ */
.theme-switcher {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
}

[data-theme="razor"] .theme-switcher {
  border-radius: 0;
  border-width: 2px;
}

.theme-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}

[data-theme="razor"] .theme-swatch { border-radius: 0; }

.theme-swatch .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid oklch(0 0 0 / 0.12);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.08);
}

/* Swatch preview colors — smooth radial gradients */
.theme-swatch[data-theme-id="noir"] .dot { background: radial-gradient(circle at 35% 35%, #C9A35A, #0F0B05 70%); }
.theme-swatch[data-theme-id="speakeasy"] .dot { background: radial-gradient(circle at 35% 35%, #D2A857, #25282E 70%); }
.theme-swatch[data-theme-id="razor"] .dot { background: radial-gradient(circle at 35% 35%, #FFFFFF, #0A0A0A 70%); border-color: oklch(0 0 0 / 0.25); }
.theme-swatch[data-theme-id="linen"] .dot { background: radial-gradient(circle at 35% 35%, #B45837, #F7F2E4 70%); }
.theme-swatch[data-theme-id="editorial"] .dot { background: radial-gradient(circle at 35% 35%, #C96442, #FFFFFF 70%); }

.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.theme-switcher-label {
  display: none;
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .theme-switcher-label { display: flex; align-items: center; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

/* Utility visibility classes — !important to win cascade vs same-specificity component rules */
.hide-mobile { display: none !important; }
.hide-desktop { display: revert !important; }
@media (min-width: 768px) {
  .hide-mobile { display: revert !important; }
  .hide-desktop { display: none !important; }
}

/* Sticky-CTA clearance: pad body bottom on mobile so .mobile-cta (fixed, ≤767px) never overlaps footer/dispatch/last FAQ */
@media (max-width: 767px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   ART DIRECTOR PASS — espresso card rhythm + small details
   Applied only when [data-theme="espresso"] is active (public build).
   ============================================================ */

/* One card transition + one hover. service-card has its own transform
   already; we leave it. Everything else inherits the same lift + shadow. */
[data-theme="espresso"] .barber-card,
[data-theme="espresso"] .ritual-card,
[data-theme="espresso"] .review-card,
[data-theme="espresso"] .heritage-card,
[data-theme="espresso"] .dispatch-card,
[data-theme="espresso"] .faq-item,
[data-theme="espresso"] .hours-table,
[data-theme="espresso"] .location-map,
[data-theme="espresso"] .booking-frame-wrap,
[data-theme="espresso"] .founder-portrait {
  border-radius: 16px;
  border-color: oklch(0.94 0.025 85 / 0.08);
  background: oklch(0.10 0.010 50);
  box-shadow: 0 1px 0 oklch(0.94 0.025 85 / 0.04) inset;
  will-change: transform;
  transition: transform 280ms cubic-bezier(.4,0,.2,1),
              border-color 280ms cubic-bezier(.4,0,.2,1),
              box-shadow 280ms cubic-bezier(.4,0,.2,1);
}

[data-theme="espresso"] .barber-card:hover,
[data-theme="espresso"] .ritual-card:hover,
[data-theme="espresso"] .review-card:hover,
[data-theme="espresso"] .heritage-card:hover,
[data-theme="espresso"] .faq-item:hover {
  transform: translateY(-2px);
  border-color: oklch(0.66 0.082 60 / 0.30);
  box-shadow: 0 14px 32px -10px oklch(0 0 0 / 0.65);
}

/* Ritual card — bigger breathing room, brass-ringed icon, no shouty hover. */
[data-theme="espresso"] .ritual-card {
  padding: clamp(28px, 4vw, 44px);
  text-align: left;
}
[data-theme="espresso"] .ritual-icon {
  margin: 0 0 22px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid oklch(0.66 0.082 60 / 0.35);
  color: var(--accent);
}
[data-theme="espresso"] .ritual-title {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
[data-theme="espresso"] .ritual-desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Review card — italic Lora, attribution row tighter. */
[data-theme="espresso"] .review-card { padding: 28px; gap: 16px; }
[data-theme="espresso"] .review-text {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: oklch(0.94 0.025 85 / 0.95);
}
[data-theme="espresso"] .review-author { padding-top: 14px; border-top-color: oklch(0.94 0.025 85 / 0.08); }
[data-theme="espresso"] .review-author-source { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
[data-theme="espresso"] .review-stars { color: var(--accent); font-size: 14px; letter-spacing: 0.16em; }

/* Reviews aggregate — center stack, brass score, tighter rhythm. */
[data-theme="espresso"] .reviews-aggregate { gap: 18px; margin-bottom: 36px; }
[data-theme="espresso"] .aggregate-score { font-size: clamp(48px, 6vw, 64px); font-weight: 500; }
[data-theme="espresso"] .aggregate-detail { gap: 6px; }

/* FAQ — Lora question, Inter answer. Italic in body text was illegible. */
[data-theme="espresso"] .faq-item { padding: 0; }
[data-theme="espresso"] .faq-item[open] { border-color: oklch(0.66 0.082 60 / 0.30); }
[data-theme="espresso"] .faq-question {
  padding: 22px 26px;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text);
}
[data-theme="espresso"] .faq-question::after { font-family: 'Lora', serif; font-size: 22px; color: var(--accent); }
[data-theme="espresso"] .faq-answer {
  padding: 0 26px 26px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: oklch(0.94 0.025 85 / 0.78);
  max-width: 64ch;
}

/* Barber card — image larger, info quieter. */
[data-theme="espresso"] .barber-card { background: oklch(0.10 0.010 50); }
[data-theme="espresso"] .barber-info { padding: 20px 22px 22px; gap: 6px; }
[data-theme="espresso"] .barber-name {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
}
[data-theme="espresso"] .barber-role {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.66 0.082 60 / 0.85);
  font-weight: 500;
  margin-bottom: 6px;
}
[data-theme="espresso"] .barber-specialty { font-size: 14px; line-height: 1.55; }
[data-theme="espresso"] .barber-quote { font-family: 'Lora', 'Playfair Display', Georgia, serif; font-style: italic; }

/* Heritage + Dispatch cards — same mid-card padding, brass hairline. */
[data-theme="espresso"] .heritage-card,
[data-theme="espresso"] .dispatch-card {
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 44px);
  background: oklch(0.075 0.008 50);
}
[data-theme="espresso"] .heritage-rule,
[data-theme="espresso"] .dispatch-rule { background: var(--accent); width: 36px; }
[data-theme="espresso"] .heritage-card p {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--text);
}
[data-theme="espresso"] .heritage-card p strong { color: var(--accent); font-weight: 500; }

[data-theme="espresso"] .dispatch-card h2 {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.012em;
  line-height: 1.1;
}
[data-theme="espresso"] .dispatch-lede { font-family: 'Lora', 'Playfair Display', Georgia, serif; font-style: italic; font-size: 15.5px; line-height: 1.6; }
[data-theme="espresso"] .dispatch-input {
  background: oklch(0.05 0.006 50);
  border-color: oklch(0.94 0.025 85 / 0.14);
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 15px;
}
[data-theme="espresso"] .dispatch-input:focus { border-color: var(--accent); outline: 2px solid color-mix(in oklch, var(--accent), transparent 70%); outline-offset: 2px; }
[data-theme="espresso"] .dispatch-submit {
  border-radius: 999px;
  padding: 14px 26px;
  background: linear-gradient(180deg, oklch(0.78 0.105 75) 0%, oklch(0.66 0.105 65) 55%, oklch(0.50 0.090 58) 100%);
  color: oklch(0.12 0.012 50);
  border: 1px solid oklch(0.30 0.060 55);
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.4);
  box-shadow: inset 0 1px 0 oklch(0.96 0.04 80 / 0.5), 0 6px 16px -4px oklch(0.55 0.10 60 / 0.45);
}

/* Tryon section heading — match section-header rhythm. */
[data-theme="espresso"] .tryon-section h2 {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 12px 0 18px;
  text-wrap: balance;
}
[data-theme="espresso"] .tryon-section h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
[data-theme="espresso"] .tryon-section .hero-sub {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  text-shadow: none;
}

/* Tryon frame caption — quieter brass chip. */
[data-theme="espresso"] .tryon-frame figcaption {
  background: oklch(0.05 0.006 50 / 0.78);
  border-color: oklch(0.66 0.082 60 / 0.45);
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 500;
  padding: 5px 11px;
}

/* Trust strip — quiet in espresso, brass numbers, less shouty. */
[data-theme="espresso"] .trust-strip {
  background: oklch(0.075 0.008 50);
  border-block-color: oklch(0.94 0.025 85 / 0.06);
  padding-block: clamp(32px, 5vw, 48px);
}
[data-theme="espresso"] .trust-item-value {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--text);
  letter-spacing: -0.018em;
}
[data-theme="espresso"] .trust-item-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-dim);
  margin-top: 6px;
}

/* Featured ribbons — Signature stays brass, Recommended becomes ivory. */
[data-theme="espresso"] .featured-ribbon {
  background: linear-gradient(180deg, oklch(0.78 0.105 75) 0%, oklch(0.66 0.105 65) 100%);
  color: oklch(0.12 0.012 50);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  padding: 5px 12px;
  border: 1px solid oklch(0.30 0.060 55);
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.35);
}
[data-theme="espresso"] .featured-ribbon.ribbon-recommended {
  background: oklch(0.94 0.025 85 / 0.96);
  color: oklch(0.12 0.012 50);
  border-color: oklch(0.94 0.025 85 / 0.6);
  text-shadow: none;
}

/* Service card meta + title — slightly tighter line-height, brass dot accent. */
[data-theme="espresso"] .service-card__meta {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: oklch(0.94 0.025 85 / 0.85);
}
[data-theme="espresso"] .service-card__meta-dot { color: var(--accent); opacity: 1; }
[data-theme="espresso"] .service-card__title {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.012em;
  line-height: 1.05;
  margin-bottom: 10px;
}
[data-theme="espresso"] .service-card__sub {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: oklch(0.94 0.025 85 / 0.85);
  margin-bottom: 8px;
}
/* Unify desc to Lora regular — kills sans/serif clash inside the card. */
[data-theme="espresso"] .service-card__desc {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: oklch(0.94 0.025 85 / 0.62);
}

/* FEATURED card — bigger room for the type, deeper scrim, Lora throughout. */
[data-theme="espresso"] .service-card--featured .service-card__veil {
  background:
    linear-gradient(90deg,
      oklch(0.05 0.006 50) 0%,
      oklch(0.05 0.006 50 / 0.92) 38%,
      oklch(0.05 0.006 50 / 0.45) 60%,
      transparent 82%);
}
[data-theme="espresso"] .service-card--featured .service-card__meta {
  top: clamp(22px, 2.6vw, 32px);
  left: clamp(28px, 3vw, 44px);
  right: clamp(28px, 3vw, 44px);
  font-size: 11px;
  letter-spacing: 0.24em;
}
[data-theme="espresso"] .service-card--featured .service-card__bottom {
  bottom: 0;
  left: 0;
  right: 48%;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px) clamp(32px, 3.4vw, 44px);
}
[data-theme="espresso"] .service-card--featured .service-card__title {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  margin-bottom: 16px;
}
[data-theme="espresso"] .service-card--featured .service-card__sub {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.4;
  margin-bottom: 14px;
  max-width: 28ch;
  color: oklch(0.94 0.025 85 / 0.92);
}
[data-theme="espresso"] .service-card--featured .service-card__desc {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  max-width: 32ch;
  color: oklch(0.94 0.025 85 / 0.68);
}

/* Featured ribbon position — match new padding rhythm. */
[data-theme="espresso"] .service-card--featured .featured-ribbon {
  top: clamp(22px, 2.6vw, 32px);
  right: clamp(22px, 2.6vw, 32px);
}

/* Mobile — featured collapses to portrait, restore tighter padding. */
@media (max-width: 700px) {
  [data-theme="espresso"] .service-card--featured .service-card__bottom {
    right: 0;
    padding: 24px 22px 28px;
  }
  [data-theme="espresso"] .service-card--featured .service-card__title { font-size: 26px; }
  [data-theme="espresso"] .service-card--featured .service-card__sub { font-size: 16px; max-width: none; }
  [data-theme="espresso"] .service-card--featured .service-card__desc { max-width: none; }
  [data-theme="espresso"] .service-card--featured .service-card__veil {
    background:
      linear-gradient(180deg,
        transparent 0%,
        transparent 38%,
        oklch(0.05 0.006 50 / 0.55) 60%,
        oklch(0.05 0.006 50 / 0.95) 80%,
        oklch(0.05 0.006 50) 95%);
  }
}

/* Services bottom CTA — italic invitation, not shouty buttons. */
[data-theme="espresso"] .services-cta { margin-top: clamp(48px, 6vw, 72px); }
[data-theme="espresso"] .services-cta-lede {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 28px;
}

/* Section padding — espresso rhythm, mobile-honest. */
[data-theme="espresso"] section { padding-block: clamp(72px, 10vw, 128px); }
[data-theme="espresso"] section.compact { padding-block: clamp(56px, 8vw, 96px); }
[data-theme="espresso"] .booking-section { padding-block: clamp(72px, 10vw, 128px); }
[data-theme="espresso"] .heritage { padding-block: clamp(56px, 8vw, 96px); }
[data-theme="espresso"] .dispatch { padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 112px); }

/* Trust strip mobile — 2x3 instead of 2x2 + orphan. */
[data-theme="espresso"] .trust-strip-inner { gap: 24px 16px; }
@media (max-width: 640px) {
  [data-theme="espresso"] .trust-strip-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 12px;
  }
  [data-theme="espresso"] .trust-item:nth-child(4),
  [data-theme="espresso"] .trust-item:nth-child(5) { grid-column: span 1; }
  [data-theme="espresso"] .trust-item-value { font-size: 22px; }
}
@media (max-width: 380px) {
  [data-theme="espresso"] .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
  [data-theme="espresso"] .trust-item:last-child { grid-column: span 2; }
}

/* Hours block — replaces the 7-row repeating table. */
[data-theme="espresso"] .hours-block {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  background: oklch(0.075 0.008 50);
  border: 1px solid oklch(0.94 0.025 85 / 0.08);
  border-radius: 14px;
}
[data-theme="espresso"] .hours-block__time {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
[data-theme="espresso"] .hours-block__sep { color: var(--accent); font-size: 18px; }
[data-theme="espresso"] .hours-block__days {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
}
[data-theme="espresso"] .hours-fineprint {
  display: block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Booking lang toggle — brass mini-pill group, matches hero brass. */
[data-theme="espresso"] .booking-lang {
  justify-content: flex-end;
  padding: 0;
  margin-bottom: 18px;
}
[data-theme="espresso"] .booking-lang__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
[data-theme="espresso"] .booking-lang__btn {
  border-radius: 999px;
  border-color: oklch(0.94 0.025 85 / 0.16);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.22em;
  padding: 8px 14px;
  min-height: 34px;
}
[data-theme="espresso"] .booking-lang__btn.is-active {
  background: linear-gradient(180deg, oklch(0.78 0.105 75) 0%, oklch(0.66 0.105 65) 60%, oklch(0.50 0.090 58) 100%);
  color: oklch(0.12 0.012 50);
  border-color: oklch(0.30 0.060 55);
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.4);
}

/* Footer — quieter brass headings, tighter rhythm. */
[data-theme="espresso"] .footer { background: oklch(0.045 0.005 50); border-top-color: oklch(0.94 0.025 85 / 0.06); }
[data-theme="espresso"] .footer-brand {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
}
[data-theme="espresso"] .footer-brand strong { color: var(--accent); font-weight: 500; font-style: italic; }
[data-theme="espresso"] .footer-tagline {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
}
[data-theme="espresso"] .footer-bottom { border-top-color: oklch(0.94 0.025 85 / 0.06); font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-dim); }

/* Body has NO padding-bottom on espresso — was creating "boxed" feel on iOS.
   Sticky Book pill clearance moves to footer instead — keeps native bounce. */
[data-theme="espresso"] body { padding-bottom: 0; }
@media (max-width: 879px) {
  [data-theme="espresso"] .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   BOOKING — section banner + full-screen modal Altegio overlay
   ============================================================ */

[data-theme="espresso"] .booking-banner {
  background: oklch(0.075 0.008 50);
  border-block: 1px solid oklch(0.94 0.025 85 / 0.06);
}
[data-theme="espresso"] .booking-banner .container-wide { text-align: center; }

.booking-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 16px;
}

[data-theme="espresso"] .booking-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 36px;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: oklch(0.12 0.012 50);
  background: linear-gradient(180deg,
    oklch(0.78 0.105 75) 0%,
    oklch(0.66 0.105 65) 38%,
    oklch(0.50 0.090 58) 75%,
    oklch(0.38 0.075 55) 100%);
  border: 1px solid oklch(0.30 0.060 55);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.4);
  box-shadow:
    inset 0 1.5px 0 oklch(0.96 0.04 80 / 0.5),
    inset 0 -1.5px 0 oklch(0.20 0.03 50 / 0.4),
    0 14px 32px -6px oklch(0.55 0.10 60 / 0.5),
    0 4px 12px -2px oklch(0 0 0 / 0.4);
  transition: transform 200ms cubic-bezier(.4,0,.2,1), filter 200ms ease;
}
[data-theme="espresso"] .booking-banner__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.06);
}
[data-theme="espresso"] .booking-banner__cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

[data-theme="espresso"] .booking-banner__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  min-height: 52px;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-size: 16px;
  color: oklch(0.94 0.025 85 / 0.85);
  background: transparent;
  border: 1px solid oklch(0.94 0.025 85 / 0.16);
  border-radius: 999px;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
[data-theme="espresso"] .booking-banner__call:hover {
  color: var(--text);
  border-color: var(--accent);
  background: oklch(0.66 0.082 60 / 0.08);
}

[data-theme="espresso"] .booking-banner__fineprint {
  margin: 12px auto 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  max-width: 60ch;
}

/* ===================================================================
   POPUP MODAL — iOS-style spring scale, adaptive width, elegant padding
   Used by .booking-modal + .mirror-modal-root — share spring + scrim
   =================================================================== */
.booking-modal,
.mirror-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  isolation: isolate;
}
.booking-modal.is-open,
.mirror-modal-root.is-open { display: block; }

.booking-modal__scrim,
.mirror-modal-root .mirror-scrim {
  position: absolute;
  inset: 0;
  background: oklch(0.04 0.005 50 / 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.32,.72,0,1);
  cursor: pointer;
}
.booking-modal.is-open .booking-modal__scrim,
.mirror-modal-root.is-open .mirror-scrim { opacity: 1; }

/* Popup panel — iOS spring scale animation */
.booking-modal__panel,
.mirror-modal-root .mirror-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  background: oklch(0.06 0.008 50);
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(820px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid oklch(0.94 0.025 85 / 0.10);
  box-shadow:
    0 1px 0 0 oklch(0.94 0.025 85 / 0.06) inset,
    0 32px 80px -20px oklch(0 0 0 / 0.7),
    0 12px 32px -8px oklch(0 0 0 / 0.4);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(.32,.72,0,1.0),
    opacity 240ms cubic-bezier(.32,.72,0,1);
  will-change: transform, opacity;
}
.booking-modal.is-open .booking-modal__panel,
.mirror-modal-root.is-open .mirror-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Mirror panel — TRUE FULLSCREEN kiosk takeover
   Mirror /kiosk app is designed as a tablet-fullscreen experience.
   No popup chrome, no border, no padding — the kiosk owns the viewport
   and exits via the floating close button overlay. */
.mirror-modal-root .mirror-panel {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  background: oklch(0.04 0.005 50);
  /* Override the popup spring entrance — fullscreen uses fade-only */
  transition: opacity 240ms cubic-bezier(.32,.72,0,1);
}
.mirror-modal-root.is-open .mirror-panel {
  transform: none;
}

/* Mobile (phone): booking modal goes FULLSCREEN — no rounded edges, no
   side padding, header sits flush with status bar via safe-area inset.
   Артур directive: iPhone booking modal as a popup is wrong; on phones it
   should be a real screen takeover with the close X reachable thumb-top. */
@media (max-width: 640px) {
  .booking-modal__panel {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .booking-modal.is-open .booking-modal__panel {
    transform: none;
  }
}

@media (min-width: 1024px) {
  /* Booking keeps popup chrome on tablet/desktop */
  .booking-modal__panel {
    max-width: calc(100vw - 96px);
    max-height: calc(100vh - 96px);
  }
  /* Mirror stays full viewport on every size */
  .mirror-modal-root .mirror-panel {
    max-width: none;
    max-height: none;
  }
}

/* Reduced motion — instant fade. Skip the centered transform on phones
   where the panel is already top:0/left:0 fullscreen (would shove it off-screen). */
@media (prefers-reduced-motion: reduce) {
  .booking-modal__panel,
  .mirror-modal-root .mirror-panel {
    transition: opacity 120ms linear;
  }
  @media (min-width: 641px) {
    .booking-modal__panel {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

/* Mirror modal — close button + iframe styles */
.mirror-modal-root .mirror-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.94 0.025 85 / 0.85);
  background: oklch(0.10 0.010 50 / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid oklch(0.94 0.025 85 / 0.14);
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  transition: transform 180ms ease, background 180ms ease;
}
.mirror-modal-root .mirror-close:hover {
  background: oklch(0.66 0.082 60 / 0.18);
  transform: scale(1.05);
}

.mirror-modal-root .mirror-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: oklch(0.06 0.008 50);
  position: relative;
  z-index: 1;
}

/* Loading overlay — visible until iframe `load` event fires.
   Sits beneath the iframe (z-index 0) but above the panel bg, so once
   the iframe paints any pixel of content the spinner is hidden behind
   real UI. The 9s fallback link surfaces if the network is slow. */
.mirror-modal-root .mirror-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: oklch(0.06 0.008 50);
  color: oklch(0.94 0.025 85 / 0.78);
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* iframe paint hides the loading overlay */
.mirror-modal-root.is-iframe-ready .mirror-loading {
  opacity: 0;
}

.mirror-modal-root .mirror-loading__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid oklch(0.94 0.025 85 / 0.12);
  border-top-color: oklch(0.66 0.082 60);
  animation: mirror-spin 900ms linear infinite;
}

@keyframes mirror-spin {
  to { transform: rotate(360deg); }
}

.mirror-modal-root .mirror-loading__label {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.01em;
  font-style: italic;
  color: oklch(0.94 0.025 85 / 0.62);
}

.mirror-modal-root .mirror-loading__fallback {
  display: none;
  font-size: 14px;
  font-family: system-ui, -apple-system, sans-serif;
  color: oklch(0.66 0.082 60);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid oklch(0.66 0.082 60 / 0.45);
  border-radius: 999px;
  pointer-events: auto;
  transition: background 180ms ease, color 180ms ease;
}

.mirror-modal-root .mirror-loading.is-fallback-visible .mirror-loading__fallback {
  display: inline-block;
}

.mirror-modal-root .mirror-loading__fallback:hover {
  background: oklch(0.66 0.082 60);
  color: oklch(0.06 0.008 50);
}

@media (prefers-reduced-motion: reduce) {
  .mirror-modal-root .mirror-loading__spinner {
    animation: none;
    border-top-color: oklch(0.66 0.082 60 / 0.6);
  }
}

.booking-modal__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: oklch(0.05 0.005 50);
  border-bottom: 1px solid oklch(0.94 0.025 85 / 0.06);
  flex-shrink: 0;
}

.booking-modal__brand {
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.012em;
}
.booking-modal__brand em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.booking-modal__title {
  grid-column: 2;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.66 0.082 60 / 0.85);
  text-align: center;
}

.booking-modal__actions {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.booking-modal__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: oklch(0.94 0.025 85 / 0.78);
  background: oklch(0.10 0.010 50);
  border: 1px solid oklch(0.94 0.025 85 / 0.12);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.booking-modal__icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: oklch(0.66 0.082 60 / 0.10);
  transform: scale(1.05);
}
.booking-modal__icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.booking-modal__body {
  position: relative;
  flex: 1;
  background: oklch(0.10 0.010 50);
  overflow: hidden;
}

.booking-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(.4,0,.2,1);
}
.booking-modal.is-loaded .booking-modal__loading { opacity: 0; }

.booking-modal__spinner {
  width: 36px;
  height: 36px;
  border: 2px solid oklch(0.94 0.025 85 / 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: booking-spin 1s linear infinite;
}
@keyframes booking-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .booking-modal__spinner { animation: none; }
}

.booking-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.4,0,.2,1);
}
.booking-modal.is-loaded .booking-modal__frame { opacity: 1; }

/* Body scroll lock when modal open */
body.is-modal-open { overflow: hidden; }

/* iOS Safari — disable double-tap zoom on interactive elements */
[data-theme="espresso"] a,
[data-theme="espresso"] button,
[data-theme="espresso"] .hero-espresso__btn,
[data-theme="espresso"] .nav-espresso__book,
[data-theme="espresso"] .nav-espresso__phone,
[data-theme="espresso"] .booking-banner__cta,
[data-theme="espresso"] .booking-banner__call,
[data-theme="espresso"] .df-mobile-book,
[data-theme="espresso"] .booking-modal__icon-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile phone icon — restore on small screens (Артур: «выведи рядом с book») */
@media (max-width: 540px) {
  [data-theme="espresso"] .nav-espresso__phone { display: inline-flex; width: 32px; height: 32px; }
  [data-theme="espresso"] .nav-espresso__phone svg { width: 12px; height: 12px; }
  [data-theme="espresso"] .nav-espresso__cta { gap: 8px; }
  [data-theme="espresso"] .nav-espresso__book { padding: 7px 14px; font-size: 13px; min-height: 32px; }
}

/* Mobile sticky Book pill — espresso. Right-anchored compact pill (was
   full-width bar that overlapped card titles below the fold — Артур
   2026-05-17). Shown after hero scroll-out, hidden on tablet+. */
.df-mobile-book {
  position: fixed;
  left: auto;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: oklch(0.12 0.012 50);
  text-decoration: none;
  background: linear-gradient(180deg,
    oklch(0.78 0.105 75) 0%,
    oklch(0.66 0.105 65) 50%,
    oklch(0.50 0.090 58) 100%);
  border: 1px solid oklch(0.30 0.060 55);
  border-radius: 999px;
  text-shadow: 0 1px 0 oklch(0.95 0.04 80 / 0.4);
  box-shadow:
    inset 0 1.5px 0 oklch(0.96 0.04 80 / 0.5),
    inset 0 -1.5px 0 oklch(0.20 0.03 50 / 0.4),
    0 12px 28px -6px oklch(0.55 0.10 60 / 0.55),
    0 4px 14px -2px oklch(0 0 0 / 0.55);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 320ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.df-mobile-book.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.df-mobile-book svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }

@media (max-width: 879px) {
  [data-theme="espresso"] .df-mobile-book { display: inline-flex; }
}