/* Motion Life upgrade layer (2026-10-12 board votes 1-5, 7, 9, 11-13, 16).
   Sits on top of grok.css + ml-lite.css; ported from brand/sheets/upgrade-board. */

@property --ml-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --ml-display: "Bitcount Prop Single", "Bitcount Single", ui-monospace, monospace;
  --ml-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ml-ease: cubic-bezier(.22, 1, .36, 1);
  --ml-line: rgba(255, 255, 255, .08);
  --ml-line-2: rgba(255, 255, 255, .16);
  --ml-chrome-grad: linear-gradient(165deg, #fff 0%, #e8e8e8 18%, #bdbdbd 38%, #f5f5f5 52%, #8f8f8f 72%, #d6d6d6 88%, #fafafa 100%);
  --ml-chrome-text: linear-gradient(180deg, #fff 0%, #e4e4ea 38%, #8f8f9c 52%, #f0f0f4 64%, #b0b0bc 100%);
  --ml-chrome-edge: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .35);
  --ml-rim-conic: conic-gradient(from var(--ml-a), #2c2c33 0%, #fff 6%, #9a9aa6 12%, #26262c 24%, #3a3a42 40%, #f4f4f8 50%, #7c7c88 58%, #26262c 70%, #2c2c33 100%);
  --ml-rim-still: linear-gradient(165deg, #fff 0%, #8f8f9c 22%, #2a2a30 40%, #d8d8de 56%, #3a3a42 74%, #f2f2f6 100%);
  --ml-tex: linear-gradient(90deg, #f2f2f4 0%, #b9b9bf 9%, #d9d9dd 18%, #a4a4ab 27%, #cfcfd4 36%, #8e8e96 44%, #e9e9ed 52%, #c3c3c9 60%, #fff 70%, #b1b1b8 80%, #dcdce0 90%, #f6f6f8 100%);
}
@keyframes ml-sweep { to { --ml-a: 360deg; } }

.ml-ct {
  background: var(--ml-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 1 · chrome rims (still rim, light runs round on hover / always on the drop) ---------- */
.ml-rim, .ml-edge {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ml-rim { background: var(--ml-rim-still); opacity: .9; transition: opacity .4s var(--ml-ease); }
.ml-rim--run, .ml-rimhost:hover .ml-rim, .ml-rimhost:focus-visible .ml-rim {
  background: var(--ml-rim-conic);
  animation: ml-sweep 5s linear infinite;
  opacity: 1;
}
.ml-rimhost:hover .ml-rim--run { animation-duration: 1.8s; }
/* 9 · edges catch the flashlight */
.ml-edge {
  z-index: 7;
  padding: 1.5px;
  background: radial-gradient(170px circle at var(--mx, -300px) var(--my, -300px), rgba(255, 255, 255, .95), rgba(255, 255, 255, .14) 45%, transparent 70%);
}

/* existing grey borders step aside for the rim */
html.grok-theme .gk-fcard__stage,
html.grok-theme .gk-pcard__link { border-color: transparent; }

/* ---------- 2 · foil tilt ---------- */
.ml-tiltwrap { perspective: 900px; }
.ml-foil {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --o: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ml-ease), box-shadow .4s var(--ml-ease);
  will-change: transform;
}
.ml-foil.is-live { transition: transform .08s linear, box-shadow .4s var(--ml-ease); }
.ml-foil__shine, .ml-foil__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--o);
  transition: opacity .4s;
}
.ml-foil__shine {
  mix-blend-mode: color-dodge;
  filter: brightness(.75) contrast(1.25);
  opacity: calc(var(--o) * .7);
  background-image:
    repeating-linear-gradient(110deg, #0000 0%, #c9ccd6 4%, #4c4f58 7%, #f4f5f8 10%, #3a3c44 14%, #0000 18%),
    repeating-linear-gradient(90deg, #000 0 1px, #2a2a2a 1px 3px);
  background-size: 360% 360%, cover;
  background-blend-mode: overlay;
  background-position: calc(100% - var(--mx)) calc(100% - var(--my)), center;
}
.ml-foil__glare {
  mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .85) 8%, rgba(255, 255, 255, .25) 28%, rgba(0, 0, 0, .5) 90%);
}
/* category cards: tilt replaces the old lift */
html.grok-theme .gk-pcard__link.ml-foil,
html.grok-theme .gk-pcard__link.ml-foil:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
/* the old diagonal hover streak fights the foil */
html.grok-theme .gk-fcard__stage::after { display: none; }

/* ---------- 9 · flashlight grid behind product grids ---------- */
.ml-spotsec { position: relative; isolation: isolate; }
.ml-spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  opacity: 0;
  transition: opacity .5s var(--ml-ease);
  -webkit-mask-image: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 40%), #000, transparent 70%);
  mask-image: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 40%), #000, transparent 70%);
}
.ml-spotsec.is-lit .ml-spot { opacity: 1; }

