/* kms-v2-tokens.css - design system v2 "neon trio on graphite" (KAN-1734, epic KAN-1732, BRIEF §3.1, 12.11.2026).
   Loaded ONLY when SITE_V2 is on (layout/theme.liquid: html[data-kms-v2], worker var SITE_V2 or theme setting
   kms_site_v2; on transfer.* also ?kms_v2=1). Flag off = this file is not on the page and nothing changes.

   Colour jobs (only these):
     lime    #C6FF3A  the ONE primary action per screen region (Add to cart / Subscribe / Search), ✓ included, toggles
     magenta #FF2E88  brand mark, the subscription / deal frame (one per viewport), deal badge
     blue    #3D8BFF  links and info, everywhere
     cyan    #22E5FF  "works with your AI" chips, connector UI, focus ring
     collection accent (Cover System, one colour family per collection): hover glow, category chip, PDP glow
     white            secondary buttons
   How the old lime goes away: scripts/site-v2-lime-sweep.mjs rewrote every non-action lime value in the theme to
   var(--kms-v2-<role>, <old value>). The roles are defined below; without this file they do not exist and the old
   value applies. Table selector -> before -> after: docs/site-v2/lime-sweep.md.
   Roll back: SITE_V2 = "0" (+ PAGE_CACHE_EPOCH bump + deploy) or theme setting kms_site_v2 off. */

/* ---------- 1. Graphite tokens (guidebook 2026.10, unchanged values) ----------
   Private names (--kv2-*) for this file: older layers redefine the public names with ID selectors and !important
   (snippets/kms-header-actions.liquid forces --kms-blue to magenta and --kms-cyan to lime). The public --kms-* names
   are re-pointed below with a stronger selector so v2 components elsewhere get the guidebook values too. */
html[data-kms-v2] {
  --kv2-bg-sunk: #08090A;
  --kv2-bg: #0C0D0F;
  --kv2-surface: #131417;
  --kv2-surface-2: #191A1E;
  --kv2-surface-3: #202227;
  --kv2-surface-4: #2A2D33;
  --kv2-hair: rgba(255, 255, 255, .06);
  --kv2-hair-strong: rgba(255, 255, 255, .10);
  --kv2-line: #24262B;
  --kv2-line-2: #303339;
  --kv2-text: #F4F5F7;
  --kv2-text-2: #B6B9BF;
  --kv2-muted: #8E9299;
  --kv2-faint: #62666D;
  --kv2-on-accent: #0C0D0F;
  --kv2-white: #F2F3F5;

  --kv2-lime: #C6FF3A;
  --kv2-lime-hi: #D6FF6E;
  --kv2-lime-edge: #7E9F1F;
  --kv2-magenta: #FF2E88;
  --kv2-magenta-hi: #FF5AA3;
  --kv2-magenta-deep: #5A0B31;
  --kv2-blue: #3D8BFF;
  --kv2-blue-hi: #6AA6FF;
  --kv2-cyan: #22E5FF;
  --kv2-magenta-tint: rgba(255, 46, 136, .14);
  --kv2-blue-tint: rgba(61, 139, 255, .14);
  --kv2-cyan-tint: rgba(34, 229, 255, .12);
  --kv2-lime-tint: rgba(198, 255, 58, .12);

  --kv2-btn-3d: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 6px 4px rgba(0, 0, 0, .22), 0 28px 22px rgba(0, 0, 0, .14);
  --kv2-btn-3d-lime: inset 0 -3px 0 var(--kv2-lime-edge), 0 6px 4px rgba(0, 0, 0, .22), 0 28px 22px rgba(0, 0, 0, .14);
  --kv2-glow-magenta: 0 0 0 1px rgba(255, 46, 136, .55), 0 0 24px rgba(255, 46, 136, .35);
  --kv2-glow-cyan: 0 0 0 1px rgba(34, 229, 255, .55), 0 0 24px rgba(34, 229, 255, .30);
  --kv2-focus: 0 0 0 2px var(--kv2-bg), 0 0 0 4px var(--kv2-cyan);
  --kv2-focus-ring: var(--kv2-focus);
  --kv2-r-md: 10px;
  --kv2-r-lg: 14px;
  --kv2-r-xl: 20px;
  --kv2-r-pill: 999px;
  --kv2-ease: cubic-bezier(.2, .7, .2, 1);
  --kv2-t-fast: 120ms;
  --kv2-t-base: 200ms;
}


