/* Style Me Symy — mobile barber, professional design (v3)
   --------------------------------------------------------
   Fonts: Fraunces (display serif) + Inter Tight (UI sans)
   Calmer than v2: static gradients, no custom cursor, no marquee,
   no 3D tilt, no magnetic buttons, no noise overlay.
   Lightweight reveals + Lenis smooth scroll remain. */

@view-transition { navigation: auto; }
@layer reset, base, layout, components, fx;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
  ul { list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  button { font: inherit; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Tokens ---------- */
:root {
  --bg:        oklch(96.5% 0.012 78);
  --paper:     oklch(98%   0.008 80);
  --cream:     oklch(94%   0.018 75);
  --line:      oklch(86%   0.012 75);
  --line-soft: oklch(91%   0.010 75);
  --ink:       oklch(22%   0.018 60);
  --ink-soft:  oklch(38%   0.018 60);
  --muted:     oklch(58%   0.012 60);
  --dark:      oklch(15%   0.010 50);
  --dark-2:    oklch(20%   0.012 50);
  --copper:    oklch(70%   0.130 55);
  --copper-2:  oklch(80%   0.115 60);
  --copper-d:  oklch(58%   0.140 50);
  --danger:    oklch(55%   0.180 30);
  --success:   oklch(58%   0.130 145);

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --container: 1180px;
  --container-wide: 1440px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  --ease: cubic-bezier(.22, .8, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.05);
  --shadow:    0 6px 24px -8px rgba(20, 16, 12, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(20, 16, 12, 0.25);

  --scroll: 0;
}

/* ---------- Base ---------- */
@layer base {
  html {
    scroll-behavior: auto;
    overflow-x: clip;
    /* Crisper text: kerning + standard + contextual ligatures site-wide. */
    font-feature-settings: "kern" on, "liga" on, "calt" on;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    font-family: var(--font-sans);
    font-size: clamp(16px, 0.95vw + 13px, 17.5px);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    max-width: 100vw;
    /* Make rendered metrics consistent regardless of font fallback. */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  main, footer { overflow-x: clip; max-width: 100%; }
  /* NOTE: do NOT clip <header> — the mobile menu is position: absolute outside it. */
  img, video, iframe, svg { max-width: 100%; }
  pre, code, textarea { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
  a { color: var(--copper-d); transition: color .2s var(--ease); }
  a:hover { color: var(--copper); }
  ::selection { background: color-mix(in oklch, var(--copper) 30%, transparent); color: var(--ink); }
}

/* ---------- Typography ---------- */
@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--ink);
  }
  h1 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
  h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
  h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.2; }
  h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.02em; }

  .eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--copper-d);
  }
  .eyebrow.with-line::before {
    content: ""; display: inline-block;
    width: 28px; height: 1px; background: currentColor;
    vertical-align: middle; margin-right: 0.7rem;
  }
  .lead {
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 58ch;
  }
  .prose { max-width: 64ch; color: var(--ink-soft); }
  .prose p { margin: 0 0 1em; }
  .prose p:last-child { margin-bottom: 0; }
  .prose h2, .prose h3 { color: var(--ink); margin: 2rem 0 0.75rem; }
}

/* ---------- Layout ---------- */
@layer layout {
  .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; position: relative; }
  .container.wide { max-width: var(--container-wide); }
  .section { padding: clamp(4rem, 8vw, 8rem) 0; position: relative; }
  .section.tight { padding: clamp(2rem, 3.5vw, 3.5rem) 0; }
  .section.dark { background: var(--dark); color: oklch(92% 0.015 80); }
  .section.dark h2, .section.dark h3 { color: oklch(98% 0.015 80); }
  .section.cream { background: var(--cream); }
  .section.paper { background: var(--paper); }
  .section-head {
    display: grid; gap: 0.5rem;
    text-align: center; max-width: 60ch; margin: 0 auto 3rem;
  }
  .section-head.left { text-align: left; margin-left: 0; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--copper);
  z-index: 100;
  width: calc(var(--scroll, 0) * 100%);
  transition: width .1s linear;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

/* Dark header (default) — pure black so a logo with a black panel blends in */
body[data-header="dark"] .site-header,
body:not([data-header]) .site-header {
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
/* Smooth the seam between black header and the warm-dark hero */
body[data-header="dark"] .hero,
body:not([data-header]) .hero {
  background: linear-gradient(180deg, #000 0%, var(--dark) 90px), var(--dark);
}
body[data-header="dark"] .site-header .brand img.brand-logo,
body:not([data-header]) .site-header .brand img.brand-logo {
  background: #000;
}
body[data-header="dark"] .site-header .brand,
body:not([data-header]) .site-header .brand { color: oklch(96% 0.012 80); }
body[data-header="dark"] .site-header .brand small,
body:not([data-header]) .site-header .brand small { color: oklch(94% 0.015 80 / 0.55); }
body[data-header="dark"] .site-header .brand:hover,
body:not([data-header]) .site-header .brand:hover { color: var(--copper-2); }
body[data-header="dark"] .site-header nav a:not(.btn):not(.lang-switch),
body:not([data-header]) .site-header nav a:not(.btn):not(.lang-switch) { color: oklch(94% 0.015 80 / 0.92); }
body[data-header="dark"] .site-header nav a:not(.btn):not(.lang-switch)::after,
body:not([data-header]) .site-header nav a:not(.btn):not(.lang-switch)::after { background: var(--copper-2); }
body[data-header="dark"] .site-header .lang-switch,
body:not([data-header]) .site-header .lang-switch {
  border-color: oklch(94% 0.015 80 / 0.22);
  color: oklch(94% 0.015 80 / 0.75);
}
body[data-header="dark"] .site-header .lang-switch:hover,
body:not([data-header]) .site-header .lang-switch:hover { border-color: oklch(96% 0.012 80); color: oklch(96% 0.012 80); }
body[data-header="dark"] .nav-toggle span,
body:not([data-header]) .nav-toggle span { background: oklch(96% 0.012 80); }
body[data-header="dark"] .site-header .btn.accent,
body:not([data-header]) .site-header .btn.accent { box-shadow: 0 0 0 1px oklch(94% 0.015 80 / 0.15); }
/* Mobile drawer keeps a clean light surface for readability against the black header. */
body[data-header="dark"] .site-header nav.is-open,
body:not([data-header]) .site-header nav.is-open {
  background: var(--paper);
}
body[data-header="dark"] .site-header nav.is-open a:not(.btn):not(.lang-switch),
body:not([data-header]) .site-header nav.is-open a:not(.btn):not(.lang-switch) {
  color: var(--ink);
}
body[data-header="dark"] .site-header nav.is-open a:not(.btn):not(.lang-switch):hover,
body:not([data-header]) .site-header nav.is-open a:not(.btn):not(.lang-switch):hover {
  color: var(--copper-d);
}
body[data-header="dark"] .site-header nav.is-open .lang-switch,
body:not([data-header]) .site-header nav.is-open .lang-switch {
  color: var(--muted);
  border-color: var(--line);
}

/* Transparent header (sits over hero) */
body[data-header="transparent"] .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  position: absolute; left: 0; right: 0; top: 0;
}
body[data-header="transparent"] main { margin-top: 0; }
body[data-header="transparent"] .site-header .brand { color: oklch(96% 0.012 80); }
body[data-header="transparent"] .site-header .brand small { color: oklch(94% 0.015 80 / 0.6); }
body[data-header="transparent"] .site-header nav a:not(.btn):not(.lang-switch) { color: oklch(94% 0.015 80 / 0.95); }
body[data-header="transparent"] .nav-toggle span { background: oklch(96% 0.012 80); }
body[data-header="transparent"] .site-header .lang-switch {
  border-color: oklch(94% 0.015 80 / 0.28); color: oklch(94% 0.015 80 / 0.85);
}
body[data-header="transparent"] .hero { padding-top: clamp(7rem, 12vh, 10rem); }
body[data-header="transparent"] .site-header nav.is-open { background: var(--paper); }
body[data-header="transparent"] .site-header nav.is-open a:not(.btn):not(.lang-switch) { color: var(--ink); }
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  display: inline-flex; flex-direction: column;
  font-family: var(--font-display); font-size: 1.45rem;
  font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand small {
  font-family: var(--font-sans); font-size: 0.6rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-top: 4px;
}
.brand:hover { color: var(--copper-d); }
.site-header nav { display: flex; gap: 1.7rem; align-items: center; font-size: 0.93rem; }
.site-header nav a:not(.btn):not(.lang-switch) { position: relative; padding: 0.4rem 0; color: var(--ink); }
.site-header nav a:not(.btn):not(.lang-switch)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--copper);
  transition: right .35s var(--ease-out);
}
.site-header nav a:not(.btn):not(.lang-switch):hover::after { right: 0; }
.lang-switch {
  font-size: 0.7rem; letter-spacing: 0.18em;
  border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  padding: 0.4rem 0.7rem; border-radius: 999px;
  color: var(--muted);
  transition: all .25s var(--ease);
}
.lang-switch:hover { border-color: var(--ink); color: var(--ink); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 2;
}
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), top .25s var(--ease), opacity .15s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-bg-h: var(--ink);
  --btn-fg-h: var(--paper);
  --btn-bd-h: var(--ink);

  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font: inherit; font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); text-decoration: none; }
