/* Critical first-paint rules for catalog landing. Loaded from so the checkout never paints as a stretched single column before catalog-order-flow.js enhances it. Scoped to catalog pages only. */ /* The legacy comparison table is intentionally out of the purchase flow. Hide both the server-rendered table and the later JS wrapper from frame 1. */ .ir-app--catalog-landing #services-table, .ir-app--catalog-landing .ir-service-compare-details, .ir-app--catalog-landing [data-service-compare-details], .ir-app--catalog-landing .ir-service-support-section--compare, .ir-app--catalog-landing [data-ir-visible-support="compare"] { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } @media (min-width: 900px) { /* Match the final desktop shell before any catalog JS runs. */ .ir-app.ir-app--catalog-landing { width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } .dark .ir-app.ir-app--catalog-landing { background: #111827 !important; } /* Breadcrumb sits between the white navbar and the light-gray landing body. Paint the strip with the landing background so there is no full-width white band behind the breadcrumb card. */ .ir-app--catalog-landing .ir-breadcrumb-nav { background: #f7f8fa !important; } .dark .ir-app--catalog-landing .ir-breadcrumb-nav { background: #111827 !important; } .ir-app--catalog-landing > nav:first-child { width: 100%; } .ir-app--catalog-landing > nav:first-child .ir-navbar-inner { width: min(1180px, calc(100% - 48px)) !important; max-width: 1180px !important; margin-inline: auto !important; } .ir-app--catalog-landing > main { width: 100% !important; max-width: none !important; margin: 0 !important; } .ir-app--catalog-landing .ir-landing-hero { width: min(1180px, calc(100% - 48px)) !important; max-width: 1180px !important; margin-inline: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .ir-app--catalog-landing #order-form { width: min(1180px, calc(100% - 48px)) !important; max-width: 1180px !important; min-height: 0 !important; height: auto !important; margin-inline: auto !important; padding-inline: 0 !important; } /* Use the final two-column geometry from the very first paint. */ .ir-app--catalog-landing #ir-catalog-landing { direction: rtl; display: grid !important; grid-template-columns: minmax(0, 1fr) 326px !important; grid-auto-rows: max-content !important; gap: 24px !important; align-items: start !important; align-content: start !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .ir-app--catalog-landing #ir-catalog-landing > .ir-order-card__body { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; min-height: 0 !important; align-self: start !important; } /* Before JS wraps the summary/footer, keep them out of the main form column. They are hidden only for this very short pre-enhancement state, preventing a full-width flash while preserving the form's final width. */ .ir-app--catalog-landing #ir-catalog-landing:not(.ir-checkout-layout) > .ir-order-summary--landing, .ir-app--catalog-landing #ir-catalog-landing:not(.ir-checkout-layout) > .ir-order-card__footer, .ir-app--catalog-landing #ir-catalog-landing:not(.ir-checkout-layout) > [data-c03-gift-preview] { grid-column: 2 !important; visibility: hidden !important; pointer-events: none !important; } /* The old span-10 placement can create a tall implicit grid even after the comparison block is hidden. The checkout has one real top row. */ .ir-app--catalog-landing #ir-catalog-landing.ir-checkout-layout > .ir-checkout-side { grid-row: 1 !important; min-height: 0 !important; height: auto !important; align-self: start !important; } .ir-app--catalog-landing #ir-catalog-landing.ir-checkout-layout > .ir-order-card__body { grid-row: 1 !important; } .ir-app--catalog-landing .ir-checkout-side, .ir-app--catalog-landing .ir-checkout-side-card { min-height: 0 !important; height: auto !important; } }