/* Barbearia do Rossio (demo "barber-shop", DEC-082): brand kit docs/demos/barber-shop.md. The only dark kit: lacquer
   black and walnut, cream text, brass hairlines, sharp corners and no shadows. Every brand value is a --d-* variable
   declared once below; layout spacing uses --vt-space-*, --vt-z-*, --vt-gutter and --vt-measure. Scoped to body.d-barber-shop. */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lib/demos/barber-shop/big-shoulders-display/files/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lib/demos/barber-shop/archivo/files/archivo-latin-wght-normal.woff2") format("woff2");
}

body.d-barber-shop {
  color-scheme: dark;

  /* Palette (contrast table in the brand kit) */
  --d-bg: #121110;
  --d-surface: #1E1C19;
  --d-ink: #F1E8D6;
  --d-muted: #B2A893;
  --d-line: #3B362E;
  --d-accent: #C9A45C;
  --d-accent-ink: #121110;
  --d-accent-2: #D9654F;
  --d-surface-raised: color-mix(in srgb, var(--d-ink) 6%, var(--d-surface));
  --d-accent-tint: color-mix(in srgb, var(--d-accent) 14%, var(--d-surface));
  --d-pole-tint: color-mix(in srgb, var(--d-accent-2) 16%, var(--d-surface));
  --d-hero-veil: color-mix(in srgb, var(--d-bg) 72%, transparent);
  --d-hero-clear: color-mix(in srgb, var(--d-bg) 0%, transparent);
  --d-chat-in: var(--d-surface-raised);
  --d-chat-out: color-mix(in srgb, var(--d-accent) 22%, var(--d-surface));
  --d-chat-wall: var(--d-bg);

  /* Type */
  --d-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --d-font-text: "Archivo", system-ui, sans-serif;
  --d-text-h1: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);
  --d-text-h1-page: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  --d-text-h2: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --d-text-h3: 1.5rem;
  --d-text-body: 1rem;
  --d-text-lead: 1.125rem;
  --d-text-small: 0.875rem;
  --d-text-eyebrow: 0.75rem;
  --d-text-logo: 1.375rem;
  --d-text-logo-small: 0.7em;
  --d-text-price: 1.5rem;
  --d-text-price-lg: 1.75rem;
  --d-text-btn: 1.125rem;
  --d-text-tile: 2.75rem;
  --d-text-day: 1.75rem;
  --d-text-slot: 1.25rem;
  --d-leading-h1: 0.95;
  --d-leading-h2: 1;
  --d-leading-h3: 1.15;
  --d-leading-body: 1.65;
  --d-leading-tight: 1.2;
  --d-tracking-h1: 0.01em;
  --d-tracking-h3: 0.04em;
  --d-tracking-logo: 0.06em;
  --d-tracking-eyebrow: 0.2em;
  --d-tracking-btn: 0.08em;
  --d-weight-text: 400;
  --d-weight-label: 600;
  --d-weight-price: 700;
  --d-weight-display: 800;
  --d-measure: 62ch;
  --d-measure-heading: 14ch;
  --d-measure-lead: 50ch;
  --d-measure-footer: 32ch;
  --d-measure-hero-heading: 16ch;
  --d-hero-measure: 46rem;
  --d-logo-gap: 0.3em;

  /* Shape, depth, rhythm, motion */
  --d-radius-sm: 0;
  --d-radius-lg: 0;
  --d-shadow: none;
  --d-section-y: clamp(3rem, 1.5rem + 5vw, 7rem);
  --d-ease: cubic-bezier(0.7, 0, 0.3, 1);
  --d-duration: 150ms;
  --d-border-width: 1px;
  --d-focus-width: 2px;
  --d-focus-offset: 3px;
  --d-field-focus-width: 2px;
  --d-rule: var(--d-border-width) solid var(--d-line);
  --d-hairline: var(--d-border-width) solid var(--d-accent);
  --d-control-border: var(--d-border-width) solid var(--d-muted);
  --d-frame-inset: 8px;
  --d-leader: 2px dotted var(--d-accent);
  --d-mosaic-gap: 4px;
  --d-round: 50%;

  /* Sizes */
  --d-target: 48px;
  --d-target-min: 44px;
  --d-logo-mark: 40px;
  --d-avatar: 64px;
  --d-avatar-sm: 44px;
  --d-avatar-xs: 28px;
  --d-avatar-text: 1.5rem;
  --d-icon-box: 3rem;
  --d-switch-w: 2.75rem;
  --d-switch-h: 1.5rem;
  --d-switch-knob: 1rem;
  --d-sidebar-w: 15rem;
  --d-sticky-bar-h: 4.75rem;
  --d-menu-panel-w: 16rem;
  --d-underline-offset: 0.2em;
  --d-check-size: 1.25rem;
  --d-day-min: 4.5rem;
  --d-slot-min: 5.25rem;
  --d-agenda-col: 11rem;
  --d-phone-w: 24rem;
  --d-bubble-max: 85%;
  --d-hero-min: clamp(36rem, 82vh, 46rem);
  --d-hero-photo-h: 15rem;
  --d-hero-photo-box: 26rem;
  --d-success-mark: 3.5rem;
  --d-setting-text-min: 12rem;
  --d-select-min: 11rem;
  --d-square-max: 26rem;
  --d-queue-item-min: 15rem;
  --d-queue-photo-w: 10rem;

  --vt-focus-color: var(--d-accent);
  --vt-focus-width: var(--d-focus-width);
  --vt-focus-offset: var(--d-focus-offset);
  --bs-body-bg: var(--d-bg);
  --bs-body-color: var(--d-ink);
  --bs-body-font-family: var(--d-font-text);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--d-font-text);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-text);
  line-height: var(--d-leading-body);
}

/* ---------- Base ---------- */

/* Base element rules: one class of specificity (beats site.css element rules); component classes below win by order. */
.d-barber-shop :where(h1, h2, h3) {
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-display);
  letter-spacing: var(--d-tracking-h1);
  text-transform: uppercase;
  text-wrap: balance;
  color: inherit;
}

.d-barber-shop :where(main h1) {
  max-width: var(--d-measure-heading);
  margin-bottom: var(--vt-space-4);
  font-size: var(--d-text-h1-page);
  line-height: var(--d-leading-h1);
}

.d-barber-shop :where(main h2) {
  margin-bottom: var(--vt-space-4);
  font-size: var(--d-text-h2);
  line-height: var(--d-leading-h2);
}

.d-barber-shop :where(main h3) {
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

:where(.d-barber-shop) a {
  color: var(--d-accent);
  text-underline-offset: var(--d-underline-offset);
  transition: color var(--d-duration) var(--d-ease), background-color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease);
}

