/* R4.2C: listing/catalog-scoped selectors moved to Listing V2 ownership (mutti-ui-listing-experience-g1-2-v2-0.css). */ /* * MUTTI LAB 2.0 — GLOBAL EXPERIENCE G1.2 * LAPTOP OPTICAL LOCK * * Reference finding from the real laptop photograph: * G1.1's 92vw shell was technically correct but still visually near-full-width, * and the >=1500px breakpoint switched the legacy home commerce band to six * cards too early. G1.2 fixes the optical result, not merely the CSS formula. */ :root{ /* Total outside breathing room grows with viewport. Examples: 1366 -> ~164px total / ~82px each side 1536 -> ~184px total / ~92px each side 1920 -> 1600px cap / 160px each side 2560 -> 1600px cap / 480px each side */ --ml2-g12-shell:min(1600px,calc(100vw - clamp(112px,12vw,320px))); --ml2-g12-grid-x:clamp(14px,1.15vw,19px); --ml2-g12-grid-y:clamp(25px,2vw,32px); --ml2-g12-ear:#ecece8; --ml2-g12-page:#f7f7f4; /* G1/G1.1 remain the compatibility owners. Rebase them onto the locked laptop geometry so Header, Hero, listing and existing home sections share one horizontal axis instead of accumulating competing max-widths. */ --ml2-g11-shell:var(--ml2-g12-shell); --ml2-g1-canvas-max:var(--ml2-g12-shell); --ml2-g1-commerce-max:var(--ml2-g12-shell); } html[data-mutti-theme="dark"],body.mutti-dark-mode{ --ml2-g12-ear:#0b0c0e; --ml2-g12-page:#111214; } /* ------------------------------------------------------------------------- * 1. LAPTOP EARS: INTENTIONAL, NOT DECORATIVE * ------------------------------------------------------------------------- */ @media(min-width:1200px){ body.ml2-global-g1.ml2-global-g1-1.ml2-global-g1-2{ background: linear-gradient( 90deg, var(--ml2-g12-ear) 0, var(--ml2-g12-ear) calc((100vw - var(--ml2-g12-shell))/2), var(--ml2-g12-page) calc((100vw - var(--ml2-g12-shell))/2), var(--ml2-g12-page) calc(100% - ((100vw - var(--ml2-g12-shell))/2)), var(--ml2-g12-ear) calc(100% - ((100vw - var(--ml2-g12-shell))/2)), var(--ml2-g12-ear) 100% )!important; } /* Explicitly restate the common axis. This wins over historical 1440/1600/ 1680 rules while leaving child component layout ownership untouched. */ body.ml2-global-g1-2 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell, body.home.ml2-global-g1-2 main.mutti-home.mutti-v2-home-shell.shell, body.home.ml2-global-g1-2 main.mutti-v2-home-shell .ml2-home-container{ box-sizing:border-box!important; width:var(--ml2-g12-shell)!important; max-width:var(--ml2-g12-shell)!important; min-width:0!important; } body.ml2-global-g1-2 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell, body.home.ml2-global-g1-2 main.mutti-home.mutti-v2-home-shell.shell{ margin-inline:auto!important; } body.home.ml2-global-g1-2 main.mutti-v2-home-shell .ml2-home-container{ left:50%!important; transform:translateX(-50%)!important; margin-inline:0!important; } body.ml2-global-g1-2 header.ml2-header-v21 .mutti-catalog-mega-v9310__panel{ margin-left:max(24px,calc((100vw - var(--ml2-g12-shell))/2 + 188px))!important; width:min(820px,calc(var(--ml2-g12-shell) - 188px))!important; max-width:820px!important; } } /* ------------------------------------------------------------------------- * 2. PRODUCT DENSITY LOCK * Real laptop reference = 5 complete cards. Six begins only when the viewport * has enough physical room that the extra column does not turn commerce copy * into microtext. Never create half-cards to imply more inventory. * ------------------------------------------------------------------------- */ @media(min-width:1680px){ body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:24px var(--ml2-g12-grid-x)!important; } } @media(min-width:1200px) and (max-width:1679px){ body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:23px var(--ml2-g12-grid-x)!important; } } @media(min-width:1000px) and (max-width:1199px){ body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } @media(min-width:800px) and (max-width:999px){ } /* ------------------------------------------------------------------------- * 3. LAPTOP CARD READABILITY * Density comes from fewer columns and controlled canvas, not tiny text. * Preserve hierarchy: price > product name > proof/delivery metadata. * ------------------------------------------------------------------------- */ @media(min-width:1200px){ body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-copy{ padding-top:9px!important; gap:4px!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-price, body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-price .amount, body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-price .woocommerce-Price-amount{ font-size:16px!important; line-height:1.08!important; font-weight:730!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-copy h3, body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-copy h3 a{ font-size:12px!important; line-height:1.34!important; font-weight:560!important; letter-spacing:-.004em!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-stage121-card-rating{ font-size:10.1px!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-stage121-pvz__free{ font-size:10.35px!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-stage121-pvz__eta{ font-size:9.6px!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-ui-card-v2-1 .mutti-market-action--cart-v8524{ min-height:35px!important; height:35px!important; font-size:10px!important; border-radius:10px!important; } } /* ------------------------------------------------------------------------- * 4. COMPLETE-CARD GUARANTEE * This is deliberately redundant with G1/G1.1. It protects the new 5/6 grid * contract against historical width/min-width values inside legacy bands. * ------------------------------------------------------------------------- */ body.home.ml2-global-g1-2 #mutti-market .mutti-market-grid, body.home.ml2-global-g1-2 .mutti-feature-band-v9460__products, body.home.ml2-global-g1-2 .mutti-popular-v9370__storefront, body.home.ml2-global-g1-2 .mutti-popular-v9370__panels, body.home.ml2-global-g1-2 .mutti-popular-v9370__panel{ box-sizing:border-box!important; min-width:0!important; max-width:100%!important; } body.home.ml2-global-g1-2 #mutti-market .mutti-market-grid>.mutti-market-card, body.home.ml2-global-g1-2 .mutti-feature-band-v9460__product, body.home.ml2-global-g1-2 .mutti-feature-band-v9460__product>.mutti-market-card{ box-sizing:border-box!important; min-width:0!important; max-width:100%!important; } /* The moving legacy rail remains a scroll viewport until Homepage 2.0 replaces it. Do not crop it at an ancestor and do not fake a half-card teaser. */ body.home.ml2-global-g1-2 .mutti-popular-v9370__viewport{ max-width:100%!important; min-width:0!important; overflow-x:auto!important; overflow-y:hidden!important; scroll-padding-inline:2px!important; } /* ------------------------------------------------------------------------- * 5. TABLET/MOBILE: NO ARTIFICIAL DESKTOP EARS * These regimes keep their independently composed gutters. * ------------------------------------------------------------------------- */ @media(max-width:1199px){ :root{ --ml2-g12-shell:100vw; --ml2-g11-shell:100vw; } body.ml2-global-g1.ml2-global-g1-1.ml2-global-g1-2{ background:var(--ml2-g12-page)!important; } } @media(prefers-reduced-motion:reduce){ body.ml2-global-g1-2 *{scroll-behavior:auto!important} }