/* services.css — services index + single-service booking page.
   Tokens only; mobile-first. Shared by sections/services-index.liquid,
   sections/main-service.liquid and snippets/service-card.liquid. */

/* ============================ index: hero ============================ */
.lh-services__hero {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.lh-services__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.lh-services__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h2);
  line-height: var(--leading-display);
  color: var(--text-heading);
}
.lh-services__lead {
  max-width: 62ch;
  margin: var(--space-3) auto 0;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-services__hero--image {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.lh-services__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.lh-services__hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(28, 25, 23, .35), rgba(28, 25, 23, .62));
}
.lh-services__hero--image .lh-services__hero-inner { position: relative; z-index: 2; }
.lh-services__hero--image .lh-services__title { color: #fff; }
.lh-services__hero--image .lh-services__lead { color: rgba(255, 255, 255, .9); }
.lh-services__hero--image .lh-services__eyebrow { color: var(--color-accent); }

/* padding-block only — never zero the inline gutter, or `.lh-container` loses its
   side padding and the cards go edge-to-edge on mobile (services-8.webp). */
.lh-services__body { padding-block: var(--space-8) var(--space-10); }
.lh-services__intro {
  max-width: 70ch;
  margin: 0 auto var(--space-8);
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-align: center;
}
.lh-services__intro > :first-child { margin-top: 0; }
.lh-services__faq { margin-top: var(--space-10); }
.lh-services__faq .lh-faq { padding-block: 0; max-width: 820px; margin-inline: auto; }
.lh-services__empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-muted);
}

/* ============================ index: grid ============================ */
.lh-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cards-gap-row) var(--cards-gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-services__grid-item { display: flex; }

/* ============================ service card ============================ */
.lh-service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.lh-service-card:hover,
.lh-service-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.lh-service-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lh-img-loader, none), var(--surface-sunken);
}
.lh-service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.lh-service-card:hover .lh-service-card__img { transform: scale(1.03); }
.lh-service-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
/* Stars + score + count, the same row the wig ProductCard carries. */
.lh-service-card__rating { display: flex; line-height: 1; }
.lh-service-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h4);
  line-height: var(--leading-display);
  color: var(--text-heading);
}
.lh-service-card__link { color: inherit; text-decoration: none; }
.lh-service-card__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.lh-service-card__summary {
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
/* From (left) · duration (right) on one banded row with a tinted background. */
.lh-service-card__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: auto 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-body-sm);
  color: var(--text-body);
  list-style: none;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.lh-service-card__price { font-weight: var(--weight-medium); }
.lh-service-card__price strong { color: var(--color-primary); font-weight: var(--weight-semibold); }
.lh-service-card__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--text-muted);
}
.lh-service-card__cta { margin-top: var(--space-3); width: 100%; }
/* book_popup cards: "View details" (outline) and "Book Now" side by side, equal halves. */
.lh-service-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.lh-service-card__actions .lh-service-card__cta { margin-top: 0; padding-inline: var(--space-3); }

/* ============================ collection: title header ============================ */
.lh-services__pagehead {
  padding: var(--space-8) 0 var(--space-2);
  text-align: center;
}
.lh-services__pagehead .lh-services__eyebrow { display: block; margin-bottom: var(--space-2); }
.lh-services--collection .lh-services__body { padding-top: var(--space-6); padding-bottom: 0; }

/* ============================ index: steps ============================ */
.lh-services__how { margin-top: var(--space-10); }

/* Full-bleed "How booking works" — background image spans the whole width, the
   step cards sit centered on top. Uses the 100vw break-out so it stays in the
   container DOM. */