.btn.primary { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--copper-d); --btn-bd-h: var(--copper-d); }
.btn.accent  { --btn-bg: var(--copper); --btn-fg: oklch(98% 0 0); --btn-bd: var(--copper); --btn-bg-h: var(--copper-d); --btn-bd-h: var(--copper-d); }
.btn.ghost   { --btn-fg: oklch(96% 0 0); --btn-bd: oklch(85% 0 0 / 0.35); --btn-bg-h: oklch(96% 0 0); --btn-fg-h: var(--dark); --btn-bd-h: oklch(96% 0 0); }
.btn.danger  { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); text-transform: none; }
.btn.small { padding: 0.5rem 1rem; font-size: 0.73rem; }
.btn.block { width: 100%; }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero (static gradient, no animation) ---------- */
.hero {
  position: relative;
  min-height: clamp(540px, 80vh, 800px);
  background: var(--dark);
  color: oklch(94% 0.015 80);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(5rem, 10vh, 8rem) 0 4rem;
  display: flex; align-items: flex-end;
}
.hero::before {
  /* Static gradient, no animation — much cheaper */
  content: ""; position: absolute; inset: -15% -10%;
  background:
    radial-gradient(45% 35% at 25% 30%, oklch(55% 0.15 50 / 0.35), transparent 70%),
    radial-gradient(35% 30% at 80% 75%, oklch(48% 0.12 35 / 0.25), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.hero .container { width: 100%; position: relative; z-index: 1; }
.hero h1 {
  color: oklch(98% 0.012 80);
  max-width: 18ch;
  font-size: clamp(2.8rem, 6.8vw, 6rem);
  line-height: 0.98;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  background: linear-gradient(110deg, var(--copper-2) 10%, var(--copper) 50%, var(--copper-d) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lead { color: oklch(92% 0.012 80 / 0.78); max-width: 50ch; font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.5rem; align-items: center; }
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid oklch(90% 0.015 80 / 0.18);
}
.hero-meta .cell { padding-right: 1rem; }
.hero-meta .cell:not(:last-child) { border-right: 1px solid oklch(90% 0.015 80 / 0.12); }
.hero-meta .cell:not(:first-child) { padding-left: 1.25rem; }
.hero-meta strong {
  display: block;
  font-size: 0.62rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--copper-2);
  font-weight: 500; margin-bottom: 0.4rem;
}
.hero-meta .cell > span, .hero-meta .cell > a { color: oklch(94% 0.012 80 / 0.85); font-size: 0.92rem; }

/* Live "open/closed" badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  padding: 0.3rem 0.85rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: oklch(98% 0 0 / 0.07);
  border: 1px solid oklch(90% 0.015 80 / 0.2);
  color: oklch(94% 0.015 80 / 0.85);
}
.live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
}
.live-badge.open .dot { background: oklch(72% 0.16 145); animation: pulse 2s ease-in-out infinite; }
.live-badge.open { color: oklch(92% 0.05 145); }
.live-badge.closed .dot { background: oklch(68% 0.14 30); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(72% 0.16 145 / 0); }
  50% { box-shadow: 0 0 0 5px oklch(72% 0.16 145 / 0.35); }
}

/* ---------- Bento (features) ---------- */
.bento {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-auto-rows: minmax(220px, auto);
}
.bento .cell {
  background: var(--paper);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background .25s var(--ease);
}
.bento .cell:hover { background: oklch(99% 0.008 80); }
.bento .cell .ix {
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  font-size: 2.3rem; color: var(--copper);
  line-height: 1; margin-bottom: 1.4rem;
}
.bento .cell h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); margin-bottom: 0.6rem; }
.bento .cell p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.bento .cell:nth-child(1) {
  grid-column: 1; grid-row: 1 / span 2;
  background: var(--ink); color: oklch(94% 0.018 80);
}
.bento .cell:nth-child(1) h3 { color: oklch(98% 0.018 80); }
.bento .cell:nth-child(1) p { color: oklch(94% 0.012 80 / 0.7); }
.bento .cell:nth-child(1) .ix { color: var(--copper-2); font-size: clamp(3rem, 5vw, 4.5rem); }
.bento .cell:nth-child(1):hover { background: oklch(18% 0.012 50); }

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat-cell {
  background: var(--bg);
  padding: 2.25rem 1.5rem;
  text-align: center;
}
.stat-cell .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--copper-d);
}
.stat-cell .lab {
  display: block; margin-top: 0.55rem;
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- Service cards (no tilt; gentle hover) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.7rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--copper) 40%, var(--line-soft));
  box-shadow: var(--shadow);
}
.service-card .ix {
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  color: var(--copper); font-size: 0.95rem;
}
.service-card h3 { font-size: clamp(1.25rem, 1.55vw, 1.55rem); margin: 0; }
.service-card p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; flex: 1; }
.service-card .foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.service-card .price { font-family: var(--font-display); font-size: clamp(1.3rem, 1.5vw, 1.6rem); color: var(--ink); font-weight: 500; }
.service-card .price small { font-size: 0.62em; color: var(--muted); font-family: var(--font-sans); margin-right: 0.3em; letter-spacing: 0.1em; text-transform: uppercase; }
.service-card .dur { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Pricelist ---------- */
.pricelist { max-width: 820px; margin: 0 auto; }
.pricelist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.pricelist-row:last-child { border-bottom: 0; }
.pricelist-row .ix {
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  color: var(--copper); font-size: 1.4rem;
  min-width: 3ch;
}
.pricelist-row h3 { font-size: clamp(1.25rem, 1.55vw, 1.55rem); margin: 0 0 0.3rem; }
.pricelist-row p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 50ch; }
.pricelist-row .dur { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.35rem; display: inline-block; }
.pricelist-row .price { font-family: var(--font-display); font-size: clamp(1.4rem, 1.8vw, 1.8rem); color: var(--ink); font-weight: 500; white-space: nowrap; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.gallery-grid figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/5;
  background: var(--cream);
}
.gallery-grid figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  color: #fff;
  font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .45s var(--ease-out);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.gallery-grid figure:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-empty {
  text-align: center; padding: 5rem 1rem;
  border: 1px dashed var(--line);
  color: var(--muted); border-radius: var(--radius);
  font-style: italic;
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.testimonial {
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.testimonial:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--copper) 35%, var(--line-soft)); }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 1.1rem;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.testimonial cite { font-style: normal; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.stars { color: var(--copper); letter-spacing: 0.2em; margin-bottom: 0.7rem; font-size: 0.85rem; }

/* ---------- About split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-image {
  aspect-ratio: 4/5;
  background: var(--dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.split-image::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 25%, oklch(58% 0.16 50 / 0.4), transparent 65%),
    radial-gradient(50% 40% at 75% 75%, oklch(45% 0.12 35 / 0.25), transparent 65%);
  filter: blur(20px);
}
.split-image::after {
  content: "S";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  font-size: clamp(8rem, 14vw, 14rem);
  color: oklch(80% 0.12 60 / 0.3);
  font-weight: 500;
}
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* ---------- Info strip ---------- */
.info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.info-strip .item { background: var(--paper); padding: 1.85rem 1.65rem; }
.info-strip h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper-d);
  font-weight: 600; margin-bottom: 0.9rem;
}
.info-strip pre { font: inherit; white-space: pre-wrap; color: var(--ink-soft); margin: 0; }
.info-strip p, .info-strip address { margin: 0; color: var(--ink-soft); font-style: normal; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--dark);
  color: oklch(95% 0.015 80);
  padding: clamp(4rem, 7vw, 6rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 50% 30%, oklch(55% 0.14 55 / 0.3), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.cta-banner h2 { color: oklch(98% 0.012 80); margin-bottom: 1rem; }
.cta-banner p { color: oklch(94% 0.012 80 / 0.72); max-width: 50ch; margin: 0 auto 1.75rem; font-size: 1.05rem; }
.cta-banner .container { position: relative; z-index: 1; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form.narrow { max-width: 540px; }
.form label { display: grid; gap: 0.35rem; }
.form label > span:first-child {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.form input, .form select, .form textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--copper) 22%, transparent);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.help { font-size: 0.82rem; color: var(--muted); margin-top: 0.4rem; }

/* ---------- Alerts ---------- */
.alert {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
  font-size: 0.93rem;
  border-left: 3px solid;
}
.alert.success { background: oklch(94% 0.04 145); color: oklch(38% 0.12 145); border-color: var(--success); }
.alert.error { background: oklch(94% 0.05 30); color: oklch(40% 0.18 30); border-color: var(--danger); }
.alert.info { background: var(--cream); color: var(--ink-soft); border-color: var(--copper); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: oklch(94% 0.015 80 / 0.7);
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  font-size: 0.92rem;
  position: relative;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--copper-2);
  font-weight: 600; margin-bottom: 1rem;
}
.site-footer .brand-block .brand { color: oklch(96% 0.012 80); font-size: 1.5rem; }
.site-footer .brand-block .brand small { color: oklch(94% 0.015 80 / 0.5); }
.site-footer .brand-block p { margin-top: 1rem; max-width: 32ch; line-height: 1.6; }
.site-footer a { color: oklch(94% 0.015 80 / 0.85); }
.site-footer a:hover { color: var(--copper-2); }
.site-footer ul li { margin: 0.5rem 0; }
.site-footer pre.hours { font: inherit; white-space: pre-wrap; margin: 0; }
.site-footer .copyright {
  grid-column: 1 / -1;
  border-top: 1px solid oklch(94% 0.015 80 / 0.1);
  padding-top: 1.5rem; margin-top: 1rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem;
  color: oklch(94% 0.015 80 / 0.5);
}
.site-footer .copyright .powered-by { margin-left: auto; }
.site-footer .copyright .powered-by a {
  color: oklch(94% 0.015 80 / 0.8);
  border-bottom: 1px solid oklch(94% 0.015 80 / 0.2);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-footer .copyright .powered-by a:hover {
  color: var(--copper-2);
  border-bottom-color: var(--copper-2);
}

/* ---------- Error page ---------- */
.error-page { text-align: center; padding: 7rem 1rem; }
.error-page h1 { font-size: clamp(2.5rem, 7vw, 5rem); margin-bottom: 0.5rem; }
.error-page p { color: var(--muted); margin-bottom: 2rem; }

/* ---------- Login ---------- */
body.login-page {
  background: var(--dark);
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem 1rem;
  overflow: hidden;
  position: relative;
}
body.login-page::before {
  content: ""; position: fixed; inset: -15%;
  background:
    radial-gradient(35% 30% at 30% 35%, oklch(55% 0.15 50 / 0.3), transparent 70%),
    radial-gradient(35% 30% at 75% 65%, oklch(45% 0.10 35 / 0.22), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.login-card {
  position: relative; z-index: 1;
  background: color-mix(in oklch, var(--paper) 96%, transparent);
  backdrop-filter: blur(16px);
  padding: 3rem 2.5rem;
  width: 100%; max-width: 420px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid oklch(90% 0.015 80 / 0.2);
}
.login-card .eyebrow { display: block; text-align: center; }
.login-card h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); text-align: center; margin: 0.3rem 0 0; }
.login-card .form { margin-top: 1.8rem; }
.login-card .back {
  display: block; text-align: center;
  margin-top: 1.5rem; font-size: 0.82rem; color: var(--muted);
}

/* ---------- Admin shell ---------- */
.admin-layout {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 100vh; background: var(--cream);
}
.admin-sidebar {
  background: var(--dark);
  color: oklch(94% 0.015 80 / 0.78);
  padding: 1.5rem 1rem;
}
.admin-sidebar .brand { color: oklch(98% 0.012 80); display: block; margin-bottom: 2rem; padding: 0 0.6rem; }
.admin-sidebar nav { display: grid; gap: 0.15rem; }
.admin-sidebar nav a {
  color: oklch(94% 0.015 80 / 0.78);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.admin-sidebar nav a:hover { background: oklch(94% 0.015 80 / 0.06); color: oklch(98% 0.012 80); }
.admin-sidebar nav a.active { background: var(--copper-d); color: oklch(98% 0 0); }
.admin-sidebar nav .group-label {
  font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: oklch(94% 0.015 80 / 0.45);
  padding: 1rem 0.85rem 0.35rem;
}
.admin-main { padding: 2rem 2.5rem; }
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
}
.admin-topbar h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }
.admin-topbar .topbar-meta { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: 0.9rem; }
.admin-section {
  background: var(--paper);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  margin-bottom: 1.5rem;
}
.admin-section h2 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.admin-section h2 + p { color: var(--muted); margin-top: -0.3rem; margin-bottom: 1.2rem; font-size: 0.92rem; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td {
  text-align: left; padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.data th {
  background: var(--cream);
  font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
table.data tr:hover td { background: var(--cream); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1;
  color: var(--copper-d);
  font-variation-settings: "opsz" 144, "SOFT" 70;
}
.stat .label { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.45rem; }
.stat .sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem; letter-spacing: 0.06em;
  background: var(--cream); border: 1px solid var(--line);
  font-weight: 500;
}
.badge.pending { background: oklch(94% 0.06 85); border-color: oklch(80% 0.10 85); color: oklch(40% 0.10 85); }
.badge.confirmed, .badge.paid { background: oklch(93% 0.04 145); border-color: oklch(80% 0.07 145); color: oklch(38% 0.12 145); }
.badge.cancelled, .badge.failed { background: oklch(93% 0.04 30); border-color: oklch(80% 0.08 30); color: oklch(40% 0.18 30); }
.badge.done, .badge.unpaid { background: oklch(93% 0.02 240); border-color: oklch(80% 0.04 240); color: oklch(35% 0.06 240); }

.qr-block { text-align: center; padding: 1.5rem; background: var(--cream); border-radius: var(--radius-lg); margin: 1rem 0; }
.qr-block img { margin: 0 auto 1rem; }
.qr-block code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  letter-spacing: 0.05em;
  word-break: break-all;
}
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.5em;
  text-align: center;
}
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Admin form-actions row — looks like a card footer, edge-to-edge, anchored.
   Avoids the "floating button" feel by extending across the card with a tinted
   bar that visually groups the action(s). */
