/* Liquid glass on phones: one clear material for every layer that floats over content — the
   shell bars, controls that sit on photos, chips, sheets and toasts. Copy, forms and product
   photos stay on solid paper so they read first. Desktop keeps its own solid surfaces: every
   rule below sits under the 860px phone breakpoint. js/glass.js adds the light that gathers
   under a finger, the drop that flows to the selected tab, a rim highlight that glides as
   the page scrolls and, on Chromium, real refraction at the shell's edges. Less transparency
   or more contrast turns the glass solid. */

@property --lg-glow { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --lg-ease: cubic-bezier(.16, 1, .3, 1);
  --lg-blur: 5px;
  --lg-sat: 230%;
  /* Clear glass: a light blur, with colour turned up rather than washed out, so whatever is behind
     reads vivid through it. The rims, not a milky fill, are what make it read as glass. */
  --lg-backdrop: blur(var(--lg-blur)) saturate(var(--lg-sat)) contrast(1.04);
  /* Fills: regular carries controls, thick holds sheets. */
  --lg-regular: rgb(255 255 255 / 22%);
  --lg-thick: rgb(252 251 247 / 90%);
  --lg-ink: rgb(31 34 29 / 74%);
  --lg-accent: oklch(84% 0.175 90 / 88%);
  --lg-green: oklch(44% 0.085 157 / 88%);
  /* A thin specular band across the top, where the light lands. */
  --lg-sheen: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 0%) 42%);
  /* Light falls from the top-left: a bright rim there, a softer one opposite, a hairline all round. */
  --lg-rim: inset 1px 1.5px 0 rgb(255 255 255), inset -1px -1px 0 rgb(255 255 255 / 60%), inset 0 0 0 .5px rgb(255 255 255 / 70%);
  --lg-rim-tint: inset 1px 1.5px 0 rgb(255 255 255 / 85%), inset -1px -1px 0 rgb(255 255 255 / 40%), inset 0 0 0 .5px rgb(255 255 255 / 40%);
  --lg-rim-dark: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(255 255 255 / 12%), inset 0 0 0 .5px rgb(255 255 255 / 16%);
  /* Thickness: a little light pools inside the edge and the lower lip is a shade deeper. */
  --lg-depth: inset 0 0 10px rgb(255 255 255 / 22%), inset 0 -8px 14px -12px rgb(80 64 20 / 14%);
  --lg-edge: 0 0 0 .5px rgb(40 34 18 / 12%);
  /* A crisp light line just outside the rim; the tinted actions glow in their own colour. */
  --lg-halo: 0 0 0 .5px rgb(255 255 255 / 55%);
  --lg-bloom: 0 0 18px -4px oklch(84% 0.19 88 / 70%);
  /* Clear glass lets busy photos through, so ink icons and labels carry a faint light edge. */
  --lg-text-glow: 0 0 1px rgb(255 255 255 / 90%), 0 0 6px rgb(255 255 255 / 70%);
  --lg-icon-glow: drop-shadow(0 0 1px rgb(255 255 255 / 90%)) drop-shadow(0 0 4px rgb(255 255 255 / 60%));
  --lg-lift: 0 1px 2px rgb(40 34 18 / 6%), 0 8px 22px -12px rgb(40 34 18 / 26%);
  --lg-float: 0 1px 2px rgb(40 34 18 / 7%), 0 4px 12px -6px rgb(40 34 18 / 12%), 0 20px 46px -16px rgb(40 34 18 / 34%);
  /* The light js/glass.js gathers under a finger. */
  --lg-light: radial-gradient(circle at var(--lg-x, 50%) var(--lg-y, 50%), rgb(255 255 255 / calc(var(--lg-glow, 0) * 1)), rgb(255 255 255 / calc(var(--lg-glow, 0) * .35)) 38%, transparent 72%);
}

/* The selection drop exists on every width; only phones show it. */
.lg-drop { display: none; }