:where(.d-barber-shop) a:hover {
  color: var(--d-ink);
}

.d-barber-shop .vt-icon {
  flex-shrink: 0;
}

.d-barber-shop ::selection {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-eyebrow {
  margin-bottom: var(--vt-space-3);
  color: var(--d-accent);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-eyebrow-icon {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-lead {
  max-width: var(--d-measure-lead);
  color: var(--d-muted);
  font-size: var(--d-text-lead);
}

.d-prose {
  max-width: var(--d-measure);
}

.d-small {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-label-heading,
.d-barber-shop .d-label-heading {
  margin-block: var(--vt-space-5) var(--vt-space-3);
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-eyebrow);
}

.d-link {
  font-weight: var(--d-weight-label);
}

.d-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
}

.d-link-arrow .vt-icon:last-child {
  transition: transform var(--d-duration) var(--d-ease);
}

.d-link-arrow:hover .vt-icon:last-child {
  transform: translateX(var(--vt-space-1));
}

.d-num,
.d-price {
  font-family: var(--d-font-display);
  font-weight: var(--d-weight-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--d-tracking-h3);
}

.d-price {
  color: var(--d-accent);
}

.d-note,
.d-empty {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin: 0;
  color: var(--d-muted);
}

.d-note .vt-icon,
.d-empty .vt-icon {
  color: var(--d-accent);
}

.d-empty {
  margin-top: var(--vt-space-4);
  padding: var(--vt-space-4);
  border: var(--d-rule);
}

.d-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vt-space-6);
  padding-inline: var(--vt-space-2);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
  font-family: var(--d-font-display);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-body);
}

/* ---------- Buttons: square, condensed, uppercase ---------- */

.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target);
  padding: var(--vt-space-2) var(--vt-space-5);
  border: var(--d-hairline);
  border-radius: var(--d-radius-sm);
  font-family: var(--d-font-display);
  font-size: var(--d-text-btn);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-btn);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d-duration) var(--d-ease), color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease);
}

.d-btn-primary {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-barber-shop .d-btn-primary:hover,
.d-btn-primary[aria-current="page"] {
  border-color: var(--d-ink);
  background-color: var(--d-ink);
  color: var(--d-accent-ink);
}

.d-btn-secondary {
  background-color: transparent;
  color: var(--d-accent);
}

.d-barber-shop .d-btn-secondary:hover {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

/* On the cream band: black fill, cream label. */
.d-btn-inverse {
  border-color: var(--d-bg);
  background-color: var(--d-bg);
  color: var(--d-ink);
}

.d-barber-shop .d-btn-inverse:hover {
  border-color: var(--d-surface);
  background-color: var(--d-surface);
  color: var(--d-accent);
}

.d-btn-sm {
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-4);
  font-size: var(--d-text-body);
}

.d-btn-block {
  width: 100%;
}

.d-btn[hidden] {
  display: none;
}

.d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-3);
  margin-top: var(--vt-space-5);
}

/* ---------- Tags and statuses ---------- */

.d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: 0 0 var(--vt-space-4);
  padding: 0;
  list-style: none;
}

.d-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--vt-space-1) var(--vt-space-3);
  border: var(--d-rule);
  color: var(--d-ink);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-status {
  display: inline-flex;
  align-items: center;
  padding: var(--vt-space-1) var(--vt-space-2);
  border: var(--d-border-width) solid transparent;
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
  white-space: nowrap;
}

.d-status-booked {
  border-color: var(--d-muted);
  color: var(--d-ink);
}

.d-status-chair {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-status-noshow {
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
}

.d-status-done {
  color: var(--d-muted);
}

/* ---------- Header ---------- */

.d-header {
  position: relative;
  z-index: calc(var(--vt-z-header) - 1);
  border-bottom: var(--d-rule);
  background-color: var(--d-bg);
}

.d-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-4);
  min-height: calc(var(--vt-space-8) + var(--vt-space-3));
}

.d-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin: 0;
  color: var(--d-ink);
  text-decoration: none;
}

.d-barber-shop .d-logo:hover {
  color: var(--d-ink);
}

.d-logo-mark {
  width: var(--d-logo-mark);
  height: var(--d-logo-mark);
}

.d-logo-text {
  display: flex;
  flex-direction: column;
  font-family: var(--d-font-display);
  font-size: var(--d-text-logo);
  font-weight: var(--d-weight-display);
  line-height: var(--d-leading-h1);
  letter-spacing: var(--d-tracking-logo);
  text-transform: uppercase;
  white-space: nowrap;
}

.d-logo-small {
  color: var(--d-accent);
  font-size: var(--d-text-logo-small);
}

@media (min-width: 768px) {
  .d-logo-text {
    flex-direction: row;
    gap: var(--d-logo-gap);
  }
}

.d-nav-list {
  display: flex;
  align-items: center;
  gap: var(--vt-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-3);
  border-bottom: var(--d-focus-width) solid transparent;
  color: var(--d-ink);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-decoration: none;
  text-transform: uppercase;
}

.d-barber-shop .d-nav-link:hover {
  color: var(--d-accent);
}

.d-barber-shop .d-nav-link[aria-current="page"] {
  border-bottom-color: var(--d-accent);
  color: var(--d-accent);
}

.d-nav-admin {
  color: var(--d-muted);
}

.d-header-actions {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-menu {
  position: relative;
}

.d-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--d-target);
  height: var(--d-target);
  border: var(--d-control-border);
  color: var(--d-ink);
  list-style: none;
  cursor: pointer;
}

.d-menu-toggle::-webkit-details-marker {
  display: none;
}

.d-menu[open] .d-menu-toggle {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--vt-space-2));
  z-index: var(--vt-z-header);
  min-width: var(--d-menu-panel-w);
  padding: var(--vt-space-2);
  border: var(--d-hairline);
  background-color: var(--d-surface);
}

.d-menu-panel .d-nav-list {
  flex-direction: column;
  align-items: stretch;
}

.d-menu-panel .d-nav-link {
  width: 100%;
  min-height: var(--d-target);
  border-bottom: 0;
  border-inline-start: var(--d-focus-width) solid transparent;
}

.d-barber-shop .d-menu-panel .d-nav-link[aria-current="page"] {
  border-inline-start-color: var(--d-accent);
}

/* ---------- Sections ---------- */

.d-section {
  padding-block: var(--d-section-y);
}

.d-section-surface {
  background-color: var(--d-surface);
}

.d-section-tight {
  padding-block: var(--vt-space-6);
}