.admin-section .form > .form-actions {
  /* Pull to the card's edges (compensate the .admin-section padding: 1.75rem). */
  margin: 1.5rem -1.75rem -1.75rem;
  padding: 1.1rem 1.75rem;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.admin-section .form > .form-actions .btn { min-height: 44px; }
.admin-section .form > .form-actions .spacer { flex: 1 1 auto; }

/* .actions INSIDE a card row (services/features/testimonials list items) stays
   inline — those aren't full-form footers. */
.admin-section .form > .actions {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.admin-section .form > .actions .btn { min-height: 40px; }

/* Standalone Save/Update buttons that weren't wrapped — keep them sane. */
.admin-section .form > button[type="submit"]:last-child,
.admin-section .form > .btn:last-child {
  justify-self: start;
  margin-top: 0.5rem;
}

/* Inline subsection headings inside a form (e.g. "Automatizare", "Stripe"). */
.admin-section .form > h2,
.admin-section .form > h3 {
  margin: 1.75rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.admin-section .form > h2:first-of-type,
.admin-section .form > h3:first-of-type {
  /* first heading inside the form — no top border, less padding */
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}
.admin-section .form > h2 + p,
.admin-section .form > h3 + p {
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
/* Tight side spacing on mobile so the edge-to-edge footer still matches the card. */
@media (max-width: 720px) {
  .admin-section { padding: 1.25rem 1rem; }
  .admin-section .form > .form-actions {
    margin: 1.25rem -1rem -1.25rem;
    padding: 1rem 1rem;
  }
  .admin-section .form > .form-actions .btn { flex: 1; }
}

/* Dashboard chart */
.chart-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.chart-card h2 { font-family: var(--font-sans); font-size: 1.1rem; margin: 0 0 0.6rem; }
.chart-card svg { width: 100%; height: 160px; display: block; }
.chart-card .meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }

/* Payment chooser */
.pay-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.pay-option {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pay-option:hover { transform: translateY(-2px); border-color: var(--copper); box-shadow: var(--shadow); }
.pay-option__logo {
  height: 38px; display: flex; align-items: center;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 1.15rem; color: var(--ink);
}
.pay-option__logo .swatch {
  display: inline-block; width: 28px; height: 28px;
  border-radius: 8px; margin-right: 0.7rem;
}
.pay-option__logo .stripe { background: linear-gradient(135deg, #635BFF, #00D4FF); }
.pay-option__logo .paypal { background: linear-gradient(135deg, #003087, #009CDE); }
.pay-option__logo .revolut { background: linear-gradient(135deg, #1c1c1c, #0066ff); }
.pay-option p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; flex: 1; }

/* ---------- FX (one-shot scroll reveals) ---------- */
@layer fx {
  .fx {
    --fx-y: 18px;
    --fx-x: 0;
    --fx-d: 0ms;
    opacity: 0;
    transform: translate3d(var(--fx-x), var(--fx-y), 0);
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: var(--fx-d);
  }
  .fx.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
  .fx.fx-left  { --fx-x: -20px; --fx-y: 0; }
  .fx.fx-right { --fx-x: 20px; --fx-y: 0; }
  .fx-d1 { --fx-d: 70ms; } .fx-d2 { --fx-d: 140ms; } .fx-d3 { --fx-d: 210ms; }
  .fx-d4 { --fx-d: 280ms; } .fx-d5 { --fx-d: 350ms; } .fx-d6 { --fx-d: 420ms; }

  ::view-transition-old(root) { animation: vt-out .22s var(--ease) forwards; }
  ::view-transition-new(root) { animation: vt-in .3s var(--ease-out) forwards; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================================
   Design refresh — modern, calm, less decorative.
   Layered after the original component styles so it wins by
   cascade order without needing !important.
   ============================================================ */

/* Typography: drop the WONK/SOFT axes — classic italic is calmer. */
h1, h2, h3, h4 { font-variation-settings: normal; letter-spacing: -0.015em; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow.with-line::before { width: 24px; opacity: 0.5; }

/* Headlines: italics are simple italic, no gradient theatrics. */
h1 em, h2 em, .hero h1 em {
  font-style: italic;
  font-variation-settings: normal;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: inherit;
}

/* Hero: simpler dark backdrop, single subtle highlight, more space for content. */
.hero {
  min-height: clamp(520px, 78vh, 760px);
  padding: clamp(5rem, 11vh, 9rem) 0 clamp(3.5rem, 7vh, 6rem);
  align-items: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 20%, oklch(40% 0.07 50 / 0.35), transparent 70%),
    radial-gradient(40% 30% at 50% 80%, oklch(35% 0.05 240 / 0.20), transparent 70%);
  filter: none;
  pointer-events: none;
  z-index: 0;
}
.hero h1 { max-width: 18ch; letter-spacing: -0.025em; }

/* Centered hero variant — focused, balanced, no edge-bleed. */
.hero--centered .container {
  text-align: center;
  max-width: 880px;
}
.hero--centered .eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: oklch(94% 0.015 80 / 0.7);
}
.hero--centered h1 {
  margin: 1.2rem auto 1.5rem;
  max-width: 18ch;
  font-size: clamp(2.5rem, 6.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: oklch(98% 0.012 80);
}
.hero--centered h1 em {
  color: var(--copper-2);
  font-style: italic;
}
.hero--centered .lead {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  color: oklch(92% 0.012 80 / 0.78);
  line-height: 1.55;
}
.hero--centered .hero-actions {
  justify-content: center;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hero-live {
  display: inline-flex;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  border-radius: 999px;
  background: oklch(98% 0 0 / 0.06);
  border: 1px solid oklch(94% 0.015 80 / 0.18);
  color: oklch(94% 0.015 80 / 0.92);
  align-items: center;
  gap: 0.55rem;
}
.hero-live .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(94% 0.015 80 / 0.4); }
.hero-live.open .dot { background: oklch(72% 0.16 145); box-shadow: 0 0 0 3px oklch(72% 0.16 145 / 0.18); }
.hero-live.open { color: oklch(94% 0.06 145); border-color: oklch(72% 0.16 145 / 0.4); }
.hero-live.closed .dot { background: oklch(68% 0.16 30); }
.hero-live.closed { color: oklch(92% 0.04 30); border-color: oklch(68% 0.16 30 / 0.35); }

/* Hero meta strip — full-width band beneath the hero. */
.hero-meta-strip {
  background: #0a0a0c;
  color: oklch(94% 0.012 80 / 0.85);
  border-top: 1px solid oklch(94% 0.015 80 / 0.08);
  border-bottom: 1px solid var(--line-soft);
}
.hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.hero-meta-grid .cell {
  padding: 1.4rem 1.5rem;
  border-right: 1px solid oklch(94% 0.015 80 / 0.08);
  min-width: 0;
}
.hero-meta-grid .cell:last-child { border-right: 0; }
.hero-meta-grid .cell strong {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper-2);
  margin-bottom: 0.35rem;
}
.hero-meta-grid .cell span,
.hero-meta-grid .cell a {
  color: oklch(94% 0.012 80 / 0.85);
  font-size: 0.92rem;
  line-height: 1.4;
}
.hero-meta-grid .cell a:hover { color: var(--copper-2); }
@media (max-width: 900px) {
  .hero-meta-grid { grid-template-columns: 1fr 1fr; }
  .hero-meta-grid .cell:nth-child(2) { border-right: 0; }
  .hero-meta-grid .cell:nth-child(1),
  .hero-meta-grid .cell:nth-child(3) { border-right: 1px solid oklch(94% 0.015 80 / 0.08); }
  .hero-meta-grid .cell:nth-child(1),
  .hero-meta-grid .cell:nth-child(2) { border-bottom: 1px solid oklch(94% 0.015 80 / 0.08); }
}
@media (max-width: 520px) {
  .hero-meta-grid { grid-template-columns: 1fr; }
  .hero-meta-grid .cell { border-right: 0; border-bottom: 1px solid oklch(94% 0.015 80 / 0.08); padding: 1.1rem 1.25rem; }
  .hero-meta-grid .cell:last-child { border-bottom: 0; }
}

/* Section labels & numbered indicators — drop the curly italic, use sans-serif. */
.bento .cell .ix,
.service-card .ix,
.pricelist-row .ix {
  font-family: var(--font-sans);
  font-style: normal;
  font-variation-settings: normal;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.bento .cell:nth-child(1) .ix { color: var(--copper-2); font-size: 0.72rem; }
.pricelist-row .ix { font-size: 0.7rem; min-width: 0; }
.service-card .ix { margin-bottom: 0.4rem; }

/* Quieter card interactions — no lift, just a clean border shift. */
.service-card, .testimonial, .pay-option {
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.service-card:hover, .testimonial:hover, .pay-option:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in oklch, var(--ink) 25%, transparent);
  background: var(--paper);
}

/* Tighter, calmer bento. */
.bento {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--line-soft);
}
.bento .cell { padding: 2.25rem 2rem; }

/* Cleaner section heads — left-aligned and roomier. */
.section-head { max-width: 64ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { letter-spacing: -0.025em; }

/* Decorative "S" in the about split — remove the wonky giant glyph. */
.split-image::after {
  content: "";
}

/* Stats strip: simpler, no border separators. */
.stats-strip {
  background: transparent;
  border: 0;
  gap: 0;
}
.stat-cell {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  padding: 2.5rem 1rem;
}
.stat-cell .n {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-cell .lab { font-size: 0.68rem; letter-spacing: 0.2em; }

/* Live "open" badge — calmer, no pulse glow. */
.live-badge.open .dot { animation: none; }
.live-badge {
  font-size: 0.7rem; letter-spacing: 0.14em;
  padding: 0.35rem 0.85rem;
}

/* Hero meta strip — slimmer separators, tighter type. */
.hero-meta { border-top-color: oklch(94% 0.015 80 / 0.10); padding-top: 1.25rem; }
.hero-meta strong { font-size: 0.6rem; letter-spacing: 0.22em; }
.hero-meta .cell > span,
.hero-meta .cell > a { font-size: 0.88rem; }

/* Testimonials: less rounded, more editorial. */
.testimonial { border-radius: 4px; }
.testimonial blockquote {
  font-variation-settings: normal;
  font-style: italic;
  line-height: 1.4;
}

/* Buttons: a touch less pill, calmer hover. */
.btn { letter-spacing: 0.05em; font-size: 0.78rem; padding: 0.85rem 1.6rem; }
.btn.small { font-size: 0.7rem; padding: 0.55rem 1.05rem; }
.btn.accent { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--copper-d); --btn-bd-h: var(--copper-d); }

/* Footer: subtle, more breathing room. */
.site-footer { padding: 4.5rem 0 2rem; margin-top: 0; background: #000; }
.site-footer h4 { color: oklch(94% 0.015 80 / 0.6); }
.site-footer .copyright { border-top-color: oklch(94% 0.015 80 / 0.08); }

/* Gallery hover: no scale jump, just dim caption. */
.gallery-grid figure:hover img { transform: none; }

/* Container fluid padding tweak — slightly tighter on large screens. */
.container { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 900px) { .container { padding-left: 2rem; padding-right: 2rem; } }

/* ---------- Brand logo (header/footer) ---------- */
.brand { gap: 0; align-items: flex-start; }
.brand .brand-logo {
  object-fit: contain;
  display: block;
  width: auto;
  height: min(var(--logo-h, 40px), 56px);
  max-width: min(70vw, 320px);
}
.site-header .inner { min-height: 64px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.site-footer .brand .brand-logo { height: min(var(--logo-h, 44px), 72px); max-width: 100%; }

@media (max-width: 720px) {
  .site-header .inner { min-height: 56px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .site-header .brand .brand-logo { height: min(var(--logo-h, 40px), 40px); }
  .site-footer .brand .brand-logo { height: min(var(--logo-h, 44px), 52px); }
}

/* ---------- Design admin extras ---------- */
.design-brand-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.design-brand-preview {
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  min-height: 120px;
  padding: 1rem;
  display: grid; place-items: center;
}
.design-brand-preview img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  display: block;
}
.design-brand-preview.favicon { min-height: 96px; }
.design-brand-preview.favicon img { max-height: 64px; max-width: 64px; }
.design-brand-preview.hero { aspect-ratio: 16/9; min-height: 0; padding: 0; overflow: hidden; }
.design-brand-preview.hero img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
.brand-placeholder {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
}
.brand-placeholder.small {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--dark);
  color: var(--copper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  border-radius: 12px;
}
.brand-placeholder.hero { padding: 1.5rem; }
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.preset-tile {
  display: grid; gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.preset-tile input { position: absolute; opacity: 0; pointer-events: none; }
.preset-tile.is-active, .preset-tile:hover { border-color: var(--copper); box-shadow: 0 0 0 3px color-mix(in oklch, var(--copper) 18%, transparent); }
.preset-tile .swatches { display: flex; gap: 4px; }
.preset-tile .swatches i { flex: 1; height: 28px; border-radius: 6px; border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); }
.preset-tile .lab { text-transform: capitalize; font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }
.color-field { position: relative; }
.color-field .sw {
  position: absolute; right: 8px; top: 50%; transform: translateY(-30%);
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.color-field input { padding-right: 3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.checkbox-row {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--ink-soft); font-size: 0.92rem;
  cursor: pointer;
}
.checkbox-row input { width: auto; flex: 0 0 auto; }

/* ---------- Visual editor ---------- */
.visual-body {
  background: #0a0a0c;
  color: oklch(94% 0.015 80);
  overflow: hidden;
  height: 100dvh; min-height: 100dvh;
  margin: 0;
  font-family: var(--font-sans);
}
.visual-shell {
  display: grid;
  grid-template-rows: 54px 1fr;
  height: 100dvh;
  width: 100%;
  min-width: 0;
}
.visual-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0 0.85rem;
  background: #000;
  border-bottom: 1px solid oklch(94% 0.015 80 / 0.1);
  color: oklch(94% 0.015 80 / 0.9);
  min-width: 0;
}
.visual-back, .visual-open {
  color: oklch(94% 0.015 80 / 0.85);
  font-size: 0.85rem; padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: background .15s var(--ease);
}
.visual-back:hover, .visual-open:hover { background: oklch(94% 0.015 80 / 0.1); color: oklch(96% 0.012 80); }
.visual-devices { display: flex; gap: 0.25rem; }
.visual-devices button, .visual-actions button {
  background: transparent;
  border: 1px solid oklch(94% 0.015 80 / 0.18);
  color: oklch(94% 0.015 80 / 0.85);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex; gap: 0.3rem; align-items: center;
  transition: all .15s var(--ease);
}
.visual-devices button span { font-size: 0.68rem; opacity: 0.65; }
.visual-devices button:hover, .visual-actions button:hover { background: oklch(94% 0.015 80 / 0.06); }
.visual-devices button.is-active { background: var(--copper-d); border-color: var(--copper-d); color: #fff; }
.visual-devices button.is-active span { opacity: 0.9; }
.visual-actions { display: flex; gap: 0.4rem; align-items: center; }
.visual-actions button { font-size: 1rem; padding: 0.3rem 0.65rem; }

.visual-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 0; min-width: 0;
}
.visual-stage {
  background:
    linear-gradient(45deg, #14141a 25%, transparent 25%),
    linear-gradient(-45deg, #14141a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #14141a 75%),
    linear-gradient(-45deg, transparent 75%, #14141a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #0e0e12;
  display: grid; place-items: center;
  padding: 1.5rem;
  overflow: auto;
  min-width: 0; min-height: 0;
}
.visual-frame-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
  overflow: hidden;
  transition: width .25s var(--ease), height .25s var(--ease);
  width: min(1280px, 100%);
  height: min(800px, 100%);
  max-width: 100%; max-height: 100%;
  position: relative;
}
.visual-frame-wrap.is-framed { border: 8px solid oklch(8% 0.012 50); border-radius: 18px; }
.visual-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.visual-panel {
  background: oklch(13% 0.012 50);
  border-left: 1px solid oklch(94% 0.015 80 / 0.1);
  color: oklch(94% 0.015 80 / 0.92);
  overflow-y: auto;
  padding: 1rem 1rem 2rem;
}
.vp-section { padding: 0.5rem 0 1.25rem; border-bottom: 1px solid oklch(94% 0.015 80 / 0.08); }
.vp-section:last-child { border-bottom: 0; }
.vp-section h2 {
  font-family: var(--font-sans);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-2); font-weight: 600; margin: 0.4rem 0 0.8rem;
}
.vp-field { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.vp-field > label {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(94% 0.015 80 / 0.6);
}
.vp-segs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.vp-seg {
  position: relative;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  border: 1px solid oklch(94% 0.015 80 / 0.15);
  font-size: 0.78rem;
  cursor: pointer;
  color: oklch(94% 0.015 80 / 0.8);
  transition: all .15s var(--ease);
  flex: 1; min-width: 0; text-align: center;
}
.vp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vp-seg:hover { background: oklch(94% 0.015 80 / 0.06); }
.vp-seg.is-active { background: var(--copper-d); border-color: var(--copper-d); color: #fff; }
.vp-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.4rem; }
.vp-preset {
  position: relative;
  display: grid; gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid oklch(94% 0.015 80 / 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s var(--ease);
}
.vp-preset input { position: absolute; opacity: 0; pointer-events: none; }
.vp-preset:hover, .vp-preset.is-active { border-color: var(--copper); }
.vp-preset.is-active { box-shadow: 0 0 0 2px color-mix(in oklch, var(--copper) 30%, transparent); }
.vp-swatches { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; }
.vp-swatches i { flex: 1; display: block; }
.vp-lab { font-size: 0.68rem; text-align: center; color: oklch(94% 0.015 80 / 0.75); text-transform: capitalize; }
.vp-help { font-size: 0.72rem; color: oklch(94% 0.015 80 / 0.55); margin: 0.3rem 0 0; line-height: 1.45; }
.vp-status {
  font-size: 0.78rem; min-height: 1.2em; margin-top: 0.4rem;
  color: oklch(94% 0.015 80 / 0.7);
}
.vp-status.is-ok { color: oklch(72% 0.16 145); }
.vp-status.is-err { color: oklch(72% 0.18 30); }

.vp-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.vp-links a {
  display: block; padding: 0.55rem 0.65rem;
  color: oklch(94% 0.015 80 / 0.88);
  border-radius: 6px; font-size: 0.85rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.vp-links a:hover { background: oklch(94% 0.015 80 / 0.08); color: oklch(96% 0.012 80); }

.vp-jumps { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vp-jumps button {
  background: transparent;
  border: 1px solid oklch(94% 0.015 80 / 0.15);
  color: oklch(94% 0.015 80 / 0.85);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.vp-jumps button:hover { background: var(--copper-d); border-color: var(--copper-d); color: #fff; }

@media (max-width: 900px) {
  .visual-shell { grid-template-rows: 48px 1fr; }
  .visual-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .visual-panel { border-left: 0; border-top: 1px solid oklch(94% 0.015 80 / 0.1); max-height: 50vh; padding: 0.85rem; }
  .visual-frame-wrap { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; }
  .visual-stage { padding: 0.5rem; }
  .visual-devices span { display: none; }
  .visual-devices button { padding: 0.3rem 0.5rem; }
  .visual-back, .visual-open { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
}
@media (max-width: 520px) {
  .visual-actions .visual-open { display: none; }
  .visual-topbar { gap: 0.4rem; padding: 0 0.5rem; }
  .visual-devices button { font-size: 0.85rem; padding: 0.3rem 0.45rem; }
}

/* ---------- Modern datetime picker (booking) ---------- */
.dtp { position: relative; display: block; }

.dtp-summary {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 56px;
}
.dtp-summary:hover { border-color: var(--copper); }
.dtp--open .dtp-summary,
.dtp--has-value .dtp-summary { border-color: var(--copper); }
.dtp--has-value .dtp-summary { box-shadow: 0 0 0 3px color-mix(in oklch, var(--copper) 18%, transparent); }
.dtp--invalid .dtp-summary {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent);
  animation: dtp-shake .35s var(--ease);
}
@keyframes dtp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.dtp-summary__label {
  font-size: 1rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dtp-summary__chev {
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform .2s var(--ease);
}
.dtp--open .dtp-summary__chev { transform: rotate(180deg); }

.dtp-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -16px rgba(20, 16, 12, 0.35), 0 4px 16px -8px rgba(20, 16, 12, 0.2);
  z-index: 30;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  animation: dtp-pop .18s var(--ease-out);
}
@keyframes dtp-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Calendar */
.dtp-cal { padding: 1.1rem 1.1rem 1.25rem; border-right: 1px solid var(--line-soft); }
.dtp-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
}
.dtp-cal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: capitalize;
}
.dtp-cal__nav {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.dtp-cal__nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dtp-cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }

.dtp-cal__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.4rem;
  text-align: center;
}
.dtp-cal__weekdays span {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 0.4rem 0;
}

.dtp-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dtp-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 0;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.dtp-cell__day {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.92rem;
  font-weight: 500;
}
.dtp-cell:hover:not(:disabled):not(.is-selected) { background: var(--cream); }
.dtp-cell.is-out { color: var(--muted); opacity: 0.45; }
.dtp-cell.is-disabled { color: var(--muted); cursor: not-allowed; opacity: 0.35; text-decoration: line-through; }
.dtp-cell.is-disabled:hover { background: transparent; }
.dtp-cell.is-today:not(.is-selected) .dtp-cell__day::after {
  content: ""; position: absolute; left: 50%; bottom: 14%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--copper);
  transform: translateX(-50%);
}
.dtp-cell.is-selected {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 12px -4px rgba(20, 16, 12, 0.4);
}
.dtp-cell.is-selected:hover { background: var(--ink); }

/* Slots */
.dtp-slots { padding: 1.1rem 1.1rem 1.25rem; min-width: 0; display: flex; flex-direction: column; }
.dtp-slots__head { margin-bottom: 0.75rem; }
.dtp-slots__title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.dtp-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
  flex: 1;
  padding-right: 0.2rem;
}
.dtp-slot {
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.dtp-slot:hover { border-color: var(--copper); color: var(--copper-d); }
.dtp-slot.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.dtp-slots__empty {
  margin: auto 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 1.5rem 0.5rem;
}

.dtp-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
  font-size: 0.8rem;
}
.dtp-foot__lead { color: var(--muted); }

@media (max-width: 640px) {
  /* Mobile: full-screen modal sheet, single scrollable column, sticky header + footer */
  .dtp--open::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 80;
    animation: dtp-fade .2s var(--ease-out);
  }
  @keyframes dtp-fade { from { opacity: 0; } to { opacity: 1; } }

  .dtp-panel {
    display: flex; flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
    border: 0;
    z-index: 81;
    background: var(--paper);
    animation: dtp-slide-up .22s var(--ease-out);
    grid-template-columns: 1fr;
  }
  @keyframes dtp-slide-up {
    from { transform: translateY(20px); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* Body content scrolls between sticky header and sticky footer */
  .dtp-cal {
    border-right: 0;
    padding: 0;
    flex: 0 0 auto;
    background: var(--paper);
  }
  .dtp-cal__head {
    position: sticky; top: 0;
    background: var(--paper);
    padding: 0.9rem 1rem;
    z-index: 5;
    border-bottom: 1px solid var(--line-soft);
    min-height: 56px;
  }
  .dtp-cal__title {
    flex: 1; text-align: center;
    font-size: 1.05rem;
  }
  .dtp-cal__nav { width: 44px; height: 44px; font-size: 1.25rem; flex-shrink: 0; }
  .dtp-cal__weekdays { padding: 0.5rem 0.85rem 0.25rem; }
  .dtp-cal__weekdays span { padding: 0.4rem 0; font-size: 0.62rem; }
  .dtp-cal__grid { padding: 0 0.85rem; gap: 4px; }
  .dtp-cell { aspect-ratio: 1 / 1; min-height: 42px; border-radius: 10px; }
  .dtp-cell__day { font-size: 0.95rem; font-weight: 500; }

  .dtp-slots {
    padding: 1.1rem 1rem 1.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line-soft);
    background: var(--cream);
  }
  .dtp-slots__head { margin-bottom: 0.85rem; }
  .dtp-slots__grid {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .dtp-slot {
    padding: 0.9rem 0.5rem;
    min-height: 52px;
    font-size: 1rem;
    background: var(--paper);
  }

  .dtp-foot {
    flex: 0 0 auto;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0));
    background: #fff;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .dtp-foot__lead {
    flex: 1 1 100%;
    font-size: 0.75rem;
    text-align: left;
  }
  .dtp-foot .btn {
    flex: 1 1 100%;
    padding: 1rem 1.4rem;
    min-height: 52px;
    font-size: 0.85rem;
  }

  /* Lock body scroll when the picker is open */
  body.dtp-locked { overflow: hidden; }
}

/* Tighter on very small phones */
@media (max-width: 380px) {
  .dtp-slots__grid { grid-template-columns: 1fr 1fr; }
  .dtp-cell { min-height: 38px; }
}

/* Header style override: dark/transparent header sites still show paper panel */
body[data-header="dark"] .dtp-panel,
body[data-header="transparent"] .dtp-panel { background: var(--paper); color: var(--ink); }

/* ---------- "How it works" – three illustrated steps ---------- */
.howto {
  padding: clamp(4rem, 8.5vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in oklch, var(--copper) 6%, transparent), transparent 60%),
    var(--bg);
  position: relative;
}
.howto::after {
  /* hairline rule under the section, soft and editorial */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.howto__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
}
.howto__head .eyebrow {
  display: inline-block;
  letter-spacing: 0.3em;
}
.howto__head h2 {
  margin: 0.85rem 0 0.9rem;
  font-size: clamp(2.05rem, 4.5vw, 3.3rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.howto__head h2::after {
  content: "";
  display: block;
  width: 38px; height: 2px;
  background: var(--copper);
  margin: 1rem auto 0;
  border-radius: 2px;
}
.howto__head .lead {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: var(--ink-soft);
}

.howto__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  position: relative;
  counter-reset: howto;
}
/* Hairline that visually connects the three steps. */
.howto__steps::before {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  top: 96px;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  z-index: 0;
  pointer-events: none;
}
.howto__step {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.howto__step:hover {
  border-color: color-mix(in oklch, var(--copper) 38%, var(--line-soft));
  box-shadow: 0 10px 30px -16px rgba(20, 16, 12, 0.18);
  transform: translateY(-3px);
}
.howto__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--copper-d);
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern", "liga", "ss01";
}
.howto__icon {
  width: clamp(48px, 5vw, 60px);
  height: clamp(48px, 5vw, 60px);
  display: block;
  margin: 1rem auto 1.4rem;
  color: var(--ink);
}
.howto__icon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.howto__icon circle[r="1.4"] { fill: currentColor; stroke: none; }
.howto__step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.65vw, 1.55rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.55rem;
  line-height: 1.15;
}
.howto__step p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}

.howto__cta {
  text-align: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.howto__phone {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.howto__phone a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
  margin-left: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.howto__phone a:hover { color: var(--copper-d); border-bottom-color: var(--copper-d); }

/* Larger primary button — meant for hero / "Start booking" CTAs. */
.btn--large {
  padding: 1.1rem 2.25rem;
  font-size: 0.94rem;
  letter-spacing: 0.09em;
  min-height: 56px;
  gap: 0.6rem;
}
.btn--large .arrow { font-size: 1.1em; }

@media (max-width: 880px) {
  .howto__steps { grid-template-columns: 1fr; gap: 0.85rem; max-width: 480px; margin-inline: auto; }
  .howto__steps::before { display: none; }
  .howto__step { padding: 1.5rem 1.25rem 1.4rem; }
  .howto__icon { margin: 0.85rem auto 1rem; }
}

/* ---------- Customer account pages ---------- */
.account-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px -28px rgba(20,16,12,0.2);
}
.account-card--wide { max-width: 720px; }
.account-card .eyebrow { display: block; }
.account-card h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  margin-top: 0.4rem;
}
.account-card .form { margin-top: 0.5rem; }
.account-card__alt {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.account-card__alt a { color: var(--copper-d); border-bottom: 1px solid var(--copper-d); padding-bottom: 1px; }
.login-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.login-forgot {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--copper-d);
  border-bottom: 1px solid color-mix(in oklch, var(--copper-d) 35%, transparent);
  padding-bottom: 1px;
}
.login-forgot:hover { color: var(--ink); border-bottom-color: var(--ink); }

.account-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.account-head__actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.account-section-title {
  font-family: var(--font-sans);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
  margin: 2rem 0 0.85rem;
}
.account-empty {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.account-meta {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

.booking-list { display: grid; gap: 0.6rem; }
.booking-row {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: 0.75rem;
  transition: border-color .15s var(--ease);
}
.booking-row:hover { border-color: color-mix(in oklch, var(--ink) 18%, transparent); }
.booking-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1rem;
  align-items: center;
}
.booking-row__when strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.booking-row__service h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}
.booking-row__service p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.2rem 0 0;
}
.booking-row__amount {
  text-align: right;
}
.booking-row__amount strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.3rem;
}
.booking-row__actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.booking-row--past { opacity: 0.86; }

@media (max-width: 720px) {
  .booking-row__main { grid-template-columns: 1fr; gap: 0.5rem; }
  .booking-row__amount { text-align: left; }
  .booking-row__actions { justify-content: stretch; }
  .booking-row__actions .btn { flex: 1; }
}

.account-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: color-mix(in oklch, var(--copper) 10%, var(--paper));
  border: 1px solid color-mix(in oklch, var(--copper) 30%, var(--line-soft));
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem;
}
.account-banner--invite {
  background: var(--paper);
  border-color: var(--line);
}

/* Faktura swatch in payment chooser */
.pay-option__logo .faktura {
  background: linear-gradient(135deg, #2a2a32, #6a6a76);
}

/* ---------- PWA install banner ---------- */
.pwa-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 90;
  background: #0e0e12;
  color: oklch(96% 0.012 80);
  border: 1px solid oklch(94% 0.015 80 / 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.55), 0 4px 14px -6px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  max-width: 420px;
  margin-left: auto;
  padding: calc(0.85rem + env(safe-area-inset-top, 0)) 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0));
}
.pwa-banner.is-visible { opacity: 1; transform: translateY(0); }
.pwa-banner__inner {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.85rem;
  align-items: center;
  position: relative;
  padding: 0.25rem 0.5rem 0.25rem 0.4rem;
}
.pwa-banner__icon {
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: oklch(94% 0.015 80 / 0.08);
  border-radius: 10px;
  color: var(--copper-2);
}
.pwa-banner__icon svg { width: 22px; height: 22px; }
.pwa-banner__text {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid; gap: 0.15rem;
  min-width: 0;
}
.pwa-banner__text strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: oklch(98% 0.012 80);
  line-height: 1.2;
}
.pwa-banner__text span {
  font-size: 0.82rem;
  color: oklch(94% 0.012 80 / 0.7);
  line-height: 1.35;
}
.pwa-banner__actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.pwa-banner__primary {
  background: var(--copper);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  min-height: 38px;
  transition: background .15s var(--ease);
}
.pwa-banner__primary:hover { background: var(--copper-d); }
.pwa-banner__dismiss {
  background: transparent;
  color: oklch(94% 0.015 80 / 0.7);
  border: 0;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 999px;
  min-height: 38px;
}
.pwa-banner__dismiss:hover { color: oklch(96% 0.012 80); background: oklch(94% 0.015 80 / 0.06); }
.pwa-banner__close {
  position: absolute;
  top: -10px; right: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: oklch(94% 0.015 80 / 0.15);
  color: oklch(96% 0.012 80);
  border: 0;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: none; /* show on hover/touch */
}
@media (max-width: 520px) {
  .pwa-banner {
    left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
    padding: 0.7rem;
    border-radius: var(--radius-lg);
  }
  .pwa-banner__inner {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.1rem 0.75rem;
    padding: 0;
  }
  .pwa-banner__icon { width: 36px; height: 36px; grid-row: 1 / span 2; }
  .pwa-banner__icon svg { width: 18px; height: 18px; }
  .pwa-banner__text { grid-column: 2; grid-row: 1 / span 2; }
  .pwa-banner__text strong { font-size: 0.96rem; }
  .pwa-banner__text span { font-size: 0.78rem; }
  .pwa-banner__actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-end;
    padding-top: 0.45rem;
  }
}

/* iOS variant — slightly different accent */
.pwa-banner--ios .pwa-banner__icon { color: oklch(75% 0.16 230); }

/* ---------- Admin notification status card + rows ---------- */
.notif-status {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}
.notif-status.is-ok {
  background: oklch(94% 0.04 145);
  border-color: oklch(80% 0.07 145);
  color: oklch(35% 0.10 145);
}
.notif-status.is-warn {
  background: oklch(96% 0.045 85);
  border-color: oklch(82% 0.09 85);
  color: oklch(38% 0.10 85);
}
.notif-status strong { font-weight: 600; flex-shrink: 0; }
.notif-status code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.05);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88em;
}
.notif-status a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.notif-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.notif-row:hover { border-color: var(--copper); }
.notif-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--copper-d);
  cursor: pointer;
}
.notif-row strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
.notif-row em { font-style: normal; color: var(--muted); font-size: 0.88rem; line-height: 1.45; display: block; }
.notif-row:has(input:checked) {
  background: color-mix(in oklch, var(--copper) 8%, var(--paper));
  border-color: var(--copper);
}

