/* R4.2C: listing/catalog-scoped selectors moved to Listing V2 ownership (mutti-ui-listing-experience-g1-v2-0.css). */
/*
 * MUTTI LAB 2.0 — Global Experience G1
 * CONTROLLED CANVAS + COMPATIBILITY BRIDGE
 *
 * Critical migration rule:
 * Existing commerce grids/rails were composed before the controlled-canvas
 * contract. G1 does NOT globally clamp or crop them. New surfaces use the G1
 * canvas; old surfaces retain their proven 1600px/scroll geometry until their
 * own migration stage. This prevents half-cards and accidental side clipping.
 */

:root{
  --ml2-g1-canvas-max:1680px;
  --ml2-g1-commerce-max:1600px;
  --ml2-g1-content-max:1280px;
  --ml2-g1-reading-max:920px;
  --ml2-g1-gutter:clamp(20px,2.5vw,48px);
  --ml2-g1-ear:#f3f3f0;
  --ml2-g1-page:#f7f7f4;
}

html[data-mutti-theme="dark"],body.mutti-dark-mode{
  --ml2-g1-ear:#0d0e10;
  --ml2-g1-page:#111214;
}

/* -------------------------------------------------------------------------
 * 1. GLOBAL CANVAS PRIMITIVES
 * ------------------------------------------------------------------------- */
body.ml2-global-g1{
  background:var(--ml2-g1-page);
}
body.ml2-global-g1 .ml2-canvas,
body.ml2-global-g1 .ml2-canvas--editorial{
  box-sizing:border-box;
  width:min(var(--ml2-g1-canvas-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)));
  max-width:var(--ml2-g1-canvas-max);
  margin-inline:auto;
  min-width:0;
}
body.ml2-global-g1 .ml2-canvas--commerce{
  box-sizing:border-box;
  width:min(var(--ml2-g1-commerce-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)));
  max-width:var(--ml2-g1-commerce-max);
  margin-inline:auto;
  min-width:0;
}
body.ml2-global-g1 .ml2-canvas--content{
  box-sizing:border-box;
  width:min(var(--ml2-g1-content-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)));
  max-width:var(--ml2-g1-content-max);
  margin-inline:auto;
  min-width:0;
}
body.ml2-global-g1 .ml2-canvas--reading{
  box-sizing:border-box;
  width:min(var(--ml2-g1-reading-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)));
  max-width:var(--ml2-g1-reading-max);
  margin-inline:auto;
  min-width:0;
}
body.ml2-global-g1 .ml2-fullbleed{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
@supports(width:100dvw){
  body.ml2-global-g1 .ml2-fullbleed{
    width:100dvw;
    margin-left:calc(50% - 50dvw);
    margin-right:calc(50% - 50dvw);
  }
}

/* -------------------------------------------------------------------------
 * 2. HEADER = EDITORIAL CANVAS OWNER
 * Existing header logic stays authoritative; only geometry is bridged.
 * ------------------------------------------------------------------------- */
body.ml2-global-g1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell{
  box-sizing:border-box!important;
  width:min(var(--ml2-g1-canvas-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)))!important;
  max-width:var(--ml2-g1-canvas-max)!important;
  margin-inline:auto!important;
  min-width:0!important;
}
body.ml2-global-g1 header.ml2-header-v21 .mutti-y9318-main>*{min-width:0}

/* Mega Catalog used a historical 1440px left-offset formula. Align it with
   the new 1680px shell without changing its controller or taxonomy markup. */
@media(min-width:1200px){
  body.ml2-global-g1 header.ml2-header-v21 .mutti-catalog-mega-v9310__panel{
    margin-left:max(var(--ml2-g1-gutter),calc((100vw - var(--ml2-g1-canvas-max))/2 + 188px))!important;
    width:min(820px,calc(100vw - var(--ml2-g1-gutter) - var(--ml2-g1-gutter) - 188px))!important;
    max-width:820px!important;
  }
}

/* Search flyout must never escape the safe viewport edge even when the search
   column grows on an ultrawide screen. */
body.ml2-global-g1 header.ml2-header-v21 .mutti-y9318-search__suggestions.mutti-search-v2-panel{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:min(760px,calc(100vw - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)))!important;
}

/* -------------------------------------------------------------------------
 * 3. HOMEPAGE BRIDGE
 * The historical homepage commerce shell stays at 1600px. New G1/ML2
 * editorial sections may reach 1680px. That 40px-per-side delta is deliberate:
 * it creates a premium editorial frame without changing old card math.
 * ------------------------------------------------------------------------- */
body.home.ml2-global-g1 main.mutti-home.mutti-v2-home-shell.shell{
  box-sizing:border-box!important;
  width:min(var(--ml2-g1-commerce-max),calc(100% - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)))!important;
  max-width:var(--ml2-g1-commerce-max)!important;
  margin-inline:auto!important;
  overflow:visible!important;
  min-width:0!important;
}

