/* Dedicated guest Services surface.
   Loaded after mobile-booking-guest.css so Services has one final visual owner. */
/* The nav floats over this scroller, so the list ends well above it — enough
   that the last card scrolls clear of the nav rather than stopping under it. */
html body #booking-main-area #mobile-services-selection-list {
  padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 240px) !important;
}

html body #booking-main-area #mobile-services-selection-list:has(.booking-services-screen) {
  padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 126px) !important;
}

html body #booking-main-area .booking-services-screen {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
}

html body #booking-main-area .booking-services-screen-head {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.1) !important;
}

html body #booking-main-area .booking-services-screen-head span {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-services-screen-head h2 {
  margin: 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-services-screen-head p {
  margin: 0 !important;
  color: rgba(5, 5, 5, 0.55) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

html body #booking-main-area .booking-service-directory-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 0 !important;
}

html body #booking-main-area .booking-service-directory-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.09) !important;
  background: transparent !important;
}

html body #booking-main-area .booking-service-directory-main {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
}

html body #booking-main-area .booking-service-directory-count {
  display: grid !important;
  gap: 1px !important;
  justify-items: start !important;
  padding-top: 2px !important;
}

html body #booking-main-area .booking-service-directory-count strong {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 22px !important;
  line-height: .86 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-service-directory-count small {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-service-directory-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html body #booking-main-area .booking-service-directory-kicker {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-service-directory-copy > strong {
  max-width: 21ch !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-service-directory-meta,
html body #booking-main-area .booking-service-directory-desc {
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
}

html body #booking-main-area .booking-service-directory-desc {
  max-width: 28ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body #booking-main-area .booking-service-directory-side {
  display: grid !important;
  gap: 6px !important;
  justify-items: end !important;
  align-content: center !important;
}

html body #booking-main-area .booking-service-directory-side > span {
  color: rgba(5, 5, 5, 0.54) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.54) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body #booking-main-area .booking-service-directory-side button {
  min-width: 64px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-count,
html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-copy {
  opacity: .72 !important;
}

html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-side button {
  background: rgba(5, 5, 5, 0.08) !important;
  color: rgba(5, 5, 5, 0.72) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.72) !important;
}

html body #booking-main-area .booking-services-empty,
html body #booking-main-area .booking-services-skeleton {
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  color: rgba(5, 5, 5, 0.55) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
}

html body #booking-main-area .booking-services-skeleton {
  place-items: stretch !important;
}

html body #booking-main-area .booking-services-skeleton i {
  height: 74px !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.08) !important;
  background: linear-gradient(90deg, rgba(5,5,5,.04), rgba(5,5,5,.08), rgba(5,5,5,.04)) !important;
}

/* Cards, not divided rows — each service is its own surface. */
html body #booking-main-area .mobile-booking-service-list {
  display: grid !important;
  gap: 14px !important;
  border-top: 0 !important;
}

html body #booking-main-area .mobile-booking-service-row,
html body #booking-main-area .booking-guest-session {
  display: block !important;
  margin: 0 !important;
  padding: 22px 20px 18px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(5, 5, 5, 0.07) !important;
}

html body #booking-main-area .booking-guest-session + .booking-guest-session {
  margin-top: 0 !important;
  padding-top: 22px !important;
  border-top: 0 !important;
}

html body #booking-main-area .mobile-booking-service-prime {
  display: block !important;
}

html body #booking-main-area .mobile-booking-service-count {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-head,
html body #booking-main-area .booking-guest-session-hero {
  display: contents !important;
}

html body #booking-main-area .booking-guest-session-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body #booking-main-area .mobile-booking-service-head-copy,
html body #booking-main-area .booking-guest-session-copy {
  min-width: 0 !important;
  display: block !important;
}

html body #booking-main-area .booking-guest-session-price {
  flex-shrink: 0 !important;
  text-align: right !important;
}

html body #booking-main-area .booking-guest-session-price strong {
  display: block !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html body #booking-main-area .booking-guest-session-price span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

html body #booking-main-area .booking-guest-availability {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 14px !important;
}

html body #booking-main-area .booking-guest-availability-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  flex-shrink: 0 !important;
}

html body #booking-main-area .booking-guest-availability.is-full .booking-guest-availability-dot {
  background: rgba(5, 5, 5, 0.28) !important;
}

html body #booking-main-area .booking-guest-availability-label {
  color: rgba(5, 5, 5, 0.62) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

html body #booking-main-area .mobile-booking-service-kicker,
html body #booking-main-area .booking-guest-kicker {
  margin: 0 !important;
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .mobile-booking-service-title,
html body #booking-main-area .booking-guest-title {
  max-width: none !important;
  margin: 7px 0 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Superseded by the head price block and the availability line. */