.d-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vt-space-4);
  margin-bottom: var(--vt-space-6);
}

.d-section-head .d-prose {
  margin-bottom: 0;
}

.d-page-head {
  padding-block: var(--vt-space-7);
  border-bottom: var(--d-rule);
}

.d-page-head-compact {
  padding-bottom: var(--vt-space-5);
  border-bottom: 0;
}

.d-page-head .d-lead {
  margin-bottom: 0;
}

.d-card {
  padding: var(--vt-space-5);
  border: var(--d-rule);
  background-color: var(--d-bg);
}

.d-section-surface .d-card {
  background-color: var(--d-bg);
}

/* ---------- Photos: sharp corners, a brass hairline inset 8px ---------- */

.d-figure {
  position: relative;
  margin: 0;
}

.d-photo,
.d-photo img {
  display: block;
  width: 100%;
}

.d-photo img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--d-radius-lg);
  background-color: var(--d-surface);
}

.d-framed img {
  outline: var(--d-hairline);
  outline-offset: calc(var(--d-frame-inset) * -1);
}

.d-photo-tall img {
  aspect-ratio: 4 / 5;
}

.d-figure-square {
  max-width: var(--d-square-max);
  margin-inline: auto;
}

.d-figure-square .d-photo img {
  aspect-ratio: 1;
}

.d-caption {
  margin-top: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

/* ---------- Home: hero ---------- */

.d-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--d-hero-min);
  overflow: hidden;
  border-bottom: var(--d-hairline);
  isolation: isolate;
}

/* Phones: the photo fills the top of the hero and fades into the black under the headline; from lg it is full-bleed. */
.d-hero-photo {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  height: var(--d-hero-photo-box);
}

.d-hero-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 72% 60%;
}

.d-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--d-bg) 52%, var(--d-hero-veil) 66%, var(--d-hero-clear) 82%);
}

.d-hero-inner {
  padding-top: var(--d-hero-photo-h);
  padding-bottom: var(--vt-space-7);
}

.d-hero-content {
  max-width: var(--d-hero-measure);
}

.d-barber-shop .d-hero h1 {
  max-width: var(--d-measure-hero-heading);
  font-size: var(--d-text-h1);
}

.d-hero .d-lead {
  color: var(--d-ink);
}

.d-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2) var(--vt-space-4);
  margin: var(--vt-space-5) 0 0;
  padding: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
  list-style: none;
}

.d-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
}

.d-hero-points li::before {
  content: "";
  width: var(--vt-space-2);
  height: var(--vt-space-2);
  background-color: var(--d-accent);
  transform: rotate(45deg);
}

@media (min-width: 992px) {
  .d-hero {
    align-items: center;
  }

  .d-hero-photo {
    inset: 0;
    height: auto;
  }

  .d-hero::after {
    background: linear-gradient(to right, var(--d-bg) 22%, var(--d-hero-veil) 48%, var(--d-hero-clear) 78%);
  }

  .d-hero-inner {
    padding-block: var(--vt-space-9);
  }
}

/* ---------- Home: price card, pair of photos, crew, mosaic, points, visit, band ---------- */

.d-price-card {
  margin-top: var(--vt-space-5);
  outline: var(--d-hairline);
  outline-offset: calc(var(--d-frame-inset) * -1);
  padding: var(--vt-space-6) var(--vt-space-5) var(--vt-space-4);
}

.d-price-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-price-row + .d-price-row {
  margin-top: var(--vt-space-4);
  padding-top: var(--vt-space-4);
  border-top: var(--d-rule);
}

.d-price-line {
  display: flex;
  align-items: baseline;
  gap: var(--vt-space-3);
}

.d-price-name,
.d-barber-shop .d-price-name {
  margin: 0;
  color: var(--d-ink);
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
  text-decoration: none;
  text-transform: uppercase;
}

a.d-price-name:hover {
  color: var(--d-accent);
}

.d-price-leader {
  flex: 1 1 auto;
  min-width: var(--vt-space-5);
  border-bottom: var(--d-leader);
  transform: translateY(calc(var(--vt-space-1) * -1));
}

.d-price-line .d-price {
  font-size: var(--d-text-price);
  white-space: nowrap;
}

.d-price-meta {
  margin: var(--vt-space-1) 0 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-price-meta .d-num {
  color: var(--d-ink);
}

.d-price-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-3);
}

.d-price-list-lg .d-price-line .d-price {
  font-size: var(--d-text-price-lg);
}

.d-price-list-lg .d-price-row + .d-price-row {
  margin-top: var(--vt-space-5);
  padding-top: var(--vt-space-5);
}

.d-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--vt-space-4);
}

.d-pair-cut-back .d-photo img {
  aspect-ratio: 4 / 5;
}

.d-pair-razor-brush {
  margin-bottom: var(--vt-space-8);
}

.d-pair-razor-brush .d-photo img {
  aspect-ratio: 3 / 4;
}

.d-crew {
  display: grid;
  gap: var(--vt-space-3);
  margin: var(--vt-space-5) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .d-crew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.d-crew-item {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  padding: var(--vt-space-3);
  border: var(--d-rule);
}

.d-crew-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--d-leading-tight);
}

.d-crew-name {
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-crew-role {
  margin-top: var(--vt-space-1);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--d-avatar);
  height: var(--d-avatar);
  border: var(--d-hairline);
  background-color: var(--d-surface);
  color: var(--d-accent);
  font-family: var(--d-font-display);
  font-size: var(--d-avatar-text);
  font-weight: var(--d-weight-display);
  line-height: 1;
  letter-spacing: var(--d-tracking-h3);
}

.d-section-surface .d-avatar,
.d-card .d-avatar {
  background-color: var(--d-bg);
}

.d-avatar-sm {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-body);
}

.d-avatar-xs {
  width: var(--d-avatar-xs);
  height: var(--d-avatar-xs);
  font-size: var(--d-text-eyebrow);
}

.d-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: var(--vt-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.d-facts li {
  padding: var(--vt-space-2) var(--vt-space-3);
  border: var(--d-hairline);
  color: var(--d-accent);
  font-family: var(--d-font-display);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-price);
  letter-spacing: var(--d-tracking-btn);
  text-transform: uppercase;
}

.d-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--d-mosaic-gap);
  aspect-ratio: 6 / 5;
  padding: var(--d-mosaic-gap);
  background-color: var(--d-bg);
}

.d-mosaic-item,
.d-mosaic-item img {
  height: 100%;
}

.d-mosaic-item img {
  aspect-ratio: auto;
}

.d-mosaic-interior {
  grid-row: span 2;
}