@media (max-width: 860px) {
  /* ─── Ambient light ───────────────────────────────────────────────────────
     Glass needs something to bend. Shopper pages sit on paper lit by a warm tape-yellow glow
     and a quiet green one; product photos do the rest as they scroll under the bars. */
  html:has(> body.app-page) { background: var(--app-paper, oklch(98.2% 0.006 85)); }
  body.app-page { background: transparent; }
  body.app-page::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(72vmax 48vmax at 8% -6%, oklch(92% 0.13 92 / 85%), transparent 62%),
      radial-gradient(60vmax 42vmax at 108% 34%, oklch(90% 0.08 160 / 70%), transparent 64%),
      radial-gradient(66vmax 46vmax at 20% 112%, oklch(91% 0.09 65 / 70%), transparent 66%);
  }

  /* ─── Regular glass: controls ───────────────────────────────────────────── */
  /* Plain selector lists, not :is(), so each control keeps its own weight and the overrides below still apply. */
  .app-icon-button, .save-button, .preferences-link, .load-more, .c-button.secondary, .catalog-collection,
  .rail-step, .action-wish, .pt-close, .pt-secondary, .lang-btn, .btn-ghost, .main-search-field, .hero-actions .hero-tryon-action,
  .catalog-rail .category-tabs button, .catalog-rail .catalog-filter-details > summary, .catalog-rail .gender-tabs {
    border-color: transparent;
    background-color: var(--lg-regular);
    background-image: var(--lg-light), var(--lg-sheen);
    box-shadow: var(--lg-rim), var(--lg-depth), var(--lg-edge), var(--lg-halo), var(--lg-lift);
    -webkit-backdrop-filter: var(--lg-backdrop);
    backdrop-filter: var(--lg-backdrop);
  }
  /* On photos the glass clears so the piece shows through; a deeper shadow lifts it off busy prints. */
  .save-button {
    background-color: rgb(255 255 255 / 30%);
    box-shadow: var(--lg-rim), var(--lg-depth), 0 0 0 .5px rgb(40 34 18 / 14%), 0 6px 16px -6px rgb(30 26 14 / 38%);
  }
  /* Ink icons and labels on clear glass keep a faint light edge so busy photos never swallow them. */
  .app-tabbar a, .save-button, .app-icon-button:not([aria-current="page"]), .action-wish, .product-action-bar .action-store,
  .catalog-rail .category-tabs button:not([aria-pressed="true"]), .catalog-rail .gender-tabs button:not([aria-pressed="true"]),
  .catalog-rail .catalog-filter-details > summary { text-shadow: var(--lg-text-glow); }
  :is(.app-tabbar a, .save-button, .app-icon-button:not([aria-current="page"]), .action-wish, .product-action-bar .action-store,
    .catalog-rail .catalog-filter-details > summary) > svg,
  .app-tabbar .app-tab-icon > svg { filter: var(--lg-icon-glow); }
  /* Segmented controls hold their own selection drop, so their buttons are bare. */
  .catalog-rail .gender-tabs { padding: 3px; }
  .catalog-rail .gender-tabs button { position: relative; z-index: 1; background: transparent; box-shadow: none; }

  /* ─── Tinted glass: the tape-yellow actions ─────────────────────────────── */
  .c-button.primary, .btn-tape, .customer-flow .btn-tape, .pt-primary, .product-actions .piece-tryon-button, .hero-actions .hero-upload-action {
    border-color: transparent;
    background-color: var(--lg-accent);
    background-image: var(--lg-light), linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 45%);
    box-shadow: var(--lg-rim-tint), inset 0 -10px 18px -12px rgb(150 105 0 / 26%), 0 0 0 .5px rgb(130 96 0 / 20%), var(--lg-bloom), 0 10px 24px -12px rgb(150 105 0 / 50%);
    -webkit-backdrop-filter: blur(4px) saturate(200%);
    backdrop-filter: blur(4px) saturate(200%);
  }
  .product-actions .piece-tryon-button { background-color: oklch(84% 0.175 90 / 86%); }

  /* ─── Ink glass: dark actions, toasts and labels on photos ──────────────── */
  .dark-button, .btn-ink, .toast, .filter-sheet-done, .gallery-count, .catalog-collection[aria-pressed="true"],
  .app-icon-button[aria-current="page"] {
    border-color: transparent;
    background-color: var(--lg-ink);
    background-image: var(--lg-light), linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 50%);
    box-shadow: var(--lg-rim-dark), inset 0 0 12px rgb(255 255 255 / 8%), 0 0 0 .5px rgb(0 0 0 / 30%), var(--lg-lift);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
  .toast { border-radius: 999px; padding: 12px 22px; box-shadow: var(--lg-rim-dark), 0 0 0 .5px rgb(0 0 0 / 30%), var(--lg-float); }
  .on-ink .btn-ghost {
    background-color: rgb(255 255 255 / 10%);
    box-shadow: var(--lg-rim-dark), 0 0 0 .5px rgb(255 255 255 / 12%), 0 0 18px -4px rgb(255 255 255 / 18%), 0 8px 24px -14px rgb(0 0 0 / 60%);
  }

  /* Studio keeps its deep green, as tinted glass. */
  .personal-studio-intro-actions .btn {
    border-color: transparent;
    background-color: rgb(25 63 50 / 90%);
    background-image: var(--lg-light), linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 55%);
    box-shadow: var(--lg-rim-dark), inset 0 0 12px rgb(255 255 255 / 8%), 0 0 0 .5px rgb(0 0 0 / 25%), 0 0 20px -4px oklch(45% 0.06 157 / 50%), 0 10px 24px -12px rgb(25 63 50 / 60%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }

  /* ─── Green glass: chosen chips ─────────────────────────────────────────── */
  .catalog-rail .category-tabs button[aria-pressed="true"] {
    background-color: var(--lg-green);
    background-image: var(--lg-light), linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 55%);
    box-shadow: var(--lg-rim-dark), inset 0 0 12px rgb(255 255 255 / 10%), 0 0 0 .5px rgb(0 0 0 / 20%), 0 0 18px -4px oklch(45% 0.06 157 / 55%), 0 8px 20px -12px oklch(40% 0.047 157 / 70%);
  }

  /* ─── Selection drop (js/glass.js) ──────────────────────────────────────────
     One bright bead of glass sits under the chosen tab or segment and flows to the next one.
     It moves by transform alone, so the flow stays on the compositor. Without the script the
     selected item keeps its own fill. */
  .lg-drop {
    display: block; position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; z-index: 0; pointer-events: none;
    border-radius: 999px; will-change: translate, transform;
    background-color: rgb(255 255 255 / 55%);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 45%), rgb(255 255 255 / 0%) 50%);
    box-shadow: var(--lg-rim), inset 0 -6px 12px -8px rgb(80 64 20 / 16%), 0 0 0 .5px rgb(40 34 18 / 10%), 0 4px 14px -6px rgb(40 34 18 / 26%);
    transition: opacity .3s ease, scale .5s var(--lg-ease), background-color .4s ease, box-shadow .4s ease;
  }
  .lg-drop.is-empty { opacity: 0; }
  .has-drop > :not(.lg-drop) { position: relative; z-index: 1; }
  .catalog-rail .gender-tabs.has-drop button[aria-pressed="true"] { background: transparent; color: var(--c-paper); }
  .catalog-rail .gender-tabs .lg-drop {
    background-color: var(--lg-green); background-image: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 60%);
    box-shadow: var(--lg-rim-dark), 0 0 0 .5px rgb(0 0 0 / 20%), 0 0 16px -2px oklch(45% 0.06 157 / 55%), 0 6px 16px -8px oklch(40% 0.047 157 / 70%);
  }

  /* ─── Shell: a header with a scroll edge ────────────────────────────────── */
  .app-header {
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: transform .5s var(--lg-ease);
  }
  /* Content fades and blurs as it slides under the header, the way iOS softens a scroll edge. */
  .app-header::before {
    content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in oklch, var(--app-paper) 92%, transparent), color-mix(in oklch, var(--app-paper) 70%, transparent) 62%, color-mix(in oklch, var(--app-paper) 0%, transparent));
    -webkit-backdrop-filter: blur(10px) saturate(200%);
    backdrop-filter: blur(10px) saturate(200%);
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
    mask-image: linear-gradient(180deg, #000 68%, transparent);
    opacity: 0; transition: opacity .45s ease;
  }
  .app-header.is-scrolled::before { opacity: 1; }
  .app-icon-button {
    border: 0;
    -webkit-backdrop-filter: var(--lg-bend-button,) var(--lg-backdrop);
    backdrop-filter: var(--lg-bend-button,) var(--lg-backdrop);
  }

  /* ─── Sticky rail: chips float on a softened edge, in step with the header ── */
  .catalog-rail { z-index: 61; background: transparent; border-bottom-color: transparent; transition: top .5s var(--lg-ease); }
  .catalog-rail::before {
    content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in oklch, var(--app-paper) 82%, transparent), color-mix(in oklch, var(--app-paper) 55%, transparent) 70%, color-mix(in oklch, var(--app-paper) 0%, transparent));
    -webkit-backdrop-filter: blur(10px) saturate(200%);
    backdrop-filter: blur(10px) saturate(200%);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .catalog-rail .catalog-filter-bar { padding-block: 4px 8px; margin-block: -4px -8px; }
  .catalog-rail .category-tabs button { border: 0; }

  /* ─── Sheets: thick glass, so the page stays a presence behind them ─────── */
  .piece-tryon, .product-link-modal {
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
  }
  .pt-dialog, .pl-dialog {
    background-color: var(--lg-thick);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 0%) 120px);
    box-shadow: var(--lg-rim), 0 0 0 .5px rgb(40 34 18 / 12%), 0 30px 90px -20px rgb(20 18 10 / 45%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
  }
  .pt-header, .pl-header, .filter-sheet-head {
    background: color-mix(in oklch, var(--c-paper, #faf9f5) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border-bottom-color: rgb(40 34 18 / 8%);
  }
  .pt-button, .pt-close { border-radius: 999px; }
  /* An open sheet's scrim is fixed to the viewport; backdrop-filter would make its summary the
     containing block and shrink the scrim to a square, so the summary drops its glass while open. */
  .catalog-rail .catalog-filter-details[open] > summary { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .catalog-filter-details[open] > summary::before {
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
  }
  .catalog-filter-details[open] > .catalog-filter-content {
    background-color: var(--lg-thick);
    box-shadow: var(--lg-rim), 0 0 0 .5px rgb(40 34 18 / 12%), 0 -20px 60px -20px rgb(20 18 10 / 40%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
  }
  @media (max-width: 600px) {
    .pt-dialog, .pl-dialog { border-radius: 28px 28px 0 0 !important; }
  }

  /* ─── Product page and outfit builder bars float above the content ─────── */
  .product-action-bar {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, calc(env(safe-area-inset-bottom) - 6px));
    padding: 8px; border: 0; border-radius: 28px;
    background-color: var(--lg-regular);
    background-image: var(--lg-sheen);
    box-shadow: var(--lg-rim), var(--lg-depth), var(--lg-edge), var(--lg-halo), var(--lg-float);
    -webkit-backdrop-filter: var(--lg-bend-action,) var(--lg-backdrop);
    backdrop-filter: var(--lg-bend-action,) var(--lg-backdrop);
  }
  .product-action-bar :is(.detail-tryon, .action-store, .action-wish) { border-radius: 999px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body[data-view="product"] .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .outfit-builder .editor-actions {
    bottom: calc(88px + env(safe-area-inset-bottom)); margin-inline: -8px; border: 0; border-radius: 24px;
    background-color: var(--lg-regular); background-image: var(--lg-sheen);
    box-shadow: var(--lg-rim), var(--lg-edge), var(--lg-halo), var(--lg-float);
    -webkit-backdrop-filter: var(--lg-backdrop);
    backdrop-filter: var(--lg-backdrop);
  }

  /* A highlight runs round the floating bars' rims and glides as the page scrolls (js/glass.js sets the angle). */
  .app-tabbar::after, .product-action-bar::after {
    content: ""; position: absolute; inset: 0; z-index: 2; padding: 1.2px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--lg-angle, 135deg), rgb(255 255 255 / 0%), rgb(255 255 255) 10%, rgb(255 255 255 / 0%) 26%,
      rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 75%) 60%, rgb(255 255 255 / 0%) 76%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* ─── Sizing and account flows: capsule glass buttons, glass options ─────── */
  .customer-flow .btn { border-radius: 999px; }
  .customer-flow .btn-ghost, .customer-flow .finder .chip, .customer-flow .finder .seg, .customer-flow .big-opt, .customer-flow .shape-opt {
    border-color: transparent;
    background-color: var(--lg-regular);
    background-image: var(--lg-light), var(--lg-sheen);
    box-shadow: var(--lg-rim), var(--lg-depth), var(--lg-edge), var(--lg-halo), var(--lg-lift);
    -webkit-backdrop-filter: var(--lg-backdrop);
    backdrop-filter: var(--lg-backdrop);
  }
  .customer-flow .finder .seg { border-radius: 999px; }
  .customer-flow .finder .seg button, .customer-flow .finder .chip { border-radius: 999px; }
  .customer-flow .finder .seg button { background: transparent; }
  .customer-flow .big-opt, .customer-flow .shape-opt { border-radius: 20px; }
  .customer-flow .finder .seg button.is-on, .customer-flow .finder .chip.is-on {
    background-color: var(--lg-green); border-color: transparent;
    box-shadow: var(--lg-rim-dark), 0 0 0 .5px rgb(0 0 0 / 20%), 0 0 16px -2px oklch(45% 0.06 157 / 55%), 0 6px 16px -8px oklch(40% 0.047 157 / 70%);
  }
  .customer-flow .big-opt.is-on, .customer-flow .shape-opt.is-on {
    background-color: color-mix(in oklch, var(--flow-selected-soft, #eef2ec) 80%, transparent);
    box-shadow: var(--lg-rim), inset 0 0 0 1.5px var(--flow-selected, #294b3b), 0 0 18px -4px oklch(45% 0.06 157 / 40%), 0 8px 22px -12px oklch(40% 0.047 157 / 50%);
    outline: 0;
  }
  /* On phones the sizing flow's main action is tape yellow. */
  .customer-flow .btn-ink {
    border-color: transparent; color: var(--ink);
    background-color: var(--lg-accent);
    background-image: var(--lg-light), linear-gradient(180deg, rgb(255 255 255 / 45%), rgb(255 255 255 / 0%) 55%);
    box-shadow: var(--lg-rim-tint), inset 0 -10px 18px -12px rgb(150 105 0 / 26%), 0 0 0 .5px rgb(130 96 0 / 20%), var(--lg-bloom), 0 10px 24px -12px rgb(150 105 0 / 50%);
  }
  .customer-flow .btn-ink:hover { background-color: oklch(86% 0.155 92 / 94%); }

  /* ─── Marketing pages: the nav turns into a glass bar once you scroll ───── */
  .nav.is-scrolled, body:has(.prose, .m-hero) .nav.is-scrolled {
    background: color-mix(in srgb, var(--paper) 72%, transparent); border-bottom-color: rgb(40 34 18 / 8%);
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 70%);
    -webkit-backdrop-filter: blur(20px) saturate(var(--lg-sat));
    backdrop-filter: blur(20px) saturate(var(--lg-sat));
  }
  .nav.on-ink.is-scrolled, body:has(.m-hero) .nav.on-ink.is-scrolled {
    background: rgb(20 17 14 / 72%); border-bottom-color: var(--line-d); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%);
  }
  .lang-btn { border: 0; }
  .btn-ghost:hover { border-color: transparent; }
  /* Content pages square their phone buttons; glass keeps them capsules. */
  body:has(.prose, .m-hero, .setup) :is(.btn, .lang-btn) { border-radius: 999px; }

  /* ─── Glass that answers touch ──────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    :is(.app-icon-button, .save-button, .action-wish, .pt-close, .catalog-rail .category-tabs button,
      .catalog-rail .catalog-filter-details > summary, .product-actions .piece-tryon-button):active { transform: scale(.94); }
  }

  /* ─── Accessibility: solid surfaces when transparency or contrast is a problem ── */
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body.app-page::before, .app-tabbar::after, .product-action-bar::after { display: none; }
    body.app-page { background: var(--app-paper, #faf9f5); }
    :is(.app-icon-button, .save-button, .preferences-link, .load-more, .c-button, .catalog-collection, .rail-step, .action-wish,
      .pt-close, .lang-btn, .btn, .main-search-field, .hero-actions > *, .catalog-rail .category-tabs button,
      .catalog-rail .catalog-filter-details > summary, .catalog-rail .gender-tabs, .toast, .gallery-count,
      .filter-sheet-done, .app-tabbar, .product-action-bar, .pt-dialog, .pl-dialog, .catalog-filter-content,
      .pt-header, .pl-header, .filter-sheet-head, .nav, .outfit-builder .editor-actions, .app-header::before, .catalog-rail::before) {
      -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    :is(.app-icon-button:not([aria-current="page"]), .save-button, .preferences-link, .load-more, .c-button.secondary,
      .catalog-collection:not([aria-pressed="true"]), .rail-step, .action-wish, .pt-close, .main-search-field,
      .catalog-rail .category-tabs button:not([aria-pressed="true"]), .catalog-rail .catalog-filter-details > summary,
      .catalog-rail .gender-tabs, .app-tabbar, .product-action-bar, .outfit-builder .editor-actions) {
      background-color: var(--c-white, #fff); background-image: none; box-shadow: 0 0 0 1px var(--app-line, #d9d6cc);
    }
    :is(.pt-dialog, .pl-dialog, .catalog-filter-content, .pt-header, .pl-header, .filter-sheet-head) { background-color: var(--c-paper, #faf9f5); }
    .app-header::before, .catalog-rail::before { background: var(--app-paper, #faf9f5); -webkit-mask-image: none; mask-image: none; }
    .nav.is-scrolled { background: var(--paper, #faf6ef); }
    .nav.on-ink.is-scrolled { background: var(--ink, #14110e); }
  }
}