/* REDESIGN 02.5 Hero + Intent already opt into a breakout container. Rebase
   that primitive onto the G1 canvas instead of the viewport as an implicit
   design rule. Existing commerce sections below remain untouched. */
body.home.ml2-global-g1 main.mutti-v2-home-shell .ml2-home-container{
  box-sizing:border-box!important;
  width:min(var(--ml2-g1-canvas-max),calc(100vw - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)))!important;
  max-width:var(--ml2-g1-canvas-max)!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  margin-inline:0!important;
  min-width:0!important;
}
@supports(width:100dvw){
  body.home.ml2-global-g1 main.mutti-v2-home-shell .ml2-home-container{
    width:min(var(--ml2-g1-canvas-max),calc(100dvw - var(--ml2-g1-gutter) - var(--ml2-g1-gutter)))!important;
  }
}

/* Compatibility rails: NEVER inherit accidental overflow:hidden from a new
   canvas parent. The viewport remains the only element allowed to clip/scroll
   horizontally; the outer section stays visible. */
body.home.ml2-global-g1 .mutti-popular-v9380,
body.home.ml2-global-g1 .mutti-popular-v9475,
body.home.ml2-global-g1 .mutti-popular-v9476,
body.home.ml2-global-g1 .mutti-popular-v9478,
body.home.ml2-global-g1 .mutti-popular-v9370__storefront,
body.home.ml2-global-g1 .mutti-popular-v9370__panels,
body.home.ml2-global-g1 .mutti-popular-v9370__panel{
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
body.home.ml2-global-g1 .mutti-popular-v9370__viewport{
  box-sizing:border-box!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
body.home.ml2-global-g1 .mutti-popular-v9370__shelf-card,
body.home.ml2-global-g1 .mutti-market-grid>.mutti-market-card{
  min-width:0;
}

/* No global card width/max-width rule exists in G1. This is intentional. */

/* -------------------------------------------------------------------------
 * 4. ARCHIVE / LISTING BRIDGE
 * Listing V2 already follows the correct principle: more columns, not giant
 * cards. Keep its existing 1680px contract and align gutters to G1 only.
 * ------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------
 * 5. WIDE / DESKTOP / TABLET / MOBILE CONTRACT
 * Ears appear only when there is actually spare viewport width. We do not
 * steal commerce width from 1200–1799px desktop just to manufacture them.
 * ------------------------------------------------------------------------- */
@media(min-width:1800px){
  body.ml2-global-g1{
    background:
      linear-gradient(90deg,var(--ml2-g1-ear) 0,var(--ml2-g1-ear) max(0px,calc((100vw - var(--ml2-g1-canvas-max))/2)),var(--ml2-g1-page) max(0px,calc((100vw - var(--ml2-g1-canvas-max))/2)),var(--ml2-g1-page) calc(100% - max(0px,calc((100vw - var(--ml2-g1-canvas-max))/2))),var(--ml2-g1-ear) calc(100% - max(0px,calc((100vw - var(--ml2-g1-canvas-max))/2))),var(--ml2-g1-ear) 100%);
  }
}

@media(max-width:1199px){
  :root{--ml2-g1-gutter:24px}
  body.ml2-global-g1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell,
  body.home.ml2-global-g1 main.mutti-home.mutti-v2-home-shell.shell{
    width:calc(100% - 48px)!important;
  }
  body.home.ml2-global-g1 main.mutti-v2-home-shell .ml2-home-container{
    width:calc(100vw - 48px)!important;
  }
}

@media(max-width:767px){
  :root{--ml2-g1-gutter:16px}
  body.ml2-global-g1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell,
  body.home.ml2-global-g1 main.mutti-home.mutti-v2-home-shell.shell{
    width:calc(100% - 32px)!important;
  }
  body.home.ml2-global-g1 main.mutti-v2-home-shell .ml2-home-container{
    width:calc(100vw - 32px)!important;
  }
  body.ml2-global-g1 header.ml2-header-v21 .mutti-catalog-mega-v9310__panel{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
}

@media(max-width:599px){
  :root{--ml2-g1-gutter:12px}
  body.ml2-global-g1 header.mutti-ui-header-v2.ml2-header-v21 .mutti-y9318-shell,
  body.home.ml2-global-g1 main.mutti-home.mutti-v2-home-shell.shell{
    width:calc(100% - 24px)!important;
  }
  body.home.ml2-global-g1 main.mutti-v2-home-shell .ml2-home-container{
    width:calc(100vw - 24px)!important;
  }
  body.ml2-global-g1 header.ml2-header-v21 .mutti-catalog-mega-v9310__panel{
    width:calc(100% - 24px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.ml2-global-g1 *{scroll-behavior:auto!important}
}