.d-points {
  display: grid;
  gap: var(--vt-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.d-point {
  padding-top: var(--vt-space-4);
  border-top: var(--d-hairline);
}

.d-point p {
  margin: 0;
  color: var(--d-muted);
}

.d-point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d-icon-box);
  height: var(--d-icon-box);
  margin-bottom: var(--vt-space-3);
  border: var(--d-hairline);
  color: var(--d-accent);
}

.d-points-stack {
  grid-template-columns: none;
  margin-top: var(--vt-space-6);
}

.d-points-stack .d-point {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
}

.d-points-stack .d-point-icon {
  margin-bottom: 0;
}

.d-barber-shop .d-point-title {
  margin-bottom: var(--vt-space-1);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-hours {
  margin: 0;
}

.d-hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-4);
  padding-block: var(--vt-space-2);
  border-bottom: var(--d-rule);
}

.d-hours dt {
  font-weight: var(--d-weight-label);
}

.d-hours dd {
  margin: 0;
  color: var(--d-muted);
  font-variant-numeric: tabular-nums;
}

.d-icon-list,
.d-check-list,
.d-policy {
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.d-icon-list li,
.d-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
  margin-bottom: var(--vt-space-3);
}

.d-icon-list .vt-icon,
.d-check-list .vt-icon {
  margin-top: var(--vt-space-1);
  color: var(--d-accent);
}

.d-band {
  --vt-focus-color: var(--d-bg);
  padding-block: var(--vt-space-8);
  background-color: var(--d-ink);
  color: var(--d-bg);
}

.d-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-5);
}

.d-barber-shop .d-band h2 {
  margin-bottom: var(--vt-space-2);
}

.d-band .d-prose {
  margin: 0;
  color: var(--d-surface);
}

/* ---------- Sticky booking bar (phones) ---------- */

.d-sticky-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--vt-z-fab);
  padding: var(--vt-space-3) var(--vt-gutter);
  border-top: var(--d-hairline);
  background-color: var(--d-bg);
}

.d-sticky-bar[hidden] {
  display: none;
}

.d-sticky-bar .d-btn {
  width: 100%;
}

@media (max-width: 991.98px) {
  body.d-barber-shop:has(.d-sticky-bar:not([hidden])) {
    padding-bottom: var(--d-sticky-bar-h);
  }

  :root:has(.d-sticky-bar:not([hidden])) {
    scroll-padding-bottom: calc(var(--d-sticky-bar-h) + var(--vt-space-4));
  }
}

/* ---------- Chips (jump links, filters) ---------- */

.d-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-jump {
  margin-top: var(--vt-space-5);
}

.d-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  padding: var(--vt-space-1) var(--vt-space-4);
  border: var(--d-control-border);
  color: var(--d-ink);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-chip .vt-icon {
  color: var(--d-accent);
}

.d-barber-shop .d-chip:hover {
  border-color: var(--d-accent);
  color: var(--d-accent);
}

.d-barber-shop .d-chip[aria-current="true"] {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-chip[aria-current="true"] .vt-icon {
  color: var(--d-accent-ink);
}

.d-chip-person {
  padding-inline-start: var(--vt-space-2);
}

.d-chip[aria-current="true"] .d-avatar {
  border-color: var(--d-accent-ink);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

/* ---------- Services ---------- */

.d-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d-icon-box);
  height: var(--d-icon-box);
  margin-bottom: var(--vt-space-4);
  border: var(--d-hairline);
  color: var(--d-accent);
}

.d-group-photo {
  margin-top: var(--vt-space-5);
}

.d-group-photo .d-photo img {
  aspect-ratio: 4 / 3;
}

/* ---------- Barbers ---------- */

.d-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-2) var(--vt-space-4);
  margin-top: var(--vt-space-5);
  padding: var(--vt-space-3) var(--vt-space-4);
  border: var(--d-hairline);
}

.d-chosen-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-2) var(--vt-space-3);
  margin: 0;
  font-weight: var(--d-weight-label);
}

.d-chosen-service .vt-icon {
  color: var(--d-accent);
}

.d-chosen-meta {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-barber-grid {
  display: grid;
  gap: var(--vt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-barber-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Four barbers plus this card: it closes the grid instead of leaving an empty cell. */
  .d-barber-any {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) {
  .d-barber-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.d-barber-card {
  display: flex;
  flex-direction: column;
  transition: border-color var(--d-duration) var(--d-ease);
}

.d-barber-card:hover {
  border-color: var(--d-accent);
}

.d-barber-card > .d-btn,
.d-barber-card > .d-unavailable {
  margin-top: auto;
}

.d-barber-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-4);
  margin-bottom: var(--vt-space-4);
}

.d-barber-head h3 {
  margin: 0;
}

.d-barber-role {
  margin: 0;
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-facts-list {
  margin: 0 0 var(--vt-space-5);
}

.d-facts-list div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vt-space-1) var(--vt-space-3);
  padding-block: var(--vt-space-2);
  border-top: var(--d-rule);
  font-size: var(--d-text-small);
}

.d-facts-list dt {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  color: var(--d-muted);
  font-weight: var(--d-weight-label);
}

.d-facts-list dt .vt-icon {
  color: var(--d-accent);
}

.d-facts-list dd {
  margin: 0;
  font-weight: var(--d-weight-label);
}

.d-barber-card.is-unavailable {
  border-style: dashed;
}

.d-barber-card.is-unavailable:hover {
  border-color: var(--d-line);
}

.d-barber-card.is-unavailable .d-avatar {
  border-color: var(--d-muted);
  color: var(--d-muted);
}

.d-unavailable {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target);
  margin: 0;
  color: var(--d-accent-2);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-barber-any {
  border: var(--d-hairline);
  background-color: var(--d-accent-tint);
}

.d-section-surface .d-barber-any {
  background-color: var(--d-accent-tint);
}

/* ---------- Slots: barber chips, day strip, time grid ---------- */

.d-slots {
  padding-bottom: var(--d-section-y);
}

/* The day strip scrolls inside its column on phones instead of widening the page. */
.d-slots .row > *,
.d-filter {
  min-width: 0;
}

.d-filter + .d-filter {
  margin-top: var(--vt-space-5);
}

.d-filter-label {
  margin-bottom: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

/* Positioned, so the visually hidden dates inside it are clipped by its scroll box instead of widening the page. */
.d-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(var(--d-day-min), 1fr));
  gap: var(--vt-space-2);
  margin: 0;
  padding: 0 0 var(--vt-space-2);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
}