/* Friendlier range slider for the hero overlay etc. */
.range-field { display: grid; gap: 0.45rem; }
.range-field__label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.range-field__label output {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem; letter-spacing: 0;
  color: var(--ink); font-weight: 600;
}
.range-field input[type="range"] {
  width: 100%; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper) calc(var(--p, 50) * 1%), var(--line) calc(var(--p, 50) * 1%));
  border-radius: 999px;
  outline: none; padding: 0;
}
.range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}
.range-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}
.range-field__hints {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted);
}

/* ---------- Hours grid (admin settings) ---------- */
.hours-grid { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.hours-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 110px;
  gap: 1rem; align-items: end;
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.hours-row.is-closed { opacity: 0.65; }
.hours-day {
  font-weight: 600; color: var(--ink);
  font-size: 0.9rem;
  align-self: center;
}
.hours-time { display: grid; gap: 0.2rem; margin: 0; }
.hours-time > span:first-child {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.hours-time input[type="time"] {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}
.hours-time input[type="time"]:disabled { opacity: 0.4; cursor: not-allowed; }
.hours-closed {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--ink-soft); cursor: pointer;
  align-self: center; padding-top: 0.85rem;
}
.hours-closed input { width: auto; }

@media (max-width: 600px) {
  .hours-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.85rem;
  }
  .hours-day { grid-column: 1 / -1; padding-top: 0.2rem; }
  .hours-closed { padding-top: 0; }
}