.lh-services__how--bg {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: var(--space-10);
  padding-block: var(--space-12);
  overflow: hidden;
  isolation: isolate;
}
.lh-services__how-media { position: absolute; inset: 0; z-index: -1; }
.lh-services__how-bg { width: 100%; height: 100%; object-fit: cover; }
.lh-services__how-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 25, 23, .62), rgba(28, 25, 23, .74));
}
.lh-services__how-inner {
  max-width: var(--page-max, 1340px);
  margin-inline: auto;
  padding-inline: var(--page-gutter, 20px);
}
.lh-services__how--bg .lh-services__h2 { color: #fff; }
.lh-services__how--bg .lh-services__step { box-shadow: var(--shadow-md); }
.lh-services__h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--font-h3);
  color: var(--text-heading);
  text-align: center;
}
#services-how-title { text-transform: capitalize; }
.lh-services__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Step card — numbered accent badge (curved corner into the card) + icon +
   title/body, per services-13.webp's layout, recolored to DS tokens. */
.lh-services__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.lh-services__step-badge {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 76px;
  background: var(--color-primary);
  color: var(--surface-card);
}
.lh-services__step-badge::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at top left, transparent 22px, var(--surface-card) 22px);
}
.lh-services__step-badge-kicker {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .85;
}
.lh-services__step-badge-num {
  font-family: var(--font-display);
  font-size: var(--font-h3);
  line-height: 1;
  font-weight: var(--weight-semibold);
}
.lh-services__step-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-primary);
}
.lh-services__step-title {
  margin: 0 0 4px;
  font-size: var(--font-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-services__step-body {
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ============================ index: cta ============================ */
.lh-services__cta {
  margin-top: var(--space-10);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.lh-services__cta-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-h3);
  color: var(--text-heading);
}
.lh-services__cta-body {
  max-width: 54ch;
  margin: 0 auto var(--space-5);
  color: var(--text-muted);
}

/* Full-bleed CTA with a fixed ("sticky") background image + scrim for contrast. */
.lh-services__cta--bg {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: var(--space-12);
  padding: var(--space-12) var(--page-gutter, 20px);
  border: 0;
  border-radius: 0;
  background-color: var(--text-heading);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  isolation: isolate;
}
.lh-services__cta-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Light enough to keep the salon image visible, dark enough for white-text
     contrast (large Playfair heading + body sit over the ~.5 mid-band). */
  background: linear-gradient(180deg, rgba(28, 25, 23, .40), rgba(28, 25, 23, .58));
}
.lh-services__cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}
.lh-services__cta--bg .lh-services__cta-title { color: #fff; }
.lh-services__cta--bg .lh-services__cta-body { color: rgba(255, 255, 255, .9); }
/* iOS ignores background-attachment: fixed and can stutter — pin to scroll on
   touch/coarse pointers so the band stays a clean cover image there. */
@media (hover: none), (pointer: coarse) {
  .lh-services__cta--bg { background-attachment: scroll; }
}

/* ============================ single service ============================ */
/* padding-block only — keep the `.lh-container` inline gutter so the content is
   not flush to the viewport on mobile (services-7.webp). */
.lh-service__inner { padding-block: var(--space-5) var(--space-10); }
.lh-service__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-service__crumbs a { color: var(--color-primary); text-decoration: none; }
.lh-service__crumbs a:hover { text-decoration: underline; }

.lh-service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
/* A grid item's automatic minimum size is its MIN-CONTENT, so one `white-space:
   nowrap` string anywhere inside (a stylist with four specialties) stretches the
   whole column past the viewport — the ellipsis never gets a chance to clip,
   because the box grew to fit instead. `min-width: 0` restores "shrink to the
   track", which is what every column here wants. */
.lh-service__grid > * { min-width: 0; }
.lh-service__media {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--lh-img-loader, none), var(--surface-sunken);
}
.lh-service__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lh-service__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h2);
  line-height: var(--leading-display);
  color: var(--text-heading);
}
.lh-service__summary {
  margin: var(--space-2) 0 0;
  font-size: var(--font-body-lg);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
/* Phones: the title uses the h2 size here, so the summary drops to body size to keep
   the title clearly above it. */
@media (max-width: 767px) {
  .lh-service__summary { font-size: var(--font-body-md); }
}
.lh-service__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  list-style: none;
}
.lh-service__fact { display: flex; flex-direction: column; gap: 2px; }
.lh-service__fact-label {
  font-size: var(--font-body-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lh-service__fact-value {
  font-size: var(--font-body-lg);
  color: var(--text-heading);
}
.lh-service__fact--price .lh-service__fact-value { color: var(--color-primary); }
.lh-service__desc { margin-top: var(--space-5); }

.lh-service__h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-h3); /* was h4: "What's included" read the same size as its text */
  color: var(--text-heading);
}
/* "Book this service" + "What's included" render Title Case regardless of source-string casing. */
#service-book-title,
.lh-service__includes .lh-service__h2 {
  text-transform: capitalize;
}
/* The block itself is the includes carousel — see lh-service-includes.css. */
.lh-service__includes { margin-top: var(--space-6); }