.d-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-1);
  height: 100%;
  padding: var(--vt-space-2) var(--vt-space-1);
  border: var(--d-control-border);
  background-color: var(--d-surface);
  color: var(--d-ink);
  line-height: var(--d-leading-tight);
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}

.d-day-name {
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-day-num {
  font-family: var(--d-font-display);
  font-size: var(--d-text-day);
  font-weight: var(--d-weight-display);
}

.d-day-status {
  color: var(--d-accent);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  white-space: nowrap;
}

.d-day.is-full .d-day-status {
  color: var(--d-muted);
}

.d-day.is-full .d-day-num {
  color: var(--d-muted);
}

.d-barber-shop .d-day:hover {
  border-color: var(--d-accent);
  color: var(--d-ink);
}

.d-barber-shop .d-day[aria-current="true"] {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-day[aria-current="true"] .d-day-name,
.d-day[aria-current="true"] .d-day-status,
.d-day[aria-current="true"] .d-day-num {
  color: var(--d-accent-ink);
}

.d-times {
  margin-top: var(--vt-space-6);
  padding-top: var(--vt-space-5);
  border-top: var(--d-hairline);
}

.d-barber-shop .d-times-title {
  margin-bottom: 0;
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--d-slot-min), 1fr));
  gap: var(--vt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--d-target);
  border: var(--d-control-border);
  background-color: var(--d-surface);
  color: var(--d-ink);
  font-family: var(--d-font-display);
  font-size: var(--d-text-slot);
  font-weight: var(--d-weight-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--d-tracking-h3);
  text-decoration: none;
}

.d-barber-shop a.d-slot:hover {
  border-color: var(--d-accent);
  color: var(--d-accent);
}

.d-barber-shop .d-slot.is-selected {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-slot.is-booked {
  border-color: var(--d-line);
  background-color: var(--d-bg);
  color: var(--d-muted);
  cursor: not-allowed;
}

.d-slot.is-booked s {
  text-decoration-thickness: var(--d-border-width);
}

/* ---------- Summary cards (Slots, Book) ---------- */

.d-summary {
  padding: 0;
}

.d-summary-photo img {
  aspect-ratio: 16 / 9;
}

.d-summary-body {
  padding: var(--vt-space-5);
}

.d-barber-shop .d-summary-title {
  margin-bottom: var(--vt-space-3);
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-eyebrow);
}

.d-summary-service {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-3);
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-summary-service .vt-icon {
  color: var(--d-accent);
}

.d-summary-list {
  margin: 0 0 var(--vt-space-4);
}

.d-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-4);
  padding-block: var(--vt-space-2);
  border-bottom: var(--d-rule);
}

.d-summary-list dt {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-summary-list dd {
  margin: 0;
  font-weight: var(--d-weight-label);
  text-align: end;
}

.d-choice-slot {
  margin-bottom: var(--vt-space-4);
}

.d-choice-when,
.d-choice-who {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin-bottom: var(--vt-space-2);
  font-weight: var(--d-weight-label);
}

.d-choice-when .vt-icon {
  color: var(--d-accent);
}

.d-choice-who > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: var(--d-leading-tight);
}

.d-choice-role {
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-text);
}

.d-choice-empty {
  margin: 0;
  padding: var(--vt-space-3);
  border: var(--d-border-width) dashed var(--d-muted);
  color: var(--d-muted);
  text-align: center;
}

.d-choice:focus {
  outline: none;
}

.d-summary .d-btn + .d-link {
  margin-top: var(--vt-space-2);
}

@media (min-width: 992px) {
  .d-summary-sticky,
  .d-choice {
    position: sticky;
    top: calc(var(--vt-demo-ribbon-h) + var(--vt-space-4));
  }
}

.d-policy {
  margin-top: var(--vt-space-4);
  padding-top: var(--vt-space-4);
  border-top: var(--d-rule);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-policy li + li {
  margin-top: var(--vt-space-2);
}

/* ---------- Forms (booking) ---------- */

.d-book {
  padding-bottom: var(--d-section-y);
}

.d-form {
  display: grid;
  gap: var(--vt-space-5);
}

.d-form > .d-small {
  margin: 0;
}

.d-field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.d-fieldset {
  display: flow-root;
  margin: 0;
  padding: var(--vt-space-5);
  border: var(--d-rule);
  background-color: var(--d-surface);
  min-width: 0;
}

/* A floated legend sits inside the fieldset's card instead of on its edge. */
.d-fieldset > .d-legend {
  float: left;
  width: 100%;
  margin-bottom: var(--vt-space-4);
}

.d-fieldset > .d-legend + * {
  clear: both;
}

.d-fieldset > * + .d-field {
  margin-top: var(--vt-space-5);
}

.d-legend {
  padding: 0;
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-label {
  display: block;
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
}

.d-optional {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
  letter-spacing: normal;
  text-transform: none;
}

/* Kit: walnut fill, a smoke bottom border only (2px brass on focus), cream text. */
.d-input {
  display: block;
  width: 100%;
  min-height: var(--d-target);
  padding: var(--vt-space-2) var(--vt-space-3);
  border: 0;
  border-bottom: var(--d-control-border);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font: inherit;
  transition: border-color var(--d-duration) var(--d-ease), box-shadow var(--d-duration) var(--d-ease);
}

.d-input:hover {
  border-bottom-color: var(--d-ink);
}

.d-input:focus-visible {
  border-bottom-color: var(--d-accent);
  outline: none;
  box-shadow: inset 0 calc(var(--d-field-focus-width) * -1) 0 var(--d-accent);
}

.d-select {
  appearance: auto;
}

.d-hint {
  display: block;
  margin: var(--vt-space-2) 0 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-error {
  margin: var(--vt-space-2) 0 0;
  color: var(--d-accent-2);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-error[hidden] {
  display: none;
}

.d-field.is-invalid .d-input {
  border-bottom-color: var(--d-accent-2);
  box-shadow: inset 0 calc(var(--d-field-focus-width) * -1) 0 var(--d-accent-2);
}

.d-field.is-invalid .d-label {
  color: var(--d-accent-2);
}

.d-error-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
  padding: var(--vt-space-4);
  border: var(--d-border-width) solid var(--d-accent-2);
  background-color: var(--d-pole-tint);
  color: var(--d-ink);
  font-weight: var(--d-weight-label);
}

.d-error-summary .vt-icon {
  color: var(--d-accent-2);
}

.d-error-summary[hidden] {
  display: none;
}

.d-error-summary p {
  margin: 0;
}

.d-error-summary:focus {
  outline: var(--d-focus-width) solid var(--d-accent-2);
  outline-offset: var(--d-focus-offset);
}

.d-optin {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-3);
  padding: var(--vt-space-4);
  border: var(--d-hairline);
}

.d-check-input {
  flex-shrink: 0;
  width: var(--d-check-size);
  height: var(--d-check-size);
  margin-top: var(--vt-space-1);
  accent-color: var(--d-accent);
  cursor: pointer;
}

.d-check-label {
  cursor: pointer;
}

.d-optin-title {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  font-weight: var(--d-weight-label);
}

.d-optin-title .vt-icon {
  color: var(--d-accent);
}

/* ---------- Confirmation ---------- */

.d-confirm {
  padding-bottom: var(--d-section-y);
}

.d-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--d-success-mark);
  height: var(--d-success-mark);
  margin-bottom: var(--vt-space-4);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-5);
  padding: var(--vt-space-5);
  border: var(--d-hairline);
  background-color: var(--d-accent-tint);
}

