/* Cosmeticium.com V89: proven .co.uk scroll fix plus mobile form hardening. */
html,
body,
main {
  width: 100%;
  max-width: 100%;
}

html {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body,
main {
  overflow-x: clip !important;
}

body {
  touch-action: pan-y pinch-zoom;
  overflow-y: visible !important;
}

.contact-preference-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .result-card,
  .package-card,
  .review-grid article {
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .result-card:hover,
  .package-card:hover,
  .review-grid article:hover {
    box-shadow: var(--clinic-shadow);
  }

  .clinic-editorial-grid img {
    transition: transform 0.28s ease;
  }

  .clinic-editorial-grid figure:hover img {
    filter: saturate(0.8) contrast(1.02);
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .result-card,
  .package-card,
  .review-grid article {
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.18s ease;
  }

  .result-card:hover,
  .package-card:hover,
  .review-grid article:hover {
    transform: none;
    box-shadow: var(--clinic-shadow);
  }

  .result-card:active,
  .package-card:active,
  .review-grid article:active {
    border-color: rgb(233 39 100 / 32%);
    transform: scale(0.988);
  }

  .clinic-editorial-grid img,
  .clinic-image-grid img {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .clinic-editorial-grid figure:hover img,
  .clinic-image-grid figure:hover img {
    transform: none;
  }

  .clinic-editorial-grid figure:hover img {
    filter: saturate(0.8) contrast(1.02);
  }

  .clinic-editorial-grid figure:active img,
  .clinic-image-grid figure:active img {
    transform: scale(1.012);
  }

  .button,
  .form-back,
  .treatment-tabs button,
  .country-picker-trigger,
  .interest-options label > span,
  .timeline-options label > span {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
  }

  .button:hover {
    transform: none;
  }

  .button:active,
  .form-back:active,
  .treatment-tabs button:active,
  .country-picker-trigger:active,
  .interest-options label > span:active,
  .timeline-options label > span:active {
    transform: scale(0.978);
  }
}

/* Older mobile Safari can treat overflow-x: clip as a separate scroll box.
   Keep the page as the only vertical scroller around the assessment card. */
@media (max-width: 760px) {
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body,
  body.form-in-view,
  main {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: auto !important;
  }

  .consult-card,
  #consultation,
  .consult-card form,
  .form-panel {
    max-height: none !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
}