html body #booking-main-area .booking-guest-session .mobile-booking-service-meta,
html body #booking-main-area .booking-guest-session .booking-guest-meta {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-meta,
html body #booking-main-area .booking-guest-meta {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: center !important;
  color: rgba(5, 5, 5, 0.56) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.56) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .mobile-booking-service-meta span + span::before,
html body #booking-main-area .booking-guest-meta span + span::before {
  content: "/" !important;
  margin-right: 7px !important;
  color: rgba(5, 5, 5, 0.24) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.24) !important;
}

html body #booking-main-area .mobile-booking-service-meta-sep {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-desc,
html body #booking-main-area .booking-guest-desc {
  max-width: none !important;
  margin: 12px 0 0 !important;
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body #booking-main-area .booking-guest-times,
html body #booking-main-area .mobile-booking-service-copy {
  margin: 14px 0 0 !important;
  display: block !important;
}

/* Three time tiles across, per the redesign. */
html body #booking-main-area .mobile-booking-times-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  border: 0 !important;
}

html body #booking-main-area .booking-guest-time-tile {
  min-height: 52px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f7f7f8 !important;
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.09) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body #booking-main-area .booking-guest-time-tile .booking-guest-time-clock {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

html body #booking-main-area .booking-guest-time-tile .booking-guest-time-meridiem {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected {
  background: #050505 !important;
  box-shadow: none !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected .booking-guest-time-clock {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected .booking-guest-time-meridiem {
  color: rgba(255, 255, 255, 0.66) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
}

html body #booking-main-area .booking-guest-time-tile:active {
  transform: scale(0.97) !important;
}

/* Overflow tile — an action, so it reads as accent rather than another time. */
html body #booking-main-area .booking-guest-time-tile.is-more {
  background: color-mix(in srgb, var(--primary-color, #ef4e2f) 9%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color, #ef4e2f) 30%, transparent) !important;
}

html body #booking-main-area .booking-guest-time-tile.is-more .booking-guest-time-clock,
html body #booking-main-area .booking-guest-time-tile.is-more .booking-guest-time-meridiem {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
}

html body #booking-main-area .booking-guest-time-tile.is-extra {
  display: none !important;
}

html body #booking-main-area .mobile-booking-times-grid[data-expanded="true"] .booking-guest-time-tile.is-extra {
  display: flex !important;
}

/* Filter pills. */
html body #booking-main-area .booking-guest-filter-row {
  display: flex !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 2px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #booking-main-area .booking-guest-filter-row::-webkit-scrollbar {
  display: none !important;
}

html body #booking-main-area .booking-guest-filter-pill {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.12) !important;
  color: rgba(5, 5, 5, 0.66) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.66) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #booking-main-area .booking-guest-filter-pill.is-selected {
  background: #050505 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #booking-main-area .mobile-booking-time-btn,
html body #booking-main-area .booking-guest-time-row {
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body #booking-main-area .mobile-booking-time-btn::after,
html body #booking-main-area .booking-guest-time-row::after {
  display: none !important;
}

html body #booking-main-area .booking-guest-time-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html body #booking-main-area .booking-guest-time-main strong {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 24px !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-guest-time-main small {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-guest-time-action {
  min-width: 84px !important;
  min-height: 33px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-guest-time-action span,
html body #booking-main-area .booking-guest-time-action i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #booking-main-area .booking-guest-time-row.is-extra {
  display: none !important;
}

html body #booking-main-area .mobile-booking-times-grid[data-expanded="true"] .booking-guest-time-row.is-extra {
  display: grid !important;
}

html body #booking-main-area .mobile-booking-more-btn {
  width: 100% !important;
  min-height: 34px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #booking-main-area .mobile-booking-no-times {
  color: rgba(5, 5, 5, 0.48) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.48) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}

@media (max-width: 380px) {
  html body #booking-main-area #mobile-services-selection-list {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body #booking-main-area .mobile-booking-service-title,
  html body #booking-main-area .booking-guest-title {
    font-size: 21px !important;
  }

  html body #booking-main-area .booking-guest-time-main strong {
    font-size: 22px !important;
  }
}

/* guest-booking-scroll-20260810
   The booking overlay and its inner container were both overflow-y:auto, so a
   touch had two scrollers to choose between and the page fought back. Scroll
   lives on the overlay only; everything inside just grows. */
/* Pinning to 100dvh makes Safari resize this mid-scroll as the URL bar
   collapses, which strands the last card under the nav. Anchor to the viewport
   edges instead and let the browser own the height. */
html body #booking-main-area {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