/* ---------- Email template editor ---------- */
.email-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
.email-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  min-height: 420px;
  resize: vertical;
}
.var-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.var-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.var-chip {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  width: 100%;
}
.var-chip:hover { background: oklch(96% 0.02 80); border-color: var(--copper); }
.var-chip code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.var-desc { font-size: 0.75rem; color: var(--muted); padding-left: 0.4rem; }

@media (max-width: 900px) {
  .email-edit-grid { grid-template-columns: 1fr; }
  .email-side { order: -1; }
  .email-form textarea { min-height: 320px; }
}

/* ---------- Admin mobile toggle ---------- */
.admin-nav-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 70;
  width: 44px; height: 44px;
  background: var(--dark);
  border: 1px solid oklch(94% 0.015 80 / 0.2);
  border-radius: 10px;
  cursor: pointer;
}
.admin-nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: oklch(96% 0.012 80);
  transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s;
}
.admin-nav-toggle span:nth-child(1) { top: 13px; }
.admin-nav-toggle span:nth-child(2) { top: 21px; }
.admin-nav-toggle span:nth-child(3) { top: 29px; }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.admin-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 55;
  opacity: 0; transition: opacity .25s;
}
.admin-scrim.is-open { display: block; opacity: 1; }

/* ---------- Responsive: site (desktop → mobile) ---------- */