/* ---------- 4 · metal ring buttons ---------- */
.ml-ring {
  --ang: 200deg;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: conic-gradient(from var(--ang), #4a4a54, #fdfdff 10%, #8a8a96 22%, #24242a 40%, #c9c9d2 58%, #4a4a54 72%, #fff 84%, #4a4a54);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .9);
  transition: transform .15s var(--ml-ease);
}
.ml-ring:active { transform: translateY(1px) scale(.985); }
.ml-mb, a.ml-mb {
  --x: 50%; --y: 30%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 16px 34px;
  font: 700 15px/1 var(--ml-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #0b0b0e;
  background:
    radial-gradient(90px 40px at var(--x) var(--y), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f6f6f9 0%, #c4c4cc 44%, #9a9aa6 52%, #e6e6ec 78%, #bdbdc6 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.ml-mb:hover { color: #0b0b0e; }
.ml-mb:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .5); }
.ml-mb:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.ml-mb--dark, a.ml-mb--dark {
  color: var(--gk-text, #f2f2f5);
  background:
    radial-gradient(90px 40px at var(--x) var(--y), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #1c1c22, #0a0a0c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.ml-mb--dark:hover { color: #fff; }
.ml-mb--round { padding: 0; width: 40px; height: 40px; }
.ml-mb svg { width: 18px; height: 18px; flex: none; }
.ml-ring--sm { padding: 3px; box-shadow: 0 8px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .9); }
.ml-ring--sm .ml-mb { padding: 11px 16px; font-size: 12px; gap: 8px; }
.ml-ring--sm .ml-mb--round { padding: 0; width: 38px; height: 38px; }

/* ---------- 13 · brushed chrome button (poster panels, checkout) ---------- */
.ml-tex, a.ml-tex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 3px solid #000;
  cursor: pointer;
  background: var(--ml-tex);
  color: #0b0b0e;
  font: 700 14px/1 var(--ml-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 26px rgba(0, 0, 0, .55);
  transition: filter .25s, transform .2s var(--ml-ease);
}
.ml-tex:hover { filter: brightness(1.12) contrast(1.05); color: #0b0b0e; }
.ml-tex:active { transform: scale(.97); }

/* category tile names: plain letters (data-gk-unfancy) in the pixel font, like the section titles */
.gk-pcard__name { font-family: var(--ml-display); font-weight: 700; letter-spacing: .06em; }

/* ---------- 3 · liquid-metal logo ---------- */
.ml-lm {
  position: relative;
  display: block;
  width: min(100%, calc(min(26vh, 200px) * 959 / 400));
  aspect-ratio: 959 / 400;
}
.ml-lm > img { width: 100%; height: 100%; max-height: none; object-position: center; }
.ml-lm > img { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(220, 230, 255, .2)); }
/* the real logo stays crisp underneath; the shader only adds moving light on top (screen never darkens letters) */
.ml-lm canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 1.2s var(--ml-ease);
}
.ml-lm.is-live canvas { opacity: .7; }

/* hero CTA sits in its ring */
.gk-hero__actions .ml-ring .ml-mb { padding: 17px 36px; font-size: 16px; }
@media (max-width: 560px) { .gk-hero__actions .ml-ring .ml-mb { padding: 14px 26px; font-size: 14px; } }

/* ---------- 12 · giant marquee + spinning chrome star ---------- */
.ml-mq {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  user-select: none;
}
.ml-mq__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ml-mq 26s linear infinite;
  will-change: transform;
}
.ml-mq--rev .ml-mq__track { animation-direction: reverse; }
.ml-mq__group { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }
.ml-mq__w {
  font: 700 clamp(52px, 9vw, 128px)/1 var(--ml-display);
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--ml-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ml-star { width: clamp(46px, 6vw, 82px); height: auto; aspect-ratio: 1; flex: none; animation: ml-spin 6s linear infinite; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35)); }
@keyframes ml-mq { to { transform: translateX(-50%); } }
@keyframes ml-spin { to { transform: rotate(360deg); } }

/* ---------- 13 · poster panels ---------- */
html.grok-theme .gk-tile { position: relative; border-color: transparent; }
html.grok-theme .gk-tile__ctaBar,
html.grok-theme .gk-tile__ctaBar--chrome,
html.grok-theme .gk-tile__ctaBar--void {
  background: linear-gradient(180deg, #121216, #0a0a0c);
  border-top: 1px solid var(--ml-line-2);
  color: var(--gk-text, #f2f2f5);
}
html.grok-theme .gk-tile__title {
  background: var(--ml-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.grok-theme .gk-tile__media img { transition: transform 1.2s var(--ml-ease); }
html.grok-theme .gk-tile:hover .gk-tile__media img { transform: scale(1.05); }
html.grok-theme .gk-tiles .ml-tex { font-size: clamp(13px, 1.3vw, 16px); padding: 14px 28px; }
@media (max-width: 560px) { html.grok-theme .gk-tiles .ml-tex { padding: 11px 18px; font-size: 12px; } }

/* ---------- 5 · decode titles: consistent pixel display ---------- */
html.grok-theme .gk-catalog__title {
  font-family: var(--ml-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}
[data-ml-scr] { display: inline-block; white-space: nowrap; }
[data-ml-scr].is-scr { overflow: hidden; vertical-align: bottom; }

/* ---------- 1 · chrome rim on nav pill, FAQ, socials ---------- */
html.grok-theme .gk-nav.is-pill .gk-nav__shell { position: relative; }
html.grok-theme .gk-nav.is-pill .gk-nav__shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--ml-rim-still);
  opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
html.grok-theme .gk-faq__item,
html.grok-theme .gk-socials__card { position: relative; border-color: transparent; }
html.grok-theme .gk-faq__item.is-open .ml-rim,
html.grok-theme .gk-faq__item:has([aria-expanded="true"]) .ml-rim {
  background: var(--ml-rim-conic);
  animation: ml-sweep 5s linear infinite;
  opacity: 1;
}
.gk-faq__item .ml-rim, .gk-socials__card .ml-rim { padding: 1px; opacity: .6; }

/* ---------- nav: menu button replaces the small links ---------- */
html.grok-theme .gk-nav__shell { grid-template-columns: minmax(0, 1fr) auto; }
.ml-nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ml-menubtn .ml-mb { padding: 11px 16px 11px 14px; font-size: 12px; }
.ml-menubtn .ml-burger { position: relative; width: 16px; height: 10px; flex: none; }
.ml-menubtn .ml-burger::before, .ml-menubtn .ml-burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ml-ease), top .35s var(--ml-ease);
}
.ml-menubtn .ml-burger::before { top: 0; }
.ml-menubtn .ml-burger::after { top: 8px; }
html.ml-menu-open .ml-menubtn .ml-burger::before { top: 4px; transform: rotate(45deg); }
html.ml-menu-open .ml-menubtn .ml-burger::after { top: 4px; transform: rotate(-45deg); }
.gk-nav__utils .ml-ring--sm .ml-mb--round { position: relative; }
.gk-nav__utils .ml-ring--sm .gk-nav__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font: 800 11px/1 var(--gk-font-body, sans-serif);
  color: #0b0b0e;
  background: var(--ml-chrome-grad);
  box-shadow: var(--ml-chrome-edge), 0 0 0 2px #050505;
}
.ml-bump { animation: ml-bump .5s var(--ml-ease); }
@keyframes ml-bump { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(.94); } }
@media (max-width: 560px) {
  .ml-menubtn .ml-mb .ml-menubtn__label { display: none; }
  .ml-menubtn .ml-mb { padding: 0; width: 44px; height: 44px; }
  /* phone tap targets >= 44px (ux-peak 7) */
  .gk-nav .ml-mb--round { width: 44px; height: 44px; min-width: 44px; }
  .gk-footer .ml-mb { min-height: 44px; }
  .ml-nav-left { gap: 10px; }
}

/* ---------- 11 · full-screen chrome menu ---------- */
.ml-menu {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr);
  align-items: center;
  gap: 24px;
  padding: 110px clamp(20px, 5vw, 72px) 40px;
  overflow-y: auto;
  background: #050505;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ml-ease), visibility 0s linear .6s;
}
html.ml-menu-open .ml-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ml-ease), visibility 0s; }
html.ml-menu-open, html.ml-menu-open body { overflow: hidden; }
.ml-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ml-menu__list a {
  display: inline-block;
  font: 700 clamp(30px, min(5.4vw, 7.4vh), 92px)/1.04 var(--ml-display);
  letter-spacing: .01em;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ml-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: brightness(.72);
  transform: translateY(22px);
  opacity: 0;
  transition: transform .55s var(--ml-ease), opacity .5s, letter-spacing .35s var(--ml-ease), filter .3s;
}
html.ml-menu-open .ml-menu__list a { transform: none; opacity: 1; }
.ml-menu__list a:hover, .ml-menu__list a:focus-visible, .ml-menu__list a.is-on { letter-spacing: .05em; filter: brightness(1.15); }
.ml-menu__list a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ml-menu__small {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity .5s .35s;
}
html.ml-menu-open .ml-menu__small { opacity: 1; }
.ml-menu__small a, .ml-menu__small button {
  font: 600 13px/1 var(--ml-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gk-text-dim, #a8a8b5);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.ml-menu__small a:hover, .ml-menu__small button:hover { color: #fff; }
.ml-menu__pic { position: relative; height: min(64vh, 620px); }
.ml-menu__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.94) rotate(-2deg);
  transition: opacity .4s, transform .6s var(--ml-ease);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7));
}
.ml-menu__pic img.is-on { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .ml-menu { grid-template-columns: 1fr; align-content: start; padding-top: 104px; overflow-y: auto; }
  .ml-menu__pic { display: none; }
  .ml-menu__list a { white-space: normal; }
}