html body #mobile-builtin-booking-container {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  /* The list owns the bottom clearance; the inline 100px here just double-counts. */
  padding-bottom: 0 !important;
}

html body #booking-main-area #mobile-services-selection {
  min-height: 0 !important;
  overflow: visible !important;
}

/* guest-service-list-dc-20260906 */
html body #booking-main-area .service-list-dc {
  padding: 4px 6px 30px !important;
  font-family: var(--font-family, "Manrope"), Helvetica, Arial, sans-serif !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head {
  padding: 0 4px !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head span {
  font-family: "IBM Plex Mono", monospace !important;
  color: #70706b !important;
  -webkit-text-fill-color: #70706b !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head h2 {
  margin-top: 6px !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head p {
  margin-top: 7px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body #booking-main-area .service-list-dc-filters {
  display: flex !important;
  gap: 6px !important;
  margin-top: 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

html body #booking-main-area .service-list-dc-filters button {
  flex: none !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #booking-main-area .service-list-dc-filters button.is-active {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

html body #booking-main-area .service-list-dc-filters button span {
  margin-left: 6px !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
}

html body #booking-main-area .service-list-dc .booking-service-directory-list {
  display: grid !important;
  gap: 9px !important;
  margin-top: 14px !important;
}

html body #booking-main-area .service-list-dc-card {
  display: block !important;
  padding: 0 !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(17,18,20,.03) !important;
  overflow: hidden !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-main {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px !important;
  text-align: left !important;
}

html body #booking-main-area .service-list-dc-badges {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body #booking-main-area .service-list-dc-badges > span {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  background: #efefeb !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .service-list-dc-badges .service-list-dc-availability {
  background: #e4f5f1 !important;
  color: #0a6558 !important;
  -webkit-text-fill-color: #0a6558 !important;
}

html body #booking-main-area .service-list-dc-badges .service-list-dc-availability.is-low {
  background: #fbede9 !important;
  color: #a83e29 !important;
  -webkit-text-fill-color: #a83e29 !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-copy > strong {
  margin-top: 9px !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-meta {
  margin-top: 7px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10.5px !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-desc {
  margin-top: 10px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

html body #booking-main-area .service-list-dc-price {
  text-align: right !important;
}

html body #booking-main-area .service-list-dc-price strong,
html body #booking-main-area .service-list-dc-price small {
  display: block !important;
  white-space: nowrap !important;
}

html body #booking-main-area .service-list-dc-price strong {
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

html body #booking-main-area .service-list-dc-price small {
  margin-top: 5px !important;
  color: #70706b !important;
  -webkit-text-fill-color: #70706b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 8px !important;
}

html body #booking-main-area .service-list-dc-capacity {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 14px !important;
  padding: 11px 0 !important;
  border-top: 1px solid #f1f1ed !important;
}

html body #booking-main-area .service-list-dc-capacity > span {
  flex: 1 !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #f1f1ed !important;
  overflow: hidden !important;
}

html body #booking-main-area .service-list-dc-capacity i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #0fbfa4 !important;
}

html body #booking-main-area .service-list-dc-capacity small,
html body #booking-main-area .service-list-dc-openings > span {
  color: #63635f !important;
  -webkit-text-fill-color: #63635f !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .08em !important;
}

html body #booking-main-area .service-list-dc-openings {
  padding: 0 14px 12px !important;
}

html body #booking-main-area .service-list-dc-openings > div {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

html body #booking-main-area .service-list-dc-openings button {
  min-height: 44px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 13px !important;
  background: #fcfcfa !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
}

html body #booking-main-area .service-list-dc-openings button.is-first {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

html body #booking-main-area .service-list-dc-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 0 14px 14px !important;
}

html body #booking-main-area .service-list-dc-actions button {
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 14px !important;
  background: #fcfcfa !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #booking-main-area .service-list-dc-actions button.is-book {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .service-list-dc-ask {
  width: 100% !important;
  min-height: 72px !important;
  margin-top: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px dashed #d6d6d0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  text-align: left !important;
}

html body #booking-main-area .service-list-dc-ask strong,
html body #booking-main-area .service-list-dc-ask small {
  display: block !important;
}

html body #booking-main-area .service-list-dc-ask small {
  margin-top: 3px !important;
  color: #63635f !important;
  -webkit-text-fill-color: #63635f !important;
  font-size: 11.5px !important;
}

html body #booking-main-area .service-list-dc-ask b {
  color: #0a6558 !important;
  -webkit-text-fill-color: #0a6558 !important;
  font-size: 11.5px !important;
}

/* The sticky header must not trap touches meant for the list behind it. */
html body #booking-main-area .booking-header-bar,
html body #booking-main-area .mobile-booking-week-shell {
  touch-action: pan-y !important;
}

