/* ═══════════════════════════════════════════════════════════════════════════
   COREVERSE V70 — MOBILE PERFORMANCE

   The stutter on phones came from three compounding costs:

   1. `backdrop-filter` appears 35 times across the stylesheets. Each instance
      forces the compositor to re-sample everything painted behind the element
      on every frame. On mobile GPUs this is the single most expensive thing
      on the page, and stacked instances multiply.
   2. Every section is painted and laid out on load even though only one is on
      screen, so first paint carries the whole document.
   3. Decorative transforms/animations keep running while off screen.

   This file is loaded LAST so its overrides win, and everything inside is
   gated behind a mobile media query — desktop keeps the full glass treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:820px){

  /* ── 1. Trade blur for opacity ─────────────────────────────────
     Frosted panels become flat translucent panels. Visually near-identical at
     phone scale, but removes the per-frame backdrop re-sample entirely.

     The kill switch is a universal selector on purpose. `backdrop-filter` is
     declared in six different stylesheets across ~28 rules, and enumerating
     them by hand guarantees that the next new rule slips through. One
     property, matched once at parse time, is cheap — far cheaper than a
     single missed blur repainting every frame of a scroll.

     Elements that leaned on the blur for legibility get an explicit opaque
     background immediately below. */
  *,*::before,*::after{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Backgrounds restored for surfaces that relied on the blur to separate
     themselves from whatever scrolled underneath. */
  .glass,.glass-soft{background:rgba(255,255,255,.9) !important}
  .glass-strong{background:rgba(255,255,255,.95) !important}
  .nav{background:rgba(255,255,255,.9) !important}
  .nav--solid{background:rgba(255,255,255,.97) !important}
  .nav__menu{background:rgba(255,255,255,.98) !important}
  .nav__language{background:rgba(255,255,255,.9) !important}
  .mobile-action-bar{background:rgba(255,255,255,.96) !important}
  .btn{background-color:rgba(255,255,255,.9)}
  .btn--chrome,.btn--ghost,.btn--pill{background-color:initial}
  .veil{background:rgba(255,255,255,.72) !important}
  .tryon__mode,.tryon__source{background:rgba(255,255,255,.92) !important}
  #tryon .tryon__panel,#tryon .tryon__product{background:rgba(255,255,255,.92) !important}
  .promo__nav{background:rgba(255,255,255,.92) !important}
  .drop__latest-card-index{background:rgba(255,255,255,.82) !important}
  .catalog-lace .catalog-tools{background:rgba(255,255,255,.92) !important}
  /* The caption chip was a white frosted pill with dark text. Removing the
     blur left it needing an opaque plate — painting it dark instead left dark
     text on a dark chip, which is how it shipped in V70. Back to white. */
  .custom-guide__page figcaption{
    background:rgba(255,255,255,.94) !important;
    border-color:rgba(20,20,25,.14) !important;
    color:#141419;
  }
  .admin__scrim{background:rgba(12,12,15,.6) !important}
  .admin__panel{background:#fff !important}
  .catalog-dialog::backdrop,
  .price-image-dialog::backdrop{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(12,12,15,.72) !important;
  }

  /* ── 2. Skip layout + paint for off-screen sections ──────────────────────
     `content-visibility:auto` lets the browser defer work for anything below
     the fold. `contain-intrinsic-size` reserves a plausible box so the
     scrollbar doesn't jump as sections come into view.

     The hero, the scroll-driven story, and any position:sticky region are
     excluded on purpose — containment breaks sticky positioning and would
     stall the scroll-linked animation. */
  /* #custom is deliberately absent: it contains a horizontal scroll rail whose
     off-screen page would be laid out inside a skipped subtree. */
  #drop,
  #catalog,
  #how-to-order,
  #clientArchive,
  #promo,
  #queue,
  #price,
  #sizeguide,
  .footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }

  /* ── 3. Stop decorative motion the user cannot see ───────────────────────
     Parallax/tilt/float loops on phones cost frames without reading as motion
     on a small viewport. */
  .tilt{transform:none !important}
  .drop__loop-track{animation-play-state:running}
  .magnetic{transform:none !important}
  .footer__cd{animation:none !important}

  /* `will-change` promotes a layer permanently and eats GPU memory. Keep it
     only where an animation is genuinely in flight. */
  .hero-mobile-layer,
  .letter-mobile__layer,
  .drop__latest-card,
  .quick__card{will-change:auto !important}

  /* Shadows with large blur radii are re-rasterised on scroll. */
  .glass,.glass-soft,.queue-shell,.price-panel,.quick__card{
    box-shadow:0 10px 26px -14px rgba(20,22,30,.18) !important;
  }

  /* ── 4. Media decode hints ─────────────────────────────────────────────
     NOTE (fixed in V71): this block used to carry `img,video{content-visibility:auto}`.
     That was wrong. `content-visibility:auto` makes an off-screen element skip
     layout, and with no `contain-intrinsic-size` the browser sizes it as EMPTY
     — so an <img> outside the viewport collapsed to height 0 and never grew
     back. The custom-order guide sits in a horizontal scroller, so its second
     page was always off-screen and always collapsed: the guide looked like it
     had vanished on mobile.

     Deferring whole sections (block 2 above) already provides the win; images
     do not need it, and native `loading="lazy"` handles their fetch cost. */
  .hero-v44__video{
    /* The hero clip is the one video allowed to composite freely. */
    content-visibility:visible;
    will-change:transform;
  }
}

/* ── 5. Very small / low-power phones ─────────────────────────────────────── */
@media (max-width:480px){
  /* Nested scroll containers plus transforms are the worst case; flatten. */
  .story-v45__canvas{will-change:auto}
  .drop__latest-card img{image-rendering:auto}
}

/* ── 6. Respect the OS setting ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── 7. Data Saver ────────────────────────────────────────────────────────
   Paired with the JS guard, which adds `.is-save-data` to <html>. */
html.is-save-data .hero-v44__video{display:none}
html.is-save-data .hero-v44{
  background-image:var(--v70-hero-poster);
  background-size:cover;
  background-position:center;
}

/* ══════════════════════════════════════════════════════════════════════════
   V71 — GUIDE RAIL LAYOUT RESERVATION  (all viewports)

   Root cause of "the guide disappeared on mobile": the two guide images are
   `loading="lazy"` and carried no width/height attributes, so before the file
   arrived they had no intrinsic size and the <figure> collapsed to 0 height.
   The second page lives off-screen in a horizontal scroller, so it was never
   eagerly fetched and stayed collapsed — on desktop too.

   The images now declare width/height in the HTML. This aspect-ratio is the
   belt-and-braces version: it holds the box open even if the attributes are
   ever dropped or the file 404s.
   ══════════════════════════════════════════════════════════════════════════ */
.custom-guide__page{min-height:120px}
.custom-guide__page img{aspect-ratio:1080/1920;height:auto;width:100%}