/*
 * CBI Responsive Stability v4.1.0
 * Loaded after cbi-exact.css. Standard desktop/tablet/portrait dimensions stay unchanged.
 */

/* Responsive <picture> must occupy the exact box previously occupied by <img>. */
body.cbi-exact-body .shop-hero-carousel .cbi-hero-slide picture {
  display: block !important;
}

/* Short phone landscape only: avoid a portrait-sized hero exceeding the visual viewport. */
@media (max-width: 1120px) and (orientation: landscape) and (max-height: 600px) {
  body.cbi-exact-body .shop-hero-carousel {
    height: clamp(230px, calc(100dvh - var(--cbi-header-total, 70px)), 430px) !important;
    min-height: clamp(230px, calc(100dvh - var(--cbi-header-total, 70px)), 430px) !important;
    max-height: 430px !important;
  }
}

@media (max-width: 700px) and (orientation: landscape) and (max-height: 420px) {
  body.cbi-exact-body .shop-hero-carousel {
    height: clamp(220px, calc(100dvh - var(--cbi-header-total, 70px)), 330px) !important;
    min-height: clamp(220px, calc(100dvh - var(--cbi-header-total, 70px)), 330px) !important;
    max-height: 330px !important;
  }
}

/* Same ratios as the approved UI, using the visual viewport to avoid browser-bar overlap. */
@supports (height: 100dvh) {
  html body.cbi-exact-body .cbi-paymodal {
    max-height: calc(100dvh - 44px) !important;
  }

  html body.cbi-exact-body .ma__modal-card.ma__modal-address {
    max-height: 88dvh !important;
  }

  html body.cbi-exact-body .ma-od-support-modal__dialog {
    max-height: min(720px, calc(100dvh - 40px)) !important;
  }

  @media (min-width: 821px) {
    html body.cbi-exact-body .cbi-qpay__panel {
      height: min(88dvh, 760px) !important;
      max-height: min(88dvh, 760px) !important;
    }

    html body.cbi-exact-body .cbi-qpay__body {
      height: calc(100% - 84px) !important;
      max-height: none !important;
    }
  }

  @media (max-width: 820px) {
    html body.cbi-exact-body .cbi-qpay__panel {
      max-height: 95dvh !important;
    }

    html body.cbi-exact-body .cbi-qpay__body {
      max-height: calc(95dvh - 78px) !important;
    }

    html body.cbi-exact-body .cbi-qpay__subpanel {
      max-height: 88dvh !important;
    }

    html body.cbi-exact-body .co2__modal-card {
      max-height: 92dvh !important;
    }

    html body.cbi-exact-body .co2__modal-b {
      max-height: calc(92dvh - 80px) !important;
    }
  }

  @media (max-width: 720px) {
    html body.cbi-exact-body .cbi-paymodal {
      max-height: 92dvh !important;
    }
  }

  @media (max-width: 640px) {
    html body.cbi-exact-body .ma__modal-card.ma__modal-address {
      max-height: 92dvh !important;
    }

    html body.cbi-exact-body .ma-od-support-modal__dialog {
      max-height: calc(100dvh - 24px) !important;
    }
  }
}

/* Adds space only on devices that report a home-indicator safe area. */
@media (max-width: 820px) {
  html body.cbi-exact-body .cbi-qpay__body {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.cbi-exact-body .ma__modal-address .ma__modal-b {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 720px) {
  html body.cbi-exact-body .cbi-paymodal-body {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* No visual change: prevent scrolling the page behind an open sheet/modal. */
html body.cbi-exact-body .cbi-qpay__body,
html body.cbi-exact-body .cbi-paymodal,
html body.cbi-exact-body .co2__modal-card,
html body.cbi-exact-body .ma__modal-card,
html body.cbi-exact-body .ma-od-support-modal__dialog {
  overscroll-behavior: contain;
}