/*
 * Final catalogue layout for the public booking marketplace.
 * Loaded after the shared guide so legacy booking styles cannot reintroduce
 * cramped text, overlapping prices, or horizontal page overflow.
 */

body.public-page--booking {
  overflow-x: clip;
}

body.public-page--booking .site-header.public-header--marketing,
body.public-page--booking .public-main,
body.public-page--booking .booking-page.is-marketplace-booking,
body.public-page--booking .booking-page.is-marketplace-booking * {
  box-sizing: border-box;
}

body.public-page--booking .site-header.public-header--marketing {
  width: min(1680px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
}

body.public-page--booking .site-header.public-header--marketing > .desktop-nav {
  min-width: 0 !important;
  gap: clamp(7px, .72vw, 13px) !important;
}

body.public-page--booking .site-header.public-header--marketing .public-header-link {
  font-size: clamp(10px, .72vw, 12px) !important;
}

body.public-page--booking .site-header.public-header--marketing .public-header-booking {
  padding-inline: 13px !important;
}

body.public-page--booking .site-header.public-header--marketing .language-select-trigger {
  width: 72px !important;
  min-width: 72px !important;
}

body.public-page--booking .site-header.public-header--marketing .public-header-login {
  padding-left: 10px !important;
  font-size: clamp(10px, .72vw, 12px) !important;
}

body.public-page--booking .site-header.public-header--marketing .public-header-cta {
  padding-inline: 13px !important;
  font-size: clamp(10px, .72vw, 12px) !important;
}

body.public-page--booking .public-main {
  width: min(1680px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
}

body.public-page--booking .booking-page.is-marketplace-booking {
  width: 100% !important;
  min-width: 0 !important;
  margin: 10px auto 28px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-discovery {
  min-width: 0 !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  overflow: hidden !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading {
  min-width: 0 !important;
  margin-bottom: 24px !important;
  gap: 24px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading > div:first-child {
  min-width: 0 !important;
  max-width: 900px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading h1 {
  max-width: 900px !important;
  font-size: clamp(48px, 4.7vw, 72px) !important;
  line-height: .98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading-actions {
  flex: 0 0 auto !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools {
  min-width: 0 !important;
  grid-template-columns: minmax(260px, 1.55fr) repeat(4, minmax(138px, 1fr)) !important;
  gap: 10px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking :where(.marketplace-search, .marketplace-tools select) {
  width: 100% !important;
  min-width: 0 !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-search input,
body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools select {
  min-width: 0 !important;
  font-size: 14px !important;
  text-overflow: ellipsis !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-subbar,
body.public-page--booking .booking-page.is-marketplace-booking .marketplace-results-meta {
  min-width: 0 !important;
  gap: 12px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .marketplace-shortcuts {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .check-existing-booking {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-list,
body.public-page--booking .booking-page.is-marketplace-booking .salon-list[data-result-count] {
  min-width: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 326px !important;
  align-self: stretch !important;
  align-content: start !important;
  grid-template-columns: minmax(112px, 39%) minmax(0, 1fr) !important;
  grid-template-rows: 168px auto auto !important;
  overflow: hidden !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-monogram {
  width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-monogram img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-monogram img.is-logo {
  padding: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy {
  min-width: 0 !important;
  min-height: 168px !important;
  padding: 17px 15px 13px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-category {
  display: block !important;
  max-width: calc(100% - 34px) !important;
  min-height: 15px !important;
  overflow: hidden !important;
  color: var(--guide-rose) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  letter-spacing: .075em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card h2 {
  max-width: calc(100% - 34px) !important;
  margin: 6px 0 3px !important;
  overflow: hidden !important;
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-name-link {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy > p {
  height: 39px !important;
  min-height: 39px !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;
  display: block !important;
  color: var(--guide-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-location-note {
  max-width: 100% !important;
  margin-top: 2px !important;
  display: block !important;
  overflow: hidden !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-meta {
  min-width: 0 !important;
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 7px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-trust {
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 2px !important;
  color: var(--guide-muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-trust > :where(b, span) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-price {
  position: static !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  overflow: hidden !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-price small {
  flex: 0 0 auto !important;
  font-size: 9px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-price strong {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-favorite {
  top: 11px !important;
  right: 11px !important;
  width: 34px !important;
  height: 34px !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-availability {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  align-self: start !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-open {
  display: none !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-slots {
  min-width: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-slot {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 6px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  overflow: hidden !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-slot strong {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-slot small {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page--booking .booking-page.is-marketplace-booking .salon-card-action {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 12px 12px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  align-self: start !important;
}

body.public-page--booking .booking-page.is-marketplace-booking :where(.salon-card-action button, .salon-profile-link) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 7px 10px !important;
  gap: 7px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.public-page--booking .booking-page.is-marketplace-booking :where(.salon-card-action button, .salon-profile-link) > span {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.public-page--booking .booking-page.is-marketplace-booking :where(.salon-card-action button, .salon-profile-link) > b {
  flex: 0 0 auto !important;
}

@media (max-width: 1539px) {
  body.public-page--booking .booking-page.is-marketplace-booking .salon-list,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-list[data-result-count] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy > p {
    font-size: 12px !important;
  }
}

@media (max-width: 1280px) {
  body.public-page--booking .site-header.public-header--marketing,
  body.public-page--booking .public-main {
    width: min(1440px, calc(100% - 20px)) !important;
    max-width: calc(100% - 20px) !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-search {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  body.public-page--booking .booking-page.is-marketplace-booking .salon-list,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-list[data-result-count] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.public-page--booking .site-header.public-header--marketing,
  body.public-page--booking .public-main {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking {
    margin-top: 4px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-discovery {
    padding: 24px 14px 88px !important;
    border-radius: 22px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-heading h1 {
    max-width: 560px !important;
    font-size: clamp(36px, 10.8vw, 50px) !important;
    line-height: 1 !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools {
    grid-template-columns: 1fr 1fr !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools select:nth-of-type(n + 3) {
    display: none !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-shortcuts {
    flex-wrap: nowrap !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-list,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-list[data-result-count] {
    grid-template-columns: 1fr !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card {
    min-height: 0 !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    grid-template-rows: 158px auto auto !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-monogram,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy {
    height: 158px !important;
    min-height: 158px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy {
    padding: 15px 13px 12px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card h2 {
    font-size: 20px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy > p {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 11px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-slot strong {
    font-size: 15px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking :where(.salon-card-action button, .salon-profile-link) {
    min-height: 46px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  body.public-page--booking .booking-page.is-marketplace-booking .salon-discovery {
    padding-inline: 10px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools {
    grid-template-columns: 1fr !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .marketplace-tools select {
    display: none !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-rows: 150px auto auto !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-monogram,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy {
    height: 150px !important;
    min-height: 150px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-copy {
    padding: 13px 11px 10px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-category,
  body.public-page--booking .booking-page.is-marketplace-booking .salon-trust {
    font-size: 9px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card h2 {
    font-size: 18px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-slots {
    gap: 5px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-slot {
    min-height: 48px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-slot strong {
    font-size: 13px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-slot small {
    font-size: 8px !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking .salon-card-action {
    grid-template-columns: 1fr 1fr !important;
  }

  body.public-page--booking .booking-page.is-marketplace-booking :where(.salon-card-action button, .salon-profile-link) {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
}