/** Shopify CDN: Minification failed

Line 1250:73 Expected identifier but found whitespace
Line 1250:75 Expected identifier but found "%"
Line 1250:109 Unexpected "0"
Line 1250:111 Expected identifier but found "%"
Line 1250:120 Unexpected "var("
Line 1250:136 Expected identifier but found "%"
Line 1452:2 Unexpected "{"
Line 1452:3 Expected identifier but found "%"
Line 1453:19 Unexpected "-45vh"
Line 1458:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:all-countries (INDEX:0) */
.allc { padding-block: var(--space-16); }
    .allc__h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: var(--space-1) 0 0; }
    .allc__intro { color: var(--neutral-600, #555); margin: var(--space-3) 0 var(--space-12); max-width: 60ch; }
    .allc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2) var(--space-6); align-items: start; }
    .allc__letter { grid-column: 1 / -1; font-size: 1rem; font-weight: 800; color: var(--mint-700); margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--neutral-200); }
    .allc__letter:first-child { margin-top: 0; }
    .allc__c { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); background: none; border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
    .allc__c:hover { background: var(--neutral-100); }
    .allc__name { font-size: .95rem; }
    .allc__cur { font-size: .78rem; color: var(--neutral-500); white-space: nowrap; }
    .allc__c.is-current { color: var(--mint-700); font-weight: 700; }
    .allc__c.is-current .allc__cur { color: var(--mint-600); }
/* END_SECTION:all-countries */

/* START_SECTION:article-feature (INDEX:2) */
.ftr{ --ftr-ink:#0a0b0d; --ftr-ink2:#0e1013; --ftr-mut:#9aa0a6; --ftr-line:rgba(255,255,255,.1); --ftr-btn-ink:#0a0b0d;
    display:block; background:var(--ftr-ink); color:#fff; font-family:"Satoshi",var(--font-sans,system-ui,sans-serif); -webkit-font-smoothing:antialiased; }
  /* Base heading defaults. :where() keeps this at zero specificity so the per-block heading
     rules below (.ftr-stats__h margin, .ftr-band__big line-height, …) actually win — with a
     plain ".ftr h2" selector (0,1,1) this reset silently beat every single-class rule (0,1,0). */
  .ftr :where(h1,h2,h3){ letter-spacing:-.03em; line-height:1; font-weight:800; margin:0; }
  .ftr img{ display:block; max-width:100%; }
  .ftr-wrap{ max-width:1180px; margin-inline:auto; }
  .ftr-accent{ color:var(--ftr-accent); } .ftr-muted{ color:var(--ftr-mut); font-weight:500; }
  .ftr-mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }
  .ftr-eyebrow{ margin:0; font-size:.74rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ftr-accent); }
  .ftr-credit{ position:absolute; right:14px; bottom:12px; z-index:5; font-size:.64rem; letter-spacing:.04em; color:rgba(255,255,255,.5); background:rgba(0,0,0,.32); padding:3px 9px; border-radius:6px; }
  .ftr__prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:50; background:linear-gradient(90deg,var(--ftr-accent),color-mix(in srgb,var(--ftr-accent) 55%,#fff)); box-shadow:0 0 10px color-mix(in srgb,var(--ftr-accent) 70%,transparent); }

  .ftr-hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; }
  .ftr-hero__bg{ position:absolute; inset:0; background-position:center 30%; background-size:cover; opacity:.2; filter:blur(3px) saturate(.9); transform:scale(1.12); }
  .ftr-hero__vig{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(10,11,13,.72) 76%, var(--ftr-ink) 100%); }
  .ftr-hero--photo .ftr-hero__bg{ opacity:.62; filter:saturate(1.04) contrast(1.03); transform:scale(1.06); }
  .ftr-hero--photo .ftr-hero__vig{ background:radial-gradient(ellipse at 50% 48%, rgba(10,11,13,.12) 0%, rgba(10,11,13,.56) 56%, var(--ftr-ink) 100%), linear-gradient(180deg, rgba(10,11,13,.38), transparent 26%, transparent 60%, var(--ftr-ink) 100%); }
  .ftr-hero__ghost{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; font-size:min(30vh,26vw); font-weight:800; line-height:1; letter-spacing:-.04em; text-transform:uppercase; white-space:nowrap; color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--ftr-accent) 20%,transparent); user-select:none; }
  .ftr-hero__stage{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.7rem,2.2vh,1.5rem); text-align:center; padding:9vh 5vw 13vh; }
  .ftr-hero__kick{ position:relative; z-index:4; }
  .ftr-hero__prodwrap{ position:relative; display:grid; place-items:center; z-index:2; }
  .ftr-hero__halo{ position:absolute; top:50%; left:50%; width:min(70vmin,620px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ftr-accent) 40%,transparent),transparent 62%); filter:blur(6px); }
  .ftr-hero__prod{ position:relative; width:auto; max-height:min(44vh,420px); max-width:86vw; filter:drop-shadow(0 46px 76px rgba(0,0,0,.7)); z-index:2; }
  .ftr-hero__sweep{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); background-size:260% 100%; background-position:180% 0; }
  .ftr-hero__h{ position:relative; z-index:4; font-size:clamp(2.2rem,6.6vw,5.6rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; }
  .ftr-hero__h-o{ color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.5); }
  .ftr-hero__stage--text .ftr-hero__h{ font-size:clamp(2.6rem,8vw,6.6rem); }
  .ftr-hero__sub{ position:relative; z-index:4; margin:.4rem auto 0; max-width:46ch; color:#c9cdd2; font-weight:500; font-size:clamp(1rem,1.8vw,1.24rem); line-height:1.5; }
  .ftr-hero__foot{ position:absolute; left:0; right:0; bottom:5vh; z-index:6; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-inline:clamp(1.25rem,5vw,4rem); }
  .ftr-hero__tele{ text-align:left; font-size:.72rem; letter-spacing:.12em; color:var(--ftr-mut); line-height:1.7; }
  .ftr-hero__tele b{ color:var(--ftr-accent); font-weight:600; }
  .ftr-hero__pill{ display:inline-flex; align-items:center; gap:.5rem; padding:11px 22px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--ftr-line); color:#fff; font-weight:700; text-decoration:none; backdrop-filter:blur(6px); white-space:nowrap; }
  .ftr-hero__cue{ position:absolute; left:50%; bottom:3.5vh; transform:translateX(-50%); z-index:6; color:#5b616a; font-size:1.2rem; animation:ftr-bob 1.8s ease-in-out infinite; }
  @keyframes ftr-bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

  .ftr-band{ position:relative; min-height:100vh; overflow:hidden; display:grid; }
  .ftr-band--med{ min-height:74vh; }
  .ftr-band__img{ position:absolute; inset:0; width:100%; height:118%; top:-9%; object-fit:cover; object-position:center 30%; will-change:transform; }
  .ftr-band__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,13,.52),rgba(10,11,13,.2) 42%,var(--ftr-ink) 98%); }
  .ftr-band--right .ftr-band__shade{ background:linear-gradient(270deg,rgba(10,11,13,.28),rgba(10,11,13,.62)),linear-gradient(180deg,transparent,var(--ftr-ink) 98%); }
  .ftr-band__c{ position:relative; z-index:2; align-self:end; width:100%; }
  .ftr-band--right .ftr-band__c{ text-align:right; }
  .ftr-band__inner{ max-width:1180px; margin-inline:auto; padding:clamp(2rem,7vw,6rem) clamp(1.25rem,6vw,4rem); }
  .ftr-band--right .ftr-band__inner{ margin-left:auto; }
  .ftr-band--right .ftr-band__p{ margin-left:auto; }
  /* padding-bottom = descender room: background-clip:text only paints inside the padding-box,
     so with a tight line-height the tail of g/y/p would be cut off. */
  .ftr-band__big{ max-width:100%; overflow-wrap:break-word; font-size:clamp(2.4rem,8vw,6.5rem); line-height:.9; padding-bottom:.24em; letter-spacing:-.04em; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ftr-accent) 42%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ftr-band__p{ margin-top:1.4rem; max-width:54ch; font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.55; color:#d6d9dd; font-weight:500; }
  .ftr-band--quote{ place-items:center; text-align:center; min-height:86vh; }
  .ftr-band--quote .ftr-band__shade{ background:radial-gradient(circle at 50% 50%,rgba(10,11,13,.42),rgba(10,11,13,.86)); }
  .ftr-quote{ position:relative; z-index:2; margin:0; max-width:min(22ch,100%); padding-inline:1.25rem; overflow-wrap:break-word; font-size:clamp(1.8rem,4.2vw,3.4rem); font-weight:800; line-height:1.14; letter-spacing:-.03em; }
  .ftr-quote__cite{ display:block; margin-top:1.4rem; font-size:.9rem; font-weight:600; font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--ftr-accent); }

  .ftr-split{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:linear-gradient(180deg,var(--ftr-ink),var(--ftr-ink2)); }
  .ftr-split__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
  .ftr-split--r .ftr-split__vis{ order:2; }
  .ftr-split__vis{ position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 34%,#1b1f25,#0c0e11); border:1px solid var(--ftr-line); }
  .ftr-split__vis img{ width:100%; height:100%; object-fit:cover; }
  .ftr-split__ring{ position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ftr-accent) 20%,transparent); border-radius:22px; }
  .ftr-split__h{ font-size:clamp(1.8rem,4vw,3rem); margin-top:.5rem; }
  .ftr-split__p{ margin-top:1.1rem; max-width:52ch; color:#c3c7cc; font-weight:500; line-height:1.6; font-size:clamp(1.02rem,1.6vw,1.14rem); }

  .ftr-stats{ padding:clamp(3rem,7vw,6rem) clamp(1.25rem,6vw,4rem); background:var(--ftr-ink2); border-block:1px solid var(--ftr-line); }
  .ftr-stats__h{ font-size:clamp(1.6rem,3.4vw,2.4rem); text-align:center; margin-bottom:clamp(2.6rem,5vw,4.4rem); }
  .ftr-stats__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(1rem,2.5vw,2rem); }
  .ftr-stat{ display:flex; flex-direction:column; justify-content:center; text-align:center; padding:2rem 1.1rem; min-height:160px; border-radius:18px; border:1px solid var(--ftr-line); background:linear-gradient(180deg,rgba(255,255,255,.035),transparent); }
  .ftr-stat__n{ display:block; font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ftr-accent) 55%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ftr-stat__l{ display:block; margin-top:.6rem; font-size:.82rem; letter-spacing:.06em; color:#aab0b6; font-weight:600; text-transform:uppercase; }

  .ftr-specs{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--ftr-ink); }
  .ftr-specs__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
  .ftr-specs__grid--nov{ grid-template-columns:1fr; max-width:820px; }
  .ftr-specs__vis{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
  .ftr-specs__vis::before{ content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ftr-accent) 22%,transparent),transparent 62%); }
  .ftr-specs__ring{ position:absolute; inset:6%; border-radius:50%; border:1px solid color-mix(in srgb,var(--ftr-accent) 18%,transparent); }
  .ftr-specs__ring:nth-child(2){ inset:16%; border-style:dashed; opacity:.6; }
  .ftr-specs__img{ position:relative; width:86%; z-index:2; filter:drop-shadow(0 30px 54px rgba(0,0,0,.6)); border-radius:16px; }
  .ftr-specs__scan{ position:absolute; left:6%; right:6%; height:22%; top:0; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ftr-accent) 16%,transparent),transparent); }
  .ftr-specs__h{ font-size:clamp(2rem,4.4vw,3.4rem); margin-top:.6rem; }
  .ftr-specs__list{ margin:clamp(1.4rem,3vw,2.4rem) 0 0; padding:0; list-style:none; }
  .ftr-specs__item{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; padding:1.1rem 0; border-top:1px solid var(--ftr-line); align-items:start; }
  .ftr-specs__item:last-child{ border-bottom:1px solid var(--ftr-line); }
  .ftr-specs__dot{ grid-row:1/3; width:9px; height:9px; margin-top:.45rem; border-radius:50%; background:var(--ftr-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--ftr-accent) 20%,transparent); }
  .ftr-specs__k{ grid-column:2; font-weight:800; font-size:clamp(1.05rem,1.8vw,1.28rem); color:var(--ftr-accent); }
  .ftr-specs__v{ grid-column:2; margin-top:.3rem; color:#c3c7cc; font-weight:500; line-height:1.5; font-size:.98rem; }

  .ftr-gal{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--ftr-ink2); text-align:center; }
  .ftr-gal__h{ font-size:clamp(2rem,4.4vw,3.4rem); }
  .ftr-gal__sub{ margin:1rem auto 0; max-width:54ch; }
  .ftr-gal__row{ margin-top:clamp(2.6rem,5vw,4.4rem); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.3rem); }
  .ftr-gal__i{ margin:0; aspect-ratio:1; border-radius:20px; background:radial-gradient(circle at 50% 38%,#1b1f25,#0c0e11); border:1px solid var(--ftr-line); display:grid; place-items:center; padding:9%; transition:transform .5s, border-color .5s; overflow:hidden; }
  .ftr-gal--photo .ftr-gal__i{ padding:0; }
  .ftr-gal__i:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--ftr-accent) 50%,transparent); }
  .ftr-gal__i img{ width:100%; height:100%; object-fit:contain; transition:transform .6s; }
  .ftr-gal--photo .ftr-gal__i img{ object-fit:cover; }
  .ftr-gal__i:hover img{ transform:scale(1.08); }

  .ftr-pull{ padding:clamp(4rem,10vw,9rem) clamp(1.25rem,6vw,4rem); text-align:center; background:var(--ftr-ink); }
  .ftr-pull__t{ max-width:min(24ch,100%); margin-inline:auto; overflow-wrap:break-word; font-size:clamp(1.7rem,4.2vw,3.1rem); font-weight:800; line-height:1.14; letter-spacing:-.03em; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ftr-accent) 34%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ftr-pull__s{ margin:1.4rem auto 0; max-width:52ch; font-size:clamp(1rem,1.7vw,1.16rem); }

  .ftr-cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); border-top:1px solid var(--ftr-line); }
  .ftr-cta__glow{ position:absolute; top:36%; left:50%; width:min(80vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ftr-accent) 24%,transparent),transparent 62%); }
  .ftr-cta__in{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
  .ftr-cta__img{ width:clamp(120px,20vw,180px); aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.5); margin:0 auto 1.4rem; }
  .ftr-cta__h{ font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.05; }
  .ftr-cta__p{ margin:1.1rem auto 0; max-width:52ch; color:#c3c7cc; font-weight:500; line-height:1.55; font-size:clamp(1.02rem,1.7vw,1.18rem); }
  .ftr-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; background:var(--ftr-accent); color:var(--ftr-btn-ink); font-weight:800; font-size:clamp(1.05rem,2vw,1.22rem); padding:16px 40px; border-radius:999px; text-decoration:none; box-shadow:0 14px 40px color-mix(in srgb,var(--ftr-accent) 38%,transparent); transition:transform .18s, box-shadow .3s; }
  .ftr-btn:hover{ transform:translateY(-3px); box-shadow:0 22px 54px color-mix(in srgb,var(--ftr-accent) 55%,transparent); }
  .ftr-fine{ margin-top:1.2rem; font-size:.9rem; color:#8a9096; } .ftr-fine a{ color:#c3c7cc; }

  .ftr-steps{ padding:clamp(3rem,8vw,7rem) clamp(1.25rem,6vw,4rem); background:linear-gradient(180deg,var(--ftr-ink),var(--ftr-ink2)); }
  .ftr-steps__h{ font-size:clamp(1.8rem,4vw,3rem); text-align:center; margin:.4rem auto 0; max-width:20ch; }
  .ftr-steps__row{ margin-top:clamp(2.6rem,5vw,4.4rem); display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(1rem,2vw,1.5rem); }
  .ftr-step{ position:relative; padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:20px; border:1px solid var(--ftr-line); background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); overflow:hidden; }
  .ftr-step::before{ content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:linear-gradient(180deg,var(--ftr-accent),transparent); }
  .ftr-step__n{ font-size:clamp(2rem,3.4vw,2.8rem); font-weight:800; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.4px color-mix(in srgb,var(--ftr-accent) 60%,transparent); }
  .ftr-step__t{ margin-top:.5rem; font-size:clamp(1.15rem,2vw,1.42rem); }
  .ftr-step__d{ margin-top:.6rem; color:#b7bbc1; font-weight:500; line-height:1.55; font-size:.98rem; }

  .ftr-mock{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--ftr-ink); }
  .ftr-mock__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
  .ftr-mock--r .ftr-mock__stage{ order:2; }
  .ftr-mock__stage{ position:relative; display:grid; place-items:center; }
  .ftr-mock__glow{ position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ftr-accent) 26%,transparent),transparent 62%); filter:blur(6px); }
  .ftr-mock__frame{ position:relative; z-index:2; background:#05070a; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.6); overflow:hidden; }
  .ftr-mock__frame--phone{ width:min(300px,78vw); aspect-ratio:9/19; border-radius:38px; padding:10px; }
  .ftr-mock__frame--phone::before{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:34%; height:20px; background:#05070a; border-radius:0 0 14px 14px; z-index:3; }
  .ftr-mock__frame--browser{ width:min(560px,90vw); aspect-ratio:16/10; border-radius:16px; padding:34px 8px 8px; }
  .ftr-mock__bar{ position:absolute; top:0; left:0; right:0; height:34px; display:flex; align-items:center; gap:7px; padding-inline:14px; background:#0c1015; border-bottom:1px solid rgba(255,255,255,.08); }
  .ftr-mock__bar i{ width:10px; height:10px; border-radius:50%; background:#2a2f36; }
  .ftr-mock__img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:28px; }
  .ftr-mock__frame--browser .ftr-mock__img{ border-radius:8px; }
  .ftr-mock__h{ font-size:clamp(1.8rem,4vw,3rem); margin-top:.5rem; }
  .ftr-mock__p{ margin-top:1.1rem; max-width:50ch; color:#c3c7cc; font-weight:500; line-height:1.6; font-size:clamp(1.02rem,1.6vw,1.14rem); }
  .ftr-mock__cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; font-weight:800; color:#fff; text-decoration:none; border-bottom:2px solid color-mix(in srgb,var(--ftr-accent) 60%,transparent); padding-bottom:3px; }

  .ftr-rv{ opacity:0; transform:translateY(38px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.84,.3,1); }
  .ftr-rv.is-in{ opacity:1; transform:none; }
  .ftr-d1{ transition-delay:.08s } .ftr-d2{ transition-delay:.16s } .ftr-d3{ transition-delay:.24s } .ftr-d4{ transition-delay:.32s }

  @media (max-width:860px){
    .ftr-split__grid{ grid-template-columns:1fr; gap:2rem; }
    .ftr-split--r .ftr-split__vis{ order:0; }
    .ftr-specs__grid{ grid-template-columns:1fr; gap:2.5rem; }
    .ftr-gal__row{ grid-template-columns:repeat(2,1fr); }
    .ftr-hero__foot{ flex-direction:column; align-items:flex-start; }
    .ftr-band--right .ftr-band__c{ text-align:left; }
    .ftr-mock__grid{ grid-template-columns:1fr; gap:2.5rem; justify-items:center; }
    .ftr-mock--r .ftr-mock__stage{ order:0; }
    .ftr-mock__body{ text-align:center; }
  }
  @media (prefers-reduced-motion:reduce){ .ftr-rv{ opacity:1; transform:none; } .ftr-hero__cue{ animation:none; } .ftr-hero__prod{ opacity:1; } }
/* END_SECTION:article-feature */

/* START_SECTION:article-flagship (INDEX:3) */
.mqf{ --mqf-ink:#0a0b0d; --mqf-ink2:#0e1013; --mqf-mut:#9aa0a6; --mqf-line:rgba(255,255,255,.1);
    display:block; background:var(--mqf-ink); color:#fff; font-family:"Satoshi",var(--font-sans,system-ui,sans-serif); -webkit-font-smoothing:antialiased; }
  .mqf h1,.mqf h2,.mqf h3{ letter-spacing:-.03em; line-height:1; font-weight:800; margin:0; }
  .mqf img{ display:block; max-width:100%; }
  .mqf-wrap{ max-width:1180px; margin-inline:auto; }
  .mqf-accent{ color:var(--mqf-accent); } .mqf-muted{ color:var(--mqf-mut); font-weight:500; }
  .mqf-mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }
  .mqf-eyebrow{ margin:0; font-size:.74rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--mqf-accent); }
  .mqf-credit{ position:absolute; right:14px; bottom:12px; z-index:5; font-size:.64rem; letter-spacing:.04em; color:rgba(255,255,255,.5); background:rgba(0,0,0,.32); padding:3px 9px; border-radius:6px; }
  .mqf__prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:50; background:linear-gradient(90deg,var(--mqf-accent),#aefff2); box-shadow:0 0 10px rgba(21,205,176,.7); }

  /* HERO */
  .mqf-hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; }
  .mqf-hero__bg{ position:absolute; inset:0; background-position:center 28%; background-size:cover; opacity:.16; filter:blur(3px) saturate(.85); transform:scale(1.12); }
  .mqf-hero__vig{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(10,11,13,.7) 78%, var(--mqf-ink) 100%); }
  .mqf-hero__num{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; font-size:min(96vh,140vw); font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(21,205,176,.16); user-select:none; }
  .mqf-hero__stage{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.7rem,2.2vh,1.6rem); text-align:center; padding:9vh 5vw 13vh; }
  .mqf-hero__kick{ position:relative; z-index:4; }
  .mqf-hero__helmwrap{ position:relative; display:grid; place-items:center; z-index:2; }
  .mqf-hero__halo{ position:absolute; top:50%; left:50%; width:min(64vmin,540px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 42%,transparent),transparent 62%); filter:blur(4px); }
  .mqf-hero__helm{ position:relative; width:auto; max-height:min(46vh,440px); max-width:80vw; filter:drop-shadow(0 46px 76px rgba(0,0,0,.65)); z-index:2; }
  /* Gloss sweep. Masked with the helmet PNG (--mqf-helm-mask, set inline) so the shine follows the
     helmet silhouette — without the mask this square element paints a visible rectangular block. */
  .mqf-hero__sweep{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); background-size:260% 100%; background-position:180% 0;
    -webkit-mask-image:var(--mqf-helm-mask,none); mask-image:var(--mqf-helm-mask,none);
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; }
  .mqf-hero__h{ position:relative; z-index:4; font-size:clamp(2.2rem,6.4vw,5.4rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; }
  .mqf-hero__h-o{ color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.5); }
  .mqf-hero__foot{ position:absolute; left:0; right:0; bottom:5vh; z-index:6; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-inline:clamp(1.25rem,5vw,4rem); }
  .mqf-hero__tele{ text-align:left; font-size:.72rem; letter-spacing:.12em; color:var(--mqf-mut); line-height:1.7; }
  .mqf-hero__tele b{ color:var(--mqf-accent); font-weight:600; }
  .mqf-hero__pill{ display:inline-flex; align-items:center; gap:.5rem; padding:11px 22px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--mqf-line); color:#fff; font-weight:700; text-decoration:none; backdrop-filter:blur(6px); white-space:nowrap; }
  .mqf-hero__cue{ position:absolute; left:50%; bottom:3.5vh; transform:translateX(-50%); z-index:6; color:#5b616a; font-size:1.2rem; animation:mqf-bob 1.8s ease-in-out infinite; }
  @keyframes mqf-bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

  /* BANDS */
  .mqf-band{ position:relative; min-height:100vh; overflow:hidden; display:grid; }
  .mqf-band__img{ position:absolute; inset:0; width:100%; height:118%; top:-9%; object-fit:cover; object-position:center 26%; will-change:transform; }
  .mqf-band__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,13,.5),rgba(10,11,13,.18) 42%,var(--mqf-ink) 98%); }
  .mqf-band__c{ position:relative; z-index:2; align-self:end; width:100%; }
  .mqf-band__inner{ max-width:1180px; margin-inline:auto; padding:clamp(2rem,7vw,6rem) clamp(1.25rem,6vw,4rem); }
  .mqf-band__big{ font-size:clamp(3.4rem,15vw,12rem); line-height:.82; letter-spacing:-.05em; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--mqf-accent) 42%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .mqf-band__p{ margin-top:1.4rem; max-width:52ch; font-size:clamp(1.05rem,1.9vw,1.32rem); line-height:1.55; color:#d6d9dd; font-weight:500; }
  .mqf-band--quote{ place-items:center; text-align:center; }
  .mqf-band--quote .mqf-band__shade{ background:radial-gradient(circle at 50% 50%,rgba(10,11,13,.4),rgba(10,11,13,.85)); }
  .mqf-quote{ position:relative; z-index:2; margin:0; max-width:20ch; padding-inline:1.25rem; font-size:clamp(2rem,5.4vw,4.2rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; }

  /* SPECS */
  .mqf-specs{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:linear-gradient(180deg,var(--mqf-ink),var(--mqf-ink2)); }
  .mqf-specs__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
  .mqf-specs__vis{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
  .mqf-specs__vis::before{ content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 22%,transparent),transparent 62%); }
  .mqf-specs__ring{ position:absolute; inset:6%; border-radius:50%; border:1px solid rgba(21,205,176,.18); }
  .mqf-specs__ring:nth-child(2){ inset:16%; border-style:dashed; opacity:.6; }
  .mqf-specs__helm{ position:relative; width:82%; z-index:2; filter:drop-shadow(0 30px 54px rgba(0,0,0,.6)); }
  .mqf-specs__scan{ position:absolute; left:6%; right:6%; height:22%; top:0; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(21,205,176,.16),transparent); }
  .mqf-specs__h{ font-size:clamp(2rem,4.4vw,3.4rem); margin-top:.6rem; }
  .mqf-specs__list{ margin:clamp(1.4rem,3vw,2.4rem) 0 0; padding:0; list-style:none; }
  .mqf-specs__item{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; padding:1.1rem 0; border-top:1px solid var(--mqf-line); align-items:start; }
  .mqf-specs__item:last-child{ border-bottom:1px solid var(--mqf-line); }
  .mqf-specs__dot{ grid-row:1/3; width:9px; height:9px; margin-top:.45rem; border-radius:50%; background:var(--mqf-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--mqf-accent) 20%,transparent); }
  .mqf-specs__k{ grid-column:2; font-weight:800; font-size:clamp(1.05rem,1.8vw,1.28rem); color:var(--mqf-accent); }
  .mqf-specs__v{ grid-column:2; margin-top:.3rem; color:#c3c7cc; font-weight:500; line-height:1.5; font-size:.98rem; }

  /* GALLERY */
  .mqf-gal{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--mqf-ink2); text-align:center; }
  .mqf-gal__h{ font-size:clamp(2rem,4.4vw,3.4rem); }
  .mqf-gal__sub{ margin:1rem auto 0; max-width:52ch; }
  .mqf-gal__row{ margin-top:clamp(2rem,5vw,4rem); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.3rem); }
  .mqf-gal__i{ margin:0; aspect-ratio:1; border-radius:20px; background:radial-gradient(circle at 50% 38%,#1b1f25,#0c0e11); border:1px solid var(--mqf-line); display:grid; place-items:center; padding:9%; transition:transform .5s, border-color .5s; }
  .mqf-gal__i:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--mqf-accent) 50%,transparent); }
  .mqf-gal__i img{ width:100%; height:100%; object-fit:contain; transition:transform .6s; }
  .mqf-gal__i:hover img{ transform:scale(1.09) rotate(-3deg); }

  /* WHO */
  .mqf-who{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--mqf-ink); }
  .mqf-who__h{ font-size:clamp(2rem,4.4vw,3.4rem); }
  .mqf-who__grid{ margin-top:clamp(2rem,5vw,3.4rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
  .mqf-who__c{ padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:20px; border:1px solid var(--mqf-line); background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); }
  .mqf-who__n{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:color-mix(in srgb,var(--mqf-accent) 70%,transparent); }
  .mqf-who__c h3{ margin-top:.5rem; font-size:clamp(1.15rem,2vw,1.45rem); }
  .mqf-who__c p{ margin-top:.6rem; color:#b7bbc1; font-weight:500; line-height:1.5; }

  /* CTA */
  .mqf-cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); border-top:1px solid var(--mqf-line); }
  .mqf-cta__glow{ position:absolute; top:36%; left:50%; width:min(80vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 24%,transparent),transparent 62%); }
  .mqf-cta__in{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
  .mqf-cta__portrait{ width:clamp(120px,20vw,180px); aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.5); margin:0 auto 1.4rem; }
  .mqf-cta__h{ font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.05; }
  .mqf-cta__p{ margin:1.1rem auto 0; max-width:52ch; color:#c3c7cc; font-weight:500; line-height:1.55; font-size:clamp(1.02rem,1.7vw,1.18rem); }
  .mqf-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; background:var(--mqf-accent); color:#03312a; font-weight:800; font-size:clamp(1.05rem,2vw,1.22rem); padding:16px 40px; border-radius:999px; text-decoration:none; box-shadow:0 14px 40px color-mix(in srgb,var(--mqf-accent) 38%,transparent); transition:transform .18s, box-shadow .3s; }
  .mqf-btn:hover{ transform:translateY(-3px); box-shadow:0 22px 54px color-mix(in srgb,var(--mqf-accent) 55%,transparent); }
  .mqf-fine{ margin-top:1.2rem; font-size:.9rem; color:#8a9096; } .mqf-fine a{ color:#c3c7cc; }
  .mqf-credit--cta{ position:static; display:inline-block; margin-top:1rem; }

  /* reveals */
  .mqf-rv{ opacity:0; transform:translateY(38px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.84,.3,1); }
  .mqf-rv.is-in{ opacity:1; transform:none; }
  .mqf-d1{ transition-delay:.08s } .mqf-d2{ transition-delay:.16s } .mqf-d3{ transition-delay:.24s } .mqf-d4{ transition-delay:.32s }

  @media (max-width:860px){
    .mqf-specs__grid{ grid-template-columns:1fr; gap:2.5rem; }
    .mqf-gal__row{ grid-template-columns:repeat(2,1fr); }
    .mqf-who__grid{ grid-template-columns:1fr; }
    .mqf-hero__foot{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion:reduce){ .mqf-rv{ opacity:1; transform:none; } .mqf-hero__cue{ animation:none; } .mqf-hero__helm{ opacity:1; } }
/* END_SECTION:article-flagship */

/* START_SECTION:article-rider (INDEX:4) */
.mqf{ --mqf-ink:#0a0b0d; --mqf-ink2:#0e1013; --mqf-mut:#9aa0a6; --mqf-line:rgba(255,255,255,.1); --mqf-btn-ink:#0a0b0d;
    display:block; background:var(--mqf-ink); color:#fff; font-family:"Satoshi",var(--font-sans,system-ui,sans-serif); -webkit-font-smoothing:antialiased; }
  .mqf h1,.mqf h2,.mqf h3{ letter-spacing:-.03em; line-height:1; font-weight:800; margin:0; }
  .mqf img{ display:block; max-width:100%; }
  .mqf-wrap{ max-width:1180px; margin-inline:auto; }
  .mqf-accent{ color:var(--mqf-accent); } .mqf-muted{ color:var(--mqf-mut); font-weight:500; }
  .mqf-mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }
  .mqf-eyebrow{ margin:0; font-size:.74rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--mqf-accent); }
  .mqf-credit{ position:absolute; right:14px; bottom:12px; z-index:5; font-size:.64rem; letter-spacing:.04em; color:rgba(255,255,255,.5); background:rgba(0,0,0,.32); padding:3px 9px; border-radius:6px; }
  .mqf__prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:50; background:linear-gradient(90deg,var(--mqf-accent),color-mix(in srgb,var(--mqf-accent) 55%,#fff)); box-shadow:0 0 10px color-mix(in srgb,var(--mqf-accent) 70%,transparent); }

  .mqf-hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; }
  .mqf-hero__bg{ position:absolute; inset:0; background-position:center 28%; background-size:cover; opacity:.16; filter:blur(3px) saturate(.85); transform:scale(1.12); }
  .mqf-hero__vig{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(10,11,13,.7) 78%, var(--mqf-ink) 100%); }
  .mqf-hero__num{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; font-size:min(96vh,140vw); font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--mqf-accent) 18%,transparent); user-select:none; }
  .mqf-hero__stage{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.7rem,2.2vh,1.6rem); text-align:center; padding:9vh 5vw 13vh; }
  .mqf-hero__kick{ position:relative; z-index:4; }
  .mqf-hero__helmwrap{ position:relative; display:grid; place-items:center; z-index:2; }
  .mqf-hero__halo{ position:absolute; top:50%; left:50%; width:min(64vmin,540px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 42%,transparent),transparent 62%); filter:blur(4px); }
  .mqf-hero__helm{ position:relative; width:auto; max-height:min(46vh,440px); max-width:80vw; filter:drop-shadow(0 46px 76px rgba(0,0,0,.65)); z-index:2; }
  /* Gloss sweep. Masked with the helmet PNG (--mqf-helm-mask, set inline) so the shine follows the
     helmet silhouette — without the mask this square element paints a visible rectangular block. */
  .mqf-hero__sweep{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); background-size:260% 100%; background-position:180% 0;
    -webkit-mask-image:var(--mqf-helm-mask,none); mask-image:var(--mqf-helm-mask,none);
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; }
  .mqf-hero__h{ position:relative; z-index:4; font-size:clamp(2.2rem,6.4vw,5.4rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; }
  .mqf-hero__h-o{ color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.5); }
  .mqf-hero__foot{ position:absolute; left:0; right:0; bottom:5vh; z-index:6; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-inline:clamp(1.25rem,5vw,4rem); }
  .mqf-hero__tele{ text-align:left; font-size:.72rem; letter-spacing:.12em; color:var(--mqf-mut); line-height:1.7; }
  .mqf-hero__tele b{ color:var(--mqf-accent); font-weight:600; }
  .mqf-hero__pill{ display:inline-flex; align-items:center; gap:.5rem; padding:11px 22px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--mqf-line); color:#fff; font-weight:700; text-decoration:none; backdrop-filter:blur(6px); white-space:nowrap; }
  .mqf-hero__cue{ position:absolute; left:50%; bottom:3.5vh; transform:translateX(-50%); z-index:6; color:#5b616a; font-size:1.2rem; animation:mqf-bob 1.8s ease-in-out infinite; }
  @keyframes mqf-bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

  .mqf-band{ position:relative; min-height:100vh; overflow:hidden; display:grid; }
  .mqf-band__img{ position:absolute; inset:0; width:100%; height:118%; top:-9%; object-fit:cover; object-position:center 26%; will-change:transform; }
  .mqf-band__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,13,.5),rgba(10,11,13,.18) 42%,var(--mqf-ink) 98%); }
  .mqf-band__c{ position:relative; z-index:2; align-self:end; width:100%; }
  .mqf-band__inner{ max-width:1180px; margin-inline:auto; padding:clamp(2rem,7vw,6rem) clamp(1.25rem,6vw,4rem); }
  .mqf-band__big{ font-size:clamp(3.4rem,15vw,12rem); line-height:.82; letter-spacing:-.05em; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--mqf-accent) 42%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .mqf-band__p{ margin-top:1.4rem; max-width:52ch; font-size:clamp(1.05rem,1.9vw,1.32rem); line-height:1.55; color:#d6d9dd; font-weight:500; }
  .mqf-band--quote{ place-items:center; text-align:center; }
  .mqf-band--quote .mqf-band__shade{ background:radial-gradient(circle at 50% 50%,rgba(10,11,13,.4),rgba(10,11,13,.85)); }
  .mqf-quote{ position:relative; z-index:2; margin:0; max-width:20ch; padding-inline:1.25rem; font-size:clamp(2rem,5.4vw,4.2rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; }

  .mqf-specs{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:linear-gradient(180deg,var(--mqf-ink),var(--mqf-ink2)); }
  .mqf-specs__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
  .mqf-specs__vis{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
  .mqf-specs__vis::before{ content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 22%,transparent),transparent 62%); }
  .mqf-specs__ring{ position:absolute; inset:6%; border-radius:50%; border:1px solid color-mix(in srgb,var(--mqf-accent) 18%,transparent); }
  .mqf-specs__ring:nth-child(2){ inset:16%; border-style:dashed; opacity:.6; }
  .mqf-specs__helm{ position:relative; width:82%; z-index:2; filter:drop-shadow(0 30px 54px rgba(0,0,0,.6)); }
  .mqf-specs__scan{ position:absolute; left:6%; right:6%; height:22%; top:0; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mqf-accent) 16%,transparent),transparent); }
  .mqf-specs__h{ font-size:clamp(2rem,4.4vw,3.4rem); margin-top:.6rem; }
  .mqf-specs__list{ margin:clamp(1.4rem,3vw,2.4rem) 0 0; padding:0; list-style:none; }
  .mqf-specs__item{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; padding:1.1rem 0; border-top:1px solid var(--mqf-line); align-items:start; }
  .mqf-specs__item:last-child{ border-bottom:1px solid var(--mqf-line); }
  .mqf-specs__dot{ grid-row:1/3; width:9px; height:9px; margin-top:.45rem; border-radius:50%; background:var(--mqf-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--mqf-accent) 20%,transparent); }
  .mqf-specs__k{ grid-column:2; font-weight:800; font-size:clamp(1.05rem,1.8vw,1.28rem); color:var(--mqf-accent); }
  .mqf-specs__v{ grid-column:2; margin-top:.3rem; color:#c3c7cc; font-weight:500; line-height:1.5; font-size:.98rem; }

  .mqf-gal{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--mqf-ink2); text-align:center; }
  .mqf-gal__h{ font-size:clamp(2rem,4.4vw,3.4rem); }
  .mqf-gal__sub{ margin:1rem auto 0; max-width:52ch; }
  .mqf-gal__row{ margin-top:clamp(2rem,5vw,4rem); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.3rem); }
  .mqf-gal__i{ margin:0; aspect-ratio:1; border-radius:20px; background:radial-gradient(circle at 50% 38%,#1b1f25,#0c0e11); border:1px solid var(--mqf-line); display:grid; place-items:center; padding:9%; transition:transform .5s, border-color .5s; }
  .mqf-gal__i:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--mqf-accent) 50%,transparent); }
  .mqf-gal__i img{ width:100%; height:100%; object-fit:contain; transition:transform .6s; }
  .mqf-gal__i:hover img{ transform:scale(1.09) rotate(-3deg); }

  .mqf-who{ padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); background:var(--mqf-ink); }
  .mqf-who__h{ font-size:clamp(2rem,4.4vw,3.4rem); }
  .mqf-who__grid{ margin-top:clamp(2rem,5vw,3.4rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
  .mqf-who__c{ padding:clamp(1.5rem,2.6vw,2.2rem); border-radius:20px; border:1px solid var(--mqf-line); background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); }
  .mqf-who__n{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:color-mix(in srgb,var(--mqf-accent) 70%,transparent); }
  .mqf-who__c h3{ margin-top:.5rem; font-size:clamp(1.15rem,2vw,1.45rem); }
  .mqf-who__c p{ margin-top:.6rem; color:#b7bbc1; font-weight:500; line-height:1.5; }

  .mqf-cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,6vw,4rem); border-top:1px solid var(--mqf-line); }
  .mqf-cta__glow{ position:absolute; top:36%; left:50%; width:min(80vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--mqf-accent) 24%,transparent),transparent 62%); }
  .mqf-cta__in{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
  .mqf-cta__portrait{ width:clamp(120px,20vw,180px); aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.5); margin:0 auto 1.4rem; }
  .mqf-cta__h{ font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.05; }
  .mqf-cta__p{ margin:1.1rem auto 0; max-width:52ch; color:#c3c7cc; font-weight:500; line-height:1.55; font-size:clamp(1.02rem,1.7vw,1.18rem); }
  .mqf-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; background:var(--mqf-accent); color:var(--mqf-btn-ink); font-weight:800; font-size:clamp(1.05rem,2vw,1.22rem); padding:16px 40px; border-radius:999px; text-decoration:none; box-shadow:0 14px 40px color-mix(in srgb,var(--mqf-accent) 38%,transparent); transition:transform .18s, box-shadow .3s; }
  .mqf-btn:hover{ transform:translateY(-3px); box-shadow:0 22px 54px color-mix(in srgb,var(--mqf-accent) 55%,transparent); }
  .mqf-fine{ margin-top:1.2rem; font-size:.9rem; color:#8a9096; } .mqf-fine a{ color:#c3c7cc; }
  .mqf-credit--cta{ position:static; display:inline-block; margin-top:1rem; }

  .mqf-rv{ opacity:0; transform:translateY(38px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.84,.3,1); }
  .mqf-rv.is-in{ opacity:1; transform:none; }
  .mqf-d1{ transition-delay:.08s } .mqf-d2{ transition-delay:.16s } .mqf-d3{ transition-delay:.24s } .mqf-d4{ transition-delay:.32s }

  @media (max-width:860px){
    .mqf-specs__grid{ grid-template-columns:1fr; gap:2.5rem; }
    .mqf-gal__row{ grid-template-columns:repeat(2,1fr); }
    .mqf-who__grid{ grid-template-columns:1fr; }
    .mqf-hero__foot{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion:reduce){ .mqf-rv{ opacity:1; transform:none; } .mqf-hero__cue{ animation:none; } .mqf-hero__helm{ opacity:1; } }
/* END_SECTION:article-rider */

/* START_SECTION:brand-strip (INDEX:5) */
.brand-strip__row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: center; }
    .brand-strip__item { opacity: .65; transition: opacity var(--dur-base); font-weight: 700; color: var(--neutral-700); text-decoration: none; }
    .brand-strip__item:hover { opacity: 1; }
    .brand-strip__item img { max-height: 40px; width: auto; filter: grayscale(1); }
    .brand-strip__item:hover img { filter: none; }
/* END_SECTION:brand-strip */

/* START_SECTION:brands-az (INDEX:6) */
.brandsaz { padding: var(--space-12) 0 var(--space-16); }
    .brandsaz__inner { max-width: 1100px; }
    .brandsaz__head { text-align: center; margin-bottom: var(--space-8); }
    .brandsaz__eyebrow { font-family: "Space Mono", monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--mint-700); margin: 0 0 var(--space-2); }
    .brandsaz__title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
    .brandsaz__intro { color: var(--neutral-700); max-width: 56ch; margin: var(--space-3) auto 0; }
    .brandsaz__count { font-family: "Space Mono", monospace; font-size: .8rem; color: var(--neutral-500); margin: var(--space-3) 0 0; }
    /* featured */
    .brandsaz__featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-8); }
    @media (max-width: 900px) { .brandsaz__featured { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 560px) { .brandsaz__featured { grid-template-columns: repeat(2, 1fr); } }
    .brandsaz__card { display: flex; align-items: center; justify-content: center; min-height: 78px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; text-align: center; transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
    .brandsaz__card:hover { border-color: var(--mint-500); color: var(--mint-700); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
    /* A–Z nav */
    .brandsaz__nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: var(--space-3) 0; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
    .brandsaz__nav-l { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: var(--radius-sm); font-weight: 700; font-size: .86rem; color: var(--ink); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
    .brandsaz__nav-l:hover { background: var(--mint-500); color: var(--ink); }
    .brandsaz__nav-l.is-off { color: var(--neutral-300); pointer-events: none; }
    /* search */
    .brandsaz__search { max-width: 560px; margin: 0 auto var(--space-8); }
    .brandsaz__search input { width: 100%; height: 56px; border: 1.5px solid var(--neutral-300); border-radius: var(--radius-pill); padding: 0 var(--space-6); font: inherit; font-size: 1.05rem; background: #fff; color: var(--ink); }
    .brandsaz__search input:focus { outline: 0; border-color: var(--mint-500); box-shadow: 0 0 0 3px var(--mint-100); }
    /* groups */
    .brandsaz__group { margin-bottom: var(--space-6); }
    .brandsaz__letter { font-size: 1.4rem; font-weight: 800; color: var(--mint-700); border-bottom: 1px solid var(--neutral-200); padding-bottom: var(--space-2); margin: 0 0 var(--space-3); scroll-margin-top: 60px; }
    .brandsaz__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-1) var(--space-6); }
    .brandsaz__brand { display: inline-block; padding: var(--space-2) 0; color: var(--neutral-700); text-decoration: none; font-weight: 500; transition: color var(--dur-fast); }
    .brandsaz__brand:hover { color: var(--mint-700); }
    .brandsaz__empty { text-align: center; color: var(--neutral-500); padding: var(--space-8) 0; }
/* END_SECTION:brands-az */

/* START_SECTION:cart-drawer (INDEX:8) */
/* ================================================================
       GALLERY / GLASS — dark cinematic cart.
       Products float FREELY on dark glass (contain + soft
       shadow, no box). HTML + JS unchanged — look only. */
    .cart-drawer, .cartpage {
      --c-text:#f3f4f5; --c-dim:rgba(240,242,244,.62); --c-faint:rgba(240,242,244,.38);
      --c-line:rgba(255,255,255,.09); --c-line2:rgba(255,255,255,.16);
      --c-field:rgba(255,255,255,.05); --c-field-line:rgba(255,255,255,.14);
      --c-bg1:#16171b; --c-bg0:#0d0d10;
      --c-card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
      --c-ease:cubic-bezier(.2,.8,.2,1);
      --c-mintgrad:linear-gradient(180deg,#93ebd7,#15cdb0 55%,#0fb89d);
      --c-glow:0 14px 34px -12px rgba(21,205,176,.6),0 0 30px -4px rgba(21,205,176,.35);
    }
    .cart-drawer { position: fixed; inset:0; z-index:300; visibility:hidden; }
    .cart-drawer.is-open { visibility:visible; }
    .cart-drawer__scrim { position:absolute; inset:0; background:rgba(6,6,9,.62); opacity:0; transition:opacity var(--dur-base); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
    .cart-drawer.is-open .cart-drawer__scrim { opacity:1; }
    .cart-drawer__panel { position:absolute; top:0; right:0; bottom:0; width:94%; max-width:480px; background: linear-gradient(180deg, var(--c-bg1), var(--c-bg0)); border-left:1px solid var(--c-line2); box-shadow:-44px 0 100px -40px rgba(0,0,0,.85), inset 1px 0 0 rgba(255,255,255,.06); color: var(--c-text); display:flex; flex-direction:column; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); }
    .cart-drawer.is-open .cart-drawer__panel { transform:none; }

    /* ---- Header ---- */
    .cart-drawer__head { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 26px 14px; border-bottom:1px solid var(--c-line); }
    .cart-drawer__eyebrow { display:inline-flex; align-items:center; gap:9px; font:500 10.5px/1 Inter; letter-spacing:.28em; text-transform:uppercase; color:#7fe6cf; margin-bottom:8px; }
    .cart-drawer__eyebrow::before { content:''; width:18px; height:2px; border-radius:2px; background:linear-gradient(90deg,#93ebd7,#15cdb0); box-shadow:0 0 8px -1px rgba(21,205,176,.85); flex:none; }
    .cart-drawer__title { margin:0; font-family:Satoshi; font-weight:300; font-size:27px; line-height:1; letter-spacing:-.015em; color:var(--c-text); }
    .cart-drawer__title b { font-weight:500; color:#fff; }
    .cart-drawer__count { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--c-dim); margin:9px 0 0; }
    .cart-drawer__countpill { display:inline-flex; align-items:center; justify-content:center; min-width:23px; height:22px; padding:0 8px; border-radius:999px; font-size:12.5px; font-weight:700; color:#04211c; background:linear-gradient(180deg,#93ebd7,#15cdb0); box-shadow:0 6px 16px -6px rgba(21,205,176,.7); flex:none; }
    .cart-drawer__close { width:40px; height:40px; border-radius:50%; border:1px solid var(--c-line); background:rgba(255,255,255,.03); color:var(--c-dim); display:grid; place-items:center; cursor:pointer; flex:none; font-size:1rem; transition:all .35s var(--c-ease); -webkit-tap-highlight-color: transparent; }
    .cart-drawer__close:hover { background:rgba(255,255,255,.08); border-color:var(--c-line2); color:var(--c-text); transform:rotate(90deg); }

    /* "✓ Added" banner — dark mint glass */
    .cart-drawer__added { display:flex; align-items:center; gap:8px; margin:0 34px; max-height:0; opacity:0; overflow:hidden; padding:0 14px; border-radius:12px; background:rgba(21,205,176,.12); color:var(--mint-200); font-weight:600; font-size:.9rem; box-shadow:0 10px 26px -14px rgba(21,205,176,.5); transition:max-height .3s var(--ease-out), opacity .24s, padding .3s, margin-top .3s; }
    .cart-drawer__added.is-show { max-height:54px; opacity:1; padding:11px 14px; margin-top:14px; border:1px solid rgba(21,205,176,.28); }
    .cart-drawer__added-tick { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(150deg, var(--mint-400), var(--mint-600)); color:#04140f; font-size:.72rem; font-weight:800; flex:none; }
    [data-cart-drawer-content] { flex:1; min-height:0; display:flex; flex-direction:column; }
    .cart-drawer__lines { list-style:none; margin:0; padding:9px 0; overflow-y:auto; flex:1 1 auto; min-height:0; }

    /* ---- Product card: product floats freely on the glass ---- */
    .cart-line { position:relative; margin:0 16px 6px; padding:10px 14px 9px; border-radius:13px; border:1px solid var(--c-line); background:var(--c-card); transition:transform .5s var(--c-ease),border-color .5s var(--c-ease),box-shadow .5s var(--c-ease); }
    .cart-line:hover { transform:translateY(-3px); border-color:var(--c-line2); box-shadow:0 26px 50px -26px rgba(0,0,0,.7); }
    /* Delivery-status edge thread — colour mirrors the stock badge (green=in stock, orange=low, red=on request); softly pulsing glow so the status colour is noticeable */
    .cart-line::before { content:''; position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 3px 3px 0; box-shadow:0 0 5px 0 rgba(var(--thread-rgb),.55); animation:threadPulse 2.8s ease-in-out infinite; }
    .cart-line:nth-child(2n)::before { animation-delay:-1.4s; }
    .cart-line--high::before { --thread-rgb:46,205,120; background:linear-gradient(180deg,#22c55e,#16a34a); }
    .cart-line--low::before  { --thread-rgb:250,175,30; background:linear-gradient(180deg,#fbbf24,#f5a623); }
    .cart-line--soon::before { --thread-rgb:251,90,95;  background:linear-gradient(180deg,#fb6e73,#e5484d); }
    @keyframes threadPulse { 0%,100% { filter:brightness(.8) saturate(1); box-shadow:0 0 4px 0 rgba(var(--thread-rgb),.4); } 50% { filter:brightness(1.85) saturate(1.15); box-shadow:0 0 9px 0 rgba(var(--thread-rgb),.85); } }
    .cart-line__grid { display:grid; grid-template-columns:70px 1fr; gap:13px; align-items:flex-start; }
    .cart-line__media { display:grid; place-items:center; align-self:center; width:70px; height:80px; background:transparent; }
    .cart-line__media img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)); transition:transform .55s var(--c-ease); }
    .cart-line:hover .cart-line__media img { transform:translateY(-2px) scale(1.03); }
    .cart-line__eyebrow { font:500 9.5px/1 Inter; letter-spacing:.16em; text-transform:uppercase; color:var(--c-faint); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cart-line__title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:Satoshi; font-size:13.5px; font-weight:400; line-height:1.16; letter-spacing:-.01em; color:var(--c-text); text-decoration:none; }
    .cart-line__title:hover { color:#93ebd7; }
    /* Flat grid — the same six children are placed differently per breakpoint. Desktop keeps the
       familiar shape (price + Remove bottom-right, stepper bottom-left). */
    .cart-line__info { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-content:start;
      grid-template-areas:"eyebrow eyebrow" "title title" "meta meta" "qty price" "qty remove"; }
    .cart-line__eyebrow { grid-area:eyebrow; }
    .cart-line__title { grid-area:title; }
    .cart-line__meta { grid-area:meta; display:flex; align-items:center; gap:5px 11px; flex-wrap:wrap; margin-top:5px; }
    .cart-line__qty { grid-area:qty; align-self:center; justify-self:start; }
    .cart-line__price { grid-area:price; justify-self:end; align-self:end; margin-top:4px; }
    .cart-line__remove { grid-area:remove; justify-self:end; margin-top:2px; }
    .cart-line__variant { font-size:11.5px; font-weight:300; color:var(--c-dim); }
    .cart-line__variant::after { content:'·'; margin-left:11px; color:var(--c-faint); }
    /* Size = the one variant fact worth double-checking before paying, so it keeps a chip of its
       own at every width. Neutral-bright on purpose — mint next to it means "in stock". */
    /* Matches the geometry of the stock/eta chips it sits beside — the value is emphasised by
       weight and colour, not by a jump in size, so the row keeps one visual scale. */
    .cart-line__size { display:inline-flex; align-items:baseline; gap:5px; padding:3px 9px; border-radius:999px;
      border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
      font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-faint); white-space:nowrap; }
    .cart-line__size b { font-family:Satoshi; font-size:11.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--c-text); }
    /* Dissolves on desktop so the existing single meta row is unchanged; mobile turns it
       into the second line (see the mobile block). */
    .cart-line__delivery { display:contents; }
    /* Mobile-only duplicates of the variant and the on-request wording — hidden on desktop. */
    .cart-line__titlevar, .cart-stock__short { display:none; }

    /* Stepper — blooms on card hover */
    .cart-line__qty { display:inline-flex; align-items:center; gap:2px; border-radius:999px; border:1px solid transparent; padding:1px; transition:all .4s var(--c-ease); }
    .cart-line:hover .cart-line__qty { border-color:var(--c-line); background:rgba(255,255,255,.04); }
    .cart-line__qty button { width:23px; height:21px; border:0; background:transparent; color:var(--c-faint); border-radius:6px; font-size:14px; line-height:1; cursor:pointer; transition:all .3s ease; -webkit-tap-highlight-color: transparent; }
    .cart-line:hover .cart-line__qty button { color:var(--c-dim); }
    .cart-line__qty button:hover { background:rgba(21,205,176,.14); color:#93ebd7; }
    .cart-line__qty-input { width:22px; text-align:center; border:0; background:transparent; color:var(--c-text); font:500 13px Inter; -moz-appearance:textfield; font-variant-numeric:tabular-nums; }
    .cart-line__qty-input:focus { outline:0; }

    /* Price + Remove */
    .cart-line__price { font-family:Satoshi; font-size:16px; font-weight:700; color:#fff; letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums; }
    .cart-line__remove { font-size:11px; font-weight:400; color:var(--c-faint); letter-spacing:.02em; background:none; border:0; cursor:pointer; padding:0; transition:color .3s ease; }
    .cart-line__remove:hover { color:rgba(255,120,110,.85); }

    /* Stock status — softly glowing dot */
    .cart-stock { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:300; letter-spacing:.01em; }
    .cart-stock__dot { width:7px; height:7px; border-radius:50%; flex:none; }
    .cart-stock--high { color:var(--c-dim); } .cart-stock--high .cart-stock__dot { background:#16a34a; box-shadow:0 0 7px -1px #16a34a; }
    .cart-stock--low  { color:rgba(245,166,35,.85); } .cart-stock--low  .cart-stock__dot { background:#f5a623; box-shadow:0 0 7px -1px #f5a623; }
    .cart-stock--soon { color:rgba(229,72,77,.85); } .cart-stock--soon .cart-stock__dot { background:#e5484d; box-shadow:0 0 7px -1px #e5484d; }

    /* Cross-sell — product floats free on the dark glass */
    .cart-xsell { padding:24px 22px 8px; margin-top:8px; border-top:1px solid var(--c-line); }
    .cart-xsell__head { font:500 11px/1 Inter; letter-spacing:.2em; text-transform:uppercase; color:var(--c-faint); margin-bottom:14px; }
    .cart-xsell__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
    .cart-xsell__card { display:block; min-width:0; border:1px solid var(--c-line); border-radius:14px; background:var(--c-card); padding:14px 14px 15px; transition:transform .45s var(--c-ease), border-color .45s var(--c-ease), box-shadow .45s var(--c-ease); }
    .cart-xsell__card:hover { transform:translateY(-3px); border-color:var(--c-line2); box-shadow:0 20px 40px -22px rgba(0,0,0,.65); }
    .cart-xsell__cardlink { display:block; text-decoration:none; }
    .cart-xsell__cardmedia { height:90px; display:grid; place-items:center; margin-bottom:10px; overflow:hidden; }
    .cart-xsell__cardmedia img { max-width:90%; max-height:82px; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)); transition:transform .5s var(--c-ease); }
    .cart-xsell__card:hover .cart-xsell__cardmedia img { transform:translateY(-2px) scale(1.04); }
    .cart-xsell__cardname { font-family:Satoshi; font-size:13px; font-weight:400; color:var(--c-text); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; }
    .cart-xsell__card:hover .cart-xsell__cardname { color:#93ebd7; }
    .cart-xsell__cardfoot { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .cart-xsell__cardprice { font-family:Satoshi; font-size:13.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
    .cart-xsell__cardprice .price { font:inherit; color:inherit; }
    .cart-xsell__cardadd { width:28px; height:28px; border-radius:50%; border:1px solid var(--c-line); background:rgba(255,255,255,.03); color:var(--c-dim); font-size:1.05rem; line-height:1; cursor:pointer; transition:all .35s ease; flex:none; }
    .cart-xsell__cardadd:hover { background:rgba(21,205,176,.16); border-color:rgba(21,205,176,.4); color:#93ebd7; }

    /* ---- Footer (note + shipping) ---- */
    .cart-drawer__foot { padding:10px 26px 0; border-top:1px solid var(--c-line); display:grid; gap:8px; }
    .cart-note { border:1px solid var(--c-line); border-radius:12px; background:rgba(255,255,255,.02); transition:border-color .3s var(--c-ease), background .3s var(--c-ease); }
    .cart-note:hover { border-color:var(--c-line2); }
    .cart-note[open] { background:rgba(255,255,255,.035); }
    .cart-note__sum { cursor:pointer; font-size:12.5px; font-weight:500; list-style:none; display:flex; align-items:center; gap:10px; color:var(--c-text); padding:10px 14px; }
    .cart-note__sum::-webkit-details-marker { display:none; }
    .cart-note__ico { width:16px; height:16px; color:var(--c-dim); flex:none; }
    .cart-note__chev { width:14px; height:14px; color:var(--c-faint); margin-left:auto; transition:transform .3s var(--c-ease); }
    .cart-note[open] .cart-note__chev { transform:rotate(180deg); }
    .cart-note__body { padding:2px 14px 12px; }
    .cart-note__field { width:100%; font:inherit; font-size:.82rem; padding:7px 11px; border:1px solid var(--c-field-line); border-radius:8px; resize:vertical; background:var(--c-field); color:var(--c-text); min-height:34px; }
    .cart-note__field::placeholder { color:var(--c-faint); }

    /* Shipping estimate */
    .cart-ship { border:1px solid var(--c-line); border-radius:12px; background:rgba(255,255,255,.02); transition:border-color .3s var(--c-ease), background .3s var(--c-ease); }
    .cart-ship:hover { border-color:var(--c-line2); }
    .cart-ship[open] { background:rgba(255,255,255,.035); }
    .cart-ship__sum { cursor:pointer; font-size:12.5px; font-weight:500; list-style:none; display:flex; align-items:center; gap:10px; color:var(--c-text); padding:10px 14px; }
    .cart-ship__sum::-webkit-details-marker { display:none; }
    .cart-ship__ico { width:17px; height:17px; color:var(--c-dim); flex:none; }
    .cart-ship__chev { width:14px; height:14px; color:var(--c-faint); margin-left:auto; transition:transform .3s var(--c-ease); }
    .cart-ship[open] .cart-ship__chev { transform:rotate(180deg); }
    .cart-ship__body { display:grid; gap: var(--space-2); padding:2px 15px 15px; }
    .cart-ship select, .cart-ship input { width:100%; font:inherit; font-size:.85rem; padding:9px 10px; border:1px solid var(--c-field-line); border-radius:8px; background:var(--c-field); color:var(--c-text); }
    .cart-ship select option { color:#111; }
    .cart-ship input::placeholder { color:var(--c-faint); }
    .cart-ship__go { width:100%; justify-content:center; background:transparent; color:#56dcc0; border:1px solid var(--c-field-line); border-radius:8px; padding:9px 10px; font:inherit; font-size:.85rem; cursor:pointer; transition:border-color .2s, color .2s; }
    .cart-ship__go:hover { border-color:rgba(21,205,176,.5); color:#93ebd7; }
    .cart-ship__list { list-style:none; margin: var(--space-1) 0 0; padding:0; display:grid; gap:6px; }
    .cart-ship__list li { display:flex; justify-content:space-between; gap: var(--space-3); font-size:.85rem; color:var(--c-text); }
    .cart-ship__list li span:last-child { font-weight:600; white-space:nowrap; }
    .cart-ship__days { color:var(--c-dim); font-weight:400; }
    .cart-ship__err, .cart-ship__loading { font-size:.8rem; color:var(--c-dim); margin: var(--space-1) 0 0; }

    /* ---- Payment bar ---- */
    .cart-drawer__pay { padding:10px 26px 14px; background:linear-gradient(180deg,rgba(10,11,13,.2),rgba(8,8,10,.55)); }
    .cart-drawer__subtotal { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:9px; }
    .cart-drawer__sublabel { font-size:13px; color:var(--c-dim); display:flex; flex-direction:column; gap:4px; }
    .cart-drawer__sublabel small { font-size:11px; font-weight:300; color:var(--c-faint); }
    .cart-drawer__subval { font-family:Satoshi; font-size:24px; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }

    /* Checkout — the hero */
    .cart-drawer__checkout { width:100%; height:47px; border:0; border-radius:13px; font-family:Satoshi; font-size:14.5px; font-weight:700; letter-spacing:.01em; color:#04211c; background:var(--c-mintgrad); box-shadow:0 0 0 1px rgba(147,235,215,.5) inset,var(--c-glow); display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; transition:transform .4s var(--c-ease),box-shadow .4s var(--c-ease),filter .4s var(--c-ease); }
    .cart-drawer__checkout:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 0 0 1px rgba(147,235,215,.65) inset,0 20px 44px -12px rgba(21,205,176,.8),0 0 40px -2px rgba(21,205,176,.5); }
    .cart-drawer__checkout:active { transform:translateY(0) scale(.99); }
    .cart-drawer__checkout svg { width:17px; height:17px; }

    .cart-drawer__viewcart { display:block; width:100%; text-align:center; margin-top:8px; background:none; border:0; font-size:12px; color:var(--c-dim); letter-spacing:.04em; padding:4px; text-decoration:none; transition:color .3s ease; }
    .cart-drawer__viewcart:hover { color:var(--c-text); }

    .cart-drawer__trust { margin-top:8px; display:flex; justify-content:center; align-items:center; gap:16px; opacity:.55; flex-wrap:wrap; }
    .cart-drawer__trust span { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--c-dim); letter-spacing:.03em; }
    .cart-drawer__trust svg { width:12px; height:12px; opacity:.8; }

    .cart-drawer__empty { padding: var(--space-8) 34px; text-align:center; color:var(--c-dim); }
    body.cart-open { overflow:hidden; }

    /* "Added" feedback: the header cart icon pops/bounces (set by JS on cart:added) */
    @keyframes cartBump { 0%,100% { transform: scale(1); } 28% { transform: scale(1.32); } 60% { transform: scale(.9); } 80% { transform: scale(1.06); } }
    [data-cart-open].cart-bump .hact__ico { animation: cartBump .6s cubic-bezier(.2,.8,.3,1.2); transform-origin: center; }
    @media (prefers-reduced-motion: reduce) { [data-cart-open].cart-bump .hact__ico { animation: none; } .cart-line:hover .cart-line__media img { transform:none; } .cart-line::before { animation:none; } }

    /* Per-line delivery estimate in the drawer — mirrors the big cart (date range when in stock, "ask us" on request) */
    /* Sits inside .cart-line__meta; flex-basis:100% drops it onto its own line on desktop (the meta
       row-gap supplies the remaining spacing), while mobile lets it stay inline as a second chip. */
    .cart-line__eta{display:inline-flex; align-items:center; gap:6px; flex-basis:100%; margin-top:1px; font:400 11px/1.2 Inter; letter-spacing:.01em; color:var(--c-dim); }
    .cart-line__eta svg{width:12px; height:12px; color:var(--c-faint); flex:none; }
    .cart-line__eta b{font-weight:600; color:var(--c-text); letter-spacing:0; font-variant-numeric:tabular-nums; }
    .cart-line__ask{font:inherit; font-weight:600; color:#f5a623; background:none; border:0; padding:0; cursor:pointer; border-bottom:1px dashed rgba(245,166,35,.5); transition:color .2s, border-color .2s; }
    .cart-line__ask:hover{color:#ffce7a; border-bottom-color:#ffce7a; }

    /* Desktop: the drawer is a fixed 480px wide, but a big monitor makes the compact 70px lines read as too
       small while a laptop makes a full 90px read as too big. So scale the product image FLUIDLY with the
       viewport — ~70px on a laptop (≤1440), ramping up to 90px on a large display (≥1920) — right on both. */
    @media (min-width: 750px) {
      .cart-line { margin:0 16px 9px; padding:12px 15px; }
      .cart-line__grid { grid-template-columns:clamp(70px, calc(10px + 4.17vw), 90px) 1fr; gap:14px; }
      .cart-line__media { width:clamp(70px, calc(10px + 4.17vw), 90px); height:auto; aspect-ratio:7 / 8; }
    }

    /* ================================================================
       MOBILE — "compact cards". A phone screen only has ~730px of height, and the desktop
       proportions spent roughly three quarters of it on chrome: a three-line header, two mostly
       empty accordions and a five-storey footer, leaving barely one product visible. So on mobile
       the same cards go on a diet — the price moves up onto the title row, the delivery info reads
       as chips instead of a second sentence, note + shipping share one row, and the payment bar
       becomes a floating glass panel. Four products now fit above the fold instead of one. */
    @media (max-width: 749px) {
      [data-cart-drawer-content] { overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .cart-drawer__lines { overflow: visible; flex: 0 0 auto; padding:6px 0 2px; }

      /* Header on one line: "Your Cart (n) ✕". The eyebrow and the "carefully selected" copy are
         desktop luxuries — font-size:0 collapses the text nodes while the count pill keeps its size. */
      .cart-drawer__head { padding:12px 16px 10px; align-items:center; }
      .cart-drawer__head > div { display:flex; align-items:center; gap:10px; min-width:0; }
      .cart-drawer__eyebrow { display:none; }
      .cart-drawer__title { font-size:19px; line-height:1.05; }
      .cart-drawer__count { margin:0; gap:0; font-size:0; }
      .cart-drawer__countpill { font-size:11px; min-width:21px; height:20px; padding:0 7px; }
      .cart-drawer__close { width:32px; height:32px; font-size:.82rem; }
      .cart-drawer__added { margin:0 16px; }

      /* Compact card — but not cramped: on a phone this is the whole product, so the image
         and type sit midway between a pure density pass and a comfortable one. */
      .cart-line { margin:0 16px 8px; padding:12px 14px 12px 16px; }
      .cart-line:hover { transform:none; box-shadow:none; }
      .cart-line::before { top:12px; bottom:12px; width:3px; }
      .cart-line__grid { grid-template-columns:62px minmax(0,1fr); gap:12px; }
      .cart-line__media { width:62px; height:62px; }
      .cart-line__media img { filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)); }

      /* Price rides on the title row, the stepper sits below it, and ✕ takes the otherwise empty
         space next to the brand line — that keeps the whole left column free for the chips, which
         need ~150px and don't survive sharing the row with a stepper. */
      .cart-line__info { grid-template-columns:minmax(0,1fr) auto; column-gap:8px;
        grid-template-areas:"eyebrow remove" "title price" "meta qty"; }
      .cart-line__eyebrow { font-size:9.8px; margin-bottom:5px; }
      .cart-line__title { font-size:13.8px; line-height:1.27; }
      .cart-line__price { font-size:14.8px; align-self:start; margin-top:1px; }
      /* Two lines with meaning: the size sits alone, then stock + delivery below it.
         They are ONE pill, not two — "Only 4 left" and the date are a single statement, and
         side by side they would not fit the narrow meta column beside the stepper anyway. */
      .cart-line__meta { margin-top:7px; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
      .cart-line__delivery {
        display:inline-flex; flex-wrap:nowrap; align-items:center; gap:7px; max-width:100%;
        border:1px solid var(--c-line); border-radius:999px; padding:4px 9px;
      }
      /* the parts give up their own frames — the wrapper is the frame now */
      .cart-line__delivery .cart-stock,
      .cart-line__delivery .cart-line__eta { border:0; padding:0; border-radius:0; }
      /* hairline between the two facts */
      .cart-line__delivery .cart-line__eta::before {
        content:''; flex:none; width:1px; height:11px; background:rgba(255,255,255,.16); margin-right:2px;
      }
      /* the pill takes on the stock colour so the status still reads at a glance */
      .cart-line__delivery:has(.cart-stock--low)  { border-color:rgba(245,166,35,.34); }
      .cart-line__delivery:has(.cart-stock--soon) { border-color:rgba(229,72,77,.34); }
      .cart-line__delivery:has(.cart-stock--high) { border-color:rgba(21,205,176,.30); }
      .cart-line__qty button { width:25px; height:23px; font-size:15px; }
      .cart-line__qty-input { width:24px; font-size:13.5px; }
      /* The variant moves into the title so the chip row keeps its full width. */
      .cart-line__variant { display:none; }
      .cart-line__titlevar { display:inline; color:var(--c-dim); }

      /* Delivery reads as chips — one pill per fact, no second sentence. */
      .cart-stock, .cart-line__eta, .cart-line__size { border-radius:999px; padding:4px 8px; font-size:10px; line-height:1.4; white-space:nowrap; }
      .cart-stock, .cart-line__eta { border:1px solid var(--c-line); }
      .cart-line__size b { font-size:11.5px; }  /* keeps the chip the same height as its neighbours */
      .cart-stock__long { display:none; }
      .cart-stock__short { display:inline; }
      .cart-line__eta { flex-basis:auto; margin-top:0; }
      .cart-line__eta svg, .cart-line__eta-lbl { display:none; }
      .cart-stock--low { border-color:rgba(245,166,35,.34); }
      .cart-stock--soon { border-color:rgba(229,72,77,.34); }
      .cart-line--soon .cart-line__eta { border-color:rgba(245,166,35,.34); }
      /* In stock: the date chip says it better than the words, so it carries the green dot itself. */
      .cart-line--high .cart-stock { display:none; }
      .cart-line--high .cart-line__eta { border-color:rgba(46,205,120,.3); }
      .cart-line--high .cart-line__eta::before { content:''; width:5px; height:5px; border-radius:50%; flex:none; background:#16a34a; box-shadow:0 0 7px -1px #16a34a; }

      /* No hover on touch — the stepper shows its frame permanently. */
      .cart-line__qty { margin:0; align-self:center; border-color:var(--c-line); background:rgba(255,255,255,.04); }
      .cart-line__qty button { width:19px; height:20px; font-size:13px; color:var(--c-dim); }
      .cart-line__qty-input { width:18px; font-size:12px; }
      /* "Remove" as a ✕ — the word costs ~45px the card doesn't have. The aria-label carries the name. */
      .cart-line__remove { align-self:center; justify-self:end; margin:0; font-size:0; width:20px; height:20px; display:grid; place-items:center; }
      .cart-line__remove::before { content:'✕'; font-size:10.5px; line-height:1; }

      /* Note + shipping share one row; whichever is open takes the full width so its form fits. */
      .cart-drawer__foot { padding:12px 16px 0; grid-template-columns:1fr 1fr; gap:8px; }
      .cart-note[open], .cart-ship[open] { grid-column:1 / -1; }
      .cart-note__sum, .cart-ship__sum { padding:9px 11px; font-size:11px; gap:6px; min-width:0; }
      .cart-note__sum > span, .cart-ship__sum > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .cart-note__ico, .cart-ship__ico { width:14px; height:14px; }
      .cart-note__chev, .cart-ship__chev { width:12px; height:12px; }
      .cart-ship__sumlong { display:none; }

      /* Floating glass payment panel, clear of the iOS home indicator. */
      /* margin-top:auto keeps it at the bottom of a short cart, sticky keeps it in view on a long one. */
      .cart-drawer__pay { position:sticky; bottom:0; z-index:2;
        margin:auto 16px calc(14px + env(safe-area-inset-bottom, 0px));
        padding:14px 16px 15px; border-radius:18px;
        background:rgba(10,10,13,.78); border:1px solid rgba(255,255,255,.1);
        -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
        box-shadow:0 -10px 40px -22px rgba(21,205,176,.45), 0 18px 40px -24px rgba(0,0,0,.9); }
      .cart-drawer__subtotal { margin-bottom:8px; gap:10px; }
      .cart-drawer__sublabel { min-width:0; font-size:12px; }
      .cart-drawer__sublabel small { font-size:9.5px; line-height:1.35; }
      .cart-drawer__subval { font-size:21px; }
      .cart-drawer__viewcart { margin-top:7px; font-size:11.5px; }
      .cart-drawer__trust { margin-top:7px; gap:10px; flex-wrap:nowrap; }
      .cart-drawer__trust span { font-size:9px; gap:4px; white-space:nowrap; }
      .cart-drawer__trust svg { width:10px; height:10px; }
      .cart-xsell { padding:18px 16px 4px; }
    }

    /* ===== Shared "ask us" delivery pop-up — self-contained (defines its own vars so it looks identical anywhere, independent of section tokens/placement) ===== */
    .cg-ask{
      --mint:#15cdb0; --mint-300:#5fe0cb; --amber:#f5a623; --ink:#04140f;
      --bg1:#0c0c10; --bg2:#101014; --tx:#f4f4f6; --tx-2:#b9b9c2; --tx-dim:#9b9ba6; --tx-faint:#6c6c78;
      --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
      --field:rgba(255,255,255,.05); --field-line:rgba(255,255,255,.14);
      --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
      --sans:"Inter",system-ui,sans-serif; --disp:"Satoshi","Inter",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
      --radius-md:14px; --radius-lg:22px; --glow:0 10px 34px -10px rgba(21,205,176,.55);
      position:fixed; right:0; bottom:0; z-index:1200; pointer-events:none;
    }
    .cg-ask[hidden]{display:none}
    .cg-ask__card{
      pointer-events:auto; position:fixed; right:24px; bottom:24px; width:min(360px, calc(100vw - 32px));
      background:linear-gradient(160deg, var(--bg2), var(--bg1));
      border:1px solid var(--line-2); border-radius:var(--radius-lg);
      padding:20px 20px 18px; box-shadow:0 30px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4);
      transform:translateY(16px) scale(.98); opacity:0;
      transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
    }
    .cg-ask.is-open .cg-ask__card{transform:none; opacity:1}
    .cg-ask__card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
      background:linear-gradient(150deg, rgba(21,205,176,.5), transparent 42%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
    .cg-ask__x{position:absolute; top:12px; right:12px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--glass); color:var(--tx-2); cursor:pointer; transition:.2s}
    .cg-ask__x svg{width:14px; height:14px}
    .cg-ask__x:hover{color:var(--tx); border-color:var(--line-2); background:var(--glass-2)}
    .cg-ask__eyebrow{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-300)}
    .cg-ask__dot{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber)}
    .cg-ask__title{margin:9px 0 4px; font-family:var(--disp); font-weight:700; font-size:17px; line-height:1.2; color:var(--tx); padding-right:26px; overflow-wrap:anywhere}
    .cg-ask__sub{margin:0 0 14px; font-size:12px; line-height:1.45; color:var(--tx-dim)}
    .cg-ask__fields{display:flex; flex-direction:column; gap:9px}
    .cg-ask__fields[hidden],.cg-ask__ok[hidden]{display:none}
    .cg-ask__area,.cg-ask__inp{width:100%; font-family:var(--sans); font-size:13px; color:var(--tx); background:var(--field); border:1px solid var(--field-line); border-radius:var(--radius-md); padding:11px 12px; transition:border-color .2s, box-shadow .2s}
    .cg-ask__area{resize:vertical; min-height:74px; max-height:184px; line-height:1.4; overflow-y:auto}
    .cg-ask__area::placeholder,.cg-ask__inp::placeholder{color:var(--tx-faint)}
    .cg-ask__area:focus,.cg-ask__inp:focus{outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(21,205,176,.18)}
    .cg-ask__send{margin-top:3px; width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--mint); border:0; border-radius:var(--radius-md); padding:12px; cursor:pointer; transition:.2s; box-shadow:var(--glow)}
    .cg-ask__send:hover{background:var(--mint-300)}
    .cg-ask__send:disabled{opacity:.6; cursor:default}
    .cg-ask__fine{margin:8px 0 0; text-align:center; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-faint)}
    .cg-ask__ok{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--tx-2); padding:6px 0 4px}
    .cg-ask__ok svg{width:20px; height:20px; flex:none; color:var(--mint-300); margin-top:1px}
    @media (max-width:600px){ .cg-ask__card{right:12px; left:12px; bottom:12px; width:auto} }
    @media (prefers-reduced-motion:reduce){ .cg-ask__card{transition:opacity .2s ease; transform:none} }
/* END_SECTION:cart-drawer */

/* START_SECTION:category-grid (INDEX:10) */
.category-grid__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    @media (min-width: 750px) { .category-grid__grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1100px) { .category-grid__grid { grid-template-columns: repeat(6, 1fr); } }
    .category-tile { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; aspect-ratio: 3/4; background: var(--neutral-100); }
    .category-tile__media, .category-tile__media img, .category-tile .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .category-tile__title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3); color: #fff; font-weight: 700; background: linear-gradient(180deg, transparent, rgba(10,10,11,.7)); }
/* END_SECTION:category-grid */

/* START_SECTION:contact-form (INDEX:12) */
.contact { padding-block: var(--space-12); }
    .contact__inner { max-width: 900px; margin-inline: auto; }
    .contact__intro { color: var(--neutral-700); margin-top: var(--space-3); max-width: 560px; }
    .contact__grid { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
    @media (min-width: 800px) { .contact__grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
    .contact__form { display: grid; gap: var(--space-4); }
    .contact__field { display: grid; gap: var(--space-2); font-weight: 600; font-size: .9rem; }
    .contact__field input, .contact__field textarea { font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); width: 100%; background: #fff; }
    .contact__field textarea { resize: vertical; }
    .contact__submit { justify-self: start; }
    .contact__ok { color: var(--mint-700); font-weight: 700; }
    .contact__errors { color: #b00020; font-weight: 600; }
    .contact__info { color: var(--neutral-700); line-height: 1.7; }
    .contact__info > * + * { margin-top: var(--space-3); }
    .contact__info a { color: var(--mint-700); }
/* END_SECTION:contact-form */

/* START_SECTION:demo-hero (INDEX:14) */
.demo-hero { padding-block: var(--space-24); text-align: center; }
    .demo-hero__kicker { color: var(--mint-700); letter-spacing: .2em; }
    .demo-hero__media { margin-top: var(--space-12); }
/* END_SECTION:demo-hero */

/* START_SECTION:exp-3d (INDEX:17) */
.ex3d { background: radial-gradient(120% 100% at 72% 26%, #13201d 0%, #060708 60%); color:#fff; display:grid; align-items:center; gap: var(--space-8); padding: var(--space-16) var(--container-pad); min-height: 92vh; }
  @media (min-width: 900px){ .ex3d { grid-template-columns: 1fr 1.15fr; gap: var(--space-12); max-width: var(--container-max); margin-inline:auto; } }
  .ex3d__copy { max-width: 540px; }
  .ex3d__eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .ex3d__h1 { font-family:"Satoshi"; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:.98; font-weight:800; letter-spacing:-.03em; margin:0; }
  .ex3d__sub { font-size:1.1rem; color: rgba(255,255,255,.82); margin: var(--space-6) 0 var(--space-8); max-width: 42ch; }
  .ex3d__hint { display:block; margin-top: var(--space-6); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--mint-400); }
  .ex3d__viewer { height: min(70vh, 620px); width:100%; }
  .ex3d__viewer model-viewer { width:100%; height:100%; background:transparent; --poster-color:transparent; }
/* END_SECTION:exp-3d */

/* START_SECTION:exp-cinematic (INDEX:18) */
.cine { background:#060708; color:#fff; }
  .cine__hero, .cine__panel, .cine__finale { position:relative; min-height: 100vh; display:flex; align-items:center; background-size:cover; background-position:center; background-attachment:fixed; }
  .cine__finale { min-height: 90vh; }
  .cine__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,7,8,.55), rgba(6,7,8,.35) 40%, rgba(6,7,8,.92)); }
  .cine__scrim--side { background: linear-gradient(90deg, rgba(6,7,8,.9) 0%, rgba(6,7,8,.5) 45%, rgba(6,7,8,.15) 100%); }
  .cine__scrim--right { background: linear-gradient(270deg, rgba(6,7,8,.9) 0%, rgba(6,7,8,.5) 45%, rgba(6,7,8,.15) 100%); }
  .cine__hero-in, .cine__panel-in, .cine__finale-in { position:relative; z-index:1; width: min(92vw, var(--container-max)); margin-inline:auto; padding-inline: var(--container-pad); }
  .cine__hero-in { max-width: 900px; }
  .cine__eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .cine__h1 { font-family:"Satoshi"; font-size: clamp(2.8rem, 8vw, 6.5rem); line-height:.95; font-weight:800; letter-spacing:-.03em; margin:0; }
  .cine__lead { font-size: clamp(1.05rem, 2vw, 1.4rem); color: rgba(255,255,255,.85); margin: var(--space-6) 0 var(--space-8); max-width: 40ch; }
  .cine__cue { position:absolute; bottom: var(--space-8); left:50%; transform:translateX(-50%); z-index:1; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(255,255,255,.7); animation: cine-bob 2s ease-in-out infinite; }
  @keyframes cine-bob { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }
  .cine__panel-in { max-width: 560px; }
  .cine__panel-in--right { margin-left:auto; text-align:right; }
  .cine__num { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .cine__h2 { font-family:"Satoshi"; font-size: clamp(2rem, 4.5vw, 3.6rem); line-height:1; font-weight:800; letter-spacing:-.02em; margin:0; }
  .cine__h2--big { font-size: clamp(2.6rem, 7vw, 5.5rem); }
  .cine__p { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.82); margin-top: var(--space-4); max-width: 42ch; }
  .cine__panel-in--right .cine__p { margin-left:auto; }
  .cine__stats { background:#0b0c0e; display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8) var(--space-4); padding: var(--space-16) var(--container-pad); }
  @media (min-width: 760px){ .cine__stats { grid-template-columns: repeat(4,1fr); } }
  .cine__stat { text-align:center; }
  .cine__stat strong { display:block; font-family:"Satoshi"; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight:800; color:#fff; letter-spacing:-.02em; }
  .cine__stat span { font-size:.85rem; color: var(--mint-400); text-transform:uppercase; letter-spacing:.12em; }
  .cine__finale-in { text-align:center; max-width: 720px; }
  .cine__finale-cta { display:flex; gap: var(--space-4); justify-content:center; flex-wrap:wrap; margin-top: var(--space-8); }
  .cine__finale-in .cine__p { margin-inline:auto; }
  .cine__ghost { border:1px solid rgba(255,255,255,.5); color:#fff; }
  .cine__ghost:hover { border-color:#fff; background: rgba(255,255,255,.08); }
  @media (max-width: 900px){ .cine__hero, .cine__panel, .cine__finale { background-attachment:scroll; min-height: 82vh; } .cine__panel-in--right { text-align:left; } .cine__panel-in--right .cine__p { margin-left:0; } }
/* END_SECTION:exp-cinematic */

/* START_SECTION:experience-scroll (INDEX:19) */
.xs { position:relative; height: calc(var(--xs-scenes, 4) * 100vh); background:#060708; }
  .xs__stage { position:sticky; top:0; height:100vh; overflow:hidden; }
  .xs__scene { position:absolute; inset:0; opacity:0; }
  .xs__scene.is-on { opacity:1; }
  .xs__bg { position:absolute; inset:0; background-image: var(--img); background-size:cover; background-position:center; transform:scale(1.08); animation: xs-kb 14s ease-in-out infinite alternate; }
  @keyframes xs-kb { from{ transform:scale(1.08) translate3d(0,0,0);} to{ transform:scale(1.2) translate3d(-2%,-2%,0);} }
  .xs__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,7,8,.5), rgba(6,7,8,.25) 40%, rgba(6,7,8,.92)); }
  .xs__scrim--full { background: radial-gradient(120% 100% at 50% 50%, rgba(6,7,8,.5), rgba(6,7,8,.88)); }
  .xs__cap { position:absolute; left:0; right:0; bottom: 14vh; width: min(92vw, var(--container-max)); margin-inline:auto; padding-inline: var(--container-pad); color:#fff; }
  .xs__cap--center { top:50%; bottom:auto; transform:translateY(-50%); text-align:center; }
  .xs__eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .xs__h { font-family:"Satoshi"; font-size: clamp(2.4rem, 6.5vw, 5.5rem); line-height:.96; font-weight:800; letter-spacing:-.03em; margin:0; text-shadow:0 2px 40px rgba(0,0,0,.5); }
  .xs__h--big { font-size: clamp(3rem, 9vw, 7rem); }
  .xs__p { font-size: clamp(1rem, 1.8vw, 1.3rem); color: rgba(255,255,255,.85); margin-top: var(--space-4); max-width: 42ch; }
  .xs__cap--center .xs__p { margin-inline:auto; }
  .xs__cta { display:flex; gap: var(--space-4); justify-content:center; flex-wrap:wrap; margin-top: var(--space-8); }
  .xs__ghost { border:1px solid rgba(255,255,255,.5); color:#fff; }
  .xs__ghost:hover { border-color:#fff; background: rgba(255,255,255,.08); }
  .xs__progress { position:sticky; bottom:0; height:3px; background: rgba(255,255,255,.12); z-index:2; margin-top:-3px; }
  .xs__progress span { display:block; height:100%; width:0; background: var(--mint-500); }
  .no-js .xs { height:auto; } .no-js .xs__stage { position:static; height:auto; } .no-js .xs__scene { position:relative; opacity:1; min-height:100vh; }
  @media (prefers-reduced-motion: reduce){ .xs__bg { animation:none; } }
/* END_SECTION:experience-scroll */

/* START_SECTION:experience-statement (INDEX:20) */
.xstatement { padding-block: var(--space-12); }
    .xstatement--dark { background: var(--ink); color: #fff; }
    .xstatement__inner { max-width: 900px; margin-inline: auto; text-align: center; }
    .xstatement__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--mint-500); margin: 0 0 var(--space-4); }
    .xstatement__heading { font-family: "Satoshi", sans-serif; font-weight: 800; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.12; }
    .xstatement__heading em { color: var(--mint-500); font-style: normal; }
    .xstatement__lines { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); }
    .xstatement__line { font-family: "Satoshi", sans-serif; font-weight: 700; font-size: clamp(1.2rem, 3.5vw, 2rem); }
    .xstatement--dark .xstatement__line { color: rgba(255,255,255,.85); }
    .xstatement__body { margin-top: var(--space-6); color: var(--neutral-700); line-height: 1.7; }
    .xstatement--dark .xstatement__body { color: rgba(255,255,255,.7); }
    .js .xstatement__line[data-reveal] { transition-delay: calc(var(--i) * 80ms); }
/* END_SECTION:experience-statement */

/* START_SECTION:experience-video (INDEX:21) */
.cv { position:relative; height: calc(var(--cv-n,4) * 100vh); background:#060708; }
  .cv__stage { position:sticky; top:0; height:100vh; overflow:hidden; }
  .cv__scene { position:absolute; inset:0; opacity:0; }
  .cv__scene.is-on { opacity:1; }
  .cv__vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#060708; }
  .cv__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,7,8,.45), rgba(6,7,8,.2) 40%, rgba(6,7,8,.9)); }
  .cv__scrim--full { background: radial-gradient(120% 100% at 50% 50%, rgba(6,7,8,.45), rgba(6,7,8,.85)); }
  .cv__cap { position:absolute; left:0; right:0; bottom: 14vh; width:min(92vw,var(--container-max)); margin-inline:auto; padding-inline: var(--container-pad); color:#fff; }
  .cv__cap--center { top:50%; bottom:auto; transform:translateY(-50%); text-align:center; }
  .cv__eyebrow, .cv__num { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .cv__h { font-family:"Satoshi"; font-size: clamp(2.4rem, 6vw, 5rem); line-height:.97; font-weight:800; letter-spacing:-.03em; margin:0; text-shadow:0 2px 40px rgba(0,0,0,.55); }
  .cv__h--xl { font-size: clamp(3rem, 9vw, 7rem); }
  .cv__p { font-size: clamp(1rem,1.8vw,1.3rem); color: rgba(255,255,255,.88); margin-top: var(--space-4); max-width: 42ch; text-shadow:0 1px 20px rgba(0,0,0,.5); }
  .cv__cap--center .cv__p { margin-inline:auto; }
  .cv__cta { display:flex; gap: var(--space-4); justify-content:center; flex-wrap:wrap; margin-top: var(--space-8); }
  .cv__ghost { border:1px solid rgba(255,255,255,.55); color:#fff; }
  .cv__ghost:hover { border-color:#fff; background: rgba(255,255,255,.1); }
  .cv__flash { position:absolute; inset:0; background: var(--mint-500); opacity:0; pointer-events:none; }
  .cv__progress { position:sticky; bottom:0; height:3px; background: rgba(255,255,255,.12); margin-top:-3px; z-index:2; }
  .cv__progress span { display:block; height:100%; width:0; background: var(--mint-500); }
  .no-js .cv { height:auto; } .no-js .cv__stage { position:static; height:auto; } .no-js .cv__scene { position:relative; opacity:1; min-height:100vh; }
/* END_SECTION:experience-video */

/* START_SECTION:faq (INDEX:22) */
.faq { padding-block: var(--space-12); }
    .faq__inner { max-width: 760px; margin-inline: auto; }
    .faq__heading { text-align: center; }
    .faq__intro { text-align: center; color: var(--neutral-700); margin-top: var(--space-3); }
    .faq__list { margin-top: var(--space-8); display: grid; gap: var(--space-3); }
    .faq__item { border: 1px solid var(--neutral-300); border-radius: var(--radius-md); background: #fff; }
    .faq__q { cursor: pointer; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-5); font-weight: 700; font-family: "Satoshi"; list-style: none; position: relative; }
    .faq__q::-webkit-details-marker { display: none; }
    .faq__q::after { content: "+"; position: absolute; right: var(--space-5); top: var(--space-4); font-weight: 400; font-size: 1.3em; line-height: 1; }
    .faq__item[open] .faq__q::after { content: "\2212"; }
    .faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--neutral-700); line-height: 1.7; }
    .faq__a > * + * { margin-top: var(--space-3); }
    .faq__a a { color: var(--mint-700); }
/* END_SECTION:faq */

/* START_SECTION:find-parts (INDEX:24) */
.fparts { position: relative; z-index: 3; }   /* UNTER New Arrivals: NA gleitet beim Schwenk oben drüber raus */
  /* Überlappung mit New Arrivals: der Wegflug startet, wenn NAs Unterkante fast unten
     am Viewport steht — so bleibt vor dem Abheben kaum schwarzer Rand unter der Sektion */
  @media (min-width: 750px) { .fparts { margin-top: -88vh; } }
  /* Im Überlapp-Modus (JS setzt die Klasse): oben transparent, damit die Box nicht den
     „Our Premium Brands"-Schriftzug der Helm-Sektion verdeckt — deckend erst ab der Kante,
     die unterhalb von New Arrivals sichtbar wird (88vh = exakt die Überlappung) */
  .fparts.fp-overlap { background: linear-gradient(to bottom, rgba(3,9,12,0) 0, rgba(3,9,12,0) 76vh, rgb(3,9,12) 88vh) !important; }
  .fparts__spacer { position: relative; }
  .fparts__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
  .fp-room { position: absolute; inset: 0;
    background: radial-gradient(110% 80% at 50% 20%, rgba(86,220,192,.05), transparent 55%); }
  /* 3D-Garage (echtes Modell, lazy): liegt unter Header/Konsole, ersetzt die CSS-Kulisse */
  .fp-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; display: block; }
  .fp-3d[hidden] { display: none; }
  .fparts__stage.is3d .fp-shutter, .fparts__stage.is3d .fp-tube, .fparts__stage.is3d .fp-floor,
  .fparts__stage.is3d .fp-impact, .fparts__stage.is3d .fp-dust { display: none; }
  /* dunkler Lichthof hinter Konsole/Headline, sobald sie da sind — Lesbarkeit über der 3D-Szene */
  .fparts__stage.is3d.show .fp-room { background: radial-gradient(62% 60% at 50% 44%, rgba(2,8,10,.82), rgba(2,8,10,.35) 68%, rgba(2,8,10,0)); }
  /* Ausfahrt endet in komplettem Schwarz */
  .fp-blackout { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 20; pointer-events: none; }
  /* im Menü: 3D-Szene wird unscharf; Ein-/Ausblenden beim Pin (sonst deckt der Canvas
     vor dem Start den Schriftzug der Helm-Sektion ab) */
  .fp-3d { transition: filter .45s, opacity .25s; }
  .fp-shutter { transition: opacity .25s; }
  /* ---- Deckendes Garagentor-Overlay (Desktop): Optik = echtes Tor, blickdicht ---- */
  .fp-wipe { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh;
    z-index: 99; transform: translateY(-102%); opacity: 0; pointer-events: none; overflow: hidden; will-change: transform;  /* unter Site-Header (z100): Navi bleibt sichtbar */
    background-color: #02100f;   /* DECKEND — dahinter ist nichts zu sehen */
    background-image:
      radial-gradient(60% 54% at 50% 46%, rgba(86,220,192,.30), rgba(86,220,192,.06) 46%, rgba(2,12,12,0) 74%),
      linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,.55)); }
  .fp-wipe__logo { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); width: min(34vw, 540px); aspect-ratio: 720 / 478;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
    background: radial-gradient(60% 60% at 50% 42%, #c8ffef, #56dcc0 56%, #34c4a6);
    animation: fpWipeGlow 2.4s ease-in-out infinite; }
  /* gleicher Puls wie das echte 3D-Tor-Logo (logoMesh: opacity .74→1, scale 1→1.035, ~2.4s) */
  /* nur Opacity+Scale animieren (compositor-billig); der Glow kommt aus dem teal Radial-Gradient im .fp-wipe-Hintergrund — KEIN animierter drop-shadow-Blur mehr (war auf schwacher GPU teuer) */
  @keyframes fpWipeGlow {
    0%,100% { opacity: .74; transform: translate(-50%,-50%) scale(1); }
    50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.035); } }
  .fp-wipe__logo { filter: drop-shadow(0 0 22px rgba(86,220,192,.5)); will-change: opacity, transform; }
  .fp-wipe__slats { position: absolute; inset: 0; pointer-events: none;  /* kein mix-blend-mode: screen mehr → Tor bleibt eine billige Compositor-Ebene, translateY ruckelt nicht */
    background-image: repeating-linear-gradient(180deg,
      rgba(152,242,225,.6) 0px, rgba(152,242,225,.6) 1.6px,
      rgba(86,220,192,.12) 3.4px,
      rgba(2,12,12,0) 13px, rgba(2,12,12,0) 88px,
      rgba(152,242,225,.6) 90px); }
  .fp-wipe::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #7cf0d8;
    box-shadow: 0 0 26px 5px rgba(86,220,192,.7), 0 0 4px rgba(86,220,192,1); z-index: 2; }
  @media (max-width: 749px) { .fp-wipe { display: none !important; } }
  /* Bike-Auswahl/Fitment offen: Umgebung abdunkeln (radialer Scrim — Bike-Mitte bleibt klar,
     drumherum dunkler) damit die Panels (Suche, Treffer, Marken) gut lesbar sind. */
  .fparts__stage.is3d.focused .fp-3d { filter: saturate(1.02) brightness(.78); }
  .fparts__stage.is3d.focused::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(58% 56% at 50% 50%, rgba(2,8,10,0) 0%, rgba(2,8,10,.34) 46%, rgba(2,8,10,.74) 100%); }
  /* Konsole fliegt rechts neben dem herangezoomten Bike ein */
  .fparts__stage.is3d.focused .fp-console { animation: fpConsoleIn .6s cubic-bezier(.2,.9,.3,1.12) both; }
  @keyframes fpConsoleIn { 0%{opacity:0;transform:translate(-50%,-50%) translateY(120px) scale(.85)}
    100%{opacity:1;transform:translate(-50%,-50%)} }

  /* ---- Such-Callout: Leitlinie ENTFERNT (Nutzer-Wunsch), nur noch der Tag rechts vom Bike ---- */
  .fp-leadsvg { display: none !important; }
  .fp-tag { position: absolute; z-index: 9; transform: translate(-50%, -50%); display: flex; flex-direction: column;
    align-items: flex-start; gap: 3px; padding: 11px 42px 11px 18px; border-radius: 12px; cursor: pointer;
    background: rgba(4,12,14,.94); border: 1px solid rgba(86,220,192,.5); box-shadow: 0 0 22px rgba(86,220,192,.28);
    opacity: 0; pointer-events: none; transition: opacity .45s, transform .2s, box-shadow .3s; }
  .fparts__stage.is3d.show .fp-tag { opacity: 1; pointer-events: auto; animation: fpTagHolo .8s ease-out 1 backwards, fpTagPulse 2.2s .8s infinite; }
  /* Konsole offen → Tag weg. Der zweite Selektor MUSS die Einblende-Regel
     `.is3d.show .fp-tag` (4 Klassen) an Spezifität schlagen, sonst bleibt der Tag
     stehen und überdeckt die Marken-Chips. */
  .fparts__stage.focused .fp-tag,
  .fparts__stage.is3d.show.focused .fp-tag { opacity: 0; pointer-events: none; animation: none; }
  .fp-tag:hover { transform: translate(-50%, -50%) scale(1.05); border-color: #56dcc0; box-shadow: 0 0 34px rgba(86,220,192,.6); }
  /* Hologramm-Boot: baut sich von unten scanzeilen-artig auf (mit Flacker) */
  @keyframes fpTagHolo {
    0%   { opacity: 0; clip-path: inset(100% 0 0 0); filter: brightness(1.9); }
    30%  { opacity: .85; clip-path: inset(42% 0 0 0); }
    45%  { opacity: .35; }
    60%  { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.35); }
    70%  { opacity: .6; }
    82%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; } }
  .fp-tag .fp-tag-k { font: 700 .6rem/1 'Space Mono', ui-monospace, monospace; letter-spacing: .22em;
    text-transform: uppercase; color: #56dcc0; }
  .fp-tag b { font: 800 1.05rem/1.05 'Satoshi', 'Sora', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #eaf6f2; }
  .fp-tag i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: #56dcc0; font-size: 1.15rem; }
  @keyframes fpTagPulse { 0%,100%{box-shadow:0 0 18px rgba(86,220,192,.28)} 50%{box-shadow:0 0 34px rgba(86,220,192,.6)} }
  /* „Click to enter" vor dem geschlossenen Tor */
  .fp-enter { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); z-index: 8; text-align: center;
    cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s; }
  .fp-enter b { display: block; font: 700 clamp(14px,1.6vw,20px)/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .3em; text-transform: uppercase; color: #bdfff0; animation: fpEnterPulse 2.1s infinite; }
  .fp-enter span { display: block; margin-top: 11px; font: 600 10px/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .3em; color: rgba(151,162,161,.85); text-transform: uppercase; }
  @keyframes fpEnterPulse { 0%,100%{text-shadow:0 0 14px rgba(86,220,192,.5)} 50%{text-shadow:0 0 36px rgba(86,220,192,1)} }
  /* X — Garage verlassen */
  .fp-x { position: absolute; top: -15px; right: -15px; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(86,220,192,.5); background: rgba(3,10,12,.95); color: #97a2a1; font-size: 1.1rem;
    line-height: 1; cursor: pointer; z-index: 11; display: none; }
  .fparts__stage.is3d.focused .fp-x { display: block; }
  .fp-x:hover { color: #56dcc0; border-color: #56dcc0; box-shadow: 0 0 14px rgba(86,220,192,.4); }
  .fp-credit { position: absolute; right: 14px; bottom: 10px; z-index: 12; font: 500 9px/1.4 'Space Mono', ui-monospace, monospace;
    letter-spacing: .08em; color: rgba(151,162,161,.45); }
  .fp-credit a { color: inherit; }
  .fp-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
    background: repeating-linear-gradient(90deg, rgba(86,220,192,.04) 0 2px, transparent 2px 120px),
                linear-gradient(to top, rgba(7,16,19,.9), transparent); }
  .fp-tube { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); width: 56%; height: 5px; border-radius: 4px;
    background: #dffff5; opacity: 0; box-shadow: 0 0 30px rgba(189,255,240,.8), 0 0 90px rgba(86,220,192,.4); }
  .fparts__stage.lit .fp-tube { animation: fpFlick .55s forwards; }
  @keyframes fpFlick { 0%{opacity:0} 30%{opacity:1} 45%{opacity:.2} 60%{opacity:1} 75%{opacity:.45} 100%{opacity:1} }

  .fp-hdr { position: absolute; top: 21vh; left: 0; right: 0; text-align: center; z-index: 5; pointer-events: none;
    opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
  .fparts__stage.show .fp-hdr { opacity: 1; transform: none; }
  /* in der Nahansicht die große Headline ausblenden — sie würde den Zoom überdecken */
  .fparts__stage.focused .fp-hdr { opacity: 0; }
  .fp-hdr .ey { font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .42em;
    text-transform: uppercase; color: #56dcc0; margin: 0 0 12px; }
  .fp-hdr h2 { font-family: 'Satoshi', 'Sora', sans-serif; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase; color: #eaf6f2; margin: 0; }

  /* ---- Werkzeugschrank ---- */
  .fp-console { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%) translateY(30px); width: min(740px, 93vw);
    z-index: 10; opacity: 0; pointer-events: none; transition: opacity .5s .12s, transform .6s .12s cubic-bezier(.2,.8,.3,1); }
  /* Nahansicht: Konsole rechts neben dem herangezoomten Bike, schmaler — erst hier klickbar */
  .fparts__stage.focused .fp-console { opacity: 1; pointer-events: auto; left: 70%; top: 50%; width: min(560px, 54vw); transform: translate(-50%, -50%); }
  @media (max-width: 1100px) and (min-width: 750px) { .fparts__stage.focused .fp-console { left: 64%; width: min(480px, 56vw); } }
  /* ---- Live-Timing-Monitor ---- */
  .fp-box { position: relative; border-radius: 6px; overflow: hidden; background: #040b0d;
    border: 1px solid rgba(86,220,192,.35); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
  .fp-cap { display: flex; align-items: center; gap: 9px; padding: 11px 16px;
    background: linear-gradient(#0b1a1e, #071114); border-bottom: 1px solid rgba(86,220,192,.3);
    font: 700 10px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .32em; color: #56dcc0; text-transform: uppercase; }
  .fp-cap::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d;
    box-shadow: 0 0 10px rgba(255,77,77,.8); animation: fpLive 1.4s infinite; }
  @keyframes fpLive { 0%,100%{opacity:1} 50%{opacity:.2} }
  .fp-row1 { display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid rgba(86,220,192,.15); }
  .fp-row1::before { content: '»'; color: #56dcc0; font-size: 1.3em; font-family: 'Space Mono', ui-monospace, monospace; }
  .fp-row1 input { flex: 1; background: none; border: 0; outline: none; color: #eaf6f2;
    font: 600 clamp(17px,2.2vw,24px)/1.3 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; padding: 22px 0; caret-color: #56dcc0; }
  .fp-row1 input::placeholder { color: rgba(151,162,161,.5); }
  .fp-sug { display: none; max-height: min(300px, 34vh); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; touch-action: pan-y; }
  .fp-sug.open { display: block; }
  .fp-srow { display: grid; grid-template-columns: 46px 96px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px;
    cursor: pointer; border-bottom: 1px solid rgba(86,220,192,.08); animation: fpRowIn .3s both; }
  @keyframes fpRowIn { from{transform:translateX(-18px);opacity:0;background:rgba(86,220,192,.2)} to{transform:none;opacity:1} }
  .fp-srow:nth-child(1){animation-delay:.02s} .fp-srow:nth-child(2){animation-delay:.06s} .fp-srow:nth-child(3){animation-delay:.1s}
  .fp-srow:nth-child(4){animation-delay:.14s} .fp-srow:nth-child(5){animation-delay:.18s} .fp-srow:nth-child(6){animation-delay:.22s}
  .fp-srow:nth-child(7){animation-delay:.26s}
  .fp-srow:hover, .fp-srow.hot { background: rgba(86,220,192,.1); box-shadow: inset 3px 0 0 #56dcc0; }
  .fp-srow .pos { font: 800 13px/1 'Space Mono', ui-monospace, monospace; color: #b48cff; letter-spacing: .06em; }
  .fp-srow .mk { font: 700 10px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .2em; color: #8fa3a0; text-transform: uppercase; }
  .fp-srow .md { font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #e8f2ef; }
  .fp-srow .md em { font-style: normal; color: #56dcc0; }
  .fp-srow .yr { font: 600 11px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .12em; color: #69f0ae; }
  .fp-more { padding: 11px 16px; font: 600 10px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .22em;
    color: rgba(143,163,160,.7); text-transform: uppercase; }
  .fp-yhead { padding: 13px 16px 4px; font: 700 10px/1.6 'Space Mono', ui-monospace, monospace; letter-spacing: .26em;
    color: #8fa3a0; text-transform: uppercase; }
  .fp-yhead b { color: #56dcc0; }
  .fp-ygrid { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 16px; }
  .fp-ychip { border-radius: 8px; padding: 9px 13px; cursor: pointer; color: #eaf6f2;
    font: 700 12px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .06em;
    background: rgba(86,220,192,.05); border: 1px solid rgba(86,220,192,.35); transition: all .2s; }
  .fp-ychip:hover { background: #56dcc0; color: #02100c; border-color: #56dcc0; }
  /* Marken direkt sichtbar — beide Wege gleichzeitig */
  .fp-makes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
  .fp-makes button { border: 1px solid rgba(86,220,192,.3); background: rgba(86,220,192,.04); color: #97a2a1;
    border-radius: 999px; padding: 9px 15px; font: 700 11px/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .1em; cursor: pointer; text-transform: uppercase; transition: all .2s; }
  .fp-makes button:hover { color: #02100c; background: #56dcc0; border-color: #56dcc0; }

  /* ---- Ergebnis + Orbit ---- */
  /* Ergebnis: dunkles Panel, damit Chip/Zähler/CTA über dem hellen Partikel-Bike lesbar sind */
  .fp-result { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); text-align: center; z-index: 11;
    opacity: 0; pointer-events: none; transition: opacity .5s .3s; width: auto; max-width: min(460px, 88vw);
    background: rgba(3, 11, 13, .9); border: 1px solid rgba(86, 220, 192, .32); border-radius: 16px;
    padding: 28px 34px; box-shadow: 0 22px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(86, 220, 192, .12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .fparts__stage.picked .fp-result { opacity: 1; pointer-events: auto; }
  .fparts__stage.picked .fp-console { opacity: 0; pointer-events: none; transition: opacity .3s; }
  .fp-chip { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(86,220,192,.5); border-radius: 999px;
    background: rgba(86,220,192,.08); padding: 12px 22px; font: 700 13px/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .1em; text-transform: uppercase; color: #eaf6f2; }
  .fp-chip i { width: 9px; height: 9px; border-radius: 50%; background: #56dcc0; box-shadow: 0 0 12px rgba(86,220,192,.9); }
  .fp-chip .ed { background: none; border: 0; color: #97a2a1; cursor: pointer; font: inherit; font-size: .85em; }
  .fp-count { margin-top: 18px; font: 700 12px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: .3em;
    color: #56dcc0; text-transform: uppercase; }
  .fp-count b { font-size: 2em; letter-spacing: .08em; }
  .fp-go { display: inline-block; margin-top: 18px; border: 0; border-radius: 999px; padding: 15px 30px; cursor: pointer;
    font: 700 12px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .24em; text-transform: uppercase;
    color: #02100c; background: #56dcc0; box-shadow: 0 0 22px rgba(86,220,192,.55); text-decoration: none; }
  .fp-ring { position: absolute; left: 50%; top: 47%; width: 0; height: 0; border-radius: 50%; border: 1px solid transparent;
    transform: translate(-50%, -50%); transition: all 1s; z-index: 7; pointer-events: none; }
  .fparts__stage.picked .fp-ring { width: min(600px, 74vw); height: min(600px, 74vw); border-color: rgba(86,220,192,.3);
    box-shadow: 0 0 40px rgba(86,220,192,.12), inset 0 0 40px rgba(86,220,192,.07); }
  .fp-part { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; pointer-events: none; opacity: 0;
    left: 50%; top: 120%; z-index: 8;
    transition: left .9s cubic-bezier(.3,.8,.3,1), top .9s cubic-bezier(.3,.8,.3,1), opacity .5s; }
  .fp-part img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(86,220,192,.25)); }
  .fparts__stage.picked .fp-part { opacity: 1; }
  /* echte Produkt-Teile im Kreis: anklickbar → Produktseite */
  .fp-part--prod { pointer-events: auto; cursor: pointer; }
  .fp-part--prod img { transition: transform .2s ease, filter .2s ease; }
  .fp-part--prod:hover { z-index: 9; }
  .fp-part--prod:hover img { transform: scale(1.09);
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(86,220,192,.6)); }

  /* ---- Rollladen (Übergang) ---- */
  .fp-shutter { position: absolute; left: 0; right: 0; top: 0; height: 102%; z-index: 30; transform: translateY(0);
    background: repeating-linear-gradient(to bottom, #18242a 0 30px, #0c1519 30px 36px);
    border-bottom: 4px solid #222f36; box-shadow: 0 12px 40px rgba(0,0,0,.8); will-change: transform;
    display: grid; place-items: center; }
  .fp-shutter .st { font: 800 clamp(16px,2.6vw,30px)/1.4 'Space Mono', ui-monospace, monospace; letter-spacing: .5em;
    text-transform: uppercase; color: rgba(143,163,160,.4); text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.06); padding: 0 6vw; }
  /* Lichtspalt: wenn das Tor aufgeht, fällt unten Werkstatt-Licht raus */
  .fp-impact { position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; z-index: 31; opacity: 0;
    background: linear-gradient(90deg, transparent, #bdfff0 18%, #56dcc0 50%, #bdfff0 82%, transparent); pointer-events: none; }
  .fparts__stage.slam .fp-impact { animation: fpImpact 1.1s ease-out; }
  @keyframes fpImpact { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
  .fp-dust { position: absolute; bottom: -30px; width: 220px; height: 160px; border-radius: 50%; z-index: 29; opacity: 0;
    background: radial-gradient(ellipse, rgba(151,162,161,.25), transparent 65%); pointer-events: none; }
  .fp-dust--l { left: 4%; } .fp-dust--r { right: 4%; }
  .fparts__stage.slam .fp-dust { animation: fpDust .9s ease-out; }
  @keyframes fpDust { 0%{opacity:0;transform:scale(.4) translateY(20px)} 25%{opacity:1} 100%{opacity:0;transform:scale(1.5) translateY(-50px)} }
  .fparts__stage.slam .fp-room, .fparts__stage.slam .fp-shutter { animation: fpShake .42s linear; }
  @keyframes fpShake { 0%,100%{transform:translate(0,0)} 15%{transform:translate(-7px,5px)} 30%{transform:translate(6px,-4px)}
    45%{transform:translate(-5px,3px)} 60%{transform:translate(4px,-3px)} 75%{transform:translate(-2px,2px)} 90%{transform:translate(2px,-1px)} }
  .fparts__stage.slam .fp-shutter { animation: fpShakeS .42s linear; }
  @keyframes fpShakeS { 0%,100%{transform:translateY(0)} 15%{transform:translateY(1.2%)} 30%{transform:translateY(-.5%)}
    45%{transform:translateY(.7%)} 60%{transform:translateY(-.3%)} 75%{transform:translateY(.3%)} 90%{transform:translateY(-.1%)} }

  @media (max-width: 749px) {
    /* VOLL-3D Garage auch im Hochformat: gepinnter Scroll wie Desktop (Stage erbt sticky+100dvh,
       Spacer erbt seine inline-Höhe). Das JS remappt P, sodass die Choreografie OHNE
       Billboard-Einflug direkt vor dem geschlossenen Tor startet — New Arrivals stapelt im
       Hochformat normal davor. CSS-Kulisse/Fallback + Hover-Callout raus (Touch hat kein Hover). */
    .fp-shutter, .fp-impact, .fp-dust, .fp-ring, .fp-part, .fp-tube, .fp-floor, .fp-leadsvg { display: none; }
    .fp-hdr { top: 12vh; }
    .fp-hdr h2 { font-size: clamp(1.4rem, 6.4vw, 2rem); }
    .fp-hdr .ey { font-size: .58rem; letter-spacing: .28em; }
    /* Der kompakte Such-TAG bleibt sichtbar (fix unten-mittig); die volle Konsole („Type your
       bike" + Marken) erscheint erst beim ANTIPPEN — sonst blockiert die große Konsole das
       Scrollen durch die Tor-Choreografie und ist dauernd zu groß. */
    /* kompakter Such-Tag: höher (statt ganz unten) + kleiner + keine Mehrzeilen-Umbrüche */
    .fparts__stage.show .fp-tag { left: 50% !important; top: auto !important; bottom: 22vh !important;
      transform: translateX(-50%) !important; padding: 8px 30px 8px 14px !important; gap: 2px !important; }
    .fp-tag .fp-tag-k { font-size: .44rem !important; letter-spacing: .18em !important; white-space: nowrap; }
    .fp-tag b { font-size: .74rem !important; white-space: nowrap; }
    .fp-tag i { font-size: .92rem; right: 12px; }
    .fparts__stage.focused .fp-console { left: 50%; top: 50%; bottom: auto; width: min(440px, 94vw); transform: translate(-50%, -50%); }
    /* Marken-Buttons dunkel hinterlegt + kleiner → lesbar über der hellen 3D-Szene */
    .fp-makes button { background: rgba(4, 12, 14, .82); font-size: .62rem; padding: 7px 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fp-shutter, .fp-impact, .fp-dust { display: none; }
    .fp-hdr, .fp-console { opacity: 1 !important; transform: none !important; transition: none; }
    .fp-tube { opacity: 1; animation: none; }
    .fp-part, .fp-ring { transition: none; }
  }
/* END_SECTION:find-parts */

/* START_SECTION:flow-bridge (INDEX:25) */
.flow-line{display:block;height:3px;background:linear-gradient(90deg,var(--c,#15cdb0),#aefff2,var(--c,#15cdb0));background-size:220% 100%;box-shadow:0 0 26px 3px rgba(21,205,176,.5),0 0 7px rgba(21,205,176,.9);animation:flow-line-sweep 5s linear infinite}
@keyframes flow-line-sweep{0%{background-position:140% 0}100%{background-position:-140% 0}}
@media (prefers-reduced-motion:reduce){.flow-line{animation:none;background:var(--c,#15cdb0)}}
/* END_SECTION:flow-bridge */

/* START_SECTION:footer (INDEX:27) */
.site-footer { background: var(--ink); color: var(--surface); margin-top: {% if template.name == 'product' %}0{% else %}var(--space-24){% endif %}; padding: var(--space-16) 0 var(--space-8); }
    @media (max-width: 749px) { .site-footer { padding-top: var(--space-8); } }
    .site-footer__top { display: grid; gap: var(--space-12) var(--space-8); grid-template-columns: 1fr; }
    @media (min-width: 700px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1000px) { .site-footer__top { grid-template-columns: 1.5fr 1.1fr 1fr 1.1fr; align-items: start; } }

    .ft-col__title { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-300); margin: 0 0 var(--space-4); }
    .ft-col__hint { font-size: .85rem; color: var(--neutral-400); margin: 0 0 var(--space-3); }

    /* Newsletter */
    .ft-news__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 var(--space-3); color: var(--surface); }
    .ft-news__sub { color: var(--neutral-300); font-size: .92rem; margin: 0 0 var(--space-4); max-width: 34ch; }
    .ft-news__row { display: flex; gap: var(--space-2); max-width: 420px; }
    .ft-news__row input { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--neutral-700); background: rgba(255,255,255,.04); color: var(--surface); }
    .ft-news__row input::placeholder { color: var(--neutral-400); }
    .ft-news__row button { padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--mint-500); color: var(--ink); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
    /* Ruhiger Hover (Magnet-Drift entfernt): hellere Fläche + weicher Mint-Schein, keine Bewegung */
    .ft-news__row button:hover { background: var(--mint-400, var(--mint-500)); box-shadow: 0 0 0 1px rgba(86,220,192,.4), 0 4px 18px rgba(86,220,192,.3); }
    .ft-news__row button:active { background: var(--mint-500); box-shadow: 0 0 0 1px rgba(86,220,192,.35), 0 2px 8px rgba(86,220,192,.22); }
    .ft-news__msg { margin: 0 0 var(--space-2); font-size: .9rem; color: var(--mint-300); }
    .ft-news__msg--error { color: var(--color-error); }
    .ft-news__terms { margin: var(--space-3) 0 0; font-size: .78rem; color: var(--neutral-400); }
    .ft-news__terms a { color: var(--neutral-300); text-decoration: underline; }
    .ft-news__terms a:hover { color: var(--mint-300); }

    /* Contact + link lists */
    .ft-contact, .ft-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
    .ft-contact li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: .9rem; color: var(--neutral-200); line-height: 1.4; }
    .ft-contact .cat-icon { width: 17px; height: 17px; color: var(--mint-500); flex: none; margin-top: 1px; }
    .ft-contact a { color: var(--neutral-200); text-decoration: none; }
    .ft-contact a:hover { color: var(--mint-300); }
    .ft-links a { color: var(--neutral-200); text-decoration: none; font-size: .9rem; }
    .ft-links a:hover { color: var(--mint-300); }
    .ft-link--withdraw a { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-300); font-weight: 700; }
    .ft-link--withdraw .cat-icon { width: 15px; height: 15px; flex: none; }
    .ft-countries { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); }
    .ft-country-link { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--neutral-200); cursor: pointer; text-align: left; }
    .ft-country-link:hover { color: var(--mint-300); }
    .ft-country-link[aria-current="true"] { color: var(--mint-400, var(--mint-500)); font-weight: 700; }
    .ft-countries-more { display: inline-block; margin-top: var(--space-3); font-size: .85rem; font-weight: 700; color: var(--mint-400, var(--mint-500)); text-decoration: none; }
    .ft-countries-more:hover { color: var(--mint-300); text-decoration: underline; }

    /* Bottom bar */
    .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.1); }
    .ft-social { display: flex; gap: var(--space-3); }
    .ft-social a { color: var(--neutral-300); display: inline-flex; }
    .ft-social a:hover { color: var(--mint-400, var(--mint-500)); }
    .ft-social .cat-icon { width: 20px; height: 20px; }
    .ft-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .ft-pay__icon { height: 24px; width: auto; border-radius: 3px; }
    .ft-locale { margin-left: auto; }
    .ft-copy { color: var(--neutral-400); font-size: .82rem; }
    @media (max-width: 700px) { .ft-locale { margin-left: 0; } .ft-copy { width: 100%; } }
/* END_SECTION:footer */

/* START_SECTION:garage-band (INDEX:28) */
.garage-band { background: var(--neutral-100); }
    .garage-band__inner { display: grid; gap: var(--space-8); align-items: center; }
    @media (min-width: 900px) { .garage-band__inner { grid-template-columns: 1fr 1fr; } }
    .garage-band__eyebrow { color: var(--mint-700); letter-spacing: .15em; }
    .garage-band__media img { width: 100%; border-radius: var(--radius-lg); }
/* END_SECTION:garage-band */

/* START_SECTION:garage-drawer (INDEX:29) */
.garage-drawer[hidden]{ display:none; }
    .garage-drawer{ --gm:#15cdb0; --gm2:#2fe3c6; --gm3:#7df0dd; --gmink:#04231d; --gamber:#f4c25a;
      --gln:rgba(255,255,255,.09); --gln2:rgba(255,255,255,.05); --gink:#eef4f2; --gsub:#8a99a0; --gfaint:#5c686f; --gglow:rgba(21,205,176,.45);
      position:fixed; inset:0; z-index:200; }
    .garage-drawer__scrim{ position:absolute; inset:0; background:rgba(3,6,9,.55); opacity:0; transition:opacity var(--dur-base); }
    .garage-drawer.is-open .garage-drawer__scrim{ opacity:1; }
    .garage-drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(408px,92vw); background:linear-gradient(180deg,#0c1218,#070b0f); color:var(--gink);
      box-shadow:0 40px 90px -34px rgba(0,0,0,.9); border-left:1px solid var(--gln); padding:var(--space-6); overflow:auto;
      transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out); display:flex; flex-direction:column; gap:var(--space-4);
      font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif; }
    .garage-drawer.is-open .garage-drawer__panel{ transform:none; }
    .garage-drawer__sweep{ flex:0 0 auto; height:3px; margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; background:linear-gradient(90deg,var(--gm),#aefff2,var(--gm)); background-size:220% 100%; animation:gsweep 5s linear infinite; }
    @keyframes gsweep{ to{ background-position:-220% 0; } }
    .garage-drawer__head{ display:flex; justify-content:space-between; align-items:center; }
    .garage-drawer__title{ display:flex; align-items:center; gap:10px; }
    .garage-drawer__di{ width:8px; height:8px; background:var(--gm); transform:rotate(45deg); box-shadow:0 0 9px var(--gglow); }
    .garage-drawer__head h2{ margin:0; font-size:1.25rem; font-weight:800; letter-spacing:-.01em; color:var(--gink); }
    .garage-drawer__x{ width:30px; height:30px; border-radius:8px; border:1px solid var(--gln); background:transparent; color:var(--gsub); font-size:1.15rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .16s, color .16s; }
    .garage-drawer__x:hover{ color:var(--gink); border-color:var(--gm); }
    .garage-drawer__lbl{ font-family:'Space Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gfaint); display:flex; align-items:center; gap:8px; }
    .garage-drawer__lbl::after{ content:""; flex:1; height:1px; background:var(--gln2); }
    .garage-drawer__empty{ color:var(--gsub); font-size:.88rem; }
    .garage-drawer__bikes{ display:flex; flex-direction:column; gap:var(--space-3); }

    .gpass{ position:relative; border-radius:14px; overflow:hidden; padding:14px 15px 13px; min-height:100px; background:linear-gradient(150deg,#10171d,#0a1014); border:1px solid var(--gln); display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; transition:border-color .18s, transform .18s; }
    /* Inactive bikes step back — desaturated and dimmed — so the active one reads at a glance
       instead of the mint border being the only tell. They regain full colour on hover, which
       doubles as the "you can pick me" affordance. */
    .gpass[data-active="false"]{ filter:saturate(.25) brightness(.72); opacity:.72; transition:border-color .18s, transform .18s, filter .22s, opacity .22s; }
    .gpass[data-active="false"]:hover{ border-color:rgba(21,205,176,.4); transform:translateY(-1px); filter:none; opacity:1; }
    /* Active bike: full colour + a slow breathing mint glow. Slow and low-contrast on purpose —
       it should read as "alive", not blink for attention. */
    .gpass--on{ border-color:rgba(21,205,176,.75); cursor:default; animation:gpassPulse 2.8s ease-in-out infinite; }
    @keyframes gpassPulse{
      0%,100%{ box-shadow:inset 0 0 44px -26px var(--gglow), 0 0 0 1px rgba(21,205,176,.18), 0 0 12px -4px rgba(21,205,176,.35); }
      50%    { box-shadow:inset 0 0 44px -22px var(--gglow), 0 0 0 1px rgba(21,205,176,.42), 0 0 22px -2px rgba(21,205,176,.6); }
    }
    @media (prefers-reduced-motion: reduce){
      .gpass--on{ animation:none; box-shadow:inset 0 0 44px -26px var(--gglow), 0 0 0 1px rgba(21,205,176,.42), 0 0 18px -3px rgba(21,205,176,.5); }
    }
    .gpass__spine{ position:absolute; left:0; top:0; bottom:0; width:4px; }
    .gpass__ghost{ position:absolute; right:8px; bottom:-18px; font-family:'Space Mono',ui-monospace,monospace; font-weight:700; font-style:italic; font-size:66px; line-height:1; color:rgba(255,255,255,.045); letter-spacing:-4px; pointer-events:none; }
    .gpass__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
    .gpass__eye{ font-family:'Space Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gm3); }
    .gpass__hd-r{ display:flex; align-items:center; gap:8px; }
    .gpass__on-tag{ font-family:'Space Mono',ui-monospace,monospace; font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gmink); background:var(--gm); border-radius:99px; padding:3px 8px; }
    .gpass__rm{ width:24px; height:24px; border:0; background:transparent; color:var(--gfaint); font-size:1.05rem; line-height:1; cursor:pointer; border-radius:6px; transition:color .16s, background .16s; }
    .gpass__rm:hover{ color:#ff7a6b; background:rgba(255,122,107,.1); }
    .gpass__name{ font-size:1.05rem; font-weight:800; letter-spacing:-.01em; margin-top:7px; position:relative; z-index:1; color:var(--gink); }
    .gpass__foot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; position:relative; z-index:1; }
    .gpass__chip{ width:26px; height:19px; border-radius:4px; flex:0 0 auto; background:linear-gradient(135deg,#1c6f61,#2fe3c6 45%,#0c8f7c); box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; }
    .gpass__yr{ font-family:'Space Mono',ui-monospace,monospace; font-size:11px; color:var(--gsub); letter-spacing:.05em; }
    .gpass__parts{ margin-left:auto; font-family:'Space Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gm3); text-decoration:none; white-space:nowrap; }
    .gpass__parts:hover{ text-decoration:underline; }

    .garage-drawer__add{ display:flex; flex-direction:column; gap:var(--space-3); }
    .garage-drawer__add label{ font-family:'Space Mono',ui-monospace,monospace; font-weight:400; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gfaint); display:block; }
    .garage-drawer__add select{ display:block; width:100%; margin-top:6px; font-family:'Space Mono',ui-monospace,monospace; font-size:12.5px; color:var(--gink); background-color:rgba(255,255,255,.035); padding:11px 36px 11px 13px; border:1px solid var(--gln); border-radius:11px; -webkit-appearance:none; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c686f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
    .garage-drawer__add select:disabled{ color:var(--gfaint); opacity:.6; }
    .garage-drawer__add select:focus{ outline:0; border-color:var(--gm); box-shadow:0 0 0 3px rgba(21,205,176,.14); }
    /* The open dropdown is a native OS popup: Windows renders it on a WHITE
       background but the <option>s inherit the select's light text → white-on-white
       (macOS ignores option colours, so it only broke on Windows). Set an explicit
       dark option surface so the list is readable on every platform. */
    .garage-drawer__add select option{ color:var(--gink); background-color:#0c1218; }
    .garage-drawer__add select option:disabled{ color:var(--gfaint); }
    .garage-drawer__add button{ margin-top:4px; height:44px; border:0; border-radius:12px; background:var(--gm); color:var(--gmink); font-family:'Space Mono',ui-monospace,monospace; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .16s; }
    .garage-drawer__add button:hover{ background:var(--gm2); }

    .garage-drawer__soon{ display:flex; gap:12px; align-items:flex-start; margin-top:auto; padding:13px 14px; border:1px dashed var(--gln); border-radius:13px; background:rgba(255,255,255,.012); }
    .garage-drawer__soon-ico{ flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--gln); display:flex; align-items:center; justify-content:center; }
    .garage-drawer__soon-ico .cat-icon{ width:19px; height:19px; color:var(--gm3); }
    .garage-drawer__soon-title{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:700; color:var(--gink); }
    .garage-drawer__soon-tag{ font-style:normal; font-family:'Space Mono',ui-monospace,monospace; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gamber); background:transparent; border:1px solid rgba(244,194,90,.4); border-radius:999px; padding:.2em .6em; }
    .garage-drawer__soon-text{ margin:.3rem 0 0; font-size:.8rem; line-height:1.5; color:var(--gfaint); }
    @media (prefers-reduced-motion: reduce){ .garage-drawer__panel, .garage-drawer__scrim{ transition:none; } .garage-drawer__sweep{ animation:none; } }
/* END_SECTION:garage-drawer */

/* START_SECTION:gift-card (INDEX:30) */
.giftcard { padding-block: var(--space-12); }
    .giftcard__cols { display: grid; gap: var(--space-8); }
    @media (min-width: 800px) { .giftcard__cols { grid-template-columns: 1fr 1fr; align-items: start; } }
    .giftcard__media { border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-100); aspect-ratio: 4/3; display: grid; place-items: center; }
    .giftcard__media img { width: 100%; height: 100%; object-fit: cover; }
    .giftcard__placeholder { font-size: 5rem; }
    .giftcard__intro { color: var(--neutral-700); margin-top: var(--space-3); }
    .giftcard__benefits { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-2); }
    .giftcard__benefits li { display: flex; gap: var(--space-2); align-items: center; color: var(--neutral-700); }
    .giftcard__bemoji { font-size: 1.1rem; }
    .giftcard__price { font-family: "Satoshi", sans-serif; font-weight: 800; font-size: 1.6rem; margin: var(--space-4) 0; }
    .giftcard__form { display: grid; gap: var(--space-3); }
    .giftcard__opt { display: block; font-weight: 600; font-size: .85rem; }
    .giftcard__opt select { display: block; margin-top: 4px; font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); min-width: 160px; }
    .giftcard__check { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: .9rem; }
    .giftcard__recipient { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); }
    .giftcard__recipient[hidden] { display: none; }
    .giftcard__recipient label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
    .giftcard__recipient input, .giftcard__recipient textarea { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); }
    .giftcard__atc { justify-self: start; margin-top: var(--space-2); }
    .giftcard__note { color: var(--neutral-500); }
/* END_SECTION:gift-card */

/* START_SECTION:globe-shipping (INDEX:31) */
.gship { position: relative; min-height: 100vh; margin-bottom: calc(var(--space-24, 6rem) * -1); background-color: #050d0a;
    /* Oberkante startet REIN SCHWARZ und blendet erst nach ~26% in den Teal-Radial — so geht
       das Schwarz der Holo-Packs-Sektion 1:1 nahtlos in den Globus über (kein harter Cut) */
    background-image: linear-gradient(to bottom, #000 0%, #000 4%, rgba(0,0,0,0) 16%), linear-gradient(to bottom, transparent 70%, var(--ink, #0a0a0b) 99%), radial-gradient(130% 90% at 50% 46%, #0e1b17 0%, #081311 50%, #040a08 100%); color: #fff; }
  .gship__sticky { position: relative; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; }
  .gship__bgword { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 0;
    font-family: "Satoshi","Sora",-apple-system,sans-serif; font-weight: 800; letter-spacing: -.04em; white-space: nowrap;
    font-size: clamp(5rem, 23vw, 24rem); line-height: .8; color: rgba(255,255,255,.05); pointer-events: none; user-select: none; }
  .gship__stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.06); z-index: 1;
    width: min(94vw, 86vh, 1000px); height: min(94vw, 86vh, 1000px); pointer-events: none; will-change: transform; }
  .gship__glow { position: absolute; inset: 4%; border-radius: 50%;
    background: radial-gradient(circle, rgba(86,220,192,.12) 0%, rgba(86,220,192,.03) 44%, transparent 68%); filter: blur(14px); }
  .gship__globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; cursor: grab; }
  .gship__arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .gship__top { position: absolute; top: 8%; left: 0; right: 0; z-index: 2; text-align: center; padding: 0 var(--space-6); text-shadow: 0 2px 40px rgba(0,0,0,.9); }
  .gship__eyebrow { font-family: "Space Mono", monospace; font-size: .8rem; text-transform: uppercase; letter-spacing: .24em; color: var(--mint-300, #56dcc0); margin: 0 0 2.4rem; }
  .gship__ticker { display: flex; align-items: center; justify-content: center; gap: .9rem; }
  .gship__ticker-pre { font-family: "Satoshi","Sora",sans-serif; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2.1rem); letter-spacing: -.02em; color: rgba(255,255,255,.94); }
  .gship__ticker-line { width: clamp(24px, 5vw, 80px); height: 1px; background: rgba(255,255,255,.28); }
  .gship__ticker-plane { color: var(--mint-300, #56dcc0); display: inline-flex; }
  .gship__ticker-window { display: inline-block; overflow: hidden; height: 9.1em; width: clamp(9ch, 18vw, 13ch); font-size: clamp(1.3rem, 2.6vw, 2.1rem); text-align: left;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 16%, #000 42%, #000 58%, rgba(0,0,0,.12) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 16%, #000 42%, #000 58%, rgba(0,0,0,.12) 84%, transparent 100%); }
  .gship__ticker-list { margin: 0; padding: 0; list-style: none; transition: transform .6s cubic-bezier(.16,1,.3,1); }
  .gship__ticker-list li { height: 1.3em; line-height: 1.3em; font-family: "Satoshi","Sora",sans-serif; font-weight: 800; font-size: 1em; letter-spacing: -.02em; color: rgba(255,255,255,.18); transition: color .4s ease; white-space: nowrap; }
  .gship__ticker-list li.is-active { color: var(--mint-300, #56dcc0); }
  .gship__text { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); z-index: 2; max-width: 46ch; margin: 0; padding: 0 var(--space-6); text-align: center; font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.6; color: rgba(255,255,255,.66); text-shadow: 0 2px 30px rgba(0,0,0,.95); }
  .gship__stats { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 3; list-style: none; margin: 0; padding: 0 var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-10, 2.5rem); text-shadow: 0 2px 24px rgba(0,0,0,.9); }
  .gship__stats li { display: flex; align-items: baseline; gap: .5rem; }
  .gship__stats strong { font-family: "Satoshi","Sora",sans-serif; font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--mint-300, #56dcc0); }
  .gship__stats span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); }
  .gship__hint { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: "Space Mono", monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.6); text-shadow: 0 2px 20px rgba(0,0,0,.9); pointer-events: none; }
  .gship__hint svg { width: 15px; height: 15px; opacity: .85; animation: gship-rot 3.2s linear infinite; }
  @keyframes gship-rot { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .gship__hint svg { animation: none; } }
  {%- comment -%}
    margin-top war -45vh: stammt aus der Zeit, als der Globus DIREKT auf die Holo-Packs folgte und den
    Leerraum darunter zuziehen musste. Seit die home-seo-Sektion dazwischen sitzt, fraß dieser negative
    Rand zusammen mit z-index:3 und deckendem Hintergrund die untere Hälfte des SEO-Blocks auf — der
    Katalog-Index brach auf dem Handy mitten in Zeile 03/04 hart ab. home-seo endet ohnehin auf reinem
    #000, exakt der Farbe, aus der der Globus oben einblendet → der Übergang bleibt ohne Überlappung nahtlos.
  {%- endcomment -%}
  @media (max-width: 749px){ .gship { min-height: 100vh; margin-top: 0; z-index: 3; background-color: #02080a; } .gship { margin-bottom: calc(var(--space-24, 6rem) * -1 - 1.6rem); } .gship__stage { width: 112vw; height: 112vw; } .gship__ticker-line { width: 18px; }
    .gship__text { bottom: 14%; max-width: 26rem; font-size: .8rem; line-height: 1.4; padding: 0 .9rem; }
    .gship__stats { bottom: 3%; gap: .4rem 1.6rem; }
    .gship__hint { display: none; } }
/* END_SECTION:globe-shipping */

/* START_SECTION:header-lab (INDEX:32) */
.hlab { background: var(--surface); color: var(--ink); padding-bottom: var(--space-24); }
  .hlab__intro { padding: var(--space-12) var(--container-pad) var(--space-8); max-width: 860px; }
  .hlab__eyebrow { font-family: "Space Mono", monospace; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-700); margin: 0 0 var(--space-2); }
  .hlab__title { font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
  .hlab__lede { color: var(--neutral-700); font-size: 1.05rem; line-height: 1.55; margin: 0; }

  .hlab-variant { margin-bottom: var(--space-16); }
  .hlab-variant__label { display: inline-block; font-family: "Space Mono", monospace; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mint-700); margin-bottom: var(--space-3); }
  .hlab-variant__frame { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
  .hlab-variant__desc { color: var(--neutral-700); font-size: .92rem; margin: var(--space-3) 0 0; }

  /* Utility bar */
  .hlab-util { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: 9px var(--space-8); font-size: .8rem; }
  .hlab-util__side { display: flex; gap: var(--space-4); }
  .hlab-util__side--r { justify-content: flex-end; }
  .hlab-util a { color: rgba(255,255,255,.8); text-decoration: none; display: inline-flex; align-items: center; }
  .hlab-util a:hover { color: var(--mint-300); }
  .hlab-util__side .cat-icon { width: 18px; height: 18px; }
  .hlab-util__center { text-align: center; color: #fff; font-weight: 500; }
  .hlab-util__loc { background: none; border: 0; color: rgba(255,255,255,.9); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .hlab-util__loc .cat-icon { width: 14px; height: 14px; }

  /* Main rows */
  .hlab-main { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-8); min-height: 76px; }
  .hlab-main--a .hlab-search { flex: 1; }
  .hlab-main--center { display: grid; grid-template-columns: 1fr auto 1fr; }
  .hlab-main--center .hlab-main__r { display: flex; justify-content: flex-end; }
  .hlab-main--d1 { display: grid; grid-template-columns: 1fr auto 1fr; padding-bottom: var(--space-3); }
  .hlab-main--d1 .hlab-main__r { display: flex; justify-content: flex-end; }
  .hlab-main--d2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 0; padding-bottom: var(--space-4); min-height: 0; border-top: 1px solid var(--neutral-100); }
  .hlab-d2__search { display: flex; justify-content: flex-end; flex: 0 0 auto; }
  .hlab-d2__search .hlab-search { width: 580px; max-width: 56vw; height: 38px; }
  .hlab-d2__search .hlab-search__input { font-size: .88rem; }
  .hlab-d2__search .hlab-search__btn { width: 42px; }
  .hlab-search__btn { color: var(--ink); }
  .hlab-search__btn .cat-icon { width: 18px; height: 18px; color: var(--ink); }
  .hlab-act--garage .cat-icon { color: var(--mint-600); }

  /* Real iP brand logo, recolored to brand mint via CSS mask (source PNG is purple) */
  .hlab-logo { text-decoration: none; display: inline-flex; align-items: center; }
  .ip-logo { display: inline-block; background: var(--mint-500); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background var(--dur-fast); }
  .hlab-logo:hover .ip-logo { background: var(--mint-600); }
  .ip-logo--md { width: 58px; height: 40px; }
  .ip-logo--lg { width: 100px; height: 68px; }
  /* color-swatch demo */
  .ip-swatch { display: inline-block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 64px; height: 44px; }
  .ip-swatch-img { object-fit: contain; }
  .ip-demo { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-6); padding: var(--space-6); background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); }
  .ip-demo__chip { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); }
  .ip-demo__chip--dark { background: var(--ink); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: rgba(255,255,255,.7); }

  /* Nav */
  .hlab-nav { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
  .hlab-navbar { border-top: 1px solid var(--neutral-100); padding: var(--space-3) var(--space-8); }
  .hlab-navbar--center .hlab-nav { justify-content: center; }
  .hlab-nav a { font-weight: 600; font-size: .96rem; color: var(--ink); text-decoration: none; }
  .hlab-nav a:hover { color: var(--mint-700); }
  .hlab-nav__sale { color: var(--color-error) !important; font-weight: 700; }

  /* Big search */
  .hlab-search { display: flex; align-items: center; background: #fff; border: 1.5px solid var(--neutral-300); border-radius: var(--radius-pill); overflow: hidden; height: 50px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
  .hlab-search:focus-within { border-color: var(--mint-500); box-shadow: 0 0 0 3px var(--mint-100); }
  .hlab-search__cat { background: none; border: 0; border-right: 1px solid var(--neutral-200); font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink); padding: 0 var(--space-4); height: 100%; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .hlab-search__cat .cat-icon { width: 14px; height: 14px; color: var(--neutral-500); }
  .hlab-search__input { flex: 1; min-width: 60px; border: 0; outline: 0; font: inherit; font-size: .98rem; padding: 0 var(--space-4); background: none; color: var(--ink); }
  .hlab-search__btn { background: var(--mint-500); border: 0; width: 52px; height: 100%; display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
  .hlab-search__btn:hover { background: var(--mint-400); }
  .hlab-searchrow { border-top: 1px solid var(--neutral-100); padding: var(--space-4) var(--space-8); }
  .hlab-searchrow .hlab-search { max-width: 680px; margin: 0 auto; }
  /* D row 2 — full menu left, slightly bigger search right */
  .hlab-d2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-top: 1px solid var(--neutral-100); padding: var(--space-3) var(--space-8); }

  /* Actions */
  .hlab-actions { display: flex; align-items: center; gap: var(--space-5); }
  .hlab-actions--spaced { gap: var(--space-8); }
  .hlab-actions--spaced .hlab-garage { margin-left: var(--space-2); }
  .hlab-act { background: none; border: 0; font: inherit; font-weight: 600; font-size: .82rem; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
  .hlab-act .cat-icon { width: 22px; height: 22px; }
  .hlab-act:hover { color: var(--mint-700); }
  .hlab-act__ico { position: relative; display: inline-flex; }
  .hlab-act__count { position: absolute; top: -7px; right: -8px; background: var(--mint-500); color: var(--ink); font-size: .62rem; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; }
  .hlab-garage { background: var(--mint-500); color: var(--ink); border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: 700; font-size: .9rem; padding: .55rem 1.05rem; cursor: pointer; transform: skewX(var(--skew)); white-space: nowrap; }
  .hlab-garage:hover { background: var(--mint-400); }

  @media (max-width: 900px) {
    .hlab-util, .hlab-main--center, .hlab-main--d1, .hlab-main--d2 { grid-template-columns: 1fr; }
    .hlab-nav, .hlab-util__side { display: none; }
    .hlab-main { flex-wrap: wrap; }
  }
/* END_SECTION:header-lab */

/* START_SECTION:header (INDEX:33) */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--neutral-100); }

    /* ── Transparent overlay header (homepage only) — solidifies after scrolling past the hero ── */
    .site-header.header--over { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent;
      transition: background .35s var(--ease-out), border-color .35s var(--ease-out), backdrop-filter .35s var(--ease-out); }
    /* Tint + blur live on a pseudo that FADES OUT at the bottom (mask) → soft edge, no hard line. */
    .site-header.header--over::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(180deg, rgba(4,16,13,.6) 0%, rgba(4,16,13,.5) 55%, rgba(4,16,13,.46) 100%);
      backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
      transition: opacity .35s var(--ease-out); }
    .site-header.header--over .site-header__util { background: transparent; transition: background .35s var(--ease-out); }
    .site-header.header--over .site-header__nav { border-top-color: transparent; }   /* no line between the rows */
    .site-header.header--over .util-ann,
    .site-header.header--over .util-social a,
    .site-header.header--over .loc-switch__toggle,
    .site-header.header--over .hact,
    .site-header.header--over .mega__item > a { color: #fff; }
    .site-header.header--over .util-social a:hover,
    .site-header.header--over .hact:hover,
    .site-header.header--over .mega__item:hover > a, .site-header.header--over .mega__item.is-open > a { color: var(--mint-300); }
    .site-header.header--over .site-header__burger span { background: #fff; }
    /* solidified state (scrolled) → back to the normal look */
    .site-header.header--over.is-solid { background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--neutral-100); }
    .site-header.header--over.is-solid::before { opacity: 0; }
    .site-header.header--over.is-solid .site-header__util { background: var(--ink); }
    .site-header.header--over.is-solid .util-ann,
    .site-header.header--over.is-solid .util-social a,
    .site-header.header--over.is-solid .loc-switch__toggle { color: rgba(255,255,255,.9); }
    .site-header.header--over.is-solid .hact,
    .site-header.header--over.is-solid .mega__item > a { color: var(--ink); }
    .site-header.header--over.is-solid .site-header__burger span { background: var(--ink); }

    /* Utility bar */
    .site-header__util { background: var(--ink); color: #fff; font-size: .8rem; }
    .util-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); min-height: 36px; }
    .util-social { display: flex; gap: var(--space-4); }
    .util-social a { color: rgba(255,255,255,.78); display: inline-flex; align-items: center; }
    .util-social a:hover { color: var(--mint-300); }
    .util-social .cat-icon { width: 18px; height: 18px; }
    .util-ann { text-align: center; font-weight: 500; }
    .util-loc { justify-self: end; }
    .loc-switch { position: relative; }
    .loc-switch__toggle { list-style: none; cursor: pointer; color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 6px; }
    .loc-switch__toggle::-webkit-details-marker { display: none; }
    .loc-switch__toggle .cat-icon { width: 13px; height: 13px; }
    .loc-switch__panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-4); z-index: 60; }

    /* Main row */
    .main-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); min-height: 76px; }
    .main-left { display: flex; align-items: center; gap: var(--space-8); }
    .main-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); }
    .site-logo { justify-self: center; display: inline-flex; align-items: center; }
    /* SHINE #3 "soft sheen": a wide, soft highlight glides across, with a gentle lift + mint glow. */
    .ip-logo { display: inline-block; width: var(--logo-w, 96px); aspect-ratio: 3 / 2; height: auto;
      background-color: var(--mint-500);
      background-image: linear-gradient(115deg, var(--mint-500) 0 22%, rgba(255,255,255,.7) 50%, var(--mint-500) 78% 100%);
      background-size: 250% 100%; background-position: 140% 0; background-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
      transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); will-change: background-position, transform; }
    .site-logo:hover .ip-logo { transform: scale(1.04); filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--mint-500) 50%, transparent)); animation: ip-shine 1.15s ease-in-out; }
    @keyframes ip-shine { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
    /* Auto-shine once on first visit (sweep + a soft mint glow pulse) */
    .ip-logo.ip-shine-now { animation: ip-shine 1.15s ease-in-out, ip-shine-glow 1.15s ease-in-out; }
    @keyframes ip-shine-glow { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 3px 16px color-mix(in srgb, var(--mint-500) 60%, transparent)); } }
    @media (prefers-reduced-motion: reduce) { .site-logo:hover .ip-logo { animation: none; transform: none; } .ip-logo.ip-shine-now { animation: none; } }

    /* Action items (Support / Garage / Login / Saved / Cart) */
    .hact { background: none; border: 0; font: inherit; font-weight: 600; font-size: .82rem; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
    .hact:hover { color: var(--mint-700); }
    .hact .cat-icon { width: 22px; height: 22px; color: var(--mint-600); }
    .hact:hover .cat-icon { color: var(--mint-700); }
    .hact--search { display: none; }   /* nur am Handy sichtbar (Desktop hat die Suchleiste unten) */
    .hact--garage .cat-icon { color: var(--mint-600); }
    .hact--riderid { color: var(--mint-700); }
    .hact--riderid .cat-icon { color: var(--mint-600); }
    .hact__ico { position: relative; display: inline-flex; }
    .hact__count { position: absolute; top: -7px; right: -8px; background: var(--mint-500); color: var(--ink); font-size: .62rem; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; }
    .hact__chip { font-weight: 700; color: var(--mint-700); font-size: .7rem; }
    .hact__chip[hidden] { display: none; }

    /* Nav + search row */
    .site-header__nav { border-top: 1px solid var(--neutral-100); }
    .nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 52px; position: relative; }
    .mega__top { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
    .mega__item > a { display: inline-flex; align-items: center; height: 52px; font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; position: relative; }
    .mega__item > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 12px; height: 2px; background: var(--mint-500); transition: right var(--dur-base) var(--ease-out); }
    .mega__item:hover > a::after, .mega__item:focus-within > a::after, .mega__item.is-open > a::after { right: 0; }
    .mega__sale { color: var(--mint-500) !important; font-weight: 700; }

    .mega__item--has { position: static; }
    .mega__panel { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 100%; background: #fff; border-top: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index: 90; }
    .mega__item--has:hover .mega__panel, .mega__item--has:focus-within .mega__panel, .mega__item--has.is-open .mega__panel { opacity: 1; visibility: visible; transform: none; }
    .mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); padding: var(--space-8) var(--container-pad); }

    .mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-6) var(--space-8); }
    .mega__col { display: flex; flex-direction: column; gap: 2px; }
    .mega__col-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .98rem; color: var(--ink); text-decoration: none; margin-bottom: var(--space-2); }
    .mega__col-head:hover { color: var(--mint-700); }
    .mega__col-head--plain { color: var(--neutral-500); }
    .mega__col-head .cat-icon { width: 20px; height: 20px; color: var(--mint-600); flex: none; }
    .mega__sublink { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .88rem; color: var(--neutral-700); text-decoration: none; padding: 3px 0; }
    .mega__sublink:hover { color: var(--mint-700); }
    .mega__soon { font-size: .88rem; color: var(--neutral-400); padding: 3px 0; }
    /* Gear & Off-Road mega: grouped icon tiles + riding-style chips */
    .mega__cols--gear { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-6) var(--space-8); align-content: start; }
    .mega__group-title { display: block; font-family: "Space Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--neutral-500); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--neutral-100); }
    .mega__tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--neutral-700); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color var(--dur-fast); }
    .mega__tile .cat-icon { width: 24px; height: 24px; color: var(--mint-600); flex: none; transition: transform var(--dur-fast); }
    .mega__tile:hover { color: var(--mint-700); }
    .mega__tile:hover .cat-icon { transform: scale(1.08); }
    .mega__tile--soon { color: var(--neutral-400); cursor: default; }
    .mega__tile--soon .cat-icon { color: var(--neutral-300); }
    .mega__soon-tag { margin-left: auto; font-family: "Space Mono", monospace; font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-400); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); padding: 1px 5px; font-style: normal; }
    .mega__gear-side { display: flex; flex-direction: column; gap: var(--space-4); }
    .mega__styles { display: flex; flex-wrap: wrap; gap: 6px; }
    .mega__style { font-size: .78rem; font-weight: 600; color: var(--neutral-600); border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); padding: 5px 11px; text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
    a.mega__style--active { cursor: pointer; }
    a.mega__style--active:hover, a.mega__style--active:focus-visible { color: var(--mint-700); border-color: var(--mint-500); background: var(--mint-100); outline: none; }
    .mega__style--soon { color: var(--neutral-400); cursor: default; }
    .mega__style--soon:hover { border-color: var(--neutral-300); color: var(--neutral-500); }
    .mega__gear-side .mega__promo { min-height: 150px; }
    .mega__look-cta { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); font-weight: 700; background: linear-gradient(120deg, var(--mint-500), color-mix(in srgb, var(--mint-500) 62%, #fff)); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
    .mega__look-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--mint-500) 42%, transparent); }
    .mega__look-spark { font-size: 1.05rem; line-height: 1; flex: none; }
    .mega__look-txt { display: flex; flex-direction: column; line-height: 1.18; }
    .mega__look-txt small { font-weight: 600; font-size: .66rem; opacity: .72; }
    .mega__look-arrow { margin-left: auto; font-weight: 800; transition: transform var(--dur-fast) var(--ease-out); }
    .mega__look-cta:hover .mega__look-arrow { transform: translateX(3px); }
    .mega__all { font-size: .82rem; font-weight: 600; color: var(--mint-700); text-decoration: none; padding-top: var(--space-2); }

    /* Parts mega = full-width 16-overtopic index (generated). The WRAPPER scrolls (reliable wheel
       scroll); the index packs tightly via CSS columns so there are no uneven row gaps. */
    /* The PANEL is the scroll container (full width → wheel always lands on it, never the page). */
    /* Solid white — inherits base .mega__panel (#fff + borders + shadow); only add the scroll here.
       NB: a frosted see-through variant (blur/backdrop-filter + bottom mask) was tried and reverted —
       over real busy pages it read as cluttered; the owner asked for a clean solid-white panel. */
    .mega__panel--parts { max-height: min(82vh, 760px); overflow-y: auto; overscroll-behavior: contain; }
    /* Parts flyout spans the FULL width of its 1680px panel, exactly like every other mega menu (Gear,
       Brands, …): no centred cap — it just inherits the shared `.container` max-width (1680) like `.mega__inner`
       does. Same type scale as the others (no zoom); the width is consumed by more option columns + a wider
       fits-card, and the garage bar keeps its bike-info (left) / controls (right) at the two edges. */
    .mega__inner--parts { display: block; padding: var(--space-8) var(--space-8) var(--space-12); }
    /* Aligned grid: every overtopic heading lines up row-by-row → easy to scan. Roomy gaps. */
    .mega__parts-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; column-gap: var(--space-12); row-gap: var(--space-8); }
    @media (max-width: 1280px) { .mega__parts-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 1000px) { .mega__parts-index { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); } }
    @media (max-width: 720px) { .mega__parts-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .mega__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .mega__group .mega__col-head { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--neutral-100); }
    .mega__group .mega__sublink { font-size: .85rem; padding: 3px 0; }
    .mega__group .mega__all { padding-top: var(--space-3); }
    .mega__badge { font-family: "Space Mono", monospace; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-sm); padding: 1px 5px; background: var(--mint-500); color: var(--ink); vertical-align: middle; }

    .mega__promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 220px; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-6); text-decoration: none; color: #fff; background: var(--ink); isolation: isolate; }
    .mega__promo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--promo-img); background-size: cover; background-position: center; }
    .mega__promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,11,.1), rgba(10,10,11,.78)); }
    .mega__promo--brand { background: linear-gradient(135deg, var(--mint-700), var(--ink)); }
    .mega__promo-eyebrow { font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mint-300); }
    .mega__promo-head { font-weight: 800; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
    .mega__promo-cta { font-weight: 600; font-size: .9rem; margin-top: var(--space-2); }
    /* Brands promo: auto-sliding reel of real parts — pure CSS, lazy-loaded, ~4 s per image */
    .mega__promo--brand::after { background: linear-gradient(180deg, rgba(6,42,34,.22) 0%, rgba(10,10,11,.34) 46%, rgba(10,10,11,.86) 100%); }
    .mega__reel { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
    .mega__reel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(8%) scale(1.12); will-change: opacity, transform; animation: brandreel 22.4s calc(var(--i) * -3.2s) infinite; animation-timing-function: cubic-bezier(.16,.7,.3,1); }
    @keyframes brandreel { 0% { opacity: 0; transform: translateX(8%) scale(1.12); } 1.2% { opacity: 1; } 4% { transform: translateX(0) scale(1.12); } 12% { opacity: 1; transform: translateX(0) scale(1.12); } 14.3% { opacity: 0; transform: translateX(-6%) scale(1.12); } 100% { opacity: 0; transform: translateX(-6%) scale(1.12); } }
    @media (prefers-reduced-motion: reduce) { .mega__reel-img { animation: none; transform: none; } .mega__reel-img:first-child { opacity: 1; } }
    @media (max-width: 767px) { .mega__reel-img { animation: none; transform: none; } .mega__reel-img:not(:first-child) { display: none; } .mega__reel-img:first-child { opacity: 1; } }
    /* Lifestyle promo reel: 6 images (shorter cycle so there is no empty gap) */
    .mega__reel--6 .mega__reel-img { animation-name: brandreel6; animation-duration: 19.2s; }
    @keyframes brandreel6 { 0% { opacity: 0; transform: translateX(8%) scale(1.12); } 1.4% { opacity: 1; } 4.7% { transform: translateX(0) scale(1.12); } 14% { opacity: 1; transform: translateX(0) scale(1.12); } 16.67% { opacity: 0; transform: translateX(-6%) scale(1.12); } 100% { opacity: 0; transform: translateX(-6%) scale(1.12); } }
    .mega__inner--brand { grid-template-columns: 1fr 300px; }
    .mega__brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); align-content: start; }
    .mega__brand { display: flex; align-items: center; justify-content: center; height: 56px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); font-weight: 700; color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast); }
    .mega__brand:hover { border-color: var(--mint-500); color: var(--mint-700); }
    /* Brands mega: featured brand cards */
    .mega__brands-main { display: flex; flex-direction: column; gap: var(--space-4); }
    .mega__brandcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
    .mega__brandcard { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 70px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
    .mega__brandcard:hover { border-color: var(--mint-500); color: var(--mint-700); transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08)); }
    .mega__brandcard--all { background: var(--ink); color: #fff; border-color: var(--ink); font-size: .92rem; line-height: 1.15; }
    .mega__brandcard--all:hover { background: var(--mint-700); border-color: var(--mint-700); color: #fff; }

    /* ── Parts mega flyout (rail of 16 overtopics + detail pane), per docs/superpowers/parts-menu-mock-B-v2.html.
       Everything scoped under .mega__flyout so it never leaks onto other mega menus and reliably wins
       over the generic .mega__col-head / .mega__sublink / .mega__all / .mega__parts-index rules above. ── */
    .mega__flyout.mega__parts-index { display: flex; align-items: stretch; gap: 0; grid-template-columns: none; column-gap: 0; row-gap: 0; min-height: 320px; }

    /* Rail (left column of category buttons) */
    .mega__flyout .mega__rail { flex: 0 0 254px; max-height: min(74vh, 640px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-right: 1px solid var(--neutral-100); }
    .mega__flyout .mega__cat { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); padding: 10px 14px; border-radius: var(--radius-md); cursor: pointer; position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
    .mega__flyout .mega__cat .cat-icon { width: 18px; height: 18px; color: var(--mint-600); flex: none; }
    .mega__flyout .mega__cat-nm { flex: 1; letter-spacing: -.01em; }
    .mega__flyout .mega__cat-ar { color: var(--neutral-400); font-size: .82rem; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
    .mega__flyout .mega__cat:hover { background: var(--surface); }
    .mega__flyout .mega__cat.is-active { background: color-mix(in srgb, var(--mint-500) 10%, transparent); color: var(--mint-800); }
    .mega__flyout .mega__cat.is-active .cat-icon { color: var(--mint-800); }
    .mega__flyout .mega__cat.is-active .mega__cat-ar { opacity: 1; transform: none; color: var(--mint-800); }
    .mega__flyout .mega__cat.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--mint-500); }
    .mega__flyout .mega__cat:focus-visible { outline: 2px solid var(--mint-500); outline-offset: -2px; }

    /* Detail (right side, one active pane at a time) */
    .mega__flyout .mega__detail { flex: 1; min-width: 0; display: flex; }
    .mega__flyout .mega__pane { display: none; flex-direction: column; min-width: 0; width: 100%; padding: var(--space-2) 0 var(--space-2) var(--space-8); }
    .mega__flyout .mega__pane.is-active { display: flex; }
    .mega__flyout .mega__pane-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
    .mega__flyout .mega__pane-hd .mega__col-head { font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; color: var(--ink); margin-bottom: 0; }
    .mega__flyout .mega__pane-hd .mega__col-head:hover { color: var(--mint-700); }
    .mega__flyout .mega__pane-hd .mega__all { font-size: .77rem; font-weight: 700; color: var(--mint-700); padding-top: 0; white-space: nowrap; }
    .mega__flyout .mega__pane-hd .mega__all:hover { color: var(--mint-800); }
    .mega__flyout .mega__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); align-content: start; }
    .mega__flyout .mega__sublink { display: block; font-size: .83rem; font-weight: 400; color: var(--neutral-700); text-decoration: none; padding: 10px 0; gap: 0; border-bottom: 1px solid var(--neutral-100); transition: color var(--dur-fast); }
    .mega__flyout .mega__sublink:hover { color: var(--mint-700); }
    .mega__flyout .mega__sublink:focus-visible { outline: 2px solid var(--mint-500); outline-offset: 2px; }
    .mega__flyout .mega__count { color: var(--mint-700); font-weight: 700; }
    .mega__flyout .mega__count[hidden] { display: none; }

    @media (prefers-reduced-motion: reduce) {
      .mega__flyout .mega__cat, .mega__flyout .mega__cat-ar, .mega__flyout .mega__sublink { transition: none; }
    }

    /* Mobile: stacked accordion — rail buttons full-width, options unfold under the active button */
    @media (max-width: 749px) {
      .mega__flyout.mega__parts-index { flex-direction: column; min-height: 0; }
      .mega__flyout .mega__rail { flex: 1 1 auto; max-height: none; overflow-y: visible; border-right: 0; padding: var(--space-2) 0; gap: 0; }
      .mega__flyout .mega__cat { border-radius: 0; border-bottom: 1px solid var(--neutral-100); padding: 12px 4px; }
      .mega__flyout .mega__cat.is-active { border-radius: 0; }
      .mega__flyout .mega__cat.is-active::before { left: -4px; }
      .mega__flyout .mega__detail { display: block; }
      .mega__flyout .mega__pane { display: none; width: 100%; padding: var(--space-4) 4px var(--space-6); border-bottom: 1px solid var(--neutral-100); }
      .mega__flyout .mega__pane.is-active { display: flex; }
      .mega__flyout .mega__opts { grid-template-columns: 1fr; }
    }

    /* Garage bar — top of the Parts flyout, Rider-ID language ([[rider-id-card]]): dark card + mint
       holo-sweep + diamond mark + an on/off fitment-filter switch. Filled/wired by parts-menu.js. */
    .mega__garage-bar { position: relative; display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); padding: 20px var(--space-6); border-radius: 13px; overflow: hidden; color: #eaf5f2; background: linear-gradient(150deg, #0f161b, #0a1014); border: 1px solid rgba(21,205,176,.20); box-shadow: inset 0 0 70px -34px rgba(21,205,176,.5), 0 22px 44px -26px rgba(0,0,0,.65); }
    .mega__garage-bar[hidden] { display: none; }
    .mega__garage-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, #15cdb0, #aefff2, #7fa0ff, #15cdb0); background-size: 240% 100%; animation: megaGarageSweep 5s linear infinite; }
    .mega__garage-bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 12% 130%, transparent 0 13px, rgba(21,205,176,.045) 13px 14px), repeating-linear-gradient(118deg, transparent 0 22px, rgba(255,255,255,.014) 22px 23px); }
    @keyframes megaGarageSweep { to { background-position: -240% 0; } }
    .mega__garage-ic { position: relative; z-index: 2; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(21,205,176,.10); border: 1px solid rgba(21,205,176,.30); color: #34e7cc; box-shadow: 0 0 16px -6px rgba(21,205,176,.5); }
    .mega__garage-who { position: relative; z-index: 2; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .mega__garage-lbl { display: flex; align-items: center; gap: 7px; font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #8af5e3; }
    .mega__garage-di { flex: 0 0 auto; width: 8px; height: 8px; background: #15cdb0; transform: rotate(45deg); box-shadow: 0 0 9px rgba(21,205,176,.5); }
    .mega__garage-bike { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mega__garage-spacer { flex: 1 1 auto; }
    .mega__garage-filter { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: inherit; }
    .mega__garage-ftxt { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
    .mega__garage-fmain { font-size: .84rem; font-weight: 700; color: #eaf5f2; }
    .mega__garage-fsub { font-size: .72rem; font-weight: 600; color: #566460; transition: color var(--dur-fast); }
    .mega__garage-bar.is-on .mega__garage-fsub { color: #8af5e3; }
    .mega__garage-sw { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: #26332f; border: 1px solid rgba(255,255,255,.10); transition: background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast); }
    .mega__garage-bar.is-on .mega__garage-sw { background: linear-gradient(90deg, #0f8f7c, #17d1b6); border-color: transparent; box-shadow: 0 0 16px -2px rgba(21,205,176,.5); }
    .mega__garage-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform var(--dur-fast); }
    .mega__garage-bar.is-on .mega__garage-knob { transform: translateX(20px); }
    .mega__garage-btn { position: relative; z-index: 2; flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: #eaf5f2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 9px 15px; font-family: inherit; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
    .mega__garage-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(21,205,176,.5); }
    @media (prefers-reduced-motion: reduce) { .mega__garage-bar::before { animation: none; } .mega__garage-btn, .mega__garage-sw, .mega__garage-knob, .mega__garage-fsub { transition: none; } }
    @media (max-width: 749px) { .mega__garage-bar { flex-wrap: wrap; } .mega__garage-who { order: 2; flex-basis: 55%; } .mega__garage-spacer { display: none; } .mega__garage-filter { order: 3; margin-left: auto; } .mega__garage-btn { order: 4; } }

    /* ── Parts flyout — premium upgrade: aside fitment card + featured product, depth, count pills ── */
    .mega__flyout .mega__pane { padding: var(--space-3) 0 var(--space-3) var(--space-6); }
    .mega__flyout .mega__pane.is-active { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-6); }
    .mega__flyout .mega__opts-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .mega__flyout .mega__pane-hd { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
    .mega__flyout .mega__ptitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
    .mega__flyout .mega__pane-hd .mega__all { margin-left: auto; }
    .mega__flyout .mega__pcount { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .72rem; font-weight: 700; color: var(--mint-700); background: color-mix(in srgb, var(--mint-500) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mint-600) 30%, transparent); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
    .mega__flyout .mega__pcount[hidden] { display: none; }
    .mega__flyout .mega__sublink { display: flex; align-items: center; gap: var(--space-2); padding: 11px 0; }
    .mega__flyout .mega__opt-nm { flex: 1; min-width: 0; }
    .mega__flyout .mega__count { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; font-weight: 700; color: var(--mint-700); background: color-mix(in srgb, var(--mint-500) 12%, transparent); border-radius: 6px; padding: 2px 7px; min-width: 26px; text-align: center; }
    .mega__flyout .mega__count[hidden] { display: none; }
    .mega__flyout .mega__rail { background: var(--surface); border-radius: 14px; padding: var(--space-3); margin-right: var(--space-4); border-right: 0; }
    .mega__flyout .mega__cat { padding: 9px 13px; }
    .mega__flyout .mega__cat.is-active { background: #fff; color: var(--mint-800); box-shadow: 0 8px 20px -10px rgba(10,10,11,.22); }
    .mega__flyout .mega__cat[hidden] { display: none; }
    .mega__flyout .mega__sublink[hidden] { display: none; }
    .mega__flyout .mega__aside { flex: 0 0 292px; display: flex; align-items: flex-start; }
    .mega__flyout .mega__acard { flex: 1; display: flex; flex-direction: column; border-radius: 14px; background: linear-gradient(168deg, #132420, #0d1a17); color: #eafaf7; padding: 20px; box-shadow: 0 22px 42px -24px rgba(0,0,0,.65); }
    .mega__flyout .mega__afit { display: block; }
    .mega__flyout .mega__afit[hidden] { display: none; }
    .mega__flyout .mega__aeye { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mint-400); }
    .mega__flyout .mega__abike { font-weight: 800; font-size: 1.02rem; margin-top: 4px; letter-spacing: -.01em; color: #fff; }
    .mega__flyout .mega__astat { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .mega__flyout .mega__anum { font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: .9; font-variant-numeric: tabular-nums; }
    .mega__flyout .mega__albl { font-size: .82rem; line-height: 1.25; color: #a7d8d0; font-weight: 500; }
    .mega__flyout .mega__top { margin-top: 16px; }
    .mega__flyout .mega__top[hidden] { display: none; }
    .mega__flyout .mega__feye { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #7f9d98; margin-bottom: 9px; }
    .mega__flyout .mega__feat { display: block; text-decoration: none; color: inherit; }
    .mega__flyout .mega__fimg { display: flex; align-items: center; justify-content: center; height: 112px; border-radius: 10px; background: #fff; padding: 10px; overflow: hidden; }
    .mega__flyout .mega__fimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .mega__flyout .mega__fnm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: .85rem; line-height: 1.3; margin-top: 11px; }
    .mega__flyout .mega__frow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 8px; }
    .mega__flyout .mega__fprice { font-weight: 800; font-size: 1rem; color: #fff; }
    .mega__flyout .mega__ffit { flex: 0 0 auto; font-size: .62rem; font-weight: 700; color: #9df0e4; background: rgba(18,182,163,.16); border: 1px solid rgba(18,182,163,.4); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
    .mega__flyout .mega__ffit[hidden] { display: none; }
    .mega__flyout .mega__feat:hover .mega__fnm { color: var(--mint-300); }

    /* Rail: oben/unten gleicher sauberer Anschnitt (wirkt scrollbar) + dezenter Scrollbalken (nur Desktop-Flyout) */
    @media (min-width: 750px) {
      .mega__flyout .mega__rail { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--mint-600) 42%, transparent) transparent; }
      .mega__flyout .mega__rail::-webkit-scrollbar { width: 6px; }
      .mega__flyout .mega__rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mint-600) 38%, transparent); border-radius: 999px; }
      .mega__flyout .mega__rail::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--mint-600) 60%, transparent); }
      .mega__flyout .mega__rail::-webkit-scrollbar-track { background: transparent; }
    }
    .mega__flyout .mega__acta { margin-top: 20px; }
    .mega__flyout .mega__acta a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--mint-500); color: var(--ink); font-weight: 800; font-size: .8rem; text-decoration: none; border-radius: 10px; padding: 12px; }
    .mega__flyout .mega__acta a:hover { background: var(--mint-400); }
    /* Aside showcase — rotating best-seller ⇄ new list (data assets/parts-showcase.json), each row with a
       quick-add "+". Filled + rotated by src/js/shop/parts-menu.js; sits between the fit-count card + the CTA. */
    .mega__flyout .mega__show { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.09); }
    .mega__flyout .mega__show[hidden] { display: none; }
    .mega__flyout .mega__show-mode { display: inline-flex; align-items: center; gap: 7px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); transition: color var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
    .mega__flyout .mega__show-mode.is-best { color: #f5c56b; background: rgba(245,197,107,.12); border: 1px solid rgba(245,197,107,.32); }
    .mega__flyout .mega__show-mode.is-new { color: var(--mint-300); background: rgba(21,205,176,.14); border: 1px solid rgba(21,205,176,.4); }
    .mega__flyout .mega__show-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .mega__flyout .mega__show-row { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: border-color var(--dur-fast), background var(--dur-fast); }
    .mega__flyout .mega__show-row:hover { border-color: rgba(21,205,176,.28); background: rgba(21,205,176,.05); }
    .mega__flyout .mega__show-img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .mega__flyout .mega__show-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
    .mega__flyout .mega__show-mid { min-width: 0; flex: 1; }
    .mega__flyout .mega__show-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; font-weight: 600; line-height: 1.24; color: #fff; text-decoration: none; }
    .mega__flyout .mega__show-nm:hover { color: var(--mint-300); }
    .mega__flyout .mega__show-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
    .mega__flyout .mega__show-pr { font-size: .78rem; font-weight: 800; color: #fff; }
    .mega__flyout .mega__show-dot { color: #6f8f88; }
    .mega__flyout .mega__show-fit { font-size: .62rem; font-weight: 700; color: #9df0e4; }
    .mega__flyout .mega__show-add { flex: 0 0 auto; width: 30px; height: 30px; cursor: pointer; border-radius: 8px; border: 1px solid rgba(21,205,176,.3); background: rgba(21,205,176,.07); color: var(--mint-300); display: flex; align-items: center; justify-content: center; transition: transform .18s cubic-bezier(.2,1.3,.4,1), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
    .mega__flyout .mega__show-add svg { width: 15px; height: 15px; }
    .mega__flyout .mega__show-add:hover { background: var(--mint-500); border-color: transparent; color: var(--ink); transform: scale(1.09); }
    .mega__flyout .mega__show-add:active { transform: scale(.88); }
    .mega__flyout .mega__show-add.is-done { background: #0f8f7c; border-color: transparent; color: #fff; }
    .mega__flyout .mega__show-add.is-err { background: #b3402f; border-color: transparent; color: #fff; }
    .mega__flyout .mega__show-add[disabled] { opacity: .4; cursor: not-allowed; }
    .mega__flyout .mega__show-add.is-busy { opacity: .7; }
    .mega__flyout .mega__show-prog { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 13px; overflow: hidden; }
    .mega__flyout .mega__show-prog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint-500), var(--mint-300)); }
    @media (prefers-reduced-motion: reduce) { .mega__flyout .mega__show-prog > i { transition: none !important; } }
    @media (max-width: 749px) {
      .mega__flyout .mega__pane.is-active { flex-direction: column; }
      .mega__flyout .mega__aside { flex: 1 1 auto; margin-top: var(--space-4); }
      .mega__flyout .mega__rail { margin-right: 0; }
    }

    /* ── Parts flyout — desktop fill (≥1100px): as the full-width panel widens, the options flow into more
       (capped-width) columns and the fits-card grows, so the width is filled with content at the SAME type
       scale as every other menu. Placed after the base flyout rules so it wins the cascade. ── */
    @media (min-width: 1100px) {
      /* options flow into as many tidy (≤340px) columns as fit, left-packed, so the count pill stays beside
         its label instead of drifting to a far edge as the pane widens */
      .mega__flyout .mega__opts { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); column-gap: var(--space-8); row-gap: 0; justify-content: start; align-content: start; }
      /* fits-your-bike card grows to help consume the extra width */
      .mega__flyout .mega__aside { flex: 0 0 380px; }
      /* keep the "All <category> →" link beside its heading instead of letting it strand at the far right
         of the now-wide pane header */
      .mega__flyout .mega__pane-hd .mega__all { margin-left: var(--space-6); }
    }

    /* Search (predictive) */
    .site-search { flex: 0 0 auto; }
    .ps { position: relative; }
    .ps__form { display: flex; align-items: center; background: #fff; border: 1.5px solid var(--neutral-300); border-radius: var(--radius-pill); overflow: hidden; height: 40px; width: 420px; max-width: 42vw; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
    .ps__form:focus-within { border-color: var(--mint-500); box-shadow: 0 0 0 3px var(--mint-100); }
    .ps__form input { flex: 1; min-width: 40px; border: 0; outline: 0; font: inherit; font-size: .88rem; padding: 0 var(--space-4); background: none; color: var(--ink); }
    .ps__btn { background: var(--mint-500); border: 0; width: 44px; height: 100%; display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
    .ps__btn:hover { background: var(--mint-400); }
    .ps__btn .cat-icon { width: 18px; height: 18px; color: var(--ink); }
    .ps__results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 95; overflow: hidden; }
    .ps__results[hidden] { display: none; }

    /* ── Mega-panel search dropdown (Vorschlag 03) ── */
    .megasearch { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 96; display: grid; grid-template-columns: 280px 1fr; background: #fff; border: 1px solid #ededf1; border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden auto; overscroll-behavior: contain; max-height: min(74vh, 680px); }
    .megasearch[hidden] { display: none; }
    .ms__rail { background: #fafafb; border-right: 1px solid var(--neutral-100); padding: 12px 0; display: flex; flex-direction: column; align-content: start; }
    .ms__lab { font-family: "Space Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--neutral-400); padding: 10px 22px 6px; }
    .ms__sic { width: 14px; height: 14px; color: var(--neutral-400); flex: none; }
    .ms__q { display: flex; align-items: center; gap: 11px; padding: 8px 22px; font-size: .88rem; color: var(--ink); text-decoration: none; }
    .ms__q:hover { background: var(--mint-50); }
    .ms__q .ms__match { color: var(--neutral-500); }
    .ms__q b { font-weight: 600; }
    .ms__c { display: block; padding: 8px 22px; font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none; }
    .ms__c:hover { background: var(--mint-50); color: var(--mint-800); }
    .ms__brand { display: flex; align-items: center; gap: 12px; margin: 14px 16px 4px; padding: 13px 16px; background: var(--ink); border-radius: 14px; color: #fff; text-decoration: none; position: relative; overflow: hidden; }
    .ms__brand::after { content: ""; position: absolute; right: -24px; top: -30px; width: 110px; height: 130px; background: radial-gradient(closest-side, rgba(21,205,176,.35), transparent); }
    .ms__brand strong { font-family: "Satoshi", system-ui, sans-serif; font-weight: 900; font-size: 1.05rem; display: block; }
    .ms__brand small { color: var(--mint-300); font-size: .72rem; }
    .ms__brand-ar { margin-left: auto; color: var(--mint-400); font-weight: 700; position: relative; z-index: 1; }
    .ms__main { padding: 18px 24px 16px; min-width: 0; }
    .ms__mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .ms__mh h4 { margin: 0; font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: 1rem; }
    .ms__all { font-size: .8rem; font-weight: 600; color: var(--mint-700); border: 1.5px solid var(--mint-300); border-radius: var(--radius-pill); padding: 7px 16px; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
    .ms__all:hover { background: var(--mint-500); border-color: var(--mint-500); color: var(--ink); }
    .ms__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .ms__card { border: 1px solid var(--neutral-100); border-radius: 16px; padding: 12px; background: #fff; text-decoration: none; color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
    .ms__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mint-200); }
    .ms__cimg { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, #f4f4f6, #e9e9ee); overflow: hidden; }
    .ms__cimg img { width: 86%; height: 86%; object-fit: contain; }
    .ms__off { position: absolute; top: 8px; left: 8px; font-size: .64rem; font-weight: 600; background: var(--mint-500); color: var(--ink); border-radius: var(--radius-pill); padding: 3px 8px; }
    .ms__card strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-weight: 600; font-size: .84rem; line-height: 1.3; min-height: 2.6em; }
    .ms__price { display: block; margin-top: 6px; font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: .95rem; }
    .ms__price s { color: var(--neutral-400); font-size: .74rem; font-weight: 400; margin-left: 6px; }
    .ms__price.is-sale { color: var(--mint-700); }
    .ms__fit { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .68rem; font-weight: 600; color: var(--mint-800); background: var(--mint-50); border: 1px solid var(--mint-200); border-radius: var(--radius-pill); padding: 3px 9px; }
    .ms__fit i, .ms__strip i { width: 14px; height: 14px; border-radius: 50%; background: var(--mint-500); color: var(--ink); font-style: normal; display: inline-grid; place-items: center; font-size: .58rem; flex: none; }
    .ms__strip { margin-top: 16px; background: linear-gradient(90deg, var(--mint-50), #fff); border: 1px solid var(--mint-100); border-radius: 12px; padding: 10px 16px; font-size: .78rem; color: var(--mint-900); display: flex; align-items: center; gap: 10px; }
    .ms__strip b { font-weight: 600; }
    .ms__empty { padding: 34px 10px; text-align: center; color: var(--ink); font-weight: 600; }
    .ms__empty small { display: block; margin-top: 6px; color: var(--neutral-500); font-weight: 400; font-size: .8rem; }
    [dir="rtl"] .ms__rail { border-right: 0; border-left: 1px solid var(--neutral-100); }
    [dir="rtl"] .ms__brand-ar { transform: scaleX(-1); }
    [dir="rtl"] .ms__off { left: auto; right: 8px; }
    @media (max-width: 1180px) { .ms__cards { grid-template-columns: repeat(2, 1fr); } .megasearch { grid-template-columns: 240px 1fr; } }

    /* Burger (mobile) */
    .site-header__burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
    .site-header__burger span { width: 20px; height: 2px; background: var(--ink); display: block; }

    /* ── Mobile off-canvas drawer (iOS-style drill-down) ── */
    /* inset:0 würde die Höhe an den (backdrop-filter-)Header binden → Menü nur ~80px hoch.
       Darum fixe Bildschirmhöhe erzwingen (dvh = ohne Browserleisten-Sprünge), Fallback vh. */
    .nav-drawer { position: fixed; inset: 0; bottom: auto; height: 100vh; height: 100dvh; z-index: 200; visibility: hidden; }
    .nav-drawer.is-open { visibility: visible; }
    body.nav-open .site-header { z-index: 1000; }              /* Menü über die fixe Hero-Tagline (z-101) heben → „Built for riders" blitzt nicht mehr durch */
    body.nav-open .site-header__util { visibility: hidden; }
    .nav-drawer__scrim { position: absolute; inset: 0; background: rgba(10,10,11,.45); opacity: 0; transition: opacity var(--dur-base); }
    .nav-drawer.is-open .nav-drawer__scrim { opacity: 1; }
    .nav-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 88%; max-width: 400px; background: var(--surface); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 60px rgba(0,0,0,.28); }
    .nav-drawer.is-open .nav-drawer__panel { transform: none; }

    /* top bar (logo + close) — fixed above the drilling stage */
    .nav-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--neutral-100); flex: 0 0 auto; }
    .nav-drawer__brand { display: inline-flex; align-items: center; }
    .nav-drawer__brand .ip-logo { width: 58px; height: 39px; }
    .nav-drawer__close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--neutral-500); padding: var(--space-2); display: inline-flex; transition: color var(--dur-fast); }
    .nav-drawer__close:hover { color: var(--ink); }

    /* drilling stage: the screen that scrolls; sub-screens swap in/out */
    .nav-drawer__stage { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .nav-drawer__screen { display: none; flex-direction: column; min-height: 100%; }
    .nav-drawer__screen.is-active { display: flex; animation: nd-in .22s var(--ease-out); }
    @keyframes nd-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

    /* sticky back-bar (sub-screens) */
    .nav-drawer__back { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4) var(--space-6); background: var(--surface); border: 0; border-bottom: 1px solid var(--neutral-100); font: inherit; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); cursor: pointer; }
    .nav-drawer__back .cat-icon { width: 16px; height: 16px; color: var(--mint-600); transform: rotate(90deg); flex: none; }   /* down-chevron → points left */

    /* highlighted Garage call-to-action */
    .nav-drawer__garage { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) var(--space-6) var(--space-2); background: #fff; color: var(--ink); border: 1.5px dashed var(--mint-300, #8fd9cb); border-radius: var(--radius-lg); padding: 13px 14px; font: inherit; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
    .nav-drawer__garage:hover { background: var(--mint-50, #e6f7f3); border-color: var(--mint-500); }
    .nav-drawer__garage > .cat-icon:first-child { width: 34px; height: 34px; flex: none; padding: 7px; border-radius: 10px; background: var(--mint-50, #e6f7f3); color: var(--mint-700); box-sizing: border-box; }
    .nav-drawer__garage-txt { flex: 1; display: flex; flex-direction: column; text-align: left; }
    .nav-drawer__garage-txt strong { font-weight: 700; font-size: .95rem; color: var(--mint-800, #0a342c); }
    .nav-drawer__garage-txt small { font-weight: 500; font-size: .75rem; color: var(--neutral-500); margin-top: 1px; }
    .nav-drawer__garage .cat-icon:last-child { width: 16px; height: 16px; color: var(--mint-600); transform: rotate(-90deg); }
    .nav-drawer__rid { border-style: solid; border-color: var(--mint-500); background: var(--mint-50, #e6f7f3); text-decoration: none; }
    .nav-drawer__rid:hover { background: var(--mint-100, #d6f1ea); border-color: var(--mint-600); }

    /* menu rows (root + sub-screens, incl. generated parts list) */
    .nav-drawer__menu { list-style: none; margin: var(--space-1) 0 0; padding: 0 var(--space-6); }
    .nav-drawer__menu > li { border-bottom: 1px solid var(--neutral-100); }
    .nav-drawer__menu > li > a,
    .nav-drawer__menu > li > button { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4) 2px; background: none; border: 0; font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: .01em; color: #1a1a1a; text-align: left; text-decoration: none; cursor: pointer; transition: color var(--dur-fast); }
    .nav-drawer__menu > li > a:hover,
    .nav-drawer__menu > li > button:hover,
    .nav-drawer__menu > li > a:active,
    .nav-drawer__menu > li > button:active { color: var(--mint-700); }
    .nav-drawer__menu .cat-icon { width: 24px; height: 24px; color: var(--mint-600); flex: none; }
    .nd-row__chev { margin-left: auto; display: inline-flex; }
    .nd-row__chev .cat-icon { width: 15px; height: 15px; color: var(--neutral-400); transform: rotate(-90deg); }
    .nd-row--sale { color: var(--mint-600) !important; }
    .nd-row--all { color: var(--mint-700); font-weight: 800; }
    /* drill-down: group headers + greyed "coming" rows */
    .nav-drawer__menu > li > span.nd-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4) 2px; font-weight: 600; font-size: 1rem; color: #1a1a1a; }
    .nd-row--soon { color: var(--neutral-400) !important; cursor: default; }
    .nd-row--soon .cat-icon { color: var(--neutral-300); }
    .nd-soon { margin-left: auto; font-family: "Space Mono", monospace; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--neutral-400); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); padding: 1px 6px; font-style: normal; }
    .nav-drawer__menu > li.nd-group { border-bottom: 0; padding: var(--space-4) 2px var(--space-1); font-family: "Space Mono", monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--neutral-500); }

    /* persistent utility footer (root screen) */
    .nav-drawer__util { margin-top: auto; padding: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); border-top: 1px solid var(--neutral-200); }
    .nav-drawer__util a, .nav-drawer__util button { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; color: var(--neutral-700); background: none; border: 0; font: inherit; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; text-align: left; }
    .nav-drawer__util .cat-icon { width: 19px; height: 19px; color: var(--mint-600); flex: none; }
    .nav-drawer__util a:hover, .nav-drawer__util button:hover { color: var(--mint-700); }
    body.nav-open { overflow: hidden; }

    /* Responsive */
    @media (max-width: 992px) {
      .site-header__nav { display: none; }
      /* Menü LINKS · Logo MITTIG (etwas größer) · rechts Suche/Login/Herz/Warenkorb — gleich groß & gleichmäßig.
         3-Spalten-Grid (1fr auto 1fr) hält das Logo exakt mittig, egal wie breit die Icon-Reihe ist. */
      .main-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); min-height: 58px; position: relative; }
      .site-header__burger { display: flex; justify-self: start; width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0; }
      .main-left { display: flex; align-items: center; gap: 9px; }
      .main-left .hact:not(.hact--riderid) { display: none; }   /* nur Rider-ID neben dem Menü-Icon */
      .main-left .hact { padding: 0; gap: 0; }
      .main-left .hact span:not(.hact__count):not(.hact__ico) { display: none; }
      .site-logo { justify-self: center; position: static; transform: none; margin: 0; }
      .ip-logo { width: 64px; height: 42px; }
      .site-logo img { max-height: 38px; width: auto !important; }
      .main-right { justify-self: end; flex: 0 0 auto; gap: 11px; margin-left: 0; }
      .hact--search { display: inline-flex; }
      .hact--withdraw { display: none; }   /* Widerruf nicht in der Top-Leiste (bleibt Footer/Menü) */
      /* Jeder Icon-Button kollabiert auf sein Icon → exakt gleiche Größe & gleichmäßiger Abstand */
      .main-right .hact { padding: 0; gap: 0; }
      /* .ci-ho/.ci-hf ausnehmen: das sind die Umbruch-Spans um das Herz-Icon (leer/gefüllt), keine Labels.
         Ohne die :not() verschwand mobil das Herz und nur sein „0"-Zähler blieb stehen — direkt neben dem Login-Icon. */
      .main-right .hact span:not(.hact__count):not(.hact__ico):not(.ci-ho):not(.ci-hf) { display: none; }
      .main-right .hact__ico { display: inline-flex; }
      .main-left .cat-icon, .main-right .cat-icon { width: 26px; height: 26px; }
      .util-social, .util-ann { display: none; }
      .util-row { grid-template-columns: 1fr; justify-items: end; min-height: 24px; }
    }
    /* kleine Phones: Icons + Logo + Abstände etwas enger, damit alles in eine Zeile passt */
    @media (max-width: 600px) {
      .main-right { gap: 9px; }
      .main-left .cat-icon, .main-right .cat-icon { width: 24px; height: 24px; }
      .ip-logo { width: 58px; height: 38px; }
    }
    /* bigger, bolder burger on mobile */
    @media (max-width: 992px) {
      .site-header__burger span { width: 24px; height: 2.5px; }
      .site-header.header--over .site-header__burger span { background: #fff; }
    }
/* END_SECTION:header */

/* START_SECTION:helm-pass (INDEX:34) */
.hpw{--mint:#15cdb0;--mint2:#2fe3c6;--mint3:#7df0dd;--glow:rgba(21,205,176,.45);--glow2:rgba(21,205,176,.18);--bg:#0a0e11;--surf:rgba(255,255,255,.045);--ln:rgba(255,255,255,.09);--tx:#f3f7f6;--sub:#93a09b;--mut:#5d6a65;background:radial-gradient(120% 75% at 88% -8%,rgba(21,205,176,.16),transparent 52%),radial-gradient(90% 70% at -8% 108%,rgba(21,205,176,.10),transparent 55%),var(--bg);color:var(--tx);padding:clamp(1.6rem,4vw,3rem) 14px}
    .hpw__app{width:100%;max-width:480px;margin-inline:auto;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--ln);border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -34px rgba(0,0,0,.85);position:relative}
    .hpw__sweep{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#15cdb0,#aefff2,#15cdb0);background-size:220% 100%;animation:hpwSweep 5.5s linear infinite}
    @keyframes hpwSweep{to{background-position:-220% 0}}
    .hpw__head{padding:18px 22px 14px;border-bottom:1px solid var(--ln);position:relative}
    .hpw__headTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .hpw__brand{display:flex;align-items:center;gap:10px}
    .hpw__tab{width:5px;height:20px;background:var(--mint);transform:skewX(-8deg);box-shadow:0 0 12px var(--glow)}
    .hpw__brandName{font-weight:800;letter-spacing:.02em;font-size:16px}
    .hpw__skipAll{font-size:13.5px;color:var(--mut);background:none;border:0;cursor:pointer;font-family:inherit;transition:color .2s}
    .hpw__skipAll:hover{color:var(--mint3)}
    .hpw__meters{display:flex;align-items:center;gap:14px}
    .hpw__acc{position:relative;width:46px;height:46px;flex:none}
    .hpw__acc svg{transform:rotate(-90deg)}
    .hpw__accTrack{stroke:rgba(255,255,255,.08)}
    .hpw__accBar{stroke:url(#hpwG);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 4px var(--glow))}
    .hpw__accNum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
    .hpw__pgroup{flex:1}
    .hpw__pgroupLbl{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-bottom:7px}
    .hpw__pgroupLbl b{color:var(--tx);font-weight:600}
    .hpw__bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
    .hpw__barFill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--mint3));box-shadow:0 0 10px var(--glow);transition:width .6s cubic-bezier(.4,0,.2,1)}
    .hpw__view{padding:30px 24px 26px;min-height:430px;position:relative}
    .hpw__step{animation:hpwIn .5s cubic-bezier(.16,1,.3,1) both}
    .hpw__step.out{animation:hpwOut .32s cubic-bezier(.4,0,1,1) both}
    @keyframes hpwIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
    @keyframes hpwOut{to{opacity:0;transform:translateY(-16px) scale(.985)}}
    .hpw__kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint3);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .hpw__kicker::before{content:"";width:18px;height:1px;background:var(--mint)}
    .hpw__q{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.18;margin-bottom:8px}
    .hpw__q--sm{font-size:20px;margin-bottom:14px}
    .hpw__sub{color:var(--sub);font-size:15.5px;line-height:1.5;margin-bottom:22px}
    .hpw__hero{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
    .hpw__hero b{color:var(--mint3)}
    .hpw__heroIco{width:74px;height:74px;border-radius:20px;background:var(--surf);border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;color:var(--mint3);margin-bottom:20px;animation:hpwBob 3.4s ease-in-out infinite}
    @keyframes hpwBob{50%{transform:translateY(-7px)}}
    .hpw__heroIco svg{width:42px;height:42px}
    .hpw__numwrap{display:flex;align-items:flex-end;gap:12px;margin:6px 0 4px}
    .hpw__num{font:inherit;font-weight:800;font-size:46px;letter-spacing:-.03em;width:160px;padding:6px 4px;color:var(--tx);background:none;border:0;border-bottom:2px solid var(--ln);text-align:center;transition:border-color .25s}
    .hpw__num:focus{outline:none;border-color:var(--mint)}
    .hpw__unit{font-size:19px;color:var(--sub);padding-bottom:12px}
    .hpw__opts{display:grid;gap:10px}
    .hpw__opts--two{grid-template-columns:1fr 1fr}
    .hpw__opts--grid{grid-template-columns:repeat(5,1fr);gap:9px}
    .hpw__opt--num{justify-content:center;text-align:center;padding:15px 6px;font-size:16px;font-weight:700}
    .hpw__opt--num.sel::after{display:none}
    @media (max-width:430px){.hpw__opts--grid{grid-template-columns:repeat(4,1fr)}}
    .hpw__opt{position:relative;display:flex;align-items:center;gap:13px;padding:16px 16px;text-align:left;font:inherit;font-weight:600;font-size:16px;color:var(--tx);background:var(--surf);border:1px solid var(--ln);border-radius:15px;cursor:pointer;transition:transform .18s,border-color .2s,box-shadow .2s,background .2s;overflow:hidden}
    .hpw__opt:hover{transform:translateY(-2px);border-color:var(--mint);box-shadow:0 6px 22px -8px var(--glow)}
    .hpw__opt.sel{border-color:var(--mint);background:rgba(21,205,176,.10);box-shadow:0 0 0 1px var(--mint) inset}
    .hpw__opt.sel::after{content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--mint);color:#04231d;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;animation:hpwPop .3s cubic-bezier(.2,1.4,.4,1)}
    @keyframes hpwPop{from{transform:translateY(-50%) scale(0)}}
    .hpw__emo{font-size:22px;flex:none;width:26px;text-align:center}
    .hpw__optsub{display:block;font-weight:400;font-size:13.5px;color:var(--sub);margin-top:2px}
    .hpw__shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
    .hpw__shape{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 6px 15px;font:inherit;font-weight:700;font-size:14.5px;color:var(--tx);background:var(--surf);border:1px solid var(--ln);border-radius:17px;cursor:pointer;transition:transform .18s,border-color .2s,box-shadow .2s}
    .hpw__shape:hover{transform:translateY(-3px);border-color:var(--mint);box-shadow:0 8px 26px -10px var(--glow)}
    .hpw__shape.sel{border-color:var(--mint);background:rgba(21,205,176,.10)}
    .hpw__sicon{width:44px;height:52px;border:2.5px solid var(--mint3);background:rgba(21,205,176,.10);animation:hpwBob 4s ease-in-out infinite}
    .hpw__sicon--r{border-radius:50%}
    .hpw__sicon--i{border-radius:50% 50% 48% 48%/44% 44% 56% 56%;height:54px;width:40px}
    .hpw__sicon--l{border-radius:50%;width:34px;height:56px}
    .hpw__chips{display:flex;flex-wrap:wrap;gap:9px}
    .hpw__chip{font:inherit;font-weight:600;font-size:15px;color:var(--tx);background:var(--surf);border:1px solid var(--ln);border-radius:99px;padding:11px 16px;cursor:pointer;transition:transform .16s,border-color .2s,box-shadow .2s,background .2s}
    .hpw__chip:hover{transform:translateY(-2px);border-color:var(--mint);box-shadow:0 0 14px -2px var(--glow)}
    .hpw__chip.sel{border-color:var(--mint);background:rgba(21,205,176,.12);color:var(--mint3)}
    .hpw__field{display:flex;flex-direction:column;gap:12px}
    .hpw__sel,.hpw__inp{font:inherit;font-size:16px;color:var(--tx);background:var(--surf);border:1px solid var(--ln);border-radius:13px;padding:14px 15px;width:100%}
    .hpw__sel:focus,.hpw__inp:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--glow2)}
    .hpw__nav{display:flex;align-items:center;gap:12px;margin-top:26px}
    .hpw__back{background:none;border:0;color:var(--sub);font:inherit;font-size:15px;cursor:pointer;padding:6px 2px;transition:color .2s}
    .hpw__back:hover{color:var(--tx)}
    .hpw__btn{margin-left:auto;font:inherit;font-weight:700;font-size:16px;color:#04231d;background:var(--mint);border:0;border-radius:14px;padding:15px 28px;cursor:pointer;transition:transform .15s,box-shadow .25s,background .2s;box-shadow:0 8px 22px -8px var(--glow)}
    .hpw__btn:hover{transform:translateY(-2px);background:var(--mint2);box-shadow:0 12px 30px -8px var(--glow)}
    .hpw__btn--full{margin-left:0;width:100%}
    .hpw__skiplink{font-size:14px;color:var(--mut);background:none;border:0;cursor:pointer;font-family:inherit;margin-left:auto;transition:color .2s}
    .hpw__skiplink:hover{color:var(--mint3)}
    .hpw__pass{background:radial-gradient(120% 100% at 100% 0,rgba(21,205,176,.16),transparent 60%),rgba(21,205,176,.07);border:1px solid var(--mint);border-radius:20px;padding:20px;margin-bottom:20px;position:relative;overflow:hidden}
    .hpw__passK{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint3);font-weight:700;margin-bottom:14px}
    .hpw__passGrid{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px}
    .hpw__passLab{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);display:block;margin-bottom:3px}
    .hpw__passVal{font-size:25px;font-weight:900;letter-spacing:-.02em}
    .hpw__passUnit{font-size:15px;color:var(--sub)}
    .hpw__passAcc{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sub)}
    .hpw__passAcc b{color:var(--mint3)}
    .hpw__passAccbar{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
    .hpw__passAccfill{height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--mint3));border-radius:99px;box-shadow:0 0 10px var(--glow);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
    .hpw__matches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .hpw__match{opacity:0;transform:translateY(16px);animation:hpwRise .55s cubic-bezier(.16,1,.3,1) forwards;display:block;text-decoration:none;color:var(--tx);background:var(--surf);border:1px solid var(--ln);border-radius:15px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
    @keyframes hpwRise{to{opacity:1;transform:none}}
    .hpw__match:hover{transform:translateY(-3px);border-color:var(--mint);box-shadow:0 10px 28px -10px var(--glow)}
    .hpw__matchImg{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 30%,rgba(21,205,176,.16),transparent),rgba(255,255,255,.03);color:var(--mint3);overflow:hidden}
    .hpw__matchImg img{width:100%;height:100%;object-fit:cover}
    .hpw__matchPh{display:flex;align-items:center;justify-content:center}
    .hpw__matchPh svg{width:52px;height:52px}
    .hpw__matchB{padding:11px 13px}
    .hpw__matchM{font-size:15px;font-weight:700;margin:1px 0 7px;line-height:1.2}
    .hpw__matchFit{font-size:13px;font-weight:800;color:var(--mint3)}
    .hpw__matchFit--eng,.hpw__matchFit--unsicher{color:#ffce6b}
    .hpw__matchR{font-size:12px;color:var(--sub);margin-top:2px}
    .hpw__viewall{color:var(--mint3);font-weight:700}
    .hpw__cardhost[hidden]{display:none}
    .hpw__ridwrap{margin:18px 0 26px;--ridScale:.76}
    .hpw__ridwrap .ridcard{gap:18px}
    /* The Rider-ID card is a fixed 560px design; scale only the 3D stage via
       --ridScale so it fits the frame at every breakpoint (the responsive hub
       block below resizes it). Buttons/hint stay full size. Negative margin
       reclaims the empty box space the transform leaves behind. Scoped to
       .hpw__ridwrap so a standalone card elsewhere stays full size. */
    .hpw__ridwrap .ridcard__stage{transform:scale(var(--ridScale));transform-origin:top center;margin-bottom:calc((var(--ridScale) - 1) * 372px);max-width:none}
    @media (max-width:430px){.hpw__ridwrap{--ridScale:.62}}
    @media (max-width:430px){.hpw__shapes{grid-template-columns:1fr}.hpw__shape{flex-direction:row;justify-content:flex-start;gap:18px;padding:14px 16px}.hpw__matches{grid-template-columns:1fr}}
    @media (prefers-reduced-motion:reduce){.hpw__sweep,.hpw__heroIco,.hpw__sicon{animation:none}.hpw__step,.hpw__opt,.hpw__shape,.hpw__chip,.hpw__btn,.hpw__match,.hpw__barFill,.hpw__accBar,.hpw__passAccfill,.hpw__num,.hpw__sel,.hpw__inp{transition:none;animation:none;opacity:1;transform:none}}
    /* --- Hub console -------------------------------------------------------- */
    .hpw__console{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
    .hpw__crow{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surf);border:1px solid var(--ln);border-radius:15px;min-height:62px;flex-wrap:wrap;row-gap:10px}
    .hpw__cicon{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--mint3);opacity:.85}
    .hpw__cicon svg{width:20px;height:20px}
    .hpw__ctxt{flex:1;min-width:108px}
    .hpw__clabel{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--sub);font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
    .hpw__cval{font-size:15px;font-weight:700;color:var(--tx);white-space:normal;overflow-wrap:anywhere}
    .hpw__cval--sub{font-size:13.5px;font-weight:400;color:var(--sub)}
    .hpw__cbtns{display:flex;gap:8px;flex-wrap:wrap;flex:none;margin-left:auto}
    .hpw__cbtn{display:inline-flex;align-items:center;font:inherit;font-weight:700;font-size:13px;cursor:pointer;border-radius:10px;padding:8px 14px;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
    .hpw__cbtn:not(.hpw__cbtn--ghost){color:#04231d;background:var(--mint);border:1px solid transparent;box-shadow:0 4px 14px -5px var(--glow)}
    .hpw__cbtn:not(.hpw__cbtn--ghost):hover{transform:translateY(-1px);background:var(--mint2);box-shadow:0 6px 18px -5px var(--glow)}
    .hpw__cbtn--ghost{color:var(--mint3);background:transparent;border:1px solid var(--mint)}
    .hpw__cbtn--ghost:hover{background:rgba(21,205,176,.10);transform:translateY(-1px)}
    .hpw__teaser{opacity:.38;cursor:default;pointer-events:none}
    .hpw__soon{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.07);border-radius:99px;padding:2px 7px;line-height:1.5}
    /* --- Complete-your-Rider-ID CTA + guided-setup chrome (Skip control) ---- */
    .hpw__setupcta{width:100%;text-align:left;font:inherit;cursor:pointer;color:inherit;border:1px solid var(--mint);background:var(--glow2)}
    .hpw__setuphd{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint3);font-weight:700;margin-bottom:12px}
    .hpw__skip{font:inherit;font-size:13px;color:var(--sub);background:none;border:0;cursor:pointer;padding:8px}
    @media (max-width:480px){.hpw__crow{flex-wrap:wrap;row-gap:10px}.hpw__ctxt{min-width:calc(100% - 46px)}.hpw__cbtns{width:100%;margin-left:46px}.hpw__cval{white-space:normal}}
    /* --- Rank panel --------------------------------------------------------- */
    .hpw__rank{background:var(--surf);border:1px solid var(--ln);border-radius:15px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
    .hpw__rankHd{display:flex;align-items:center;gap:10px}
    .hpw__rankHd .hpw__cicon{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--mint3)}
    .hpw__rankHd .hpw__cicon svg{width:18px;height:18px}
    .hpw__rankName{font-size:15px;font-weight:800;letter-spacing:.06em;color:var(--mint3);flex:1}
    .hpw__rankXp{font-size:14px;font-weight:700;color:var(--tx);margin-left:auto}
    .hpw__rankBar{height:6px;border-radius:99px;background:var(--ln);overflow:hidden}
    .hpw__rankFill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--mint3));box-shadow:0 0 10px var(--glow);transition:width .6s cubic-bezier(.4,0,.2,1);min-width:2px}
    .hpw__rankNext{font-size:12.5px;color:var(--sub);line-height:1.4}
    @media (prefers-reduced-motion:reduce){.hpw__rankFill{transition:none}}
    /* Favourite-colours swatch chips in the hub row */
    .hpw__cchip{display:inline-flex;align-items:center;gap:5px;margin-right:9px;font-size:14px;font-weight:700;color:var(--tx)}
    .hpw__cdot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.28);flex:none}
    .hpw__chip--color{display:inline-flex;align-items:center;gap:8px}
    .hpw__chip--color .hpw__cdot{width:13px;height:13px}
    /* --- Responsive hub layout ---------------------------------------------
       The wizard always stays a focused ~480px column. Only the Rider-ID hub
       (JS toggles .hpw--hub on the section) grows with the screen, capped well
       inside the header content width. Mobile (<760px) is unchanged. */
    @media (min-width:760px){
      .hpw--hub .hpw__app{max-width:600px}
      .hpw--hub .hpw__ridwrap{--ridScale:.92}
    }
    @media (min-width:1200px){
      .hpw--hub .hpw__app{max-width:1200px}
      .hpw--hub .hpw__hub{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:34px;align-items:start}
      .hpw--hub .hpw__hub>.hpw__kicker{grid-column:1/-1}
      .hpw--hub .hpw__hub>.hpw__hubMatches{grid-column:1/-1;margin-top:10px}
      .hpw--hub .hpw__ridwrap{--ridScale:.9;margin:2px 0 0}
      .hpw--hub .hpw__console{margin-bottom:0}
      .hpw--hub .hpw__matches{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
    }
    @media (min-width:1380px){
      .hpw--hub .hpw__ridwrap{--ridScale:.96}
    }
    /* Saved fits (replaces "Your top matches") */
    .hpw__fits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:10px}
    .hpw__fit{display:flex;flex-direction:column;gap:11px;background:var(--surf);border:1px solid var(--ln);border-radius:16px;padding:14px}
    .hpw__fit-thumbs{display:flex;gap:6px;flex-wrap:wrap}
    .hpw__fit-thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;background:#f5f6f8;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
    .hpw__fit-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
    .hpw__fit-thumb--ph{color:#9aa1ab;font-size:.6rem;font-weight:700;background:rgba(255,255,255,.06)}
    .hpw__fit-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
    .hpw__fit-count{font-size:.78rem;color:var(--sub)}
    .hpw__fit-total{font-weight:800;font-size:1.05rem;color:var(--tx)}
    .hpw__fit-actions{display:flex;align-items:center;gap:8px}
    .hpw__btn--sm{margin:0;font-size:13px;padding:10px 14px;border-radius:11px;flex:1;box-shadow:none}
    .hpw__fit-rm{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--ln);background:rgba(255,255,255,.04);color:var(--sub);font-size:1.25rem;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
    .hpw__fit-rm:hover{border-color:#ff7a6b;color:#ff7a6b}
    .hpw__fits-empty{background:var(--surf);border:1px dashed var(--ln);border-radius:16px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:10px}
    .hpw__fits-empty .hpw__cbtn{margin:0}
    .hpw__rank--open{width:100%;text-align:left;font:inherit;cursor:pointer;color:inherit}
    .hpw__rank--open:hover{border-color:var(--mint)}
    .hpw__rankMore{color:var(--mint3);font-weight:700;white-space:nowrap;margin-left:6px}
    .rlad{display:flex;flex-direction:column;gap:14px}
    .rlad__title{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--tx)}
    .rlad__hero{background:var(--surf);border:1px solid var(--ln);border-radius:15px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
    .rlad__herohd{display:flex;align-items:center;gap:10px}
    .rlad__heroname{font-size:15px;font-weight:800;letter-spacing:.06em;color:var(--mint3);flex:1}
    .rlad__heroxp{font-size:14px;font-weight:700;color:var(--tx)}
    .rlad__herobar{height:6px;border-radius:99px;background:var(--ln);overflow:hidden}
    .rlad__herobar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--mint3));box-shadow:0 0 10px var(--glow);min-width:2px}
    .rlad__heronext{font-size:12.5px;color:var(--sub)}
    .rlad__list{display:flex;flex-direction:column;gap:14px}
    .rlad__item{display:flex;gap:14px;align-items:center}
    .rlad__item[data-state="locked"]{opacity:.72}
    .rlad__card{position:relative;flex:none;width:220px;height:132px;border-radius:14px;overflow:hidden;padding:12px 14px;
      background:linear-gradient(155deg,var(--rid-c1,#0f161b),var(--rid-c2,#0a1014));
      box-shadow:inset 0 0 0 1px var(--rid-edge,rgba(255,255,255,.1)),inset 0 0 40px -22px var(--rid-glow,transparent);color:var(--rid-ink,#eaf5f2);display:flex;flex-direction:column}
    .rlad__tex{position:absolute;inset:0;background:var(--rid-tex,none);pointer-events:none}
    .rlad__top{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--rid-topA,#0f8f7c),var(--rid-topB,#9af5e6),var(--rid-topC,#17d1b6))}
    .rlad__big{position:absolute;right:4px;bottom:-22px;font-size:96px;font-weight:900;font-style:italic;letter-spacing:-6px;color:var(--rid-mint,#15cdb0);opacity:.1;pointer-events:none}
    .rlad__chd{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
    .rlad__brand{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.14em}
    .rlad__di{width:8px;height:8px;background:var(--rid-mint,#15cdb0);transform:rotate(45deg);box-shadow:0 0 8px var(--rid-glow,transparent)}
    .rlad__kind{font-size:8.5px;letter-spacing:.24em;color:var(--rid-mint3,#8af5e3)}
    .rlad__cname{position:relative;z-index:1;margin-top:12px;font-size:16px;font-weight:800;letter-spacing:-.01em}
    .rlad__crank{position:relative;z-index:1;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--rid-mint3,#8af5e3)}
    .rlad__cft{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;gap:8px}
    .rlad__chip{width:26px;height:19px;border-radius:4px;background:linear-gradient(135deg,#1c6f61,#2fe3c6 45%,#0c8f7c);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
    .rlad__mat{font-size:9px;letter-spacing:.06em;color:var(--rid-mint3,#8af5e3);opacity:.85}
    .rlad__meta{flex:1;min-width:0}
    .rlad__mhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .rlad__mrank{font-size:15px;font-weight:800;color:var(--tx)}
    .rlad__mthr{font-size:12.5px;color:var(--sub)}
    .rlad__badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:99px;background:var(--ln);color:var(--sub)}
    .rlad__badge--current,.rlad__badge--next{background:var(--glow);color:var(--mint3)}
    .rlad__drop{font-size:12.5px;color:var(--tx);margin-top:5px}
    .rlad__drop span{color:var(--sub)}
    .rlad__perks{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5}
    .rlad__inherit{font-size:11.5px;font-weight:600;color:var(--mint3);margin-top:6px;letter-spacing:.01em}
    .rlad__drop .rlad__amp{color:var(--mint3);font-weight:700}
    @media (max-width:560px){.rlad__item{flex-direction:column;align-items:stretch}.rlad__card{width:100%}}
    .hpw__bikecasc{display:flex;flex-direction:column;gap:10px}
    .hpw__sel{width:100%;height:44px;border-radius:12px;background:var(--surf);border:1px solid var(--ln);color:var(--tx);font:inherit;font-size:15px;padding:0 12px}
    .hpw__sel:disabled{opacity:.5}
    .hpw__sel:focus{outline:none;border-color:var(--mint)}
/* END_SECTION:helm-pass */

/* START_SECTION:holo-packs (INDEX:38) */
.hpk { position: relative; z-index: 2; }
  /* schiebt sich knapp unter das Garagen-Schwarz (beide schwarz → kein Cut), damit nach dem
     Kamera-Schwenk ins Schwarz die Packs ohne langes Leerscrollen direkt kommen */
  /* GROSSE Überlappung: die Packs sind schon gepinnt & aufgefächert, wenn die Garage ihr
     schwarzes Schlussbild erreicht — die Garage blendet dann weg (Crossfade), kein Schwarz-Loch */
  @media (min-width: 750px) { .hpk { margin-top: -120vh; } }
  /* Hochformat: Packs voll hinter das Garagen-Ende ziehen (wie Desktop), damit sie GESTAPELT
     bereitstehen, wenn die Garage sich auflöst (Crossfade) → kein langes Schwarz, kein Schwarz-Balken. */
  @media (max-width: 749px) { .hpk { margin-top: -120vh; } }
  .hpk__spacer { position: relative; }
  .hpk__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
  .hpk-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hpk-3d[hidden] { display: none; }
  /* Einstieg: kommt aus dem Garage-Schwarz — Overlay startet voll schwarz */
  .hpk-black { position: absolute; inset: 0; background: #000; z-index: 12; pointer-events: none; transition: opacity .6s ease; }
  .hpk-kopf { position: absolute; top: 19vh; left: 0; right: 0; text-align: center; z-index: 6; pointer-events: none; }
  .hpk-kopf .ey { font: 700 .7rem/1 'Space Mono', ui-monospace, monospace; letter-spacing: .44em;
    text-transform: uppercase; color: #56dcc0; margin: 0 0 12px; }
  .hpk-kopf h2 { font-family: 'Satoshi','Sora',sans-serif; font-size: clamp(1.8rem,4vw,3.2rem); font-weight: 900;
    letter-spacing: .05em; text-transform: uppercase; color: #eaf6f2; margin: 0;
    text-shadow: 0 0 40px rgba(86,220,192,.3); }
  .hpk-hint { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 6;
    font: 700 .6rem/1.6 'Space Mono', ui-monospace, monospace; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(151,162,161,.7); animation: hpkHb 2.2s infinite; pointer-events: none; text-align: center; }
  @keyframes hpkHb { 0%,100%{opacity:.4} 50%{opacity:1} }
  /* Hochformat: Hinweis kleiner + auf EINE Zeile (engeres Tracking, kein Umbruch) */
  @media (max-width: 749px) { .hpk-hint { font-size: .46rem; letter-spacing: .12em; white-space: nowrap; bottom: 3vh; } }

  /* ====== Holo-Karte (DOM, kommt aus dem 3D-Pack) ====== */
  .hpk-karte { position: absolute; width: 225px; height: 340px; z-index: 8; display: none; perspective: 950px;
    transform: translate(-50%,-50%); cursor: grab; left: 50%; top: 50%; }
  .hpk-karte:active { cursor: grabbing; }
  .hpk-karte.an { display: block; animation: hpkKRaus .85s cubic-bezier(.2,.9,.3,1.12) both; }
  @keyframes hpkKRaus { 0%{opacity:0; margin-top:70px; scale:.8} 100%{opacity:1; margin-top:0; scale:1} }
  /* Mobil: kein CSS-Animations-Fill (würde opacity/scale festhalten) — das JS steuert die Karte (Fokus folgen + ausblenden) */
  @media (max-width: 749px) { .hpk-karte.an { animation: none; } }
  /* kleine Raster-Karte: dezenter Schatten, damit er nicht auf die Nachbar-Packs fällt */
  .hpk-karte.k-mini .k-in, .hpk-karte.k-mini .k-back { box-shadow: 0 3px 12px rgba(0,0,0,.3); }
  .hpk-karte .k-rot { position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--rx,0deg)) rotateY(calc(var(--dy,0deg) + var(--ry,0deg))); }
  .hpk-karte .k-in, .hpk-karte .k-back { position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .hpk-karte .k-in { background:
      linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 42%, rgba(255,255,255,.08) 50%, rgba(6,42,35,.14) 60%, rgba(255,255,255,.3) 72%, rgba(255,255,255,0) 84%),
      linear-gradient(165deg, #d7f4eb 0%, #8fc6b8 40%, #6aa897 62%, #b6e2d6 100%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 34px rgba(86,220,192,.35), inset 0 0 26px rgba(255,255,255,.25);
    padding: 20px 16px; text-align: center; }
  .hpk-karte .k-back { transform: rotateY(180deg);
    background: radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
      linear-gradient(155deg, #9ed2c4 0%, #5e9d8d 50%, #aedcd0 100%);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 34px rgba(86,220,192,.3);
    display: grid; place-items: center; }
  .hpk-karte .k-back img { width: 62%; opacity: .82;
    filter: brightness(0) drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
  .hpk-karte .k-back span { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
    font: 700 .55rem/1 'Space Mono', ui-monospace, monospace; letter-spacing: .34em; color: rgba(6,42,35,.6); text-transform: uppercase; }
  .hpk-karte .foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
    background: linear-gradient(115deg, transparent 18%, rgba(255,80,220,.5) 34%, rgba(80,255,255,.55) 46%, rgba(255,235,80,.45) 58%, rgba(120,80,255,.4) 68%, transparent 82%);
    background-size: 240% 240%; background-position: var(--fx,50%) var(--fy,50%); filter: saturate(1.3); }
  .hpk-karte .funkel { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .4;
    background: repeating-linear-gradient(83deg, rgba(255,255,255,.13) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(-7deg, rgba(255,255,255,.1) 0 1px, transparent 1px 4px);
    background-position: var(--fx,50%) var(--fy,50%); }
  .hpk-karte .glanz { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(280px circle at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.4), transparent 55%); }
  .hpk-karte .rah { position: absolute; inset: 7px; border: 1px solid rgba(6,42,35,.35); border-radius: 9px; pointer-events: none; }
  .hpk-karte .nr { position: absolute; top: 14px; right: 16px; font: 600 .55rem/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .18em; color: rgba(6,42,35,.65); }
  .hpk-karte .selten { position: absolute; top: 14px; left: 16px; font: 700 .55rem/1 'Space Mono', ui-monospace, monospace;
    letter-spacing: .22em; color: #0a4438; text-transform: uppercase; }
  .hpk-karte .k-icon { margin: 36px auto 4px; width: 86px; height: 86px; }
  .hpk-karte .k-icon svg { width: 100%; height: 100%; stroke: #0a3a30; fill: none; stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
  .hpk-karte h3 { font-family: 'Satoshi','Sora',sans-serif; font-size: 1.05rem; font-weight: 900;
    letter-spacing: .05em; text-transform: uppercase; margin: 14px 0 10px; color: #062a23; }
  .hpk-karte .k-in p { font: 400 .63rem/1.65 'Space Mono', ui-monospace, monospace; color: #123f35; margin: 0; }
  .hpk-karte.gold .k-in { border-color: rgba(255,225,150,.9);
    background:
      linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 42%, rgba(255,255,255,.1) 50%, rgba(80,52,8,.14) 60%, rgba(255,255,255,.3) 72%, rgba(255,255,255,0) 84%),
      linear-gradient(165deg, #f6e7c4 0%, #d9b873 40%, #b9924d 62%, #ecd9a8 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 44px rgba(255,200,90,.4); }
  .hpk-karte.gold .selten { color: #6b4a10; }
  .hpk-karte.gold .k-icon svg { stroke: #5d3f0c; }
  .hpk-karte.gold h3 { color: #3f2c06; }
  .hpk-karte.gold .k-in p { color: #54400f; }
  .hpk-karte.gold .rah { border-color: rgba(80,52,8,.4); }
  .hpk-karte.gold .nr { color: rgba(80,52,8,.6); }

  /* ====== Fallback: mobile / ip-lite / reduced motion → statisches Karten-Grid ====== */
  .hpk--einfach .hpk__spacer { height: auto !important; }
  .hpk--einfach .hpk__stage { position: relative; height: auto; padding: 80px 5vw 70px; overflow: visible;
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
  .hpk--einfach .hpk-3d, .hpk--einfach .hpk-black, .hpk--einfach .hpk-hint { display: none; }
  .hpk--einfach .hpk-kopf { position: relative; top: auto; width: 100%; margin-bottom: 26px; }
  .hpk--einfach .hpk-karte { position: relative; display: block; left: auto; top: auto; transform: none;
    animation: none; width: 225px; height: 340px; }
/* END_SECTION:holo-packs */

/* START_SECTION:home-hero-apex (INDEX:40) */
.apex { position:relative; min-height: 88vh; display:flex; align-items:center; overflow:hidden; background:#060708; color:#fff; }
  .apex__bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.45; }
  .apex__glow { position:absolute; inset:0; background:
      radial-gradient(110% 80% at 82% 18%, color-mix(in srgb, var(--mint-500) 34%, transparent), transparent 58%),
      radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--mint-700) 28%, transparent), transparent 60%),
      linear-gradient(90deg, rgba(6,7,8,.96) 0%, rgba(6,7,8,.62) 48%, rgba(6,7,8,.18) 100%); }
  .apex__inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap: var(--space-8); width:100%; }
  .apex__copy { max-width: 640px; }
  .apex__eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .apex__title { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height:.97; font-weight:800; letter-spacing:-.025em; margin:0; }
  .apex__sub { font-size:1.1rem; line-height:1.5; color: rgba(255,255,255,.82); margin: var(--space-6) 0 var(--space-8); max-width: 44ch; }
  .apex__cta { display:flex; gap: var(--space-4); flex-wrap:wrap; }
  .apex__ghost { border:1px solid rgba(255,255,255,.45); color:#fff; }
  .apex__ghost:hover { border-color:#fff; background: rgba(255,255,255,.08); }
  .apex__product { flex:none; width: min(42vw, 480px); filter: drop-shadow(0 36px 70px rgba(0,0,0,.55)); transition: transform var(--dur-slow) var(--ease-out); }
  .apex__product img { width:100%; height:auto; display:block; }
  .apex__product:hover { transform: translateY(-8px) rotate(-1.5deg); }
  @media (max-width: 900px){ .apex { min-height: 74vh; } .apex__product { display:none; } }
/* END_SECTION:home-hero-apex */

/* START_SECTION:home-hero-atelier (INDEX:41) */
.atl { padding-block: var(--space-16); background:#fff; }
  .atl__inner { display:grid; gap: var(--space-12); align-items:center; }
  @media (min-width: 900px){ .atl__inner { grid-template-columns: 1.05fr .95fr; gap: var(--space-24); } }
  .atl__eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--mint-600); margin-bottom: var(--space-6); }
  .atl__title { font-family:"Satoshi"; font-size: clamp(2.8rem, 6vw, 5rem); line-height:1.02; font-weight:800; letter-spacing:-.03em; margin:0; }
  .atl__sub { font-size:1.15rem; line-height:1.6; color: var(--neutral-700); margin: var(--space-8) 0; max-width: 42ch; }
  .atl__link { font-weight:700; font-size:1rem; color: var(--ink); text-decoration:none; border-bottom:2px solid var(--mint-500); padding-bottom:3px; transition: color var(--dur-fast) var(--ease-out); }
  .atl__link:hover { color: var(--mint-700); }
  .atl__link span { transition: margin var(--dur-fast) var(--ease-out); }
  .atl__link:hover span { margin-left: 4px; }
  .atl__media { position:relative; }
  .atl__media img, .atl__ph { width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius-lg); display:block; background: var(--surface); }
  .atl__ph { background: linear-gradient(135deg, var(--mint-100), var(--surface)); }
  .atl__tag { position:absolute; left: var(--space-4); bottom: var(--space-4); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-size:.8rem; font-weight:600; color: var(--ink); text-decoration:none; box-shadow: var(--shadow-md); }
/* END_SECTION:home-hero-atelier */

/* START_SECTION:home-hero-bento (INDEX:42) */
.bento { padding-block: var(--space-8); }
  .bento__grid { display:grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr);
    grid-template-areas: "feat feat" "new sale" "brand brand" "garage garage" "mag mag"; }
  @media (min-width: 760px){ .bento__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, 1fr);
    grid-template-areas: "feat feat new sale" "feat feat brand brand" "mag mag garage garage"; } }
  .bento__tile { position:relative; overflow:hidden; border-radius: var(--radius-lg); padding: var(--space-6); display:flex; flex-direction:column; justify-content:flex-end; gap: var(--space-1); text-decoration:none; color:#fff; border:0; cursor:pointer; text-align:left; font:inherit; isolation:isolate; transition: transform var(--dur-base) var(--ease-out); }
  .bento__tile:hover { transform: translateY(-4px); }
  .bento__tile--feat { grid-area:feat; color:#fff; background:#0c0d0e; min-height: 280px; }
  .bento__tile--feat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .bento__tile--feat::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 40%, rgba(8,9,10,.85)); }
  .bento__tile--new { grid-area:new; background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); color: var(--ink); justify-content:space-between; }
  .bento__tile--sale { grid-area:sale; background: linear-gradient(135deg, #1b1c1e, #0a0a0b); }
  .bento__tile--brand { grid-area:brand; background: linear-gradient(120deg, var(--mint-900), var(--mint-700)); }
  .bento__tile--garage { grid-area:garage; background: var(--mint-500); color: var(--ink); }
  .bento__tile--mag { grid-area:mag; background: linear-gradient(120deg, #16181b, #26292e); }
  .bento__kicker { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
  .bento__h { font-family:"Satoshi"; font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight:800; line-height:1.05; letter-spacing:-.01em; }
  .bento__sub { font-size:.82rem; opacity:.8; }
  .bento__big { font-family:"Satoshi"; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight:800; line-height:1; }
  .bento__arrow { font-size:1.4rem; }
  .bento__tile--new { display:flex; }
  .bento__tile--feat .bento__h { font-size: clamp(1.4rem, 2.4vw, 2rem); }
/* END_SECTION:home-hero-bento */

/* START_SECTION:home-hero (INDEX:43) */
.home-hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: #fff; }
    .home-hero__bg, .home-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .home-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.2), rgba(10,10,11,.65)); }
    .home-hero__inner { position: relative; z-index: 2; max-width: 720px; padding-block: var(--space-16); }
    .home-hero__inner--center { margin-inline: auto; text-align: center; }
    .home-hero__inner--right { margin-left: auto; text-align: right; }
    .home-hero__eyebrow { color: var(--mint-500); letter-spacing: .2em; margin: 0 0 var(--space-3); }
    .home-hero__title { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; margin: 0 0 var(--space-4); }
    .home-hero__sub { font-size: 1.1rem; color: rgba(255,255,255,.8); margin: 0 0 var(--space-6); }
    .home-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
    .home-hero__inner--center .home-hero__cta { justify-content: center; }
/* END_SECTION:home-hero */

/* START_SECTION:hover-reveal (INDEX:45) */
.hrev { position:relative; min-height:100vh; overflow:hidden; background:#050607; }
  .hrev__base, .hrev__veil { position:absolute; inset:0; background-image: var(--hrev-img); background-size:cover; background-position:center; }
  .hrev__veil { filter: brightness(.26) saturate(.5) blur(1px);
    -webkit-mask-image: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, #000 100%);
    mask-image: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, #000 100%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
  .hrev__glow { position:absolute; left:var(--mx,50%); top:var(--my,50%); width:480px; height:480px; transform:translate(-50%,-50%); pointer-events:none;
    background: radial-gradient(circle, color-mix(in srgb, var(--mint-500) 28%, transparent) 0, transparent 60%); mix-blend-mode:screen; }
  .hrev__content { position:absolute; z-index:2; left:0; right:0; bottom:14vh; width:min(92vw,var(--container-max)); margin-inline:auto; padding-inline:var(--container-pad); color:#fff; pointer-events:none; }
  .hrev__content .btn { pointer-events:auto; }
  .hrev__eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--mint-400); margin-bottom:var(--space-4); }
  .hrev__h1 { font-family:"Satoshi"; font-size:clamp(3rem,9vw,7rem); line-height:.92; font-weight:800; letter-spacing:-.035em; margin:0; text-shadow:0 2px 40px rgba(0,0,0,.6); }
  .hrev__sub { font-size:clamp(1.05rem,2vw,1.4rem); color:rgba(255,255,255,.88); margin:var(--space-6) 0 var(--space-8); max-width:40ch; text-shadow:0 1px 20px rgba(0,0,0,.6); }
  .hrev__hint { position:absolute; z-index:2; top:var(--space-8); left:50%; transform:translateX(-50%); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:opacity .5s; }
  .hrev.is-active .hrev__hint { opacity:0; }
  @media (prefers-reduced-motion: reduce){ .hrev__veil{ filter:brightness(.55) saturate(.7); } }
/* END_SECTION:hover-reveal */

/* START_SECTION:logo-lab (INDEX:47) */
.llab { padding-block: var(--space-16); background: var(--neutral-50, #fafafa); min-height: 80vh; }
    .llab__h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
    .llab__lead { color: var(--neutral-600, #555); margin: var(--space-2) 0 var(--space-12); }
    .llab__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
    @media (min-width: 900px) { .llab__grid { grid-template-columns: repeat(4, 1fr); } }
    .llab__card { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg, 16px); padding: var(--space-12) var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-8); min-height: 260px; justify-content: center; cursor: pointer; }
    .llab__cap { text-align: center; display: flex; flex-direction: column; gap: 4px; }
    .llab__cap strong { font-size: 1rem; }
    .llab__cap span { font-size: .82rem; color: var(--neutral-500); }

    .llab-logo { display: inline-block; width: 120px; height: 80px; background-color: var(--mint-500); background-size: 250% 100%; background-position: 140% 0; background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }

    /* shared sweep */
    @keyframes lls-sweep { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

    /* 1 — Classic crisp streak */
    .lls1 .llab-logo { background-image: linear-gradient(115deg, var(--mint-500) 0 38%, rgba(255,255,255,.55) 45%, #ffffff 49%, #e6fff9 50%, #ffffff 51%, rgba(255,255,255,.55) 55%, var(--mint-500) 62% 100%); }
    .lls1:hover .llab-logo { transform: scale(1.05); filter: drop-shadow(0 3px 13px color-mix(in srgb, var(--mint-500) 55%, transparent)); animation: lls-sweep .8s ease-out; }

    /* 2 — Double glint (two streaks, faster) */
    .lls2 .llab-logo { background-image: linear-gradient(115deg, var(--mint-500) 0 28%, #ffffff 34%, var(--mint-500) 40% 47%, #ffffff 53%, var(--mint-500) 60% 100%); }
    .lls2:hover .llab-logo { transform: scale(1.04); filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--mint-500) 55%, transparent)); animation: lls-sweep .55s ease-out; }

    /* 3 — Wide soft sheen (slower, elegant) */
    .lls3 .llab-logo { background-image: linear-gradient(115deg, var(--mint-500) 0 22%, rgba(255,255,255,.7) 50%, var(--mint-500) 78% 100%); }
    .lls3:hover .llab-logo { transform: scale(1.04); filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--mint-500) 50%, transparent)); animation: lls-sweep 1.15s ease-in-out; }

    /* 4 — Holo / chrome (iridescent streak) */
    .lls4 .llab-logo { background-image: linear-gradient(115deg, var(--mint-500) 0 33%, #57d2ff 43%, #ffffff 50%, #b6ffe4 57%, var(--mint-500) 67% 100%); }
    .lls4:hover .llab-logo { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(87,210,255,.6)); animation: lls-sweep .85s ease-out; }

    @media (prefers-reduced-motion: reduce) { .llab__card:hover .llab-logo { animation: none; transform: none; } }
/* END_SECTION:logo-lab */

/* START_SECTION:look-studio (INDEX:48) */
.lstudio { padding: clamp(2.5rem, 6vw, 5rem) 0; background: radial-gradient(120% 90% at 50% -10%, rgba(21,205,176,.10), transparent 60%), linear-gradient(180deg, #0c0e12 0%, #08090c 100%); color: #eef0f2; }
    /* width + side padding come from the shared .container (max 1320px, like header/footer); no extra cap. */
    .lstudio__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
    .lstudio__heading { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 var(--space-2); color: #fff; }
    .lstudio__sub { color: rgba(238,240,242,.55); margin: 0; font-size: 1.02rem; }
    .lstudio__shuffle { flex-shrink: 0; font: inherit; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); color: #eef0f2; cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s; }
    .lstudio__shuffle:hover { border-color: var(--mint-500); color: var(--mint-400); box-shadow: 0 0 22px rgba(21,205,176,.22); }

    .lstudio__styles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
    .lstudio__style { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background-color: #15171c; background-image: var(--bg); background-size: cover; background-position: center; cursor: pointer; padding: 0; transition: transform .2s, border-color .2s, box-shadow .2s; }
    .lstudio__style::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,12,.05) 35%, rgba(8,9,12,.88)); }
    .lstudio__style:hover { transform: translateY(-3px); }
    .lstudio__style[aria-pressed="true"] { border-color: var(--mint-500); box-shadow: 0 0 0 2px var(--mint-500), 0 0 30px rgba(21,205,176,.35); }
    .lstudio__style-label { position: absolute; left: 0; right: 0; bottom: 11px; z-index: 1; text-align: center; font-family: "Sora", sans-serif; font-weight: 700; font-size: .95rem; color: #fff; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
    .lstudio__style--soon { cursor: default; }
    .lstudio__style--soon::after { background: linear-gradient(180deg, rgba(8,9,12,.48) 0%, rgba(8,9,12,.86)); }
    .lstudio__style--soon:hover { transform: none; }
    .lstudio__style--soon .lstudio__style-label { opacity: .9; }
    .lstudio__soon { position: absolute; top: 8px; left: 8px; z-index: 1; background: rgba(255,255,255,.16); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); }
    @media (max-width: 720px) { .lstudio__styles { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 460px) { .lstudio__styles { grid-template-columns: repeat(2, 1fr); } }
    /* Two-column builder: figure on the left, integrated control rail on the right. */
    .lstudio__studio { display: block; }
    /* the bike-pill row (only remaining .lstudio__row) sits inline like a control */
    .lstudio__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
    .lstudio__row[hidden] { display: none; }
    /* control labels: uppercase eyebrow above each chip/dot group */
    .lstudio__lbl { display: block; color: rgba(238,240,242,.5); font-size: .66rem; text-transform: uppercase; letter-spacing: .18em; }
    .lstudio__chips { display: flex; gap: 10px; flex-wrap: wrap; }
    .lstudio__chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .92rem; padding: 9px 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.04); color: rgba(238,240,242,.82); cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
    .lstudio__chip:hover { border-color: rgba(21,205,176,.6); color: #fff; }
    .lstudio__chip[aria-pressed="true"] { border-color: var(--mint-500); background: rgba(21,205,176,.14); color: var(--mint-400); box-shadow: 0 0 18px rgba(21,205,176,.25); }
    .lstudio__chip--soon { cursor: default; opacity: .5; border-style: dashed; }
    .lstudio__chip--soon:hover { border-color: rgba(255,255,255,.13); color: rgba(238,240,242,.82); box-shadow: none; }
    .lstudio__chip-soon { font-style: normal; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-400); }
    .lstudio__dots { display: inline-flex; }
    .lstudio__dots span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.25); margin-left: -3px; }
    .lstudio__dots span:first-child { margin-left: 0; }
    .lstudio__slider { flex: 1; min-width: 150px; max-width: 340px; accent-color: var(--mint-500); }
    .lstudio__out { font-weight: 700; min-width: 78px; color: #fff; }
    .lstudio__bikepill { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; padding: 8px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.05); }
    .lstudio__bikechange { color: var(--mint-400); font-weight: 600; text-decoration: none; }
    .lstudio__colordots { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
    .lstudio__cdots { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
    .lstudio__cdot { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); background: var(--c, #444); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s, border-color .15s; }
    .lstudio__cdot:hover { transform: scale(1.16); border-color: rgba(255,255,255,.55); }
    .lstudio__cdot.is-on { border-color: #fff; transform: scale(1.06); box-shadow: 0 0 0 2px var(--mint-500), 0 0 11px rgba(21,205,176,.6); }
    .lstudio__cdot--any { background: rgba(255,255,255,.05); border-style: dashed; position: relative; }
    .lstudio__cdot--any::after { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1.5px; background: rgba(238,240,242,.45); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

    /* shared with the "pick exact model" overlay list — keep even though the board card markup is gone */
    .lstudio__brand { color: var(--mint-400); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .lstudio__name { font-weight: 600; font-size: .92rem; line-height: 1.32; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
    .lstudio__price { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.08rem; color: #fff; }

    /* ================= THE RIDER — stage + skeleton + rail ================= */
    /* ported from docs/superpowers/lookstudio-visual-mocks/the-rider-plus.html */
    .lstudio__stagewrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, 460px); gap: var(--space-6); align-items: stretch; }
    .lstudio__stagewrap > * { min-width: 0; } /* let grid items shrink instead of overflowing on narrow screens */
    /* mobile: stack the figure above the rail, shrink the pieces so the rider fits */
    @media (max-width: 900px) {
      .lstudio__stagewrap { grid-template-columns: 1fr; }
    }

    /* ---------- stage head (eyebrow / title / subtitle + kit tag) ---------- */
    .lstudio__stagehead { position: absolute; top: var(--space-6); left: var(--space-6); right: var(--space-6); z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
    .lstudio__eyebrow { display: block; font-size: .69rem; letter-spacing: .28em; text-transform: uppercase; color: var(--mint-400); font-weight: 600; }
    .lstudio__stagetitle { font-family: "Sora", sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; margin: 8px 0 0; color: #fff; }
    .lstudio__stagesub { color: rgba(238,240,242,.5); font-size: .82rem; margin: 4px 0 0; max-width: 210px; line-height: 1.45; }
    /* The figure is centred and the helmet is a fixed 188px wide, so the overlay title has a
       hard ceiling: it must end before the helmet's left edge, or this 50%-opacity text is
       painted on top of the artwork and turns unreadable. 50% resolves against
       .lstudio__stagehead, whose box is the stage minus its padding — so the helmet's left
       edge sits at 50% - 94px and this keeps a 16px gutter at every width it applies to.
       Scoped to the overlay range on purpose: below 1100 the stagehead is back in flow,
       where there is nothing to dodge and this cap would only squeeze the text. */
    @media (min-width: 1101px) {
      .lstudio__stagehead > div:first-child { max-width: calc(50% - 110px); }
    }
    .lstudio__kittag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(238,240,242,.62); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 7px 13px; background: rgba(255,255,255,.02); white-space: nowrap; }
    .lstudio__kittag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-500); box-shadow: 0 0 8px 1px rgba(21,205,176,.7); }
    @media (max-width: 560px) { .lstudio__stagehead { flex-direction: column; gap: var(--space-2); } }

    /* ---------- integrated control rail (right column) ---------- */
    .lstudio__rail { display: flex; flex-direction: column; gap: 22px; padding: clamp(1.6rem, 2.8vw, 2.3rem) clamp(1.3rem, 2.4vw, 1.9rem); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
    .lstudio__railhdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
    .lstudio__railh2 { font-family: "Sora", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; color: #fff; line-height: 1.1; }
    .lstudio__railsub { margin: -16px 0 0; color: rgba(238,240,242,.5); font-size: .84rem; line-height: 1.45; }
    /* a single control cluster: label above its chips/dots */
    .lstudio__ctl { display: flex; flex-direction: column; gap: 12px; }
    .lstudio__ctl-row { display: flex; gap: 18px; flex-wrap: wrap; }
    .lstudio__ctl-row > .lstudio__ctl { flex: 1 1 auto; min-width: 130px; }
    .lstudio__ctl-row > [data-ls-config-toggle][hidden] { display: none; }
    /* total row: label + note on the left, big price on the right */
    .lstudio__totalrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
    .lstudio__totalrow > div { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    /* action stack: primary CTA full width, save below */
    .lstudio__rail .lstudio__actions { display: flex; flex-direction: column; align-items: stretch; gap: 11px; }
    .lstudio__rail .lstudio__cta, .lstudio__rail .lstudio__save { width: 100%; justify-content: center; }
    /* per-piece product list, separated from the static controls */
    /* "in this look" runs full-width UNDER the two columns (moved out of the rail) */
    .lstudio__piecelist { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.08); }
    .lstudio__piecelist:empty { display: none; }
    /* the cards live in their own grid so auto-fit can stretch them to the full width */
    .lstudio__piecegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }

    /* ---------- stage ---------- */
    .lstudio__stage {
      position: relative; min-height: 760px; padding: var(--space-6);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,.08); border-radius: 22px; overflow: hidden; isolation: isolate;
      background-color: #0a0d11; /* solid dark base so a light storefront bg can never show through the stage */
      background-image:
        radial-gradient(80% 45% at 50% 96%, rgba(21,205,176,.05), transparent 62%),
        linear-gradient(180deg, #0d1116 0%, #0a0d11 52%, #070a0d 100%);
    }
    .lstudio__stage-glow {
      position: absolute; z-index: 0; left: 50%; top: 44%; transform: translate(-50%,-50%);
      width: 675px; height: 825px;
      background: radial-gradient(closest-side, rgba(21,205,176,.22), rgba(21,205,176,.06) 52%, transparent 72%);
      filter: blur(16px); pointer-events: none; animation: lstudio-breathe-glow 7s ease-in-out infinite;
    }
    .lstudio__stage-glow::after {
      content: ""; position: absolute; inset: 0; margin: auto; width: 230px; height: 420px; top: -40px;
      background: radial-gradient(closest-side, rgba(120,255,235,.16), transparent 70%); filter: blur(22px); border-radius: 50%;
    }
    .lstudio__stage-vignette {
      position: absolute; z-index: 0; inset: 0; pointer-events: none;
      background:
        radial-gradient(120% 90% at 50% 40%, transparent 46%, rgba(0,0,0,.34) 100%),
        linear-gradient(0deg, rgba(255,255,255,.028), transparent 26%);
    }
    .lstudio__stage-silhouette {
      position: absolute; z-index: 1; left: 50%; top: 78px; transform: translateX(-50%);
      width: 250px; height: 560px; pointer-events: none; opacity: .16;
      background:
        radial-gradient(38px 44px at 50% 7%, rgba(210,230,235,1) 62%, transparent 66%),
        radial-gradient(20px 26px at 50% 15%, rgba(210,230,235,1) 60%, transparent 64%),
        radial-gradient(96px 150px at 50% 40%, rgba(210,230,235,1) 60%, transparent 66%),
        radial-gradient(30px 150px at 24% 66%, rgba(210,230,235,1) 58%, transparent 64%),
        radial-gradient(30px 150px at 76% 66%, rgba(210,230,235,1) 58%, transparent 64%),
        radial-gradient(24px 120px at 20% 40%, rgba(210,230,235,1) 56%, transparent 62%),
        radial-gradient(24px 120px at 80% 40%, rgba(210,230,235,1) 56%, transparent 62%);
      filter: blur(9px);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 60%, transparent 96%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,1) 60%, transparent 96%);
      mix-blend-mode: screen;
    }
    .lstudio__stage-hint {
      position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
      font-size: .68rem; letter-spacing: .03em; color: rgba(238,240,242,.55); z-index: 6;
      pointer-events: none; opacity: .75;
    }

    /* ---------- figure skeleton ---------- */
    .lstudio__figwrap {
      position: relative; z-index: 3; min-height: 825px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transform-origin: 50% 82%; animation: lstudio-idle-float 6.5s ease-in-out infinite;
    }
    .lstudio__region { position: relative; z-index: 3; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; cursor: pointer; }
    .lstudio__region img { display: block; object-fit: contain; pointer-events: none; }
    .lstudio__region:hover { transform: translateY(-9px) scale(1.025); }
    .lstudio__region:hover img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(21,205,176,.30)); }
    .lstudio__region[data-region="head"] { margin-top: -2px; z-index: 4; }
    .lstudio__region[data-region="head"] img { width: 188px; height: 188px; filter: drop-shadow(0 24px 30px rgba(0,0,0,.72)) drop-shadow(0 0 24px rgba(21,205,176,.18)); }
    .lstudio__region[data-region="torso"] img { width: 383px; height: 513px; filter: drop-shadow(0 36px 50px rgba(0,0,0,.74)) drop-shadow(0 0 34px rgba(21,205,176,.12)); }
    /* pants sit just below the jacket hem so the figure reads as ONE body. The 650² square PNGs
       carry a big transparent letterbox (~65px torso-bottom + ~22px legs-top), so a plain stack
       leaves a ~90px gap; -100 closes most of it while leaving a natural waist gap (pants are also
       a touch bigger, 385 wide, to match the jacket). z-index 2 keeps a bulky pair from ever
       painting over the jacket; on hover the piece + its tooltip come forward (z-index 40) so the
       tip is readable and never hidden behind the jacket. Same footprint + margin for the
       placeholder box, so toggling owned/available never shifts the boots below. */
    .lstudio__region[data-region="legs"] { margin-top: -100px; z-index: 2; }
    .lstudio__region[data-region="legs"]:hover, .lstudio__region[data-region="legs"]:focus-within { z-index: 40; }
    .lstudio__region[data-region="legs"] img { width: 385px; height: 430px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
    .lstudio__region[data-region="feet"] { margin-top: -50px; z-index: 4; }
    .lstudio__region[data-region="feet"] img { width: 243px; height: 190px; filter: drop-shadow(0 24px 24px rgba(0,0,0,.62)); }
    /* the suit/jacket sits below the helmet in z-order; lift it on hover so its tip shows above */
    .lstudio__region[data-region="torso"]:hover, .lstudio__region[data-region="torso"]:focus-within { z-index: 40; }

    /* ---------- missing-piece placeholder: keeps the slot's exact footprint so nothing shifts ---------- */
    .lstudio__region--na, .lstudio__hand--na { cursor: default; }
    .lstudio__region--na:hover, .lstudio__hand--na:hover { transform: none; }
    .lstudio__region--na:hover img, .lstudio__hand--na:hover img { filter: none; }
    .lstudio__figna {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 7px; padding: 14px; box-sizing: border-box; text-align: center;
      border: 1.5px dashed rgba(255,255,255,.17); border-radius: 18px;
      background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.055), rgba(255,255,255,.016));
      color: rgba(238,240,242,.6);
    }
    .lstudio__figna-ico { width: 42px; height: 42px; color: rgba(238,240,242,.4); }
    .lstudio__figna-cat { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(238,240,242,.45); }
    .lstudio__figna-msg { font-size: .9rem; font-weight: 600; line-height: 1.25; color: #eef1f3; max-width: 16ch; }
    .lstudio__figna-hint { font-size: .72rem; color: rgba(238,240,242,.42); }
    .lstudio__figna.is-owned { border-color: rgba(21,205,176,.32); background: radial-gradient(120% 90% at 50% 0%, rgba(21,205,176,.10), rgba(255,255,255,.015)); }
    .lstudio__figna.is-owned .lstudio__figna-ico { color: var(--mint-400); }
    .lstudio__figna--mini { gap: 0; padding: 0; border-radius: 50%; }
    .lstudio__figna--mini .lstudio__figna-ico { width: 44px; height: 44px; }
    /* the placeholder occupies the exact size the real piece image would (per region) */
    .lstudio__region[data-region="head"] .lstudio__figna { width: 188px; height: 188px; }
    .lstudio__region[data-region="torso"] .lstudio__figna { width: 383px; height: 513px; }
    .lstudio__region[data-region="legs"] .lstudio__figna { width: 385px; height: 430px; }
    .lstudio__region[data-region="feet"] .lstudio__figna { width: 243px; height: 190px; }
    .lstudio__hand .lstudio__figna--mini { width: 175px; height: 175px; }
    /* small slots stay uncluttered: icon + category + message, no hint line */
    .lstudio__region[data-region="head"] .lstudio__figna-hint,
    .lstudio__region[data-region="feet"] .lstudio__figna-hint { display: none; }

    .lstudio__torso { position: relative; margin-top: -20px; width: 340px; display: flex; justify-content: center; }
    .lstudio__torso-hands { position: relative; margin-top: -28px; width: 425px; display: flex; justify-content: center; }
    .lstudio__body { display: flex; flex-direction: column; align-items: center; } /* torso [+ legs] stack; gives the container its height so hands flank it */
    .lstudio__hand { position: absolute; top: 173px; z-index: 5; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; cursor: pointer; }
    .lstudio__hand img { display: block; width: 175px; height: 175px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 22px 28px rgba(0,0,0,.68)); }
    .lstudio__hand.is-left { left: -113px; transform: rotate(-7deg); }
    .lstudio__hand.is-left:hover { transform: translateY(-9px) rotate(-7deg) scale(1.05); }
    .lstudio__hand.is-right { right: -113px; transform: rotate(7deg); }
    .lstudio__hand.is-right img { transform: scaleX(-1); } /* mirror the image, not the tooltip */
    .lstudio__hand.is-right:hover { transform: translateY(-9px) rotate(7deg) scale(1.05); }
    /* gloves ship as a pair: hovering either lifts + glows BOTH so they read as one product */
    .lstudio__hand.is-left.pairhover { transform: translateY(-9px) rotate(-7deg) scale(1.05); }
    .lstudio__hand.is-right.pairhover { transform: translateY(-9px) rotate(7deg) scale(1.05); }
    .lstudio__hand.pairhover img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(21,205,176,.30)); }
    /* on a narrow screen the centered figure would collide with the overlay title;
       fall back to a simple flow stack (title on top, figure below).
       Placed AFTER the base .lstudio__stage/figwrap rules so it wins on source order.
       Threshold is 1100, not 900: between the two the overlay technically fits, but only
       by squeezing the title column under ~120px, which wraps the eyebrow and turns the
       description into a 12-line ribbon. Measured, not guessed — see the max-width cap
       on .lstudio__stagehead > div:first-child, which covers everything above this. */
    @media (max-width: 1100px) {
      .lstudio__stage { display: block; min-height: 0; }
      .lstudio__stagehead { position: relative; top: auto; left: auto; right: auto; }
      .lstudio__figwrap { justify-content: flex-start; margin-top: 12px; }
    }
    /* mobile figure shrink — placed AFTER the desktop figure rules so it wins on source order */
    @media (max-width: 560px) {
      .lstudio__figwrap { min-height: 470px; }
      .lstudio__region[data-region="head"] img { width: 112px; height: 112px; }
      .lstudio__region[data-region="torso"] img { width: 220px; height: 295px; }
      .lstudio__region[data-region="legs"] img { width: 220px; height: 250px; }
      .lstudio__region[data-region="feet"] img { width: 142px; height: 112px; }
      .lstudio__torso-hands { width: 250px; }
      .lstudio__hand img { width: 76px; height: 76px; }
      .lstudio__hand.is-left { left: -34px; }
      .lstudio__hand.is-right { right: -34px; }
      /* mobile keeps the original (unscaled) composition — its width is already maxed */
      .lstudio__torso-hands { margin-top: -22px; }
      .lstudio__region[data-region="legs"] { margin-top: -58px; }   /* proportional gap for the smaller mobile letterbox (z-index:2 + hover-bump inherited) */
      .lstudio__region[data-region="feet"] { margin-top: -40px; }
      .lstudio__hand { top: 156px; }
      .lstudio__region[data-region="head"] .lstudio__figna { width: 112px; height: 112px; }
      .lstudio__region[data-region="torso"] .lstudio__figna { width: 220px; height: 295px; }
      .lstudio__region[data-region="legs"] .lstudio__figna { width: 220px; height: 250px; }
      .lstudio__region[data-region="feet"] .lstudio__figna { width: 142px; height: 112px; }
      .lstudio__hand .lstudio__figna--mini { width: 76px; height: 76px; }
      .lstudio__figna-ico { width: 34px; height: 34px; }
      .lstudio__figna--mini .lstudio__figna-ico { width: 26px; height: 26px; }
      .lstudio__figna-msg { font-size: .82rem; }
    }

    /* ---------- planted staging: ground shadow + floor reflection ---------- */
    .lstudio__plant { position: relative; z-index: 1; margin-top: -8px; display: flex; flex-direction: column; align-items: center; }
    .lstudio__ground { position: relative; z-index: 2; width: 272px; height: 40px; border-radius: 50%; filter: blur(3px);
      background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.36) 54%, transparent 74%); }
    .lstudio__ground::after {
      content: ""; position: absolute; inset: 0; margin: auto; width: 168px; height: 16px; border-radius: 50%;
      background: radial-gradient(closest-side, rgba(21,205,176,.26), transparent 70%); filter: blur(4px);
    }
    .lstudio__reflection {
      position: absolute; z-index: 1; top: 8px; left: 50%; transform: translateX(-50%) scaleY(-1);
      width: 194px; height: 150px; opacity: .20; pointer-events: none;
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 62%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 62%);
    }
    .lstudio__reflection img { width: 194px; height: 150px; object-fit: contain; filter: blur(.4px); }

    /* ---------- hover quick-view tooltip ---------- */
    .lstudio__region .tip, .lstudio__hand .tip {
      position: absolute; left: 50%; bottom: 100%; margin-bottom: 12px;
      transform: translate(-50%,6px); transform-origin: 50% 100%;
      min-width: 170px; max-width: 240px; padding: 10px 15px;
      background: linear-gradient(180deg, rgba(27,31,38,.98), rgba(13,16,20,.98));
      border: 1px solid rgba(21,205,176,.32); border-radius: 13px;
      box-shadow: 0 22px 46px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
      text-align: center; white-space: normal; pointer-events: auto;
      opacity: 0; visibility: hidden; z-index: 30;
      transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    .lstudio__region .tip::after, .lstudio__hand .tip::after {
      content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      border: 7px solid transparent; border-top-color: rgba(21,205,176,.32);
    }
    /* invisible bridge across the gap so the cursor can travel onto the card */
    .lstudio__region .tip::before, .lstudio__hand .tip::before {
      content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 22px;
    }
    .lstudio__region .tip .tip-cat, .lstudio__hand .tip .tip-cat { display: block; font-size: .59rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint-400); margin-bottom: 4px; }
    .lstudio__region .tip b, .lstudio__hand .tip b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #eef2f4; font-size: .81rem; font-weight: 600; line-height: 1.32; }
    .lstudio__region .tip .tip-price, .lstudio__hand .tip .tip-price { display: block; color: rgba(238,240,242,.6); font-size: .75rem; font-weight: 600; margin-top: 5px; }
    .lstudio__region .tip .tip-link, .lstudio__hand .tip .tip-link {
      display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
      margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.10);
      font-size: .72rem; font-weight: 600; color: var(--mint-400); cursor: pointer; letter-spacing: .01em; text-decoration: none;
    }
    .lstudio__region .tip .tip-link:hover, .lstudio__hand .tip .tip-link:hover { color: #88f2e0; }
    .lstudio__region:hover .tip, .lstudio__region:focus-visible .tip, .lstudio__region:focus-within .tip,
    .lstudio__hand:hover .tip, .lstudio__hand:focus-visible .tip, .lstudio__hand:focus-within .tip {
      opacity: 1; visibility: visible; transform: translate(-50%,0); transition-delay: 0s;
    }
    .lstudio__region:focus-visible, .lstudio__hand:focus-visible { outline: none; }
    /* the helmet sits at the very top of the stage — flip its quick-view BELOW the piece
       so it is never clipped by the stage's top edge (overflow:hidden) */
    .lstudio__region[data-region="head"] .tip { top: 100%; bottom: auto; margin: 12px 0 0; }
    .lstudio__region[data-region="head"] .tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(21,205,176,.32); }
    .lstudio__region[data-region="head"] .tip::before { top: auto; bottom: 100%; }
    /* gear images are square (650×650) but the torso/legs boxes are taller → object-fit:contain
       leaves a transparent letterbox on top, so the default "box top" anchor floats the tooltip
       far above the visible piece. Drop it by the letterbox height so it hugs the actual piece. */
    .lstudio__region[data-region="torso"] .tip { bottom: calc(100% - 65px); }
    .lstudio__region[data-region="legs"] .tip { bottom: calc(100% - 25px); }
    @media (max-width: 560px) {
      /* mobile boxes are smaller → smaller letterbox: torso (295-220)/2=37, legs (228-200)/2=14 */
      .lstudio__region[data-region="torso"] .tip { bottom: calc(100% - 37px); }
      .lstudio__region[data-region="legs"] .tip { bottom: calc(100% - 14px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .lstudio__region .tip, .lstudio__hand .tip { transition: opacity .2s ease, visibility 0s; }
    }

    /* ---------- assembly + idle keyframes ---------- */
    .lstudio__figwrap.assembling .lstudio__region[data-region="head"] { animation: lstudio-drop-in .7s cubic-bezier(.2,.9,.25,1) both; }
    .lstudio__figwrap.assembling .lstudio__region[data-region="torso"] { animation: lstudio-drop-in .7s .07s cubic-bezier(.2,.9,.25,1) both; }
    .lstudio__figwrap.assembling .lstudio__region[data-region="legs"] { animation: lstudio-drop-in .7s .1s cubic-bezier(.2,.9,.25,1) both; }
    .lstudio__figwrap.assembling .lstudio__hand.is-left { animation: lstudio-slide-in-l .7s .12s cubic-bezier(.2,.9,.25,1) both; }
    .lstudio__figwrap.assembling .lstudio__hand.is-right { animation: lstudio-slide-in-r .7s .12s cubic-bezier(.2,.9,.25,1) both; }
    .lstudio__figwrap.assembling .lstudio__region[data-region="feet"] { animation: lstudio-rise-in .7s .18s cubic-bezier(.2,.9,.25,1) both; }
    @keyframes lstudio-idle-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes lstudio-breathe-glow { 0%,100% { opacity: .85; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }
    @keyframes lstudio-drop-in { 0% { opacity: 0; transform: translateY(-34px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes lstudio-rise-in { 0% { opacity: 0; transform: translateY(38px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes lstudio-slide-in-l { 0% { opacity: 0; transform: translateX(-40px) rotate(-7deg); } 100% { opacity: 1; transform: translateX(0) rotate(-7deg); } }
    @keyframes lstudio-slide-in-r { 0% { opacity: 0; transform: translateX(40px) rotate(7deg); } 100% { opacity: 1; transform: translateX(0) rotate(7deg); } }
    @media (prefers-reduced-motion: reduce) {
      .lstudio__figwrap, .lstudio__stage-glow { animation: none !important; }
      .lstudio__figwrap.assembling .lstudio__region[data-region="head"],
      .lstudio__figwrap.assembling .lstudio__region[data-region="torso"],
      .lstudio__figwrap.assembling .lstudio__region[data-region="legs"],
      .lstudio__figwrap.assembling .lstudio__hand.is-left,
      .lstudio__figwrap.assembling .lstudio__hand.is-right,
      .lstudio__figwrap.assembling .lstudio__region[data-region="feet"] { animation: none !important; }
    }

    /* ---------- per-piece "in this look" list (rendered by JS into .lstudio__piecelist) ---------- */
    .lstudio__railhd { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(238,240,242,.5); margin: 0 0 14px; }
    .lstudio__railrow { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto 1fr; align-items: center; gap: 12px 13px; padding: 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.022); transition: background .2s ease, border-color .2s ease; grid-template-areas: "thumb meta right" "ctl ctl ctl"; }
    .lstudio__railrow:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
    .lstudio__railthumb { grid-area: thumb; width: 44px; height: 44px; border-radius: 10px; background: radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .lstudio__railthumb img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
    .lstudio__railmeta { grid-area: meta; min-width: 0; } /* let the name column shrink so the price+swap+lock never overflow a narrow card */
    .lstudio__railright { grid-area: right; display: flex; align-items: center; gap: 10px; }
    .lstudio__railctl { grid-area: ctl; align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    /* rail meta + labels + controls (restyled after the card grid was removed) */
    .lstudio__railmeta .lstudio__cat { display: block; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint-400); margin-bottom: 2px; }
    .lstudio__railmeta .lstudio__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; font-weight: 600; line-height: 1.28; color: #eef1f3; }
    .lstudio__railmeta .lstudio__brand { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,240,242,.45); margin-top: 3px; }
    .lstudio__railmeta .lstudio__na-sub { display: block; font-size: .68rem; color: rgba(238,240,242,.45); margin-top: 2px; }
    .lstudio__railright .lstudio__price { font-size: .82rem; font-weight: 700; color: #eef1f3; white-space: nowrap; }
    .lstudio__swap { display: inline-flex; gap: 4px; }
    .lstudio__swap button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #cfd6dc; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s; }
    .lstudio__swap button:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
    .lstudio__railctl .lstudio__attr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
    .lstudio__railctl .lstudio__attrlbl { flex: 0 0 auto; min-width: 46px; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(238,240,242,.42); }
    .lstudio__railctl .lstudio__sizerow { display: flex; flex-wrap: wrap; gap: 5px; }
    .lstudio__railctl .lstudio__sizebtn { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #cfd6dc; font-size: .72rem; cursor: pointer; transition: all .16s; }
    .lstudio__railctl .lstudio__sizebtn.is-on { background: var(--mint-500); border-color: var(--mint-500); color: #06231d; font-weight: 600; }
    .lstudio__railctl .lstudio__sizebtn:hover:not(.is-on) { border-color: rgba(255,255,255,.28); color: #fff; }
    .lstudio__railctl .lstudio__cardctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
    .lstudio__railctl .lstudio__cardctl button { flex: 1 1 auto; min-height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #dfe4e8; font-size: .72rem; font-weight: 500; cursor: pointer; transition: all .16s; }
    .lstudio__railctl .lstudio__cardctl button:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }

    .lstudio__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.4rem, 3vw, 2rem); background: radial-gradient(130% 200% at 0% 0%, rgba(21,205,176,.13), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; flex-wrap: wrap; backdrop-filter: blur(12px); box-shadow: 0 22px 60px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); }
    .lstudio__sumleft { display: flex; flex-direction: column; gap: 7px; }
    .lstudio__sumlabel { color: rgba(238,240,242,.5); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
    .lstudio__sumprice { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    .lstudio__total { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.4rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
    .lstudio__total:empty::before { content: "\2014"; color: rgba(238,240,242,.3); }
    .lstudio__budgetnote { font-size: .8rem; font-weight: 600; color: rgba(238,240,242,.72); padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
    .lstudio__budgetnote:empty { display: none; }
    .lstudio__budgetnote--over { color: #ff9183; background: rgba(255,122,107,.13); border-color: rgba(255,122,107,.32); }
    .lstudio__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    .lstudio__save { font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); color: #eef0f2; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
    .lstudio__save:hover { border-color: var(--mint-500); color: var(--mint-400); background: rgba(21,205,176,.08); }
    .lstudio__cta { font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--mint-400), var(--mint-500)); color: #06120f; cursor: pointer; box-shadow: 0 0 26px rgba(21,205,176,.4); transition: transform .15s, box-shadow .2s; }
    .lstudio__cta:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(21,205,176,.62); }
    .lstudio__cta:active { transform: scale(.98); }
    .lstudio__cta-arrow { transition: transform .2s; }
    .lstudio__cta:hover .lstudio__cta-arrow { transform: translateX(3px); }

    .lstudio__head, .lstudio__controls, .lstudio__summary { animation: ls-rise .6s cubic-bezier(.2,.7,.2,1) both; }
    .lstudio__controls { animation-delay: .07s; }
    .lstudio__summary { animation-delay: .14s; }
    @keyframes ls-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

    .lstudio__picker { position: fixed; inset: 0; background: rgba(6,8,11,.74); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); }
    .lstudio__picker-panel { background: linear-gradient(180deg, #15181e, #101216); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; width: min(860px, 100%); max-height: 88vh; overflow-y: auto; color: #eef0f2; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); }
    .lstudio__picker-head { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, #15181e, rgba(21,24,30,.97)); padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 1px solid rgba(255,255,255,.08); }
    .lstudio__picker-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
    .lstudio__picker-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; }
    .lstudio__picker-close { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.04); font-size: 1.3rem; line-height: 1; color: rgba(238,240,242,.7); cursor: pointer; transition: border-color .2s, color .2s; }
    .lstudio__picker-close:hover { border-color: var(--mint-500); color: #fff; }
    .lstudio__picker-filter { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
    .lstudio__picker-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
    .lstudio__picker-flabel { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(238,240,242,.45); }
    .lstudio__picker-select { font: inherit; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #eef0f2; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2393a0ad' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
    .lstudio__picker-select:focus { outline: none; border-color: var(--mint-500); box-shadow: 0 0 0 3px rgba(21,205,176,.18); }
    .lstudio__picker-select:disabled { opacity: .5; cursor: not-allowed; }
    .lstudio__picker-count { flex: 0 0 auto; align-self: center; font-size: .78rem; color: rgba(238,240,242,.5); padding-bottom: 11px; white-space: nowrap; }
    .lstudio__picker-list { padding: var(--space-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
    .lstudio__picker-item { display: flex; flex-direction: column; text-align: left; font: inherit; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.03); color: #eef0f2; cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
    .lstudio__picker-item:hover { border-color: var(--mint-500); transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); }
    .lstudio__picker-thumb { aspect-ratio: 1; background: #f5f6f8; display: flex; align-items: center; justify-content: center; padding: 12px; }
    .lstudio__picker-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .lstudio__picker-ph { color: #9aa1ab; font-size: .8rem; font-weight: 700; }
    .lstudio__picker-info { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 13px; }
    .lstudio__picker-info .lstudio__brand { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(238,240,242,.5); }
    .lstudio__picker-info .lstudio__name { font-size: .85rem; line-height: 1.3; }
    .lstudio__picker-info .lstudio__price { font-weight: 700; margin-top: 3px; color: #fff; }
    @media (max-width: 560px) { .lstudio__picker-field { flex: 1 1 100%; } .lstudio__picker-count { width: 100%; padding-bottom: 0; } .lstudio__picker-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

    @media (prefers-reduced-motion: reduce) {
      .lstudio__card, .lstudio__head, .lstudio__controls, .lstudio__summary { animation: none; }
      .lstudio-quiz { opacity: 1; transform: none; transition: none; }
    }
    @media (max-width: 640px) { .lstudio__total { font-size: 1.8rem; } .lstudio__head { flex-direction: column; } .lstudio__summary { flex-direction: column; align-items: stretch; gap: var(--space-4); } .lstudio__actions { width: 100%; flex-direction: column-reverse; } .lstudio__save, .lstudio__cta { width: 100%; justify-content: center; } }

    .lstudio__entry { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin:var(--space-8) 0; }
    /* the [hidden] attribute must win over the display rules above (UA [hidden] is too weak) */
    .lstudio__entry[hidden], .lstudio__studio[hidden], .lstudio__quiz[hidden] { display:none !important; }
    @media (max-width:680px){ .lstudio__entry{ grid-template-columns:1fr; } }
    .lstudio__entrycard { display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; text-align:left;
      padding:var(--space-6); border-radius:var(--radius-lg); background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10); color:#eef0f2; cursor:pointer; transition:transform .2s, border-color .2s, background .2s; }
    .lstudio__entrycard:hover { transform:translateY(-3px); border-color:var(--mint-500); background:rgba(21,205,176,.06); }
    .lstudio__entrycard--guided { background:linear-gradient(135deg, rgba(21,205,176,.16), rgba(255,255,255,.03)); }
    .lstudio__entrytitle { font-weight:650; font-size:1.15rem; }
    .lstudio__entrysub { color:rgba(238,240,242,.6); font-size:.92rem; }

    .lstudio__quiz { margin:var(--space-8) 0; }
    .lstudio-quiz { max-width:640px; margin:0 auto; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s; }
    .lstudio-quiz.is-revealed { opacity:1; transform:none; }
    .lstudio-quiz__bar { height:4px; border-radius:var(--radius-pill); background:rgba(255,255,255,.10); overflow:hidden; }
    .lstudio-quiz__bar span { display:block; height:100%; background:var(--mint-500); transition:width .3s; }
    .lstudio-quiz__step { color:rgba(238,240,242,.5); font-size:.8rem; margin:var(--space-2) 0; }
    .lstudio-quiz__title { font-size:1.4rem; margin:0 0 var(--space-4); color:#fff; }
    .lstudio-quiz__opts { display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .lstudio-quiz__opt { padding:var(--space-3) var(--space-4); border-radius:var(--radius-pill);
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#eef0f2; cursor:pointer; transition:.2s; }
    .lstudio-quiz__opt:hover { border-color:var(--mint-400); }
    .lstudio-quiz__opt.is-on { background:var(--mint-500); border-color:var(--mint-500); color:var(--ink); font-weight:600; }
    .lstudio-quiz__tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); }
    .lstudio-quiz__tile { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden;
      border:2px solid transparent; cursor:pointer; color:#fff; background:#1a1a1d var(--bg) center/cover no-repeat; }
    .lstudio-quiz__tile::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); }
    .lstudio-quiz__tile span { position:absolute; left:var(--space-3); bottom:var(--space-2); z-index:1; font-weight:600; }
    .lstudio-quiz__tile.is-on { border-color:var(--mint-500); }
    .lstudio-quiz__pairrow { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); color:#eef0f2; }
    .lstudio-quiz__nav { display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-6); }
    .lstudio-quiz__back { background:none; border:none; color:rgba(238,240,242,.6); cursor:pointer; }
    .lstudio-quiz__next { padding:var(--space-3) var(--space-6); border-radius:var(--radius-pill); border:none;
      background:var(--mint-500); color:var(--ink); font-weight:650; cursor:pointer; }
    .lstudio-quiz__next[disabled] { opacity:.4; cursor:not-allowed; }
    /* ----- Budget RANGE slider + price histogram ----- */
    /* budget sits inline in the rail as a control (no panel-in-panel box) */
    .lstudio__budgetbar { display: flex; flex-direction: column; gap: 10px; }
    .lstudio__price-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
    .lstudio__price-vals { display: inline-flex; align-items: baseline; gap: 8px; font-family: "Sora", sans-serif; }
    .lstudio__price-combos { font-size: .82rem; font-weight: 600; color: var(--mint-400); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
    .lstudio__price-combos:empty { display: none; }
    .lstudio__price-combos::before { content: "·"; margin: 0 7px 0 1px; color: rgba(238,240,242,.3); }
    .lstudio__budgetbar:hover .lstudio__price-combos, .lstudio__priceslider.is-dragging .lstudio__price-combos { opacity: 1; transform: none; }
    .lstudio__price-val { font-weight: 800; font-size: 1.1rem; color: #fff; font-variant-numeric: tabular-nums; }
    .lstudio__price-dash { color: rgba(238,240,242,.4); }
    .lstudio__priceslider { display: flex; flex-direction: column; gap: 8px; }
    .lstudio__price-hist { display: flex; align-items: flex-end; gap: 2px; height: 48px; padding: 0 11px; }
    .lstudio__price-bar { flex: 1 1 0; height: var(--h, 8%); min-height: 3px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.09); transform-origin: bottom; animation: ls-bar-grow .5s var(--d, 0ms) cubic-bezier(.2,.85,.25,1) both; transition: background .25s, box-shadow .25s; }
    .lstudio__price-bar.is-in { background: linear-gradient(180deg, var(--mint-400), var(--mint-500)); box-shadow: 0 0 12px rgba(21,205,176,.45); }
    .lstudio__priceslider.is-dragging .lstudio__price-bar.is-in { animation: ls-bar-wave .9s ease-in-out infinite; }
    @keyframes ls-bar-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
    @keyframes ls-bar-wave { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } }
    .lstudio__price-track { position: relative; height: 26px; margin: 0 11px; display: flex; align-items: center; touch-action: none; }
    .lstudio__price-rail { position: absolute; left: 0; right: 0; height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); }
    .lstudio__price-fill { position: absolute; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--mint-500), var(--mint-400)); box-shadow: 0 0 14px rgba(21,205,176,.5); }
    .lstudio__price-knob { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 0; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(21,205,176,.25); cursor: grab; transition: box-shadow .2s, transform .12s; touch-action: none; }
    .lstudio__price-knob::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mint-500); }
    .lstudio__price-knob:hover { box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 0 6px rgba(21,205,176,.32); }
    .lstudio__price-knob:focus-visible { outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 0 6px rgba(21,205,176,.45); }
    .lstudio__price-knob.is-grabbed { cursor: grabbing; transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 3px 16px rgba(0,0,0,.6), 0 0 0 9px rgba(21,205,176,.35); }

    /* ----- Lock / fix toggle on cards ----- */
    /* the padlock rides inline next to the price + swap arrows in each card's top-right;
       tap it to LOCK a piece you like — "New look" then re-rolls only the unlocked pieces */
    .lstudio__lock { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: rgba(238,240,242,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s, transform .15s; }
    .lstudio__lock svg { width: 17px; height: 17px; overflow: visible; }
    .lstudio__lock-body { fill: currentColor; }
    .lstudio__lock-shackle { transform-origin: 12px 11px; transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
    .lstudio__lock:not(.is-locked) .lstudio__lock-shackle { transform: translateX(-3px) rotate(-26deg); }
    .lstudio__lock:hover { border-color: var(--mint-500); color: #fff; transform: translateY(-1px); }
    .lstudio__lock.is-locked { background: var(--mint-500); border-color: var(--mint-500); color: #06120f; box-shadow: 0 0 18px rgba(21,205,176,.5); }
    .lstudio__lock.just-locked { animation: ls-lock-pop .4s ease; }
    .lstudio__lock.just-locked .lstudio__lock-shackle { animation: ls-shackle-snap .42s cubic-bezier(.3,1.6,.5,1); }
    .lstudio__lock.just-locked::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--mint-500); animation: ls-lock-ring .6s ease-out forwards; }
    @keyframes ls-lock-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
    @keyframes ls-shackle-snap { from { transform: translateX(-3px) rotate(-26deg); } to { transform: rotate(0); } }
    @keyframes ls-lock-ring { from { transform: scale(.65); opacity: .85; } to { transform: scale(1.7); opacity: 0; } }
    /* locked cards stay rock-steady (no re-roll animation) + a calm anchored glow */
    .lstudio__card--pinned { animation: none; border-color: rgba(21,205,176,.55); box-shadow: 0 0 0 1px rgba(21,205,176,.22), 0 10px 30px -14px rgba(21,205,176,.4); }
    @media (prefers-reduced-motion: reduce) { .lstudio__price-bar, .lstudio__lock-shackle, .lstudio__lock.just-locked, .lstudio__lock.just-locked::after { animation: none !important; transition: none !important; } }
/* END_SECTION:look-studio */

/* START_SECTION:magazine-teaser (INDEX:50) */
.magazine-teaser__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
    @media (min-width: 750px) { .magazine-teaser__grid { grid-template-columns: repeat(3, 1fr); } }
/* END_SECTION:magazine-teaser */

/* START_SECTION:magazine (INDEX:51) */
.mzn{ --mzn-ink:#08090b; --mzn-ink2:#0d1015; --mzn-card:#12151b; --mzn-mut:#9aa0a6; --mzn-line:rgba(255,255,255,.1);
    display:block; background:var(--mzn-ink); color:#fff; font-family:"Satoshi",var(--font-sans,system-ui,sans-serif); -webkit-font-smoothing:antialiased; overflow:hidden; }
  .mzn a{ text-decoration:none; color:inherit; } .mzn img{ display:block; max-width:100%; }
  .mzn h1,.mzn h2,.mzn h3,.mzn h4{ letter-spacing:-.03em; line-height:1.05; font-weight:800; margin:0; }
  .mzn-wrap{ max-width:1320px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
  .mzn-k{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mzn-a); }
  .mzn-k::before{ content:"// "; opacity:.7; }
  .mzn-ph{ display:block; width:100%; height:100%; background:radial-gradient(circle at 50% 40%,#1a1e25,#0c0e12); }
  .mzn-prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60; background:linear-gradient(90deg,var(--mzn-a),#aefff2); box-shadow:0 0 12px var(--mzn-a); }
  .mzn-anim .mzn-rv{ opacity:0; transform:translateY(38px) scale(.985); transition:opacity .7s ease, transform .8s cubic-bezier(.16,.84,.3,1); }
  .mzn-anim .mzn-rv.mzn-in{ opacity:1; transform:none; }
  .mzn-d1{ transition-delay:.08s } .mzn-d2{ transition-delay:.16s }
  .mzn-row .mzn-rv:nth-child(2){transition-delay:.08s}.mzn-row .mzn-rv:nth-child(3){transition-delay:.16s}.mzn-row .mzn-rv:nth-child(4){transition-delay:.24s}
  .mzn-colgrid .mzn-rv:nth-child(2){transition-delay:.06s}.mzn-colgrid .mzn-rv:nth-child(3){transition-delay:.12s}.mzn-colgrid .mzn-rv:nth-child(4){transition-delay:.18s}.mzn-colgrid .mzn-rv:nth-child(5){transition-delay:.24s}.mzn-colgrid .mzn-rv:nth-child(6){transition-delay:.3s}

  /* ===== intro hero (bespoke image) ===== */
  .mzn-hero{ position:relative; height:62vh; min-height:580px; padding-top:11rem; padding-bottom:1rem; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
  .mzn-hero__bg{ position:absolute; inset:0; z-index:0; }
  .mzn-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:brightness(.6) saturate(.95) contrast(1.04); transform:scale(1.04); }
  .mzn-hero__g1{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,8,.6),transparent 34%,transparent 52%,rgba(5,6,8,.97)); }
  .mzn-hero__g2{ position:absolute; inset:0; background:radial-gradient(95% 75% at 20% 42%,color-mix(in srgb,var(--mzn-a) 16%,transparent),transparent 55%); }
  .mzn-hero__grain{ position:absolute; inset:0; opacity:.05; background-image:radial-gradient(rgba(255,255,255,.7) .5px,transparent .5px); background-size:3px 3px; }
  .mzn-hero__in{ position:relative; z-index:3; width:100%; }
  .mzn-hero__marks{ display:flex; gap:.4rem; margin-bottom:1.2rem; }
  .mzn-hero__marks i{ width:26px; height:14px; border-radius:3px; border:1px solid color-mix(in srgb,var(--mzn-a) 50%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--mzn-a) 50%,transparent),color-mix(in srgb,var(--mzn-a) 12%,transparent)); box-shadow:0 0 10px color-mix(in srgb,var(--mzn-a) 40%,transparent); }
  .mzn-hero__marks i:nth-child(n+5){ background:transparent; box-shadow:none; opacity:.5; }
  .mzn-hero__k{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
  .mzn-hero__rule{ width:34px; height:1px; background:var(--mzn-a); }
  .mzn-hero__h{ position:relative; display:inline-block; font-size:clamp(3.6rem,12vw,10.5rem); text-transform:uppercase; letter-spacing:-.05em; line-height:.86; background:linear-gradient(180deg,#fff 30%,#aeb7b5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 12px 40px rgba(0,0,0,.6)); }
  .mzn-hero__sh{ position:absolute; inset:0; background:linear-gradient(100deg,transparent 44%,rgba(174,255,242,.85) 50%,transparent 56%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:280% 100%; animation:mzn-shine 6s ease-in-out infinite; }
  @keyframes mzn-shine{0%{background-position:170% 0}55%,100%{background-position:-90% 0}}
  .mzn-hero__lead{ margin:1.5rem 0 0; max-width:54ch; color:#e6e9ec; font-weight:500; font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.55; text-shadow:0 2px 18px rgba(0,0,0,.75); }
  .mzn-hero__cue{ position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:.45rem; color:var(--mzn-mut); font-family:ui-monospace,Menlo,monospace; font-size:.6rem; letter-spacing:.24em; }
  .mzn-hero__ch{ width:16px; height:16px; border-right:2px solid var(--mzn-a); border-bottom:2px solid var(--mzn-a); transform:rotate(45deg); animation:mzn-cue 1.8s ease-in-out infinite; }
  @keyframes mzn-cue{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.4}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
  @media(max-width:900px){ .mzn-hero{ height:auto; min-height:0; padding:26vh 0 14vh; } }

  /* ===== learn Inter-Pace ===== */
  .mzn-learn{ background:linear-gradient(180deg,var(--mzn-ink2),var(--mzn-ink)); border-block:1px solid var(--mzn-line); }
  .mzn-learn__lead{ margin:.9rem 0 0; max-width:62ch; color:#c3c7cc; font-weight:500; line-height:1.55; }
  .mzn-learn__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.2vw,1rem); margin-top:clamp(1.1rem,2vw,1.6rem); }
  .mzn-li{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.15rem 1.2rem 1.25rem; border:1px solid var(--mzn-line); border-radius:14px; background:var(--mzn-card); transition:transform .3s,border-color .3s,box-shadow .3s; }
  .mzn-li:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px rgba(21,205,176,.12); }
  .mzn-li__ic{ font-size:1.5rem; line-height:1; margin-bottom:.25rem; }
  .mzn-li h4{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; } .mzn-li:hover h4{ color:var(--mzn-a); }
  .mzn-li p{ color:var(--mzn-mut); font-size:.88rem; line-height:1.45; font-weight:500; }
  .mzn-li__go{ margin-top:auto; padding-top:.7rem; font-family:ui-monospace,Menlo,monospace; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--mzn-a); display:flex; align-items:center; gap:.4rem; }
  .mzn-li__go i{ font-style:normal; transition:transform .3s; } .mzn-li:hover .mzn-li__go i{ transform:translateX(4px); }
  @media(max-width:1000px){ .mzn-learn__grid{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .mzn-learn__grid{ grid-template-columns:1fr; } }

  /* ===== collections grid (legacy tiles — kept for reuse) ===== */
  .mzn-cols{ position:relative; background:linear-gradient(180deg,var(--mzn-ink),var(--mzn-ink2)); padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(3rem,6vw,5rem); }
  .mzn-colgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.8rem,1.3vw,1.1rem); }
  .mzn-col{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--mzn-line); background:var(--mzn-card); min-height:210px; display:flex; transition:transform .35s,border-color .35s,box-shadow .35s; }
  .mzn-col:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 44px rgba(21,205,176,.16); }
  .mzn-col__m{ position:absolute; inset:0; } .mzn-col__m img{ width:100%; height:100%; object-fit:cover; transition:transform .7s; } .mzn-col:hover .mzn-col__m img{ transform:scale(1.07); }
  .mzn-col__g{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.92)); }
  .mzn-col__b{ position:relative; z-index:2; margin-top:auto; padding:1.1rem 1.2rem 1.25rem; width:100%; }
  .mzn-col__b h3{ font-size:1.5rem; text-transform:uppercase; letter-spacing:-.02em; margin:.3rem 0 0; line-height:1.05; }
  .mzn-col__c{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; color:var(--mzn-mut); margin-top:.5rem; display:flex; align-items:center; gap:.5rem; }
  .mzn-col__arw{ color:var(--mzn-a); margin-left:auto; opacity:0; transform:translateX(-6px); transition:.3s; } .mzn-col:hover .mzn-col__arw{ opacity:1; transform:none; }
  .mzn-col__flag{ position:absolute; top:.8rem; left:.8rem; z-index:2; font-family:ui-monospace,Menlo,monospace; font-size:.62rem; font-weight:700; letter-spacing:.1em; color:#04120f; background:var(--mzn-a); padding:4px 9px; border-radius:5px; }
  .mzn-col--xl{ grid-column:span 3; min-height:340px; } .mzn-col--l{ grid-column:span 3; min-height:340px; } .mzn-col--m{ grid-column:span 2; min-height:240px; }
  @media(max-width:1000px){ .mzn-colgrid{ grid-template-columns:repeat(2,1fr); } .mzn-col--xl,.mzn-col--l{ grid-column:span 2; } .mzn-col--m{ grid-column:span 1; } }
  @media(max-width:620px){ .mzn-colgrid{ grid-template-columns:1fr; } .mzn-col--xl,.mzn-col--l,.mzn-col--m{ grid-column:span 1; } }

  /* masthead */
  .mzn-head{ max-width:1320px; margin-inline:auto; padding:clamp(2rem,4vw,3.4rem) clamp(1.25rem,4vw,3rem) clamp(1.2rem,2vw,1.8rem); }
  .mzn-head__h{ font-size:clamp(2.4rem,7vw,5.5rem); text-transform:uppercase; letter-spacing:-.045em; margin-top:.4rem; }
  .mzn-head__tag{ margin:1rem 0 0; max-width:52ch; color:#c3c7cc; font-weight:500; font-size:clamp(1rem,1.7vw,1.2rem); }
  .mzn-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(1.2rem,2vw,1.8rem); }
  .mzn-chip{ font-family:ui-monospace,Menlo,monospace; font-size:.76rem; font-weight:700; border:1px solid var(--mzn-line); border-radius:999px; padding:7px 14px; color:#c3c7cc; transition:.25s; }
  .mzn-chip:hover{ border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); color:#fff; } .mzn-chip.on{ background:var(--mzn-a); color:#04120f; border-color:var(--mzn-a); }

  /* lead */
  .mzn-lead{ padding:clamp(1rem,2vw,1.6rem) 0 clamp(2rem,4vw,3rem); display:grid; grid-template-columns:1.65fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); perspective:1200px; }
  .mzn-cover{ position:relative; display:flex; min-height:64vh; border-radius:16px; overflow:hidden; border:1px solid var(--mzn-line); }
  .mzn-cover__im{ position:absolute; inset:0; } .mzn-cover__im img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transform:scale(1.06); animation:mzn-kb 14s ease-out forwards; }
  @keyframes mzn-kb{ to{ transform:scale(1.14); } }
  .mzn-cover__g{ position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.2) 40%,rgba(0,0,0,.9)); }
  .mzn-cover__scan{ position:absolute; left:0; right:0; top:0; height:2px; z-index:2; background:linear-gradient(90deg,transparent,var(--mzn-a),transparent); box-shadow:0 0 16px var(--mzn-a); animation:mzn-scan 5.5s linear infinite; } @keyframes mzn-scan{0%{top:-2%}100%{top:102%}}
  .mzn-cover__b{ position:relative; z-index:3; margin-top:auto; padding:clamp(1.5rem,3vw,2.6rem); }
  .mzn-cover__h{ font-size:clamp(1.9rem,3.4vw,3.4rem); max-width:17ch; margin:.7rem 0 0; }
  .mzn-anim .mzn-cover__h{ clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.16,.84,.3,1) .15s; }
  .mzn-anim .mzn-cover.mzn-in .mzn-cover__h{ clip-path:inset(0 0 -8% 0); }
  .mzn-cover__b p{ margin:.9rem 0 0; max-width:46ch; color:#e2e5e9; font-weight:500; line-height:1.5; }
  .mzn-tops h4{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mzn-mut); margin-bottom:.5rem; }
  .mzn-top{ display:grid; grid-template-columns:auto 100px 1fr; gap:.9rem; align-items:center; padding:1.05rem 0; border-top:1px solid var(--mzn-line); border-radius:8px; transition:background .3s,padding-left .3s; }
  .mzn-top:hover{ background:rgba(255,255,255,.03); padding-left:.6rem; }
  .mzn-top__n{ font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:1.1rem; color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--mzn-a) 70%,transparent); transition:.3s; } .mzn-top:hover .mzn-top__n{ -webkit-text-stroke-color:var(--mzn-a); }
  .mzn-top__th{ width:100px; height:68px; border-radius:8px; overflow:hidden; background:var(--mzn-card); display:block; } .mzn-top__th img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; } .mzn-top:hover .mzn-top__th img{ transform:scale(1.1); }
  .mzn-top h3{ font-size:1.02rem; margin-top:.25rem; line-height:1.16; } .mzn-top:hover h3{ color:var(--mzn-a); }
  @media(max-width:900px){ .mzn-lead{ grid-template-columns:1fr; } }

  /* latest ticker */
  .mzn-latest{ border-block:1px solid var(--mzn-line); background:var(--mzn-ink2); overflow:hidden; }
  .mzn-latest__in{ display:flex; align-items:center; } .mzn-latest__lab{ flex:none; position:relative; z-index:2; background:var(--mzn-ink2); font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mzn-a); padding:.75rem clamp(1.25rem,4vw,3rem); border-right:1px solid var(--mzn-line); }
  /* The run translates left; without its own clipped lane it slides out over the "Latest" label. */
  .mzn-latest__vp{ flex:1; min-width:0; overflow:hidden; }
  .mzn-latest__run{ display:flex; flex:none; gap:2.4rem; white-space:nowrap; animation:mzn-mar 34s linear infinite; font-weight:700; color:#cfd3d8; font-size:.86rem; padding-left:2.4rem; will-change:transform; }
  .mzn-latest__run > a{ flex:none; }   /* never shrink — otherwise the nowrap titles overlap each other */
  .mzn-latest__in{ min-width:0; }
  .mzn-latest:hover .mzn-latest__run{ animation-play-state:paused; } .mzn-latest__run b{ color:var(--mzn-a); margin-right:.5rem; } @keyframes mzn-mar{ to{ transform:translateX(-50%); } }
  .mzn-latest__run a{ transition:color .2s; } .mzn-latest__run a:hover{ color:var(--mzn-a); }

  /* section head + card row */
  .mzn-sec{ padding:clamp(2.6rem,5vw,4.4rem) 0; } .mzn-sec--alt{ background:var(--mzn-ink2); }
  .mzn-sh{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 1.5rem; }
  .mzn-sh h2{ position:relative; font-size:clamp(1.7rem,3.2vw,2.6rem); margin-top:.5rem; }
  .mzn-sh h2::after{ content:""; position:absolute; left:0; bottom:-.5rem; height:3px; width:0; background:var(--mzn-a); box-shadow:0 0 12px var(--mzn-a); transition:width .8s cubic-bezier(.16,.84,.3,1) .2s; }
  .mzn-sh.mzn-in h2::after{ width:56px; }
  .mzn-all{ font-family:ui-monospace,Menlo,monospace; font-size:.84rem; font-weight:700; color:#cfd3d8; white-space:nowrap; } .mzn-all:hover{ color:var(--mzn-a); }
  .mzn-hero__back{ color:var(--mzn-a); text-decoration:none; border-bottom:1px solid transparent; } .mzn-hero__back:hover{ border-bottom-color:currentColor; }
  .mzn-pag{ margin-top:2.4rem; text-align:center; font-family:ui-monospace,Menlo,monospace; font-size:.9rem; }
  .mzn-pag a{ color:#cfd3d8; padding:.4rem .7rem; } .mzn-pag a:hover{ color:var(--mzn-a); } .mzn-pag .current{ color:var(--mzn-a); padding:.4rem .7rem; }
  .mzn-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.4rem); perspective:1000px; }
  /* --- Reel ---------------------------------------------------------------
     Category and explainer rows run slowly through their whole category. The
     grid above is the base state and the no-JS fallback: JS only switches a row
     to a reel when it holds MORE cards than the grid shows in one line. Fine
     pointers get the slow auto-run (paused on hover/focus); touch gets a
     swipeable reel instead, so drifting cards never fight a tap. Reduced motion
     keeps the plain grid — every card visible, nothing moving. --mzn-cw is set
     by JS to the grid's own column width, so a running row and a static one are
     the same size. */
  .mzn-reel.is-live{ overflow:hidden; }
  .mzn-reel.is-swipe{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .mzn-reel.is-swipe::-webkit-scrollbar{ display:none; }
  .mzn-reel.is-live .mzn-reel__track, .mzn-reel.is-swipe .mzn-reel__track{ display:flex; width:max-content; }
  .mzn-reel.is-live .mzn-card, .mzn-reel.is-swipe .mzn-card{ flex:0 0 var(--mzn-cw,300px); }
  .mzn-reel.is-swipe .mzn-card{ scroll-snap-align:start; }
  .mzn-reel.is-live .mzn-reel__track{ animation:mzn-reel-run var(--mzn-dur,60s) linear infinite; }
  .mzn-reel.is-live:hover .mzn-reel__track, .mzn-reel.is-live:focus-within .mzn-reel__track{ animation-play-state:paused; }
  @keyframes mzn-reel-run{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-1 * var(--mzn-setw,0px)),0,0); } }
  @media(prefers-reduced-motion:reduce){ .mzn-reel.is-live .mzn-reel__track{ animation:none; } }
  .mzn-card{ position:relative; background:var(--mzn-card); border:1px solid var(--mzn-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transform-style:preserve-3d; transition:border-color .35s, box-shadow .35s, transform .12s ease-out; }
  .mzn-card:hover{ border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 44px rgba(21,205,176,.14); }
  .mzn-card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(21,205,176,.18),transparent 55%); }
  .mzn-card:hover::after{ opacity:1; }
  .mzn-card__m{ aspect-ratio:16/11; overflow:hidden; background:radial-gradient(circle at 50% 40%,#1a1e25,#0c0e12); } .mzn-card__m img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.84,.3,1); } .mzn-card:hover .mzn-card__m img{ transform:scale(1.09); }
  .mzn-card__b{ padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column; flex:1; transform:translateZ(24px); }
  .mzn-card h3{ font-size:1.06rem; margin:.5rem 0 0; line-height:1.2; } .mzn-card:hover h3{ color:var(--mzn-a); }
  .mzn-card__meta{ margin-top:auto; padding-top:.9rem; font-family:ui-monospace,Menlo,monospace; font-size:.74rem; color:var(--mzn-mut); display:flex; align-items:center; justify-content:space-between; }
  .mzn-arw{ color:var(--mzn-a); opacity:0; transform:translateX(-6px); transition:.3s; } .mzn-card:hover .mzn-arw, .mzn-mr a:hover .mzn-arw{ opacity:1; transform:none; }
  @media(max-width:1000px){ .mzn-row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .mzn-row{ grid-template-columns:1fr; } }

  /* feature band */
  .mzn-feat{ position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden; }
  .mzn-feat__im{ position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:contain; padding:3% 0; background:radial-gradient(circle at 62% 45%,#171c24,var(--mzn-ink) 76%); }
  .mzn-feat__glow{ position:absolute; width:600px; height:600px; left:var(--fx,60%); top:var(--fy,50%); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:1; background:radial-gradient(circle,rgba(21,205,176,.14),transparent 60%); }
  .mzn-feat__g{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 40%,rgba(0,0,0,.9)); }
  .mzn-feat__b{ position:relative; z-index:2; padding:clamp(2rem,5vw,4.5rem); max-width:820px; }
  .mzn-feat__b h2{ font-size:clamp(2.2rem,5vw,4.4rem); max-width:15ch; margin:.7rem 0 0; }
  .mzn-feat__b p{ margin:1rem 0 0; max-width:44ch; color:#e2e5e9; font-weight:500; font-size:1.08rem; line-height:1.5; }
  .mzn-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem; background:var(--mzn-a); color:#04120f; font-weight:800; padding:12px 26px; border-radius:999px; transition:transform .18s, box-shadow .3s, gap .25s; }
  .mzn-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(21,205,176,.4); gap:.9rem; }

  /* series band (numbered multi-part story) */
  .mzn-series{ padding:clamp(2.6rem,5vw,4.4rem) 0; background:linear-gradient(180deg,var(--mzn-ink),var(--mzn-ink2)); border-block:1px solid var(--mzn-line); }
  .mzn-series__h{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 1.6rem; }
  .mzn-series__h h2{ position:relative; font-size:clamp(1.8rem,3.4vw,2.8rem); margin-top:.5rem; }
  .mzn-series__h h2::after{ content:""; position:absolute; left:0; bottom:-.5rem; height:3px; width:0; background:var(--mzn-a); box-shadow:0 0 12px var(--mzn-a); transition:width .8s cubic-bezier(.16,.84,.3,1) .2s; }
  .mzn-series__h.mzn-in h2::after{ width:56px; }
  .mzn-series__h p{ margin:.9rem 0 0; max-width:58ch; color:#c3c7cc; font-weight:500; line-height:1.5; }
  .mzn-series__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.4rem); perspective:1000px; }
  .mzn-ser{ position:relative; display:flex; flex-direction:column; background:var(--mzn-card); border:1px solid var(--mzn-line); border-radius:16px; overflow:hidden; transform-style:preserve-3d; transition:border-color .35s, box-shadow .35s, transform .12s ease-out; }
  .mzn-ser:hover{ border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 44px rgba(21,205,176,.14); }
  .mzn-ser__m{ position:relative; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(circle at 50% 40%,#1a1e25,#0c0e12); }
  .mzn-ser__m img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.84,.3,1); } .mzn-ser:hover .mzn-ser__m img{ transform:scale(1.07); }
  .mzn-ser__pt{ position:absolute; top:.7rem; left:.7rem; z-index:2; font-family:ui-monospace,Menlo,monospace; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#04120f; background:var(--mzn-a); padding:5px 11px; border-radius:999px; }
  .mzn-ser__b{ padding:1.05rem 1.15rem 1.3rem; display:flex; flex-direction:column; flex:1; transform:translateZ(20px); }
  .mzn-ser__n{ font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:1.7rem; line-height:1; color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--mzn-a) 60%,transparent); }
  .mzn-ser h3{ font-size:1.1rem; margin:.5rem 0 0; line-height:1.2; } .mzn-ser:hover h3{ color:var(--mzn-a); }
  .mzn-ser__x{ margin:.55rem 0 0; color:var(--mzn-mut); font-size:.9rem; font-weight:500; line-height:1.45; }
  @media(max-width:900px){ .mzn-series__row{ grid-template-columns:1fr; } }

  /* most read */
  .mzn-mr{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,5rem); }
  .mzn-mr a{ display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:center; padding:1.1rem 0; border-top:1px solid var(--mzn-line); transition:padding-left .3s; } .mzn-mr a:hover{ padding-left:.6rem; }
  .mzn-mr__n{ font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:2rem; color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--mzn-a) 70%,transparent); transition:.3s; } .mzn-mr a:hover .mzn-mr__n{ -webkit-text-stroke-color:var(--mzn-a); }
  .mzn-mr h3{ font-size:1.1rem; line-height:1.2; } .mzn-mr a:hover h3{ color:var(--mzn-a); }
  @media(max-width:640px){ .mzn-mr{ grid-template-columns:1fr; } }

  /* shop the story */
  .mzn-shop{ background:linear-gradient(180deg,var(--mzn-ink2),var(--mzn-ink)); }
  .mzn-prow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.4rem); perspective:1000px; }
  .mzn-prod{ position:relative; background:var(--mzn-card); border:1px solid var(--mzn-line); border-radius:16px; overflow:hidden; transform-style:preserve-3d; transition:border-color .35s, box-shadow .35s, transform .12s ease-out; }
  .mzn-prod:hover{ border-color:color-mix(in srgb,var(--mzn-a) 55%,transparent); box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 44px rgba(21,205,176,.14); }
  .mzn-prod__m{ aspect-ratio:1; background:radial-gradient(circle at 50% 38%,#eef1f4,#cfd6dd); display:grid; place-items:center; padding:9%; } .mzn-prod__m img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .5s; } .mzn-prod:hover .mzn-prod__m img{ transform:scale(1.07) rotate(-2deg); }
  .mzn-prod__b{ padding:1rem 1.1rem 1.2rem; transform:translateZ(20px); } .mzn-prod__t{ font-family:ui-monospace,Menlo,monospace; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mzn-mut); }
  .mzn-prod h3{ font-size:.96rem; margin:.35rem 0 0; line-height:1.2; }
  .mzn-prod__f{ margin-top:.8rem; display:flex; align-items:center; justify-content:space-between; } .mzn-prod__pr{ font-weight:800; } .mzn-prod__buy{ font-family:ui-monospace,Menlo,monospace; font-size:.76rem; font-weight:700; color:var(--mzn-a); border:1px solid color-mix(in srgb,var(--mzn-a) 45%,transparent); padding:7px 12px; border-radius:999px; transition:.25s; } .mzn-prod:hover .mzn-prod__buy{ background:var(--mzn-a); color:#04120f; box-shadow:0 0 20px rgba(21,205,176,.4); }
  @media(max-width:1000px){ .mzn-prow{ grid-template-columns:repeat(2,1fr); } }

  /* brands */
  .mzn-brands{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
  .mzn-brands a{ position:relative; height:88px; border:1px solid var(--mzn-line); border-radius:14px; display:grid; place-items:center; font-weight:800; color:#cfd3d8; background:var(--mzn-card); overflow:hidden; transition:.3s; text-align:center; padding:0 .5rem; }
  .mzn-brands a::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%,rgba(21,205,176,.25),transparent 60%); opacity:0; transition:.3s; }
  .mzn-brands a:hover{ border-color:var(--mzn-a); color:#fff; transform:translateY(-3px); } .mzn-brands a:hover::before{ opacity:1; }
  @media(max-width:900px){ .mzn-brands{ grid-template-columns:repeat(3,1fr); } }

  /* newsletter */
  .mzn-news{ text-align:center; background:radial-gradient(circle at 50% 0%,rgba(21,205,176,.1),var(--mzn-ink) 62%); }
  .mzn-news h2{ font-size:clamp(1.9rem,4vw,3.2rem); max-width:20ch; margin:.4rem auto 0; }
  .mzn-news__form{ margin:1.6rem auto 0; max-width:470px; display:flex; gap:.6rem; }
  .mzn-news__form input{ flex:1; background:var(--mzn-card); border:1px solid var(--mzn-line); border-radius:999px; padding:13px 20px; color:#fff; font:inherit; }
  .mzn-empty{ text-align:center; color:var(--mzn-mut); padding:3rem 0; }

  @media (prefers-reduced-motion:reduce){ .mzn-rv{ opacity:1; transform:none; } .mzn-cover__im img,.mzn-cover__scan,.mzn-latest__run{ animation:none; } .mzn-cover__h{ clip-path:none; } }
/* END_SECTION:magazine */

/* START_SECTION:main-article (INDEX:52) */
.post { padding-block: var(--space-12); }
    .post__title { margin: var(--space-2) 0; }
    .post__meta { color: var(--neutral-500); font-size: .85rem; }
    .post__hero { margin-block: var(--space-8); }
    .post__hero img { width: 100%; border-radius: var(--radius-lg); }
    .post__layout { display: grid; gap: var(--space-12); }
    @media (min-width: 1000px) { .post__content { max-width: 72ch; margin-inline: auto; } }
    .post__content { font-size: 1.05rem; }
    .post__shop { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--neutral-200); }
    .post__shop-title { margin-bottom: var(--space-6); }
    .post__shop-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 900px) { .post__shop-grid { grid-template-columns: repeat(4, 1fr); } }
    .post__related { margin-top: var(--space-16); }
    .post__related h2 { margin-bottom: var(--space-6); }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:53) */
.mag{ --mag-ink:#0a0b0d; --mag-ink2:#0e1013; --mag-mut:#9aa0a6; --mag-line:rgba(255,255,255,.12);
    display:block; background:var(--mag-ink); color:#fff; font-family:"Satoshi",var(--font-sans,system-ui,sans-serif); -webkit-font-smoothing:antialiased; overflow:hidden; }
  .mag a{ text-decoration:none; color:inherit; }
  .mag h1,.mag h2,.mag h3{ letter-spacing:-.035em; line-height:1; font-weight:800; margin:0; }
  .mag-mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }

  /* Cover story */
  .mag-cov{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
  .mag-cov__imgwrap{ position:absolute; inset:0; will-change:transform; }
  .mag-cov__img{ width:100%; height:100%; object-fit:cover; object-position:center 24%; transform:scale(1.08); animation:mag-kb 18s ease-in-out infinite alternate; }
  @keyframes mag-kb{ from{ transform:scale(1.06) translateY(0); } to{ transform:scale(1.16) translateY(-2%); } }
  .mag-cov__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.14) 30%, rgba(10,11,13,.55) 66%, rgba(10,11,13,.96) 100%); }
  .mag-cov__grain{ position:absolute; inset:0; opacity:.06; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size:3px 3px; }
  .mag-cov__top{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(1.1rem,3vw,2rem) clamp(1.25rem,5vw,4rem); border-bottom:1px solid rgba(255,255,255,.14); }
  .mag-cov__mast{ font-weight:800; font-size:clamp(1rem,1.8vw,1.25rem); }
  .mag-cov__mast b{ color:var(--mag-accent); }
  .mag-cov__issue{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#cfd3d8; }
  .mag-cov__body{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:block; padding:clamp(1.5rem,5vw,4rem) clamp(1.25rem,5vw,4rem) clamp(3rem,7vw,5.5rem); }
  .mag-cov__kick{ display:inline-flex; align-items:center; gap:.6rem; font-size:.76rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--mag-accent); }
  .mag-cov__kick::before{ content:""; width:26px; height:1px; background:var(--mag-accent); }
  .mag-cov__title{ margin:1rem 0 0; font-size:clamp(2.4rem,6vw,5.6rem); line-height:.98; text-wrap:balance; max-width:17ch; }
  .mag-cov__dek{ margin:1.2rem 0 0; max-width:52ch; font-size:clamp(1.02rem,1.7vw,1.35rem); font-weight:500; color:#d6d9dd; line-height:1.5; }
  .mag-cov__cta{ display:inline-flex; align-items:center; gap:.7rem; margin-top:1.8rem; font-weight:800; font-size:clamp(1rem,1.7vw,1.15rem); }
  .mag-cov__cta span{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--mag-accent); color:#03312a; transition:transform .25s; }
  .mag-cov__body:hover .mag-cov__cta span{ transform:translateX(5px); }
  .mag-cov__cue{ position:absolute; left:50%; bottom:1.6vh; transform:translateX(-50%); z-index:3; color:var(--mag-mut); font-size:1.1rem; animation:mag-bob 1.8s ease-in-out infinite; }
  @keyframes mag-bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }

  /* Stories */
  .mag-st{ max-width:1280px; margin-inline:auto; padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,5vw,4rem) clamp(4rem,9vw,7rem); }
  .mag-st__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:clamp(2rem,4vw,3.2rem); }
  .mag-st__eyebrow{ font-size:.76rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--mag-accent); margin:0; }
  .mag-st__h{ font-size:clamp(2.2rem,5vw,4rem); margin-top:.4rem; text-transform:capitalize; }
  .mag-st__filters{ display:flex; flex-wrap:wrap; gap:.55rem; }
  .mag-chip{ border:1px solid var(--mag-line); border-radius:999px; padding:8px 16px; font-size:.82rem; font-weight:700; color:#c3c7cc; transition:all .25s; }
  .mag-chip:hover{ border-color:color-mix(in srgb,var(--mag-accent) 55%,transparent); color:#fff; }
  .mag-chip.on{ background:var(--mag-accent); color:#03312a; border-color:var(--mag-accent); }

  .mag-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,1.8vw,1.5rem); }
  .mag-card{ position:relative; grid-column:span 2; display:flex; flex-direction:column; border:1px solid var(--mag-line); border-radius:20px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent); transition:border-color .35s, transform .35s; }
  .mag-card:hover{ border-color:color-mix(in srgb,var(--mag-accent) 45%,transparent); transform:translateY(-6px); }
  .mag-card--lead{ grid-column:span 3; }
  .mag-card__media{ aspect-ratio:16/10; overflow:hidden; background:radial-gradient(circle at 50% 38%,#1b1f25,#0c0e11); }
  .mag-card--lead .mag-card__media{ aspect-ratio:16/9; }
  .mag-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s; }
  .mag-card:hover .mag-card__media img{ transform:scale(1.06); }
  .mag-card__b{ padding:clamp(1.1rem,1.8vw,1.6rem); display:flex; flex-direction:column; flex:1; }
  .mag-card__tag{ align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mag-accent); border:1px solid color-mix(in srgb,var(--mag-accent) 40%,transparent); padding:4px 11px; border-radius:999px; }
  .mag-card__h{ margin:.7rem 0 0; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.14; }
  .mag-card--lead .mag-card__h{ font-size:clamp(1.4rem,2.4vw,2rem); }
  .mag-card__x{ margin:.6rem 0 0; color:#a7abb1; font-weight:500; line-height:1.5; font-size:.95rem; flex:1; }
  .mag-card__more{ margin-top:1.1rem; font-weight:800; display:inline-flex; gap:.4rem; align-items:center; }
  .mag-card__more span{ color:var(--mag-accent); transition:transform .25s; }
  .mag-card:hover .mag-card__more span{ transform:translateX(4px); }
  .mag-ph{ display:block; width:100%; height:100%; background:radial-gradient(circle at 50% 40%,#1b1f25,#0c0e11); }
  @media (max-width:1000px){ .mag-grid{ grid-template-columns:repeat(4,1fr); } .mag-card{ grid-column:span 2; } .mag-card--lead{ grid-column:span 4; } }
  @media (max-width:640px){ .mag-grid{ grid-template-columns:1fr; } .mag-card,.mag-card--lead{ grid-column:span 1; } }

  .mag-empty{ color:var(--mag-mut); text-align:center; padding:2.5rem 0; font-weight:500; }
  .mag-pag{ margin-top:clamp(2rem,4vw,3.5rem); display:flex; justify-content:center; }

  /* reveals */
  .mag-rv{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.3,1); }
  .mag-rv.is-in{ opacity:1; transform:none; }
  .mag-d1{ transition-delay:.08s }
  .mag-grid .mag-rv:nth-child(2){ transition-delay:.07s } .mag-grid .mag-rv:nth-child(3){ transition-delay:.12s }
  .mag-grid .mag-rv:nth-child(4){ transition-delay:.06s } .mag-grid .mag-rv:nth-child(5){ transition-delay:.12s } .mag-grid .mag-rv:nth-child(6){ transition-delay:.18s }
  @media (prefers-reduced-motion:reduce){ .mag-rv{ opacity:1; transform:none; } .mag-cov__img{ animation:none; transform:scale(1.05); } .mag-cov__cue{ animation:none; } }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:54) */
/* ============================================================= *
     *  CART — "Startaufstellung" (grid / start-light concept)       *
     *  Ported from mock-cart-01-grid. Fonts self-hosted in theme:   *
     *  Inter (sans) · Satoshi (disp) · Space Mono (mono).           *
     * ============================================================= */
    .cart-grid{
      --mint:#15cdb0; --mint-400:#2ad6bb; --mint-300:#5fe0cb; --mint-200:#93ebd7; --mint-600:#0d8473; --mint-700:#0a5d51;
      --ink:#04140f;
      --bg0:#08080a; --bg1:#0c0c10; --bg2:#101014; --bg3:#16161c;
      --tx:#f4f4f6; --tx-2:#b9b9c2; --tx-dim:#9b9ba6; --tx-faint:#6c6c78;
      --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
      --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
      --field:rgba(255,255,255,.05); --field-line:rgba(255,255,255,.14);
      --amber:#f5a623; --red:#e5484d; --green:#16a34a; --blue:#5b9dff;
      --glow:0 10px 34px -10px rgba(21,205,176,.55);
      --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
      --sans:"Inter",system-ui,sans-serif;
      --disp:"Satoshi","Inter",system-ui,sans-serif;
      --mono:"Space Mono",ui-monospace,monospace;
      --tile:#eef0f2;

      position:relative; isolation:isolate; color:var(--tx);
    }
    /* full-bleed dark backdrop behind the whole section */
    .cart-grid::before{
      content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; transform:translateX(-50%);
      width:100vw; background:var(--bg0);
    }
    .cart-grid ::selection{background:rgba(21,205,176,.28); color:#fff}
    .cart-grid a{color:inherit}

    /* ---------- HERO ---------- */
    .cart-grid__hero{
      position:relative; overflow:hidden;
      /* top padding clears the FIXED transparent site-header (fine-tuned via JS below); this is the fallback */
      padding:132px max(28px, calc((100vw - 1180px)/2)) 40px;
      isolation:isolate;
    }
    .cg-hero__bg{
      position:absolute; inset:0; z-index:-3;
      /* image URL is injected via an inline style on the element, not here (asset filters cannot run inside a static stylesheet block) */
      background-image:var(--cg-hero-img);
      background-position:center 38%; background-size:cover; background-repeat:no-repeat;
      transform:scale(1.06);
      animation:cgBgDrift 26s ease-in-out infinite alternate;
    }
    @keyframes cgBgDrift{from{transform:scale(1.06) translateY(0)} to{transform:scale(1.12) translateY(-10px)}}
    .cg-hero__scrim{
      position:absolute; inset:0; z-index:-2;
      background:
        radial-gradient(120% 90% at 50% 8%, rgba(8,8,10,0) 30%, rgba(8,8,10,.5) 78%, rgba(8,8,10,.9) 100%),
        linear-gradient(180deg, rgba(8,8,10,.34) 0%, rgba(8,8,10,.12) 34%, rgba(8,8,10,.55) 78%, var(--bg0) 100%);
    }
    .cg-hero__scrim2{
      position:absolute; inset:0; z-index:-2;
      background:linear-gradient(90deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,0) 22% 78%, rgba(8,8,10,.5) 100%);
    }
    .cg-hero__teal{
      position:absolute; inset:0; z-index:-2; pointer-events:none;
      background:radial-gradient(80% 60% at 50% 30%, rgba(21,205,176,.10), transparent 62%);
      mix-blend-mode:screen;
    }
    .cg-hero__speed{
      position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
      background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px);
      -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
      mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
      animation:cgSpeedPan 8s linear infinite;
    }
    @keyframes cgSpeedPan{from{background-position:0 0} to{background-position:-240px 0}}

    .cg-hero__inner{position:relative; z-index:1}
    .cg-eyebrow{
      font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
      color:var(--mint-200); display:inline-flex; align-items:center; gap:11px; margin:0 0 14px;
      text-shadow:0 2px 14px rgba(0,0,0,.6);
    }
    .cg-eyebrow__tick{width:26px; height:1px; background:linear-gradient(90deg,var(--mint),transparent)}
    .cg-eyebrow__pos{color:var(--tx-2)}

    .cg-hero__row{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap}
    .cg-title{
      margin:0; font-family:var(--disp); font-weight:900; letter-spacing:-.035em; line-height:.92;
      font-size:clamp(52px, 8vw, 96px); color:var(--tx);
      text-shadow:0 6px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06);
    }
    .cg-title__dim{color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.34)}
    .cg-sub{
      display:flex; align-items:center; gap:14px; margin-top:16px;
      font-size:15px; color:var(--tx-2); font-weight:500;
    }
    .cg-count-pill{
      font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
      color:var(--ink); background:linear-gradient(120deg,var(--mint),var(--mint-300));
      padding:6px 12px; border-radius:var(--radius-pill);
      box-shadow:0 0 22px -4px rgba(21,205,176,.7), inset 0 1px 0 rgba(255,255,255,.4);
    }
    .cg-back{
      display:inline-flex; align-items:center; gap:9px;
      font-size:13.5px; font-weight:600; color:var(--tx-2); text-decoration:none;
      padding:9px 15px 9px 12px; border-radius:var(--radius-pill);
      border:1px solid var(--line-2); background:rgba(8,8,10,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
      transition:.18s ease; cursor:pointer;
    }
    .cg-back:hover{color:var(--tx); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); transform:translateX(-2px)}
    .cg-back svg{width:15px; height:15px}

    /* ---------- MAIN 2-COL ---------- */
    .cart-grid__wrap{
      max-width:1180px; margin:0 auto;
      padding:38px 28px 70px;
      display:grid; grid-template-columns:1fr 372px; gap:30px; align-items:start;
    }
    .cart-grid__empty-wrap{ max-width:1180px; margin:0 auto; padding:38px 28px 70px; }

    .cg-seyebrow{
      display:flex; align-items:center; gap:12px; margin:0 2px 16px;
      font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--tx-faint);
    }
    .cg-seyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
    .cg-seyebrow b{color:var(--mint-200); font-weight:700}

    /* ---------- GRID SLOT (line item) ---------- */
    .cg-slots{display:flex; flex-direction:column; gap:14px}
    .cg-slot{
      position:relative; overflow:hidden;
      display:grid; grid-template-columns:52px 108px 1fr; gap:20px; align-items:stretch;
      padding:18px 20px 18px 0;
      border:1px solid var(--line); border-radius:var(--radius-md);
      background:linear-gradient(180deg,#1c1c23,#16161b);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px -26px rgba(0,0,0,.9);
      transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, opacity .34s ease;
    }
    .cg-slot::before{
      content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 2px, transparent 2px 6px);
      -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.25));
      mask-image:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.25));
    }
    .cg-slot > *{position:relative; z-index:1}
    .cg-slot:hover{
      transform:translateY(-2px);
      border-color:rgba(21,205,176,.4);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(21,205,176,.18), -1px 0 24px -14px rgba(21,205,176,.5);
    }

    /* P-number rail */
    .cg-rail{
      display:flex; flex-direction:column; align-items:center; justify-content:space-between;
      padding:2px 0; border-right:1px solid var(--line); position:relative;
    }
    .cg-rail::after{
      content:""; position:absolute; right:-1px; top:14%; bottom:14%; width:2px; border-radius:99px;
      background:var(--mint); box-shadow:0 0 12px rgba(21,205,176,.55); opacity:.55; transition:.28s ease;
    }
    .cg-slot--red .cg-rail::after{background:var(--red); box-shadow:0 0 12px rgba(229,72,77,.55); opacity:.85}
    .cg-slot--warn .cg-rail::after{background:var(--amber); box-shadow:0 0 12px rgba(245,166,35,.5); opacity:.8}
    .cg-slot:hover .cg-rail::after{opacity:1}
    .cg-rail__num{
      font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:-.04em; color:var(--tx-2);
      line-height:1; transition:color .28s ease;
    }
    .cg-slot:hover .cg-rail__num{color:var(--mint-200)}
    .cg-rail__tag{
      font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--tx-faint); text-transform:uppercase;
      writing-mode:vertical-rl; transform:rotate(180deg); opacity:.7;
    }

    /* media tile */
    .cg-media{
      align-self:center; text-decoration:none;
      width:108px; height:108px; border-radius:12px;
      background:radial-gradient(120% 120% at 30% 20%, #ffffff, var(--tile) 78%);
      display:grid; place-items:center; padding:11px; overflow:hidden;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -8px 20px rgba(0,0,0,.06), 0 10px 24px -12px rgba(0,0,0,.8);
      position:relative;
    }
    .cg-media::after{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 42%); opacity:.5; mix-blend-mode:overlay;
    }
    .cg-media img,
    .cg-media .placeholder{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
      filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
    .cg-media .placeholder{width:100%; height:100%; background:linear-gradient(135deg,#d8dade,#eef0f2); border-radius:8px}

    /* item detail */
    .cg-detail{display:flex; flex-direction:column; min-width:0}
    .cg-detail__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
    .cg-titleblock{min-width:0}
    .cg-eyebrow-sm{
      font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-faint);
      margin:0 0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .cg-name{
      font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.015em; line-height:1.24;
      color:var(--tx); text-decoration:none; margin:0; display:block;
      transition:color .16s ease; cursor:pointer;
    }
    .cg-name:hover{color:var(--mint-200)}
    /* variant + stock live on one row with real breathing room */
    .cg-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px}
    .cg-variant{
      display:inline-flex; align-items:center; gap:8px;
      font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--tx-2);
      background:rgba(255,255,255,.04); border:1px solid var(--line);
      padding:4px 10px; border-radius:var(--radius-sm);
    }

    /* size = the one variant fact worth double-checking before paying.
       Deliberately NOT mint — mint means "in stock" on the pill right next to it;
       this reads as bright neutral data instead of a second status light. */
    .cg-size{
      display:inline-flex; align-items:center; gap:8px;
      padding:4px 11px 4px 9px; border-radius:var(--radius-sm);
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
    }
    .cg-size__k{
      font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--tx-dim);
    }
    .cg-size__v{
      font-family:var(--disp); font-weight:800; font-size:13.5px; letter-spacing:.01em;
      color:var(--tx); line-height:1;
    }

    /* stock = pit-board light */
    .cg-stock{
      display:inline-flex; align-items:center; gap:8px;
      font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; line-height:1;
      padding:5px 10px 5px 8px; border-radius:var(--radius-sm);
      border:1px solid; background:rgba(0,0,0,.28);
    }
    .cg-stock__led{width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; box-shadow:0 0 9px 1px currentColor}
    .cg-stock--ok{color:var(--mint); border-color:rgba(21,205,176,.28)}
    .cg-stock--ok .cg-stock__t{color:var(--mint-200)}
    .cg-stock--warn{color:var(--amber); border-color:rgba(245,166,35,.32)}
    .cg-stock--warn .cg-stock__t{color:#ffce7a}
    .cg-stock--crit{color:var(--red); border-color:rgba(229,72,77,.34)}
    .cg-stock--crit .cg-stock__t{color:#ff9ea0}
    .cg-stock--warn .cg-stock__led,.cg-stock--crit .cg-stock__led{animation:cgPit 1.5s ease-in-out infinite}
    @keyframes cgPit{0%,100%{opacity:1; box-shadow:0 0 9px 1px currentColor} 50%{opacity:.4; box-shadow:0 0 3px 0 currentColor}}

    .cg-del{
      flex:none; width:30px; height:30px; border-radius:var(--radius-sm);
      border:1px solid transparent; background:transparent; color:var(--tx-faint);
      cursor:pointer; display:grid; place-items:center; transition:.16s ease;
    }
    .cg-del:hover{background:rgba(229,72,77,.14); color:#ff9d9f; border-color:rgba(229,72,77,.34); transform:rotate(6deg)}
    .cg-del svg{width:15px; height:15px}

    .cg-detail__bot{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:auto; padding-top:16px}

    .cg-eta{
      display:inline-flex; align-items:center; gap:9px;
      font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--tx-2);
      padding:6px 11px; border-radius:var(--radius-sm);
      background:rgba(0,0,0,.34); border:1px solid var(--line);
    }
    .cg-eta__lap{color:var(--mint-200); font-weight:700; letter-spacing:.08em; font-variant-numeric:tabular-nums}
    .cg-eta__lap--ask{font-family:inherit; font-size:inherit; font-weight:700; line-height:inherit; color:var(--amber); letter-spacing:.02em; text-decoration:none; cursor:pointer; background:none; border:0; border-bottom:1px dashed rgba(245,166,35,.5); padding:0}
    .cg-eta__lap--ask:hover{color:#ffce7a; border-bottom-color:#ffce7a}

    /* "ask us" delivery pop-up CSS now lives (self-contained + global) in the cart-drawer
       stylesheet, since the pop-up is rendered globally via the drawer and shared by both carts. */
    .cg-eta__ico{width:13px; height:13px; color:var(--tx-faint)}

    .cg-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
    /* qty stepper = gearbox */
    .cg-stepper{
      display:inline-flex; align-items:stretch;
      border:1px solid var(--line-2); border-radius:var(--radius-sm);
      background:rgba(0,0,0,.4); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
    }
    .cg-stepper button{
      width:34px; height:36px; border:0; background:transparent; color:var(--tx-2);
      font-family:var(--disp); font-weight:700; font-size:19px; line-height:1; cursor:pointer;
      display:grid; place-items:center; transition:.14s ease;
    }
    .cg-stepper button:hover{background:var(--mint); color:var(--ink)}
    .cg-stepper button:active{transform:translateY(1px)}
    .cg-qty{
      min-width:40px; width:40px; text-align:center; display:grid; place-items:center;
      font-family:var(--mono); font-weight:700; font-size:14px; color:var(--tx);
      border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
      background:rgba(255,255,255,.02); font-variant-numeric:tabular-nums;
      -moz-appearance:textfield;
    }
    .cg-qty:focus{outline:none; box-shadow:inset 0 0 0 2px rgba(21,205,176,.4)}
    .cg-priceblock{text-align:right; min-width:96px}
    .cg-lineprice{
      font-family:var(--disp); font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--tx);
      font-variant-numeric:tabular-nums; line-height:1;
    }
    .cg-unitprice{
      font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--tx-faint); margin-top:5px;
    }

    /* ---------- continue toolbar ---------- */
    .cg-continue{
      margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px;
    }
    .cg-linkbtn{
      display:inline-flex; align-items:center; gap:9px;
      font-size:13.5px; font-weight:600; color:var(--tx-2); text-decoration:none;
      padding:10px 4px; cursor:pointer; transition:.16s ease;
    }
    .cg-linkbtn:hover{color:var(--mint-200)}
    .cg-linkbtn svg{width:15px; height:15px}
    .cg-secure{
      display:inline-flex; align-items:center; gap:8px;
      font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint);
    }
    .cg-secure svg{width:13px; height:13px; color:var(--mint)}

    /* ---------- NOTE + ESTIMATOR ---------- */
    .cg-toolset{margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
    .cg-tcard{
      border:1px solid var(--line); border-radius:var(--radius-md);
      background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005));
      padding:16px 16px 17px; transition:border-color .18s ease;
    }
    .cg-tcard--span{grid-column:1 / -1}
    .cg-tcard:hover{border-color:var(--line-2)}
    .cg-tcard__head{
      display:flex; align-items:center; gap:9px; margin-bottom:13px;
      font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint);
    }
    .cg-tcard__head svg{width:15px; height:15px; color:var(--mint); flex:none}
    .cg-tcard__opt{margin-left:auto; font-size:9px; letter-spacing:.16em; opacity:.7}

    /* order note as a collapsible card — summary keeps the .cg-tcard__head look */
    .cg-noted{list-style:none}
    .cg-noted > summary{cursor:pointer; list-style:none; margin-bottom:0}
    .cg-noted > summary::-webkit-details-marker{display:none}
    .cg-noted[open] > summary{margin-bottom:13px}
    .cg-noted__chev{width:14px; height:14px; color:var(--tx-faint); margin-left:10px; flex:none; transition:transform .3s ease}
    .cg-noted[open] .cg-noted__chev{transform:rotate(180deg)}
    .cg-noted .cg-tcard__opt{margin-left:auto}

    /* GO block — plain wrapper on desktop; the mobile layer pins it (see below) */
    .cg-go__sum{display:none}

    .cg-note{
      width:100%; resize:vertical; min-height:70px; display:block;
      font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--tx);
      background:rgba(0,0,0,.34); border:1px solid var(--line-2); border-radius:var(--radius-sm);
      padding:11px 13px; box-shadow:inset 0 1px 3px rgba(0,0,0,.55); transition:.16s ease;
    }
    .cg-note::placeholder{color:var(--tx-faint)}
    .cg-note:focus{outline:none; border-color:var(--mint-600); box-shadow:inset 0 1px 3px rgba(0,0,0,.55), 0 0 0 3px rgba(21,205,176,.25)}

    /* estimator — restyle the shared .cart-ship <details> to the tower look */
    .cart-grid .cart-ship{
      list-style:none;
    }
    .cart-grid .cart-ship .cart-ship__sum{
      cursor:pointer; list-style:none; display:flex; align-items:center;
    }
    .cart-grid .cart-ship .cart-ship__sum::-webkit-details-marker{display:none}
    .cart-grid .cart-ship__sum > svg:not(.cart-ship__chev){width:16px; height:16px; flex:none; color:var(--mint-300); margin-right:9px}
    .cart-grid .cart-ship__sum > span{flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-dim)}
    .cart-grid .cart-ship__chev{width:14px; height:14px; color:var(--tx-faint); margin-left:auto; transition:transform .3s ease}
    .cart-grid .cart-ship[open] .cart-ship__chev{transform:rotate(180deg)}
    .cart-grid .cart-ship__body{display:block; padding-top:4px}
    .cg-est-row{display:grid; grid-template-columns:1fr 96px; gap:9px}
    .cg-field{position:relative}
    .cg-field--full{grid-column:1 / -1; margin-top:9px}
    .cg-field label{
      position:absolute; top:-7px; left:10px; padding:0 5px;
      font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint);
      background:var(--bg1); border-radius:3px; z-index:1;
    }
    .cart-grid .cg-field select,
    .cart-grid .cg-field input[type=text]{
      width:100%; appearance:none; -webkit-appearance:none;
      font-family:var(--sans); font-size:13px; color:var(--tx); height:40px;
      background:rgba(0,0,0,.34); border:1px solid var(--line-2); border-radius:var(--radius-sm);
      padding:10px 12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.55); transition:.16s ease;
    }
    .cart-grid .cg-field input::placeholder{color:var(--tx-faint); font-family:var(--mono); letter-spacing:.04em}
    .cart-grid .cg-field select{
      padding-right:32px; cursor:pointer;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9ba6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat:no-repeat; background-position:right 12px center;
    }
    .cart-grid .cg-field select:focus,
    .cart-grid .cg-field input:focus{outline:none; border-color:var(--mint-600); box-shadow:inset 0 1px 3px rgba(0,0,0,.55), 0 0 0 3px rgba(21,205,176,.25)}
    .cart-grid .cg-field select option{background:var(--bg2); color:var(--tx)}
    .cg-btn-calc{
      height:40px; border:1px solid var(--mint-600); border-radius:var(--radius-sm);
      background:rgba(21,205,176,.1); color:var(--mint-200);
      font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.02em; cursor:pointer; transition:.16s ease;
      align-self:start;
    }
    .cg-btn-calc:hover{background:var(--mint); color:var(--ink); box-shadow:0 0 18px -4px rgba(21,205,176,.6)}
    .cg-btn-calc:active{transform:translateY(1px)}
    .cart-grid .cart-ship__results{margin-top:12px}
    .cart-grid .cart-ship__list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
    .cart-grid .cart-ship__list li{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--tx)}
    .cart-grid .cart-ship__list li span:last-child{font-weight:600; white-space:nowrap; font-family:var(--disp)}
    .cart-grid .cart-ship__days{color:var(--tx-dim); font-weight:400}
    .cart-grid .cart-ship__err,
    .cart-grid .cart-ship__loading{font-size:12px; color:var(--tx-dim); margin:0}

    /* ============================================================= *
     *  RIGHT RAIL — TIMING TOWER                                     *
     * ============================================================= */
    .cg-tower{
      position:sticky; top:24px;
      border:1px solid var(--line-2); border-radius:var(--radius-lg);
      background:linear-gradient(180deg,rgba(32,32,39,.96),rgba(22,22,27,.97));
      box-shadow:0 40px 90px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
      overflow:hidden; isolation:isolate;
    }
    .cg-tower::before{
      content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
      -webkit-mask-image:linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
      mask-image:linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    }
    .cg-tower > *{position:relative; z-index:1}

    .cg-tower__head{
      padding:18px 20px 15px; border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
      display:flex; align-items:center; justify-content:space-between;
    }
    .cg-tower__title{
      font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-2);
      display:flex; align-items:center; gap:9px;
    }
    .cg-live{
      width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px 1px var(--mint);
      animation:cgLiveBlink 2.2s steps(1,end) infinite;
    }
    @keyframes cgLiveBlink{0%,70%{opacity:1}71%,100%{opacity:.35}}
    .cg-tower__p14{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--tx-faint)}

    .cg-tower__body{padding:16px 20px 20px}
    .cg-trow{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:12px 0; border-bottom:1px solid var(--line);
    }
    .cg-lab{
      font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-dim);
      display:flex; align-items:center; gap:8px;
    }
    .cg-lab__sub{font-family:var(--sans); font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--tx-faint)}
    .cg-val{font-family:var(--disp); font-weight:700; font-size:16px; color:var(--tx); font-variant-numeric:tabular-nums}
    .cg-val--note{
      font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:0;
      text-transform:none; color:var(--tx-dim);
    }
    .cg-val--eta{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mint-200); font-weight:700}

    .cg-total{
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
      padding:16px 0 6px;
    }
    .cg-lab--total{
      font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2);
      display:flex; flex-direction:column; gap:4px;
    }
    .cg-lab__big{font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.01em; text-transform:none; color:var(--tx)}
    .cg-totalval{
      font-family:var(--disp); font-weight:900; font-size:32px; letter-spacing:-.03em; color:var(--tx);
      font-variant-numeric:tabular-nums; line-height:.95; text-align:right; white-space:nowrap;
    }
    .cg-taxnote{
      margin:0 0 16px; font-size:11px; color:var(--tx-faint); letter-spacing:.01em;
      display:flex; align-items:center; gap:7px;
    }
    .cg-taxnote svg{width:12px; height:12px; opacity:.7; flex:none}

    /* compact START-LIGHT GANTRY over the checkout button — GREEN by default */
    .cg-gantry{ position:relative; margin:2px 0 14px; padding-top:14px; }
    .cg-gantry__bar{
      position:absolute; top:6px; left:5%; right:5%; height:3px; border-radius:2px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent);
    }
    .cg-pods{display:flex; align-items:center; justify-content:center; gap:9px}
    .cg-pod{
      flex:1 1 0; max-width:50px; min-width:0; border-radius:9px; padding:7px 0;
      background:linear-gradient(180deg,#141418,#0b0b0e);
      border:1px solid rgba(34,163,74,.32);
      box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 6px 16px -8px rgba(0,0,0,.7);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .cg-bulb{
      width:15px; height:15px; border-radius:50%;
      /* OFF by default — lights start dark on load, then count up red and flip green */
      background:radial-gradient(circle at 42% 34%, #1c1c22, #0a0a0d 70%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 4px rgba(0,0,0,.7);
      transition:box-shadow .22s ease, background .22s ease;
    }
    /* GREEN resting state — added at the end of the load flourish AND re-applied after every cart re-render (qty/remove) so it stays green with no re-animation */
    .cg-pods.is-green .cg-bulb{
      background:radial-gradient(circle at 42% 34%, #86efac, #22c55e 55%, #15803d 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 22px 4px rgba(34,197,94,.75), 0 0 46px 8px rgba(34,197,94,.34);
    }
    /* RED — only while the one-time count-up flourish plays */
    /* GREEN light-up (no red) — pods illuminate green one-by-one on load */
    .cg-pod.is-lit .cg-bulb{
      background:radial-gradient(circle at 42% 34%, #86efac, #22c55e 55%, #15803d 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 22px 4px rgba(34,197,94,.75), 0 0 46px 8px rgba(34,197,94,.34);
    }

    /* GREEN checkout button */
    .cg-checkout{
      width:100%; border:0; cursor:pointer; position:relative; overflow:hidden;
      padding:17px 20px; border-radius:var(--radius-md);
      font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:.01em; color:var(--ink);
      background:linear-gradient(100deg, var(--mint-600) 0%, var(--mint) 58%, var(--mint-300) 100%);
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      box-shadow:0 14px 36px -10px rgba(21,205,176,.6), inset 0 1px 0 rgba(255,255,255,.4);
      transition:transform .16s ease, box-shadow .16s ease, filter .2s ease;
    }
    .cg-checkout.is-armed{ animation:cgGoPulse 2.6s ease-in-out infinite; }
    @keyframes cgGoPulse{
      0%,100%{box-shadow:0 14px 36px -10px rgba(21,205,176,.55), inset 0 1px 0 rgba(255,255,255,.4)}
      50%{box-shadow:0 18px 46px -8px rgba(21,205,176,.8), inset 0 1px 0 rgba(255,255,255,.45)}
    }
    .cg-checkout:hover{transform:translateY(-2px)}
    .cg-checkout:active{transform:translateY(0)}
    .cg-checkout::after{
      content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      transform:skewX(-18deg);
    }
    .cg-checkout.is-armed::after{animation:cgGoSweep 2.6s ease-in-out infinite}
    @keyframes cgGoSweep{0%{left:-60%} 55%,100%{left:135%}}
    .cg-checkout__l{display:flex; align-items:center; gap:11px; position:relative; z-index:1; text-align:left}
    .cg-checkout__l svg{width:18px; height:18px}
    .cg-checkout__cap{font-family:var(--mono); font-size:10px; letter-spacing:.16em; opacity:.62; display:block; margin-bottom:1px; font-weight:700}
    .cg-checkout__total{font-family:var(--disp); font-weight:900; font-size:18px; letter-spacing:-.02em; position:relative; z-index:1; font-variant-numeric:tabular-nums; white-space:nowrap}

    /* express / dynamic-checkout buttons row (from payment_button) */
    .cg-express{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
    .cart-grid .cg-express .shopify-payment-button__button{
      width:100%; min-height:44px; border-radius:var(--radius-md);
      font-family:var(--sans); font-weight:700;
    }
    .cart-grid .cg-express .shopify-payment-button__more-options{
      color:var(--tx-dim); font-size:12px; text-decoration:underline;
    }

    .cg-checkout__trust{
      display:flex; align-items:center; justify-content:center; gap:8px;
      margin-top:13px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-faint);
    }
    .cg-checkout__trust svg{width:12px; height:12px; color:var(--mint); opacity:.85; flex:none}

    /* trust row */
    .cg-tower__trust{
      border-top:1px solid var(--line); margin-top:18px; padding-top:16px;
      display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    }
    .cg-tt{display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:4px 2px}
    .cg-tt__ic{
      width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
      background:rgba(21,205,176,.09); border:1px solid rgba(21,205,176,.2); color:var(--mint-200);
    }
    .cg-tt__ic svg{width:16px; height:16px}
    .cg-tt__lbl{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-dim); line-height:1.35}

    /* payment marks */
    .cg-paymarks{
      display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap;
      margin-top:15px; padding-top:15px; border-top:1px solid var(--line);
    }
    .cg-pay{
      height:24px; padding:0 9px; border-radius:5px;
      border:1px solid var(--line-2); background:rgba(255,255,255,.05);
      display:inline-flex; align-items:center; font-family:var(--disp); font-weight:900; font-size:10.5px; letter-spacing:.02em;
      color:var(--tx-2);
    }
    .cg-pay--visa{color:#f7f9ff}
    .cg-pay--mc{color:#fff; gap:0}
    .cg-pay--mc .cg-pay__o{width:11px; height:11px; border-radius:50%; display:inline-block}
    .cg-pay--mc .cg-pay__o1{background:#eb001b; margin-right:-4px}
    .cg-pay--mc .cg-pay__o2{background:#f79e1b; opacity:.9}
    .cg-pay--pp{font-style:italic}
    .cg-pay--pp b{color:#0079c1} .cg-pay--pp i{color:#00457c}
    .cg-pay--klarna{background:#ffb3c7; color:#0a0a0b; border-color:transparent}
    .cg-pay--amex{color:#4db8ff}

    /* ---------- EMPTY STATE ---------- */
    .cg-empty{
      text-align:center; padding:60px 20px;
      border:1px dashed var(--line-2); border-radius:var(--radius-lg); background:rgba(255,255,255,.015);
    }
    .cg-empty__ic{width:54px; height:54px; margin:0 auto 16px; color:var(--tx-faint)}
    .cg-empty h3{font-family:var(--disp); font-weight:800; font-size:20px; margin:0 0 8px; color:var(--tx)}
    .cg-empty p{color:var(--tx-dim); font-size:14px; margin:0 0 20px}
    .cg-empty a{
      display:inline-flex; align-items:center; gap:9px; text-decoration:none;
      font-weight:700; font-size:14px; color:var(--ink);
      background:var(--mint); padding:12px 20px; border-radius:var(--radius-pill);
      transition:.16s ease;
    }
    .cg-empty a:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(21,205,176,.6)}

    /* focus rings */
    .cart-grid button:focus-visible,
    .cart-grid a:focus-visible,
    .cart-grid select:focus-visible,
    .cart-grid input:focus-visible,
    .cart-grid textarea:focus-visible{
      outline:none; box-shadow:0 0 0 3px rgba(21,205,176,.25);
    }

    /* ---------- responsive ---------- */
    @media (max-width:900px){
      .cart-grid__wrap{grid-template-columns:1fr}
      .cg-tower{position:static}
      .cg-toolset{grid-template-columns:1fr}
    }
    /* ============================================================= *
     *  MOBILE — "PIT LANE" LAYER                                     *
     *  Same racing look, three structural fixes:
     *   1. the hero stops eating the whole first screen
     *   2. the P number moves ONTO the image, so the title gets real
     *      width and wraps to 2 lines instead of 4
     *   3. six stacked blocks collapse into three + a pinned GO bar
     * ============================================================= */
    @media (max-width:749px){

      /* ---- 1. hero becomes a header bar ---------------------------
         (padding-top is set inline by the header-clearance script) */
      .cart-grid__hero{padding-left:16px; padding-right:16px; padding-bottom:16px}
      .cg-hero__speed{display:none}
      .cg-eyebrow{font-size:10.5px; letter-spacing:.18em; margin:0 0 8px; gap:8px}
      .cg-eyebrow__tick{width:18px}
      /* chevron first, then title + count — the strapline is dropped */
      .cg-hero__row{flex-wrap:nowrap; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:12px}
      .cg-hero__row > div{display:flex; align-items:center; gap:10px; min-width:0}
      .cg-title{font-size:29px; letter-spacing:-.03em; line-height:1}
      .cg-sub{margin-top:0; gap:0}
      .cg-sub > span:not(.cg-count-pill){display:none}
      .cg-count-pill{font-size:12.5px; padding:6px 12px}
      .cg-back{width:42px; height:42px; padding:0; border-radius:50%; justify-content:center; flex:none}
      .cg-back__t{display:none}
      .cg-back svg{width:19px; height:19px}

      /* ---- 2. content starts immediately — no black gap ---- */
      .cart-grid__wrap{padding:14px 16px 124px; gap:16px}
      .cg-seyebrow{display:none} /* the hero eyebrow already says "starting grid · N" */

      /* ---- 3. the line item ---- */
      .cg-slots{gap:10px}
      .cg-slot{
        grid-template-columns:76px minmax(0,1fr);
        gap:14px; padding:14px; border-radius:14px; align-items:start;
      }
      /* repurpose the carbon hatch as the delivery-status thread on the left edge */
      .cg-slot::before{
        inset:0 auto 0 0; width:3px; border-radius:0 3px 3px 0; opacity:1;
        background:var(--mint); box-shadow:0 0 12px rgba(21,205,176,.5);
        -webkit-mask-image:none; mask-image:none;
      }
      .cg-slot--warn::before{background:var(--amber); box-shadow:0 0 12px rgba(245,166,35,.5)}
      .cg-slot--red::before{background:var(--red); box-shadow:0 0 12px rgba(229,72,77,.5)}
      .cg-slot:hover{transform:none}

      /* rail and media share one grid cell → the P number sits ON the tile */
      /* align-self:start overrides the desktop centring — the tile must sit
         beside the title, not drift to the middle of a tall card */
      .cg-media{grid-column:1; grid-row:1; align-self:start; width:76px; height:76px; border-radius:11px; padding:8px}
      .cg-rail{
        grid-column:1; grid-row:1; z-index:3;
        display:block; align-self:start; justify-self:start;
        margin:5px 0 0 5px; padding:0; border-right:0;
      }
      .cg-rail::after{display:none}
      .cg-rail__tag{display:none}
      .cg-rail__num{
        display:block; font-size:12.5px; line-height:1; letter-spacing:0; color:var(--tx);
        background:rgba(8,8,10,.82); border:1px solid rgba(255,255,255,.18); border-radius:6px;
        padding:4px 7px;
        -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
      }

      .cg-detail{grid-column:2; grid-row:1}
      .cg-detail__top{gap:10px}
      .cg-eyebrow-sm{font-size:10.5px; letter-spacing:.13em; margin-bottom:6px}
      .cg-name{
        font-size:17px; line-height:1.3;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      }
      .cg-meta{gap:8px; margin-top:10px}
      .cg-variant{font-size:11.5px; padding:4px 10px}
      /* same scale as the variant/stock pills beside it — the value is emphasised by
         weight, not by a size jump, so the chip row reads as one row */
      .cg-size{padding:5px 10px 5px 9px; gap:7px}
      .cg-size__k{font-size:10px}
      .cg-size__v{font-size:13.5px}
      .cg-stock{font-size:11.5px; padding:5px 10px 5px 8px}
      .cg-stock__led{width:8px; height:8px}
      .cg-del{width:34px; height:34px; margin:-4px -4px 0 0}
      .cg-del:hover{transform:none}
      .cg-del svg{width:17px; height:17px}

      /* bottom: delivery on its own line, then stepper left / price right.
         No divider and no second pill here — the eta drops to plain text so the
         card reads as one cluster instead of a stack of boxes. */
      .cg-detail__bot{
        display:grid; grid-template-columns:1fr auto; align-items:center;
        gap:9px 12px; margin-top:10px; padding-top:0; border-top:0;
      }
      .cg-controls{display:contents}
      .cg-eta{
        grid-column:1 / -1; grid-row:1; justify-self:start;
        font-size:11.5px; padding:0; gap:7px; background:none; border:0;
      }
      .cg-eta__ico{width:15px; height:15px}
      /* on-request rows: the pill above already reads "Delivery on request",
         so the row keeps only the actionable "ask us" link */
      .cg-slot--red .cg-eta__lbl{display:none}
      .cg-stepper{grid-column:1; grid-row:2; justify-self:start}
      .cg-stepper button{width:36px; height:38px; font-size:20px}
      .cg-qty{min-width:40px; width:40px; font-size:15px}
      .cg-priceblock{grid-column:2; grid-row:2; text-align:right; min-width:0}
      .cg-lineprice{font-size:20px}
      .cg-unitprice{font-size:10.5px; margin-top:4px}

      /* ---- 4. fewer, flatter blocks ---- */
      .cg-continue{margin-top:12px}
      .cg-linkbtn{font-size:14.5px; padding:9px 2px}
      .cg-linkbtn svg{width:17px; height:17px}
      .cg-secure{font-size:10.5px; letter-spacing:.09em}
      .cg-toolset{margin-top:12px; gap:10px}
      .cg-tcard{padding:0 14px}
      .cg-tcard__head{padding:16px 0; margin-bottom:0; font-size:11px; letter-spacing:.14em}
      .cg-tcard__head svg{width:17px; height:17px}
      .cg-tcard__opt{font-size:10px}
      .cg-note{font-size:15px}
      .cg-noted[open] > summary{margin-bottom:0; padding-bottom:11px}
      .cg-noted[open]{padding-bottom:14px}

      /* .cg-tower has isolation:isolate, so it owns the stacking context the
         pinned .cg-go lives in. Without a z-index of its own it paints BELOW
         .cg-slot > * (z-index:1) and the cards bleed through the bar. */
      .cg-tower{border-radius:16px; position:relative; z-index:5}
      .cg-tower__head{padding:15px 15px 13px}
      .cg-tower__title{font-size:12px}
      .cg-tower__body{padding:13px 15px 17px}
      .cg-trow{padding:12px 0}
      .cg-lab{font-size:12.5px}
      .cg-lab__sub{font-size:12px}
      .cg-val{font-size:17px}
      /* the shipping estimator summary row */
      .cart-grid .cart-ship__sum > span{font-size:11.5px}
      .cart-grid .cg-field label{font-size:9.5px}
      .cart-grid .cg-field select,
      .cart-grid .cg-field input[type=text]{font-size:15px; height:44px}
      .cg-btn-calc{height:44px; font-size:14px}
      .cart-grid .cart-ship__list li{font-size:14px}
      .cg-total{padding:13px 0 4px}
      .cg-lab--total{align-items:flex-start; gap:2px; font-size:12px}
      .cg-lab__big{font-size:15px}
      .cg-totalval{font-size:26px}
      .cg-taxnote{margin-bottom:0; font-size:12px}
      .cg-taxnote svg{width:14px; height:14px}

      /* trust row → a single quiet line */
      .cg-tower__trust{
        display:flex; flex-wrap:wrap; justify-content:center;
        gap:6px 14px; margin-top:14px; padding-top:13px;
      }
      .cg-tt{flex-direction:row; gap:7px; padding:0}
      .cg-tt__ic{width:24px; height:24px; border-radius:7px}
      .cg-tt__ic svg{width:13px; height:13px}
      .cg-tt__lbl{font-size:9.5px}
      .cg-checkout__trust{font-size:11px}
      .cg-paymarks{margin-top:12px; padding-top:12px}

      /* ---- 5. GO bar pinned to the bottom ---- */
      .cg-go{
        position:fixed; left:0; right:0; bottom:0; z-index:200;
        display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 14px;
        padding:9px 14px calc(10px + env(safe-area-inset-bottom));
        background:linear-gradient(180deg, rgba(14,14,18,.93), rgba(8,8,10,.985));
        -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
        border-top:1px solid var(--line-2);
        box-shadow:0 -18px 40px -16px rgba(0,0,0,.9);
      }
      /* the global back-to-top FAB sits exactly where the checkout button now is */
      .back-to-top{bottom:calc(112px + env(safe-area-inset-bottom))}
      .cg-go__sum{display:flex; flex-direction:column; grid-column:1; grid-row:2; min-width:0}
      .cg-go__lab,
      .cg-go__note{
        font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-dim);
      }
      .cg-go__val{
        font-family:var(--disp); font-weight:900; font-size:25px; letter-spacing:-.03em;
        color:var(--tx); font-variant-numeric:tabular-nums; line-height:1.15; white-space:nowrap;
      }

      /* start lights flatten into a thin row above the button */
      .cg-gantry{grid-column:1 / -1; grid-row:1; margin:0 0 7px; padding-top:0}
      .cg-gantry__bar{display:none}
      .cg-pods{gap:7px}
      .cg-pod{max-width:34px; padding:3px 0; border-radius:6px}
      .cg-bulb{width:9px; height:9px}

      .cg-checkout{
        grid-column:2; grid-row:2; width:auto; justify-content:center; gap:9px;
        padding:15px 16px; border-radius:12px; font-size:16.5px;
      }
      .cg-checkout__l svg{width:20px; height:20px}
      .cg-checkout:hover{transform:none}
      .cg-checkout__cap{display:none}          /* "Green light" caption — no room */
      .cg-checkout__total{display:none}        /* the total already sits left of the button */
      .cg-checkout::after{display:none}        /* skip the sweep on a pinned bar */

      /* ========================================================= *
       *  DRAWER LOOK — the /cart page speaks the drawer's language.
       *
       *  The page used to be its own world: a racetrack hero, an outlined
       *  display headline, P positions, start lights and a timing tower, while
       *  the drawer next to it is a quiet stack of compact glass cards. Two
       *  languages for one cart. This layer drops the paddock furniture and
       *  restates the page in the drawer's terms — same 13px card, same 3px
       *  status thread, same chips, same floating glass pay panel.
       *
       *  The values below are deliberately copied from the drawer's mobile
       *  block in cart-drawer.liquid. If one side is retuned, retune both.
       *
       *  Last block inside the media query on purpose — it has to win against
       *  the pit-lane rules above it, which share its specificity.
       * ========================================================= */

      /* ---- 1. hero → the drawer's one-line header ---- */
      .cart-grid__hero{
        padding:12px 16px 10px; min-height:0; background:none;
        border-bottom:1px solid rgba(255,255,255,.09);
      }
      .cg-hero__bg,
      .cg-hero__speed,
      .cg-eyebrow,
      .cg-seyebrow{display:none}
      .cg-hero__row{gap:10px; align-items:center}
      .cg-title{font-size:19px; font-weight:300; letter-spacing:-.015em; line-height:1.05; -webkit-text-stroke:0; color:var(--tx)}
      .cg-title b,
      .cg-title strong{font-weight:500; color:#fff}
      /* the outlined half of the headline is a display trick — at 19px it just reads as
         a rendering glitch, so it becomes solid like the drawer's "Your Cart" */
      .cg-title__dim{-webkit-text-stroke:0; color:#fff; font-weight:500}
      .cg-sub{margin:0}
      .cg-count-pill{
        font-size:11px; font-weight:700; min-width:21px; height:20px; padding:0 7px;
        color:#04211c; background:linear-gradient(180deg,#93ebd7,#15cdb0);
        box-shadow:0 6px 16px -6px rgba(21,205,176,.7);
      }
      .cg-back{width:32px; height:32px}

      /* ---- 2. the line item IS the drawer card ---- */
      .cart-grid__wrap{padding:8px 0 118px; gap:0}
      .cg-slots{gap:8px}
      .cg-slot{
        grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:start;
        margin:0 16px; padding:11px 13px 11px 15px;
        border:1px solid rgba(255,255,255,.09); border-radius:13px;
        background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
        box-shadow:none; overflow:hidden;
      }
      .cg-slot::before{inset:12px auto 12px 0; width:3px; border-radius:0 3px 3px 0}
      /* the drawer has no P positions — the coloured thread carries the status alone */
      .cg-rail{display:none}
      .cg-media{
        width:56px; height:56px; padding:0; border-radius:0;
        background:none; box-shadow:none; align-self:start;
      }
      .cg-media::after{display:none}
      .cg-media img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}

      .cg-eyebrow-sm{font-size:9.5px; letter-spacing:.16em; margin-bottom:4px; color:var(--tx-faint)}
      .cg-name{font-size:13px; line-height:1.26; font-weight:400}
      .cg-detail__top{gap:6px}
      /* the drawer card is 107px tall; this one carries a size chip and a delivery chip
         more, so the gaps do the shrinking instead of the type */
      .cg-slot{padding:10px 12px 10px 14px}

      /* ---- 3. variant / size / stock / eta as the drawer's chips ---- */
      .cg-meta{gap:4px; margin-top:6px; align-items:center}
      .cg-variant,
      .cg-size,
      .cg-stock,
      .cg-eta{
        border:1px solid rgba(255,255,255,.09); border-radius:999px;
        padding:3px 7px; font-size:9.5px; line-height:1.4; white-space:nowrap;
        background:none;
      }
      .cg-size{gap:5px}
      .cg-size__k{font-size:8.5px; letter-spacing:.14em}
      .cg-size__v{font-size:10px; font-weight:700}
      .cg-stock__led{width:5px; height:5px; box-shadow:0 0 7px -1px currentColor}
      .cg-eta{gap:5px; margin-top:0; color:var(--tx-2)}
      .cg-eta__ico{display:none}

      /* ---- 4. price on the title row, stepper and ✕ like the drawer ---- */
      .cg-detail__bot{margin-top:6px; gap:5px 10px; align-items:center}
      /* row 1 of .cg-detail__bot stays the eta chip (set above by the pit-lane layer and
         spanning both columns) — the controls go on row 2, stepper left / price right. */
      .cg-stepper{
        grid-column:1; grid-row:2; justify-self:start;
        border:1px solid rgba(255,255,255,.09); border-radius:999px;
        background:rgba(255,255,255,.04); box-shadow:none; padding:1px; gap:0;
      }
      .cg-stepper button{width:19px; height:20px; font-size:13px; color:var(--tx-2)}
      .cg-qty{min-width:18px; width:18px; font-size:12px; border:0; background:none}
      .cg-priceblock{grid-column:2; grid-row:2; align-self:center}
      .cg-lineprice{font-size:14px; font-weight:700}
      .cg-unitprice{display:none}
      .cg-del{
        width:20px; height:20px; margin:0; border:0; background:none;
        color:var(--tx-faint); align-self:start; justify-self:end;
      }
      .cg-del svg{width:11px; height:11px}

      /* ---- 5. note + shipping: the drawer's two side-by-side boxes ---- */
      .cg-continue{margin:10px 16px 0}
      .cg-toolset{
        margin:12px 16px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px;
      }
      .cg-tcard{
        border:1px solid rgba(255,255,255,.09); border-radius:12px;
        background:rgba(255,255,255,.02); padding:0 11px; min-width:0;
      }
      .cg-tcard--span,
      .cg-tcard[open]{grid-column:1 / -1}
      .cg-tcard__head{padding:9px 0; font-size:11px; letter-spacing:.06em; text-transform:none; gap:6px}
      .cg-tcard__head svg{width:14px; height:14px}

      /* ---- 6. "two zones": the summary is its own card ----
         The page has the vertical room the drawer never had, so the numbers stop
         being a squeezed line above the button and become a proper little invoice
         in the same glass card as the products: subtotal, shipping, total, tax.
         The markup for all of it already existed in the tower — this only re-dresses
         it. Note there is deliberately no "VAT 19% = €x" row: Liquid exposes no cart
         tax amount, and the shop serves 137 markets, so a hard-coded rate would be
         wrong for most of them. The market-aware tax-customs-note keeps that job. */
      .cg-tower{
        margin:16px 16px 0; padding:14px 15px 15px;
        border:1px solid var(--line); border-radius:15px;
        background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
        box-shadow:none;
      }
      .cg-tower::before{display:none}
      .cg-tower__head{
        padding:0; margin-bottom:9px; border-bottom:0; background:none; display:block;
      }
      .cg-tower__title{display:none}     /* "Timing Tower" nameplate + live dot */
      .cg-tower__p14{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint)}
      .cg-tower__body{padding:0}

      /* rows read as a quiet invoice, not as a scoreboard */
      .cg-trow{padding:6px 0; border-bottom:0}
      .cg-lab{font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--tx-2); gap:6px}
      .cg-lab__sub{font-size:12px; color:var(--tx-faint)}
      .cg-val{font-family:var(--sans); font-size:12px; font-weight:500}
      /* the shipping estimator sits exactly where a "Shipping" line would — so it
         stays a row, just one that can actually calculate */
      .cg-ship--tower{border:0; border-radius:0; background:none; margin:0}
      .cg-ship--tower > summary{padding:6px 0; gap:8px}
      /* the base rule renders this label in uppercase mono like a pit-board readout —
         inside the summary card it has to read like the "Subtotal" label next to it */
      .cart-grid .cg-ship--tower .cart-ship__sum > span{
        font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--tx-2);
      }
      .cart-grid .cg-ship--tower .cart-ship__sum > svg:not(.cart-ship__chev){width:14px; height:14px; margin-right:6px}

      /* the express buttons are real payment options, so they stay — but three
         full-size brand slabs would swallow the invoice they belong to. A divider
         marks where the numbers end and paying begins. */
      .cg-express{margin-top:13px; padding-top:13px; border-top:1px solid var(--line); gap:7px}
      .cart-grid .cg-express .shopify-payment-button__button{min-height:42px; border-radius:11px}
      .cg-checkout__trust{margin-top:10px; font-size:9.5px}
      .cg-paymarks{margin-top:11px; padding-top:11px}

      .cg-total{margin-top:8px; padding:12px 0 0; border-top:1px solid var(--line); align-items:baseline}
      .cg-lab--total{font-family:var(--sans); font-size:10px; letter-spacing:0; text-transform:none; gap:2px; color:var(--tx-faint)}
      .cg-lab__big{font-size:12px; font-weight:500; color:var(--tx-2)}
      .cg-totalval{font-size:22px; font-weight:700; line-height:1.1}
      .cg-taxnote{margin:9px 0 0; font-size:10px}
      .cg-taxnote svg{width:12px; height:12px; flex:none}
      .cg-tt__ic{background:none; border:0; width:auto; height:auto; color:var(--mint-200)}
      .cg-tt__ic svg{width:12px; height:12px}
      .cg-tt__lbl{font-size:9px}
      .cg-tower__trust{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.045)}

      /* ---- 7. pay bar = the drawer's floating glass panel ---- */
      /* start lights belong to the paddock, not to a quiet cart */
      .cg-gantry{display:none}
      .cg-go{
        left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom));
        grid-template-columns:1fr; gap:0;
        padding:12px 14px 13px; border-radius:18px;
        background:rgba(10,10,13,.78); border:1px solid rgba(255,255,255,.1);
        -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
        box-shadow:0 -10px 40px -22px rgba(21,205,176,.45), 0 18px 40px -24px rgba(0,0,0,.9);
      }
      .back-to-top{bottom:calc(104px + env(safe-area-inset-bottom))}
      /* the total moved into the summary card above — repeating it on the bar was only
         ever a workaround for not having one. The bar is now purely the action.
         (.cg-go__val keeps its data-cart-subtotal hook; the JS updates every
         occurrence, so hiding it costs nothing.) */
      .cg-go__sum{display:none}
      .cg-checkout{
        grid-column:1; grid-row:1; width:100%; height:47px; padding:0 16px; border-radius:13px;
        font-size:14.5px; font-weight:700; box-shadow:none;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .cart-grid *{animation:none !important; transition:none !important}
      .cg-hero__bg{transform:scale(1.06)}
    }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:55) */
.collection { padding-block: var(--space-12); }
    .collection .container--wide { max-width: none; }
    .collection__head { margin-bottom: var(--space-6); }
    .collection__head h1 { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 700; margin: var(--space-1) 0 0; letter-spacing: -0.01em; }
    .catfilter__all { display: block; font-weight: 800; font-size: .95rem; color: var(--ink); text-decoration: none; padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--neutral-100); margin-bottom: var(--space-2); }
    .catfilter__all:hover, .catfilter__all.is-active { color: var(--mint-700); }
    .collection__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
    .collection__main { min-width: 0; }
    @media (min-width: 900px) {
      .collection__layout { grid-template-columns: 290px 1fr; align-items: start; }
      /* Sticky sidebar is its OWN scroll region: when the filter groups are taller than the
         viewport, the wheel scrolls the filters (not the whole page). data-lenis-prevent on the
         <aside> stops Lenis' smooth-scroll from hijacking the wheel here; overscroll-behavior
         keeps the scroll contained. Short filter lists don't overflow → the page scrolls as before. */
      .collection__sidebar { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
      .collection__sidebar::-webkit-scrollbar { width: 8px; }
      .collection__sidebar::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 8px; }
      .collection__sidebar::-webkit-scrollbar-thumb:hover { background: var(--neutral-300); }
    }

    /* Mobile filter toggle — eingeklappt per Default (JS unten), tippen zum Aufklappen */
    .filters__toggle { list-style: none; cursor: pointer; font-weight: 700; border: 1px solid var(--neutral-300); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: center; background: #fff; transition: border-color var(--dur-fast) var(--ease-out); }
    .filters__toggle:hover { border-color: var(--mint-400); }
    .filters__toggle::-webkit-details-marker { display: none; }
    .filters__toggle-lbl { display: inline-flex; align-items: center; gap: var(--space-2); }
    .filters__toggle-lbl .cat-icon { width: 18px; height: 18px; color: var(--mint-600); flex: none; }
    .filters__toggle::after { content: "▾"; color: var(--neutral-400); font-size: .9em; }
    .filters[open] > .filters__toggle::after { content: "▴"; color: var(--mint-600); }
    .filters__body { margin-top: var(--space-4); }
    @media (min-width: 900px) { .filters__toggle { display: none; } .filters__body { margin-top: 0; } }

    /* Category nav — collapsible group per overtopic */
    .catfilter { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-3); }
    .catfilter__grp { border-top: 1px solid var(--neutral-100); }
    .catfilter__grp:first-of-type { border-top: 0; }
    .catfilter__grp-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .96rem; color: var(--ink); padding: var(--space-3) 0; white-space: nowrap; }
    .catfilter__grp-sum::-webkit-details-marker { display: none; }
    .catfilter__grp-sum .cat-icon { width: 18px; height: 18px; color: var(--mint-600); flex: none; }
    .catfilter__grp-sum::after { content: "▾"; margin-left: auto; color: var(--neutral-400); font-size: .78rem; }
    .catfilter__grp[open] > .catfilter__grp-sum::after { content: "▴"; }
    .catfilter__grp[open] > .catfilter__grp-sum { color: var(--mint-700); }
    .catfilter__sub { list-style: none; margin: 0 0 var(--space-3); padding: 0 0 0 calc(18px + var(--space-2)); }
    .catfilter__sub a { display: block; font-size: .88rem; color: var(--neutral-700); text-decoration: none; padding: 4px 0; }
    .catfilter__sub a:hover { color: var(--mint-700); }
    .catfilter__sub a.is-active { color: var(--mint-700); font-weight: 600; }
    .catfilter__sub-all { font-weight: 600; color: var(--ink); }
    .catfilter__gear { display: none; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; padding: var(--space-3) 0; border-top: 1px solid var(--neutral-100); margin-top: var(--space-1); }
    .catfilter__gear:hover, .catfilter__gear.is-active { color: var(--mint-700); }
    .catfilter__clear { display: inline-block; margin-top: var(--space-2); font-size: .8rem; color: var(--color-error); text-decoration: none; }

    /* Toolbar + grid */
    .collection__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-6); flex-wrap: wrap; }
    .collection__sort select { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); background: #fff; }
    /* .collection__grid is defined once globally in base.css (shared by collection + search). */
    .collection__empty { color: var(--neutral-500); grid-column: 1/-1; }
    .pagination { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-12); }
    .pagination [aria-current="page"] { font-weight: 800; color: var(--mint-700); }

    /* ---- Desktop: kompaktere Seitenabstände ---- */
    @media (min-width: 750px) {
      .collection { padding-block: var(--space-6) var(--space-8); }   /* oben + unten (zum Footer) enger */
      .collection__head { margin-bottom: var(--space-4); }            /* „Home / Helmets"-Block enger */
      .collection__bar { margin-bottom: var(--space-3); }             /* „554 products" näher an die Produkte */
      .pagination { margin-top: var(--space-8); }                     /* weniger Luft vor dem Footer */
    }
    /* ---- Mobile: kompakter Kopf + eine aufgeräumte Filter/Sortieren-Toolbar (H&M-Stil) ---- */
    @media (max-width: 899px) {
      .collection { padding-block: var(--space-3) var(--space-6); }
      /* Kopf: kein doppeltes „Home / Helmets", kleinerer Titel, „… products" weg */
      .collection__head { margin-bottom: var(--space-3); }
      .collection__head .breadcrumb { display: none; }
      .collection__head h1 { font-size: 1.05rem; margin: 0; letter-spacing: 0; }
      .collection__count { display: none; }
      /* Filter (links) + Sortieren (rechts) in EINER Zeile statt zwei einzelnen Blöcken */
      .collection__layout { position: relative; row-gap: var(--space-3); }
      .filters__toggle { display: inline-flex; width: auto; justify-content: flex-start; gap: var(--space-2); padding: 7px var(--space-4); border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600; }
      .collection__bar { position: absolute; top: 0; right: 0; margin: 0; width: auto; z-index: 5; }
      .ipsort__trigger { padding: 5px var(--space-2) 5px var(--space-3); }
      .ipsort__label { font-size: .64rem; }
      .ipsort__value { font-size: .68rem; }
      .ipsort__chev { width: 13px; height: 13px; }
      .pagination { margin-top: var(--space-6); }
    }

    /* ---- „Sort by" — animiertes Inter-Pace-Dropdown (ersetzt das native Select via JS; Fallback bleibt) ---- */
    .ipsort { position: relative; display: inline-block; }
    .ipsort__native { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
    .ipsort__trigger, .ipsort__menu { display: none; }
    .ipsort.is-enhanced .ipsort__native { display: none; }
    .ipsort.is-enhanced .ipsort__trigger { display: inline-flex; }
    .ipsort.is-enhanced .ipsort__menu { display: block; }
    .ipsort__trigger { align-items: center; gap: var(--space-2); font: inherit; cursor: pointer; background: #fff; color: var(--ink); border: 1px solid var(--neutral-300); border-radius: var(--radius-pill); padding: 7px var(--space-3) 7px var(--space-4); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
    .ipsort__trigger:hover { border-color: var(--mint-400); }
    .ipsort.is-open .ipsort__trigger { border-color: var(--mint-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-500) 18%, transparent); }
    .ipsort__label { color: var(--neutral-500); font-size: .82rem; font-weight: 600; }
    .ipsort__value { font-size: .88rem; font-weight: 700; }
    .ipsort__chev { width: 15px; height: 15px; color: var(--mint-600); flex: none; transition: transform var(--dur-base) var(--ease-out); }
    .ipsort.is-open .ipsort__chev { transform: rotate(180deg); }
    .ipsort__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 240px; margin: 0; padding: var(--space-2); list-style: none; background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); box-shadow: 0 20px 44px -14px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.06); transform-origin: top right; opacity: 0; transform: translateY(-10px) scale(.96); pointer-events: none; transition: opacity .18s var(--ease-out), transform .28s cubic-bezier(.16, 1, .3, 1); }
    .ipsort.is-open .ipsort__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .ipsort__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; color: var(--neutral-700); cursor: pointer; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .ipsort.is-open .ipsort__opt { opacity: 1; transform: translateY(0); transition: opacity .26s var(--ease-out), transform .3s cubic-bezier(.16, 1, .3, 1), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .ipsort.is-open .ipsort__opt:nth-child(1) { transition-delay: .02s; }
    .ipsort.is-open .ipsort__opt:nth-child(2) { transition-delay: .05s; }
    .ipsort.is-open .ipsort__opt:nth-child(3) { transition-delay: .08s; }
    .ipsort.is-open .ipsort__opt:nth-child(4) { transition-delay: .11s; }
    .ipsort.is-open .ipsort__opt:nth-child(5) { transition-delay: .14s; }
    .ipsort.is-open .ipsort__opt:nth-child(6) { transition-delay: .17s; }
    .ipsort.is-open .ipsort__opt:nth-child(7) { transition-delay: .20s; }
    .ipsort.is-open .ipsort__opt:nth-child(8) { transition-delay: .23s; }
    .ipsort.is-open .ipsort__opt:nth-child(9) { transition-delay: .26s; }
    .ipsort__opt:hover { background: var(--mint-50); color: var(--ink); }
    .ipsort__opt.is-selected { color: var(--mint-700); font-weight: 700; }
    .ipsort__opt.is-selected::after { content: "✓"; color: var(--mint-600); font-weight: 800; }
    @media (prefers-reduced-motion: reduce) { .ipsort__menu, .ipsort__opt, .ipsort__chev { transition: none; } .ipsort.is-open .ipsort__opt { opacity: 1; transform: none; } }

    /* ---- Filter als Vollbild-Overlay am Handy (H&M-Stil) ---- */
    .filters__ovl-head, .filters__ovl-foot { display: none; }
    body.filters-open { overflow: hidden; }
    @media (max-width: 899px) {
      .filters[open] .filters__panel { position: fixed; inset: 0; z-index: 300; background: #fff; display: flex; flex-direction: column; }
      .filters[open] .filters__ovl-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: var(--space-4) 1.25rem; border-bottom: 1px solid var(--neutral-200); }
      .filters__ovl-title { font-size: 1.05rem; font-weight: 700; }
      .filters__ovl-x { background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ink); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; margin-right: calc(-1 * var(--space-2)); }
      .filters[open] .filters__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: var(--space-4) 1.25rem var(--space-6); }
      .filters[open] .filters__ovl-foot { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; padding: var(--space-3) 1.25rem calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--neutral-200); background: #fff; }
      .filters__ovl-clear { flex: 0 0 auto; color: var(--ink); font-size: .85rem; text-decoration: underline; white-space: nowrap; }
      .filters__ovl-apply { flex: 1 1 auto; background: var(--mint-500); color: var(--ink); border: 0; border-radius: var(--radius-md); padding: 13px; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
      .filters__ovl-apply:active { background: var(--mint-600); }

      /* Facetten im Overlay flach & aufgeräumt (Desktop-Sidebar bleibt unberührt) */
      .filters[open] .facets { border: 0; box-shadow: none; border-radius: 0; padding: 0; }
      .filters[open] .facets__head { display: none; }                 /* doppelter „Filters"-Titel weg */
      .filters[open] .facets__active { margin: 0 0 var(--space-3); }
      .filters[open] .facets__group:first-of-type { border-top: 0; }
      .filters[open] .facets__group > summary { padding: 14px 0; gap: 12px; font-size: .95rem; font-weight: 600; color: #1a1a1a; }
      .filters[open] .facets__caret { color: var(--neutral-400); width: 16px; height: 16px; }
      /* Icon-Liste: kleines Mint-Icon je Gruppe (Variante 4) */
      .filters[open] .facets__ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mint-50, #e6f7f3); color: var(--mint-700); flex: none; }
      .filters[open] .facets__ico svg { width: 16px; height: 16px; }
      .filters[open] .facets__lbl { flex: 1; margin-left: 0; }
      .filters[open] .facets__body { padding: 2px 0 var(--space-4) 42px; }
      .filters[open] .facets__opt { padding: 9px 0; font-size: .9rem; gap: 11px; color: #1a1a1a; }
      .filters[open] .facets__opt-lbl { color: #1a1a1a; }
      .filters[open] .facets__opt-cnt { color: #aaa; font-size: .78rem; }
      .filters[open] .facets__box { width: 20px; height: 20px; border-radius: 6px; border-color: #cfcfcf; }
      .filters[open] .facets__opt input:checked + .facets__box { background: var(--mint-500); border-color: var(--mint-500); }
      .filters[open] .facets__search { padding: 11px 12px; border-radius: 10px; font-size: .9rem; margin-bottom: var(--space-3); background: var(--neutral-50, #f7f7f8); border-color: #e3e3e3; }
      .filters[open] .facets__list { max-height: none; }              /* Vollbild scrollt komplett */
      .filters[open] .facets__price input { padding: 11px 12px; border-radius: 10px; background: var(--neutral-50, #f7f7f8); }
      .filters[open] .facets__apply { background: var(--mint-500); color: var(--ink); border-radius: 10px; padding: 11px 16px; }

      /* Parts-Kategorie-Tree im Overlay an die Icon-Liste angleichen (Mint-Kreis-Icons, gleiche Schrift, keine Karte) */
      .filters[open] .catfilter { border: 0; box-shadow: none; border-radius: 0; padding: 0; background: transparent; }
      .filters[open] .catfilter__all { display: block; font-weight: 600; font-size: 1rem; color: #1a1a1a; padding: 14px 0; border-bottom: 1px solid var(--neutral-100); margin: 0; }
      .filters[open] .catfilter__grp { border-top: 0; border-bottom: 1px solid var(--neutral-100); }
      .filters[open] .catfilter__grp-sum { font-weight: 600; font-size: 1rem; color: #1a1a1a; padding: 14px 0; gap: 12px; }
      .filters[open] .catfilter__grp-sum .cat-icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--mint-50, #e6f7f3); color: var(--mint-700); box-sizing: border-box; }
      .filters[open] .catfilter__grp-sum::after { color: var(--neutral-400); font-size: .85rem; }
      .filters[open] .catfilter__sub { padding-left: 42px; }
      .filters[open] .catfilter__gear { display: none; }
    }

    /* ---- Grid-Umschalter (2 Spalten mit Text ⇄ 3 Spalten nur Bilder), nur am Handy ---- */
    .grid-toggle { display: none; }
    .grid-toggle__ico--to2 { display: none; }
    body.grid-dense .grid-toggle__ico--to3 { display: none; }
    body.grid-dense .grid-toggle__ico--to2 { display: inline-block; }
    @media (max-width: 899px) {
      .grid-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--ink); }
      .grid-toggle__ico { width: 19px; height: 19px; display: block; }
      body.grid-dense .collection__grid { grid-template-columns: 1fr 1fr 1fr; }
      body.grid-dense .product-card__vendor,
      body.grid-dense .product-card__link,
      body.grid-dense .product-card__swatches,
      body.grid-dense .product-card__add2,
      body.grid-dense .product-card__foot { display: none; }
    }

    /* ---- Toolbar-Feinschliff (bewusst am Ende → liegt über den Basisregeln) ---- */
    @media (max-width: 899px) {
      /* Filter-Button: minimal — nur Icon (Mint) + Text, kein Rahmen, kein Pfeil */
      .filters__toggle { display: inline-flex; width: auto; justify-content: center; gap: 7px; padding: 6px 2px; border: 0; border-radius: 0; background: none; font-size: .9rem; font-weight: 600; box-shadow: none; }
      .filters__toggle::after { display: none; }
      .filters__toggle-lbl { gap: 7px; }
      .filters__toggle-lbl .cat-icon { width: 18px; height: 18px; color: var(--mint-600); }
      /* Rechts: Grid-Umschalter + Sortieren als EIN sauberes Segment-Pill */
      .collection__bar { gap: 0; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); background: #fff; align-items: stretch; }
      .grid-toggle { padding: 0 11px; border-right: 1px solid var(--neutral-200); border-radius: 0; color: var(--ink); }
      .grid-toggle__ico { width: 18px; height: 18px; }
      .ipsort { display: flex; }
      .ipsort__trigger { border: 0; border-radius: var(--radius-pill); padding: 7px 12px; }
      .ipsort__label { font-size: .64rem; }
      .ipsort__value { font-size: .68rem; }
      .ipsort__chev { width: 13px; height: 13px; }
    }

    /* ---- Mobile Schnellfilter-Chips (Parts, wenn Kategorie/Bike aktiv) ---- */
    .qfilter { display: none; }
    @media (max-width: 899px) {
      .qfilter.is-on { display: block; margin: 0 0 var(--space-4); }
      .qfilter__bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
      .qfilter__bar::-webkit-scrollbar { display: none; }
      .qfilter__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--neutral-300); border-radius: var(--radius-pill); background: #fff; padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 600; color: #1a1a1a; cursor: pointer; }
      .qfilter__chip.is-active { border-color: var(--mint-500); background: var(--mint-50, #e6f7f3); }
      .qfilter__chip.is-open { border-color: var(--mint-500); }
      .qfilter__cnt { background: var(--mint-500); color: #04342c; font-size: .62rem; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
      .qfilter__chev { width: 13px; height: 13px; color: var(--neutral-400); transition: transform .2s var(--ease-out); }
      .qfilter__chip.is-open .qfilter__chev { transform: rotate(180deg); }
      .qfilter__panel { margin-top: 8px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: #fff; padding: 6px 14px; max-height: 48vh; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,.10); }
      .qfilter__panel[hidden] { display: none; }
      .qfilter__opt { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; font-size: .92rem; color: #1a1a1a; }
      .qfilter__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
      .qfilter__box { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #cfcfcf; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
      .qfilter__opt input:checked + .qfilter__box { background: var(--mint-500); border-color: var(--mint-500); }
      .qfilter__opt input:checked + .qfilter__box::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
      .qfilter__lbl { flex: 1; }
      .qfilter__oc { color: #aaa; font-size: .78rem; }
      .qfilter__price { display: flex; align-items: flex-end; gap: 8px; padding: 6px 0; }
      .qfilter__price label { flex: 1; font-size: .74rem; color: var(--neutral-500); display: flex; flex-direction: column; gap: 3px; }
      .qfilter__price input { font: inherit; padding: 9px 10px; border: 1px solid var(--neutral-300); border-radius: 8px; width: 100%; }
      .qfilter__apply { background: var(--mint-500); color: var(--ink); border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
    }

    /* ---- Garage-Banner am Handy kompakt & minimalistisch ---- */
    @media (max-width: 749px) {
      .collection .garage-banner { margin: var(--space-2) 0; padding: 9px 12px; gap: 5px var(--space-3); border-radius: var(--radius-md); }
      .collection .garage-banner__bike { width: 100%; font-size: .8rem; }
      .collection .garage-banner__bike strong { font-weight: 600; }
      .collection .garage-banner__toggle { font-size: .78rem; gap: 7px; }
      .collection .garage-banner__change { padding: 6px 13px; font-size: .78rem; }
      .collection .garage-banner--prompt { font-size: .82rem; }
      .collection .garage-banner__btn { padding: 6px var(--space-3); font-size: .78rem; }
    }

    /* ---- Rider-ID fit banner ---- */
    .rider-fit { padding: 10px 14px; gap: var(--space-2) var(--space-3); border-color: var(--mint-200); background: linear-gradient(100deg, var(--mint-50), #fff 72%); box-shadow: 0 3px 14px -8px rgba(15,167,143,.45); }
    .rider-fit__ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, var(--mint-400), var(--mint-600)); box-shadow: 0 3px 9px -3px rgba(15,167,143,.7); }
    .rider-fit__ico svg { width: 19px; height: 19px; }
    .rider-fit__head { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .rider-fit__head strong { font-weight: 700; font-size: .95rem; color: var(--ink); letter-spacing: -.01em; }
    .rider-fit__sub { font-size: .73rem; color: var(--mint-700); font-weight: 600; }
    .rider-fit__pills { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .rider-fit__pill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--neutral-700); background: #fff; border: 1px solid var(--mint-200); border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap; }
    .rider-fit__pill strong { color: var(--ink); font-weight: 700; }
    .rider-fit__dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.16); flex: none; }
    .rider-fit__off { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--mint-700); background: #fff; border: 1.5px solid var(--mint-200); border-radius: var(--radius-pill); padding: 6px 13px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s; }
    .rider-fit__off svg { width: 14px; height: 14px; }
    .rider-fit__off:hover { background: var(--mint-50); border-color: var(--mint-400); color: var(--mint-800); transform: translateY(-1px); }
    .rider-fit__all { flex: none; display: inline-flex; align-items: center; font: inherit; font-size: .82rem; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--mint-400), var(--mint-600)); border: 0; border-radius: var(--radius-pill); padding: 7px 17px; cursor: pointer; box-shadow: 0 3px 11px -4px rgba(15,167,143,.6); transition: filter .2s, transform .15s; }
    .rider-fit__all:hover { filter: brightness(1.08); transform: translateY(-1px); }
    @media (max-width: 749px) {
      .collection .rider-fit { padding: 9px 11px; gap: 8px var(--space-2); }
      .rider-fit__head strong { font-size: .88rem; }
      .rider-fit__off { margin-left: 0; }
    }
/* END_SECTION:main-collection */

/* START_SECTION:main-page (INDEX:57) */
.main-page { padding-block: var(--space-12); }
    .main-page__inner { max-width: 760px; margin-inline: auto; }
    .main-page__title { margin-bottom: var(--space-6); }
    .main-page__content { color: var(--neutral-700); line-height: 1.7; }
    .main-page__content > * + * { margin-top: var(--space-4); }
    .main-page__content h2, .main-page__content h3 { margin-top: var(--space-8); color: var(--ink); }
    .main-page__content a { color: var(--mint-700); }
    .main-page__content ul, .main-page__content ol { padding-left: 1.25em; }
/* END_SECTION:main-page */

/* START_SECTION:main-product (INDEX:58) */
.product { padding-block: var(--space-12) var(--space-4); }
    .product__layout { display:grid; gap: var(--space-12); }
    /* Grid-Items dürfen unter ihre Inhaltsbreite schrumpfen (sonst zwingt der nowrap-Breadcrumb die
       Spalte breiter als der Viewport → seitliches Überlaufen / Header „nur 3/4" auf dem Handy). */
    .product__layout > * { min-width: 0; }
    /* Zweite Badge-Instanz steckt in .product__media — sie zeigt sich NUR auf Mobile übers Bild.
       Desktop bleibt unverändert (nutzt weiter die Badges im .product__info-Textblock). */
    .product__media .badges { display: none; }
    @media (min-width:900px){
      .product__layout { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items:start; column-gap: var(--space-12); row-gap: var(--space-6); }
      .product__media { grid-column: 1; grid-row: 1; }
      .product__layout > .pinfo { grid-column: 1; grid-row: 2; align-self: start; }
      .product__info { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; }
    }
    .product__meta { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-weight:700; font-size:.85rem; letter-spacing:.01em; }
    .product__meta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; transition: color var(--dur-fast) var(--ease-out); }
    .product__brand, .product__cat { color: var(--mint-600); }
    .product__brand:hover, .product__cat:hover { color: var(--mint-700); }
    .product__meta-item { display:inline-flex; align-items:baseline; gap: var(--space-1); }
    .product__meta-label { color: var(--neutral-700); font-weight:600; }
    .product__meta-sep { color: var(--neutral-300); font-weight:400; }
    .product__sku { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-weight:600; letter-spacing:.01em; color: var(--neutral-800, #1a1d1f); }
    /* Mobile: weniger Luft oben & zwischen Bild und Text, Breadcrumb + Brand/Type kompakter */
    @media (max-width: 749px) {
      .product { padding-block: var(--space-3) var(--space-8); }   /* weniger Abstand Header→Bild oben */
      .product__layout { gap: var(--space-4); }                    /* Bild näher an Breadcrumb/Text */
      /* -10%/New-Badge sauber oben rechts aufs Bild legen statt im Textblock darüber */
      .product__media { position: relative; }
      .product__media .badges { display: flex; position: absolute; top: var(--space-3); right: var(--space-3); left: auto; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; z-index: 3; }
      .product__info .badges { display: none; }
      /* Breadcrumb kleiner + EINE Zeile (langer Produkttitel wird mit … gekürzt) */
      .product .breadcrumb { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--space-1); }
      .product__meta { font-size: .72rem; gap: 2px var(--space-2); margin-top: var(--space-2); }
      .product__meta a { text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
      /* Option C: Info-Block ENTKASTELN — kein mint Kasten mehr, nur ruhige graue Einzeiler.
         Höhere Spezifität (.product__info …), weil die Basis-Regeln im Quelltext NACH diesem @media stehen. */
      .product__info .product__notes { background: none; padding: 0; gap: 5px; margin: var(--space-3) 0 var(--space-4); border-radius: 0; }
      .product__info .product__note { font-size: .68rem; line-height: 1.35; gap: var(--space-2); color: var(--neutral-500); }
      .product__info .product__note .cat-icon { width: 14px; height: 14px; margin-top: 1px; color: var(--neutral-400); }
      .product__info .product__note--tax a { color: var(--mint-700); }
      .product__info .product__note--help { color: var(--mint-700); }
      /* Fitment schlank + im Hauptdesign. WICHTIG: das garage-JS überschreibt die className des
         Slots zu „fitment-box fitment-box--…", d.h. `.product__fitment` ist dann WEG → über den
         bleibenden Vorfahren `.product__info` ansprechen (nur Motorradteile rendern es ohnehin). */
      .product__info .fitment-box { margin: var(--space-3) 0; padding: 9px 12px; font-size: .82rem; }
      .product__info .fitment-box__btn { font-weight: 500; padding: 7px 12px; }
      /* „Select your bike"-Zustand: cleane Mint-Outline-Pille statt grauer Kasten + schwarzer Button */
      .product__info .fitment-box--unknown { background: none; padding: 0; }
      .product__info .fitment-box--unknown .fitment-box__btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; background: none; color: var(--mint-700); border: 1px solid var(--mint-500); border-radius: var(--radius-pill); padding: 11px 14px; font-weight: 600; }
      /* Größen-Buttons (XS…XXL) kompakter, damit alle in EINE Reihe passen statt umzubrechen.
         Nur die Text-Buttons (.vbtn) — Farb-Swatches (.vswatch) bleiben wie sie sind.
         `.product__info`-Präfix nötig: die Basis-Regel (.vbtn 52px) steht im Quelltext NACH diesem
         @media, würde bei gleicher Spezifität sonst gewinnen. */
      .product__info .vbtns { gap: var(--space-2); }
      .product__info .vbtn { min-width: 42px; height: 44px; padding: 0 var(--space-3); font-size: .82rem; }
    }
    .product__title { margin: var(--space-1) 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; }
    .product__pricing { display:flex; align-items:baseline; gap: var(--space-3); flex-wrap:wrap; }
    .product__price { font-family:"Satoshi"; font-weight:800; font-size: 1.7rem; color: var(--ink); }
    .product__compare-at { font-family:"Satoshi"; font-weight:700; font-size: 1.15rem; color: var(--neutral-500); text-decoration: line-through; }
    .product__compare-at[hidden] { display:none; }
    .product__notes { margin: var(--space-3) 0 var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--mint-50); display:grid; gap: var(--space-2); }
    .product__note { margin:0; font-size:.82rem; line-height:1.45; color: var(--neutral-700); display:flex; align-items:flex-start; gap: var(--space-2); }
    .product__note .cat-icon { width:16px; height:16px; flex:none; margin-top:1px; color: var(--mint-600); }
    .product__note--tax { color: var(--neutral-600); }
    .product__note--tax a { color: var(--mint-700); text-decoration: underline; text-underline-offset:2px; }
    .product__note--help { color: var(--mint-800); font-weight:600; }
    .product__opt { margin-bottom: var(--space-6); }
    .product__opt-label { display:block; font-size:.95rem; margin-bottom: var(--space-3); color: var(--ink); }
    .product__opt-label [data-opt-current] { color: var(--neutral-700); font-weight:400; }
    .vbtns, .vswatches { display:flex; flex-wrap:wrap; gap: var(--space-3); }
    .vbtn { min-width:52px; height:52px; padding:0 var(--space-4); border:1.5px solid var(--neutral-300); border-radius: var(--radius-pill); background:#fff; font:inherit; font-weight:700; font-size:.9rem; color: var(--ink); cursor:pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .vbtn:hover { border-color: var(--ink); }
    .vbtn.is-active { background: var(--ink); border-color: var(--ink); color:#fff; }
    .vswatch { width:64px; height:64px; padding:0; border:2px solid var(--neutral-200); border-radius: var(--radius-md); background:#fff; overflow:hidden; cursor:pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
    .vswatch img { width:100%; height:100%; object-fit:cover; display:block; }
    .vswatch__ph { display:block; width:100%; height:100%; background: var(--neutral-100); }
    .vswatch:hover { border-color: var(--mint-400); }
    .vswatch.is-active { border-color: var(--mint-500); box-shadow: 0 0 0 2px var(--mint-100); }
    .product__buy { display:flex; gap: var(--space-3); align-items:stretch; margin-top: var(--space-2); }
    .product__atc { flex:1; justify-content:center; }
    .product__atc[disabled]{ opacity:.5; cursor:not-allowed; }
    .qty { display:flex; align-items:center; border:1px solid var(--neutral-300); border-radius: var(--radius-sm); overflow:hidden; flex:0 0 auto; background:#fff; }
    .qty__btn { width:40px; align-self:stretch; border:0; background:none; font-size:1.1rem; line-height:1; cursor:pointer; color: var(--ink); }
    .qty__btn:hover { background: var(--neutral-100); }
    .qty__input { width:44px; border:0; text-align:center; font:inherit; font-weight:700; -moz-appearance:textfield; appearance:textfield; padding: var(--space-3) 0; }
    .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .product__trust { list-style:none; padding: var(--space-4) 0 0; margin: var(--space-4) 0 0; border-top:1px solid var(--neutral-100); display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); align-items:start; }
    @media (max-width:480px){ .product__trust { grid-template-columns: 1fr; } }
    .product__trust li { display:flex; align-items:center; gap: var(--space-3); font-size:.9rem; color: var(--neutral-700); }
    .product__trust .cat-icon { width:20px; height:20px; flex:none; color: var(--mint-600); }
    .product__guides { margin-top: var(--space-8); font-weight: 700; }
    .product__guides a { color: var(--mint-700); text-decoration: none; }
    .product__compare-row { display:flex; gap: var(--space-6); align-items:center; justify-content:center; margin-top: var(--space-4); flex-wrap:wrap; }
    .product__compare, .pwish { background:none; border:0; padding:0; font:inherit; font-size:.82rem; font-weight:600; color: var(--neutral-500); display:inline-flex; align-items:center; gap: var(--space-2); cursor:pointer; transition: color var(--dur-fast) var(--ease-out); }
    .product__compare .cat-icon { width:16px; height:16px; }
    .product__compare:hover, .pwish:hover { color: var(--ink); }
    .product__compare[aria-pressed="true"], .pwish.is-active { color: var(--mint-700); }
    .pwish__icon { color: var(--neutral-300); transition: color var(--dur-fast) var(--ease-out); }
    .pwish:hover .pwish__icon, .pwish.is-active .pwish__icon { color: var(--mint-500); }
    /* Add-to-cart: brighter sheen sweep + mint glow (same vibe as the iP logo hover) */
    .product__atc { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); box-shadow: 0 6px 18px color-mix(in srgb, var(--mint-500) 20%, transparent); }
    .product__form .product__atc::before { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); width:70%; }
    .product__atc:hover { box-shadow: 0 12px 30px color-mix(in srgb, var(--mint-500) 45%, transparent); }

    /* Size guide + Ask a question */
    .pq { margin-top: var(--space-3); }
    .pq__row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); align-items:center; }
    @media (max-width:480px){ .pq__row { grid-template-columns: 1fr; } }
    .pq__row .pq__btn { padding: var(--space-2) 0; justify-self:start; }
    .pq__btn { display:inline-flex; align-items:center; gap: var(--space-2); background:none; border:0; padding: var(--space-2) 0; font:inherit; font-weight:700; font-size:.9rem; color: var(--mint-700); cursor:pointer; }
    .pq__btn .cat-icon { width:18px; height:18px; }
    .pq__btn:hover { color: var(--mint-800); }
    .pq__body { display:none; margin-top: var(--space-3); }
    .pq.is-open .pq__body { display:block; }
    .pq__form { display:grid; gap: var(--space-3); padding: var(--space-4); border:1px solid var(--neutral-200); border-radius: var(--radius-md); background:#fff; }
    .pq__grid { display:grid; gap: var(--space-3); }
    @media (min-width:520px){ .pq__grid { grid-template-columns: 1fr 1fr; } }
    .pq__field { display:grid; gap: var(--space-1); font-weight:600; font-size:.82rem; color: var(--neutral-700); }
    .pq__field input, .pq__field textarea { font:inherit; font-weight:400; padding: var(--space-2) var(--space-3); border:1px solid var(--neutral-300); border-radius: var(--radius-sm); width:100%; background:#fff; }
    .pq__field textarea { resize:vertical; }
    .pq__send { justify-self:start; }
    .pq__ok { color: var(--mint-700); font-weight:700; }
    .pq__err { color: var(--color-error); font-weight:600; font-size:.85rem; }

    /* Static info accordions */
    .pinfo { margin-top: 0; border-top:1px solid var(--neutral-100); }
    .pinfo__item { border-bottom:1px solid var(--neutral-100); }
    .pinfo__sum { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-4) 0; font-weight:700; font-size:.92rem; cursor:pointer; list-style:none; }
    .pinfo__sum::-webkit-details-marker { display:none; }
    .pinfo__sum .cat-icon:first-child { width:20px; height:20px; flex:none; color: var(--mint-600); }
    .pinfo__label { flex:1; }
    .pinfo__sum > .cat-icon:last-child { width:18px; height:18px; flex:none; color: var(--neutral-500); transition: transform var(--dur-fast) var(--ease-out); }
    .pinfo__item[open] .pinfo__sum > .cat-icon:last-child { transform: rotate(180deg); }
    .pinfo__body { padding: 0 0 var(--space-4); font-size:.88rem; color: var(--neutral-700); line-height:1.65; }
    .pinfo__body.rte > * + *, .pinfo__body .rte > * + * { margin-top: var(--space-3); }
    .pinfo__sub { font-weight:700; color: var(--ink); margin:0 0 var(--space-2); }
    .pinfo__pays { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
    .pinfo__pay { width:38px; height:24px; border-radius:4px; }

    /* Rider-ID verified size badge */
    .vbtn--ridfit{position:relative;border-color:var(--mint-500);box-shadow:0 0 0 2px var(--mint-200)}
    .vbtn--ridfit::after{content:"✓";position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;background:var(--mint-500);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
    .ridfit{display:flex;align-items:center;flex-wrap:wrap;gap:9px 13px;margin:14px 0;padding:11px 14px;border-radius:14px;background:linear-gradient(100deg,var(--mint-50),#fff 72%);border:1px solid var(--mint-200);box-shadow:0 3px 14px -8px rgba(15,167,143,.45)}
    .ridfit__ico{width:34px;height:34px;border-radius:10px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(150deg,var(--mint-400),var(--mint-600));box-shadow:0 3px 9px -3px rgba(15,167,143,.7)}
    .ridfit__ico svg{width:20px;height:20px}
    .ridfit__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
    .ridfit__txt strong{font-weight:700;font-size:.96rem;color:var(--ink)}
    .ridfit__sub{font-size:.74rem;color:var(--mint-700);font-weight:600}
    .ridfit__size{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:800;color:var(--mint-800);background:#fff;border:1.5px solid var(--mint-300);border-radius:999px;padding:5px 13px}
    .ridfit__size::before{content:"✓";font-size:.82rem;color:var(--mint-600)}
    .ridfit__edit{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--mint-700);text-decoration:none;border:1.5px solid var(--mint-300);border-radius:999px;padding:6px 14px;transition:background .2s,border-color .2s}
    .ridfit__edit:hover{background:var(--mint-50);border-color:var(--mint-500)}
    .ridfit__off{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--neutral-200);background:#fff;color:var(--neutral-500);font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
    .ridfit__off:hover{color:var(--neutral-700);border-color:var(--neutral-400)}
    .ridfit--off{width:auto;justify-content:flex-start;gap:8px;margin:14px 0;padding:9px 14px;color:var(--neutral-500);font-size:.84rem;font-weight:600;cursor:pointer;background:#fff;border:1px dashed var(--neutral-300);border-radius:12px;box-shadow:none}
    .ridfit--off:hover{color:var(--mint-700);border-color:var(--mint-400)}
    /* Parts fit strip: variants, chips, invite button, hovers, (i) explainer */
    .ridfit-unit{max-width:520px;margin:14px 0}
    .ridfit-unit .ridfit{margin:0}
    .ridfit{position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
    .ridfit:hover{transform:translateY(-2px);border-color:var(--mint-400);box-shadow:0 16px 36px -12px rgba(15,167,143,.55),0 0 0 1px var(--mint-200)}
    .ridfit::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);transform:translateX(-140%)}
    .ridfit:hover::after{transition:transform .9s ease;transform:translateX(140%)}
    @media (prefers-reduced-motion:reduce){.ridfit,.ridfit:hover{transform:none}.ridfit::after{display:none}}
    .ridfit--no{background:#fff;border-color:var(--neutral-200);box-shadow:0 3px 14px -10px rgba(0,0,0,.18)}
    .ridfit--no:hover{box-shadow:0 8px 20px -12px rgba(0,0,0,.25)}
    .ridfit--no .ridfit__ico{background:linear-gradient(150deg,#e2e2e6,#c3c3c9);box-shadow:none}
    .ridfit--no .ridfit__txt strong{color:#9a3f22}
    .ridfit--no .ridfit__sub{color:var(--neutral-500)}
    .ridfit__manage{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--mint-700);background:#fff;border:1px solid var(--neutral-200);border-radius:9px;padding:7px 11px;text-decoration:none;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .18s}
    .ridfit__manage:hover{border-color:var(--mint-500);box-shadow:0 4px 12px -6px rgba(15,167,143,.45);transform:translateY(-1px)}
    .rbikes{display:flex;gap:6px;flex-wrap:wrap;width:100%}
    .rbike{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--neutral-200);border-radius:999px;padding:5px 11px;font-size:.8rem;color:var(--neutral-700)}
    .rbike .d{width:5px;height:5px;border-radius:50%;background:#d9663f;flex:none}
    .ridfit--invite{background:linear-gradient(100deg,#fff,var(--mint-50) 130%);border-color:var(--mint-200)}
    .ridfit--invite .ridfit__sub{color:var(--neutral-500)}
    .addbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--mint-600);color:#fff;border:0;border-radius:10px;padding:8px 16px;font-size:.86rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .18s,box-shadow .2s,background .2s}
    .addbtn:hover{background:var(--mint-700);transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(13,132,115,.6)}
    .addbtn:active{transform:translateY(0) scale(.98)}
    .addbtn svg{width:15px;height:15px}
    .ridfit__size{position:relative;display:inline-flex;align-items:center;font-size:.85rem;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--neutral-200);border-radius:8px;padding:6px 12px 6px 14px;font-variant-numeric:tabular-nums}
    .ridfit__size::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;background:linear-gradient(var(--mint-400),var(--mint-600))}
    .ridfit__edit{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--mint-700);background:#fff;border:1px solid var(--neutral-200);border-radius:9px;padding:7px 11px;text-decoration:none;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .18s,color .2s}
    .ridfit__edit:hover{border-color:var(--mint-500);color:var(--mint-800);box-shadow:0 4px 12px -6px rgba(15,167,143,.45);transform:translateY(-1px)}
    .ridfit__edit svg{width:16px;height:16px}
    .rf-info{margin-top:8px;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
    .rf-info__cta{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;color:var(--mint-700);text-decoration:none;transition:color .18s}
    .rf-info__cta svg{width:15px;height:15px;transition:transform .18s}
    .rf-info__cta:hover{color:var(--mint-800,#0b6f60)}
    .rf-info__cta:hover svg{transform:translateX(3px)}
    .rf-info__cta:focus-visible{outline:2px solid var(--mint-500);outline-offset:3px;border-radius:6px}
    .info{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:.75rem;color:var(--neutral-500);cursor:help;outline:none}
    .info:focus-visible{color:var(--mint-700)}
    .info__i{width:16px;height:16px;border-radius:50%;border:1.3px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none}
    .info .tip{position:absolute;left:-4px;top:calc(100% + 9px);width:min(290px,80vw);background:var(--ink);color:#fff;font-size:.72rem;line-height:1.55;text-align:left;padding:11px 13px;border-radius:11px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s;z-index:6;box-shadow:0 16px 36px -12px rgba(0,0,0,.45)}
    .info .tip::before{content:"";position:absolute;left:16px;top:-5px;width:11px;height:11px;background:var(--ink);transform:rotate(45deg)}
    .info:hover .tip,.info:focus-visible .tip{opacity:1;visibility:visible;transform:translateY(0)}
    /* ---- Rider-ID slot: one component, five states, under the size buttons ----
       margin-top 12px mirrors .product__opt-label's margin-bottom, so the gap
       above the slot matches the gap between "Size: XS" and the size circles. ---- */
    /* Quiet and row states carry a transparent border + the same 9px inline padding
       as the boxed state, so the size tile and the ✕ never shift between states. */
    .ridslot{margin:12px 0 14px;display:flex;align-items:center;gap:10px;padding:0 9px;border:1px solid transparent;border-radius:12px}
    .ridslot--quiet{gap:7px;font-size:.75rem;line-height:1.4;color:var(--neutral-500,#787f85)}
    .ridslot--quiet .ridslot__ico{width:14px;height:14px;flex:none;stroke:#96a1a6;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    .ridslot--quiet .ridslot__act{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--mint-700,#0c8f7c);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
    .ridslot--box{border-color:#e2a0a0;background:rgba(226,160,160,.13);padding:8px 9px}

    .ridslot__size{width:36px;height:36px;border-radius:9px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
    .ridslot__size em{font-style:normal;font-size:.43rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
    .ridslot__size strong{font-size:.9rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
    .ridslot--ok .ridslot__size{background:var(--mint-500,#15cdb0);color:#04352d}
    .ridslot--warn .ridslot__size{background:#efc165;color:#4a3000}
    .ridslot--bad .ridslot__size{background:#dd9a9a;color:#4d1616}

    .ridslot__tx{flex:1;min-width:0}
    .ridslot__title{display:block;font-size:.8rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
    .ridslot--ok .ridslot__title{color:var(--mint-800,#0b6f60)}
    .ridslot--warn .ridslot__title{color:#8a5a00}
    .ridslot--bad .ridslot__title{color:#8a2f2f}
    .ridslot__sub{display:block;line-height:1.4}
    .ridslot--row .ridslot__sub,.ridslot--box .ridslot__sub{font-size:.7rem;color:#8a9498;margin-top:2px}
    .ridslot__sub .ridslot__act{color:var(--mint-700,#0c8f7c);font-weight:700;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
    .ridslot--bad .ridslot__sub .ridslot__act{color:#8a2f2f}

    .ridslot__x{width:20px;height:20px;flex:none;border-radius:50%;border:1px solid #e2e8ea;background:#fff;color:#aab4b8;display:grid;place-items:center;padding:0;cursor:pointer}
    .ridslot__x svg{width:7px;height:7px;stroke:currentColor;fill:none;stroke-width:2.9;stroke-linecap:round}
    .ridslot__x:hover{color:#6b7579;border-color:#cfd6d9}
    /* "?" in the off state — the one moment a rider looks straight at the feature
       having just switched it away. A tap toggles the line below; no hover, which
       is unreachable on touch. The quiet row is a wrapping flex line, so the
       explanation takes full width on its own row. */
    .ridslot__why{width:17px;height:17px;flex:none;border-radius:50%;border:1px solid #c4ccd0;background:#fff;color:#7d888d;font-size:.62rem;font-weight:800;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;margin-left:-2px}
    .ridslot__why:hover{color:var(--mint-700,#0c8f7c);border-color:var(--mint-400,#3ddcc3)}
    .ridslot__explain{flex:1 0 100%;margin:6px 0 0;font-size:.7rem;line-height:1.5;color:#8a9498}
    .ridslot--quiet{flex-wrap:wrap}
    .ridslot__act:focus-visible,.ridslot__x:focus-visible,.ridslot__why:focus-visible{outline:2px solid var(--mint-500,#15cdb0);outline-offset:2px;border-radius:6px}

    /* ---- Breakpoint split. The desktop treatment was already right and is left
            untouched; the slot above is the mobile-only replacement. Placed AFTER
            the .ridslot rules on purpose — the base rule sets display:flex, so an
            earlier override would lose the cascade. 750px is this file's own mobile
            boundary (see the max-width:749px block further down). ---- */
    .ridslot{display:none}
    @media (max-width:749px){
      /* Colour: label and swatches share a line. A one-line label above a single
         64px swatch spends a lot of buy-box height on very little. :has() picks
         out the swatch groups only, so the Size buttons keep their own row; where
         :has() is unsupported the stacked layout simply remains. Many-colour
         products wrap the swatch row under the label again, as before. */
      .product__opt:has(.vswatches){display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
      /* The label must be able to wrap its own text rather than push the swatch
         onto a new line — colour names run long ("Marco Bezzecchi Replica 2024").
         flex-wrap stays as a safety valve for products with many swatches. */
      /* Swatch first, name beside it — the image is what the eye looks for, and
         leading with it keeps the row reading left-to-right instead of leaving
         the thumbnail stranded at the right edge. */
      .product__opt:has(.vswatches) .vswatches{order:-1;flex:0 0 auto}
      /* Type matches .ridslot__title (.8rem) directly above, so the two rows
         read as one group instead of two different scales.
         flex-basis 0, not auto: a wrapping flex container places items by their
         basis BEFORE shrinking them, so an auto-sized label as wide as its text
         gets pushed to its own line instead of narrowing. Basis 0 always fits
         beside the swatch and the text wraps inside it. */
      .product__opt:has(.vswatches) .product__opt-label{margin-bottom:0;flex:1 1 0;min-width:0;font-size:.8rem}
      /* Swatch scaled to the row it now shares: 44px sits with the .8rem text
         instead of towering over it. Desktop keeps the full 64px. */
      .product__opt:has(.vswatches) .vswatch{width:44px;height:44px}

      .ridslot{display:flex}
      /* .hpbadge hides itself in its own snippet — see the note there. */
      .ridfit{display:none}
      /* The explainer the bundle appends after a .ridfit belongs to the desktop
         treatment. Scoped to --desk so the identical line on parts PDPs stays. */
      .ridfit--desk + .rf-info{display:none}
    }

    @media (max-width:749px){.ridfit__edit{margin-left:0}}
    .ridmodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
    .ridmodal__backdrop{position:absolute;inset:0;background:rgba(10,10,11,.55);backdrop-filter:blur(2px)}
    .ridmodal__card{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:20px;padding:26px 24px 22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);text-align:center;animation:ridmodalIn .25s cubic-bezier(.2,1,.3,1)}
    @keyframes ridmodalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
    .ridmodal__x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:var(--neutral-100);color:var(--neutral-500);font-size:.85rem;cursor:pointer}
    .ridmodal__x:hover{background:var(--neutral-200);color:var(--neutral-700)}
    .ridmodal__ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(150deg,var(--mint-400),var(--mint-600));box-shadow:0 6px 16px -4px rgba(15,167,143,.6);margin-bottom:12px}
    .ridmodal__ico svg{width:26px;height:26px}
    .ridmodal__title{margin:0 0 6px;font-size:1.18rem;font-weight:800;color:var(--ink)}
    .ridmodal__body{margin:0 0 16px;font-size:.92rem;color:var(--neutral-700);line-height:1.5}
    .ridmodal__body strong{color:var(--ink)}
    .ridmodal__chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
    .ridmodal__chip{font-size:.82rem;font-weight:700;padding:7px 13px;border-radius:999px;border:1.5px solid}
    .ridmodal__chip--pick{color:var(--neutral-700);border-color:var(--neutral-300);background:#fff}
    .ridmodal__chip--rid{color:var(--mint-800);border-color:var(--mint-300);background:var(--mint-50)}
    .ridmodal__actions{display:flex;flex-direction:column;gap:9px}
    .ridmodal__btn{width:100%;padding:13px;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;border:1.5px solid;transition:transform .15s,box-shadow .2s,background .2s}
    .ridmodal__btn--primary{color:#04231d;background:var(--mint-500);border-color:var(--mint-500);box-shadow:0 8px 20px -8px rgba(15,167,143,.6)}
    .ridmodal__btn--primary:hover{transform:translateY(-1px);background:var(--mint-400)}
    .ridmodal__btn--ghost{color:var(--neutral-700);background:#fff;border-color:var(--neutral-300)}
    .ridmodal__btn--ghost:hover{background:var(--neutral-100)}
    .ridmodal__note{font-size:.85rem;color:var(--neutral-500);margin:0 0 14px}
/* END_SECTION:main-product */

/* START_SECTION:main-sale (INDEX:59) */
.sale__head { margin-bottom: var(--space-6); }
    .sale__h1 { color: var(--mint-600); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: var(--space-1) 0 0; }
    .sale__intro { color: var(--neutral-600, #555); margin: var(--space-3) 0 0; max-width: 62ch; }
/* END_SECTION:main-sale */

/* START_SECTION:main-search (INDEX:60) */
.search.container--wide { max-width: none; }
    .search { padding-block: var(--space-8) var(--space-12); }

    /* ── head ── */
    .search__lab { font-family: "Space Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--neutral-400); display: block; margin-bottom: var(--space-2); }
    .search__head h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: var(--space-4); }
    .search__head h1 em { font-style: normal; color: var(--mint-600); }
    .search__form { display: flex; align-items: center; max-width: 560px; height: 50px; background: #fff; border: 1.5px solid var(--neutral-300); border-radius: var(--radius-pill); padding: 0 6px 0 18px; margin: 0 0 var(--space-2); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
    .search__form:focus-within { border-color: var(--mint-500); box-shadow: 0 0 0 4px var(--mint-50); }
    .search__form-ic { width: 18px; height: 18px; color: var(--neutral-400); flex: none; }
    .search__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 .95rem/1 Inter, system-ui, sans-serif; color: var(--ink); padding: 0 12px; }
    .search__form button { flex: none; width: 54px; height: 38px; border: 0; border-radius: var(--radius-pill); background: var(--mint-500); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast); }
    .search__form button:hover { background: var(--mint-400); }
    .search__form button svg { width: 17px; height: 17px; }

    /* ── garage banner (markup owned by garage.js — restyle only) ── */
    .search .garage-banner { border-radius: 14px; padding: var(--space-3) var(--space-4); }
    /* --active look (Race HUD) is inherited from base.css so search matches the collection page */
    .search .garage-banner__change { font-size: .8rem; padding: 7px 14px; }

    /* ── brand hero ── */
    .bhero { position: relative; display: flex; align-items: center; gap: var(--space-8); margin: var(--space-4) 0 var(--space-4); padding: var(--space-8) var(--space-8); background: linear-gradient(115deg, #0a0a0b 55%, #10201c); border-radius: var(--radius-lg); color: #fff; text-decoration: none; overflow: hidden; }
    .bhero::after { content: ""; position: absolute; right: -60px; top: -90px; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(21,205,176,.3), transparent); pointer-events: none; }
    .bhero__txt { position: relative; z-index: 1; max-width: 560px; }
    .bhero__lab { font-family: "Space Mono", ui-monospace, monospace; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mint-300); }
    .bhero h2 { margin: 8px 0 8px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; }
    .bhero p { margin: 0 0 16px; color: #b9b9bf; font-size: .92rem; }
    .bhero__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--mint-500); color: var(--ink); border-radius: var(--radius-pill); padding: 10px 22px; font-weight: 700; font-size: .88rem; transition: background var(--dur-fast); }
    .bhero:hover .bhero__cta { background: var(--mint-400); }
    .bhero__cta svg { width: 16px; height: 16px; }
    .bhero__img { position: relative; z-index: 1; width: 230px; flex: none; margin-left: auto; }
    .bhero__img img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }

    /* ── category tiles ── */
    .btiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
    .btile { display: flex; align-items: center; gap: var(--space-4); background: #fff; border: 1px solid var(--neutral-100); border-radius: 16px; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
    .btile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mint-200); }
    .btile__img { width: 64px; height: 64px; flex: none; border-radius: 12px; background: linear-gradient(160deg, #f4f4f6, #e9e9ee); display: grid; place-items: center; overflow: hidden; }
    .btile__img img { width: 86%; height: 86%; object-fit: contain; }
    .btile__img--icon { background: var(--mint-50); color: var(--mint-700); }
    .btile__img--icon .cat-icon, .btile__img--icon svg { width: 28px; height: 28px; }
    .btile__txt strong { font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: .95rem; display: block; }
    .btile__txt small { color: var(--neutral-500); font-size: .74rem; }
    .btile__ar { margin-left: auto; color: var(--mint-600); font-weight: 700; }

    /* ── toolbar ── */
    .search__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-4) 0 var(--space-2); flex-wrap: wrap; }
    .search__count { color: var(--neutral-500); margin: 0; font-size: .88rem; }
    .search__count b { color: var(--ink); font-weight: 700; }
    .search__sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--neutral-500); }
    .search__sort select { font: 600 .82rem Inter, system-ui, sans-serif; color: var(--ink); background: #fff; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-pill); padding: 8px 14px; cursor: pointer; transition: border-color var(--dur-fast); }
    .search__sort select:hover, .search__sort select:focus { border-color: var(--mint-500); outline: 0; }

    /* ── empty state ── */
    .search__empty { grid-column: 1 / -1; text-align: center; padding: var(--space-16) var(--space-4); color: var(--ink); }
    .search__empty svg { width: 34px; height: 34px; color: var(--neutral-300); margin: 0 auto var(--space-3); display: block; }
    .search__empty strong { display: block; font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; }
    .search__empty small { display: block; margin-top: 6px; color: var(--neutral-500); font-size: .84rem; }

    @media (max-width: 860px) {
      .bhero { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
      .bhero__img { width: 170px; margin: 0 auto; }
      .btiles { grid-template-columns: 1fr; }
    }
    [dir="rtl"] .btile__ar, [dir="rtl"] .bhero__cta svg { transform: scaleX(-1); }
/* END_SECTION:main-search */

/* START_SECTION:menu-lab (INDEX:61) */
.mlab { background: var(--surface); color: var(--ink); padding-bottom: var(--space-24); }
  .mlab__intro { padding: var(--space-12) var(--container-pad) var(--space-8); max-width: 820px; }
  .mlab__eyebrow { font-family: "Space Mono", monospace; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-700); margin: 0 0 var(--space-2); }
  .mlab__title { font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
  .mlab__lede { color: var(--neutral-700); font-size: 1.05rem; line-height: 1.55; margin: 0; }

  /* USP bar */
  .mlab__usp { background: var(--ink); color: #fff; font-size: .8rem; }
  .mlab__usp-row { display: flex; gap: var(--space-8); justify-content: center; padding: 8px var(--container-pad); flex-wrap: wrap; }
  .mlab__usp-row span { opacity: .85; }

  /* Bar */
  .mlab__bar { background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--neutral-100); position: relative; z-index: 20; }
  .mlab__bar-row { display: flex; align-items: center; gap: var(--space-8); height: 72px; }
  .mlab__logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); text-decoration: none; font-style: italic; transform: skewX(var(--skew)); display: inline-block; }
  .mlab__logo em { font-style: normal; color: var(--mint-600); }

  .mlab__nav { flex: 1; }
  .mlab__nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
  .mlab__navitem > a { display: inline-flex; align-items: center; height: 72px; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; position: relative; }
  .mlab__navitem > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; background: var(--mint-500); transition: right var(--dur-base) var(--ease-out); }
  .mlab__navitem:hover > a::after, .mlab__navitem:focus-within > a::after { right: 0; }
  .mlab__sale { color: var(--color-error) !important; font-weight: 700; }

  /* Dropdown panel */
  .mlab__navitem--mega { position: static; }
  .mlab__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--neutral-100); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .mlab__navitem--mega:hover .mlab__panel, .mlab__navitem--mega:focus-within .mlab__panel { opacity: 1; visibility: visible; transform: none; }
  .mlab__panel-inner { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); padding: var(--space-8) var(--container-pad); }
  .mlab__panel-inner--brand { grid-template-columns: 1fr 300px; }

  .mlab__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-6) var(--space-8); }
  .mlab__col { display: flex; flex-direction: column; gap: 2px; }
  .mlab__col-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-bottom: var(--space-2); }
  .mlab__col-head:hover { color: var(--mint-700); }
  .mlab__col-head--plain { color: var(--neutral-500); cursor: default; }
  .cat-icon { width: 20px; height: 20px; color: var(--mint-600); flex: none; }
  .mlab__col-head--plain .cat-icon { color: var(--neutral-400); }
  .mlab__sublink { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .88rem; color: var(--neutral-700); text-decoration: none; padding: 3px 0; }
  .mlab__sublink:hover { color: var(--mint-700); }
  .mlab__soon { font-size: .88rem; color: var(--neutral-400); padding: 3px 0; }
  .mlab__all { font-size: .82rem; font-weight: 600; color: var(--mint-700); text-decoration: none; padding-top: var(--space-2); }
  .mlab__badge { font-family: "Space Mono", monospace; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-sm); padding: 1px 5px; vertical-align: middle; }
  .mlab__badge--new { background: var(--mint-500); color: var(--ink); }

  /* Promo card */
  .mlab__promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 220px; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-6); text-decoration: none; color: #fff; background: var(--ink); isolation: isolate; }
  .mlab__promo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--promo-img); background-size: cover; background-position: center; }
  .mlab__promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,11,.1), rgba(10,10,11,.78)); }
  .mlab__promo--brand { background: linear-gradient(135deg, var(--mint-700), var(--ink)); }
  .mlab__promo-eyebrow { font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mint-300); }
  .mlab__promo-head { font-weight: 800; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
  .mlab__promo-cta { font-weight: 600; font-size: .9rem; margin-top: var(--space-2); }

  /* Brands grid */
  .mlab__brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); align-content: start; }
  .mlab__brand { display: flex; align-items: center; justify-content: center; height: 56px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast); }
  .mlab__brand:hover { border-color: var(--mint-500); color: var(--mint-700); }

  /* Right actions */
  .mlab__actions { display: flex; align-items: center; gap: var(--space-4); }
  .mlab__icon-btn { background: none; border: 0; font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .mlab__icon-btn .cat-icon { width: 16px; height: 16px; }
  .mlab__garage { background: var(--mint-500); color: var(--ink); border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: 700; padding: .55rem 1.1rem; cursor: pointer; transform: skewX(var(--skew)); }
  .mlab__garage:hover { background: var(--mint-400); }

  /* Expanded gallery */
  .mlab__expanded { padding-top: var(--space-16); }
  .mlab__exp-title { font-weight: 800; font-size: 1.4rem; margin: 0 0 var(--space-6); }
  .mlab__exp-block { margin-bottom: var(--space-8); }
  .mlab__exp-label { display: inline-block; font-family: "Space Mono", monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mint-700); margin-bottom: var(--space-3); }
  .mlab__panel-static { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
  .mlab__panel-static .mlab__panel-inner { padding: var(--space-8); }

  @media (max-width: 900px) {
    .mlab__nav, .mlab__icon-btn { display: none; }
    .mlab__panel-inner, .mlab__panel-inner--brand { grid-template-columns: 1fr; }
    .mlab__promo { min-height: 160px; }
  }
/* END_SECTION:menu-lab */

/* START_SECTION:new-arrivals (INDEX:63) */
.narr { position: relative; z-index: 4; padding: clamp(14px, 2.5vh, 36px) 0 clamp(50px, 9vh, 110px); overflow: hidden;
    content-visibility: auto; contain-intrinsic-size: auto 700px; }
  /* Lite-Modus: teure Filter (drop-shadow) auf den Geister-Bildern weglassen */
  .ip-lite .narr__ghost { filter: grayscale(1) brightness(1.9) contrast(.6); opacity: .3; }
  .narr__head { text-align: center; margin-bottom: clamp(28px, 5vh, 56px); padding: 0 5vw; }
  .narr__eyebrow { font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; color: #56dcc0; margin: 0 0 12px; }
  .narr__heading { font-family: 'Satoshi', 'Sora', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #eaf6f2; margin: 0; }

  .narr__belt { position: relative; height: 400px; }
  .narr__track { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: 90px; align-items: flex-start; will-change: transform;
    cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .narr__track.grabbing { cursor: grabbing; }
  .narr__track img { -webkit-user-drag: none; }
  .narr__item { position: relative; width: 230px; flex: 0 0 auto; text-align: center; text-decoration: none; color: inherit; }
  .narr__imgs { position: relative; display: block; width: 230px; height: 230px; }
  .narr__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .narr__ghost { filter: grayscale(1) brightness(2.1) contrast(.55) drop-shadow(0 0 16px rgba(86,220,192,.55)); opacity: .38; }
  .narr__real { clip-path: inset(0 100% 0 0); }
  .narr__meta { display: block; margin-top: 12px; opacity: 0; transition: opacity .3s; }
  .narr__chip { display: inline-block; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .18em; color: #02100c; background: #56dcc0; border-radius: 4px; padding: 4px 7px; text-transform: uppercase; }
  .narr__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 8px 0 5px; font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: .03em; color: #eaf6f2; }
  .narr__price { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; color: #56dcc0; }
  .narr__item:hover .narr__name { color: #bdfff0; }

  /* das Scan-Tor — greifbarer Schieber */
  .narr__gate { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 115%;
    z-index: 6; cursor: ew-resize; touch-action: none; }
  .narr__gate::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, #56dcc0 10%, #56dcc0 90%, transparent);
    box-shadow: 0 0 18px rgba(86,220,192,.9), 0 0 60px rgba(86,220,192,.4); }
  .narr__gate::after { content: ''; position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: 14px; height: 14px;
    border-radius: 50%; background: #56dcc0; box-shadow: 0 0 22px rgba(86,220,192,1), 0 372px 22px rgba(86,220,192,1); }
  .narr__grip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 54px;
    border-radius: 999px; background: rgba(2,8,10,.85); border: 1px solid #56dcc0; box-shadow: 0 0 16px rgba(86,220,192,.5);
    transition: box-shadow .25s, transform .15s; }
  .narr__grip::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 26px;
    background: repeating-linear-gradient(to bottom, #56dcc0 0 2px, transparent 2px 6px); }
  .narr__gate:hover .narr__grip, .narr__gate.dragging .narr__grip { box-shadow: 0 0 26px rgba(86,220,192,.9); transform: translate(-50%, -50%) scale(1.08); }
  .narr__hint { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap;
    font: 600 10px/1 ui-monospace, monospace; letter-spacing: .26em; text-transform: uppercase; color: rgba(86,220,192,.65);
    pointer-events: none; transition: opacity .4s; }

  @media (max-width: 749px) {
    .narr__belt { height: 300px; }
    .narr__track { gap: 48px; }
    .narr__item, .narr__imgs { width: 160px; }
    .narr__imgs { height: 160px; }
    .narr__gate::after { box-shadow: 0 0 22px rgba(86,220,192,1), 0 268px 22px rgba(86,220,192,1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .narr__real { clip-path: none !important; }
    .narr__ghost { display: none; }
    .narr__meta { opacity: 1 !important; }
    .narr__gate, .narr__hint { display: none; }
    .narr__track { position: relative; flex-wrap: wrap; justify-content: center; gap: 40px; height: auto; transform: none !important; }
    .narr__belt { height: auto; }
    .narr__item[aria-hidden] { display: none; }
  }
/* END_SECTION:new-arrivals */

/* START_SECTION:newsletter (INDEX:64) */
.newsletter { background: var(--ink); color: #fff; text-align: center; }
    .newsletter__inner { max-width: 560px; margin-inline: auto; }
    .newsletter__form { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; justify-content: center; }
    .newsletter__form input { flex: 1 1 240px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 0; font: inherit; }
    .newsletter__ok { flex-basis: 100%; color: var(--mint-500); }
/* END_SECTION:newsletter */

/* START_SECTION:onboard-lap (INDEX:65) */
.lap { position: relative; background: #02080a; color: #fff; margin-bottom: calc(var(--space-24, 6rem) * -1); }
  .lap__spacer { position: relative; }
  .lap__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
  .lap__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; display: block; }
  .lap__ov { position: absolute; top: clamp(180px, 20vh, 260px); left: 0; right: 0; z-index: 2; text-align: center; pointer-events: none; transition: opacity .3s; }
  .lap__ey { font-family: "Space Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mint-300, #56dcc0); margin: 0; }
  .lap__hl { font-family: "Satoshi", "Sora", sans-serif; font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.8rem, 4.4vw, 3rem); margin: .35rem 0 0; text-shadow: 0 6px 50px rgba(0,0,0,.9); }
  .lap__hud { position: absolute; left: 30px; bottom: 28px; z-index: 3; font-family: "Space Mono", ui-monospace, monospace; color: var(--mint-300, #56dcc0); }
  .lap__spd { font-size: 2rem; font-weight: 800; } .lap__u { font-size: .72rem; opacity: .6; letter-spacing: .18em; }
  .lap__guide { position: absolute; left: 30px; bottom: 92px; z-index: 3; margin: 0; font-family: "Space Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); text-shadow: 0 2px 18px rgba(0,0,0,.8); transition: opacity .3s; pointer-events: none; }
  .lap__coll { position: absolute; right: 30px; top: 24px; z-index: 3; font-family: "Space Mono", ui-monospace, monospace; text-align: right; }
  .lap__n { font-size: 1.5rem; font-weight: 800; color: var(--mint-300, #56dcc0); }
  .lap__lights { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 14px; opacity: 0; }
  .lap__lights i { width: 26px; height: 26px; border-radius: 50%; background: #220606; box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
  .lap__lights i.on { background: radial-gradient(circle at 40% 35%, #ff6b6b, #b30000); box-shadow: 0 0 22px rgba(255,40,40,.8); }
  .lap__preview { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); transform-origin: center top; z-index: 6; width: min(400px, 90vw); display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; background: rgba(7,18,15,.97); border: 1px solid var(--mint-300, #56dcc0); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 50px rgba(86,220,192,.25); opacity: 0; transition: opacity .25s ease; backdrop-filter: blur(8px); }
  .lap__preview.show { animation: lap-pop .55s cubic-bezier(.2,.9,.3,1.25) both; }
  .lap__preview[hidden] { display: none; }
  @keyframes lap-pop { 0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.8); } 55% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
  @keyframes lap-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lap-shine { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(240%) skewX(-14deg); } }
  .lap__preview.show .lap__preview-img { animation: lap-in .5s .05s both; }
  .lap__preview.show .lap__preview-rider { animation: lap-in .5s .13s both; }
  .lap__preview.show .lap__preview-price { animation: lap-in .5s .20s both; }
  .lap__preview.show .lap__preview-desc  { animation: lap-in .5s .27s both; }
  .lap__preview.show .lap__preview-cta   { animation: lap-in .5s .34s both; }
  .lap__preview.show .lap__preview-img::after { content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(180,255,238,.5), transparent); animation: lap-shine .85s .28s ease-out both; }
  .lap__preview-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: rgba(255,255,255,.55); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 4px; z-index: 2; }
  .lap__preview-x:hover { color: #fff; }
  .lap__preview-img { position: relative; flex: 0 0 auto; width: 94px; height: 94px; border-radius: 12px; overflow: hidden; background: #0c1b17; }
  .lap__preview-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .lap__preview-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 12px; }
  .lap__preview-rider { font-family: "Space Mono", ui-monospace, monospace; font-size: .82rem; font-weight: 700; color: #eafff7; }
  .lap__preview-price { font-family: "Space Mono", ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; color: var(--mint-300, #56dcc0); margin-top: 1px; }
  .lap__preview-desc { font-family: -apple-system, "Segoe UI", sans-serif; font-size: .74rem; line-height: 1.35; color: rgba(255,255,255,.6); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lap__preview-cta { margin-top: 9px; align-self: flex-start; font-family: "Space Mono", ui-monospace, monospace; font-size: .72rem; font-weight: 700; color: #04100d; background: var(--mint-300, #56dcc0); padding: .42rem .85rem; border-radius: 999px; text-decoration: none; }
  @media (prefers-reduced-motion: reduce) { .lap__preview.show, .lap__preview.show *, .lap__preview.show .lap__preview-img::after { animation: none !important; } .lap__preview.show { opacity: 1; } }
  .lap__cue { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 3; font-family: "Space Mono", ui-monospace, monospace; font-size: .66rem; letter-spacing: .2em; color: rgba(255,255,255,.5); text-transform: uppercase; }
  .lap__sign { display: none; }   /* scharfes HTML-Schild nur mobil (Desktop nutzt das Canvas-Schild) */

  /* fallback (mobile / reduced-motion) */
  .lap__fallback { display: none; padding: var(--space-16, 4rem) var(--space-6, 1.5rem) var(--space-20, 5rem); text-align: center; background: radial-gradient(120% 90% at 50% 0%, #0e1b17 0%, #06120f 55%, #02080a 100%); }
  .lap__fallback .lap__hl { margin-top: .35rem; }
  .lap__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4, 1rem); max-width: 760px; margin: var(--space-8, 2rem) auto 0; }
  .lap__card { display: flex; flex-direction: column; text-decoration: none; color: #fff; background: rgba(10,24,20,.7); border: 1px solid rgba(86,220,192,.18); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; }
  .lap__card:hover { border-color: rgba(86,220,192,.6); transform: translateY(-3px); }
  .lap__card-img { aspect-ratio: 1/1; background: var(--accent, #10201b); display: block; }
  .lap__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lap__card-rider { font-family: "Space Mono", ui-monospace, monospace; font-size: .8rem; font-weight: 700; padding: .7rem .8rem 0; }
  .lap__card-price { font-family: "Space Mono", ui-monospace, monospace; font-weight: 800; color: var(--mint-300, #56dcc0); padding: .2rem .8rem .9rem; }
  .lap__ctabtn { display: inline-block; margin-top: var(--space-8, 2rem); padding: .85rem 1.6rem; border-radius: 999px; background: var(--mint-300, #56dcc0); color: #04100d; font-weight: 700; text-decoration: none; }

  /* Mobil läuft jetzt die ECHTE Onboard-Runde (Canvas). Karten-Raster nur noch bei reduced-motion. */
  @media (prefers-reduced-motion: reduce) { .lap__spacer { display: none; } .lap__fallback { display: block; } }

  /* ───────── Mobile Onboard-Lap: Hochformat-UI + Touch (Desktop unberührt) ───────── */
  @media (max-width: 749px) {
    .lap__spacer { height: 190vh !important; }   /* kürzere Runde am Touch-Screen → schnellerer Weg bis Top-10 */
    .lap__canvas { touch-action: pan-y; }   /* vertikales Scrollen treibt die Runde, Tap öffnet ein Schild */
    .lap__ov { top: clamp(96px, 15vh, 150px); padding: 0 1rem; }
    .lap__hl { font-size: clamp(1.5rem, 7vw, 2rem); }
    .lap__hud { left: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); }
    .lap__spd { font-size: 1.5rem; }
    .lap__guide { left: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); font-size: .6rem; max-width: 56vw; line-height: 1.3; }
    .lap__coll { right: 16px; top: 14px; }
    .lap__n { font-size: 1.15rem; }
    .lap__lights { gap: 9px; top: 26%; }
    .lap__lights i { width: 18px; height: 18px; }
    .lap__cue { font-size: .58rem; bottom: calc(5% + env(safe-area-inset-bottom)); }
    /* Vorschau-Kärtchen dockt unten an (statt mittig) → verdeckt die Strecke nicht */
    .lap__preview { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: none; }
    .lap__preview-img { width: 78px; height: 78px; }
    /* Gestochen scharfes HTML-Schild-Overlay (statt winzigem Canvas-Text) */
    .lap__sign { display: flex; flex-direction: column; align-items: center; gap: 1px; position: absolute; left: 50%; top: 15%; transform: translateX(-50%) translateY(8px); z-index: 5; text-decoration: none; text-align: center; padding: 11px 20px; background: rgba(7,18,15,.88); border: 1px solid var(--mint-300, #56dcc0); border-radius: 16px; box-shadow: 0 12px 44px rgba(0,0,0,.55), 0 0 34px rgba(86,220,192,.22); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); max-width: 88vw; opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
    .lap__sign.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .lap__sign-n { font-family: "Space Mono", ui-monospace, monospace; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #eafff7; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82vw; }
    .lap__sign-p { font-family: "Satoshi", "Sora", sans-serif; font-weight: 800; font-size: 1.85rem; line-height: 1.05; color: var(--mint-300, #56dcc0); }
    .lap__sign-cta { font-family: "Space Mono", ui-monospace, monospace; font-size: .56rem; letter-spacing: .18em; color: rgba(86,220,192,.72); text-transform: uppercase; margin-top: 3px; }
  }
/* END_SECTION:onboard-lap */

/* START_SECTION:premium-brands (INDEX:67) */
.pbrands { position: relative; z-index: 5; padding: clamp(120px, 17vh, 220px) 5vw clamp(14px, 2.5vh, 36px); }
  .pbrands__inner { max-width: 1280px; margin: 0 auto; }
  .pbrands__head { text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
  .pbrands__eyebrow { font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; color: #56dcc0; margin: 0 0 14px; }
  .pbrands__heading { font-family: 'Satoshi', 'Sora', sans-serif; font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: .02em; color: #eaf6f2; margin: 0; }

  /* ----- einreihiges Karussell: keine zweite Reihe — Pfeile blättern durch ----- */
  .pbrands__car { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 20px); }
  .pbrands__track { display: flex; flex: 1; flex-wrap: nowrap; gap: clamp(18px, 3vw, 44px);
    overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 8px 4px 16px; }
  .pbrands__track::-webkit-scrollbar { display: none; }
  .pbrands__arrow { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(86,220,192,.4); background: rgba(2,8,10,.6); color: #56dcc0;
    font-size: 1.5rem; line-height: 1; display: grid; place-items: center; padding: 0 0 4px;
    transition: border-color .25s, box-shadow .25s, color .25s; }
  .pbrands__arrow:hover { border-color: #56dcc0; box-shadow: 0 0 18px rgba(86,220,192,.35); color: #bdfff0; }
  .pbrands__arrow[hidden] { display: none; }
  .pbrands__item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; }

  /* ----- Holo-Pads: jede Marke steht wie die Bikes auf ihrem eigenen Hologramm-Podest.
         Pad poppt auf → Lichtkegel projiziert das Logo hoch (Scanline läuft mit) →
         Logo schwebt dauerhaft über dem Pad und spiegelt sich darin. ----- */
  .pbrands__holo { position: relative; display: block; width: clamp(96px, 9vw, 132px); height: clamp(120px, 11vw, 160px); transition: transform .35s; }
  .pbrands__item:hover .pbrands__holo { transform: translateY(-5px); }

  .pbl-pad { position: absolute; left: 2%; right: 2%; bottom: 0; height: 26px; border-radius: 50%;
    border: 1px solid rgba(86,220,192,.28);
    background: radial-gradient(ellipse at center, rgba(86,220,192,.18), rgba(86,220,192,.05) 55%, transparent 78%);
    box-shadow: 0 0 18px rgba(86,220,192,.22); opacity: 0; transform: scale(.2); transition: box-shadow .35s; }
  .pbl-pad::before { content: ''; position: absolute; inset: 24% 18%; border-radius: 50%; border: 1px solid rgba(86,220,192,.35); }
  /* rotierender Leucht-Sweep auf dem Ring — wie ein Projektor-Radar */
  .pbl-pad::after { content: ''; position: absolute; inset: -1px; border-radius: 50%;
    background: conic-gradient(from 40deg, transparent 0 70%, rgba(134,255,226,.95) 86%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
            mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    filter: drop-shadow(0 0 6px rgba(86,220,192,.8));
    animation: pblSweep 4.5s linear infinite; }
  /* Transform-Rotation statt animiertem Gradient-Winkel → GPU-composited, kein Neu-Rastern pro Frame.
     Pausiert via .live, wenn die Sektion aus dem Viewport ist. */
  @keyframes pblSweep { to { transform: rotate(360deg); } }
  .pbrands__item.in .pbl-pad { animation: pblPad .55s cubic-bezier(.2,.9,.3,1.35) forwards; }
  .pbrands__item:hover .pbl-pad { box-shadow: 0 0 32px rgba(86,220,192,.5); }
  @keyframes pblPad { 0%{opacity:0;transform:scale(.2)} 60%{opacity:1} 100%{opacity:1;transform:scale(1)} }

  .pbl-beam { position: absolute; left: 0; right: 0; bottom: 16px; top: 4%; opacity: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(86,220,192,.42), rgba(86,220,192,.06) 75%, transparent);
    clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); transition: opacity .3s; }
  .pbrands__item.in .pbl-beam { animation: pblBeam 1.3s .25s ease-out forwards; }
  .pbrands__item:hover .pbl-beam { opacity: .3; }
  @keyframes pblBeam { 0%{opacity:0} 12%{opacity:.95} 55%{opacity:.5} 100%{opacity:0} }

  .pbl-real, .pbl-refl { position: absolute; left: 8%; width: 84%; object-fit: contain; }
  .pbl-real { bottom: 32px; height: 60%; opacity: 0; clip-path: inset(100% 0 0 0); }
  .pbrands__grid--invert .pbl-real { filter: brightness(0) invert(1); }
  /* nach dem Hochbeamen: dreht sich dauerhaft wie die Bikes auf dem Drehteller + schwebt leicht
     (Transform-3D, GPU-composited; pausiert via .live außerhalb des Viewports). */
  .pbrands__item.in .pbl-real { animation: pblReal 1.1s .3s cubic-bezier(.3,.7,.3,1) forwards, pblTurn 9s 1.55s linear infinite; }
  @keyframes pblReal { 0%{opacity:.9;clip-path:inset(100% 0 0 0);transform:translateY(16px)}
    58%{clip-path:inset(0);opacity:1;transform:translateY(0)}
    66%{opacity:.35} 72%{opacity:1} 80%{opacity:.6} 100%{opacity:1;clip-path:inset(0);transform:translateY(0)} }
  @keyframes pblTurn {
    0%   { transform: perspective(700px) rotateY(0deg)   translateY(0); }
    25%  { transform: perspective(700px) rotateY(90deg)  translateY(-4px); }
    50%  { transform: perspective(700px) rotateY(180deg) translateY(0); }
    75%  { transform: perspective(700px) rotateY(270deg) translateY(-4px); }
    100% { transform: perspective(700px) rotateY(360deg) translateY(0); } }
  .pbl-refl { bottom: -10px; height: 40%; transform: scaleY(-1); opacity: 0;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.45), transparent 75%);
            mask-image: linear-gradient(to top, rgba(0,0,0,.45), transparent 75%); }
  .pbrands__grid--invert .pbl-refl { filter: brightness(0) invert(1); }
  /* Spiegelung dreht synchron zum Logo mit (gespiegelter Drehteller). */
  .pbrands__item.in .pbl-refl { animation: pblRefl 1.4s .3s ease-out forwards, pblTurnR 9s 1.55s linear infinite; }
  @keyframes pblRefl { 0%{opacity:0} 55%{opacity:0} 100%{opacity:.3} }
  @keyframes pblTurnR {
    0%   { transform: scaleY(-1) perspective(700px) rotateY(0deg); }
    25%  { transform: scaleY(-1) perspective(700px) rotateY(90deg); }
    50%  { transform: scaleY(-1) perspective(700px) rotateY(180deg); }
    75%  { transform: scaleY(-1) perspective(700px) rotateY(270deg); }
    100% { transform: scaleY(-1) perspective(700px) rotateY(360deg); } }

  .pbl-scan { position: absolute; left: -4%; right: -4%; top: 80%; height: 2px; background: #56dcc0;
    box-shadow: 0 0 12px rgba(86,220,192,.9), 0 0 30px rgba(86,220,192,.5); opacity: 0; pointer-events: none; }
  .pbrands__item.in .pbl-scan { animation: pblScan 1.1s .3s cubic-bezier(.3,.7,.3,1) forwards; }
  @keyframes pblScan { 0%{opacity:0;top:80%} 8%{opacity:1} 58%{top:6%;opacity:1} 68%{opacity:0} 100%{opacity:0;top:6%} }

  /* gelegentlicher Idle-Flacker (JS setzt .blip) — Hologramm lebt */
  .pbrands__item.blip .pbrands__holo { animation: pblBlip .42s steps(1) both; }
  @keyframes pblBlip { 0%{opacity:1} 22%{opacity:.45} 38%{opacity:1} 62%{opacity:.7} 100%{opacity:1} }

  /* Performance: Endlos-Animationen pausieren, sobald die Sektion aus dem Viewport ist (JS setzt .live) */
  .pbrands:not(.live) .pbl-pad::after,
  .pbrands:not(.live) .pbl-real,
  .pbrands:not(.live) .pbl-refl { animation-play-state: paused; }
  /* Lite-Modus (schwache Geräte): Radar-Sweep aus, Drehteller dreht nur eine Runde */
  .ip-lite .pbl-pad::after { display: none; }
  .ip-lite .pbl-real, .ip-lite .pbl-refl { animation-iteration-count: 1 !important; }
  .pbrands__item span { font-family: 'Space Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(151, 162, 161, .75); opacity: 0; transition: color .3s, opacity .5s .8s; }
  .pbrands__item.in span { opacity: 1; }
  .pbrands__item:hover span { color: #eaf6f2; }
  .pbrands__wordmark { font-family: 'Satoshi', 'Sora', sans-serif; font-size: 1.1rem; font-weight: 900; letter-spacing: .1em; color: #cfe0db; opacity: 0; transition: opacity .5s; }
  .pbrands__item.in .pbrands__wordmark { opacity: 1; }
  .pbrands__mhead { display: none; }
  @media (max-width: 749px) {
    /* Überschrift kommt vom Helm-Fly-Wort „Our Premium Brands" (mint) — eine eigene mobile
       Überschrift erschiene DOPPELT, daher beide aus. Top-Padding klein, damit das Fly-Wort
       dicht über den Logos sitzt. */
    .pbrands { padding-top: clamp(20px, 4.5vh, 52px); }
    .pbrands__mhead, .pbrands__head { display: none; }
    .pbrands__holo { width: 74px; height: 98px; }
    .pbl-pad { height: 18px; }
    .pbl-real { bottom: 24px; }
    .pbrands__arrow { width: 36px; height: 36px; font-size: 1.2rem; }
    /* Logos drehen sich auch auf dem Handy dauerhaft weiter — ip-lite würde sonst auf 1 Umdrehung kappen. */
    .pbrands__item.in .pbl-real, .pbrands__item.in .pbl-refl { animation-iteration-count: 1, infinite !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pbl-real { opacity: 1 !important; clip-path: none !important; animation: none !important; }
    .pbl-pad { opacity: 1 !important; transform: none !important; animation: none !important; }
    .pbl-pad::after { animation: none; }
    .pbl-refl { opacity: .3 !important; animation: none !important; }
    .pbl-beam, .pbl-scan { display: none; }
    .pbrands__item span, .pbrands__wordmark { opacity: 1; transition: none; }
    .pbrands__item.blip .pbrands__holo { animation: none; }
    .pbrands__track { scroll-behavior: auto; }
  }
/* END_SECTION:premium-brands */

/* START_SECTION:product-faq (INDEX:68) */
/* This FAQ block supersedes the legacy product-story trust strip + "Ready to ride." CTA — hide them. */
  .ps__assure, .ps__outro { display: none !important; }

  .pfaq { padding-block: var(--space-16); background: #fff; color: var(--ink); }
  .pfaq__inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--container-pad, 1.5rem); }

  .pfaq__head { text-align: center; margin-bottom: var(--space-12); }
  .pfaq__kicker { margin: 0 0 var(--space-2); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mint-700, #0e8f7c); }
  .pfaq__h { margin: 0; font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--ink); }

  .pfaq__layout { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-12); align-items: start; }

  .pfaq__rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-8); }
  .pfaq__tab { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent;
    color: var(--neutral-700); font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 600; font-size: .95rem;
    cursor: pointer; transition: background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease; }
  .pfaq__tab:hover { background: var(--neutral-100); color: var(--ink); }
  .pfaq__tab.is-active { background: color-mix(in srgb, var(--mint-500) 12%, #fff); color: var(--mint-800, #0b6b5d); }
  .pfaq__tab-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
  .pfaq__tab-ic .cat-icon { width: 19px; height: 19px; }

  .pfaq__panels { min-width: 0; }
  .pfaq__panel { display: grid; gap: var(--space-3); }

  .pfaq-ship { border: 1px solid color-mix(in srgb, var(--mint-500) 30%, var(--neutral-200)); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mint-500) 6%, #fff); padding: var(--space-4); display: grid; gap: var(--space-3); }
  .pfaq-ship__head { display: flex; align-items: center; gap: .6rem; }
  .pfaq-ship__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--mint-500) 16%, #fff); color: var(--mint-700); }
  .pfaq-ship__ic .cat-icon { width: 18px; height: 18px; }
  .pfaq-ship__t { margin: 0; font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 700; font-size: 1rem; color: var(--ink); }
  .pfaq-ship__s { margin: 0; font-size: .85rem; color: var(--neutral-700); }
  .pfaq-ship__row { display: grid; grid-template-columns: 1fr 120px; gap: var(--space-2); }
  .pfaq-ship__sel, .pfaq-ship__zip { width: 100%; padding: 10px 12px; border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md); background: #fff; font: inherit; color: var(--ink); }
  .pfaq-ship__sel { cursor: pointer; }
  .pfaq-ship__go { justify-self: start; padding: 10px 22px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
    background: var(--mint-500); color: #03312a; font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 700; }
  .pfaq-ship__go:hover { background: var(--mint-600, #12b39a); }
  .pfaq-ship__go:disabled { opacity: .6; cursor: default; }
  .pfaq-ship__out { margin: 0; color: var(--neutral-700); line-height: 1.6; font-size: .92rem; }
  .pfaq-ship__out:empty { display: none; }
  .pfaq-ship__rate { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--mint-500) 20%, var(--neutral-200)); }
  .pfaq-ship__rate strong { font-weight: 700; color: var(--ink); }
  .pfaq-ship__hint { margin: var(--space-2) 0 0; font-size: .85rem; color: var(--neutral-700); }
  .pfaq__cat-h { display: none; align-items: center; gap: .5rem; font-family: "Satoshi", var(--font-sans, sans-serif);
    font-weight: 800; font-size: 1.15rem; margin: 0 0 var(--space-1); color: var(--ink); }

  .pfaq__item { border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: #fff;
    transition: border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease; }
  .pfaq__item:hover { border-color: var(--neutral-300); }
  .pfaq__item[open] { border-color: color-mix(in srgb, var(--mint-500) 45%, #fff);
    box-shadow: 0 6px 22px -12px color-mix(in srgb, var(--mint-500) 55%, transparent); }
  .pfaq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6);
    font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
  .pfaq__q::-webkit-details-marker { display: none; }
  .pfaq__q::after { content: "+"; flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px;
    border: 1px solid var(--neutral-300); border-radius: 50%; font-weight: 400; font-size: 1.2rem; line-height: 1;
    color: var(--neutral-700); transition: all var(--dur-fast, .15s) ease; }
  .pfaq__item[open] .pfaq__q::after { content: "\2212"; border-color: var(--mint-500);
    background: color-mix(in srgb, var(--mint-500) 12%, #fff); color: var(--mint-700); }
  .pfaq__a { padding: 0 var(--space-6) var(--space-6); color: var(--neutral-700); line-height: 1.75; max-width: 66ch; }
  .pfaq__a a { color: var(--mint-700); text-decoration: underline; text-underline-offset: 2px; }

  .pfaq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4);
    margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--neutral-200); text-align: center; }
  .pfaq__foot-q { color: var(--neutral-700); font-weight: 500; }
  .pfaq__foot-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: "Satoshi", var(--font-sans, sans-serif);
    font-weight: 700; text-decoration: none; color: var(--mint-800, #0b6b5d);
    background: color-mix(in srgb, var(--mint-500) 14%, #fff); border: 1px solid color-mix(in srgb, var(--mint-500) 32%, #fff);
    border-radius: var(--radius-pill); padding: 11px 24px; transition: background var(--dur-fast, .15s) ease; }
  .pfaq__foot-cta:hover { background: color-mix(in srgb, var(--mint-500) 22%, #fff); }
  .pfaq__foot-cta .cat-icon { width: 18px; height: 18px; }

  /* Progressive enhancement: only hide inactive panels once JS marks the section. */
  .pfaq.is-enhanced .pfaq__panel { display: none; }
  .pfaq.is-enhanced .pfaq__panel.is-active { display: grid; }

  @media (max-width: 749px) {
    .pfaq__inner { padding-inline: var(--space-4); }
    .pfaq-ship__row { grid-template-columns: 1fr; }
    .pfaq__layout { grid-template-columns: 1fr; gap: var(--space-8); }
    .pfaq__rail { display: none; }
    .pfaq__cat-h { display: flex; }
    .pfaq.is-enhanced .pfaq__panel,
    .pfaq__panel { display: grid; }
    .pfaq__panels { display: grid; gap: var(--space-8); }
  }
/* END_SECTION:product-faq */

/* START_SECTION:product-feature-boxes (INDEX:69) */
.product-fboxes .fboxes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  @media (min-width: 750px) { .product-fboxes .fboxes__grid { grid-template-columns: repeat(var(--fbox-cols, 4), 1fr); } }
  .product-fboxes .fbox { display: flex; flex-direction: column; gap: var(--space-2); }
  .product-fboxes .fbox__media { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-100); }
  .product-fboxes .fbox__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .product-fboxes .fbox__media .placeholder { width: 100%; height: 100%; }
  .product-fboxes .fbox__title { font-weight: 600; text-align: center; color: var(--neutral-700); }
/* END_SECTION:product-feature-boxes */

/* START_SECTION:product-recs (INDEX:71) */
.ps-recs { position: relative; overflow: hidden; color: #fff; padding: clamp(2.4rem, 5.5vw, 4.5rem) 0;
    background-color: #0a0b0d;
    background-image: linear-gradient(rgba(21,205,176,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(21,205,176,.06) 1px, transparent 1px);
    background-size: 46px 46px; }
  .ps-recs:not(:has(.ps-tcard)) { display: none; }

  .ps-recs__head { margin-bottom: clamp(.4rem, 1vw, .7rem); }
  .ps-recs__kick { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mint-400, #15cdb0); }
  .ps-recs__h2 { font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; letter-spacing: -.035em; line-height: 1;
    font-size: clamp(1.8rem, 4.6vw, 3.2rem); margin: .4rem 0 0; color: #fff; }

  /* full-bleed drifting ticker (breaks out of the container; the band's overflow:hidden clips it) */
  .ps-ticker { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  /* generous vertical padding so the hover-lift + shadow aren't clipped by the marquee's overflow:hidden */
  .ps-ticker__track { display: flex; gap: 18px; width: max-content; padding: 24px clamp(1.25rem, 6vw, 5rem) 32px;
    animation: ps-drift 52s linear infinite; }
  .ps-ticker:hover .ps-ticker__track, .ps-ticker:focus-within .ps-ticker__track { animation-play-state: paused; }
  @keyframes ps-drift { to { transform: translateX(-50%); } }

  .ps-tcard { flex: 0 0 230px; display: block; border: 1px solid #20262d; border-radius: 16px; overflow: hidden;
    background: #0c0f12; text-decoration: none; color: #fff;
    transition: transform .3s var(--ease-out, ease), border-color .3s, box-shadow .3s; }
  .ps-tcard:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--mint-400, #15cdb0) 45%, #20262d);
    box-shadow: 0 24px 50px rgba(0,0,0,.5); }
  .ps-tcard__ph { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 42%, #161b20, #0b0e11); }
  .ps-tcard__img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.55)); }
  .ps-tcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 15px; }
  .ps-tcard__name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
  .ps-tcard__price { color: var(--mint-400, #15cdb0); font-weight: 800; white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    .ps-ticker { overflow-x: auto; scrollbar-width: none; }
    .ps-ticker::-webkit-scrollbar { display: none; }
    .ps-ticker__track { animation: none; }
  }
/* END_SECTION:product-recs */

/* START_SECTION:product-story (INDEX:72) */
.ps { --ps-ink: #0a0b0d; display: block; }
  .ps__wrap { max-width: 1180px; margin-inline: auto; }
  .ps [data-reveal] { transition-duration: var(--dur-slow, .6s); }
  .ps [data-reveal].ps__rv-img { transform: translateY(40px) scale(1.09); }
  .ps [data-reveal].ps__rv-img.is-revealed { transform: none; }

  /* Hero */
  .ps__hero { position: relative; overflow: hidden; background: var(--ps-ink); color: #fff;
    padding: clamp(1.8rem, 3.5vw, 3.6rem) clamp(1.25rem, 6vw, 5rem); display: grid; place-items: center; text-align: center; }
  .ps__glow { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
    width: min(82vw, 860px); height: min(82vw, 860px); border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ps-accent) 34%, transparent), transparent 62%); }
  .ps__hero-in { position: relative; z-index: 1; max-width: 940px; display: flex; flex-direction: column; align-items: center; }
  .ps__kicker { margin: 0; font-size: clamp(.72rem, 1.4vw, .84rem); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ps-accent); }
  .ps__headline { font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; font-size: clamp(2.1rem, 6vw, 5rem);
    line-height: 1.0; letter-spacing: -.035em; margin: .5rem 0 0; color: #fff; text-wrap: balance; }
  .ps__sub { margin: .9rem 0 0; font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 500; color: #9aa0a6; max-width: 38ch; }
  .ps__hero-media { margin-top: clamp(1.1rem, 3vw, 2rem); width: min(88vw, 640px); }
  .ps__hero-img { width: 100%; height: auto; filter: drop-shadow(0 38px 64px rgba(0,0,0,.55)); }

  /* Stat band */
  .ps__stats { background: var(--ps-ink); color: #fff; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem); text-align: center; padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.25rem, 6vw, 5rem); border-top: 1px solid rgba(255,255,255,.08); }
  .ps__stat-n { font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; letter-spacing: -.04em; line-height: 1;
    font-size: clamp(2.6rem, 7vw, 5.6rem); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ps-accent) 55%, #fff));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ps__stat-l { margin-top: .7rem; font-size: clamp(.82rem, 1.4vw, 1.02rem); color: #9aa0a6; font-weight: 500; max-width: 22ch; margin-inline: auto; }

  /* Feature rows */
  .ps__features { padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1.25rem, 6vw, 5rem); background: #fff; }
  .ps__h2 { font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 2rem);
    letter-spacing: -.025em; line-height: 1.08; margin: 0 0 clamp(1rem, 2.2vw, 1.6rem); color: var(--ps-ink); text-wrap: balance; }
  .ps__rows { display: flex; flex-direction: column; gap: clamp(1.8rem, 4vw, 3.6rem); }
  .ps__row { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.8rem, 5vw, 5rem); align-items: center; }
  .ps__row--rev .ps__row-media { order: 2; }
  .ps__row--solo { grid-template-columns: 1fr; max-width: 760px; }
  .ps__row-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: #f5f6f7; display: grid; place-items: center; padding: 6%; }
  .ps__row-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
  .ps__row-stmt { margin: 0; font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.18; letter-spacing: -.02em; color: var(--ps-ink); text-wrap: balance; }

  /* Specs */
  .ps__specs { padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(1.25rem, 6vw, 5rem) clamp(2.2rem, 4.5vw, 4rem); background: var(--ps-ink); color: #fff; }
  .ps__h2--on-dark { color: #fff; }
  .ps__grid { margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; }
  @media (max-width: 1000px) { .ps__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px) { .ps__grid { grid-template-columns: repeat(2, 1fr); } }
  .ps__cell { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: clamp(.8rem, 1.4vw, 1.05rem); }
  .ps__cell-k { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ps-accent); }
  .ps__cell-v { margin: .3rem 0 0; font-size: clamp(.88rem, 1.4vw, 1rem); font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.22; }

  /* Outro CTA */
  .ps__outro { position: relative; overflow: hidden; background: var(--ps-ink); color: #fff; text-align: center; padding: clamp(2.6rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem); border-top: 1px solid rgba(255,255,255,.08); }
  .ps__outro-in { position: relative; z-index: 1; }
  .ps__outro-h { font-family: "Satoshi", var(--font-sans, sans-serif); font-weight: 800; font-size: clamp(1.9rem, 6vw, 4.2rem); letter-spacing: -.035em; line-height: 1; margin: .4rem 0 1.4rem; text-wrap: balance; }
  .ps__cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--ps-accent); color: #03312a; font-weight: 800; font-size: clamp(1rem, 2vw, 1.2rem); padding: 14px 34px; border-radius: 999px; text-decoration: none; transition: transform var(--dur-fast, .15s) var(--ease-out, ease), box-shadow var(--dur-base, .3s) var(--ease-out, ease); box-shadow: 0 10px 30px color-mix(in srgb, var(--ps-accent) 30%, transparent); }
  .ps__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--ps-accent) 45%, transparent); }

  /* Assurance band (light — breaks the dark stretch) */
  .ps__assure { background: #fff; color: var(--ps-ink); padding: clamp(2.2rem, 4.5vw, 3.8rem) clamp(1.25rem, 6vw, 5rem); }
  .ps__assure-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); text-align: center; }
  .ps__assure-grid li { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
  .ps__assure-grid li:nth-child(2) { transition-delay: .08s; }
  .ps__assure-grid li:nth-child(3) { transition-delay: .16s; }
  .ps__assure-grid li:nth-child(4) { transition-delay: .24s; }
  .ps__assure-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ps-accent) 14%, #fff); color: color-mix(in srgb, var(--ps-accent) 80%, #000); }
  .ps__assure-ic .cat-icon { width: 26px; height: 26px; }
  .ps__assure-t { font-weight: 700; font-size: .98rem; color: var(--ps-ink); }

  /* Cinematic motion — compositor scroll-timelines + one-shot reveals; reduced-motion + @supports guarded.
     JS-class-driven hides are scoped under .js so content stays visible without JS / for crawlers. */
  .ps__stats .ps__stat:nth-child(2) { transition-delay: .09s; }
  .ps__stats .ps__stat:nth-child(3) { transition-delay: .18s; }
  .ps__row .ps__row-tx[data-reveal] { transition-delay: .12s; }
  .ps__specs .ps__cell:nth-child(2) { transition-delay: .05s; }
  .ps__specs .ps__cell:nth-child(3) { transition-delay: .10s; }
  .ps__specs .ps__cell:nth-child(4) { transition-delay: .15s; }
  .ps__specs .ps__cell:nth-child(5) { transition-delay: .20s; }
  .ps__specs .ps__cell:nth-child(6) { transition-delay: .25s; }
  .ps__specs .ps__cell:nth-child(7) { transition-delay: .30s; }
  .ps__specs .ps__cell:nth-child(8) { transition-delay: .35s; }
  .js .ps [data-reveal].ps__cell { transform: translateY(20px) scale(.97); }
  .js .ps [data-reveal].ps__cell.is-revealed { transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .js .ps__headline[data-reveal] { opacity: 1; transform: none; clip-path: inset(-5% 0 112% 0); transition-property: clip-path; }
    .js .ps__headline[data-reveal].is-revealed { clip-path: inset(-6% 0 -14% 0); }
    .js .ps [data-reveal].ps__rv-box { opacity: 0; transform: scale(1.035); clip-path: inset(0 0 58% 0); transition-property: opacity, transform, clip-path; }
    .js .ps [data-reveal].ps__rv-box.is-revealed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    @supports (animation-timeline: view()) {
      .ps__hero-img { animation: ps-hero linear both; animation-timeline: view(); animation-range: cover; }
      @keyframes ps-hero { from { transform: translateY(-2%) scale(1.06); } to { transform: translateY(-15%) scale(.94); } }
      .ps__glow { animation: ps-glow linear both; animation-timeline: view(); animation-range: cover; }
      @keyframes ps-glow { from { transform: translate(-50%, -42%); } to { transform: translate(-50%, -66%); } }
    }
  }

  /* ============ CINEMATIC style — sticky scroll-scrub (CSS scroll-timeline; degrades to a clean stacked scene) ============ */
  .psc__intro { background: var(--ps-ink); color:#fff; min-height: 0; display:grid; place-items:center; text-align:center; padding: clamp(2rem,4vw,3.4rem) 1.25rem clamp(1.4rem,2.5vw,2rem); }
  .psc__h1 { font-family:"Satoshi", var(--font-sans, sans-serif); font-weight:800; font-size: clamp(2.2rem,7vw,5.6rem); letter-spacing:-.035em; line-height:1; margin:.4rem 0 0; color:#fff; text-wrap:balance; }
  .psc__sub { margin:.5rem 0 0; color:#9aa0a6; font-weight:500; font-size: clamp(1rem,2vw,1.4rem); }
  .psc__hint { display:block; margin-top:.9rem; color:#5b616a; font-size:1.3rem; }
  .psc__scene { position: relative; background: var(--ps-ink); }
  .psc__stage { display:grid; place-items:center; }
  .psc__glow { position:absolute; width:min(82vmin,820px); height:min(82vmin,820px); border-radius:50%; pointer-events:none; background: radial-gradient(circle, color-mix(in srgb, var(--ps-accent) 34%, transparent), transparent 62%); }
  .psc__prod { position:relative; width:min(78vw,760px); }
  .psc__prod-img { width:100%; height:auto; display:block; filter: drop-shadow(0 40px 70px rgba(0,0,0,.55)); }
  .psc__prod-alt { position:absolute; inset:0; }
  .psc__prod-alt .psc__prod-img { position:absolute; inset:0; }
  .psc__cap { color:#fff; }
  .psc__cap p { font-family:"Satoshi", var(--font-sans, sans-serif); font-weight:700; font-size: clamp(1.2rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.02em; }
  .psc__stat { text-align:center; }
  .psc__stat-n { font-family:"Satoshi", var(--font-sans, sans-serif); font-weight:800; font-size: clamp(2.6rem,10vw,8rem); letter-spacing:-.04em; line-height:1; background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ps-accent) 55%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .psc__stat-l { color:#9aa0a6; font-weight:600; margin-top:.5rem; }

  /* ============ BLUEPRINT style — engineering schematic (GSAP-pinned; mobile/no-JS = clean stacked fallback) ============ */
  .psb-grid { background-color: var(--ps-ink); background-image: linear-gradient(rgba(21,205,176,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21,205,176,.07) 1px, transparent 1px); background-size: 44px 44px; }
  .psb__head { grid-row:1; z-index:5; text-align:center; padding-top: clamp(150px,23vh,250px); }
  .psb__kicker { margin:0; font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ps-accent); }
  .psb__h1 { font-family:"Satoshi", var(--font-sans, sans-serif); font-weight:800; font-size: clamp(1.7rem,4.4vw,3.4rem); letter-spacing:-.035em; line-height:1; margin:.35rem 0 0; color:#fff; text-wrap:balance; }
  .psb__sub { margin:.45rem 0 0; color:#9aa0a6; font-weight:500; font-size: clamp(.95rem,1.7vw,1.25rem); }
  .psb__scene { position:relative; }
  .psb__stage { position:relative; overflow:hidden; display:grid; grid-template-rows:auto 1fr; justify-items:center; color:#fff; padding: 0 1.25rem clamp(1.5rem,3vw,2.5rem); }
  .psb__frame { position:relative; grid-row:2; align-self:center; width:min(90vw,800px); aspect-ratio:16/10; margin:0 auto; display:grid; place-items:center; }
  .psb__prod { grid-area:1/1; z-index:1; width:58%; }
  .psb__prod-img { width:100%; height:auto; display:block; filter: drop-shadow(0 30px 52px rgba(0,0,0,.55)); }
  .psb__scan { position:absolute; left:0; right:0; top:0; height:26%; z-index:2; pointer-events:none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ps-accent) 20%, transparent), transparent); }
  .psb__svg { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
  .psb__line { stroke: var(--ps-accent); stroke-width:.32; opacity:.85; }
  .psb__dot { position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background: var(--ps-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ps-accent) 20%, transparent); z-index:4; }
  .psb__lab { position:absolute; z-index:4; max-width: 180px; font-family: ui-monospace,"SF Mono",Menlo,monospace; }
  .psb__lab--r { transform: translateY(-50%); text-align: left; }
  .psb__lab--l { transform: translate(-100%, -50%); text-align: right; }
  .psb__lab b { display:block; font-weight:500; font-size:.72rem; letter-spacing:.04em; color: var(--ps-accent); }
  .psb__lab span { display:block; margin-top:2px; font-family:"Satoshi", var(--font-sans, sans-serif); font-weight:700; font-size: clamp(.95rem,1.6vw,1.2rem); color:#fff; line-height:1.2; }
  .psb__readout { position:absolute; left:6vw; bottom:6vh; z-index:4; font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size:.76rem; letter-spacing:.05em; color:#6b7a86; }
  .psb__num { color: var(--ps-accent); font-weight:600; }
  @media (max-width:700px) {
    .psb__svg, .psb__scan, .psb__dot { display:none; }
    .psb__stage { display:block; padding: clamp(1.5rem,6vw,2.5rem) 1.25rem; }
    .psb__head { padding-top:0; margin-bottom:1.5rem; }
    .psb__frame { width:auto; aspect-ratio:auto; display:block; margin:0 auto; }
    .psb__prod { width:min(80vw,360px); margin:0 auto; }
    .psb__lab, .psb__lab--l, .psb__lab--r { position:static; transform:none; max-width:none; text-align:center; margin:.4rem auto 0; }
    .psb__readout { position:static; text-align:center; margin-top:1rem; }
  }

  /* Mobile / no-scroll-timeline fallback: clean stacked scene, everything visible (SEO + no-JS safe) */
  .psc__scene { padding: clamp(1.8rem,4vw,3.2rem) 1.25rem; }
  .psc__stage { gap: clamp(1.5rem,4vw,2.4rem); text-align:center; }
  .psc__prod-alt { display:none; }
  @media (min-width:701px) {
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        .psc__scene { height: 116vh; padding:0; view-timeline-name: --psc; view-timeline-axis: block; }
        .psc__stage { position: sticky; top:0; height:100vh; overflow:hidden; }
        .psc__prod-alt { display:block; opacity:0; }
        .psc__cap { position:absolute; max-width:320px; opacity:0; }
        .psc__cap--l { left:6vw; top:42%; } .psc__cap--r { right:6vw; top:46%; text-align:right; }
        .psc__stat { position:absolute; opacity:0; }
        .psc__glow, .psc__prod, .psc__prod-alt, .psc__cap, .psc__stat { animation-timeline: --psc; animation-fill-mode: both; animation-timing-function: linear; }
        /* Dramatic entrance (like the GSAP mock): product hurtles in huge + rotated, then settles; stays visible. */
        .psc__prod { animation-name: psc-prod; animation-range: cover 0% cover 100%; }
        @keyframes psc-prod { 0%{transform:scale(1.55) rotate(-16deg);opacity:0;animation-timing-function:cubic-bezier(.16,.84,.3,1)} 14%{transform:translateY(0) scale(1) rotate(0deg);opacity:1} 45%{transform:translateX(13%) translateY(0) scale(1) rotate(0deg)} 75%{transform:translateX(0) translateY(0) scale(1.05) rotate(5deg)} 100%{transform:translateX(0) translateY(20%) scale(1.07) rotate(4deg)} }
        .psc__glow { animation-name: psc-glow; animation-range: cover 0% cover 42%; }
        @keyframes psc-glow { 0%{transform:scale(.35);opacity:0;animation-timing-function:cubic-bezier(.16,.84,.3,1)} 50%{opacity:1} 100%{transform:scale(1.14);opacity:1} }
        .psc__cap--l { animation-name: psc-c1; animation-range: cover 24% cover 52%; }
        @keyframes psc-c1 { 0%{opacity:0;transform:translateX(-64px) scale(.95);animation-timing-function:cubic-bezier(.16,.84,.3,1)} 38%{opacity:1;transform:none} 85%{opacity:1} 100%{opacity:0} }
        .psc__cap--r { animation-name: psc-c2; animation-range: cover 44% cover 70%; }
        @keyframes psc-c2 { 0%{opacity:0;transform:translateX(64px) scale(.95);animation-timing-function:cubic-bezier(.16,.84,.3,1)} 38%{opacity:1;transform:none} 85%{opacity:1} 100%{opacity:0} }
        /* Colour swap (Black→Rossa-Red) syncs with the RIGHT caption fading in. */
        .psc__prod-alt { animation-name: psc-alt; animation-range: cover 44% cover 66%; }
        @keyframes psc-alt { 0%{opacity:0} 60%{opacity:1} 100%{opacity:1} }
        .psc__stat { animation-name: psc-stat; animation-range: cover 82% cover 100%; }
        @keyframes psc-stat { 0%{opacity:0;transform:scale(.55);animation-timing-function:cubic-bezier(.34,1.56,.64,1)} 75%{opacity:1;transform:scale(1)} 100%{opacity:1} }
      }
    }
  }

  @media (max-width: 760px) {
    .ps__row { grid-template-columns: 1fr; gap: 1.2rem; }
    .ps__row--rev .ps__row-media { order: 0; }
    .ps__hero-media { width: 92vw; }
  }
  @media (max-width: 560px) {
    .ps__stats { grid-template-columns: 1fr; gap: 2.4rem; }
  }
/* END_SECTION:product-story */

/* START_SECTION:saved-wall (INDEX:78) */
*{box-sizing:border-box}
  .saved-wall{
    --bg0:#08080a; --bg1:#0c0c10; --panel:#141419;
    --mint:#15cdb0; --mint-3:#5fe0cb; --mint-2:#93ebd7; --mint-6:#0d8473;
    --ink:#04140f;
    --tx:#f4f4f6; --tx2:#b9b9c2; --tx-dim:#9b9ba6; --tx-faint:#6c6c78;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
    --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.075);
    --amber:#f5a623; --red:#e5484d; --blue:#5b9dff; --cyan:#35e0d5;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --disp:"Satoshi Variable","Satoshi",system-ui,-apple-system,sans-serif;
    --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,monospace;
    background:var(--bg0); color:var(--tx); font-family:var(--sans);
    min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
    position:relative; overflow:hidden;
  }
  .saved-wall ::selection{background:rgba(21,205,176,.3);color:#fff}
  .saved-wall button{font-family:inherit;cursor:pointer}
  .saved-wall::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(70% 55% at 84% -6%,rgba(21,205,176,.09),transparent 55%)}
  .btn{border:0;border-radius:999px;font-weight:700;transition:.18s;cursor:pointer}
  .btn--mint{color:var(--ink);background:linear-gradient(140deg,var(--mint-3),var(--mint));box-shadow:0 10px 24px -12px rgba(21,205,176,.85)}
  .btn--mint:hover{filter:brightness(1.06)}
  .btn--ghost{color:var(--tx);background:var(--glass);border:1px solid var(--line2)}
  .btn--ghost:hover{background:var(--glass2)}
  .heart{width:16px;height:16px;fill:var(--mint)}

  .wow{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(18px,5vw,56px) 90px}

  /* ===== HERO: title left · status panel right ===== */
  .wow-hero{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:center;margin-bottom:22px}
  .b__eye{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mint-2);margin:0 0 14px;display:flex;align-items:center;gap:10px}
  .b__eye .tick{width:22px;height:1px;background:linear-gradient(90deg,var(--mint),transparent)}
  .b__ttl{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(42px,6.5vw,80px);letter-spacing:-.045em;line-height:.92}
  .b__ttl em{font-style:italic;font-weight:500;color:var(--tx-dim)}
  .b__sub{margin:16px 0 0;max-width:440px;color:var(--tx2);font-size:14.5px;line-height:1.55}

  .stat{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#141419,#0f0f13);padding:22px;position:relative;overflow:hidden}
  .stat__eye{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-faint);display:flex;align-items:center;gap:8px;margin:0 0 12px}
  .stat__eye .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 2s ease infinite}
  @keyframes pulse{50%{opacity:.35}}
  .stat__val{font-family:var(--disp);font-weight:900;font-size:38px;letter-spacing:-.03em;line-height:1}
  .stat__sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);margin-top:5px}
  .stat__row{display:flex;align-items:center;gap:16px;margin:16px 0 4px}
  .stat__donut{width:96px;height:96px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center;
    background:conic-gradient(var(--mint) 0 var(--a),var(--blue) var(--a) var(--b),#2b2b34 var(--b) 100%)}
  .stat__donut::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#101015}
  .stat__donutC{position:relative;z-index:1;text-align:center}
  .stat__donutC b{font-family:var(--disp);font-weight:800;font-size:20px;display:block;line-height:1}
  .stat__donutC span{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint)}
  .stat__legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
  .stat__legend div{display:flex;align-items:center;gap:9px;color:var(--tx2)}
  .stat__legend i{width:9px;height:9px;border-radius:3px;flex:none}
  .stat__legend b{margin-left:auto;font-family:var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
  .stat__div{height:1px;background:var(--line);margin:16px 0 14px}
  .gauge+.gauge{margin-top:13px}
  .gauge__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .gauge__top span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint)}
  .gauge__top b{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--mint-2);font-variant-numeric:tabular-nums}
  .gauge__bar{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
  .gauge__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint-6),var(--mint),var(--mint-3));box-shadow:0 0 12px -2px var(--mint)}

  /* ===== filter bar ===== */
  .wow-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
  .wow-filter__l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-faint);margin-right:4px}
  .chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);color:var(--tx2);transition:.16s}
  .chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
  .chip.on{background:linear-gradient(160deg,rgba(21,205,176,.2),rgba(21,205,176,.05));border-color:rgba(21,205,176,.55);color:#fff}
  .wow-filter__val{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx-faint)}
  .wow-filter__val b{color:var(--mint-2)}

  /* ===== bento wall (unchanged Wall of Wants) ===== */
  .b__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
  .bc{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#17171d,#111116);transition:.32s cubic-bezier(.2,.8,.2,1)}
  .bc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac,#15cdb0) 50%,transparent);box-shadow:0 30px 60px -34px #000,0 0 60px -30px var(--ac,#15cdb0)}
  .bc__wash{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 30%,color-mix(in srgb,var(--ac,#15cdb0) 26%,transparent),transparent 68%);opacity:.6;pointer-events:none}
  .bc__heart{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,10,.55);border:1px solid var(--line2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .bc__no{position:absolute;top:13px;left:15px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--tx-faint)}
  .bc--feat{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;padding:26px}
  .bc--feat .bc__kitpieces{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;padding-top:20px}
  .bc--feat .bc__kitpieces img{width:44%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));margin:0 -8%}
  .bc--feat .bc__kitpieces img:nth-child(1){transform:translateY(6px) rotate(-5deg);z-index:1}
  .bc--feat .bc__kitpieces img:nth-child(2){transform:translateY(-14px) scale(1.12);z-index:3}
  .bc--feat .bc__kitpieces img:nth-child(3){transform:translateY(10px) rotate(5deg);z-index:2}
  .bc__ov{position:relative;z-index:2}
  .bc__tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-2);background:rgba(8,8,10,.5);border:1px solid rgba(21,205,176,.3);padding:5px 11px;border-radius:999px;margin-bottom:12px}
  .bc__ttl{margin:0;font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:-.03em;line-height:1}
  .bc__meta{margin:8px 0 16px;color:var(--tx2);font-size:13px}
  .bc__buy{display:flex;align-items:center;gap:12px}
  .bc__price{font-family:var(--disp);font-weight:800;font-size:24px}
  .bc--tall{grid-row:span 2;display:flex;flex-direction:column}
  .bc__media{position:relative;flex:1;min-height:150px;display:grid;place-items:center;padding:22px}
  .bc__media img{position:relative;z-index:1;max-width:82%;max-height:200px;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));transition:.4s cubic-bezier(.2,.8,.2,1)}
  .bc:hover .bc__media img{transform:scale(1.07) rotate(-1.5deg)}
  .bc__cap{position:relative;z-index:2;padding:0 18px 18px}
  .bc__brand{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-2);margin:0 0 4px}
  .bc__name{margin:0 0 10px;font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bc__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .bc__foot .p{font-family:var(--disp);font-weight:800;font-size:18px}
  .bc__foot .a{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:21px;line-height:0;padding-bottom:3px;background:var(--glass2);border:1px solid var(--line2);color:var(--tx);cursor:pointer;transition:.18s}
  .bc__foot .a:hover{background:var(--mint);color:var(--ink);border-color:transparent;transform:scale(1.06)}
  .bc--wide{grid-column:span 2;display:flex;align-items:center;gap:18px;padding:20px}
  .bc--wide .bc__strip{display:flex;gap:2px;flex:none}
  .bc--wide .bc__strip img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
  .bc--wide .bc__ov{flex:1;min-width:0}

  /* ===== responsive ===== */
  @media(max-width:940px){
    .wow-hero{grid-template-columns:1fr;gap:24px}
    .stat{max-width:420px}
    .b__grid{grid-template-columns:repeat(2,1fr)}
    .bc--feat{grid-column:span 2}
    .bc--wide{grid-column:span 2}
  }
  @media(max-width:600px){
    .b__grid{grid-template-columns:1fr}
    .bc--feat,.bc--wide{grid-column:span 1}
    .bc--feat .bc__kitpieces img{width:40%}
    .bc--wide{flex-wrap:wrap}
    .wow-filter__val{width:100%;margin-left:0;order:5}
  }
  @media(prefers-reduced-motion:reduce){.saved-wall *{animation:none!important;transition:none!important}}

  /* empty state */
  .saved-wall .sw-empty{grid-column:1/-1;text-align:center;padding:60px 20px;border:1px dashed var(--line2);border-radius:20px;background:rgba(255,255,255,.02)}
  .saved-wall .sw-empty h3{font-family:var(--disp);font-weight:800;font-size:24px;margin:0 0 10px}
  .saved-wall .sw-empty p{color:var(--tx2);max-width:420px;margin:0 auto 20px;line-height:1.55}
/* END_SECTION:saved-wall */

/* START_SECTION:scroll-portal (INDEX:80) */
.prt { position:relative; height:320vh; background:#050607; }
  .prt__stage { position:sticky; top:0; height:100vh; overflow:hidden; background:#050607; }
  .prt__back, .prt__front { position:absolute; inset:0; background-size:cover; background-position:center; will-change:transform; }
  .prt__back { background-image: var(--prt-back); }
  .prt__front { background-image: var(--prt-front);
    -webkit-mask-image: radial-gradient(var(--hole,0px) calc(var(--hole,0px) * 0.72) at var(--fx,50%) var(--fy,55%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 68%, #000 100%);
    mask-image: radial-gradient(var(--hole,0px) calc(var(--hole,0px) * 0.72) at var(--fx,50%) var(--fy,55%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 68%, #000 100%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
  .prt__content { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; pointer-events:none; text-shadow:0 2px 40px rgba(0,0,0,.6); }
  .prt__eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--mint-400); margin-bottom:var(--space-3); }
  .prt__h1 { font-family:"Satoshi"; font-size:clamp(3rem,10vw,8rem); font-weight:800; letter-spacing:-.04em; margin:0; }
  .prt__cue { margin-top:var(--space-8); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); animation:prt-bob 2s ease-in-out infinite; }
  @keyframes prt-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
  .prt__flash { position:absolute; inset:0; z-index:3; background:var(--mint-500); opacity:0; pointer-events:none; }
  .no-js .prt { height:100vh; } .no-js .prt__front { -webkit-mask-image:none; mask-image:none; }
/* END_SECTION:scroll-portal */

/* START_SECTION:size-finder (INDEX:83) */
.sfinder { padding-block: var(--space-12); }
    .sfinder__inner { max-width: 640px; margin-inline: auto; text-align: center; }
    .sfinder__intro { color: var(--neutral-700); margin-top: var(--space-3); }
    .sfinder__box { margin-top: var(--space-8); padding: var(--space-8); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: #fff; text-align: left; }
    .sfinder__step[hidden] { display: none; }
    .sfinder__q { font-weight: 700; font-family: "Satoshi", sans-serif; margin: 0 0 var(--space-4); }
    .sfinder__cats { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .sfinder__cat { font: inherit; font-weight: 600; padding: var(--space-3) var(--space-5); border: 1px solid var(--neutral-300); border-radius: var(--radius-pill); background: #fff; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
    .sfinder__cat:hover { border-color: var(--mint-500); background: var(--neutral-100); }
    .sfinder__back { background: none; border: 0; font: inherit; color: var(--neutral-500); cursor: pointer; padding: 0; margin-bottom: var(--space-4); }
    .sfinder__label { display: block; font-weight: 600; margin-bottom: var(--space-3); }
    .sfinder__inputrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    .sfinder__input { font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); width: 140px; }
    .sfinder__unit { color: var(--neutral-500); }
    .sfinder__help { color: var(--neutral-500); font-size: .85rem; margin: var(--space-3) 0 0; }
    .sfinder__result { font-size: 1.05rem; }
    .sfinder__rlabel { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); }
    .sfinder__result strong { display: block; font-family: "Satoshi", sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--mint-700); margin: var(--space-1) 0 var(--space-2); }
    .sfinder__result .sfinder__hint { color: var(--neutral-700); }
    .sfinder__cta { margin-top: var(--space-4); }
    .sfinder__restart { display: inline-block; margin-top: var(--space-4); margin-left: var(--space-3); background: none; border: 0; font: inherit; color: var(--mint-700); font-weight: 700; cursor: pointer; }
/* END_SECTION:size-finder */

/* START_SECTION:store-3d (INDEX:84) */
.st3d { position:relative; background:#050607; }
  .st3d__stage { position:sticky; top:0; height:100vh; overflow:hidden; }
  .st3d__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .st3d__intro { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; pointer-events:none; transition: opacity .6s ease; }
  .st3d__eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-3); }
  .st3d__h1 { font-family:"Satoshi"; font-size: clamp(3rem, 11vw, 9rem); font-weight:800; letter-spacing:-.04em; margin:0; text-shadow:0 4px 60px rgba(0,0,0,.6); }
  .st3d__cue { margin-top: var(--space-8); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(255,255,255,.7); animation: st3d-bob 2s ease-in-out infinite; }
  @keyframes st3d-bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }
  .st3d__label { position:absolute; z-index:3; transform:translate(-50%,-130%); background: rgba(8,9,10,.82); backdrop-filter: blur(6px); border:1px solid color-mix(in srgb, var(--mint-500) 50%, transparent); color:#fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size:.82rem; font-weight:700; pointer-events:none; white-space:nowrap; }
  .st3d__flash { position:absolute; inset:0; z-index:4; background: var(--mint-500); opacity:0; pointer-events:none; }
  .st3d.is-pointer .st3d__canvas { cursor:pointer; }
  .no-js .st3d { height:100vh; }
/* END_SECTION:store-3d */

/* START_SECTION:store-locator (INDEX:85) */
.locator { padding-block: var(--space-12); }
    .locator__inner { max-width: 880px; margin-inline: auto; }
    .locator__intro { color: var(--neutral-700); margin-top: var(--space-3); }
    .locator__controls { display: flex; gap: var(--space-3); margin: var(--space-6) 0; flex-wrap: wrap; }
    .locator__search { flex: 1 1 240px; font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); }
    .locator__country { font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); }
    .locator__empty { color: var(--neutral-500); }
    .locator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
    @media (min-width: 700px) { .locator__list { grid-template-columns: 1fr 1fr; } }
    .locator__item { padding: var(--space-5); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); }
    .locator__item[hidden] { display: none; }
    .locator__name { margin: 0 0 var(--space-1); font-size: 1.05rem; }
    .locator__addr { color: var(--neutral-700); font-size: .9rem; margin: 0 0 var(--space-3); }
    .locator__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
    .locator__links a { color: var(--mint-700); font-weight: 600; text-decoration: none; font-size: .85rem; }
/* END_SECTION:store-locator */

/* START_SECTION:store-walkthrough (INDEX:86) */
.wt { position: relative; height: var(--wt-height, 400vh); background: var(--ink); }
    .wt__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
    .wt__canvas, .wt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .wt__poster--placeholder { background: radial-gradient(120% 120% at 50% 30%, #14322c 0%, var(--ink) 70%); }
    .wt__intro, .wt__outro { position: absolute; left: 0; right: 0; text-align: center; color: #fff; z-index: 2; padding: var(--space-8); pointer-events: none; }
    .wt__intro { top: 12%; }
    .wt__outro { bottom: 12%; }
    .wt__stoppers { position: absolute; inset: 0; z-index: 3; }
    .wt__stopper { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%) translateY(12px); width: min(460px, 88vw); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
    .js .wt__stopper { opacity: 0; }
    .wt__stopper.wt--on { transform: translateX(-50%) translateY(0); }
    .wt__eyebrow { font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mint-700); }
    .wt__heading { margin: var(--space-1) 0 var(--space-2); }
    .wt__text { color: var(--neutral-700); font-size: .95rem; margin: 0 0 var(--space-4); }
    .wt__cta { width: 100%; justify-content: center; }
    .wt--static { height: auto; background: var(--surface); }
    .wt--static .wt__stage { position: relative; height: auto; min-height: 60vh; }
    .wt--static .wt__intro, .wt--static .wt__outro { position: static; color: var(--ink); }
    .wt--static .wt__stoppers { position: static; display: grid; gap: var(--space-6); padding: var(--space-8); grid-template-columns: 1fr; }
    @media (min-width: 700px) { .wt--static .wt__stoppers { grid-template-columns: repeat(2, 1fr); } }
    .wt--static .wt__stopper { position: static; transform: none; opacity: 1; width: auto; }
    @media (prefers-reduced-motion: reduce) { .wt__stopper { transition: none; } }
/* END_SECTION:store-walkthrough */

/* START_SECTION:support-hub (INDEX:88) */
.support-hub {
      --sh-ink: #06090b; --sh-ink2: #0a0f12; --sh-card: #0e1418; --sh-line: rgba(255,255,255,.08);
      --sh-txt: #eef2f4; --sh-dim: #93a1a8; --sh-mint: #35e3c7; --sh-mint-deep: #0fae95; --sh-amber: #ffb454;
      --sh-mono: ui-monospace,'SF Mono',Menlo,monospace;
      --sh-wrap: 1180px;
      display: block;
      background: var(--sh-ink);
      color: var(--sh-txt);
      font-family: inherit;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .support-hub a { color: inherit; text-decoration: none; }
    .support-hub button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    .support-hub input, .support-hub textarea, .support-hub select { font: inherit; color: var(--sh-txt); background: transparent; border: none; outline: none; width: 100%; }
    .support-hub .sh-wrap { max-width: var(--sh-wrap); margin-inline: auto; padding-inline: clamp(18px,4vw,34px); }
    .support-hub .sh-rev { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
    html.js .support-hub .sh-rev { opacity: 0; transform: translateY(22px); }
    html.js .support-hub .sh-rev.in { opacity: 1; transform: none; }

    /* ---------------- HERO ---------------- */
    .support-hub .sh-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
    .support-hub .sh-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center right; animation: sh-kb 26s ease-in-out infinite alternate; transform-origin: 70% 50%; }
    @keyframes sh-kb { from { transform: scale(1.03); } to { transform: scale(1.12); } }
    .support-hub .sh-hero__grad { position: absolute; inset: 0; background:
      linear-gradient(90deg, rgba(6,9,11,.96) 0%, rgba(6,9,11,.82) 30%, rgba(6,9,11,.42) 62%, rgba(6,9,11,.25) 100%),
      linear-gradient(0deg, rgba(6,9,11,.95) 2%, transparent 34%); }
    .support-hub .sh-hero__beam { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,200,120,.05) 52%, transparent 62%); mix-blend-mode: screen; animation: sh-beam 7s ease-in-out infinite; }
    @keyframes sh-beam { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
    .support-hub .sh-hero__in { position: relative; z-index: 3; width: 100%; padding-block: 120px 70px; }
    .support-hub .sh-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sh-mint); font-weight: 700; }
    .support-hub .sh-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-mint); box-shadow: 0 0 12px var(--sh-mint); animation: sh-blink 1.6s infinite; }
    @keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
    .support-hub .sh-hero__title { font-size: clamp(42px,7.2vw,86px); font-weight: 800; letter-spacing: -.03em; line-height: .98; margin: 18px 0 18px; max-width: 14ch; }
    .support-hub .sh-hero__title span { color: var(--sh-mint); }
    .support-hub .sh-hero__lede { font-size: clamp(15px,1.5vw,18px); color: #cdd6da; line-height: 1.55; max-width: 50ch; }
    .support-hub .sh-hero__lede b { color: #fff; font-weight: 600; }
    .support-hub .sh-hero__scroll { position: absolute; z-index: 4; right: clamp(18px,4vw,44px); bottom: 26px; display: inline-flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: color .25s; }
    .support-hub .sh-hero__scroll:hover { color: #fff; }
    .support-hub .sh-hero__scroll svg { width: 22px; height: 22px; animation: sh-bob 1.8s ease-in-out infinite; }
    @keyframes sh-bob { 0%,100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(7px); opacity: 1; } }

    /* ask bar */
    .support-hub .sh-ask { margin-top: 30px; max-width: 640px; }
    .support-hub .sh-ask__label { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-dim); margin-bottom: 9px; }
    .support-hub .sh-ask__bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 16px;
      background: rgba(12,18,22,.72); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); transition: .25s; }
    .support-hub .sh-ask__bar:focus-within { border-color: var(--sh-mint); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 4px rgba(53,227,199,.14); }
    .support-hub .sh-ask__bar svg { width: 20px; height: 20px; color: var(--sh-mint); flex: none; }
    .support-hub .sh-ask__bar input { font-size: 16px; }
    .support-hub .sh-ask__bar button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 11px; font-weight: 800; letter-spacing: .04em; font-size: 14px; color: #04110d; background: linear-gradient(180deg,var(--sh-mint),var(--sh-mint-deep)); box-shadow: 0 10px 26px rgba(53,227,199,.3); transition: .2s; }
    .support-hub .sh-ask__bar button:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(53,227,199,.44); }
    .support-hub .sh-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 13px; color: var(--sh-dim); }
    .support-hub .sh-trust .sh-star { color: var(--sh-amber); }

    /* ---------------- SECTION shells ---------------- */
    .support-hub .sh-block { padding-block: clamp(56px,8vw,96px); position: relative; }
    .support-hub .sh-head2 { max-width: 640px; margin-bottom: 34px; }
    .support-hub .sh-head2 .sh-k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sh-mint); font-weight: 700; }
    .support-hub .sh-head2 h2 { font-size: clamp(26px,3.6vw,40px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; line-height: 1.05; }
    .support-hub .sh-head2 p { color: var(--sh-dim); font-size: 15.5px; line-height: 1.55; }

    /* self-service grid */
    .support-hub .sh-cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
    .support-hub .sh-cat { position: relative; border: 1px solid var(--sh-line); border-radius: 18px; padding: 20px 22px 8px; background:
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); transition: border-color .28s, background .28s; overflow: hidden; }
    .support-hub .sh-cat::after { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: linear-gradient(180deg,rgba(53,227,199,.5),transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: .28s; pointer-events: none; }
    .support-hub .sh-cat:hover { border-color: transparent; background: linear-gradient(180deg,rgba(53,227,199,.07),rgba(255,255,255,.01)); }
    .support-hub .sh-cat:hover::after { opacity: 1; }
    .support-hub .sh-cat .sh-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(53,227,199,.1); border: 1px solid rgba(53,227,199,.28); color: var(--sh-mint); margin-bottom: 14px; }
    .support-hub .sh-cat .sh-ic svg { width: 23px; height: 23px; }
    .support-hub .sh-cat h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
    .support-hub .sh-faq { display: grid; }
    .support-hub .sh-faq__item { border-top: 1px solid var(--sh-line); }
    .support-hub .sh-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--sh-txt); transition: color .2s; }
    .support-hub .sh-faq summary::-webkit-details-marker { display: none; }
    .support-hub .sh-faq summary:hover { color: var(--sh-mint); }
    .support-hub .sh-faq summary svg { width: 16px; height: 16px; flex: none; color: var(--sh-mint); transition: transform .25s; }
    .support-hub .sh-faq__item[open] summary svg { transform: rotate(180deg); }
    .support-hub .sh-faq__a { padding: 0 0 13px; color: var(--sh-dim); font-size: 12.75px; line-height: 1.55; }
    .support-hub .sh-faq__a p { margin: 0; }
    .support-hub .sh-faq__a p + p { margin-top: 7px; }
    .support-hub .sh-faq__a a { color: var(--sh-mint); text-decoration: underline; text-underline-offset: 2px; }

    /* channels */
    .support-hub .sh-chans { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
    .support-hub .sh-chan { border: 1px solid var(--sh-line); border-radius: 18px; padding: 24px; background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); transition: .25s; display: flex; flex-direction: column; gap: 14px; }
    .support-hub .sh-chan:hover { border-color: var(--sh-mint); transform: translateY(-4px); }
    .support-hub .sh-chan__top { display: flex; align-items: center; justify-content: space-between; }
    .support-hub .sh-chan .sh-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(53,227,199,.1); border: 1px solid rgba(53,227,199,.28); color: var(--sh-mint); }
    .support-hub .sh-chan .sh-ic svg { width: 23px; height: 23px; }
    .support-hub .sh-chan__status { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3be37a; display: inline-flex; align-items: center; gap: 6px; }
    .support-hub .sh-chan__status i { width: 8px; height: 8px; border-radius: 50%; background: #3be37a; box-shadow: 0 0 8px #3be37a; animation: sh-blink 1.6s infinite; }
    .support-hub .sh-chan h3 { font-size: 18px; font-weight: 800; }
    .support-hub .sh-chan__val { color: var(--sh-mint); font-weight: 600; font-size: 15px; }
    .support-hub .sh-chan__meta { color: var(--sh-dim); font-size: 13px; line-height: 1.5; }
    .support-hub .sh-chan__go { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--sh-txt); display: inline-flex; align-items: center; gap: 7px; }
    .support-hub .sh-chan__go::after { content: "→"; color: var(--sh-mint); transition: .2s; }
    .support-hub .sh-chan:hover .sh-chan__go::after { transform: translateX(4px); }

    /* support request form */
    .support-hub .sh-reqwrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start;
      border: 1px solid var(--sh-line); border-radius: 24px; padding: clamp(24px,3vw,40px);
      background: radial-gradient(600px 300px at 100% 0,rgba(53,227,199,.06),transparent 60%), linear-gradient(180deg,var(--sh-card),var(--sh-ink2)); }
    .support-hub .sh-aside .sh-k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sh-mint); font-weight: 700; }
    .support-hub .sh-aside h2 { font-size: clamp(24px,3vw,34px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 14px; line-height: 1.06; }
    .support-hub .sh-aside p { color: var(--sh-dim); line-height: 1.6; font-size: 14.5px; margin-bottom: 20px; }
    .support-hub .sh-assure { display: grid; gap: 12px; }
    .support-hub .sh-assure div { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #c3ccd0; }
    .support-hub .sh-assure svg { width: 19px; height: 19px; color: var(--sh-mint); flex: none; margin-top: 1px; }
    .support-hub .sh-assure b { color: #fff; }
    .support-hub .sh-frow { display: grid; gap: 7px; }
    .support-hub .sh-frow label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--sh-dim); }
    .support-hub .sh-frow label span { color: var(--sh-mint); }
    .support-hub .sh-field { border: 1px solid var(--sh-line); border-radius: 12px; padding: 11px 15px; background: rgba(0,0,0,.28); transition: .2s; display: flex; align-items: center; gap: 10px; }
    .support-hub .sh-field:focus-within { border-color: var(--sh-mint); box-shadow: 0 0 0 3px rgba(53,227,199,.14); }
    .support-hub .sh-field select { appearance: none; cursor: pointer; }
    .support-hub .sh-field select option { background: #0c1216; }
    .support-hub .sh-req { display: grid; gap: 14px; }
    .support-hub .sh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .support-hub textarea { resize: vertical; min-height: 96px; }
    .support-hub .sh-submit { margin-top: 2px; justify-self: start; display: inline-flex; align-items: center; gap: 11px; padding: 15px 30px; border-radius: 13px; font-weight: 800; letter-spacing: .04em; font-size: 15px; color: #04110d; background: linear-gradient(180deg,var(--sh-mint),var(--sh-mint-deep)); box-shadow: 0 14px 34px rgba(53,227,199,.32); transition: .2s; }
    .support-hub .sh-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(53,227,199,.5); }
    .support-hub .sh-note { font-size: 12.5px; color: var(--sh-dim); line-height: 1.5; }
    .support-hub .sh-errors { color: #ff8a8a; font-weight: 600; margin-bottom: 14px; }
    .support-hub [data-sh-fields][hidden] { display: none; }
    /* success */
    .support-hub .sh-ok { display: none; border: 1px solid var(--sh-mint); border-radius: 16px; padding: 26px; background: linear-gradient(180deg,rgba(53,227,199,.1),rgba(53,227,199,.02)); text-align: center; }
    .support-hub .sh-ok.show { display: block; animation: sh-pop .5s cubic-bezier(.2,1.4,.4,1); }
    @keyframes sh-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
    .support-hub .sh-ok__big { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
    .support-hub .sh-ok p { color: var(--sh-dim); font-size: 13.5px; line-height: 1.5; }

    /* bottom strip */
    .support-hub .sh-strip { border-top: 1px solid var(--sh-line); padding-block: 34px; }
    .support-hub .sh-strip__row { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; color: var(--sh-dim); font-size: 13.5px; }
    .support-hub .sh-strip__row span { display: inline-flex; align-items: center; gap: 9px; }
    .support-hub .sh-strip__row svg { width: 17px; height: 17px; color: var(--sh-mint); }

    @media (max-width: 900px) {
      .support-hub .sh-cats, .support-hub .sh-chans { grid-template-columns: 1fr; }
      .support-hub .sh-reqwrap { grid-template-columns: 1fr; gap: 26px; }
      .support-hub .sh-hero__grad { background: linear-gradient(90deg,rgba(6,9,11,.9),rgba(6,9,11,.6)), linear-gradient(0deg,rgba(6,9,11,.96) 6%,transparent 40%); }
      .support-hub .sh-two { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .support-hub * { animation: none !important; }
      .support-hub .sh-rev { opacity: 1; transform: none; }
    }
/* END_SECTION:support-hub */

/* START_SECTION:touring-map (INDEX:89) */
.tmr{
  --bg:#02080a;--mint:#56dcc0;--bright:#96ffe4;--ink:#e6f2ee;
  --dim:rgba(230,242,238,.5);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}.tmr *{box-sizing:border-box}.tmr,.tmr{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",sans-serif;height:auto}.tmr #wrap{position:relative;width:100%;height:950vh}.tmr #stage{position:sticky;top:0;left:0;width:100%;height:100vh;overflow:hidden;background:#02080a}.tmr #map{position:absolute;inset:0;width:100%;height:100%}.tmr #vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;
  background:radial-gradient(120% 120% at 50% 46%,rgba(2,8,10,0) 52%,rgba(2,8,10,.34) 84%,rgba(2,8,10,.62) 100%)}.tmr #spotlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;
  opacity:0;transition:opacity .6s}.tmr #spotlight.on{opacity:1}.tmr .layer{position:absolute;inset:0;pointer-events:none;z-index:6}.tmr #progress{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:11;width:4px;height:42vh;border-radius:4px;background:rgba(86,220,192,.14);pointer-events:none}.tmr #progress .fill{position:absolute;left:0;top:0;width:100%;border-radius:4px;background:linear-gradient(#96ffe4,#56dcc0);box-shadow:0 0 12px rgba(150,255,228,.6);height:0%}.tmr .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:rgba(86,220,192,.85)}.tmr #intro{position:absolute;left:0;right:0;top:22%;text-align:center;z-index:9;padding:0 6vw;transition:opacity .55s;pointer-events:none}.tmr #intro h2{margin:.7rem 0 .55rem;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.9rem,4.8vw,3.4rem);text-shadow:0 8px 60px rgba(0,0,0,.9)}.tmr #intro p{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--dim);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.9)}.tmr #intro .pulse{display:inline-block;margin-top:1.7rem;font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.14em;color:#02100c;background:#56dcc0;padding:12px 22px;border-radius:999px;box-shadow:0 0 30px rgba(86,220,192,.65);animation:bob 1.6s ease-in-out infinite}@keyframes bob{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}.tmr #intro.gone{opacity:0}.tmr #goalbanner{position:absolute;left:50%;top:10%;transform:translateX(-50%) translateY(-8px);z-index:9;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bright);
  background:rgba(2,12,12,.6);border:1px solid rgba(86,220,192,.34);border-radius:999px;padding:.5rem 1.15rem;
  backdrop-filter:blur(6px);opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}.tmr #goalbanner.on{opacity:1;transform:translateX(-50%) translateY(0)}.tmr .marker{position:relative;transform:translate(-50%,-50%);width:0;height:0;cursor:default;pointer-events:none;
  opacity:.42;transition:opacity .3s}.tmr .marker.dwell{opacity:1}.tmr .marker.dwell .pblk{opacity:1;pointer-events:auto}.tmr .marker.dimmed{opacity:.18}.tmr .marker .dot{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 40%,#eafffb,#96ffe4 55%,#56dcc0);
  border:1px solid rgba(234,255,251,.9);
  box-shadow:0 0 0 3px rgba(86,220,192,.16),0 0 12px rgba(150,255,228,.85),0 0 22px rgba(86,220,192,.5);
  animation:dotbreath 3.4s ease-in-out infinite}.tmr .marker.start .dot{width:13px;height:13px;background:radial-gradient(circle at 50% 40%,#ffffff,#d6fff5 50%,#96ffe4)}@keyframes dotbreath{0%,100%{box-shadow:0 0 0 3px rgba(86,220,192,.14),0 0 10px rgba(150,255,228,.7),0 0 18px rgba(86,220,192,.42)}
  50%{box-shadow:0 0 0 4px rgba(86,220,192,.22),0 0 16px rgba(150,255,228,1),0 0 30px rgba(86,220,192,.6)}}.tmr .marker .pblk{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:5px;cursor:pointer;opacity:0;
  background:radial-gradient(120% 120% at 50% 32%,#b6ffee,#96ffe4 55%,#5fe8cc);
  border:1px solid rgba(190,255,238,.9);
  box-shadow:0 0 0 2px rgba(86,220,192,.14),0 0 12px rgba(150,255,228,.8),0 0 22px rgba(86,220,192,.45),inset 0 0 6px rgba(255,255,255,.5);
  transition:background .3s,box-shadow .3s,transform .22s,border-color .3s,opacity .4s;
  animation:pblkbreath 3.4s ease-in-out infinite;will-change:transform,box-shadow,opacity}@keyframes pblkbreath{
  0%,100%{box-shadow:0 0 0 2px rgba(86,220,192,.12),0 0 10px rgba(150,255,228,.65),0 0 18px rgba(86,220,192,.38),inset 0 0 6px rgba(255,255,255,.45)}
  50%{box-shadow:0 0 0 3px rgba(86,220,192,.2),0 0 16px rgba(150,255,228,.95),0 0 28px rgba(86,220,192,.55),inset 0 0 8px rgba(255,255,255,.6)}}.tmr .marker.start .pblk{background:radial-gradient(120% 120% at 50% 30%,#eafffb,#bfffee 50%,#96ffe4)}.tmr .marker .pblk:hover{z-index:8;transform:scale(1.3);border-color:#ffffff;animation-play-state:paused;
  box-shadow:0 0 0 4px rgba(150,255,228,.3),0 0 24px rgba(200,255,244,1),0 0 44px rgba(86,220,192,.7),inset 0 0 10px rgba(255,255,255,.85)}.tmr .marker.dwell .pblk.viewed:not(:hover){animation:none;
  background:radial-gradient(120% 120% at 50% 32%,#ffffff,#f3fbf9 55%,#ddf4ee);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 2px rgba(255,255,255,.22),0 0 13px rgba(255,255,255,.9),0 0 26px rgba(214,245,239,.55),inset 0 0 7px rgba(255,255,255,.8)}.tmr .marker .pcard{position:absolute;left:18px;top:50%;
  transform:translateY(-50%) translateX(8px) scale(.94);transform-origin:left center;
  width:196px;white-space:normal;pointer-events:none;
  background:rgba(3,15,16,.97);border:1px solid rgba(86,220,192,.45);border-radius:12px;padding:10px 12px 9px;
  backdrop-filter:blur(9px);box-shadow:0 14px 50px rgba(0,0,0,.6),0 0 0 1px rgba(86,220,192,.05),0 0 24px rgba(86,220,192,.22);
  opacity:0;transition:opacity .24s,transform .24s;z-index:9}.tmr .marker .pblk:hover .pcard{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}.tmr .marker .pblk.card-left .pcard{left:auto;right:18px;transform-origin:right center;
  transform:translateY(-50%) translateX(-8px) scale(.94)}.tmr .marker .pblk.card-left:hover .pcard{transform:translateY(-50%) translateX(0) scale(1)}.tmr .marker .pcard .ci{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:rgba(150,255,228,.7);text-transform:uppercase}.tmr .marker .pcard .cn{font-size:.86rem;font-weight:600;line-height:1.25;margin:5px 0 8px;color:var(--ink)}.tmr .marker .pcard .cimg{width:100%;height:66px;border-radius:8px;margin-bottom:8px;overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 50% 30%,rgba(86,220,192,.16),rgba(2,12,12,.9));
  border:1px solid rgba(86,220,192,.26);display:flex;align-items:center;justify-content:center}.tmr .marker .pcard .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tmr .marker .pcard .cimg.noimg img{display:none}.tmr .marker .pcard .cimg svg{width:34%;height:34%;stroke:var(--mint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.tmr .marker .pcard .cf{display:flex;justify-content:space-between;align-items:center}.tmr .marker .pcard .cp{font-family:var(--mono);font-size:.88rem;color:var(--bright)}.tmr .marker .pcard .cv{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--mint);text-decoration:none;border:1px solid rgba(86,220,192,.4);border-radius:7px;padding:3px 8px;transition:background .18s;pointer-events:none}.tmr .marker.dwell .pblk:hover .cv{pointer-events:auto}.tmr .marker .pcard .cv:hover{background:rgba(86,220,192,.14)}.tmr .marker.done .dot{background:radial-gradient(circle at 50% 38%,#eafffb,#56dcc0 58%,#1d9e75)}.tmr .marker .flag{position:absolute;left:50%;top:50%;margin:-19px 0 0 0;width:14px;height:19px;opacity:0;pointer-events:none;transform-origin:bottom center}.tmr .marker .flag i{position:absolute;left:0;bottom:0;width:1.6px;height:19px;border-radius:1px;background:linear-gradient(#eafffb,#9fe9d6)}.tmr .marker .flag b{position:absolute;left:1.6px;top:0;width:11px;height:8px;border-radius:1px;
  background:linear-gradient(120deg,#eafffb,#56dcc0);clip-path:polygon(0 0,100% 0,100% 55%,0 100%);
  transform-origin:left center;box-shadow:0 0 8px rgba(150,255,228,.7)}.tmr .marker.done .flag{opacity:1;animation:flagplant .62s cubic-bezier(.2,1.35,.3,1) forwards}.tmr .marker.done .flag b{animation:flagwave 1.5s ease-in-out infinite}@keyframes flagplant{0%{opacity:0;transform:translateY(-15px) scale(.55)}55%{opacity:1;transform:translateY(2px) scale(1.06)}78%{transform:translateY(-1px) scale(1)}100%{transform:translateY(0) scale(1)}}@keyframes flagwave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-7deg) scaleX(.9)}}.tmr #confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:11}.tmr #stamp{position:absolute;left:50%;top:24%;z-index:12;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);font-family:var(--mono)}.tmr #stamp .seal{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(150,255,228,.7);border-radius:999px;padding:7px 15px;background:rgba(2,12,12,.62);backdrop-filter:blur(3px);box-shadow:0 0 0 1px rgba(86,220,192,.2),0 0 22px rgba(150,255,228,.3)}.tmr #stamp .st-big{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#eafffb}.tmr #stamp .st-tick{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#eafffb,#56dcc0 60%,#1d9e75);color:#02370f;font-size:.62rem}.tmr #stamp .st-n{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(150,255,228,.8);border-left:1px solid rgba(86,220,192,.3);padding-left:9px}.tmr #stamp.go{animation:stampgo 1.7s cubic-bezier(.2,1.1,.3,1) forwards}@keyframes stampgo{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}30%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}@media(prefers-reduced-motion:reduce){.tmr #stamp.go,.tmr .marker.done .flag,.tmr .marker.done .flag b{animation-duration:.01s}}.tmr #detail{position:absolute;left:40px;top:50%;transform:translateY(-50%);z-index:9;max-width:360px;pointer-events:none;opacity:0;transition:opacity .45s}.tmr #detail.on{opacity:1}.tmr #detail .dnum{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:rgba(150,255,228,.8);text-transform:uppercase}.tmr #detail h2{cursor:default}.tmr #detail h2:hover{color:var(--bright);transition:color .2s}.tmr #detail h2{margin:.45rem 0 .25rem;font-size:2.2rem;font-weight:800;letter-spacing:-.01em;text-shadow:0 6px 40px rgba(0,0,0,.85)}.tmr #detail .dsub{font-family:var(--mono);font-size:.78rem;color:var(--ink);opacity:.88;margin:0 0 14px;line-height:1.4;text-shadow:0 2px 18px rgba(0,0,0,.85)}.tmr #detail .dleg{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--mint);border:1px solid rgba(86,220,192,.3);border-radius:999px;padding:6px 12px;background:rgba(2,12,12,.5)}.tmr #detail .dleg b{color:var(--bright);font-weight:600}.tmr #readout{position:absolute;left:38px;bottom:34px;z-index:6;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:rgba(255,255,255,.42);max-width:62vw;line-height:1.7;pointer-events:none}.tmr #readout b{color:var(--mint)}.tmr #readout .np{color:var(--bright)}.tmr #readout .zr{color:var(--bright)}.tmr #scrollhint{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(6px);z-index:9;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.12em;color:#02100c;background:rgba(86,220,192,.96);padding:9px 18px;border-radius:999px;box-shadow:0 0 26px rgba(86,220,192,.55);text-align:center;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s,transform .4s;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}.tmr #scrollhint.on{opacity:1;transform:translateX(-50%) translateY(0)}.tmr #scrollhint .ar{display:inline-block;animation:bob 1.9s ease-in-out infinite}.tmr #etappen{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:10;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);background:rgba(2,12,12,.82);border:1px solid rgba(86,220,192,.32);border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;pointer-events:auto;transition:background .18s,border-color .18s;backdrop-filter:blur(6px)}.tmr #etappen:hover{background:rgba(86,220,192,.14);border-color:var(--bright)}.tmr #stopimg{position:absolute;right:40px;top:84px;z-index:9;width:320px;pointer-events:none;
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .35s,transform .35s}.tmr #stopimg.on{opacity:1;transform:translateY(0) scale(1)}.tmr #stopimg .frame{position:relative;width:320px;height:210px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(86,220,192,.4);background:#04141d;
  box-shadow:0 18px 60px rgba(0,0,0,.65),0 0 0 1px rgba(86,220,192,.06),0 0 26px rgba(86,220,192,.18)}.tmr #stopimg .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tmr #stopimg .ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(130% 120% at 50% 24%,rgba(86,220,192,.18),rgba(3,16,18,.96));}.tmr #stopimg.placeholder .frame img{display:none}.tmr #stopimg.placeholder .ph{display:flex}.tmr #stopimg .ph svg{width:64px;height:64px;stroke:var(--mint);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.tmr #stopimg .ph .phn{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(150,255,228,.9)}.tmr #stopimg .cap{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;
  background:linear-gradient(rgba(2,8,10,0),rgba(2,8,10,.82));
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bright)}@media(max-width:640px){.tmr #stopimg{display:none} }.tmr #toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);z-index:11;background:rgba(2,12,12,.94);border:1px solid rgba(86,220,192,.38);border-radius:13px;padding:14px 18px;backdrop-filter:blur(10px);box-shadow:0 14px 50px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:min(92vw,520px)}.tmr #toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.tmr #toast .th{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(150,255,228,.8);margin-bottom:8px}.tmr #toast .tr{display:flex;justify-content:space-between;gap:18px;font-family:var(--mono);font-size:.72rem;color:var(--ink);padding:5px 6px;border-radius:7px;cursor:pointer;transition:background .15s}.tmr #toast .tr:hover{background:rgba(86,220,192,.12)}.tmr #toast .tr .ti{color:var(--mint)}.tmr #toast .tr .tc{color:rgba(150,255,228,.7)}.tmr .tag{position:fixed;left:16px;top:13px;z-index:11;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.35)}.tmr #loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:30;font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:rgba(150,255,228,.85);background:var(--bg);transition:opacity .55s}.tmr #loading.gone{opacity:0;pointer-events:none}.tmr #loading .ld{display:flex;align-items:center;gap:12px}.tmr #loading .ld i{width:8px;height:8px;border-radius:50%;background:var(--bright);box-shadow:0 0 14px var(--bright);animation:lpulse 1.1s ease-in-out infinite}@keyframes lpulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}.tmr #errnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:31;display:none;text-align:center;font-family:var(--mono);font-size:.8rem;color:rgba(150,255,228,.9);background:rgba(2,12,12,.92);border:1px solid rgba(86,220,192,.4);border-radius:13px;padding:22px 26px;max-width:80vw}.tmr #errnote.on{display:block}.tmr #errnote b{color:var(--bright)}.tmr #readout .zoombox{display:inline-flex;align-items:baseline;gap:8px;border:1px solid rgba(86,220,192,.3);border-radius:999px;padding:3px 11px;background:rgba(2,12,12,.55);backdrop-filter:blur(6px)}.tmr #readout .zr{color:var(--bright);font-weight:700;letter-spacing:.12em}.tmr #readout .scale{color:rgba(86,220,192,.85);font-size:.56rem;letter-spacing:.1em}.tmr #readout .rsep{opacity:.5;margin:0 2px}.tmr #compass{position:absolute;right:24px;bottom:150px;z-index:10;width:62px;height:62px;cursor:pointer;pointer-events:auto;
  border-radius:50%;background:rgba(2,12,12,.82);border:1px solid rgba(86,220,192,.32);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(86,220,192,.05),0 6px 26px rgba(0,0,0,.55),0 0 18px rgba(86,220,192,.18);
  transition:box-shadow .2s,border-color .2s,transform .15s}.tmr #compass:hover{border-color:var(--bright);box-shadow:0 0 0 1px rgba(86,220,192,.1),0 6px 26px rgba(0,0,0,.6),0 0 24px rgba(150,255,228,.4);transform:translateY(-1px)}.tmr #compass:active{transform:translateY(0) scale(.97)}.tmr #compass svg{width:100%;height:100%;display:block}.tmr #compass .cring{fill:none;stroke:rgba(86,220,192,.28);stroke-width:1}.tmr #compass .cring2{fill:none;stroke:rgba(86,220,192,.14);stroke-width:1}.tmr #compass .cticks line{stroke:rgba(150,255,228,.45);stroke-width:1.4;stroke-linecap:round}.tmr #compass .clbl{fill:rgba(191,232,222,.7);font-family:var(--mono);font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:middle;letter-spacing:.04em}.tmr #compass .clbl.cn{fill:var(--bright)}.tmr #compass #cneedle{transform-box:fill-box;transform-origin:50% 50%}.tmr #compass .cn-n{fill:#96ffe4;filter:drop-shadow(0 0 3px rgba(150,255,228,.7))}.tmr #compass .cn-s{fill:rgba(120,170,160,.55)}.tmr #compass .chub{fill:#eafffb}.tmr #routecap{position:absolute;left:50%;top:9%;transform:translateX(-50%) translateY(-8px);z-index:9;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bright);
  background:rgba(2,12,12,.6);border:1px solid rgba(86,220,192,.34);border-radius:999px;padding:.5rem 1.15rem;
  backdrop-filter:blur(6px);opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}.tmr #routecap.on{opacity:1;transform:translateX(-50%) translateY(0)}.tmr #mapui{position:absolute;inset:0;width:100%;height:100%;will-change:opacity}.tmr #finaleflash{position:absolute;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(234,255,251,.95),rgba(150,255,228,.55) 38%,rgba(86,220,192,.18) 62%,rgba(2,8,10,0) 78%);
  mix-blend-mode:screen;will-change:opacity}.tmr #bestseller{position:absolute;inset:0;width:100%;height:100%;z-index:16;background:
  radial-gradient(120% 90% at 50% 0%,rgba(86,220,192,.08),rgba(2,8,10,0) 60%),#02080a;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;will-change:opacity;
  padding:clamp(132px,17vh,176px) clamp(18px,5vw,74px) clamp(18px,3.4vh,42px)}.tmr #bestseller .bs-head{flex:0 0 auto;text-align:center;margin-bottom:clamp(10px,2vh,24px);
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}.tmr #bestseller.reveal .bs-head{opacity:1;transform:translateY(0)}.tmr #bestseller .bs-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.32em;
  font-size:.72rem;color:rgba(86,220,192,.85)}.tmr #bestseller h2{margin:.5rem 0 .3rem;font-weight:800;letter-spacing:-.015em;
  font-size:clamp(2rem,5vw,3.4rem);color:var(--ink);text-shadow:0 8px 50px rgba(0,0,0,.8)}.tmr #bestseller .bs-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--dim);margin:0}.tmr #bestseller .bs-board{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1.16fr);
  gap:clamp(16px,2.4vw,40px);align-items:center;max-width:1240px;width:100%;margin:0 auto;min-height:0}.tmr .bs-hero{position:relative;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 120% at 18% 0%,rgba(86,220,192,.18),rgba(3,16,17,.96));
  border:1px solid rgba(86,220,192,.4);border-radius:20px;padding:clamp(18px,2.6vh,30px) clamp(20px,2vw,32px);
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(86,220,192,.06),0 0 40px rgba(86,220,192,.26);
  overflow:hidden;opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .7s cubic-bezier(.2,.9,.25,1) .12s,transform .7s cubic-bezier(.2,.9,.25,1) .12s}.tmr #bestseller.reveal .bs-hero{opacity:1;transform:translateY(0) scale(1)}.tmr .bs-hero::after{content:"";position:absolute;inset:-1px;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(150,255,228,.12);animation:heroglow 3.6s ease-in-out infinite}@keyframes heroglow{0%,100%{opacity:.6}50%{opacity:1}}.tmr .bs-hero .bs-tag{align-self:flex-start;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bg);background:linear-gradient(90deg,#b6ffee,#56dcc0);
  border-radius:999px;padding:4px 11px;font-weight:700;margin-bottom:clamp(8px,1.4vh,14px)}.tmr .bs-hero .bs-hrank{font-family:var(--mono);font-weight:800;line-height:.82;letter-spacing:-.02em;
  font-size:clamp(3.4rem,8vw,6rem);color:var(--bright);text-shadow:0 0 34px rgba(150,255,228,.5)}.tmr .bs-hero .bs-himg{width:100%;height:clamp(110px,20vh,210px);border-radius:14px;margin:clamp(10px,1.6vh,16px) 0;
  position:relative;overflow:hidden;border:1px solid rgba(86,220,192,.3);
  background:radial-gradient(120% 120% at 50% 28%,rgba(86,220,192,.2),rgba(2,12,12,.92));
  display:flex;align-items:center;justify-content:center}.tmr .bs-hero .bs-himg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tmr .bs-hero .bs-himg.noimg img{display:none}.tmr .bs-hero .bs-himg svg{width:30%;height:30%;stroke:var(--mint);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}.tmr .bs-hero .bs-hname{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;line-height:1.18;color:var(--ink);margin:0 0 6px}.tmr .bs-hero .bs-hfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}.tmr .bs-hero .bs-hprice{font-family:var(--mono);font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--bright)}.tmr .bs-hero .bs-hcta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--mint);
  text-decoration:none;border:1px solid rgba(86,220,192,.5);border-radius:9px;padding:6px 13px;transition:background .18s,border-color .18s}.tmr .bs-hero .bs-hcta:hover{background:rgba(86,220,192,.16);border-color:var(--bright)}.tmr #bestseller .bs-list{display:flex;flex-direction:column;min-width:0}.tmr .bs-row{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);min-width:0;
  padding:clamp(7px,1.15vh,12px) clamp(6px,.8vw,12px);
  border-bottom:1px solid rgba(86,220,192,.14);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease,background .18s}.tmr .bs-row:last-child{border-bottom:none}.tmr #bestseller.reveal .bs-row{opacity:1;transform:translateY(0);
  transition-delay:calc(.3s + var(--ri) * .07s)}.tmr .bs-row .bs-rank{flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:clamp(1.05rem,1.8vw,1.5rem);
  letter-spacing:.02em;color:rgba(150,255,228,.92);width:1.9em;text-align:right;text-shadow:0 0 14px rgba(150,255,228,.3)}.tmr .bs-row .bs-img{flex:0 0 auto;width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);border-radius:10px;
  position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%,rgba(86,220,192,.16),rgba(2,12,12,.9));
  border:1px solid rgba(86,220,192,.28);display:flex;align-items:center;justify-content:center}.tmr .bs-row .bs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tmr .bs-row .bs-img.noimg img{display:none}.tmr .bs-row .bs-img svg{width:62%;height:62%;display:block;stroke:var(--mint);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}.tmr .bs-row .bs-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.tmr .bs-row .bs-name{display:block;font-size:clamp(.86rem,1.1vw,1.04rem);font-weight:600;line-height:1.2;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tmr .bs-row .bs-price{display:block;font-family:var(--mono);font-size:clamp(.74rem,.95vw,.9rem);color:var(--mint)}.tmr .bs-row .bs-cta{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--mint);
  text-decoration:none;border:1px solid rgba(86,220,192,.4);border-radius:7px;padding:4px 9px;transition:background .18s}.tmr #bestseller.live .bs-cta,.tmr #bestseller.live .bs-hcta{pointer-events:auto}
.tmr .bs-head .bs-shopall{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#02100c;background:linear-gradient(90deg,#b6ffee,#56dcc0);padding:10px 20px;border-radius:999px;text-decoration:none;box-shadow:0 0 24px rgba(86,220,192,.4);transition:transform .15s,box-shadow .2s;pointer-events:none}
.tmr #bestseller.live .bs-head .bs-shopall{pointer-events:auto}
.tmr .bs-head .bs-shopall:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(150,255,228,.6)}.tmr .bs-row .bs-cta:hover{background:rgba(86,220,192,.14)}@media(max-width:860px){.tmr #bestseller .bs-board{grid-template-columns:1fr;gap:clamp(12px,2vh,20px);align-content:center}.tmr .bs-hero .bs-himg{height:clamp(90px,14vh,150px)}
}@media(max-width:640px){.tmr #bestseller{padding:104px 16px 16px}.tmr .bs-row .bs-cta{display:none}.tmr .bs-hero .bs-hrank{font-size:clamp(2.8rem,12vw,4rem)}
}.tmr .maplibregl-ctrl-group{background:rgba(2,12,12,.82)!important;border:1px solid rgba(86,220,192,.32)!important;border-radius:11px!important;overflow:hidden;backdrop-filter:blur(6px)}.tmr .maplibregl-ctrl-group button{background:transparent!important;width:40px;height:40px}.tmr .maplibregl-ctrl-group button+button{border-top:1px solid rgba(86,220,192,.18)!important}.tmr .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(78%) sepia(36%) saturate(560%) hue-rotate(105deg) brightness(102%)}.tmr .maplibregl-ctrl button:hover{background:rgba(86,220,192,.14)!important}.tmr .maplibregl-ctrl-attrib{background:rgba(2,12,12,.7)!important;border-radius:8px 0 0 0}.tmr .maplibregl-ctrl-attrib a{color:rgba(150,255,228,.6)!important}.tmr .maplibregl-ctrl bottom-right{right:24px}.tmr .maplibregl-ctrl-bottom-right{right:18px;bottom:78px}.tmr .maplibregl-compact-show .maplibregl-ctrl-attrib-inner{color:rgba(230,242,238,.6)}
/* ===== Mobile: echte Karte fährt mobil → kürzerer Scroll, iOS-dvh, HUD entzerrt ===== */
@media(max-width:749px){
  .tmr #wrap{height:500vh}
  .tmr #stage{height:100vh;height:100dvh}
  /* Clutter raus (überlappte alles im Hochformat) */
  .tmr #readout{display:none}
  .tmr #compass{display:none}
  /* Intro nur oben, kompakt (blendet beim Scrollen eh aus) */
  .tmr #intro{top:12%;padding:0 6vw}
  .tmr #intro h2{font-size:clamp(1.5rem,6.4vw,2.1rem)}
  .tmr #intro p{font-size:.72rem}
  .tmr #intro .pulse{margin-top:1rem;font-size:.66rem;padding:9px 16px}
  /* Stage-Detail (NICE etc.) in eine eigene UNTERE Zone, volle Breite → kein Clash mit Intro/Karte */
  .tmr #detail{left:14px;right:14px;top:auto;bottom:148px;max-width:none;transform:none}
  .tmr #detail h2{font-size:1.7rem;margin:.3rem 0 .2rem}
  .tmr #detail .dsub{font-size:.72rem;margin-bottom:10px}
  .tmr #routecap,.tmr #goalbanner{font-size:.58rem;max-width:90vw;padding:8px 13px}
  .tmr #scrollhint{bottom:70px}
  .tmr #etappen{bottom:24px}
  /* Bestseller-Finale: einspaltig, scrollbar (data-lock-scroll), unter Header, über Zurück-Button */
  .tmr #bestseller{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:clamp(82px,12vh,100px) 14px calc(120px + env(safe-area-inset-bottom))}
  .tmr #bestseller .bs-board{display:flex;flex-direction:column;align-content:flex-start;gap:10px}
  .tmr #bestseller .bs-head{margin-bottom:8px}
  .tmr #bestseller h2{font-size:1.5rem}
  .tmr .bs-hero{min-height:0}
}
/* ===== Stop vista panel: auto-rotating crossfade + slow Ken-Burns + progress dots ===== */
/* bigger + vertically-centered on the right — mirrors the stage text on the left,
   clear of the header/search (was cramped small in the top-right corner) */
.tmr #stopimg{top:50%;right:clamp(22px,3vw,52px);width:clamp(330px,26vw,430px);transform:translateY(calc(-50% - 8px)) scale(.98)}
.tmr #stopimg.on{transform:translateY(-50%) scale(1)}
.tmr #stopimg .frame{width:100%;height:auto;aspect-ratio:3 / 2}
.tmr #stopimg .cap{font-size:.72rem;padding:11px 15px;letter-spacing:.16em}
.tmr #stopimg .frame .si-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease;will-change:opacity,transform}
.tmr #stopimg .frame .si-layer.show{opacity:1;animation:si-kb 4.6s ease-out both}
@keyframes si-kb{from{transform:scale(1.008)}to{transform:scale(1.07)}}
.tmr #stopimg.placeholder .frame .si-layer{opacity:0;animation:none}
.tmr #stopimg .si-dots{position:absolute;top:11px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.tmr #stopimg.on .si-dots{opacity:1}
.tmr #stopimg .si-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(2,8,10,.35);transition:background .35s,transform .35s,box-shadow .35s}
.tmr #stopimg .si-dots i.on{background:var(--bright);transform:scale(1.3);box-shadow:0 0 0 1px rgba(2,8,10,.25),0 0 8px rgba(150,255,228,.75)}
@media(prefers-reduced-motion:reduce){.tmr #stopimg .frame .si-layer.show{animation:none}}
/* END_SECTION:touring-map */

/* START_SECTION:usp-strip (INDEX:90) */
.usp-strip__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    @media (min-width: 750px) { .usp-strip__row { grid-template-columns: repeat(4, 1fr); } }
    .usp { display: flex; gap: var(--space-3); align-items: center; }
    .usp__icon img { width: 40px; height: 40px; object-fit: contain; }
    .usp__icon--emoji { font-size: 1.6rem; }
    .usp__body { display: flex; flex-direction: column; }
    .usp__title { font-weight: 700; }
    .usp__text { font-size: .85rem; color: var(--neutral-700); }
/* END_SECTION:usp-strip */

/* START_SECTION:webgl-hero (INDEX:91) */
.wgl { position:relative; min-height: 100vh; overflow:hidden; background:
      radial-gradient(120% 90% at 75% 25%, color-mix(in srgb, var(--mint-700) 38%, #06070800) 0%, transparent 55%),
      radial-gradient(90% 70% at 10% 90%, color-mix(in srgb, var(--mint-900) 50%, #06070800) 0%, transparent 60%),
      #060708; color:#fff; display:flex; align-items:center; }
  .wgl__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
  .wgl__overlay { position:relative; z-index:1; width: min(92vw, var(--container-max)); margin-inline:auto; padding-inline: var(--container-pad); pointer-events:none; }
  .wgl__copy { max-width: 620px; }
  .wgl__copy .btn { pointer-events:auto; }
  .wgl__eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color: var(--mint-400); margin-bottom: var(--space-4); }
  .wgl__h1 { font-family:"Satoshi"; font-size: clamp(3rem, 9vw, 7rem); line-height:.92; font-weight:800; letter-spacing:-.035em; margin:0; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
  .wgl__sub { font-size: clamp(1.05rem, 2vw, 1.4rem); color: rgba(255,255,255,.85); margin: var(--space-6) 0 var(--space-8); max-width: 40ch; text-shadow: 0 1px 20px rgba(0,0,0,.5); }
  .wgl__cta { display:flex; gap: var(--space-4); flex-wrap:wrap; }
  .wgl__ghost { border:1px solid rgba(255,255,255,.5); color:#fff; }
  .wgl__ghost:hover { border-color:#fff; background: rgba(255,255,255,.08); }
  .wgl__cue { position:absolute; z-index:1; bottom: var(--space-8); left:50%; transform:translateX(-50%); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(255,255,255,.65); animation: wgl-bob 2s ease-in-out infinite; }
  @keyframes wgl-bob { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }
  @media (max-width: 900px){ .wgl { min-height: 88vh; } .wgl__canvas { opacity:.85; } }
/* END_SECTION:webgl-hero */

/* START_SECTION:wishlist-drawer (INDEX:92) */
.wl-drawer{
    --qbg:#0b0b0f; --panel:#141419;
    --mint:#15cdb0; --mint-3:#5fe0cb; --mint-2:#93ebd7; --mint-6:#0d8473;
    --ink:#04140f;
    --tx:#f4f4f6; --tx2:#b9b9c2; --tx-dim:#9b9ba6; --tx-faint:#6c6c78;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
    --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.075); --blue:#5b9dff;
    --disp:"Satoshi Variable","Satoshi",system-ui,-apple-system,sans-serif;
    --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,monospace;
  }
  /* scrim + panel slide (base.css handles .wl-drawer visibility + z-index) */
  .wl-drawer .qs__scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 50%, rgba(8,8,10,.55), rgba(8,8,10,.82)); opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
  .wl-drawer.is-open .qs__scrim{ opacity:1; }
  .wl-drawer .qs{
    position:absolute; top:0; right:0; bottom:0; width:min(430px,100%); display:flex; flex-direction:column;
    background:linear-gradient(180deg, rgba(20,20,26,.94), rgba(11,11,15,.96));
    -webkit-backdrop-filter:blur(28px) saturate(1.4); backdrop-filter:blur(28px) saturate(1.4);
    border-left:1px solid var(--line2); box-shadow:-44px 0 90px -30px rgba(0,0,0,.85);
    color:var(--tx); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out);
  }
  .wl-drawer.is-open .qs{ transform:none; }
  .wl-drawer .qs::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--mint),transparent); opacity:.85; }
  .wl-drawer .qs a{ text-decoration:none; }
  .wl-drawer .qs button{ cursor:pointer; font-family:inherit; }

  .qs__head{ display:flex; align-items:center; gap:11px; padding:20px 20px 14px; }
  .qs__head h2{ margin:0; font-family:var(--disp); font-weight:900; font-size:24px; letter-spacing:-.03em; color:var(--tx); }
  .qs__cnt{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink); background:linear-gradient(120deg,var(--mint),var(--mint-3)); padding:4px 9px; border-radius:999px; font-weight:700; box-shadow:0 0 16px -4px rgba(21,205,176,.7); }
  .qs__x{ margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line2); background:var(--glass); color:var(--tx2); font-size:18px; display:grid; place-items:center; transition:.18s; }
  .qs__x:hover{ color:#fff; background:var(--glass2); }

  .qs__status{ margin:0 20px 6px; padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); position:relative; overflow:hidden; }
  .qs__status::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 100% 0, rgba(21,205,176,.12), transparent 60%); pointer-events:none; }
  .qs__status:empty{ display:none; }
  .qs__eyerow{ position:relative; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint); display:flex; align-items:center; gap:7px; }
  .qs__eyerow .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); }
  .qs__val{ position:relative; font-family:var(--disp); font-weight:900; font-size:27px; letter-spacing:-.03em; margin-top:3px; color:var(--tx); }
  .qs__sub{ position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-dim); margin-top:1px; }
  .qs__segbar{ position:relative; height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); display:flex; margin-top:11px; }
  .qs__segbar i{ height:100%; }
  .qs__legend{ position:relative; display:flex; gap:12px; margin-top:8px; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--tx2); }
  .qs__legend span{ display:flex; align-items:center; gap:5px; }
  .qs__legend b{ width:7px; height:7px; border-radius:2px; display:inline-block; }

  .qs__scroll{ flex:1; overflow-y:auto; padding:8px 20px 12px; display:flex; flex-direction:column; gap:9px; }
  .qs__scroll::-webkit-scrollbar{ width:6px; }
  .qs__scroll::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:9px; }
  .qs__sec{ display:flex; align-items:center; gap:9px; margin:12px 2px 2px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint); }
  .qs__sec b{ color:var(--mint-2); font-weight:700; }
  .qs__sec::after{ content:""; flex:1; height:1px; background:var(--line); }
  .qs__clear{ border:0; background:none; color:var(--tx-faint); font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; transition:.16s; }
  .qs__clear:hover{ color:#e5484d; }
  .qs__empty{ text-align:center; color:var(--tx2); font-size:13px; padding:40px 16px; }

  .qs__kits{ display:flex; flex-direction:column; gap:9px; }
  .qkit{ border:1px solid var(--line); border-radius:15px; padding:13px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); transition:.2s; }
  .qkit:hover{ border-color:rgba(21,205,176,.4); box-shadow:0 16px 40px -26px rgba(21,205,176,.6); }
  .qkit__top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
  .qkit__name{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--tx); }
  .qkit__style{ font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint-2); border:1px solid rgba(21,205,176,.3); padding:2px 6px; border-radius:5px; }
  .qkit__tot{ margin-left:auto; font-family:var(--disp); font-weight:800; font-size:16px; color:var(--tx); }
  .qkit__rm{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--tx-faint); font-size:14px; line-height:1; transition:.16s; }
  .qkit__rm:hover{ color:#e5484d; border-color:#e5484d; }
  .qkit__row{ display:flex; gap:6px; margin-bottom:11px; }
  .qkit__pc{ flex:1; aspect-ratio:1/1; border-radius:10px; background:radial-gradient(60% 60% at 50% 42%, rgba(255,255,255,.08), transparent 72%); border:1px solid var(--line); display:grid; place-items:center; }
  .qkit__pc img{ width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 6px 9px rgba(0,0,0,.55)); }
  .qkit__cta{ width:100%; border:1px solid var(--line2); border-radius:999px; padding:9px; font-size:12px; font-weight:700; color:var(--tx); background:var(--glass); transition:.18s; }
  .qkit__cta:hover{ background:var(--mint); color:var(--ink); border-color:transparent; }

  .qrow{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:13px; background:var(--glass); transition:.18s; }
  .qrow:hover{ border-color:rgba(21,205,176,.35); background:var(--glass2); }
  .qrow__media{ flex:none; width:52px; height:52px; border-radius:11px; background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), transparent 72%); border:1px solid var(--line); display:grid; place-items:center; }
  .qrow__media img{ width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
  .qrow__info{ flex:1; min-width:0; }
  .qrow__brand{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-2); }
  .qrow__name{ display:block; font-size:12.5px; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:2px 0; }
  .qrow__price{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--tx); }
  .qrow__act{ display:flex; flex-direction:column; gap:5px; flex:none; align-items:center; }
  .qrow__add{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:18px; line-height:0; padding-bottom:2px; color:var(--ink); background:linear-gradient(140deg,var(--mint-3),var(--mint)); border:0; }
  .qrow__add--view{ text-decoration:none; }
  .qrow__rm{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--tx-faint); font-size:13px; line-height:1; transition:.18s; }
  .qrow__rm:hover{ color:#e5484d; border-color:#e5484d; }

  .qs__foot{ padding:15px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; background:rgba(8,8,10,.4); }
  .qs__footTot{ display:flex; flex-direction:column; }
  .qs__footTot span{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint); }
  .qs__footTot b{ font-family:var(--disp); font-weight:800; font-size:19px; color:var(--tx); }
  .qs__cta{ margin-left:auto; padding:12px 18px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink); background:linear-gradient(140deg,var(--mint-3),var(--mint)); box-shadow:0 10px 24px -12px rgba(21,205,176,.85); transition:.18s; }
  .qs__cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }

  @media (max-width:520px){ .wl-drawer .qs{ width:100%; } }
  @media (prefers-reduced-motion:reduce){ .wl-drawer .qs, .wl-drawer .qs__scrim{ transition:none; } }
/* END_SECTION:wishlist-drawer */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:brand-bar (INDEX:98) */
/* Onyx + a broad mint edge that bleeds into a soft glow (replaces the old carbon twill). */
  .brand-bar { position: relative; border-radius: 14px; padding: 14px 22px 0; margin: 8px 0 22px; overflow: hidden; background: #07090b; }
  .brand-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(180deg,#35e3c7,#0fae95); z-index: 2; }
  .brand-bar__slash { position: absolute; left: 10px; top: 0; bottom: 0; width: 260px; background: linear-gradient(90deg, rgba(53,227,199,.16), transparent); pointer-events: none; z-index: 1; }
  .brand-bar__body { position: relative; z-index: 1; padding-right: 150px; }
  .brand-bar__head { display: flex; align-items: baseline; gap: 12px; }
  .brand-bar__name { color: #fff; font-weight: 800; font-size: clamp(17px, 2.4vw, 20px); letter-spacing: .13em; text-transform: uppercase; margin: 0; }
  .brand-bar__meta { color: #7f8a91; font-size: 10.5px; letter-spacing: .04em; }
  .brand-bar__tabs { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 9px; }
  .brand-bar__tab[hidden] { display: none; }
  .brand-bar__tab { padding: 10px 0; font-size: 14px; color: #aab4ba; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: color .15s; }
  .brand-bar__tab:hover, .brand-bar__tab:focus-visible { color: #fff; outline: none; }
  .brand-bar__tab .n { color: #7d878e; font-size: 12px; margin-left: 5px; }
  .brand-bar__tab.is-active { color: #fff; font-weight: 700; border-color: #35e3c7; }
  .brand-bar__tab.is-active .n { color: #9fe9dd; }
  .brand-bar__shot { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 128px; height: 80px; z-index: 1; }
  .brand-bar__layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .28s ease; }
  .brand-bar__layer.is-shown { opacity: 1; }
  .brand-bar__layer img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)); }
  /* ---- Rider-Pass row (bike): own slim line under the tabs ---- */
  .brand-bar__pass[hidden] { display: none; }
  .brand-bar__pass { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); position: relative; }
  .bpass { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 11px; border-radius: 999px; background: rgba(53,227,199,.10); border: 1px solid rgba(53,227,199,.35); white-space: nowrap; }
  .bpass--empty { background: transparent; border: 1px dashed rgba(255,255,255,.22); }
  .bpass__ic { width: 15px; height: 15px; color: #35e3c7; flex: none; }
  .bpass--empty .bpass__ic { color: #6b757c; }
  .bpass__txt { display: flex; flex-direction: column; line-height: 1.15; }
  .bpass__k { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #6f9c96; }
  .bpass--empty .bpass__k { color: #6b757c; }
  .bpass__v { font-size: 12px; font-weight: 700; color: #fff; }
  .bpass--empty .bpass__v { color: #aab4ba; font-weight: 600; }
  .bpass__chg { font-size: 10.5px; color: #9fb0ba; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
  .bpass__sw { position: relative; width: 34px; height: 19px; flex: none; cursor: pointer; }
  .bpass__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .bpass__sw i { position: absolute; inset: 0; border-radius: 999px; background: #333b42; transition: background .18s; pointer-events: none; }
  .bpass__sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #9fb0ba; transition: transform .18s, background .18s; }
  .bpass__sw input:checked + i { background: #35e3c7; }
  .bpass__sw input:checked + i::after { transform: translateX(15px); background: #04110d; }
  .bpass__sw input:focus-visible + i { outline: 2px solid #35e3c7; outline-offset: 2px; }
  .bpass__add { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #04110d; background: #35e3c7; border: 0; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
  .bpass__hint { font-size: 11.5px; color: #7f8a91; }
  /* "?" — same hover/focus tip component as the product page */
  .brand-bar__pass .info { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9fb0ba; cursor: help; outline: none; background: none; border: 0; }
  .brand-bar__pass .info:hover, .brand-bar__pass .info:focus-visible { color: #35e3c7; }
  .brand-bar__pass .info__i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex: none; }
  .brand-bar__pass .info .tip { position: absolute; left: -4px; top: calc(100% + 9px); width: min(300px,80vw); background: #0e151b; border: 1px solid rgba(53,227,199,.35); color: #dbe4e8; font-size: 11.5px; font-weight: 400; line-height: 1.55; text-align: left; padding: 11px 13px; border-radius: 11px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 20; box-shadow: 0 16px 36px -12px rgba(0,0,0,.6); }
  .brand-bar__pass .info .tip::before { content: ""; position: absolute; left: 16px; top: -6px; width: 11px; height: 11px; background: #0e151b; border-left: 1px solid rgba(53,227,199,.35); border-top: 1px solid rgba(53,227,199,.35); transform: rotate(45deg); }
  .brand-bar__pass .info:hover .tip, .brand-bar__pass .info:focus-visible .tip { opacity: 1; visibility: visible; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .brand-bar__layer { transition: none; } }
  /* Wrapper existiert nur für Mobile — auf Desktop ist er nicht da (display:contents). */
  .brand-bar__title { display: contents; }
  .brand-bar__eyebrow { display: none; }
  .brand-bar__sheetbtn { display: none; }

  /* ============================================================================
     MOBILE — "Editorial": keine dunkle Fläche, nur Typografie + Haarlinie.
     Die Kategorien wandern in ein Bottom-Sheet; die Tab-Leiste bleibt als
     No-JS-Fallback stehen und wird erst ausgeblendet, wenn das Skript lief.
     ============================================================================ */
  @media (max-width: 700px) {
    .brand-bar { background: transparent; border-radius: 0; overflow: visible;
      padding: 4px 16px 16px; margin: 0 0 17px; border-bottom: 1px solid rgba(11,11,13,.12); }
    /* Der Kopf darüber ist am Handy leer (Breadcrumb aus, H1 steckt in dieser Leiste),
       seine Margin blieb aber als tote Luft stehen. Greift nur, wenn die Leiste folgt. */
    .collection__head:has(+ .brand-bar) { margin-bottom: 0; }
    .brand-bar::before, .brand-bar__slash, .brand-bar__shot { display: none; }
    .brand-bar__body { padding-right: 0; }
    .brand-bar__title { display: block; min-width: 0; }
    .brand-bar__head { align-items: flex-end; gap: 10px; }
    .brand-bar__eyebrow { display: block; font-size: 9px; letter-spacing: .26em;
      text-transform: uppercase; color: #9a9aa2; margin-bottom: 5px; }
    .brand-bar__name { color: #0b0b0d; font-size: clamp(26px, 8vw, 32px);
      letter-spacing: -.03em; line-height: .9; }
    .brand-bar__meta { display: none; } /* Zahl steht im Auslöser — nicht doppelt */

    .brand-bar.has-sheet .brand-bar__tabs { display: none; }
    .brand-bar.has-sheet .brand-bar__sheetbtn { display: inline-flex; align-items: center; gap: 7px;
      margin-left: auto; flex: none; background: none; border: 0; padding: 0 0 3px; cursor: pointer;
      font: inherit; font-size: 13px; font-weight: 600; color: #0b0b0d;
      border-bottom: 2px solid #0fae95; -webkit-tap-highlight-color: transparent; }
    .brand-bar__sheetbtn .n { color: #9a9aa2; font-weight: 400; }
    .brand-bar__chev { opacity: .5; }

    /* Fallback ohne JS: Tabs auf hellem Grund lesbar machen */
    .brand-bar__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; gap: 18px; }
    .brand-bar__tabs::-webkit-scrollbar { display: none; }
    .brand-bar__tab { flex: none; color: #5c5c63; }
    .brand-bar__tab.is-active { color: #0b0b0d; border-color: #0fae95; }
    .brand-bar__tab .n { color: #9a9aa2; }
    .brand-bar__tab.is-active .n { color: #5c5c63; }

    /* Rider-Pass-Zeile war für Schwarz gebaut — auf Hell umfärben */
    .brand-bar__pass { border-top-color: rgba(11,11,13,.1); }
    .bpass { background: rgba(15,174,149,.08); border-color: rgba(15,174,149,.35); }
    .bpass--empty { border-color: rgba(11,11,13,.2); }
    .bpass__ic { color: #0fae95; }
    .bpass--empty .bpass__ic { color: #9a9aa2; }
    .bpass__k { color: #0d8473; }
    .bpass--empty .bpass__k { color: #9a9aa2; }
    .bpass__v { color: #0b0b0d; }
    .bpass--empty .bpass__v { color: #5c5c63; }
    .bpass__chg, .bpass__hint, .brand-bar__pass .info { color: #5c5c63; }
    .bpass__sw i { background: #c8ccd0; }
    .bpass__sw i::after { background: #fff; }
  }

  /* ---- Bottom-Sheet (liegt am <body>, daher eigener Namensraum) ---- */
  html.bbsheet-lock, html.bbsheet-lock body { overflow: hidden; }
  .bbsheet { position: fixed; inset: 0; z-index: 100; }
  .bbsheet[hidden] { display: none; }
  .bbsheet__bg { position: absolute; inset: 0; background: rgba(6,7,9,.5); opacity: 0; transition: opacity .3s ease; }
  .bbsheet.is-open .bbsheet__bg { opacity: 1; }
  .bbsheet__body { position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
    border-radius: 22px 22px 0 0; padding: 8px 0 max(18px, env(safe-area-inset-bottom));
    max-height: 84vh; display: flex; flex-direction: column;
    transform: translateY(102%); transition: transform .42s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 -18px 46px -20px rgba(0,0,0,.5); }
  .bbsheet.is-open .bbsheet__body { transform: none; }
  .bbsheet__grab { width: 38px; height: 4px; border-radius: 99px; background: #d8d8dd; margin: 6px auto 12px; flex: none; }
  .bbsheet__ttl { margin: 0; padding: 0 20px 6px; flex: none;
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #9a9aa2; font-weight: 400; }
  .bbsheet__list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; }
  .bbsheet__row { display: flex; align-items: center; gap: 12px; padding: 15px 12px;
    text-decoration: none; color: #0b0b0d; -webkit-tap-highlight-color: transparent; }
  .bbsheet__row + .bbsheet__row { box-shadow: inset 0 1px 0 #eeeef1; }
  .bbsheet__row:focus-visible { outline: 2px solid #0fae95; outline-offset: -2px; border-radius: 8px; }
  .bbsheet__dot { width: 7px; height: 7px; border-radius: 50%; background: #0fae95; flex: none; opacity: 0; }
  .bbsheet__row.is-active .bbsheet__dot { opacity: 1; }
  .bbsheet__lbl { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
  .bbsheet__n { margin-left: auto; font-size: 13px; color: #9a9aa2; }
  .bbsheet__row.is-active .bbsheet__n { color: #5c5c63; }
  @media (prefers-reduced-motion: reduce) {
    .bbsheet__bg, .bbsheet__body { transition: none; }
  }
/* END_SNIPPET:brand-bar */

/* START_SNIPPET:brand-compliance (INDEX:99) */
.bgpsr { max-width: 1040px; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid var(--neutral-100); }
    .bgpsr__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
    @media (min-width: 900px) { .bgpsr__inner { grid-template-columns: 360px 1fr; gap: var(--space-12); } }

    /* Globe stage — desktop only */
    .bgpsr__stage { position: relative; display: none; width: 360px; height: 360px; margin: 0 auto; isolation: isolate; }
    @media (min-width: 900px) { .bgpsr__stage { display: block; } }
    .bgpsr__glow { position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
      background: radial-gradient(circle, rgba(86,220,192,.16) 0%, rgba(86,220,192,.04) 46%, transparent 70%); filter: blur(16px); }
    .bgpsr__globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; cursor: grab; contain: layout paint size; }
    .bgpsr__globe:active { cursor: grabbing; }
    /* Center pin (globe is spun so the country sits front-centre) */
    .bgpsr__pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 12px; height: 12px; transform: translate(-50%,-50%); pointer-events: none; }
    .bgpsr__pin::before, .bgpsr__pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
    .bgpsr__pin::before { background: var(--mint-300, #56dcc0); box-shadow: 0 0 12px 2px rgba(86,220,192,.8); }
    .bgpsr__pin::after { animation: bgpsr-ping 2.4s cubic-bezier(0,0,.2,1) infinite; box-shadow: 0 0 0 0 rgba(86,220,192,.6); }
    @keyframes bgpsr-ping { 0% { transform: scale(1); opacity: .8; } 80%,100% { transform: scale(3.2); opacity: 0; } }
    /* Hover card */
    .bgpsr__card { position: absolute; left: 50%; bottom: calc(50% + 20px); z-index: 3; transform: translate(-50%, 6px); min-width: 200px; max-width: 260px;
      padding: .7rem .85rem; border-radius: 12px; background: rgba(10,14,13,.86); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(86,220,192,.28); box-shadow: 0 16px 40px rgba(0,0,0,.4); text-align: left;
      opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
    .bgpsr__stage:hover .bgpsr__card, .bgpsr__stage:focus-within .bgpsr__card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .bgpsr__card::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: inherit; border-right: 1px solid rgba(86,220,192,.28); border-bottom: 1px solid rgba(86,220,192,.28); }
    .bgpsr__card-flag { font-size: 1.4rem; line-height: 1; }
    .bgpsr__card-country { display: block; font-weight: 700; font-size: .95rem; margin-top: .2rem; }
    .bgpsr__card-mfr { display: block; font-size: .78rem; color: rgba(255,255,255,.72); margin-top: .1rem; }

    /* Text block */
    .bgpsr__eyebrow { font-family: "Space Mono", monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--mint-700, #0d8473); margin: 0 0 var(--space-2); }
    .bgpsr__title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; color: var(--ink, #0a0a0b); margin: 0 0 var(--space-3); }
    .bgpsr__lede { font-size: .92rem; line-height: 1.6; color: var(--neutral-700, #48484c); margin: 0 0 var(--space-5); max-width: 52ch; }
    .bgpsr__dl { margin: 0; display: grid; gap: var(--space-4); }
    .bgpsr__dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mint-700, #0d8473); margin-bottom: 2px; }
    .bgpsr__dl dd { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--neutral-700, #48484c); }
    .bgpsr__dl dd strong { color: var(--ink, #0a0a0b); font-weight: 600; }
    .bgpsr__dl a { color: var(--mint-700, #0d8473); text-decoration: underline; text-underline-offset: 2px; }
    .bgpsr__origin { display: inline-flex; align-items: center; gap: .5rem; margin: var(--space-5) 0 0; padding: .4rem .8rem; border-radius: 999px; background: var(--neutral-50, #f6f6f7); font-size: .82rem; color: var(--neutral-700, #48484c); }
    .bgpsr__origin-flag { font-size: 1.1rem; line-height: 1; }
    @media (prefers-reduced-motion: reduce) { .bgpsr__pin::after { animation: none; } }
/* END_SNIPPET:brand-compliance */

/* START_SNIPPET:brand-filter-menu (INDEX:100) */
.bmenu { background:#fff; border:1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4) var(--space-3); box-shadow:0 1px 2px rgba(10,10,11,.04); margin-bottom: var(--space-4); }
  .bmenu__all { display:block; font-weight:800; font-size:.95rem; color: var(--ink); text-decoration:none; padding: var(--space-3) 0; border-bottom:1px solid var(--neutral-100); margin-bottom: var(--space-1); }
  .bmenu__all:hover, .bmenu__all.is-active { color: var(--mint-700); }
  .bmenu__grp { border-top:1px solid var(--neutral-100); }
  .bmenu__grp:first-of-type { border-top:0; }
  .bmenu__grp > summary, .bmenu__flat { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding: var(--space-3) 0; text-decoration:none; color: var(--ink); }
  .bmenu__grp > summary::-webkit-details-marker { display:none; }
  .bmenu__grp > summary::after { content:"▾"; color: var(--neutral-400); font-size:.72rem; transition: transform var(--dur-fast); }
  .bmenu__grp[open] > summary::after { transform: rotate(180deg); }
  .bmenu__flat { border-top:1px solid var(--neutral-100); }
  .bmenu__flat:first-of-type { border-top:0; }
  .bmenu__ico { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; color: var(--mint-600); }
  .bmenu__ico .cat-icon { width:18px; height:18px; }
  .bmenu__lbl { flex:1; min-width:0; font-weight:700; font-size:.96rem; }
  .bmenu__flat:hover .bmenu__lbl, .bmenu__flat.is-active .bmenu__lbl, .bmenu__grp[open] > summary .bmenu__lbl { color: var(--mint-700); }
  .bmenu__cnt { font-family:"Space Mono", monospace; font-size:.68rem; color: var(--neutral-400); }
  .bmenu__sub { list-style:none; margin:0 0 var(--space-3); padding:0 0 0 calc(26px + 10px); display:flex; flex-direction:column; gap:1px; }
  .bmenu__link { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); font-size:.88rem; color: var(--neutral-700); text-decoration:none; padding:4px 0; }
  .bmenu__link--all { font-weight:600; color: var(--ink); }
  .bmenu__link:hover { color: var(--mint-700); }
  .bmenu__link.is-active { color: var(--mint-700); font-weight:700; }
  .bmenu__lcnt { font-family:"Space Mono", monospace; font-size:.68rem; color: var(--neutral-300); }
/* END_SNIPPET:brand-filter-menu */

/* START_SNIPPET:brand-seo-body (INDEX:101) */
.brand-seo { max-width: 860px; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid var(--neutral-100); color: var(--neutral-700); font-size: .95rem; line-height: 1.7; }
  .brand-seo h2 { font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; color: var(--ink); margin: var(--space-6) 0 var(--space-2); letter-spacing: -.01em; }
  .brand-seo h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: var(--space-4) 0 var(--space-1); }
  .brand-seo p { margin: 0 0 var(--space-3); }
  .brand-seo a { color: var(--mint-700); text-decoration: underline; text-underline-offset: 2px; }
  .brand-seo ul { margin: 0 0 var(--space-3) var(--space-4); }
  .brand-seo li { margin: 0 0 4px; }
/* END_SNIPPET:brand-seo-body */

/* START_SNIPPET:facets (INDEX:114) */
.facets { background:#fff; border:1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); box-shadow: 0 1px 2px rgba(10,10,11,.04); }
  .facets__head { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); padding-bottom: var(--space-3); }
  .facets__head-l { display:flex; align-items:center; gap: var(--space-2); font-weight:800; font-size:.96rem; letter-spacing:-.01em; }
  .facets__head-l svg { width:18px; height:18px; color: var(--mint-700); }
  .facets__clear { font-size:.78rem; font-weight:600; color: var(--neutral-500); text-decoration:none; border:1px solid var(--neutral-200); border-radius: var(--radius-pill); padding:3px 10px; transition: color var(--dur-fast), border-color var(--dur-fast); }
  .facets__clear:hover { color: var(--color-error, #c0362c); border-color: currentColor; }
  .facets__active { display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--space-2); }
  .facets__chip { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; background: var(--mint-50, #ecfbf6); color: var(--mint-800, #0c5e4e); border:1px solid var(--mint-200, #b8ede0); border-radius:var(--radius-pill); padding:4px 10px; text-decoration:none; transition: background var(--dur-fast); }
  .facets__chip:hover { background: var(--mint-100, #d6f5ec); }
  .facets__group { border-top:1px solid var(--neutral-100); }
  .facets__group > summary { list-style:none; cursor:pointer; font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:10px; padding: var(--space-3) 0; user-select:none; }
  .facets__group > summary::-webkit-details-marker { display:none; }
  .facets__ico { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border-radius:8px; background: var(--neutral-100); color: var(--neutral-700); transition: background var(--dur-fast), color var(--dur-fast); }
  .facets__ico svg { width:16px; height:16px; }
  .facets__group[open] > summary .facets__ico, .facets__group > summary:hover .facets__ico { background: var(--mint-100, #d6f5ec); color: var(--mint-700); }
  .facets__lbl { flex:1; min-width:0; }
  .facets__cnt { font-size:.68rem; font-weight:800; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background: var(--mint-500); color: var(--ink); display:none; align-items:center; justify-content:center; }
  .facets__cnt.is-on { display:inline-flex; }
  .facets__caret { color: var(--neutral-400); transition: transform var(--dur-fast); }
  .facets__group[open] > summary .facets__caret { transform: rotate(180deg); }
  .facets__body { padding: 2px 0 var(--space-4) 38px; }
  .facets__search { width:100%; font:inherit; font-size:.82rem; padding:7px 10px; border:1px solid var(--neutral-200); border-radius: var(--radius-sm); margin-bottom: var(--space-2); background: var(--neutral-50, #f7f7f8); }
  .facets__search:focus { outline:0; border-color: var(--mint-500); background:#fff; }
  .facets__list { max-height:252px; overflow-y:auto; padding-right:5px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color: var(--neutral-300) var(--neutral-100); }
  .facets__list::-webkit-scrollbar { width:9px; }
  .facets__list::-webkit-scrollbar-track { background: var(--neutral-100); border-radius:8px; }
  .facets__list::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius:8px; border:2px solid var(--neutral-100); }
  .facets__list::-webkit-scrollbar-thumb:hover { background: var(--mint-400); }
  /* Expand/collapse toggle for long facet lists — a small, CLICKABLE mint chevron pinned to the
     bottom. Click = show all options (max-height off) + chevron flips; click again = collapse.
     A soft fade hints "more" while collapsed. JS injects the button + toggles .has-toggle/.is-expanded
     on .facets__body. OS-independent (does not rely on the macOS-hidden overlay scrollbar). */
  .facets__body { position: relative; }
  .facets__body.has-toggle:not(.is-expanded)::after { content:''; position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 82%); pointer-events:none; z-index:1; }
  .facets__body.is-expanded .facets__list { max-height:none; }
  .facets__more { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); z-index:2; display:none; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:var(--mint-500); color:var(--ink); cursor:pointer; box-shadow:0 1px 5px rgba(10,10,11,.22); transition:background var(--dur-fast); }
  .facets__more svg { width:11px; height:11px; transition:transform var(--dur-fast); }
  .facets__more:hover { background:var(--mint-400); }
  .facets__body.has-toggle .facets__more { display:inline-flex; }
  .facets__body.is-expanded .facets__more svg { transform:rotate(180deg); }
  .facets__opt { display:flex; align-items:center; gap:9px; font-size:.86rem; color: var(--neutral-700); padding:5px 0; cursor:pointer; }
  .facets__opt input { position:absolute; opacity:0; width:0; height:0; }
  .facets__box { flex:none; width:18px; height:18px; border:1.5px solid var(--neutral-300); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; transition: border-color var(--dur-fast), background var(--dur-fast); }
  .facets__box svg { width:12px; height:12px; color:#fff; opacity:0; transform:scale(.6); transition: opacity var(--dur-fast), transform var(--dur-fast); }
  .facets__opt input:checked + .facets__box { background: var(--mint-600); border-color: var(--mint-600); }
  .facets__opt input:checked + .facets__box svg { opacity:1; transform:scale(1); }
  .facets__opt input:focus-visible + .facets__box { outline:2px solid var(--mint-500); outline-offset:2px; }
  .facets__opt-lbl { flex:1; }
  .facets__opt-cnt { color: var(--neutral-400); font-size:.78rem; }
  .facets__opt:hover .facets__box { border-color: var(--mint-500); }
  /* size pills */
  .facets__sizes { display:flex; flex-wrap:wrap; gap:6px; }
  .facets__size { cursor:pointer; }
  .facets__size input { position:absolute; opacity:0; width:0; height:0; }
  .facets__size span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:34px; padding:0 10px; border:1.5px solid var(--neutral-200); border-radius: var(--radius-sm); font-size:.82rem; font-weight:700; color: var(--ink); transition: all var(--dur-fast); }
  .facets__size span small { font-weight:500; color: var(--neutral-400); margin-left:4px; font-size:.72rem; }
  .facets__size input:checked + span { border-color: var(--ink); background: var(--ink); color:#fff; }
  .facets__size input:checked + span small { color: rgba(255,255,255,.6); }
  .facets__size:hover span { border-color: var(--neutral-400); }
  /* colour swatches */
  .facets__swatches { display:flex; flex-wrap:wrap; gap: 10px; }
  .facets__swatch-opt { cursor:pointer; position:relative; }
  .facets__swatch-opt input { position:absolute; opacity:0; width:0; height:0; }
  .facets__sw { display:block; width:28px; height:28px; border-radius:50%; border:1px solid rgba(10,10,11,.12); background-size:cover; background-position:center; box-shadow: inset 0 0 0 2px #fff; transition: transform var(--dur-fast); }
  .facets__swatch-opt:hover .facets__sw { transform: scale(1.08); }
  .facets__swatch-opt input:checked + .facets__sw { outline:2px solid var(--mint-600); outline-offset:2px; }
  .facets__vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* Sofortiger Hover-Tooltip mit Farbname (Desktop) — z.B. unterscheidet Carbon von Schwarz */
  .facets__swatch-opt::after { content: attr(data-label); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(4px); background: var(--ink); color:#fff; font-size:.7rem; font-weight:600; line-height:1; white-space:nowrap; padding:4px 7px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index:6; }
  .facets__swatch-opt::before { content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color: var(--ink); pointer-events:none; opacity:0; transition:opacity var(--dur-fast); z-index:6; }
  .facets__swatch-opt:hover::after, .facets__swatch-opt:focus-within::after { opacity:1; transform:translateX(-50%) translateY(0); }
  .facets__swatch-opt:hover::before, .facets__swatch-opt:focus-within::before { opacity:1; }
  /* price */
  .facets__price { display:flex; align-items:flex-end; gap: var(--space-2); flex-wrap:wrap; }
  .facets__price label { font-size:.74rem; color: var(--neutral-500); display:flex; flex-direction:column; gap:3px; flex:1; min-width:60px; }
  .facets__price input { font:inherit; font-size:.9rem; padding:8px; border:1px solid var(--neutral-300); border-radius: var(--radius-sm); width:100%; }
  .facets__price input:focus { outline:0; border-color: var(--mint-500); }
  .facets__apply { background: var(--ink); color:#fff; border:0; border-radius: var(--radius-sm); padding:9px 14px; font-weight:700; font-size:.82rem; cursor:pointer; transition: background var(--dur-fast); }
  .facets__apply:hover { background: var(--mint-700); }
  .facets__empty { font-size:.8rem; color: var(--neutral-400); padding:4px 0; display:none; }
/* END_SNIPPET:facets */

/* START_SNIPPET:product-card (INDEX:138) */
.product-card { position: relative; display: flex; flex-direction: column; gap: var(--space-1); height: 100%; }
    .product-card__link { text-decoration: none; color: inherit; display: block; }
    .product-card__media-wrap { position: relative; }

    /* Swipe gallery — horizontal scroll-snap. First photo loads; the rest lazy-load on first swipe. */
    /* width: auf ganze CSS-Pixel abrunden. Die Rasterspalte ist am Handy oft krumm (393px / 2 = 196,5px),
       der Browser kann die Scroll-Position aber nur in Geräte-Pixel-Schritten treffen. Der Rest-Fehler
       summiert sich mit jedem Bild auf — und genau dieser Streifen am Rand zeigt schon das NÄCHSTE Bild
       (die schwarze bzw. blaue Linie). Mit ganzzahliger Breite liegen Snap-Positionen exakt. */
    .product-card__media { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-100); aspect-ratio: 1/1; width: round(down, 100%, 1px); }
    .pc-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
    .pc-gallery::-webkit-scrollbar { display: none; }
    /* min-width:0 hebt die automatische Mindestbreite von Flex-Items auf. Ohne sie sprengen nicht-quadratische
       Fotos (z.B. 16:9) die Slide auf ihre Inhaltsbreite — sie wird breiter als die Kachel, das Bild sitzt
       falsch angeschnitten und die Punkte-Anzeige zählt daneben. */
    .pc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: block; height: 100%; }
    .pc-slide__img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pc-lazy { background: var(--neutral-100); }

    /* Position dots indicator (only shows when >1 photo) */
    .pc-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 5px; justify-content: center; z-index: 3; pointer-events: none; }
    .pc-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(0,0,0,.22); transition: background var(--dur-fast) var(--ease-out); }
    .pc-dot.is-on { background: var(--ink); }

    /* Desktop image-nav arrows — hover-revealed; hidden on mobile (touch swipes instead). */
    .pc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 5px rgba(0,0,0,.16)); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .pc-nav--prev { left: var(--space-2); }
    .pc-nav--next { right: var(--space-2); }
    .pc-nav svg { width: 16px; height: 16px; display: block; }
    .pc-nav:hover { background: #fff; color: var(--mint-700); }
    @media (min-width: 750px) {
      .product-card__media-wrap .pc-nav { display: inline-flex; }
      .product-card:hover .pc-nav,
      .pc-nav:focus-visible { opacity: 1; }
    }

    /* Badges sit over the wrap (not inside the scroller, so they stay put while swiping) */
    .product-card__media-wrap .badges { position: absolute; top: var(--space-3); left: var(--space-3); flex-direction: column; align-items: flex-start; z-index: 3; margin: 0; }
    .fitbadge__short { display: none; }   /* nur am Handy sichtbar; Desktop zeigt den vollen Fit-Text */

    .product-card__title { font-family: "Inter", sans-serif; font-size: .67rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; margin: 0; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product-card__vendor { display: block; font-family: "Space Mono", monospace; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500); margin: var(--space-2) 0 2px; }
    .product-card .price { font-size: .82rem; font-weight: 500; color: var(--ink); }
    .product-card .price__compare { font-size: .72rem; font-weight: 400; color: var(--neutral-400); margin-left: 5px; }
    /* Farb-Thumbnails kleiner → es passen mehr (bis ~6) in eine Reihe */
    .product-card .product-card__swatches { gap: 4px; }
    .product-card .swatch--img { width: 22px; height: 22px; }
    .product-card .product-card__swatch-more { font-size: .68rem; }
    a.product-card__vendor--link { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
    a.product-card__vendor--link:hover { color: var(--mint-700); }

    .product-card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); }

    /* Compare pill — top-right round icon (desktop) */
    .product-card__compare { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 4; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); cursor: pointer; color: var(--ink); padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
    .product-card__compare.is-active { background: var(--mint-500); border-color: var(--mint-500); }
    .product-card__compare .cat-icon { display: block; width: 16px; height: 16px; }
    .product-card__compare-txt { display: none; }

    /* Round overlay icons — QuickView bottom-right (desktop), Wishlist bottom-left */
    .product-card__quickview, .product-card__wish { position: absolute; bottom: var(--space-3); z-index: 4; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 5px rgba(0,0,0,.16)); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
    .product-card__quickview { right: var(--space-3); }
    .product-card__quickview .cat-icon { width: 18px; height: 18px; }
    .product-card__quickview:hover { background: #fff; color: var(--mint-700); }
    .product-card__wish { left: var(--space-3); color: var(--mint-500); }
    .product-card__wish .cat-icon { width: 22px; height: 22px; display: block; }
    .product-card__wish.is-active .cat-icon { fill: var(--mint-500); }
    .product-card__wish:hover { color: var(--mint-600); }
    .product-card__wish.is-active:hover { transform: scale(1.08); }
    /* Direkt-in-den-Warenkorb — kleines rundes Icon unten rechts am Bild (nur Handy) */
    .product-card__add2 { display: none; position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 4; width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 5px rgba(0,0,0,.16)); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
    .product-card__add2 .cat-icon { width: 18px; height: 18px; display: block; }
    .product-card__add2:hover { background: #fff; color: var(--mint-700); }
    .product-card__add2.is-loading { opacity: .55; }

    /* Mobile (≤749px): H&M look — uniform 1:1 photos edge-to-edge & touching (no gap), square corners,
       heart top-right, no compare/quickview clutter, text slightly inset. */
    @media (max-width: 749px) {
      .collection__grid { margin-inline: calc(-1 * var(--container-pad)); column-gap: 0; row-gap: var(--space-6); }
      .product-card__media { border-radius: 0; }
      /* Helm-Vergleich laeuft vorerst NUR am PC (Nutzer-Entscheid 2026-07-28) → die Pille am Handy aus.
         Sie ist der EINZIGE Ausloeser des Einstiegs-Overlays ([data-helmcmp-entry] in
         assets/helmet-compare-entry.js), damit ist der Vergleich mobil komplett deaktiviert.
         Reaktivieren = diese Regel loeschen und die auskommentierte darunter wieder aktivieren
         (Pille nach oben LINKS, weil oben rechts das Herz sitzt). */
      .product-card__compare, .product-card__quickview { display: none; }
      /* .product-card__compare { top: var(--space-2); left: var(--space-2); right: auto; width: 30px; height: 30px; background: transparent; border-color: transparent; backdrop-filter: none; color: var(--mint-500); } */
      .product-card__wish { top: var(--space-2); right: var(--space-2); bottom: auto; left: auto; width: 30px; height: 30px; background: transparent; box-shadow: none; color: var(--mint-500); }
      .product-card__add2 { display: inline-flex; }
      .product-card__vendor, .product-card__link, .product-card__swatches, .product-card__foot { padding-inline: 12px; }
      /* Badges am Handy kleiner: Rabatt klein oben links; Fit-Badge kurz „✓ Fits my bike" unten links */
      .product-card__media-wrap .badge { font-size: .56rem; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; }
      .product-card__media-wrap .fitbadge { top: auto; bottom: var(--space-2); left: var(--space-2); transform: none; max-width: calc(100% - 54px); font-size: .6rem; font-weight: 700; padding: 3px 8px; }
      .product-card__media-wrap .fitbadge__full { display: none; }
      .product-card__media-wrap .fitbadge__short { display: inline; }
    }

    /* Desktop: 2-line title for even card heights; swatches on one row. */
    @media (min-width: 750px) {
      .product-card__title { -webkit-line-clamp: 2; min-height: 2.6em; }
      .product-card .product-card__swatches { flex-wrap: nowrap; overflow: hidden; }
    }

    /* PC listing grid (≥900px): photos tile edge-to-edge with no column gap (see base.css),
       so square the media corners for a seamless H&M wall. Product photos are square (650×650),
       so object-fit:cover never crops them — every tile is exactly the same size. */
    @media (min-width: 900px) {
      .collection__grid .product-card__media { border-radius: 0; }
      .collection__grid .product-card__vendor,
      .collection__grid .product-card__link,
      .collection__grid .product-card__swatches,
      .collection__grid .product-card__foot { padding-inline: 12px; }
    }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-gallery (INDEX:139) */
/* Handy: Produktbilder direkt durchswipen (Bühne wird ein Wisch-Carousel; Desktop bleibt Thumbnail-Wechsel) */
    @media (max-width: 899px) {
      [data-gallery] .pgallery__stage { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      [data-gallery] .pgallery__stage::-webkit-scrollbar { display: none; }
      .js [data-gallery] .pgallery__slide { display: block; position: relative; inset: auto; flex: 0 0 100%; scroll-snap-align: start; }
    }

    /* Desktop (≥900px): prev/next arrows on the main image. Hidden on mobile, where the stage is a swipe carousel. */
    .pgallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .pgallery__arrow--prev { left: var(--space-3); }
    .pgallery__arrow--next { right: var(--space-3); }
    .pgallery__arrow svg { width: 20px; height: 20px; display: block; }
    .pgallery__arrow:hover { background: #fff; color: var(--mint-700); }
    @media (min-width: 900px) { [data-gallery] .pgallery__arrow { display: inline-flex; } }
/* END_SNIPPET:product-gallery */

/* START_SNIPPET:product-tabs (INDEX:143) */
.ptabs { margin-top: clamp(var(--space-3), 2.5vw, var(--space-6)); }
    .ptabs__list { display:flex; gap: var(--space-6); border-bottom:2px solid var(--neutral-100); flex-wrap:wrap; }
    .ptabs__tab { background:none; border:0; font:inherit; font-weight:700; padding: var(--space-3) 0; cursor:pointer; color: var(--neutral-500); border-bottom:2px solid transparent; margin-bottom:-2px; }
    .ptabs__tab[aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--mint-500); }
    .ptabs__panel { padding: var(--space-6) 0; }
    .ptabs__panel[hidden]{ display:none; }
    .ptabs__fitlist { columns: 2; font-size:.9rem; }
    .pbox__grid { list-style:none; margin:0; padding: var(--space-2) 0; display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8) var(--space-6); }
    @media (min-width:600px){ .pbox__grid { grid-template-columns: repeat(3,1fr); } }
    @media (min-width:900px){ .pbox__grid { grid-template-columns: repeat(5,1fr); } }
    .pbox { display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--space-3); }
    .pbox__media { width:100%; height:96px; display:flex; align-items:center; justify-content:center; }
    .pbox__media img { max-width:100%; max-height:96px; width:auto; height:auto; object-fit:contain; display:block; }
    .pbox__media .placeholder { width:64px; height:64px; border-radius: var(--radius-md); background: var(--neutral-100); }
    .pbox__title { font-weight:600; color: var(--neutral-700); font-size:.92rem; line-height:1.3; }
    .pdocs { list-style:none; margin:0; padding:0; display:grid; gap: var(--space-3); max-width:560px; }
    .pdocs__link { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border:1px solid var(--neutral-200); border-radius: var(--radius-md); text-decoration:none; color: var(--ink); transition: border-color var(--dur-fast), background var(--dur-fast); }
    .pdocs__link:hover, .pdocs__link:focus-visible { border-color: var(--mint-500); background: var(--mint-100); outline:none; }
    .pdocs__ico { display:flex; color: var(--neutral-500); flex:0 0 auto; }
    .pdocs__link:hover .pdocs__ico { color: var(--mint-700); }
    .pdocs__label { font-weight:600; flex:1 1 auto; }
    .pdocs__ext { font-size:.72rem; font-weight:700; letter-spacing:.06em; color: var(--neutral-500); border:1px solid var(--neutral-200); border-radius: var(--radius-pill); padding:2px 8px; flex:0 0 auto; }
    .pdocs__note { font-size:.82rem; color: var(--neutral-500); margin: var(--space-2) 0 0; }
    .ptabs__kitjump { margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--mint-500); color: var(--mint-700); font:inherit; font-weight:700; font-size:.82rem; padding:6px 14px; border-radius: var(--radius-pill); cursor:pointer; transition: background var(--dur-fast), color var(--dur-fast); }
    .ptabs__kitjump:hover, .ptabs__kitjump:focus-visible { background: var(--mint-500); color:#04231d; outline:none; }
    .ptabs__kitdot { width:7px; height:7px; border-radius:50%; background: currentColor; flex:0 0 auto; }
    @media (max-width:749px){ .ptabs__kitjump { margin-left:0; font-size:.76rem; padding:5px 11px; } }
    .spec-table { width:100%; border-collapse:collapse; margin-bottom: var(--space-4); }
    .spec-table th, .spec-table td { text-align:left; padding: var(--space-2) var(--space-3); border-bottom:1px solid var(--neutral-100); font-size:.9rem; vertical-align:top; }
    .spec-table th { font-weight:700; color: var(--neutral-700); width:40%; }
    [dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td { text-align:right; }
    /* ---- Mobile: Tab-Leiste + Inhalte kompakter & aufgeräumter ---- */
    @media (max-width:749px){
      /* Tab-Leiste FIX (nicht wischbar): bricht bei wenig Platz sauber in 2. Zeile um,
         statt horizontal weggezogen zu werden (iOS-Gummiband fühlte sich wie ein Bug an) */
      .ptabs__list { gap: var(--space-2) var(--space-4); flex-wrap: wrap; overflow-x: clip; }
      .ptabs__tab { font-size: .82rem; padding: var(--space-2) 0; white-space: nowrap; }
      /* Panels + Texte kompakter (Beschreibungs-Überschriften waren ~25px → runter) */
      .ptabs__panel { padding: var(--space-4) 0; }
      .ptabs .rte { font-size: .92rem; line-height: 1.6; }
      .ptabs .rte h2 { font-size: 1.25rem; }
      .ptabs .rte h3 { font-size: 1.05rem; }
      .ptabs .spec-table th, .ptabs .spec-table td { font-size: .84rem; padding: var(--space-2); }
      .ptabs__fitlist { font-size: .84rem; }
    }
/* END_SNIPPET:product-tabs */

/* START_SNIPPET:rider-id-card (INDEX:149) */
.ridcard{ --rid-mint:#15cdb0; --rid-mint2:#34e7cc; --rid-mint3:#8af5e3; --rid-ink:#eaf5f2; --rid-sub:#8ea09b; --rid-mut:#566460; --rid-line:rgba(255,255,255,.10); --rid-c1:#0f161b; --rid-c2:#0a1014; --rid-glow:rgba(21,205,176,.5); --rid-gold:#ffce6b; --rid-W:560px; --rid-H:372px; --rid-T:18px;
    --rid-edge:rgba(21,205,176,.22); --rid-topA:#0f8f7c; --rid-topB:#9af5e6; --rid-topC:#17d1b6; --rid-tex:none;
    display:flex; flex-direction:column; align-items:center; gap:22px; }
  .ridcard__stage{ width:var(--rid-W); height:var(--rid-H); perspective:1800px; perspective-origin:50% 40%; max-width:94vw; }
  /* Small screens: the card's interior is laid out at a fixed 560x372, so
     max-width:94vw shrank the frame while the contents kept their size and were
     clipped. Scale the whole stage instead — the interior keeps its proportions.
     transform does not shrink the layout box, so negative margins pull the
     footprint in to match, otherwise the 560px box would force a sideways
     scroll. One number to tune: --rid-s. */
  @media (max-width:749px){
    .ridcard__stage{
      --rid-s:.62;
      max-width:none;
      transform:scale(var(--rid-s));
      transform-origin:top center;
      margin-left:calc(var(--rid-W) * (var(--rid-s) - 1) / 2);
      margin-right:calc(var(--rid-W) * (var(--rid-s) - 1) / 2);
      margin-bottom:calc(var(--rid-H) * (var(--rid-s) - 1));
    }
  }
  @media (max-width:400px){ .ridcard__stage{ --rid-s:.55; } }
  .ridcard__card{ position:relative; width:100%; height:100%; transform-style:preserve-3d; cursor:grab; touch-action:none; will-change:transform; }
  .ridcard__card.grab{ cursor:grabbing; }
  .ridcard__face{ position:absolute; left:50%; top:50%; border-radius:22px; overflow:hidden; }
  .ridcard__ff{ width:var(--rid-W); height:var(--rid-H); background:linear-gradient(155deg,var(--rid-c1),var(--rid-c2)); border:1px solid var(--rid-line); backface-visibility:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; }
  .ridcard__front{ transform:translate(-50%,-50%) translateZ(calc(var(--rid-T)/2)); }
  .ridcard__back{ transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--rid-T)/2)); }
  /* edges = dark card thickness (subtle dark gradient, no mint line) */
  .ridcard__edgeR,.ridcard__edgeL{ background:linear-gradient(90deg,#090d10,#171f25 50%,#090d10); }
  .ridcard__edgeT,.ridcard__edgeB{ background:linear-gradient(180deg,#090d10,#171f25 50%,#090d10); }
  .ridcard__edgeR{ width:var(--rid-T); height:var(--rid-H); transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--rid-W)/2)); }
  .ridcard__edgeL{ width:var(--rid-T); height:var(--rid-H); transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--rid-W)/2)); }
  .ridcard__edgeT{ width:var(--rid-W); height:var(--rid-T); transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--rid-H)/2)); }
  .ridcard__edgeB{ width:var(--rid-W); height:var(--rid-T); transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--rid-H)/2)); }
  .ridcard__guilloche{ position:absolute; inset:0; opacity:.6; pointer-events:none;
    background:repeating-radial-gradient(circle at 20% 118%,transparent 0 12px,rgba(21,205,176,.05) 12px 13px),repeating-radial-gradient(circle at 92% -14%,transparent 0 11px,rgba(120,230,255,.04) 11px 12px),repeating-linear-gradient(118deg,transparent 0 20px,rgba(255,255,255,.016) 20px 21px); }
  .ridcard__ghost{ position:absolute; right:24px; bottom:64px; width:96px; height:120px; border-radius:12px; opacity:.10; filter:grayscale(1) contrast(1.1); object-fit:cover; pointer-events:none; }
  .ridcard__ghost:not([src]){ display:none; }
  .ridcard__micro{ position:absolute; left:26px; right:26px; bottom:6px; text-align:center; font-size:5px; letter-spacing:1.5px; color:rgba(255,255,255,.16); white-space:nowrap; overflow:hidden; pointer-events:none; z-index:1; }
  .ridcard__holo{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:0;
    background:linear-gradient(110deg,transparent 20%,rgba(21,205,176,.62) 34%,rgba(120,230,255,.76) 45%,rgba(190,140,255,.66) 55%,rgba(255,206,107,.54) 66%,transparent 80%); background-size:260% 260%; }
  .ridcard__glare{ position:absolute; inset:-40%; pointer-events:none; mix-blend-mode:soft-light; opacity:0;
    background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0) 70%); width:60%; height:60%; }
  .ridcard__topline{ position:absolute; top:0; left:0; right:0; height:4px; z-index:3; background:linear-gradient(90deg,#15cdb0,#aefff2,#7fa0ff,#15cdb0); background-size:240% 100%; animation:ridSweep 5s linear infinite; }
  @keyframes ridSweep{ to{ background-position:-240% 0; } }
  .ridcard__pad{ position:absolute; inset:0; padding:18px 26px; display:flex; flex-direction:column; z-index:2; }
  .ridcard__hd{ display:flex; align-items:center; justify-content:space-between; }
  .ridcard__brand{ display:flex; align-items:center; gap:9px; }
  .ridcard__di{ width:11px; height:11px; background:var(--rid-mint); transform:rotate(45deg); box-shadow:0 0 12px var(--rid-glow); }
  .ridcard__brand b{ font-weight:700; letter-spacing:.16em; font-size:13.5px; color:var(--rid-ink); }
  .ridcard__kind{ font-size:11.5px; letter-spacing:.3em; color:var(--rid-mint3); }
  .ridcard__who{ display:flex; gap:16px; margin-top:7px; align-items:flex-start; }
  .ridcard__photo{ width:82px; height:86px; border-radius:12px; flex:none; overflow:hidden; position:relative; cursor:pointer;
    background:radial-gradient(70% 60% at 50% 30%,rgba(21,205,176,.28),rgba(255,255,255,.05)); border:1px solid var(--rid-mint); box-shadow:0 0 18px -4px var(--rid-glow); }
  .ridcard__photo img{ width:100%; height:100%; object-fit:cover; display:none; }
  .ridcard__photo.has img{ display:block; }
  .ridcard__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--rid-mint3); }
  .ridcard__photo.has .ridcard__ph{ display:none; }
  .ridcard__ph svg{ width:46px; height:46px; }
  .ridcard__cam{ position:absolute; left:0; right:0; bottom:0; font-size:8.5px; font-weight:700; letter-spacing:.06em; text-align:center; color:#04231d; background:var(--rid-mint); padding:3px; text-transform:uppercase; }
  .ridcard__whoMain h2{ font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--rid-ink); margin:0; }
  .ridcard__no{ font-size:12px; letter-spacing:.12em; color:var(--rid-sub); margin-top:2px; }
  .ridcard__status{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--rid-mint3); }
  .ridcard__dot{ width:7px; height:7px; border-radius:50%; background:var(--rid-mint); box-shadow:0 0 8px var(--rid-glow); animation:ridPulse 1.8s infinite; }
  @keyframes ridPulse{ 50%{ opacity:.4; } }
  .ridcard__bstats{ display:flex; gap:16px; margin-top:8px; }
  .ridcard__bstats span{ font-size:16px; font-weight:700; color:var(--rid-ink); letter-spacing:-.01em; }
  .ridcard__bstats span em{ font-style:normal; font-size:11px; font-weight:500; color:var(--rid-sub); margin-left:3px; letter-spacing:.04em; }
  .ridcard__bmiss{ font-size:11.5px!important; font-weight:600!important; color:var(--rid-sub)!important; letter-spacing:.02em!important; }
  .ridcard__rows{ margin-top:auto; display:flex; flex-direction:column; gap:7px; }
  .ridcard__row{ display:flex; align-items:center; gap:12px; }
  .ridcard__ic{ width:32px; height:32px; border-radius:9px; flex:none; background:rgba(255,255,255,.05); border:1px solid var(--rid-line); display:flex; align-items:center; justify-content:center; color:var(--rid-mint3); }
  .ridcard__ic svg{ width:19px; height:19px; }
  .ridcard__k{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--rid-mut); }
  .ridcard__v{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin-top:1px; color:var(--rid-ink); }
  .ridcard__dim{ color:var(--rid-sub); font-weight:500; }
  .ridcard__cta{ display:inline-block; font-size:13px; font-weight:600; margin-top:2px; color:var(--rid-mint3); text-decoration:none; border-bottom:1px dashed rgba(138,245,227,.5); }
  .ridcard__cta--btn{ background:none; border:0; border-bottom:1px dashed rgba(138,245,227,.5); padding:0; cursor:pointer; font-family:inherit; }
  .ridcard__cta:hover{ color:var(--rid-mint2); }
  .ridcard__sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:1px; }
  .ridcard__sz{ background:rgba(255,255,255,.05); border:1px solid var(--rid-line); border-radius:11px; padding:6px 8px; text-align:center; }
  .ridcard__szk{ display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--rid-mut); }
  .ridcard__szv{ display:block; font-size:15px; font-weight:800; margin-top:2px; letter-spacing:-.01em; color:var(--rid-ink); }
  .ridcard__ipwm{ position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.07; background:var(--rid-mint3);
    -webkit-mask-image:url('ip-logo.png'); mask-image:url('ip-logo.png'); -webkit-mask-size:42px auto; mask-size:42px auto; -webkit-mask-repeat:repeat; mask-repeat:repeat; -webkit-mask-position:center; mask-position:center; }
  .ridcard__ft{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:6px; }
  .ridcard__chipwrap{ display:flex; align-items:center; gap:12px; }
  .ridcard__chip{ width:44px; height:33px; border-radius:7px; background:linear-gradient(135deg,#1c6f61,#2fe3c6 45%,#0c8f7c); position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; }
  .ridcard__chip::before,.ridcard__chip::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(7,10,13,.45); border-radius:3px; }
  .ridcard__chip::after{ inset:7px 13px; }
  .ridcard__seal{ width:38px; height:38px; border-radius:50%; position:relative;
    background:conic-gradient(from 0deg,#15cdb0,#7fa0ff,#be8cff,#ffce6b,#15cdb0); -webkit-mask:radial-gradient(circle,transparent 8px,#000 9px); mask:radial-gradient(circle,transparent 8px,#000 9px); box-shadow:0 0 12px rgba(21,205,176,.4); animation:ridSpin 7s linear infinite; }
  @keyframes ridSpin{ to{ transform:rotate(360deg); } }
  .ridcard__meta{ text-align:right; }
  .ridcard__ver{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--rid-mint3); }
  .ridcard__iss{ font-size:10px; color:var(--rid-mut); letter-spacing:.08em; margin-top:3px; }
  .ridcard__ring{ position:absolute; top:60px; right:24px; width:38px; height:38px; z-index:3; }
  .ridcard__ring svg{ transform:rotate(-90deg); }
  .ridcard__ringn{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:var(--rid-ink); }
  /* back */
  .ridcard__strip{ position:absolute; top:28px; left:0; right:0; height:40px; background:#04070a; }
  .ridcard__bk{ position:absolute; inset:0; padding:84px 26px 22px; display:flex; flex-direction:column; z-index:2; }
  .ridcard__bk p{ font-size:12px; line-height:1.6; color:var(--rid-sub); margin:0; }
  .ridcard__barcode{ height:42px; margin-top:auto; background:repeating-linear-gradient(90deg,var(--rid-ink) 0 2px,transparent 2px 4px,var(--rid-ink) 4px 5px,transparent 5px 9px); border-radius:3px; opacity:.85; }
  .ridcard__bno{ font-size:10.5px; letter-spacing:.2em; color:var(--rid-mut); margin-top:8px; text-align:center; }
  .ridcard__controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
  .ridcard__up{ font:inherit; font-size:12.5px; font-weight:700; color:#04231d; background:var(--rid-mint); border:0; border-radius:10px; padding:9px 14px; cursor:pointer; }
  .ridcard__up:hover{ background:var(--rid-mint2); }
  .ridcard__reset{ font:inherit; font-size:12.5px; color:var(--rid-sub); background:none; border:1px solid var(--rid-line); border-radius:10px; padding:8px 12px; cursor:pointer; }
  .ridcard__reset:hover{ border-color:var(--rid-mint); color:var(--rid-mint3); }
  .ridcard__hint{ font-size:12px; color:var(--rid-mut); text-align:center; margin:0; }
  @media (prefers-reduced-motion: reduce){
    .ridcard__topline,.ridcard__seal,.ridcard__dot{ animation:none; }
    .ridcard__card{ cursor:default; }
  }

  /* Rank-skin material + numeral + colored edge (Amex-style) */
  .ridcard__ff{ box-shadow:inset 0 0 0 1px var(--rid-edge), inset 0 0 70px -34px var(--rid-glow), 0 0 0 1px rgba(255,255,255,.04) inset; }
  .ridcard__front .ridcard__topline{ background:linear-gradient(90deg,var(--rid-topA),var(--rid-topB),var(--rid-topC),var(--rid-topA)); background-size:240% 100%; }
  .ridcard__tex{ position:absolute; inset:0; pointer-events:none; z-index:0; background:var(--rid-tex); }
  .ridcard__big{ position:absolute; right:8px; bottom:-46px; z-index:0; font-size:230px; line-height:1; font-weight:900; font-style:italic; letter-spacing:-12px; color:var(--rid-mint); opacity:.09; pointer-events:none; }
  .rrank--newcomer{ --rid-c1:#171e24; --rid-c2:#0b1015; }
  .rrank--rider{ --rid-c1:#142633; --rid-c2:#08131f; --rid-mint:#33ccff; --rid-mint2:#7fe0ff; --rid-mint3:#c4eeff; --rid-glow:rgba(51,204,255,.42); --rid-edge:rgba(51,204,255,.26); --rid-topA:#1f7fb8; --rid-topB:#c4eeff; --rid-topC:#33ccff; --rid-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px); }
  .rrank--pro{ --rid-c1:#262f2d; --rid-c2:#0f1615; --rid-mint:#43ffab; --rid-mint2:#86ffca; --rid-mint3:#c8ffe6; --rid-glow:rgba(67,255,171,.44); --rid-edge:rgba(67,255,171,.3); --rid-topA:#1c9c66; --rid-topB:#c8ffe6; --rid-topC:#43ffab; --rid-tex:linear-gradient(120deg,rgba(255,255,255,.09),transparent 40%),repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px); }
  .rrank--elite{ --rid-c1:#33352f; --rid-c2:#161712; --rid-mint:#8ef0e4; --rid-mint2:#ccfff8; --rid-mint3:#f0fffc; --rid-ink:#f6fffc; --rid-glow:rgba(160,240,230,.5); --rid-edge:rgba(210,245,240,.34); --rid-topA:#88c4ba; --rid-topB:#ffffff; --rid-topC:#8ef0e4; --rid-tex:linear-gradient(108deg,rgba(255,255,255,.18),transparent 36%),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 2px); }
  .rrank--veteran{ --rid-c1:#15191c; --rid-c2:#07080a; --rid-mint:#ff3b3b; --rid-mint2:#ff7a5f; --rid-mint3:#ffb3a3; --rid-glow:rgba(255,59,59,.46); --rid-edge:rgba(255,59,59,.32); --rid-topA:#8f1f1f; --rid-topB:#ff9a8a; --rid-topC:#ff3b3b; --rid-tex:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 2px,transparent 2px 5px),repeating-linear-gradient(135deg,rgba(0,0,0,.5) 0 2px,transparent 2px 5px); }
  .rrank--legend{ --rid-c1:#120d06; --rid-c2:#060402; --rid-mint:#ffcf6b; --rid-mint2:#ffe1a0; --rid-mint3:#ffdd8f; --rid-gold:#ffcf6b; --rid-glow:rgba(255,207,107,.42); --rid-edge:rgba(255,207,107,.34); --rid-topA:#8a6a1e; --rid-topB:#ffe9b0; --rid-topC:#a97f22; --rid-tex:repeating-radial-gradient(circle at 86% -10%,transparent 0 13px,rgba(255,207,107,.07) 13px 14px),linear-gradient(120deg,rgba(255,207,107,.09),transparent 44%); }
  .rrank--icon{ --rid-c1:#101113; --rid-c2:#060607; --rid-mint:#dfe7ea; --rid-mint2:#f4f7f8; --rid-mint3:#eef4f6; --rid-gold:#dfe7ea; --rid-glow:rgba(223,231,234,.2); --rid-edge:rgba(223,231,234,.36); --rid-line:rgba(255,255,255,.11); --rid-topA:#4a5155; --rid-topB:#f4f7f8; --rid-topC:#5a6165; --rid-tex:linear-gradient(115deg,rgba(255,255,255,.12),transparent 42%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px); }
/* END_SNIPPET:rider-id-card */