/**
 * Liquid Beauty v720R — aligned hero copy, trust row, price and locations.
 *
 * - One centered gallery pagination row beneath treatment results.
 * - Hero H1 headings are five pixels smaller on mobile.
 * - On desktop, the image blend starts farther left so the copy can overlap it.
 * - On tablet and mobile, the image is a separate framed element without haze.
 */

/* Keep the result swiper exactly centered beneath its images. */
html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-results .lb-treatment-results__pagination {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  max-width: 1325px !important;
  margin: 24px auto 0 !important;
  padding: 10px 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-align: center !important;
}

/* One calm, editorial hero composition for all individual treatments. */
html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  > section.lb-treatment-about-hero {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #292a28 !important;
  background-color: #292a28 !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-hero__grid {
  position: relative !important;
  display: grid !important;
  width: 90% !important;
  max-width: 1325px !important;
  min-height: 560px !important;
  margin-inline: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  grid-template-columns: minmax(0, 65%) minmax(0, 35%) !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-hero__copy {
  position: relative !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 68px clamp(56px, 6vw, 96px) 68px 0 !important;
  align-self: center !important;
  grid-column: 1 !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-hero__copy h1 {
  max-width: 830px !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-hero__lead {
  max-width: 780px !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-about-hero__collage {
  position: absolute !important;
  inset: 0 calc((100vw - min(90vw, 1325px)) / -2) 0 43% !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 560px !important;
  height: 100% !important;
  margin: 0 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #292a28 !important;
  box-shadow: none !important;
}

/* Remove the former multi-orb decoration and retain the primary photograph. */
html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-about-hero__collage::before {
  display: none !important;
  content: none !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-about-hero__collage::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background:
    linear-gradient(
      90deg,
      #292a28 0%,
      rgba(41, 42, 40, .92) 8%,
      rgba(41, 42, 40, .48) 26%,
      rgba(41, 42, 40, .08) 58%,
      rgba(41, 42, 40, .14) 100%
    ) !important;
  content: "" !important;
  pointer-events: none !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-fillers-hub__hero-orb--large {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #292a28 !important;
  box-shadow: none !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-fillers-hub__hero-orb--large img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .88 !important;
  filter: saturate(.78) contrast(.94) blur(.65px) !important;
  transform: scale(1.015) !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero :is(
    .lb-fillers-hub__hero-orb--medium,
    .lb-fillers-hub__hero-orb--small,
    .lb-fillers-hub__hero-count
  ) {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 980px) {
  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-treatment-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-treatment-hero__copy {
    width: 100% !important;
    max-width: none !important;
    padding: 56px 0 40px !important;
    order: 1 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-about-hero__collage {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: clamp(390px, 55vw, 500px) !important;
    margin: 0 0 52px !important;
    overflow: hidden !important;
    border: 1px solid rgba(208, 183, 136, .32) !important;
    border-radius: 24px !important;
    background: #6f6862 !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .20) !important;
    opacity: 1 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-about-hero__collage::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-fillers-hub__hero-orb--large img {
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  /* The canonical mobile H1 is 45px; hero headings use the requested -5px. */
  html body.lb-site:is(body, #lb-heading-system#lb-heading-system#lb-heading-system#lb-heading-system)
    main#main-content section[class*="hero"] h1 {
    font-size: 40px !important;
    line-height: 1.06 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    > section.lb-treatment-about-hero {
    padding: 0 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-treatment-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    width: 90% !important;
    max-width: 1325px !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-treatment-hero__copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 0 42px !important;
    order: 1 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-about-hero__collage {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: clamp(260px, 72vw, 340px) !important;
    margin: 0 0 34px !important;
    overflow: hidden !important;
    border: 1px solid rgba(208, 183, 136, .32) !important;
    border-radius: 18px !important;
    background: #6f6862 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-about-hero__collage::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-fillers-hub__hero-orb--large img {
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-results .lb-treatment-results__pagination {
    margin-top: 18px !important;
  }
}

/* Match the SEO hero's complete "Behandeling al vanaf" price line. */
html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero p.lb-treatment-hero__price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin: 20px 0 14px !important;
  color: #f9f7f2 !important;
  font: 400 17px/1.5 Manrope, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero p.lb-treatment-hero__price > span {
  display: inline !important;
  margin: 0 !important;
  color: #f9f7f2 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero p.lb-treatment-hero__price > strong {
  display: inline !important;
  margin: 0 !important;
  color: #d2b98f !important;
  font: inherit !important;
  font-weight: 700 !important;
  letter-spacing: inherit !important;
}

/* Use the same scale and rhythm as the trust row on /tarieven/. */
html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 28px !important;
  margin-top: 26px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, .13) !important;
  color: rgba(249, 247, 242, .78) !important;
  font: 700 12px/1.3 Manrope, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-trust span {
  display: flex !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
}

html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
  .lb-treatment-about-hero .lb-treatment-trust span::before {
  position: static !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 9px 0 0 !important;
  border-radius: 50% !important;
  background: #d0b788 !important;
  box-shadow: 0 0 0 5px rgba(208, 183, 136, .14) !important;
  content: "" !important;
  flex: 0 0 7px !important;
}

/* Stack both clinic cards inside the shared rail on tablet and mobile. */
@media (max-width: 980px) {
  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinics__slider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    overflow: visible !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinics__viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
    cursor: default !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinics__grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinic {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinic__image {
    width: 100% !important;
    height: clamp(360px, 46vw, 460px) !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinics__controls {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-about-hero .lb-treatment-trust {
    gap: 14px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinics__grid {
    gap: 20px !important;
  }

  html body.lb-site.lb-individual-treatment-page main#main-content#main-content.lb-treatment-about-layout
    .lb-treatment-location-slider .lb-about-clinic__image {
    height: clamp(250px, 72vw, 315px) !important;
  }
}