/* The day rail scrolls sideways; keep that gesture from stealing vertical drags. */
html body #booking-main-area #booking-week-strip {
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

/* Tiles and cards should never swallow a scroll that started on them. */
html body #booking-main-area .booking-guest-session,
html body #booking-main-area .booking-guest-time-tile,
html body #booking-main-area .booking-guest-filter-pill {
  touch-action: manipulation !important;
}

/* ---------------------------------------------- the desktop Booking face
   The guest booking home, the pick-a-time sheet, review and payment carry
   the /<T>/booking page's look: pure white surfaces (no grey fills), 1.5px
   hairline cards and fields, times as outlined buttons, and the app's own
   colour on the chosen day and the chosen time. The doubled id outranks
   the earlier layers (guest.css, checkout-inputs.css) without new
   !important wars; neutrals are role-named tokens so page colour moves
   them. */
html body #booking-main-area#booking-main-area,
html body #mobileBookingModal#mobileBookingModal,
html body #mobilePaymentModal#mobilePaymentModal {
    --bk-paper: #ffffff;
    --bk-ink: #111113;
    --bk-dim: #5f6068;
    --bk-edge: #e3e3e6;
    --bk-line: #efefef;
    --bk-btn: var(--pc-btn, var(--primary-color, #111113));
    --bk-on-btn: var(--pc-on-btn, #ffffff);
}
/* No dark twin here: these surfaces paint themselves light in both themes
   (their text is set dark by the older layers), so the paper stays white. */

/* The week: the chosen day in the app's colour, open days marked by it. */
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected {
    background: var(--bk-btn) !important;
    border-color: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-name,
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-number {
    color: var(--bk-on-btn) !important;
    -webkit-text-fill-color: var(--bk-on-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .booking-week-dot {
    background: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .booking-week-dot {
    background: var(--bk-on-btn) !important;
}

/* Services as the desktop's booking-type cards. */
html body #booking-main-area#booking-main-area .booking-guest-session {
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Times: outlined buttons; the chosen one filled with the app's colour. */
html body #booking-main-area#booking-main-area .booking-guest-time-tile,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile:active,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time:active {
    border-color: var(--bk-ink) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-selected,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected {
    background: var(--bk-btn) !important;
    border-color: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-selected *,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected * {
    color: var(--bk-on-btn) !important;
    -webkit-text-fill-color: var(--bk-on-btn) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-more {
    border-style: dashed !important;
}
html body #booking-main-area#booking-main-area .booking-image-thumb {
    background: var(--bk-line) !important;
}

/* The sheets: white, hairline fields, an outlined hold timer. */
html body #mobileBookingModal#mobileBookingModal,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-sheet,
html body #mobilePaymentModal#mobilePaymentModal,
html body #mobilePaymentModal#mobilePaymentModal .mobile-payment-shell {
    background: var(--bk-paper) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-header,
html body #mobilePaymentModal#mobilePaymentModal .mobile-payment-header {
    background: var(--bk-paper) !important;
}
html body #mobileBookingModal#mobileBookingModal input#mobileGuestName,
html body #mobileBookingModal#mobileBookingModal input#mobileGuestEmail,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-field > input {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
html body #mobileBookingModal#mobileBookingModal input#mobileGuestName:focus,
html body #mobileBookingModal#mobileBookingModal input#mobileGuestEmail:focus {
    border-color: var(--bk-ink) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-hold {
    background: var(--bk-paper) !important;
    border: 1px solid var(--bk-edge) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-review-payment,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-review-host-avatar {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
}

/* Dark: the older layers darken the cards but keep their text dark, and
   leave the week band white. Give the home one dark system. */
html[data-theme="dark"] body #booking-main-area#booking-main-area {
    --bk-paper: #0b0b0d;
    --bk-ink: #f4f4f5;
    --bk-dim: #a9a9b1;
    --bk-edge: #2c2c32;
    --bk-line: #202025;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-header-bar,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-week-shell {
    background: var(--bk-paper) !important;
    border-color: var(--bk-line) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-eyebrow,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-title-wrap *,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .mobile-booking-day-number,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-title,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session-price strong,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) .booking-guest-time-clock {
    color: var(--bk-ink) !important;
    -webkit-text-fill-color: var(--bk-ink) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .mobile-booking-day-name,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-desc,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session-price span,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-availability-label,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-no-times,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) .booking-guest-time-meridiem {
    color: var(--bk-dim) !important;
    -webkit-text-fill-color: var(--bk-dim) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) {
    background: transparent !important;
    border-color: var(--bk-edge) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) {
    background: transparent !important;
}