/* ---------- booking form ---------- */
.lh-service__book {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.lh-service__book-lead {
  margin: 0 0 var(--space-5);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-service__deposits { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.lh-service__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-service__label svg { color: var(--text-muted); }
/* Deposit tiers stay on ONE line on every viewport (equal-width, no wrap). */
.lh-service__deposit-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
}
.lh-service__deposit { flex: 1 1 0; min-width: 0; }
.lh-service__deposit-amount { white-space: nowrap; }
.lh-service__deposit { position: relative; display: block; cursor: pointer; }
.lh-service__deposit.is-unavailable { cursor: not-allowed; opacity: .5; }
/* The radio stays in the accessibility tree and keeps native keyboard
   behaviour; only its painted box is hidden. */
.lh-service__deposit input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lh-service__deposit-face {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  background: var(--surface-page);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.lh-service__deposit input:checked + .lh-service__deposit-face {
  background: var(--surface-card);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.lh-service__deposit input:focus-visible + .lh-service__deposit-face {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lh-service__deposit-amount {
  font-size: var(--font-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-service__deposit-name {
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}

/* ============================ time slots ============================ */
/* Radio chips. The radio stays in the accessibility tree, so the arrow keys and
   `required` work natively with JS off; only its painted box is hidden. */
.lh-service__field--time { margin: 0; padding: 0; border: 0; }
.lh-service__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2);
}
.lh-service__slot { position: relative; display: block; cursor: pointer; }
.lh-service__slot input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lh-service__slot-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  background: var(--surface-page);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.lh-service__slot-name {
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--text-heading);
}
.lh-service__slot-range {
  font-size: var(--font-caption);
  white-space: nowrap;
  color: var(--text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .lh-service__slot:hover input:not(:checked) + .lh-service__slot-face { border-color: var(--color-primary); }
}
.lh-service__slot:active .lh-service__slot-face { transform: scale(0.97); }
.lh-service__slot input:checked + .lh-service__slot-face {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.lh-service__slot input:checked + .lh-service__slot-face .lh-service__slot-name,
.lh-service__slot input:checked + .lh-service__slot-face .lh-service__slot-range { color: var(--surface-card); }
.lh-service__slot input:focus-visible + .lh-service__slot-face {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lh-service__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
/* min-width: 0 — same auto-minimum trap as the page grid above. */
.lh-service__field { display: flex; flex-direction: column; min-width: 0; }
.lh-service__input {
  width: 100%;
  padding: 11px var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lh-service__input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--ring-focus);
}
.lh-service__textarea { resize: vertical; min-height: 84px; }
.lh-service__submit { width: 100%; }
.lh-service__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-service__note svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }

/* ============================ breakpoints ============================ */
@media screen and (min-width: 750px) {
  .lh-services__title, .lh-service__title { font-size: var(--font-h1); }
  .lh-services__grid { grid-template-columns: repeat(2, 1fr); }
  .lh-services__steps { grid-template-columns: repeat(3, 1fr); }
  .lh-service__book { padding: var(--space-6); }
}

@media screen and (min-width: 990px) {
  .lh-services__hero { padding: var(--space-10) 0 var(--space-8); }
  .lh-services__grid { grid-template-columns: repeat(3, 1fr); }
  .lh-service__grid {
    /* Mirror the wig PDP column split + gutter so the service page reads at the
       same content width (fixes services-3.webp). */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

/* ---------- media thumbs ---------- */
.lh-service__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.lh-service__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--lh-img-loader-sm, none), var(--surface-sunken);
}

/* ---------- rich description imagery ---------- */
.lh-service__desc img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}
.lh-service__desc h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display); color: var(--text-heading); }

/* ---------- how it works (step cards + icon tiles, services-10.webp) ---------- */
.lh-service__process { margin-top: var(--space-8); }
.lh-service__steps2 {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-service__step2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.lh-service__step2-tile {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  /* Base tint is the fallback if color-mix() (per-step tints below) is unsupported. */
  background: var(--surface-sunken);
  color: var(--color-primary);
}
/* Tile tints cycle over the DS warm palette — derived from tokens, no raw hex. */
.lh-service__step2[data-step="0"] .lh-service__step2-tile { background: color-mix(in srgb, var(--color-accent) 20%, var(--surface-page)); }
.lh-service__step2[data-step="1"] .lh-service__step2-tile { background: color-mix(in srgb, var(--color-primary) 15%, var(--surface-page)); }
.lh-service__step2[data-step="2"] .lh-service__step2-tile { background: color-mix(in srgb, var(--color-accent) 36%, var(--surface-page)); }
.lh-service__step2[data-step="3"] .lh-service__step2-tile { background: color-mix(in srgb, var(--color-primary) 24%, var(--surface-page)); }
.lh-service__step2-text { min-width: 0; }
.lh-service__step2-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.lh-service__step2-body {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--text-body);
}

/* ---------- booking extras ---------- */
.lh-service__form-error {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body-sm);
  color: var(--color-sale);
  background: var(--color-sale-soft, rgba(220, 38, 38, .08));
  border-radius: var(--radius-sm);
}
.lh-service__submit.is-loading { opacity: .7; pointer-events: none; }

/* ---------- FAQ inside a service ---------- */
.lh-service__faq { margin-top: var(--space-10); }
/* Standalone FAQ section, last on the page after "More ways we can help": the same
   band rhythm as .lh-service-recs above it. */
.lh-service-faq { margin-top: 0; padding: var(--space-8) 0 var(--space-12); border-top: 1px solid var(--border-subtle); }
.lh-service__faq .lh-faq { padding-block: 0; max-width: 820px; margin-inline: auto; }
.lh-service__faq-title { text-align: center; }

/* ---------- sticky Book Now ---------- */
.lh-service-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--space-3) 0;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform var(--duration-base) var(--ease-out);
}
.lh-service-sticky.is-visible { transform: translateY(0); }
.lh-service-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.lh-service-sticky__id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lh-service-sticky__id img { border-radius: var(--radius-sm); flex-shrink: 0; }
.lh-service-sticky__text { display: flex; flex-direction: column; min-width: 0; }
.lh-service-sticky__title {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-service-sticky__meta { font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-service-sticky__dot { margin: 0 6px; }
.lh-service-sticky__cta {
  flex-shrink: 0;
  gap: 8px;
  min-height: 46px;
  padding: 12px 26px;
  font-size: var(--font-body-sm);
  border-radius: var(--radius-sm);
}
.lh-service-sticky__cta svg { flex-shrink: 0; }

/* ---------- service recommendations ---------- */
.lh-service-recs { padding: var(--space-8) 0; border-top: 1px solid var(--border-subtle); }
.lh-service-recs__head { margin-bottom: var(--space-5); text-align: center; }
.lh-service-recs__title { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: var(--font-h3); color: var(--text-heading); }
.lh-service-recs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-service-recs__item { display: flex; }

/* ---------- service reviews ---------- */
.lh-service-reviews { padding: var(--space-8) 0; background: var(--surface-sunken); }
.lh-service-reviews__head { margin-bottom: var(--space-6); text-align: center; }
.lh-service-reviews__title { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-display); font-size: var(--font-h3); color: var(--text-heading); }
.lh-service-reviews__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-service-reviews__score { font-size: var(--font-body-lg); font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-service-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-service-reviews__card {
  /* One inset drives both the text padding and the photo's full-bleed pull,
     so the two can never drift apart. */
  --svc-review-pad: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--svc-review-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
/* <figure> carries a browser-default `margin: 1em 40px`. Left in place it
   stacked 40px of side inset and 16px top and bottom onto the card's own
   padding, so the text sat 61px in from each edge of a card. */
.lh-service-reviews__figure { margin: 0; }
.lh-service-reviews__photo {
  /* Bottom margin + the card's gap = the same inset as the sides. */
  margin: calc(var(--svc-review-pad) * -1) calc(var(--svc-review-pad) * -1) var(--space-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--lh-img-loader, none), var(--surface-sunken);
}
.lh-service-reviews__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A review that carries media opens the slideshow modal, so the whole card is
   the control. Keyboard users get the same affordance via the focus ring. */
.lh-service-reviews__card--photo { cursor: pointer; }
.lh-service-reviews__card--photo:has([role="button"]:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lh-service-reviews__photo { position: relative; }
.lh-service-reviews__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lh-white);
  background: rgba(var(--lh-black-rgb), 0.28);
  transition: background var(--duration-base) var(--ease-standard);
}
.lh-service-reviews__card--photo:hover .lh-service-reviews__play {
  background: rgba(var(--lh-black-rgb), 0.4);
}
.lh-service-reviews__count-badge {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(var(--lh-black-rgb), 0.6);
  color: var(--lh-white);
  font-size: var(--font-caption);
  line-height: 1.6;
  text-align: center;
}
.lh-service-reviews__meta {
  font-size: var(--font-caption);
  color: var(--text-muted);
}
.lh-service-reviews__pagination { margin-top: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
  .lh-service-reviews__play { transition: none; }
}
.lh-service-reviews__quote {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-service-reviews__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-service-reviews__name { font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-service-reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
}

@media screen and (min-width: 750px) {
  .lh-service-recs__grid { grid-template-columns: repeat(3, 1fr); }
  .lh-service-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 990px) {
  .lh-service-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================ reused PDP gallery ============================ */
.lh-service__gallery { display: block; }
@media screen and (min-width: 1024px) {
  .lh-service__gallery { position: sticky; top: calc(var(--header-height) + var(--space-4)); align-self: start; }
}
/* Match the PDP default: overlay zoom/nav hidden on mobile (swipe + tap-to-open
   stay). The base .lh-pdp__zoom/.lh-pdp__nav rules are scoped to .lh-pdp-section,
   absent here, so re-assert the mobile default within the service gallery. */
@media screen and (max-width: 767px) {
  .lh-service__gallery .lh-pdp__zoom,
  .lh-service__gallery .lh-pdp__nav { display: none; }
}

/* ============================ booking actions ============================ */
.lh-service__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lh-service__submit,
.lh-service__ask { flex: 1 1 200px; }
.lh-service__ask svg { flex-shrink: 0; }
.lh-service__deposit-face { padding-inline: var(--space-2); }

/* ============================ availability calendar ============================ */
/* Always on screen, so a shopper sees the open days without tapping anything.
   The date input below it is the "you picked" readout (see service-calendar.js). */
.lh-svc-cal {
  padding: var(--space-2);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.lh-svc-cal__readout {
  margin-top: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--surface-sunken);
  pointer-events: none;
}
.lh-svc-cal__readout::placeholder { font-weight: normal; color: var(--text-muted); }
.lh-svc-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.lh-svc-cal__month { font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-svc-cal__navbtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--text-heading);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.lh-svc-cal__navbtn:active:not(:disabled) { transform: scale(0.95); }
.lh-svc-cal__navbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lh-svc-cal__navbtn:disabled { opacity: .4; cursor: not-allowed; }
.lh-svc-cal__dow,
.lh-svc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.lh-svc-cal__dow { margin-bottom: var(--space-1); }
.lh-svc-cal__dow span { text-align: center; font-size: var(--font-caption); color: var(--text-muted); }
.lh-svc-cal__day,
.lh-svc-cal__pad { min-height: 44px; }
.lh-svc-cal__day {
  display: grid;
  place-items: center;
  font-size: var(--font-body-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-subtle);
}
button.lh-svc-cal__day {
  cursor: pointer;
  background: var(--surface-sunken);
  border-color: var(--border-subtle);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  button.lh-svc-cal__day:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
button.lh-svc-cal__day:active { transform: scale(0.95); }
button.lh-svc-cal__day:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
button.lh-svc-cal__day.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--surface-card); }
.lh-svc-cal__day.is-off { opacity: .4; }
/* A day already behind today reads as spent, not merely closed. */
.lh-svc-cal__day.is-past { opacity: .28; text-decoration: line-through; text-decoration-thickness: 1px; }
.lh-svc-cal__hint { margin: var(--space-2) 0 0; font-size: var(--font-caption); color: var(--text-muted); }

/* Month stepping — the fresh grid slides in from the side the user travelled
   towards, so the arrows read as movement through a calendar rather than a
   flicker. One-shot animations (not transitions): render() replaces the nodes. */
@keyframes lh-cal-in-next {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lh-cal-in-prev {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.lh-svc-cal__grid.is-in-next,
.lh-svc-cal__month.is-in-next { animation: lh-cal-in-next var(--duration-base) var(--ease-out) both; }
.lh-svc-cal__grid.is-in-prev,
.lh-svc-cal__month.is-in-prev { animation: lh-cal-in-prev var(--duration-base) var(--ease-out) both; }

/* ============================ phone country code ============================ */
.lh-service__phone { position: relative; display: flex; align-items: stretch; gap: var(--space-2); }
.lh-service__phone .lh-service__input { flex: 1 1 auto; min-width: 0; }
.lh-phone__cc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--text-heading);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lh-phone__cc:hover { border-color: var(--color-primary); }
.lh-phone__cc:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-focus); }
.lh-phone__flag { font-size: 17px; line-height: 1; }
.lh-phone__dial { font-weight: var(--weight-medium); }
.lh-phone__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, 100%);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lh-phone__pop[hidden] { display: none; }
.lh-phone__search { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.lh-phone__search-input {
  width: 100%;
  padding: 9px var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--text-body);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.lh-phone__search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-focus); }