.d-notice > .vt-icon {
  color: var(--d-accent);
}

.d-notice p {
  margin-bottom: var(--vt-space-2);
}

.d-notice p:last-child {
  margin-bottom: 0;
}

.d-notice-title {
  font-weight: var(--d-weight-label);
}

.d-notice-quiet {
  border-color: var(--d-line);
  background-color: var(--d-surface);
}

.d-ticket {
  padding: var(--vt-space-6);
  border: var(--d-hairline);
  outline: var(--d-hairline);
  outline-offset: calc(var(--d-frame-inset) * -1);
  background-color: var(--d-surface);
}

.d-ticket-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin-bottom: var(--vt-space-4);
  padding-bottom: var(--vt-space-4);
  border-bottom: var(--d-leader);
}

.d-ticket-mark {
  width: var(--d-logo-mark);
  height: var(--d-logo-mark);
}

.d-barber-shop .d-ticket-title {
  margin: 0;
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-ticket-place,
.d-address {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-ticket-place .vt-icon,
.d-address .vt-icon {
  color: var(--d-accent);
}

.d-address {
  margin-bottom: var(--vt-space-3);
  color: var(--d-ink);
  font-size: var(--d-text-body);
  font-weight: var(--d-weight-label);
}

/* ---------- WhatsApp: phone mock in the brand palette ---------- */

.d-whatsapp-photo {
  margin-top: var(--vt-space-6);
}

.d-whatsapp-photo .d-photo img {
  aspect-ratio: 16 / 9;
}

.d-phone {
  max-width: var(--d-phone-w);
  margin-inline: auto;
  border: var(--d-hairline);
  outline: var(--d-rule);
  outline-offset: var(--d-frame-inset);
  background-color: var(--d-chat-wall);
}

.d-phone-bar {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  padding: var(--vt-space-3) var(--vt-space-4);
  border-bottom: var(--d-hairline);
  background-color: var(--d-surface);
}

.d-phone-avatar {
  width: var(--d-logo-mark);
  height: var(--d-logo-mark);
}

.d-phone-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
}

.d-phone-status {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-1);
  margin-top: var(--vt-space-1);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-text);
}

.d-phone-status .vt-icon {
  color: var(--d-accent);
}

.d-chat {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-2);
  margin: 0;
  padding: var(--vt-space-4);
  list-style: none;
}

.d-chat-day {
  align-self: center;
  margin-block: var(--vt-space-2);
  padding: var(--vt-space-1) var(--vt-space-3);
  border: var(--d-rule);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-msg {
  max-width: var(--d-bubble-max);
  padding: var(--vt-space-2) var(--vt-space-3);
  font-size: var(--d-text-small);
  line-height: var(--d-leading-body);
}

.d-msg[hidden] {
  display: none;
}

.d-msg p {
  margin: 0;
}

.d-msg-in {
  align-self: flex-start;
  border-inline-start: var(--d-focus-width) solid var(--d-accent);
  background-color: var(--d-chat-in);
}

.d-msg-out {
  align-self: flex-end;
  background-color: var(--d-chat-out);
}

.d-msg-from {
  display: flex;
  align-items: center;
  gap: var(--vt-space-1);
  margin-bottom: var(--vt-space-1);
  color: var(--d-accent);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-msg-strong,
.d-msg .d-msg-strong {
  margin-bottom: var(--vt-space-1);
  font-weight: var(--d-weight-label);
}

.d-msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vt-space-1);
  margin-top: var(--vt-space-1);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  font-variant-numeric: tabular-nums;
}

.d-msg-out .d-msg-meta .vt-icon {
  color: var(--d-accent);
}

.d-msg-actions,
.d-msg-replies {
  display: grid;
  gap: var(--vt-space-1);
  margin: var(--vt-space-3) 0 var(--vt-space-1);
  padding: 0;
  list-style: none;
}

.d-msg-replies {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.d-msg-action,
.d-msg-reply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  padding: var(--vt-space-1) var(--vt-space-3);
  border: var(--d-hairline);
  color: var(--d-accent);
  font-weight: var(--d-weight-label);
  text-decoration: none;
}

.d-barber-shop .d-msg-action:hover,
.d-barber-shop .d-msg-reply:hover {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

/* The chosen reply turns brass at once: a fade would pass through low-contrast mixes. */
.d-barber-shop .d-msg-reply[aria-current="true"] {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
  transition: none;
}

.d-phone-foot {
  margin: 0;
  padding: var(--vt-space-3) var(--vt-space-4);
  border-top: var(--d-rule);
  background-color: var(--d-surface);
  color: var(--d-muted);
  font-size: var(--d-text-eyebrow);
  text-align: center;
}

.d-phone-foot:focus {
  outline: none;
}

/* ---------- Owner view (Admin) ---------- */

.d-admin {
  padding-block: var(--vt-space-6) var(--d-section-y);
  background-color: var(--d-surface);
}

.d-admin-shell {
  display: grid;
  gap: var(--vt-space-5);
}

.d-admin-side {
  min-width: 0;
}

.d-admin-brand {
  display: none;
  align-items: center;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-5);
  font-family: var(--d-font-display);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-display);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-logo);
  text-transform: uppercase;
}

.d-admin-nav {
  display: flex;
  gap: var(--vt-space-1);
  margin: 0;
  padding: var(--vt-space-1);
  overflow-x: auto;
  border: var(--d-rule);
  background-color: var(--d-bg);
  list-style: none;
}

.d-admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  padding-inline: var(--vt-space-4);
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .d-admin-nav-item .vt-icon {
    display: none;
  }

  .d-admin-nav {
    flex-wrap: wrap;
  }

  .d-admin-nav li {
    flex: 1 1 auto;
  }

  .d-admin-nav-item {
    justify-content: center;
    width: 100%;
  }
}