/* Big desktop polish */
@media (min-width: 1440px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Tablet landscape */
@media (max-width: 1100px) {
  .site-header nav { gap: 1.2rem; }
  .site-footer .container { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .container { padding: 0 1.25rem; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(180px, auto); }
  .bento .cell:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .site-footer .container { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 1.25rem 0; }
  .hero-meta .cell:nth-child(2) { border-right: 0; padding-right: 0; }
  .hero-meta .cell:nth-child(3) { padding-left: 0; }
  .hero-meta .cell:nth-child(odd) { border-right: 1px solid oklch(90% 0.015 80 / 0.12); padding-right: 1rem; }
  .hero-meta .cell:nth-child(even) { padding-left: 1.25rem; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonials { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .admin-main { padding: 1.75rem; }
}

/* Phone landscape / small tablets — admin gets off-canvas drawer */
@media (max-width: 880px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-main { padding: 4rem 1.25rem 2rem; }
  .admin-nav-toggle { display: block; }
  .admin-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(280px, 86vw);
    z-index: 60;
    transform: translateX(-105%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
    padding-top: 4rem;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.45);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-topbar h1 { font-size: clamp(1.3rem, 4.5vw, 1.8rem); }
  .admin-topbar .topbar-user { display: none; }
  body.admin-body.is-nav-open { overflow: hidden; }
}

/* Phone */
@media (max-width: 720px) {
  .section { padding: clamp(2.75rem, 6vw, 4rem) 0; }
  .section-head { margin-bottom: 2rem; }
  .hero { min-height: clamp(440px, 70vh, 640px); padding: 4rem 0 3rem; }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); }
  .hero .lead { font-size: 1rem; }
  .hero-actions { gap: 0.6rem; margin-top: 1.75rem; width: 100%; }
  .hero-actions .btn { flex: 1 1 calc(50% - 0.6rem); min-width: 0; padding-left: 1rem; padding-right: 1rem; }
  .hero-actions .live-badge { flex-basis: 100%; justify-content: center; }
  .hero-meta { grid-template-columns: 1fr 1fr; padding-top: 1.25rem; margin-top: 2rem; }
  .hero-meta .cell { padding: 0.5rem 0.75rem; }
  .hero-meta .cell:not(:last-child),
  .hero-meta .cell:not(:first-child) { border: 0; padding-left: 0; padding-right: 0; }
  .hero-meta .cell:nth-child(odd) { padding-right: 0.75rem; border-right: 1px solid oklch(90% 0.015 80 / 0.12); }
  .hero-meta .cell:nth-child(even) { padding-left: 0.75rem; }

  .site-header .inner { padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 1rem; align-items: center; }
  .brand { font-size: 1.2rem; }
  .brand small { font-size: 0.55rem; letter-spacing: 0.25em; }
  .site-header nav { display: none; }

  /* Full-screen drawer pinned to viewport — independent of header sticky behavior. */
  .site-header nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 56px; left: 0; right: 0;
    height: calc(100dvh - 56px); max-height: calc(100dvh - 56px);
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    background: var(--paper);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
    animation: nav-slide .22s var(--ease-out);
    z-index: 60;
  }
  @keyframes nav-slide {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .site-header nav.is-open a:not(.btn):not(.lang-switch) {
    padding: 1.1rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.1rem;
    font-weight: 500;
    min-height: 56px;
    display: flex;
    align-items: center;
    letter-spacing: -0.005em;
  }
  .site-header nav.is-open a:not(.btn):not(.lang-switch):last-of-type { border-bottom: 0; }
  .site-header nav.is-open a:not(.btn):not(.lang-switch)::after { display: none; }
  .site-header nav.is-open .btn {
    margin-top: auto;
    margin-bottom: 0.5rem;
    width: 100%;
    padding: 1.1rem 1.5rem;
    min-height: 56px;
    font-size: 0.88rem;
  }
  .site-header nav.is-open .lang-switch {
    align-self: flex-start;
    margin-top: 0.75rem;
    padding: 0.55rem 0.95rem;
  }
  /* No separate backdrop element — the drawer itself is opaque and full-screen
     below the header, and any extra layer would shove the drawer's links into
     a lower stacking context (which is what was eating taps on the menu). */
  .nav-toggle { display: block; }

  /* Scroll lock that actually works on iOS Safari:
     - body becomes position: fixed pinned at -<savedScroll>px so background is
       frozen exactly where the user was;
     - header is forced from sticky → fixed so it stays at viewport top:0
       (otherwise the negative-top body shoves the sticky header off-screen). */
  body.nav-is-open {
    overflow: hidden;
    position: fixed;
    top: var(--scroll-y, 0);
    left: 0; right: 0;
    width: 100%;
  }
  body.nav-is-open .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
  }

  .bento { grid-template-columns: 1fr; }
  .bento .cell { padding: 1.5rem 1.25rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .pricelist-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "ix title" "ix info" "price price";
    column-gap: 1rem;
  }
  .pricelist-row .ix { grid-area: ix; font-size: 1.2rem; }
  .pricelist-row h3 { grid-area: title; }
  .pricelist-row p, .pricelist-row .dur { grid-area: info; }
  .pricelist-row .price { grid-area: price; font-size: 1.5rem; margin-top: 0.3rem; }

  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .gallery-grid figure { aspect-ratio: 3/4; }

  .testimonials { grid-template-columns: 1fr; gap: 0.85rem; }
  .testimonial { padding: 1.5rem; }

  .info-strip { grid-template-columns: 1fr; }
  .info-strip .item { padding: 1.4rem 1.25rem; }

  .site-footer { padding: 3rem 0 1.5rem; margin-top: 0; }
  .site-footer .container { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer .copyright { flex-direction: column; gap: 0.4rem; align-items: flex-start; }

  .form .row { grid-template-columns: 1fr; gap: 0.85rem; }
  .form input, .form select, .form textarea { padding: 0.95rem 1rem; font-size: 16px; }

  .design-brand-row { grid-template-columns: 1fr; }

  .cta-banner { padding: clamp(2.5rem, 8vw, 4rem) 0; }
  .cta-banner h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .cta-banner p { font-size: 0.98rem; }
}

/* Small phones */
@media (max-width: 420px) {
  body { font-size: 15px; }
  .container { padding: 0 1rem; }
  h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); line-height: 1.05; }
  .hero .lead { font-size: 0.98rem; }
  .stats-strip { grid-template-columns: 1fr; }
  .stat-cell { padding: 1.5rem 1rem; }
  .services-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid figure { aspect-ratio: 4/5; }
  .btn { padding: 0.8rem 1.25rem; font-size: 0.78rem; }
  .btn.small { padding: 0.55rem 0.95rem; font-size: 0.7rem; }
  .admin-main { padding: 3.75rem 0.9rem 1.5rem; }
  .admin-section { padding: 1.25rem 1rem; }
  table.data { font-size: 0.85rem; }
  table.data th, table.data td { padding: 0.55rem 0.5rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat { padding: 1rem; }
  .stat .num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

/* Tables: horizontal scroll wrapper on small screens (default for generic data tables) */
/* ============================================================================
   Admin mobile hardening — applied below 880px (where the sidebar collapses).
   Goal: nothing extends past the viewport in portrait, every page is readable
   and tappable, and we don't rely on horizontal scrolling inside tables.
   ============================================================================ */
@media (max-width: 880px) {
  /* Hard containment: every layer of the admin tree is clipped to its parent.
     If anything still tries to overflow horizontally, the scroll never bubbles
     out to the body, so the page doesn't jiggle in portrait. */
  body.admin-body { max-width: 100vw; overflow-x: clip; }
  .admin-layout, .admin-main, .admin-section,
  .admin-section > *, .admin-section .form,
  .admin-section .form > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .admin-main { padding: 4rem 1rem 2rem; }
  .admin-section {
    padding: 1.1rem 1rem;
    border-radius: 14px;
    margin-bottom: 1rem;
  }

  /* Topbar — title + logout in one tidy row. */
  .admin-topbar { margin-bottom: 1.1rem; flex-wrap: nowrap; gap: 0.65rem; min-width: 0; }
  .admin-topbar h1 { font-size: clamp(1.15rem, 4.6vw, 1.45rem); min-width: 0; overflow-wrap: anywhere; }
  .admin-topbar .topbar-meta { gap: 0.5rem; font-size: 0.82rem; flex-shrink: 0; }
  .admin-topbar .topbar-meta .btn.small { padding: 0.5rem 0.75rem; min-height: 40px; }
  .alert { padding: 0.85rem 1rem; font-size: 0.9rem; }

  /* ===== Every <table class="data"> auto-cardifies on mobile. =====
     - thead hidden; each row becomes a stacked block card.
     - each cell becomes a labelled block; data-label (if present) is shown
       above the value in small caps; otherwise just the value full-width.
     - long values wrap (no horizontal scroll, no "outside the screen" text). */
  .admin-section table.data:not(.admin-bookings-table),
  .admin-main    table.data:not(.admin-bookings-table) {
    display: block;
    overflow: visible;
    white-space: normal;
    width: 100%;
    max-width: 100%;
  }
  table.data:not(.admin-bookings-table) thead { display: none; }
  table.data:not(.admin-bookings-table) tbody { display: block; width: 100%; }
  table.data:not(.admin-bookings-table) tbody tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
  }
  table.data:not(.admin-bookings-table) tbody tr:hover td,
  table.data:not(.admin-bookings-table) tbody tr:hover th { background: transparent; }
  table.data:not(.admin-bookings-table) tbody tr > th,
  table.data:not(.admin-bookings-table) tbody tr > td {
    display: block;
    width: 100% !important;     /* overrides inline width: 180px etc. */
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.45rem 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--ink);
    background: transparent !important;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  table.data:not(.admin-bookings-table) tbody tr > th:last-child,
  table.data:not(.admin-bookings-table) tbody tr > td:last-child { border-bottom: 0; }
  table.data:not(.admin-bookings-table) tbody tr > th { font-weight: 600; }
  table.data:not(.admin-bookings-table) tbody tr > td[data-label]::before,
  table.data:not(.admin-bookings-table) tbody tr > th[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.25rem;
  }

  /* Stat cards: two-up on phone, becomes single column under 420. */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; }
  .stat { padding: 1rem; border-radius: 14px; }
  .stat .num { font-size: clamp(1.5rem, 7vw, 2rem); }
  .stat .label { font-size: 0.62rem; letter-spacing: 0.16em; margin-top: 0.4rem; }
  .stat .sub { font-size: 0.74rem; }

  /* Forms — full-width inputs, 16px font (kills iOS zoom-on-focus). */
  .form { gap: 1rem; }
  .form .row { grid-template-columns: 1fr; gap: 0.85rem; }
  .form label > span:first-child { font-size: 0.68rem; }
  .form input, .form select, .form textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.85rem 1rem;
    font-size: 16px;
    border-radius: 12px;
  }
  /* Inline max-width that's set for desktop esthetics shouldn't apply on phone. */
  .admin-section .form input[style*="max-width"],
  .admin-section .form select[style*="max-width"] { max-width: 100% !important; }

  /* Generic .actions / .filter-chips rows: swipe horizontally instead of wrap. */
  .actions, .filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    margin: 0 -0.25rem 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .actions::-webkit-scrollbar, .filter-chips::-webkit-scrollbar { display: none; }
  .actions > .btn, .filter-chips > .btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }

  /* Code & monospace must wrap, not extend past the card edge. */
  code, .data code { overflow-wrap: anywhere; word-break: break-all; font-size: 0.86em; line-height: 1.4; }

  /* Pay options chooser collapses to a single column. */
  .pay-options { grid-template-columns: 1fr; gap: 0.7rem; }
  .pay-option { padding: 1.1rem; border-radius: 14px; }

  /* Long help paragraphs under headings shouldn't push the section out. */
  .admin-section p { overflow-wrap: anywhere; word-break: break-word; }
}