/* ---------- 16 · black side cart ---------- */
.ml-cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above the fixed header (10000) so the whole page blurs */
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ml-ease), visibility 0s linear .45s;
  border: 0;
  padding: 0;
  cursor: default;
}
html.ml-cart-open .ml-cart-scrim { opacity: 1; visibility: visible; transition: opacity .45s var(--ml-ease), visibility 0s; }
html.ml-cart-open, html.ml-cart-open body { overflow: hidden; }
.ml-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: #050505;
  border-left: 1px solid var(--ml-line-2);
  color: var(--gk-text, #f2f2f5);
  font-family: var(--gk-font-body, sans-serif);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .55s var(--ml-ease), visibility 0s linear .55s;
}
html.ml-cart-open .ml-cart { transform: none; visibility: visible; transition: transform .55s var(--ml-ease), visibility 0s; }
.ml-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-cart__title { margin: 0; font: 700 22px/1 var(--ml-display); letter-spacing: .08em; }
.ml-cart__x {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ml-line-2);
  background: none;
  color: var(--gk-text-dim, #a8a8b5);
  cursor: pointer;
}
.ml-cart__x:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ml-cart__x svg { width: 16px; height: 16px; }
.ml-cart__list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; margin: 0 -6px; padding: 4px 6px; overscroll-behavior: contain; }
.ml-cart__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 14px; }
.ml-cart__item.is-new { animation: ml-flash 1.2s var(--ml-ease); }
@keyframes ml-flash { 0% { background: rgba(255, 255, 255, .14); } 100% { background: transparent; } }
.ml-cart__img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; background: #0a0a0c; box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c9c9d2; }
.ml-cart__name { display: block; font: 700 14px/1.25 var(--gk-font-body, sans-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-cart__var { display: block; margin-top: 2px; font: 400 12px/1.3 var(--ml-mono); color: var(--gk-text-dim, #a8a8b5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-cart__qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.ml-cart__qty button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--ml-line-2);
  background: #0e0e12;
  color: #fff;
  font: 600 15px/1 var(--ml-mono);
  cursor: pointer;
}
.ml-cart__qty button:hover { border-color: rgba(255, 255, 255, .4); }
.ml-cart__qty button:disabled { opacity: .35; cursor: default; }
.ml-cart__qty span { min-width: 24px; text-align: center; font: 600 13px/1 var(--ml-mono); }
.ml-cart__right { display: grid; justify-items: end; gap: 10px; align-self: start; padding-top: 2px; }
.ml-cart__price { font: 700 14px/1 var(--gk-font-body, sans-serif); white-space: nowrap; }
.ml-cart__rm { background: none; border: 0; padding: 0; font: 600 11px/1 var(--ml-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gk-text-dim, #a8a8b5); cursor: pointer; }
.ml-cart__rm:hover { color: #ff8b93; }
.ml-cart__empty { display: grid; justify-items: center; gap: 16px; padding: 48px 8px; text-align: center; color: var(--gk-text-dim, #a8a8b5); font-size: 14px; }
.ml-cart__empty b { color: #fff; font: 700 18px/1.2 var(--ml-display); letter-spacing: .06em; }
.ml-cart__loading { padding: 40px 0; text-align: center; font: 600 12px/1 var(--ml-mono); letter-spacing: .14em; color: var(--gk-text-dim, #a8a8b5); }
.ml-cart__foot { display: grid; gap: 14px; }
.ml-cart__promo { display: flex; border: 1px solid var(--ml-line-2); border-radius: 10px; overflow: hidden; background: #0e0e12; }
.ml-cart__promo input {
  flex: 1;
  min-width: 0;
  padding: 13px 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 13px/1 var(--ml-mono);
  letter-spacing: .04em;
  outline: none;
}
.ml-cart__promo input::placeholder { color: #77778a; }
.ml-cart__promo:focus-within { border-color: rgba(255, 255, 255, .45); }
.ml-cart__promo button { width: 46px; border: 0; border-left: 1px solid var(--ml-line-2); background: #17171c; color: #fff; cursor: pointer; display: grid; place-items: center; }
.ml-cart__promo button svg { width: 16px; height: 16px; }
.ml-cart__promo-ok { margin: -6px 0 0; font: 500 12px/1.3 var(--ml-mono); color: #9fe6bd; }
.ml-cart__bar { position: relative; height: 22px; border-radius: 999px; background: #0e0e12; border: 1px solid var(--ml-line); overflow: hidden; }
.ml-cart__bar s { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ml-chrome-grad); transition: width 1s var(--ml-ease) .2s; }
.ml-cart__bar em { position: relative; z-index: 1; display: block; padding-left: 10px; font: 700 11px/20px var(--ml-mono); font-style: normal; color: #fff; mix-blend-mode: difference; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-cart__sub { display: flex; justify-content: space-between; align-items: baseline; font: 600 13px/1 var(--ml-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gk-text-dim, #a8a8b5); }
.ml-cart__sub b { font: 800 22px/1 var(--gk-font-body, sans-serif); color: #fff; letter-spacing: 0; text-transform: none; }
.ml-cart .ml-tex { width: 100%; padding: 18px; font-size: 17px; }
.ml-cart__note { margin: -4px 0 0; text-align: center; font: 400 11.5px/1.4 var(--ml-mono); color: #77778a; }

/* 6 · rolling digits (cart subtotal) */
.ml-roll { display: inline-flex; font-variant-numeric: tabular-nums; height: 1em; line-height: 1; overflow: hidden; }
.ml-roll__col { display: inline-block; height: 1em; overflow: hidden; }
.ml-roll__strip { display: flex; flex-direction: column; transition: transform .7s var(--ml-ease); }
.ml-roll__strip span, .ml-roll__fix { display: block; height: 1em; }

/* ---------- 7 · cart flight ---------- */
.ml-orb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, #d8d8e0 24%, #6a6a78 55%, #1a1a20 80%);
  box-shadow: 0 0 18px rgba(255, 255, 255, .45);
}
.ml-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 1100; display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.ml-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: rgba(16, 16, 20, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ml-line-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  color: #f2f2f5;
  font: 500 13px/1.25 var(--gk-font-body, sans-serif);
  animation: ml-tin .45s var(--ml-ease) both;
}
.ml-toast img { width: 30px; height: 40px; object-fit: cover; border-radius: 6px; }
.ml-toast b { display: block; font-weight: 700; }
.ml-toast.is-out { animation: ml-tout .35s ease-in forwards; }
@keyframes ml-tin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ml-tout { to { opacity: 0; transform: translateX(-30px); } }

/* motion stays on with Windows animations off too (owner 2026-10-12: the marquee looked frozen) */



/* ---------- footer v2 (owner 2026-10-12: old one "looks so trash") ---------- */
footer.gk-footer.ml-ft { background: #050505 !important; border-top: 0 !important; padding: clamp(1.5rem, 4vw, 3rem) var(--hw-site-pad-x, 20px) clamp(1.25rem, 3vw, 2rem) !important; }
.ml-ft__panel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(230, 236, 255, .07), transparent 55%),
    linear-gradient(180deg, #0d0d10, #070709);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ml-ft__rim {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--ml-rim-conic); animation: ml-sweep 9s linear infinite; opacity: .75;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ml-ft__top { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: clamp(24px, 3.5vw, 40px); border-bottom: 1px solid var(--ml-line); }
.ml-ft__logo { display: inline-block; }
.ml-ft__logo img { display: block; width: clamp(150px, 16vw, 220px); height: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(220, 230, 255, .14)); transition: filter .4s var(--ml-ease), transform .5s var(--ml-ease); }
.ml-ft__logo:hover img { transform: translateY(-2px); filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(230, 236, 255, .3)); }
.ml-ft__tag { margin: 14px 0 0; max-width: 34ch; font: 500 14px/1.55 var(--gk-font-body, sans-serif); color: rgba(240, 240, 246, .58); }
.ml-ft__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ml-ft__cta .ml-mb { padding: 15px 30px; font-size: 14px; min-height: 48px; }
.ml-ft__live { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ml-line-2); background: rgba(255, 255, 255, .03);
  font: 600 11px/1 var(--ml-mono); letter-spacing: .14em; text-transform: uppercase; color: #d8d8e0; text-decoration: none; transition: border-color .3s, color .3s, background .3s; }
.ml-ft__live:hover { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.ml-ft__led { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ef08a; box-shadow: 0 0 10px #3ef08a; }
.ml-ft__led::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3ef08a; animation: ml-ft-ping 1.8s var(--ml-ease) infinite; }
@keyframes ml-ft-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ml-ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: clamp(24px, 3.5vw, 40px) 0; }
.ml-ft__h { margin: 0 0 14px; font: 700 13px/1 var(--ml-display); letter-spacing: .16em; text-transform: uppercase; background: var(--ml-chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-ft__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ml-ft__list a { display: inline-flex; align-items: center; gap: 11px; min-height: 40px; color: rgba(240, 240, 246, .72); text-decoration: none;
  font: 500 15px/1.2 var(--gk-font-body, sans-serif); transition: color .25s, transform .35s var(--ml-ease); }
.ml-ft__list a:hover, .ml-ft__list a:focus-visible { color: #fff; transform: translateX(3px); }
.ml-ft__ico { width: 18px; height: 18px; flex: none; color: rgba(240, 240, 246, .5); transition: color .25s; }
.ml-ft__list a:hover .ml-ft__ico { color: #fff; }
.ml-ft__brandlink--discord .ml-ft__ico, .ml-ft__brandlink--discord:hover .ml-ft__ico { color: #5865f2; }
.ml-ft__brandlink--yt .ml-ft__ico, .ml-ft__brandlink--yt:hover .ml-ft__ico { color: #ff0033; }
.ml-ft__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--ml-line);
  font: 500 12px/1.4 var(--ml-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(240, 240, 246, .42); }
.ml-ft__bottom p { margin: 0; }
.ml-ft__rating span { color: #f2f2f6; }
@media (max-width: 760px) {
  .ml-ft__top { flex-direction: column; text-align: center; }
  .ml-ft__brand { display: flex; flex-direction: column; align-items: center; }
  .ml-ft__tag { margin-inline: auto; }
  .ml-ft__cta { align-items: center; }
  .ml-ft__cols { grid-template-columns: 1fr 1fr; text-align: left; }
  .ml-ft__list a { min-height: 44px; }
  .ml-ft__bottom { flex-direction: column; text-align: center; }
}

/* ---------- grid room behind sections (owner 2026-10-12: "the lines behind King Carson… throughout the page") ---------- */
:root { --ml-cell: 64px; }
@media (max-width: 767.98px) { :root { --ml-cell: 44px; } }
.ml-spot { background-size: var(--ml-cell) var(--ml-cell); }
.ml-roomhost { position: relative; isolation: isolate; overflow: hidden; }
.ml-room {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  /* soft top/bottom so stacked sections never show a seam */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 50px), transparent 100%);
}
.ml-room > * { position: absolute; display: block; }
.ml-room__wall {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: var(--ml-cell) var(--ml-cell);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 30%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 30%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
}
/* floor: grid plane tipped back toward a horizon, slowly rolling toward the viewer */
.ml-room__floor {
  left: -70%;
  right: -70%;
  bottom: 0;
  height: 130%;
  overflow: hidden;
  transform: perspective(900px) rotateX(61deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 52%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 52%);
}
.ml-room__floor i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ml-cell) * -1);
  bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .34) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, .34) 1.5px, transparent 1.5px);
  background-size: var(--ml-cell) var(--ml-cell);
  background-position: center bottom;
  animation: ml-floor 7s linear infinite;
  will-change: transform;
}
@keyframes ml-floor { to { transform: translateY(var(--ml-cell)); } }
.ml-room__glow {
  inset: 0;
  background:
    radial-gradient(ellipse 36% 30% at 50% 16%, rgba(255, 255, 255, .11), transparent 72%),
    radial-gradient(ellipse 55% 26% at 50% 88%, rgba(255, 255, 255, .06), transparent 75%);
  animation: ml-breathe 7s ease-in-out infinite;
}
@keyframes ml-breathe { 50% { opacity: .6; } }
/* lens-flare star, same as the one over King Carson */
.ml-room__star {
  top: 16%;
  left: 84%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, .75) 3px, rgba(255, 255, 255, .16) 11px, transparent 30px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 50%, transparent) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 255, 255, .65) 50%, transparent) center / 1.5px 70% no-repeat;
  animation: ml-twinkle 5s ease-in-out infinite;
}
.ml-room__star--b { top: 58%; left: 9%; width: 100px; height: 100px; margin: -50px 0 0 -50px; animation-delay: -2.4s; animation-duration: 6.5s; }
@keyframes ml-twinkle {
  0%, 100% { opacity: .45; transform: scale(.75) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(10deg); }
}
/* per-section mix so it never reads copy-pasted */
.ml-roomhost--featured .ml-room__floor,
.ml-roomhost--catalog .ml-room__floor { display: none; }
.ml-roomhost--featured .ml-room__wall { -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 40%, transparent 70%); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 40%, transparent 70%); }
.ml-roomhost--featured .ml-room__star--b, .ml-roomhost--catalog .ml-room__star--b { display: none; }
.ml-roomhost--catalog .ml-room__wall { -webkit-mask-image: radial-gradient(ellipse 60% 22% at 50% 0%, #000, transparent 90%); mask-image: radial-gradient(ellipse 60% 22% at 50% 0%, #000, transparent 90%); }
.ml-roomhost--catalog .ml-room__star { top: 5%; left: 14%; }
.ml-roomhost--trust .ml-room__floor { height: 100%; }
.ml-roomhost--trust .ml-room__star { top: 30%; left: 90%; }
.ml-roomhost--trust .ml-room__star--b { top: 36%; left: 6%; }
.ml-roomhost--faq .ml-room__star { top: 13%; left: 80%; }
.ml-roomhost--faq .ml-room__star--b { top: 24%; left: 18%; }
.ml-roomhost--socials .ml-room__wall { display: none; }
.ml-roomhost--socials .ml-room__floor { height: 260%; }
.ml-roomhost--socials .ml-room__star { top: 22%; left: 86%; }
.ml-roomhost--socials .ml-room__star--b { top: 30%; left: 12%; }
@media (max-width: 767.98px) {
  .ml-room__star { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
  .ml-room__star--b { display: none; }
  .ml-room__floor { transform: perspective(600px) rotateX(61deg); }
}

/* community cards: brand icon */
.gk-socials__name { display: inline-flex !important; align-items: center; gap: .65rem; }
.gk-socials__ico { width: 22px; height: 22px; flex: none; }
.gk-socials__card--discord .gk-socials__ico { color: #5865f2; }
.gk-socials__card--yt .gk-socials__ico { color: #ff0033; }

/* ---------- hero scroll cue: centered at the bottom, says it (owner 2026-10-12) ---------- */
.gk-hero .ml-scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(18px, 3.2vh, 34px);
  z-index: 5;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s var(--ml-ease) .7s, transform .9s var(--ml-ease) .7s;
}
.gk-hero.is-ready .ml-scroll { opacity: 1; transform: none; }
.gk-hero .ml-scroll.is-gone { opacity: 0; transform: translateY(10px); transition-delay: 0s; pointer-events: none; }
.ml-scroll__mouse {
  position: relative;
  width: 30px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 22px rgba(255, 255, 255, .12);
  transition: box-shadow .3s;
}
.ml-scroll__mouse .ml-rim { animation-duration: 3s; }
.ml-scroll__wheel {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 10px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9);
  animation: ml-wheel 1.8s var(--ml-ease) infinite;
}
@keyframes ml-wheel {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(17px); opacity: 0; }
  100% { transform: translateY(17px); opacity: 0; }
}
.ml-scroll__chev { display: none; width: 26px; height: 26px; animation: ml-chev 1.6s var(--ml-ease) infinite; }
.ml-scroll__chev svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
@keyframes ml-chev { 0%, 100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }
.ml-scroll__txt {
  font-family: var(--ml-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .38em;
  margin-right: -.38em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(100deg, #c4c4cc 0%, #c4c4cc 38%, #fff 50%, #c4c4cc 62%, #c4c4cc 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ml-shine 3.2s linear infinite;
}
@keyframes ml-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.ml-scroll:hover .ml-scroll__mouse { box-shadow: 0 0 30px rgba(255, 255, 255, .3); }
.ml-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 8px; }
/* touch screens: chevron instead of a mouse */
@media (hover: none) {
  .ml-scroll__mouse { display: none; }
  .ml-scroll__chev { display: block; }
}
/* phones: hero copy sits low, so make room under Shop now for the cue */
@media (max-width: 767.98px) {
  html.grok-theme .gk-hero__inner { padding-bottom: 108px; }
  .gk-hero .ml-scroll { bottom: 16px; gap: 8px; }
}

/* ---------- 10 · black + chrome product page (same layout, board vote 10 + 1, 2, 4, 6, 8) ---------- */
html.grok-theme body:has(.gk-product) { background: #000 !important; color: #f2f2f5; }
/* the fixed square layer behind the page: King Carson's grid room instead of the purple wash */
html.grok-theme body:has(.gk-product) .gk-product-grid {
  background-color: #000 !important;
  background-image:
    radial-gradient(ellipse 50% 38% at 50% -6%, rgba(255, 255, 255, .13), transparent 70%),
    radial-gradient(ellipse 34% 30% at 6% 92%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(ellipse 34% 30% at 96% 70%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .85) 100%),
    linear-gradient(to right, rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .075) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, var(--ml-cell) var(--ml-cell), var(--ml-cell) var(--ml-cell) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  background-position: 0 0, 0 0, 0 0, 0 0, center top, center top !important;
}
/* two lens-flare stars pinned to the room */
html.grok-theme body:has(.gk-product) .gk-product-grid::before,
html.grok-theme body:has(.gk-product) .gk-product-grid::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, .75) 3px, rgba(255, 255, 255, .16) 11px, transparent 30px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 50%, transparent) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 255, 255, .65) 50%, transparent) center / 1.5px 70% no-repeat;
  animation: ml-twinkle 5s ease-in-out infinite;
}
html.grok-theme body:has(.gk-product) .gk-product-grid::before { top: 22%; left: 4%; }
html.grok-theme body:has(.gk-product) .gk-product-grid::after { top: 84%; left: 97%; width: 110px; height: 110px; margin: -55px 0 0 -55px; animation-delay: -2.6s; animation-duration: 6.5s; }

html.grok-theme body:has(.gk-product) .gk-product { color: #f2f2f5 !important; }
html.grok-theme body:has(.gk-product) .gk-product__crumb,
html.grok-theme body:has(.gk-product) .gk-product__crumb a { color: #8a8a96 !important; }
html.grok-theme body:has(.gk-product) .gk-product__crumb a:hover,
html.grok-theme body:has(.gk-product) .gk-product__crumb span:last-child { color: #e8e8ee !important; }

/* product art: chrome rim + foil tilt */
html.grok-theme body:has(.gk-product) .gk-product__shot.ml-foil { position: relative; overflow: hidden; border-color: transparent !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .6) !important; }
html.grok-theme body:has(.gk-product) .gk-product__shot.ml-foil .ml-rim { z-index: 6; }

/* buy box: black glass + chrome rim with the light running round */
html.grok-theme body:has(.gk-product) .gk-product__panel {
  --gk-void-4: #17171c;
  --gk-line: rgba(255, 255, 255, .09);
  --gk-line-strong: rgba(255, 255, 255, .16);
  --gk-text: #f2f2f5;
  --gk-text-2: #c8c8d0;
  --gk-text-3: #8a8a96;
  --gk-chrome: #e8e8ee;
  --gk-ok: #3ddc84; --gk-ok-dim: rgba(61, 220, 132, .12);
  --gk-warn: #f5b942; --gk-warn-dim: rgba(245, 185, 66, .12);
  --gk-bad: #ff5c67; --gk-bad-dim: rgba(255, 92, 103, .12);
  background: linear-gradient(180deg, rgba(20, 20, 25, .96), rgba(8, 8, 10, .98)) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  color: #f2f2f5 !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel > .ml-rim { z-index: 1; padding: 1.5px; }
html.grok-theme body:has(.gk-product) .gk-product__panel > :not(.ml-rim) { position: relative; z-index: 2; }
html.grok-theme body:has(.gk-product) .gk-product__head { border-bottom-color: rgba(255, 255, 255, .09) !important; }
html.grok-theme body:has(.gk-product) .gk-product__title {
  font-family: var(--ml-display) !important;
  background: var(--ml-chrome-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .12));
}
/* 6 · rolling price, chrome digits */
html.grok-theme body:has(.gk-product) .gk-product__price-row.has-roll .gk-product__price {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
html.grok-theme body:has(.gk-product) .gk-product__price-row { justify-content: center !important; }
html.grok-theme body:has(.gk-product) .gk-product__price-row:not(.has-roll) .gk-product__price { color: #f2f2f5 !important; }
.gk-product__roll {
  justify-content: center;
  margin: 0 auto;
  font: 700 clamp(2.35rem, 4.2vw, 3.1rem)/1 "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -.03em;
  height: 1em;
  padding: .06em 0;
  box-sizing: content-box;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, .12));
}
.gk-product__roll .ml-roll__strip span, .gk-product__roll .ml-roll__fix {
  background: var(--ml-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gk-product__roll .ml-roll__strip { transition-duration: .8s; }
.gk-product__roll .ml-roll__col:nth-child(2) .ml-roll__strip { transition-delay: .04s; }
.gk-product__roll .ml-roll__col:nth-child(3) .ml-roll__strip { transition-delay: .08s; }
.gk-product__roll .ml-roll__col:nth-child(5) .ml-roll__strip { transition-delay: .12s; }
.gk-product__roll .ml-roll__col:nth-child(6) .ml-roll__strip { transition-delay: .16s; }
html.grok-theme body:has(.gk-product) .gk-product__price-was { color: #6b6b78 !important; }

/* labels, hints */
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-label,
html.grok-theme body:has(.gk-product) .gk-product__panel .form-label { color: #8a8a96 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-hint { color: #8a8a96 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-hint b { color: #fff !important; }

/* plans: dark rows, the picked one gets the chrome edge (board 10) */
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan {
  background: linear-gradient(180deg, #121216, #0c0c0f) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  color: #f2f2f5 !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s, box-shadow .25s !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan:hover:not(:disabled) { background: #16161b !important; border-color: rgba(255, 255, 255, .26) !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan[aria-checked="true"] {
  background: linear-gradient(180deg, #1d1d24, #111115) !important;
  border-color: #c9c9d2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(255, 255, 255, .22), 0 0 28px rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .5) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__name,
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__price { color: #f2f2f5 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__note,
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__desc { color: #8a8a96 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan.is-life[aria-checked="true"] .gk-plan__note { color: #3ddc84 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__price s { color: rgba(255, 255, 255, .45) !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan__radio { border-color: #6b6b78 !important; background: transparent !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan[aria-checked="true"] .gk-plan__radio {
  border-color: #fff !important;
  background: radial-gradient(circle, #fff 0 32%, transparent 38%) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .55) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan__best {
  background: var(--ml-chrome-grad) !important;
  color: #0b0b0e !important;
  box-shadow: var(--ml-chrome-edge) !important;
}

/* quantity stepper */
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-stepper {
  background: #0c0c0f !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #f2f2f5 !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-stepper button,
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-stepper input { color: #f2f2f5 !important; background: transparent !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, .08) !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-btn--ghost.gk-btn--sm {
  background: #0c0c0f !important;
  color: #e8e8ee !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-btn--ghost.gk-btn--sm.is-on { background: #f2f2f5 !important; color: #0b0b0e !important; border-color: #fff !important; }

/* 4 · metal ring buttons, full width */
.ml-ring--block { display: flex; width: 100%; }
.ml-ring--block .ml-mb { flex: 1; width: 100%; min-height: 56px; }
.ml-ring--block .gk-buy__main { font-size: 18px; min-height: 62px; }
.ml-ring--dark { background: conic-gradient(from var(--ang), #2a2a31, #c9c9d2 10%, #55555f 22%, #18181c 40%, #8f8f9a 58%, #2a2a31 72%, #e6e6ec 84%, #2a2a31); }
.gk-buy__ctas { display: grid; gap: 12px; }
.gk-buy__ctas .ml-mb:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); }
.gk-buy__main.is-upgrade { letter-spacing: .1em; }

/* rating card + trust row */
html.grok-theme body:has(.gk-product) .gk-product__rating {
  background: linear-gradient(180deg, #16161b, #0b0b0e) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__pay-logo {
  background: #f2f2f5 !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .25) !important;
}
/* 8 · LED pills: black chrome, colour only on the light */
html.grok-theme body:has(.gk-product) .gk-product__pay-badge,
html.grok-theme body:has(.gk-product) .gk-product__status {
  --c: #3ddc84;
  background: linear-gradient(180deg, #17171c, #0a0a0c) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .3)) border-box !important;
  border: 1px solid transparent !important;
  color: #e8e8ee !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__pay-badge svg { color: var(--c) !important; filter: drop-shadow(0 0 6px var(--c)); }
html.grok-theme body:has(.gk-product) .gk-product__pay-badge--instant { --c: #fff; }
html.grok-theme body:has(.gk-product) .gk-product__status-dot {
  position: relative;
  background: var(--c) !important;
  box-shadow: 0 0 10px var(--c), 0 0 2px #fff inset !important;
}
html.grok-theme body:has(.gk-product) .gk-product__status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: ml-ft-ping 1.8s var(--ml-ease) infinite;
}
html.grok-theme body:has(.gk-product) .gk-product__caveat {
  background: linear-gradient(180deg, #1a0d0f, #0d0708) !important;
  border-color: rgba(255, 92, 103, .4) !important;
  color: #ff8a92 !important;
  box-shadow: none !important;
}
html.grok-theme body:has(.gk-product) .gk-product__refer {
  border-color: rgba(255, 255, 255, .16) !important;
  color: #8a8a96 !important;
  background: rgba(255, 255, 255, .02) !important;
}
html.grok-theme body:has(.gk-product) .gk-product__refer b,
html.grok-theme body:has(.gk-product) .gk-product__refer strong { color: #f2f2f5 !important; }
html.grok-theme body:has(.gk-product) .gk-product__oos-msg,
html.grok-theme body:has(.gk-product) .gk-product__oos-msg p { color: #c8c8d0 !important; }
html.grok-theme body:has(.gk-product) .gk-addon { background: #0c0c0f !important; border-color: rgba(255, 255, 255, .12) !important; color: #f2f2f5 !important; }
html.grok-theme body:has(.gk-product) .gk-addon__desc { color: #8a8a96 !important; }

/* highlights / what's included / how-to (playbook) */
html.grok-theme body:has(.gk-product) .gk-playbook {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f2f2f5 !important;
}
html.grok-theme body:has(.gk-product) .gk-playbook__card,
html.grok-theme body:has(.gk-product) .gk-playbook__grid > .gk-playbook__card:first-child,
html.grok-theme body:has(.gk-product) .gk-playbook__card--limits {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 20, 25, .94), rgba(8, 8, 10, .96)) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px rgba(0, 0, 0, .5) !important;
  color: #f2f2f5 !important;
}
html.grok-theme body:has(.gk-product) .gk-playbook__card::before { border-color: rgba(255, 255, 255, .04) !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__card--limits { border-color: rgba(255, 92, 103, .35) !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__h,
html.grok-theme body:has(.gk-product) .gk-playbook__h3,
html.grok-theme body:has(.gk-product) .gk-playbook__icon { color: #f2f2f5 !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__h3 { font-family: var(--ml-display) !important; letter-spacing: .14em !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__eyebrow { color: #8a8a96 !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__p,
html.grok-theme body:has(.gk-product) .gk-playbook__list,
html.grok-theme body:has(.gk-product) .gk-playbook__list li { color: #c8c8d0 !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__list li::before { background: #e8e8ee !important; box-shadow: 0 0 8px rgba(255, 255, 255, .6); }
html.grok-theme body:has(.gk-product) .gk-playbook__list--ol li::before { background: transparent !important; color: #f2f2f5 !important; box-shadow: none; }
html.grok-theme body:has(.gk-product) .gk-playbook__list--warn li::before { background: #ff5c67 !important; box-shadow: 0 0 8px rgba(255, 92, 103, .7); }
html.grok-theme body:has(.gk-product) .gk-playbook__icon--sm {
  background: linear-gradient(180deg, #1d1d24, #0c0c0f) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 16px rgba(255, 255, 255, .08) !important;
}
html.grok-theme body:has(.gk-product) .gk-playbook__notice {
  background: linear-gradient(180deg, #1a0d0f, #0d0708) !important;
  border-color: rgba(255, 92, 103, .4) !important;
}
html.grok-theme body:has(.gk-product) .gk-playbook__notice p { color: #ffb3b8 !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__notice-mark { background: #ff5c67 !important; color: #0b0b0e !important; }
html.grok-theme body:has(.gk-product) .gk-playbook__video { border-color: rgba(255, 255, 255, .14) !important; }

/* commonly bought with */
html.grok-theme body:has(.gk-product) .gk-bought {
  background: linear-gradient(180deg, #121216, #09090b) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #f2f2f5 !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5) !important;
}
html.grok-theme body:has(.gk-product) .gk-bought:hover { border-color: rgba(255, 255, 255, .4) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 24px 50px rgba(0, 0, 0, .6) !important; }
html.grok-theme body:has(.gk-product) .gk-bought__name { color: #f2f2f5 !important; font-family: var(--ml-display) !important; letter-spacing: .06em; }
html.grok-theme body:has(.gk-product) .gk-bought__price,
html.grok-theme body:has(.gk-product) .gk-bought--help .gk-bought__price {
  background: var(--ml-chrome-grad) !important;
  color: #0b0b0e !important;
  box-shadow: var(--ml-chrome-edge) !important;
}
html.grok-theme body:has(.gk-product) [class*="gk-bought__h"],
html.grok-theme body:has(.gk-product) [class*="gk-upsell"] h2,
html.grok-theme body:has(.gk-product) [class*="gk-bought"] h2 {
  background: var(--ml-chrome-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.grok-theme body:has(.gk-product) [class*="gk-bought"] p { color: #8a8a96 !important; }
@media (max-width: 767.98px) {
  html.grok-theme body:has(.gk-product) .gk-product-grid::before,
  html.grok-theme body:has(.gk-product) .gk-product-grid::after { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
}
/* Buy now: the old black submit-button rules lose to the chrome button */
html.grok-theme body:has(.gk-product) .gk-product__form button.gk-buy__main[type="submit"],
html.grok-theme body:has(.gk-product) .gk-product__form button.gk-buy__main[type="submit"]:hover {
  width: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 34px !important;
  color: #0b0b0e !important;
  font: 700 18px/1 var(--ml-display) !important;
  letter-spacing: .16em !important;
  background:
    radial-gradient(120px 50px at var(--x) var(--y), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f6f6f9 0%, #c4c4cc 44%, #9a9aa6 52%, #e6e6ec 78%, #bdbdc6 100%) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .4) !important;
  transition: filter .2s !important;
  filter: none !important;
}
html.grok-theme body:has(.gk-product) .gk-product__form button.gk-buy__main[type="submit"]:hover { filter: brightness(1.06) !important; }
html.grok-theme body:has(.gk-product) .gk-product__form button.gk-buy__main[type="submit"]:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .5) !important; }
html.grok-theme body:has(.gk-product) .gk-product__form button.gk-buy__main[type="submit"]:disabled { filter: grayscale(1) brightness(.7) !important; }
html.grok-theme body:has(.gk-product) .gk-product__price-row { border-bottom-color: rgba(255, 255, 255, .09) !important; }
html.grok-theme body:has(.gk-product) .gk-product__upsells-title {
  background: var(--ml-chrome-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.grok-theme body:has(.gk-product) .gk-product__upsells p { color: #8a8a96 !important; }
/* rolling numbers: a font with even-width digits so "$12.99" never shows a gap after the 1 */
.ml-roll { font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif; font-feature-settings: "tnum" 1; font-weight: 700; }
.ml-roll__strip span { text-align: center; }

/* ---------- one grid down the page (owner 2026-10-12 evening: "connected", "look the same", no flashing) ---------- */
.ml-room { -webkit-mask-image: none; mask-image: none; }
.ml-room__wall,
.ml-roomhost--featured .ml-room__wall,
.ml-roomhost--catalog .ml-room__wall {
  display: block;
  background-position: center var(--ml-oy, 0px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, var(--ml-fade-top, #000) 0, #000 90px, #000 calc(100% - 90px), var(--ml-fade-bot, #000) 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, var(--ml-fade-top, #000) 0, #000 90px, #000 calc(100% - 90px), var(--ml-fade-bot, #000) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* edges that touch a solid section fade out; edges between grid sections run straight through */
.ml-roomhost--featured { --ml-fade-top: transparent; --ml-fade-bot: transparent; }
.ml-roomhost--catalog { --ml-fade-top: transparent; }
.ml-roomhost--socials { --ml-fade-bot: transparent; }
.ml-roomhost--trust .ml-room__floor,
.ml-roomhost--faq .ml-room__floor { display: none; }
.ml-roomhost--socials .ml-room__floor { height: 120%; }
/* nothing pulses or rolls behind the text any more */
.ml-room__floor i { animation: none; }
.ml-room__glow {
  animation: none;
  background: radial-gradient(ellipse 45% 40% at 50% 45%, rgba(255, 255, 255, .055), transparent 75%);
}
.ml-room__star { animation: ml-glint 9s ease-in-out infinite; }
.ml-room__star--b { animation-duration: 11s; }
@keyframes ml-glint { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }
/* less dead black between the drop cards and the video */
.gk-featured.ml-roomhost { padding-bottom: 40px !important; }
.gk-banner { padding-top: 24px !important; }

/* ---------- product page fixes (owner 2026-10-12 evening) ---------- */
/* NEW APP tag: a centred LED pill, not a full-width box */
html.grok-theme body:has(.gk-product) .gk-product .gk-product__status {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 auto 16px !important;
  padding: 7px 16px 7px 13px !important;
  border-radius: 999px !important;
  font: 700 12px/1.2 "Inter", "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
html.grok-theme body:has(.gk-product) .gk-product__status-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; flex: none; }
/* Highlights / What's included: one border, not two */
html.grok-theme body:has(.gk-product) .gk-playbook__card::before { display: none !important; }
/* plans: everything centred, radio pinned left */
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 8px !important;
  row-gap: 5px !important;
  min-height: 70px;
  padding: 14px 52px !important;
  text-align: center !important;
}
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan::before,
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan::after { content: ""; flex-basis: 100%; height: 0; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan::before { order: 25; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan::after { order: 45; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan > * { align-self: center !important; justify-self: auto !important; margin: 0 !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__radio { position: absolute !important; left: 20px; top: 50%; margin-top: -9px !important; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__name { order: 10; font-size: 1rem; letter-spacing: .08em; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__best,
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__up { order: 20; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__tag { order: 30; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__price { order: 40; justify-content: center; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__price b { font-size: 1.2rem; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__note { order: 50; }
html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__desc { order: 60; flex-basis: 100%; }
@media (max-width: 480px) {
  html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan { padding: 12px 42px !important; }
  html.grok-theme body:has(.gk-product) .gk-product__panel .gk-plan .gk-plan__radio { left: 15px; }
}
.ml-roomhost--socials .ml-room__wall { display: block; }