.d-barber-shop .d-admin-nav-item:hover {
  background-color: var(--d-surface);
  color: var(--d-ink);
}

.d-barber-shop .d-admin-nav-item[aria-current] {
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

@media (min-width: 992px) {
  .d-admin-shell {
    grid-template-columns: var(--d-sidebar-w) minmax(0, 1fr);
    gap: var(--vt-space-6);
  }

  .d-admin-side {
    align-self: start;
    position: sticky;
    top: calc(var(--vt-demo-ribbon-h) + var(--vt-space-4));
    padding: var(--vt-space-4);
    border: var(--d-rule);
    background-color: var(--d-bg);
  }

  .d-admin-brand {
    display: flex;
  }

  .d-admin-nav {
    flex-direction: column;
    padding: 0;
    border: 0;
  }

  .d-admin-nav-item {
    width: 100%;
  }
}

.d-admin-main {
  min-width: 0;
}

.d-barber-shop .d-admin-head h1 {
  max-width: none;
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h2);
}

.d-admin-date {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: 0;
  color: var(--d-muted);
}

.d-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vt-space-3);
  margin: var(--vt-space-5) 0 var(--vt-space-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .d-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.d-tile {
  display: flex;
  flex-direction: column;
  padding: var(--vt-space-4);
  border: var(--d-rule);
  background-color: var(--d-bg);
}

.d-tile-value {
  font-family: var(--d-font-display);
  font-size: var(--d-text-tile);
  font-weight: var(--d-weight-display);
  line-height: var(--d-leading-h1);
  font-variant-numeric: tabular-nums;
}

.d-tile-label {
  margin-top: var(--vt-space-2);
  color: var(--d-muted);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-h3);
}

.d-tile-note {
  margin-top: var(--vt-space-2);
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-tile-alert .d-tile-value {
  color: var(--d-accent-2);
}

.d-tile-accent {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-tile-accent .d-tile-label {
  color: var(--d-accent-ink);
}

.d-admin-view + .d-admin-view {
  margin-top: var(--vt-space-8);
}

.d-admin-view[hidden] {
  display: none;
}

.d-admin-view > h2:focus {
  outline: none;
}

.d-barber-shop .d-admin-h2 {
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-barber-shop .d-admin-h3 {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: var(--vt-space-5) 0 var(--vt-space-3);
  color: var(--d-accent);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  line-height: var(--d-leading-tight);
  letter-spacing: var(--d-tracking-eyebrow);
}

/* Diary: one column per barber, the walk-in queue beside it from xl */

.d-agenda-wrap {
  display: grid;
  gap: var(--vt-space-5);
  margin-top: var(--vt-space-4);
}

.d-agenda {
  display: grid;
  gap: var(--vt-space-3);
}

@media (min-width: 768px) {
  .d-agenda {
    grid-template-columns: repeat(auto-fit, minmax(var(--d-agenda-col), 1fr));
  }
}

.d-agenda-col {
  min-width: 0;
  border: var(--d-rule);
  background-color: var(--d-bg);
}

.d-barber-shop .d-agenda-head {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  margin: 0;
  padding: var(--vt-space-3);
  border-bottom: var(--d-hairline);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-agenda-head .d-avatar {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-body);
}

.d-agenda-head > span:last-child {
  display: flex;
  flex-direction: column;
}

.d-agenda-chair {
  color: var(--d-muted);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
}

.d-agenda-list {
  margin: 0;
  padding: var(--vt-space-2);
  list-style: none;
}

.d-appt {
  padding: var(--vt-space-3);
  border-inline-start: var(--d-focus-width) solid var(--d-muted);
  background-color: var(--d-surface);
}

.d-appt + .d-appt {
  margin-top: var(--vt-space-2);
}

.d-appt.is-free {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  border: var(--d-border-width) dashed var(--d-line);
  background-color: transparent;
}

.d-appt.is-chair {
  border-inline-start-color: var(--d-accent);
  background-color: var(--d-accent-tint);
}

.d-appt.is-noshow {
  border-inline-start-color: var(--d-accent-2);
}

.d-appt.is-noshow .d-appt-client {
  text-decoration: line-through;
}

.d-appt.is-done {
  border-inline-start-color: var(--d-line);
}

.d-appt.is-done .d-appt-client,
.d-appt.is-done .d-appt-time {
  color: var(--d-muted);
}

.d-appt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
}

.d-appt-time {
  font-family: var(--d-font-display);
  font-size: var(--d-text-slot);
  font-weight: var(--d-weight-price);
  font-variant-numeric: tabular-nums;
}

.d-appt-free {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-appt-client {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin: var(--vt-space-1) 0 0;
  font-weight: var(--d-weight-label);
}

.d-appt-wa {
  display: inline-flex;
  color: var(--d-accent);
}

.d-appt-meta {
  margin: 0;
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--d-target-min);
  margin-top: var(--vt-space-2);
  padding-inline: var(--vt-space-3);
  border: var(--d-control-border);
  background-color: transparent;
  color: var(--d-ink);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
  cursor: pointer;
  transition: background-color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease), color var(--d-duration) var(--d-ease);
}

.d-toggle[hidden] {
  display: none;
}

.d-toggle:hover {
  border-color: var(--d-accent-2);
  color: var(--d-accent-2);
}

/* Pressed turns pole red at once: a fade would pass through low-contrast mixes. */
.d-toggle[aria-pressed="true"] {
  border-color: var(--d-accent-2);
  background-color: var(--d-accent-2);
  color: var(--d-accent-ink);
  transition: none;
}

.d-queue {
  padding: var(--vt-space-4);
  border: var(--d-hairline);
  background-color: var(--d-bg);
}

.d-barber-shop .d-queue-title {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  margin-bottom: var(--vt-space-2);
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-queue-title .vt-icon {
  color: var(--d-accent);
}

.d-queue-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--d-queue-item-min), 1fr));
  gap: 0 var(--vt-space-5);
  margin: var(--vt-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.d-queue-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
  padding-block: var(--vt-space-3);
  border-top: var(--d-rule);
}

.d-queue-text {
  display: flex;
  flex-direction: column;
  line-height: var(--d-leading-tight);
}

.d-queue-name {
  font-weight: var(--d-weight-label);
}