/* Very small phones (≤420 px). */
@media (max-width: 420px) {
  .admin-main { padding: 3.6rem 0.75rem 1.5rem; }
  .admin-section { padding: 1rem 0.85rem; border-radius: 14px; }
  .stat-grid { grid-template-columns: 1fr; gap: 0.65rem; }
  .admin-topbar { gap: 0.5rem; }
  .admin-topbar h1 { font-size: 1.1rem; }
  table.data:not(.admin-bookings-table) tbody tr { padding: 0.8rem 0.9rem; }
}

/* Bookings table: rich card layout from tablet-portrait down. Each row is a
   self-contained card with a header strip (date + status badge), a customer
   block, service / address / amount sections, and full-width action controls.
   The <table> remains semantically intact for screen readers and desktop. */
@media (max-width: 880px) {
  .admin-section table.admin-bookings-table,
  .admin-main table.admin-bookings-table {
    display: block;
    overflow: visible;
    white-space: normal;
    width: 100%;
    max-width: 100%;
  }
  .admin-bookings-table thead { display: none; }
  .admin-bookings-table tbody { display: block; width: 100%; }
  .admin-bookings-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time   status"
      "client client"
      "service service"
      "address address"
      "amount  amount"
      "actions actions";
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 24, 20, 0.04), 0 1px 0 rgba(28,24,20,0.02);
  }
  .admin-bookings-table tbody tr:hover td { background: transparent; }
  .admin-bookings-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.1rem;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .admin-bookings-table tbody td::before { content: none; display: none; }

  /* --- TIME header strip --- */
  .admin-bookings-table .bk-time {
    grid-area: time;
    background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    padding: 0.95rem 1.1rem 0.8rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .admin-bookings-table .bk-time__day {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    text-transform: capitalize;
    letter-spacing: -0.005em;
  }
  .admin-bookings-table .bk-time__hh {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1rem;
    font-weight: 600;
    color: var(--copper-d, #b8845a);
    margin-left: auto;
    letter-spacing: 0.02em;
  }

  /* --- CLIENT block --- */
  .admin-bookings-table .bk-client { grid-area: client; padding-top: 1rem; padding-bottom: 0.9rem; }
  .admin-bookings-table .bk-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.35rem;
  }
  .admin-bookings-table .bk-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.88rem;
  }
  .admin-bookings-table .bk-contact a {
    color: var(--copper-d, #8a5e3a);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .admin-bookings-table .bk-contact a:hover { text-decoration: underline; }

  /* --- SERVICE --- */
  .admin-bookings-table .bk-service {
    grid-area: service;
    font-size: 0.95rem;
    color: var(--ink);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  .admin-bookings-table .bk-service::before {
    content: "Tjeneste";
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }

  /* --- ADDRESS --- */
  .admin-bookings-table .bk-address {
    grid-area: address;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft, #4a4239);
  }
  .admin-bookings-table .bk-address::before {
    content: "Adresse";
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }
  .admin-bookings-table .bk-address > span { display: block; }
  .admin-bookings-table .bk-address > em {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
    font-style: italic;
    font-size: 0.85rem;
  }

  /* --- AMOUNT block (also folds in the booking status badge) --- */
  .admin-bookings-table .bk-amount {
    grid-area: amount;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    background: var(--cream);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .admin-bookings-table .bk-amount strong {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink);
  }
  /* Status badge sits in the same header strip as the time, right-aligned. */
  .admin-bookings-table .bk-status {
    grid-area: status;
    padding: 0.95rem 1.1rem 0.8rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .admin-bookings-table .bk-status .badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  /* --- ACTIONS --- */
  .admin-bookings-table .bk-actions {
    grid-area: actions;
    padding: 0.95rem 1.1rem 1.1rem;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .admin-bookings-table .bk-actions form { margin: 0; display: block; width: 100%; }
  .admin-bookings-table .bk-actions select {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237a6f60' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
  }
  .admin-bookings-table .bk-actions select option { font-size: 1rem; }
  .admin-bookings-table .bk-actions button {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    border-radius: 12px;
  }

  /* Filter chips: keep on one row and let the user swipe horizontally so they
     don't wrap into a multi-line mess on narrow phones. */
  .filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    margin: 0 -0.25rem 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }

  /* Prevent any inline-style children of the cards from forcing horizontal scroll. */
  .admin-section { overflow-x: hidden; }
}

/* Phone-narrow extras: a bit tighter inner padding, slightly smaller numbers. */
@media (max-width: 420px) {
  .admin-bookings-table tbody tr { border-radius: 14px; }
  .admin-bookings-table .bk-time { padding: 0.85rem 0.95rem 0.7rem; }
  .admin-bookings-table .bk-time__day { font-size: 1.02rem; }
  .admin-bookings-table .bk-amount { padding-left: 0.95rem; padding-right: 0.95rem; }
  .admin-bookings-table .bk-amount strong { font-size: 1.2rem; }
  .admin-bookings-table tbody td { padding-left: 0.95rem; padding-right: 0.95rem; }
  .admin-bookings-table .bk-actions { padding-left: 0.95rem; padding-right: 0.95rem; }
}

/* Larger tap targets on touch */
@media (hover: none) and (pointer: coarse) {
  .btn, .lang-switch, .site-header nav a { min-height: 44px; }
  .form input, .form select, .form textarea { min-height: 48px; }
  .admin-sidebar nav a { padding: 0.85rem 1rem; font-size: 0.95rem; }
}