.lh-phone__list { max-height: 264px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.lh-phone__opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px var(--space-3);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.lh-phone__opt:hover,
.lh-phone__opt.is-selected { background: var(--surface-sunken); }
.lh-phone__opt-name { flex: 1 1 auto; font-size: var(--font-body-sm); color: var(--text-body); }
.lh-phone__opt-dial { font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-phone__empty { margin: 0; padding: var(--space-4); font-size: var(--font-body-sm); color: var(--text-muted); }

/* ============================ stylist carousel ============================ */
/* Sits between the deposit tiles and the date field, so it owns the gap below. */
.lh-service__field--stylist { margin-bottom: var(--space-5); }
.lh-stylist { position: relative; }
.lh-service__stylist-select[hidden] { display: none; }
.lh-stylist__rail { position: relative; }
/* Native scroll-snap: a thumb swipes it, the arrows page it. The 4px inset keeps
   a focus ring or the selected card's ring from being clipped by the scroller. */
.lh-stylist__track {
  display: flex;
  gap: var(--space-3);
  margin: -4px;
  padding: 4px;
  scroll-padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.lh-stylist__track::-webkit-scrollbar { display: none; }
/* Wider than half the track on a phone, so the next card peeks past the edge:
   that sliver is what tells a shopper the row moves. */
.lh-stylist__card {
  position: relative;
  flex: 0 0 min(64%, 220px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3);
  text-align: left;
  font: inherit;
  scroll-snap-align: start;
  background: var(--surface-page);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
@media (min-width: 750px) {
  .lh-stylist__card { flex-basis: calc((100% - 2 * var(--space-3)) / 3); }
}
@media (hover: hover) and (pointer: fine) {
  .lh-stylist__card:hover:not(:disabled):not(.is-selected) { border-color: var(--color-primary); }
}
.lh-stylist__card:active:not(:disabled) { transform: scale(0.97); }
.lh-stylist__card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lh-stylist__card.is-selected {
  background: var(--surface-card);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.lh-stylist__card:disabled { cursor: not-allowed; opacity: .55; }
/* Selection tick: sits in the corner at all times, so picking a stylist never
   shifts her text. Scales in from .6, never from nothing. */
.lh-stylist__tick {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--surface-card);
  background: var(--color-primary);
  border-radius: var(--radius-circle);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-emphasis);
}
.lh-stylist__card.is-selected .lh-stylist__tick { opacity: 1; transform: none; }
.lh-stylist__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--surface-sunken);
}
.lh-stylist__avatar--initial {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--font-body-lg);
  color: var(--color-primary);
  border: 1px solid var(--border-subtle);
}
.lh-stylist__name,
.lh-stylist__role { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lh-stylist__name { font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-stylist__role,
.lh-stylist__meta,
.lh-stylist__status { font-size: var(--font-caption); color: var(--text-muted); }
/* Specialties: two lines at most, so one stylist with eight of them cannot make
   her card taller than the rest. */
.lh-stylist__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lh-stylist__status { margin-top: auto; padding-top: var(--space-1); }
.lh-stylist__status:empty { display: none; }
.lh-stylist__free { color: var(--color-primary); }
/* Prev / next: for a mouse. A touch screen swipes, so they never show there. */
.lh-stylist__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  place-items: center;
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.lh-stylist__arrow--prev { left: -12px; }
.lh-stylist__arrow--next { right: -12px; }
@media (hover: hover) and (pointer: fine) {
  .lh-stylist__arrow:not([hidden]) { display: grid; }
  .lh-stylist__arrow:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
}
.lh-stylist__arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* At either end the arrow has nowhere to go: fade it out instead of greying it. */
.lh-stylist__arrow:disabled { opacity: 0; pointer-events: none; }

/* ==================== out-of-area booking notice ==================== */
.lh-service__geo-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.lh-service__geo-note svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.lh-service__geo-note[hidden] { display: none; }
/* Escape hatch for a shopper the time-zone guess got wrong (travelling, VPN). */
.lh-service__geo-override {
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.lh-service__submit[disabled] { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .lh-service-card,
  .lh-service-card__img,
  .lh-service__deposit-face,
  .lh-service__input,
  .lh-service__slot-face,
  .lh-svc-cal__navbtn,
  button.lh-svc-cal__day,
  .lh-service-sticky { transition: none; }
  .lh-service-card:hover { transform: none; }
  .lh-service-card:hover .lh-service-card__img { transform: none; }
  .lh-svc-cal__grid.is-in-next,
  .lh-svc-cal__grid.is-in-prev,
  .lh-svc-cal__month.is-in-next,
  .lh-svc-cal__month.is-in-prev { animation: none; }
  .lh-service__slot:active .lh-service__slot-face,
  .lh-stylist__card:active:not(:disabled),
  .lh-svc-cal__navbtn:active:not(:disabled),
  button.lh-svc-cal__day:active { transform: none; }
  .lh-phone__cc,
  .lh-stylist__card,
  .lh-stylist__arrow,
  .lh-stylist__tick { transition: none; }
}