/* Keep scrollbar gutter from first paint — avoids page-wide CLS when app unlocks scrolling */ html { scrollbar-gutter: stable; overflow-y: scroll; } body { overflow-y: hidden; } body:after { display: block; content: ''; position: fixed; inset: 0; background-color: white; z-index: 1000000; } .ready body:after { display: none!important; } .ready body { overflow-y: scroll; } /* Match layout.scss / header.scss before chunk CSS loads. ready.css must load from (not only ScriptIncludes at body end). */ #app { display: flex; flex-direction: column; min-height: 100vh; } #app > header { flex: 0 0 auto; position: sticky; top: -55px; z-index: 1035; background-color: #fff; /* Cap height until app CSS lays out the toolbar — min-height alone cannot shrink stacked FOUC */ height: 107px; overflow: hidden; } #app > main { flex: 1 0 auto; } @media (min-width: 992px) { #app > header { top: 0; height: 123px; } } .ready #app > header { height: auto; min-height: 107px; overflow: visible; } @media (min-width: 992px) { .ready #app > header { min-height: 123px; } } /* Avoid CLS: undefined Vue custom elements are display:inline until hydrated */ c-product-variant-loader, c-product-images, c-read-more, c-product-sticky-basket, c-breadcrumb, .product-variant-loader { display: block; width: 100%; } /* Breadcrumb wraps tall before base-layout CSS; hydration shrink (~133→69) pulled PDP up */ c-breadcrumb, .product-loader > .breadcrumb, nav[aria-label] .breadcrumb { min-height: 69px; } /* Vue briefly empties c-product-variant-loader (product ~286→900). Floor the SSR wrapper only (~above-fold), not entire article (avoids empty gaps on simple PDPs like chair/cushion/plate). */ c-product-variant-loader, .product-variant-loader { min-height: 420px; } @media (min-width: 992px) { c-product-variant-loader, .product-variant-loader { min-height: 480px; } } /* PDP reserves for ALL product types (not umbrella-only): gallery + buy-box shell. Avoid huge article floors that leave empty space on simple PDPs (chair, cushion, plate, etc.). */ @media (min-width: 992px) { /* Critical bootstrap-like 2-col for gallery | buy-box before chunk CSS */ .product-header > .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .product-header > .row > .col-lg-7, .product-header > .row > .col-lg-5 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .product-header > .row > .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; } .product-header > .row > .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .product-header { min-height: 460px; } } /* Keep gallery height reserved across Vue mount (SSR hero is wiped on hydrate) */ c-product-images, .product-images { min-height: 280px; } @media (min-width: 992px) { c-product-images, .product-images { /* main image (~360) + optional thumbnail strip */ min-height: 420px; } } c-product-images > img.product-images-ssr-hero { display: block; width: 100%; height: auto; aspect-ratio: 635 / 360; max-width: 100%; } /* Soft reserve — variants/config block (simple PDPs stay modest) */ .product-configurations.header-section { min-height: 48px; } /* Reserve space while Schirm configurator chunk waits for idle / interaction */ .product-configurator-placeholder, .deferred-product-configurator { display: block; width: 100%; min-height: 160px; } /* Reserve logo box before base-layout CSS/chunk arrives */ .header-logo { width: 86px; height: 96px; } .header-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }