/* R4.2C: listing/catalog-scoped selectors moved to Listing V2 ownership (mutti-ui-listing-experience-g1-1-v2-0.css). */ /* * MUTTI LAB 2.0 — GLOBAL EXPERIENCE G1.1 * LAPTOP EARS + COMMERCE DENSITY REBALANCE * * G1 proved the compatibility bridge. G1.1 locks the actual design rule: * controlled whitespace begins on laptop-class desktop viewports instead of * waiting for ultrawide monitors. The shell is fluid (92vw) and capped at * 1640px, so the outer ears are always proportional before the cap and grow * naturally afterwards. */ :root{ --ml2-g11-shell:min(1640px,92vw); --ml2-g11-ear:#efefec; --ml2-g11-page:#f7f7f4; --ml2-g11-grid-x:clamp(13px,1.05vw,20px); --ml2-g11-grid-y:clamp(24px,2vw,32px); /* Rebase G1 primitives instead of inventing a second shell owner. */ --ml2-g1-canvas-max:var(--ml2-g11-shell); --ml2-g1-commerce-max:var(--ml2-g11-shell); } html[data-mutti-theme="dark"],body.mutti-dark-mode{ --ml2-g11-ear:#0c0d0f; --ml2-g11-page:#111214; } /* ------------------------------------------------------------------------- * 1. EARS START ON LAPTOP DESKTOP * ------------------------------------------------------------------------- */ @media(min-width:1200px){ body.ml2-global-g1.ml2-global-g1-1{ background: linear-gradient( 90deg, var(--ml2-g11-ear) 0, var(--ml2-g11-ear) calc((100vw - var(--ml2-g11-shell))/2), var(--ml2-g11-page) calc((100vw - var(--ml2-g11-shell))/2), var(--ml2-g11-page) calc(100% - ((100vw - var(--ml2-g11-shell))/2)), var(--ml2-g11-ear) calc(100% - ((100vw - var(--ml2-g11-shell))/2)), var(--ml2-g11-ear) 100% )!important; } body.ml2-global-g1-1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell, body.home.ml2-global-g1-1 main.mutti-home.mutti-v2-home-shell.shell, body.home.ml2-global-g1-1 main.mutti-v2-home-shell .ml2-home-container{ box-sizing:border-box!important; width:var(--ml2-g11-shell)!important; max-width:var(--ml2-g11-shell)!important; min-width:0!important; } body.ml2-global-g1-1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell, body.home.ml2-global-g1-1 main.mutti-home.mutti-v2-home-shell.shell{ margin-inline:auto!important; } body.home.ml2-global-g1-1 main.mutti-v2-home-shell .ml2-home-container{ left:50%!important; transform:translateX(-50%)!important; margin-inline:0!important; } /* Mega Catalog follows the same fluid shell instead of the old 1440/1680 arithmetic. Controller/markup stays untouched. */ body.ml2-global-g1-1 header.ml2-header-v21 .mutti-catalog-mega-v9310__panel{ margin-left:max(24px,calc((100vw - var(--ml2-g11-shell))/2 + 188px))!important; width:min(820px,calc(var(--ml2-g11-shell) - 188px))!important; max-width:820px!important; } } /* ------------------------------------------------------------------------- * 2. LISTING DENSITY: 5 LAPTOP / 6 DESKTOP-WIDE * The old 7-column wide layout was technically efficient but visually too * catalogue-dense for MUTTI's richer decision cards. Five/six columns gives * useful overview without making the cards poster-sized. * ------------------------------------------------------------------------- */ @media(min-width:1500px){ } @media(min-width:1200px) and (max-width:1499px){ } @media(min-width:1000px) and (max-width:1199px){ } @media(min-width:800px) and (max-width:999px){ } /* ------------------------------------------------------------------------- * 3. LISTING CARD TYPOGRAPHY: LESS TINY, LESS NOISY * We do not shrink text to force density. The visual compactness comes from * controlled canvas, fewer columns and tighter rhythm; core purchase signals * get a small readability lift. * ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * 4. HOMEPAGE HORIZONTAL PRODUCT RAIL * Existing rail had ~142–164px cards and could show a very large number at * once. We reduce simultaneous visual competition without touching the loop * controller. Dynamic JS measures actual offsets, so the width change is safe. * ------------------------------------------------------------------------- */ @media(min-width:1200px) and (max-width:1499px){ body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card{ flex-basis:clamp(188px,14vw,202px)!important; width:clamp(188px,14vw,202px)!important; } } @media(min-width:1500px) and (max-width:1799px){ body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card{ flex-basis:clamp(204px,13.5vw,220px)!important; width:clamp(204px,13.5vw,220px)!important; } } @media(min-width:1800px){ body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card{ flex-basis:224px!important; width:224px!important; } } body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__rail{ gap:12px!important; } body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-price, body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-price .amount, body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-price .woocommerce-Price-amount{ font-size:14.4px!important; line-height:1.08!important; } body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-copy h3, body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-copy h3 a{ font-size:11px!important; line-height:1.32!important; font-weight:540!important; } body.home.ml2-global-g1-1 .mutti-popular-v9476 .mutti-popular-v9370__shelf-card .mutti-market-action--cart-v8524{ min-height:32px!important; height:32px!important; font-size:9.4px!important; } /* ------------------------------------------------------------------------- * 5. LEGACY HOME COMMERCE BANDS: DENSITY ADAPTATION TO THE NEW SHELL * The Tools band previously reached 7–9 tiny columns. Keep the component for * now, but make its density compatible with the new premium canvas until the * Homepage 2.0 replacement is built. * ------------------------------------------------------------------------- */ @media(min-width:1500px){ body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:22px 14px!important; } } @media(min-width:1200px) and (max-width:1499px){ body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:21px 13px!important; } } @media(min-width:901px) and (max-width:1199px){ body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__products{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-market-copy h3, body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-market-copy h3 a{ font-size:11px!important; line-height:1.31!important; } body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-market-price, body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-market-price .amount, body.home.ml2-global-g1-1 #mutti-market .mutti-feature-band-v9460--tools .mutti-feature-band-v9460__product .mutti-market-price .woocommerce-Price-amount{ font-size:14px!important; } /* ------------------------------------------------------------------------- * 6. NO-CROP GUARANTEES * Grids may never create a horizontal page overflow. Rails keep clipping only * at their own intentional motion viewport; no ancestor gains a hidden crop. * ------------------------------------------------------------------------- */ body.home.ml2-global-g1-1 #mutti-market .mutti-market-grid, body.home.ml2-global-g1-1 .mutti-feature-band-v9460__products, body.home.ml2-global-g1-1 .mutti-popular-v9370__storefront, body.home.ml2-global-g1-1 .mutti-popular-v9370__panels, body.home.ml2-global-g1-1 .mutti-popular-v9370__panel{ min-width:0!important; max-width:100%!important; } body.home.ml2-global-g1-1 #mutti-market .mutti-market-grid>.mutti-market-card, body.home.ml2-global-g1-1 .mutti-feature-band-v9460__product, body.home.ml2-global-g1-1 .mutti-feature-band-v9460__product>.mutti-market-card{ min-width:0!important; max-width:100%!important; } /* Tablet/mobile remain separately composed. No artificial desktop ears. */ @media(max-width:1199px){ :root{--ml2-g11-shell:100vw} body.ml2-global-g1.ml2-global-g1-1{background:var(--ml2-g11-page)!important} } @media(max-width:619px){ }