.d-queue-meta {
  margin-top: var(--vt-space-1);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-queue-empty[hidden] {
  display: none;
}

.d-queue-empty {
  display: grid;
  grid-template-columns: minmax(0, var(--d-queue-photo-w)) minmax(0, 1fr);
  align-items: center;
  gap: var(--vt-space-2) var(--vt-space-4);
  margin-top: var(--vt-space-3);
}

.d-queue-photo {
  grid-row: span 2;
}

.d-queue-empty-title {
  margin-bottom: var(--vt-space-1);
  font-weight: var(--d-weight-label);
}

/* Services switches, chairs, settings */

.d-switch-list,
.d-settings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-switch-row,
.d-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-3) var(--vt-space-4);
  padding: var(--vt-space-3) var(--vt-space-4);
  border: var(--d-rule);
  background-color: var(--d-bg);
}

.d-switch-row + .d-switch-row,
.d-setting + .d-setting {
  margin-top: var(--vt-space-2);
}

.d-switch-row-text,
.d-setting-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--d-setting-text-min);
  min-width: 0;
  line-height: var(--d-leading-h3);
}

.d-switch-row-name,
.d-setting-label {
  font-weight: var(--d-weight-label);
}

.d-switch-row-meta,
.d-setting-hint {
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-switch-state {
  color: var(--d-accent);
  font-size: var(--d-text-small);
  font-weight: var(--d-weight-label);
}

.d-switch-row.is-off .d-switch-state {
  color: var(--d-accent-2);
}

.d-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--d-target-min);
  cursor: pointer;
}

/* The real checkbox sits over the drawn track, so a click on the track toggles it. */
.d-switch input {
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: var(--d-switch-w);
  height: var(--d-switch-h);
  margin: 0;
  cursor: pointer;
}

.d-switch-track {
  position: relative;
  width: var(--d-switch-w);
  height: var(--d-switch-h);
  border: var(--d-control-border);
  background-color: var(--d-surface);
  transition: background-color var(--d-duration) var(--d-ease), border-color var(--d-duration) var(--d-ease);
}

.d-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc((var(--d-switch-h) - var(--d-switch-knob)) / 2 - var(--d-border-width));
  width: var(--d-switch-knob);
  height: var(--d-switch-knob);
  background-color: var(--d-muted);
  transform: translateY(-50%);
  transition: transform var(--d-duration) var(--d-ease), background-color var(--d-duration) var(--d-ease);
}

.d-switch input:checked + .d-switch-track {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
}

.d-switch input:checked + .d-switch-track::after {
  background-color: var(--d-accent-ink);
  transform: translate(calc(var(--d-switch-w) - var(--d-switch-h)), -50%);
}

.d-switch input:focus-visible + .d-switch-track {
  outline: var(--d-focus-width) solid var(--d-accent);
  outline-offset: var(--d-focus-offset);
}

.d-chairs {
  display: grid;
  gap: var(--vt-space-3);
  margin: var(--vt-space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .d-chairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.d-chair {
  padding: var(--vt-space-4);
  border: var(--d-rule);
  border-top: var(--d-focus-width) solid var(--d-muted);
  background-color: var(--d-bg);
}

.d-chair.is-busy {
  border-top-color: var(--d-accent);
}

.d-chair.is-free {
  border-top-color: var(--d-ink);
}

.d-chair.is-off {
  border-style: dashed;
  border-top-style: solid;
  border-top-color: var(--d-line);
}

.d-chair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
}

.d-barber-shop .d-chair-name {
  margin: 0;
  font-size: var(--d-text-h3);
  font-weight: var(--d-weight-price);
  line-height: var(--d-leading-h3);
  letter-spacing: var(--d-tracking-h3);
}

.d-chair-state {
  padding: var(--vt-space-1) var(--vt-space-2);
  border: var(--d-control-border);
  color: var(--d-ink);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-h3);
  text-transform: uppercase;
}

.d-chair.is-busy .d-chair-state {
  border-color: var(--d-accent);
  background-color: var(--d-accent);
  color: var(--d-accent-ink);
}

.d-chair.is-off .d-chair-state {
  color: var(--d-muted);
}

.d-chair-detail {
  margin: var(--vt-space-1) 0 var(--vt-space-3);
  color: var(--d-muted);
  font-size: var(--d-text-small);
}

.d-chair .d-avatar {
  width: var(--d-avatar-sm);
  height: var(--d-avatar-sm);
  font-size: var(--d-text-body);
}

.d-chair-off .d-avatar {
  border-color: var(--d-muted);
  color: var(--d-muted);
}

.d-chair-off {
  color: var(--d-muted);
}

.d-chair-list {
  margin: 0;
}

.d-chair-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-3);
  padding-block: var(--vt-space-2);
  border-top: var(--d-rule);
  font-size: var(--d-text-small);
}

.d-chair-list dt {
  color: var(--d-muted);
  font-weight: var(--d-weight-text);
}

.d-chair-list dd {
  margin: 0;
  font-weight: var(--d-weight-label);
  text-align: end;
}

.d-setting-select {
  width: auto;
  min-width: var(--d-select-min);
  border: var(--d-control-border);
}

.d-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-5);
}

.d-settings-saved {
  margin: 0;
}

.d-settings-saved span:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  color: var(--d-accent);
  font-weight: var(--d-weight-label);
}

/* ---------- Footer ---------- */

.d-footer {
  padding-block: var(--vt-space-8) var(--vt-space-5);
  border-top: var(--d-hairline);
  background-color: var(--d-bg);
  color: var(--d-ink);
  font-size: var(--d-text-small);
}

.d-footer-about {
  max-width: var(--d-measure-footer);
  margin-top: var(--vt-space-4);
  color: var(--d-muted);
  font-size: var(--d-text-body);
}

.d-footer-social {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  color: var(--d-muted);
}

.d-footer-social .vt-icon {
  color: var(--d-accent);
}

.d-barber-shop .d-footer-heading {
  margin-bottom: var(--vt-space-3);
  color: var(--d-accent);
  font-family: var(--d-font-text);
  font-size: var(--d-text-eyebrow);
  font-weight: var(--d-weight-label);
  letter-spacing: var(--d-tracking-eyebrow);
}

.d-footer p {
  color: var(--d-muted);
}

.d-footer .d-logo {
  color: var(--d-ink);
}

.d-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-barber-shop .d-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--d-target-min);
  color: var(--d-ink);
  text-decoration: none;
}

.d-barber-shop .d-footer-links a:hover {
  color: var(--d-accent);
}

.d-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vt-space-2) var(--vt-space-5);
  margin-top: var(--vt-space-7);
  padding-top: var(--vt-space-4);
  border-top: var(--d-rule);
}

.d-footer-base p {
  margin: 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .d-barber-shop *,
  .d-barber-shop *::before,
  .d-barber-shop *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .d-barber-shop .d-link-arrow:hover .vt-icon:last-child {
    transform: none;
  }
}