/* Responsive visibility/layout contract for catalog enhancements.
   JavaScript builds one shared DOM at every viewport; CSS alone decides
   which desktop-only presentation layers are visible. */

.ir-app--catalog-landing .ir-checkout-side,
.ir-app--catalog-landing .ir-checkout-side-card {
  display: contents;
}

.ir-app--catalog-landing .ir-hero-proof-row {
  display: none;
}

@media (min-width: 900px) {
  .ir-app--catalog-landing #ir-catalog-landing.ir-checkout-layout > .ir-checkout-side {
    display: block;
  }

  .ir-app--catalog-landing .ir-checkout-side-card {
    display: block;
  }

  .ir-app--catalog-landing .ir-hero-proof-row {
    display: flex;
  }

  /* Lower landing sections should follow the same readable content measure as
     checkout/FAQ instead of stretching edge-to-edge on the desktop shell. */
  .ir-app--catalog-landing .ir-related-services {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: 18px auto 0;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .ir-app--catalog-landing .ir-related-services .ir-landing-section-head,
  .ir-app--catalog-landing .ir-related-services .ir-related-grid {
    width: 100%;
    min-width: 0;
  }
}