/* public guidebook names under v2 (beats html:not(#k1):not(#k2):not(#k3){... !important}) */
html[data-kms-v2]:not(#kv2a):not(#kv2b):not(#kv2c):not(#kv2d) {
  --kms-bg-sunk: var(--kv2-bg-sunk) !important;
  --kms-bg: var(--kv2-bg) !important;
  --kms-surface: var(--kv2-surface) !important;
  --kms-surface-2: var(--kv2-surface-2) !important;
  --kms-surface-3: var(--kv2-surface-3) !important;
  --kms-surface-4: var(--kv2-surface-4) !important;
  --kms-hair: var(--kv2-hair) !important;
  --kms-hair-strong: var(--kv2-hair-strong) !important;
  --kms-line: var(--kv2-line) !important;
  --kms-line-2: var(--kv2-line-2) !important;
  --kms-text: var(--kv2-text) !important;
  --kms-text-2: var(--kv2-text-2) !important;
  --kms-muted: var(--kv2-muted) !important;
  --kms-faint: var(--kv2-faint) !important;
  --kms-on-accent: var(--kv2-on-accent) !important;
  --kms-white: var(--kv2-white) !important;
  --kms-lime: var(--kv2-lime) !important;
  --kms-lime-hi: var(--kv2-lime-hi) !important;
  --kms-lime-edge: var(--kv2-lime-edge) !important;
  --kms-magenta: var(--kv2-magenta) !important;
  --kms-magenta-hi: var(--kv2-magenta-hi) !important;
  --kms-magenta-deep: var(--kv2-magenta-deep) !important;
  --kms-blue: var(--kv2-blue) !important;
  --kms-blue-hi: var(--kv2-blue-hi) !important;
  --kms-cyan: var(--kv2-cyan) !important;
  --kms-magenta-tint: var(--kv2-magenta-tint) !important;
  --kms-blue-tint: var(--kv2-blue-tint) !important;
  --kms-cyan-tint: var(--kv2-cyan-tint) !important;
  --kms-lime-tint: var(--kv2-lime-tint) !important;
  --kms-btn-3d: var(--kv2-btn-3d) !important;
  --kms-btn-3d-lime: var(--kv2-btn-3d-lime) !important;
  --kms-glow-magenta: var(--kv2-glow-magenta) !important;
  --kms-glow-cyan: var(--kv2-glow-cyan) !important;
  --kms-focus: var(--kv2-focus) !important;
  --kms-focus-ring: var(--kv2-focus-ring) !important;
  --kms-r-md: var(--kv2-r-md) !important;
  --kms-r-lg: var(--kv2-r-lg) !important;
  --kms-r-xl: var(--kv2-r-xl) !important;
  --kms-r-pill: var(--kv2-r-pill) !important;
  --kms-ease: var(--kv2-ease) !important;
  --kms-t-fast: var(--kv2-t-fast) !important;
  --kms-t-base: var(--kv2-t-base) !important;
  --lab-blue: #3D8BFF !important;
  --lab-violet: #9B6BFF !important;
}

/* ---------- 2. Collection accents (COVER_SYSTEM_SPEC §5: accent = hsl(hue 68% 56%), light = hsl(hue 72% 72%)) ----------
   data-accent="<family>" on product cards, the PDP and the collection hero (snippets/kms-v2-accent.liquid picks the
   family from the collection handle / product collections). */
html[data-kms-v2] {
  --kms-accent-coral: #DB6643;
  --kms-accent-amber: #DB9443;
  --kms-accent-gold: #DBB743;
  --kms-accent-green: #43DB75;
  --kms-accent-teal: #43DBBD;
  --kms-accent-cyanblue: #43A8DB;
  --kms-accent-blue: #435CDB;
  --kms-accent-indigo: #5C43DB;
  --kms-accent-violet: #9443DB;
  --kms-accent-magenta: #DB43BD;
  --kms-accent-leaf: #80DB43;
}
[data-accent="coral"]    { --kms-accent: #DB6643; --kms-accent-rgb: 219, 102, 67;  --kms-accent-light: #EB9C84; }
[data-accent="amber"]    { --kms-accent: #DB9443; --kms-accent-rgb: 219, 148, 67;  --kms-accent-light: #EBBB84; }
[data-accent="gold"]     { --kms-accent: #DBB743; --kms-accent-rgb: 219, 183, 67;  --kms-accent-light: #EBD384; }
[data-accent="green"]    { --kms-accent: #43DB75; --kms-accent-rgb: 67, 219, 117;  --kms-accent-light: #84EBA6; }
[data-accent="teal"]     { --kms-accent: #43DBBD; --kms-accent-rgb: 67, 219, 189;  --kms-accent-light: #84EBD6; }
[data-accent="cyanblue"] { --kms-accent: #43A8DB; --kms-accent-rgb: 67, 168, 219;  --kms-accent-light: #84C9EB; }
[data-accent="blue"]     { --kms-accent: #435CDB; --kms-accent-rgb: 67, 92, 219;   --kms-accent-light: #8495EB; }
[data-accent="indigo"]   { --kms-accent: #5C43DB; --kms-accent-rgb: 92, 67, 219;   --kms-accent-light: #9584EB; }
[data-accent="violet"]   { --kms-accent: #9443DB; --kms-accent-rgb: 148, 67, 219;  --kms-accent-light: #BB84EB; }
[data-accent="magenta"]  { --kms-accent: #DB43BD; --kms-accent-rgb: 219, 67, 189;  --kms-accent-light: #EB84D6; }
[data-accent="leaf"]     { --kms-accent: #80DB43; --kms-accent-rgb: 128, 219, 67;  --kms-accent-light: #ADEB84; }

/* ---------- 3. Sweep roles (what the old lime becomes) ----------
   Defined on the root AND on every [data-accent] element: a custom property that uses var() is resolved where it is
   declared, so the accent scope has to declare the roles again to pick up its own --kms-accent. */
html[data-kms-v2],
html[data-kms-v2] [data-accent] {
  /* eyebrows, counters, inline highlights: collection accent, else blue */
  --kms-v2-text: var(--kms-accent-light, var(--kv2-blue));
  --kms-v2-text-rgb: var(--kms-accent-rgb, 61, 139, 255);
  --kms-v2-text-soft: rgba(var(--kms-v2-text-rgb), .14);
  /* links: always blue */
  --kms-v2-link: var(--kv2-blue);
  --kms-v2-link-rgb: 61, 139, 255;
  --kms-v2-link-soft: rgba(61, 139, 255, .14);
  /* non-action solid fills (dots, steps, pills, bars, secondary buttons): neutral white, never the accent - a solid
     accent fill on a large button reads as a second primary action (Adam review 12.11) */
  --kms-v2-fill: var(--kv2-white);
  --kms-v2-fill-rgb: 242, 243, 245;
  --kms-v2-fill-soft: rgba(var(--kms-v2-fill-rgb), .14);
  /* deal / sale / "most chosen" badges, announcement: magenta */
  --kms-v2-deal: var(--kv2-magenta);
  --kms-v2-deal-rgb: 255, 46, 136;
  --kms-v2-deal-soft: var(--kv2-magenta-tint);
  /* card / panel tints: neutral white tint, or the accent */
  --kms-v2-tint-rgb: var(--kms-accent-rgb, 255, 255, 255);
  --kms-v2-tint: rgba(var(--kms-v2-tint-rgb), .08);
  --kms-v2-tint-soft: rgba(var(--kms-v2-tint-rgb), .08);
  /* borders: neutral hairline, or the accent */
  --kms-v2-line: var(--kms-accent, var(--kv2-line-2));
  --kms-v2-line-rgb: var(--kms-accent-rgb, 255, 255, 255);
  --kms-v2-line-soft: rgba(var(--kms-v2-line-rgb), .14);
  /* glows and gradients: the accent, else blue */
  --kms-v2-glow: var(--kms-accent, var(--kv2-blue));
  --kms-v2-glow-rgb: var(--kms-accent-rgb, 61, 139, 255);
  --kms-v2-glow-soft: rgba(var(--kms-v2-glow-rgb), .14);
  /* focus: cyan */
  --kms-v2-focus: var(--kv2-cyan);
  --kms-v2-focus-rgb: 34, 229, 255;
  --kms-v2-focus-soft: var(--kv2-cyan-tint);
}

/* links in copy: blue (Horizon reads --color-primary for links; the sweep pointed it at --kms-v2-link) */
html[data-kms-v2] :focus-visible { outline-color: var(--kv2-cyan); }

/* ---------- 4. Components (opt-in classes, used by /pages/v2-components and the v2 page cards) ---------- */
html[data-kms-v2] .kms-v2-btn {
  --_bg: var(--kv2-surface-3);
  --_fg: var(--kv2-text);
  --_bd: var(--kv2-hair-strong);
  --_sh: var(--kv2-btn-3d);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--kv2-r-md);
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); box-shadow: var(--_sh);
  font: 600 16px/1 var(--kms-font-sans, "Geist", system-ui, sans-serif); letter-spacing: 0; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--kv2-t-fast) var(--kv2-ease), transform var(--kv2-t-fast) var(--kv2-ease), border-color var(--kv2-t-fast) var(--kv2-ease);
}
html[data-kms-v2] .kms-v2-btn:hover { transform: translateY(-1px); }
html[data-kms-v2] .kms-v2-btn:active { transform: translateY(1px); }
html[data-kms-v2] .kms-v2-btn:focus-visible { outline: 0; box-shadow: var(--_sh), var(--kv2-focus); }
html[data-kms-v2] .kms-v2-btn[disabled] { --_bg: var(--kv2-surface-3); --_fg: var(--kv2-muted); --_bd: var(--kv2-hair); --_sh: none; opacity: .6; pointer-events: none; }
/* the one primary action of a region */
html[data-kms-v2] .kms-v2-btn--primary { --_bg: var(--kv2-lime); --_fg: var(--kv2-on-accent); --_bd: var(--kv2-lime); --_sh: var(--kv2-btn-3d-lime); }
html[data-kms-v2] .kms-v2-btn--primary:hover { --_bg: var(--kv2-lime-hi); }
/* secondary: white */
html[data-kms-v2] .kms-v2-btn--white { --_bg: var(--kv2-white); --_fg: var(--kv2-on-accent); --_bd: var(--kv2-white); --_sh: inset 0 -3px 0 #B9BCC3, 0 6px 4px rgba(0, 0, 0, .22); }
html[data-kms-v2] .kms-v2-btn--white:hover { --_bg: #FFFFFF; }
/* subscription: magenta outline (next to the lime Add to cart on the PDP) */
html[data-kms-v2] .kms-v2-btn--sub { --_bg: transparent; --_fg: var(--kv2-text); --_bd: var(--kv2-magenta); --_sh: none; }
html[data-kms-v2] .kms-v2-btn--sub:hover { --_bg: var(--kv2-magenta-tint); --_bd: var(--kv2-magenta-hi); }
/* quiet: graphite */
html[data-kms-v2] .kms-v2-btn--quiet:hover { --_bg: var(--kv2-surface-4); --_bd: var(--kv2-line-2); }
/* card quick add: graphite at rest, lime on hover / focus (a grid of cards must not turn the page lime) */
html[data-kms-v2] .kms-v2-btn--add { --_bg: var(--kv2-surface-3); --_fg: var(--kv2-text); --_bd: var(--kv2-line-2); --_sh: none; }
html[data-kms-v2] .kms-v2-btn--add:hover, html[data-kms-v2] .kms-v2-btn--add:focus-visible { --_bg: var(--kv2-lime); --_fg: var(--kv2-on-accent); --_bd: var(--kv2-lime); }
html[data-kms-v2] .kms-v2-btn--block { display: flex; width: 100%; }
html[data-kms-v2] .kms-v2-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
html[data-kms-v2] .kms-v2-link { color: var(--kv2-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html[data-kms-v2] .kms-v2-link:hover { color: var(--kv2-blue-hi); text-decoration-thickness: 2px; }

/* chips */
html[data-kms-v2] .kms-v2-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--kv2-r-pill);
  background: var(--kv2-surface-3); border: 1px solid var(--kv2-hair-strong); color: var(--kv2-text-2);
  font: 500 13px/1 var(--kms-font-sans, "Geist", system-ui, sans-serif); text-decoration: none; white-space: nowrap;
}
html[data-kms-v2] a.kms-v2-chip:hover, html[data-kms-v2] button.kms-v2-chip:hover { color: var(--kv2-text); border-color: var(--kv2-line-2); }
html[data-kms-v2] .kms-v2-chip--ai { background: var(--kv2-cyan-tint); border-color: rgba(34, 229, 255, .35); color: #9DF3FF; }
html[data-kms-v2] .kms-v2-chip--info { background: var(--kv2-blue-tint); border-color: rgba(61, 139, 255, .35); color: #A9C9FF; }
html[data-kms-v2] .kms-v2-chip--accent { background: rgba(var(--kms-accent-rgb, 255, 255, 255), .12); border-color: rgba(var(--kms-accent-rgb, 255, 255, 255), .35); color: var(--kms-accent-light, var(--kv2-text-2)); }
html[data-kms-v2] .kms-v2-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kms-accent, var(--kv2-muted)); }
html[data-kms-v2] .kms-v2-chip--ai .kms-v2-chip__dot { background: var(--kv2-cyan); }

/* badges */
html[data-kms-v2] .kms-v2-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font: 700 11px/1 var(--kms-font-mono, "Geist Mono", monospace); letter-spacing: .06em; text-transform: uppercase; background: var(--kv2-surface-3); color: var(--kv2-text-2); }
html[data-kms-v2] .kms-v2-badge--deal { background: var(--kv2-magenta); color: var(--kv2-on-accent); }
html[data-kms-v2] .kms-v2-badge--info { background: var(--kv2-blue-tint); color: #A9C9FF; }
html[data-kms-v2] .kms-v2-tick { color: var(--kv2-lime); font-weight: 700; }

/* product card: cover, accent glow on hover, one primary action */
html[data-kms-v2] .kms-v2-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 12px 16px;
  background: var(--kv2-surface); border: 1px solid var(--kv2-hair); border-radius: var(--kv2-r-xl);
  transition: border-color var(--kv2-t-base) var(--kv2-ease), box-shadow var(--kv2-t-base) var(--kv2-ease), transform var(--kv2-t-base) var(--kv2-ease);
}
html[data-kms-v2] .kms-v2-card:hover {
  border-color: rgba(var(--kms-accent-rgb, 255, 255, 255), .35);
  box-shadow: 0 0 0 1px rgba(var(--kms-accent-rgb, 255, 255, 255), .18), 0 18px 48px -12px rgba(var(--kms-accent-rgb, 0, 0, 0), .45);
  transform: translateY(-2px);
}
html[data-kms-v2] .kms-v2-card__cover { position: relative; aspect-ratio: 1; border-radius: var(--kv2-r-lg); overflow: hidden; background: #0E0D14; }
html[data-kms-v2] .kms-v2-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-kms-v2] .kms-v2-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-kms-v2] .kms-v2-card__name { margin: 0; color: var(--kv2-text); font: 600 17px/1.25 var(--kms-font-sans, "Geist", system-ui, sans-serif); overflow-wrap: anywhere; }
html[data-kms-v2] .kms-v2-card__role { margin: -6px 0 0; color: var(--kv2-muted); font: 400 14px/1.4 var(--kms-font-sans, "Geist", system-ui, sans-serif); }
html[data-kms-v2] .kms-v2-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
html[data-kms-v2] .kms-v2-card__price { color: var(--kv2-text); font: 600 18px/1 var(--kms-font-mono, "Geist Mono", monospace); }
html[data-kms-v2] .kms-v2-card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
html[data-kms-v2] .kms-v2-card__buy .kms-v2-btn { position: relative; z-index: 1; }

/* offer frame: the one magenta frame per viewport (subscription / deal) */
html[data-kms-v2] .kms-v2-offer {
  position: relative; padding: clamp(20px, 3vw, 32px); border-radius: var(--kv2-r-xl); border: 1px solid rgba(255, 46, 136, .55);
  background: radial-gradient(140% 60% at 100% 0%, rgba(255, 46, 136, .30) 0%, rgba(255, 46, 136, .10) 45%, rgba(255, 46, 136, 0) 78%), linear-gradient(180deg, rgba(255, 46, 136, .10) 0%, rgba(255, 46, 136, 0) 70%), #15151A;
  box-shadow: 0 0 24px rgba(255, 46, 136, .22);
  color: var(--kv2-text);
}
html[data-kms-v2] .kms-v2-offer__badge { position: absolute; top: -11px; left: 20px; }
html[data-kms-v2] .kms-v2-offer__price { font: 850 clamp(36px, 5vw, 56px)/1 var(--kms-font-display, "Archivo", sans-serif); font-stretch: 75%; letter-spacing: -.01em; }
html[data-kms-v2] .kms-v2-offer__note { color: var(--kv2-text-2); font-size: 14px; }
html[data-kms-v2] .kms-v2-offer ul { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
html[data-kms-v2] .kms-v2-offer li { display: flex; gap: 10px; color: var(--kv2-text-2); }
html[data-kms-v2] .kms-v2-offer li::before { content: "✓"; color: var(--kv2-lime); font-weight: 700; }

/* inputs */
html[data-kms-v2] .kms-v2-field { display: grid; gap: 6px; }
html[data-kms-v2] .kms-v2-field label { color: var(--kv2-text-2); font-size: 14px; }
html[data-kms-v2] .kms-v2-input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--kv2-r-md); border: 1px solid var(--kv2-hair-strong);
  background: var(--kv2-bg-sunk); color: var(--kv2-text); font: 400 16px/1.2 var(--kms-font-sans, "Geist", system-ui, sans-serif);
}
html[data-kms-v2] .kms-v2-input::placeholder { color: var(--kv2-muted); }
html[data-kms-v2] .kms-v2-input:hover { border-color: var(--kv2-line-2); }
html[data-kms-v2] .kms-v2-input:focus { outline: 0; border-color: var(--kv2-cyan); box-shadow: 0 0 0 3px var(--kv2-cyan-tint); }
html[data-kms-v2] .kms-v2-input[aria-invalid="true"] { border-color: #FF5A5F; }
html[data-kms-v2] .kms-v2-search { display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: var(--kv2-surface); border: 1px solid var(--kv2-hair-strong); }
html[data-kms-v2] .kms-v2-search .kms-v2-input { border: 0; background: transparent; min-height: 52px; font-size: 18px; }
html[data-kms-v2] .kms-v2-search .kms-v2-input:focus { box-shadow: none; }
html[data-kms-v2] .kms-v2-search:focus-within { border-color: var(--kv2-cyan); box-shadow: 0 0 0 3px var(--kv2-cyan-tint); }
html[data-kms-v2] .kms-v2-toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--kv2-surface-3); }
html[data-kms-v2] .kms-v2-toggle button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--kv2-text-2); font: 600 14px/1 var(--kms-font-sans, "Geist", system-ui, sans-serif); cursor: pointer; }
html[data-kms-v2] .kms-v2-toggle button[aria-pressed="true"] { background: var(--kv2-surface-4); color: var(--kv2-text); }
html[data-kms-v2] .kms-v2-check { display: inline-flex; align-items: center; gap: 10px; color: var(--kv2-text-2); }
html[data-kms-v2] .kms-v2-check input { width: 18px; height: 18px; accent-color: var(--kv2-lime); }

@media screen and (max-width: 749px) {
  /* touch targets >= 44px on phones (small buttons too) */
  html[data-kms-v2] .kms-v2-btn--sm { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-kms-v2] .kms-v2-btn, html[data-kms-v2] .kms-v2-card { transition: none; }
  html[data-kms-v2] .kms-v2-btn:hover, html[data-kms-v2] .kms-v2-card:hover { transform: none; }
}

/* ---------- 5. Legacy spots the sweep cannot reach (a lime value held in a local token with another meaning) ---------- */
/* "Works with" row: snippets/kms-compat-row.liquid tints the Gemini chip with --kmscw-t: 198,255,58 (lime); AI chips are cyan */
html[data-kms-v2] .kmscw .kmscw__chip--gemini { --kmscw-t: 34, 229, 255; }

/* Hotfix 12.11: the legacy lab layer (kms-bundle-lab.css) hue-rotates every video in main and the images of the old video
   boxes by 62deg (it turned the old purple / yellow videos lime): on v2 that tints the home video, the how it works
   explainer, the works-with clips and the PDP clip (yellow -> green, purple -> magenta). Under v2 they show their real
   colours. Weight: two :not(#id) + !important beat the lab rule (html:not(#kmslab) body main video). */
html[data-kms-v2]:not(#kmslab):not(#kv2vid) body main video,
html[data-kms-v2]:not(#kmslab):not(#kv2vid) body :is(.kh-hero__media, .kh-how, .kms-gallery-video, [class*=kms-video], .kms-bv, .kms-gv, [class*=kms-pdp-video], [class*=gallery-video], [class*=kms-vid]) :is(video, img) {
  filter: none !important;
}