/*
 * Spectre — design layer for the SellAuth "pro" theme.
 * This file is not overwritten by theme updates. pro.css stays untouched underneath it.
 *
 * Builder-editable colours arrive as --cl-* variables (set in layouts/master.njk).
 * Everything here derives from them, so changing the theme colour in the visual
 * editor re-tints buttons, links and the animated background together.
 *
 *  1. Tokens            6. Sections & titles     11. Footer
 *  2. Base              7. Features strip        12. Buttons & forms
 *  3. Background        8. Products & cards      13. Overlays & data
 *  4. Navbar            9. Reviews               14. Inner pages
 *  5. Hero             10. FAQ                   15. Motion & accessibility
 */

/* 1. Tokens ------------------------------------------------------------ */

:root {
  --sp-ink: #eaf1ff;
  --sp-ink-2: #a9b8d6;
  --sp-ink-3: #6f80a3;

  --sp-accent: var(--cl-accent);
  --sp-accent-rgb: var(--cl-accent-rgb);
  /* The raw accent is tuned for white text on top of it. On the dark page it
     needs lifting to stay readable as text, hence the separate "ink" variant. */
  --sp-accent-ink: color-mix(in srgb, var(--cl-accent) 52%, #ffffff);
  --sp-accent-hover: color-mix(in srgb, var(--cl-accent) 86%, #ffffff);
  --sp-accent-press: color-mix(in srgb, var(--cl-accent) 86%, #000000);

  --sp-bg: var(--cl-background-primary);
  --sp-bg-rgb: var(--cl-background-primary-rgb);
  --sp-surface: var(--cl-background-secondary);
  --sp-surface-rgb: var(--cl-background-secondary-rgb);
  --sp-surface-2: color-mix(in srgb, var(--cl-background-secondary) 90%, #ffffff);
  --sp-line: var(--cl-border);
  --sp-line-strong: color-mix(in srgb, var(--sp-ink-2) 26%, transparent);

  --sp-ok: #3ddc97;
  --sp-bad: #ff6b81;
  --sp-star: #ffc94d;

  /* Atmosphere only — a spectrum dispersed from the accent, for the backdrop.
     Every hue is mixed against --cl-accent so retinting the theme in the editor
     moves the whole spectrum with it. The action colour stays untouched. */
  --sp-spec-1: color-mix(in oklab, var(--cl-accent) 62%, #ffffff);
  --sp-spec-2: color-mix(in oklab, var(--cl-accent) 78%, #6f5cff);
  --sp-spec-3: color-mix(in oklab, var(--cl-accent) 34%, #46d6ff);
  --sp-spec-4: color-mix(in oklab, var(--cl-accent) 44%, #a86bff);
  --sp-spec-5: color-mix(in oklab, var(--cl-accent) 34%, #c76bff);

  /* Tight, tool-like corners. Soft 16px-everywhere is the look this shop is not. */
  --sp-radius-s: 5px;
  --sp-radius: 8px;
  --sp-radius-l: 12px;
  --sp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sp-section-y: clamp(3.5rem, 7vw, 5.5rem);
}

[data-bs-theme="dark"] {
  --bs-body-color: var(--sp-ink);
  --bs-body-color-rgb: 234, 241, 255;
  --bs-secondary-color: var(--sp-ink-2);
  --bs-tertiary-color: var(--sp-ink-3);
  --bs-heading-color: #f6f9ff;
  --bs-emphasis-color: #ffffff;
  --bs-link-color: var(--sp-accent-ink);
  --bs-link-color-rgb: 139, 178, 255;
  --bs-link-hover-color: #c3d8ff;
  --bs-link-hover-color-rgb: 195, 216, 255;
  --bs-secondary-bg: var(--sp-surface);
  --bs-tertiary-bg: var(--sp-surface-2);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.3125rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 0.875rem;
}

/* 2. Base -------------------------------------------------------------- */

/* 16px side gutters instead of Bootstrap's 12px, so nothing crowds a phone edge. */
.container,
.container-fluid {
  --bs-gutter-x: 2rem;
}

body {
  color: var(--sp-ink);
  background-color: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--sp-accent-rgb), 0.45);
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
}

/* Headline face: Archivo's expanded width. */
.hero .content h1,
.section-title h1,
.section-title h2,
.navbar .navbar-brand span,
.footer .logo p {
  font-stretch: var(--sp-display-stretch, 100%);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.text-primary {
  color: var(--sp-accent-ink) !important;
}

.link-underline-primary {
  text-decoration-color: rgba(var(--bs-link-color-rgb), 0.5) !important;
}

/* 3. Background -------------------------------------------------------- */
/* Slow washes of the brand blues drifting across the top of the page. They move
   on transform only, each on its own layer. */

.sp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sp-bg__aurora i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.sp-bg__aurora .a1 {
  top: -36vmax;
  left: -20vmax;
  width: 72vmax;
  height: 72vmax;
  background: radial-gradient(circle closest-side, color-mix(in oklab, var(--cl-accent) 44%, transparent), transparent 72%);
  animation: sp-aurora-1 26s ease-in-out infinite alternate;
}

.sp-bg__aurora .a2 {
  top: -34vmax;
  right: -26vmax;
  width: 66vmax;
  height: 66vmax;
  background: radial-gradient(circle closest-side, color-mix(in oklab, var(--sp-spec-4) 32%, transparent), transparent 72%);
  animation: sp-aurora-2 30s ease-in-out infinite alternate;
}

.sp-bg__aurora .a3 {
  top: 36vh;
  left: 32vw;
  width: 48vmax;
  height: 48vmax;
  background: radial-gradient(circle closest-side, color-mix(in oklab, var(--sp-spec-3) 15%, transparent), transparent 72%);
  animation: sp-aurora-3 34s ease-in-out infinite alternate;
}

@keyframes sp-aurora-1 { to { transform: translate3d(16vw, 12vh, 0) scale(1.1); } }
@keyframes sp-aurora-2 { to { transform: translate3d(-18vw, 16vh, 0) scale(0.9); } }
@keyframes sp-aurora-3 { to { transform: translate3d(-14vw, -10vh, 0) scale(1.15); } }

/* Grain over the whole backdrop, so large dark areas read as a surface with
   texture rather than a flat fill. */
.sp-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* 4. Navbar ------------------------------------------------------------ */

/* See-through over the hero, but not bare: a soft scrim darkens whatever runs
   underneath so the background beams never cut through the navigation. */
.navbar {
  position: relative;
  padding-block: 0.85rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar::before {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(var(--sp-bg-rgb), 0.92) 0%,
    rgba(var(--sp-bg-rgb), 0.72) 55%,
    rgba(var(--sp-bg-rgb), 0) 100%
  );
  transition: opacity 0.3s ease;
}

/* Once you scroll, it becomes a real bar. */
.is-scrolled .navbar {
  background: rgba(var(--sp-bg-rgb), 0.82);
  border-bottom-color: var(--sp-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}

.is-scrolled .navbar::before {
  opacity: 0;
}

.navbar .navbar-brand {
  gap: 0.7rem;
  padding: 0 1.75rem 0 0;
  color: #f6f9ff;
}

.navbar .navbar-brand span {
  font-size: 1.3rem;
  line-height: 1;
}

/* The mark beside the wordmark, lit the way it is in the intro. */
.navbar .navbar-brand .brand-mark,
.footer .logo .brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  max-height: none;
  border-radius: 0;
  filter: drop-shadow(0 0 8px rgba(47, 123, 255, 0.55));
}

.navbar .navbar-brand {
  gap: 0.55rem;
}

.navbar .navbar-brand img {
  max-height: 2.25rem;
  border-radius: 6px;
}

.navbar .navbar-collapse .navbar-nav {
  align-items: center;
  gap: 0.25rem;
}

.navbar .navbar-collapse .navbar-actions {
  gap: 0.5rem;
}

.navbar .nav-item a.nav-link {
  padding: 0.45rem 0.8rem;
  border-radius: var(--sp-radius-s);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sp-ink-2);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar .nav-item a.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.navbar .nav-item a.nav-link.active {
  color: #ffffff;
  background: rgba(var(--sp-accent-rgb), 0.16);
}

.navbar .user .btn {
  --bs-btn-padding-x: 0.9rem;
}

.navbar .cart .btn:not(.btn-outline-primary) .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.navbar .cart .btn .count {
  top: -0.35rem;
  right: -0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--sp-bg);
}

/* Currency and language pickers: quiet until touched. */
.currency-selector .choices__inner,
.language-selector .choices__inner {
  border: 1px solid var(--sp-line) !important;
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.currency-selector .choices:hover .choices__inner,
.language-selector .choices:hover .choices__inner,
.currency-selector .choices.is-open .choices__inner,
.language-selector .choices.is-open .choices__inner {
  border-color: var(--sp-line-strong) !important;
}

.currency-selector select,
.language-selector select {
  border-color: var(--sp-line);
}

.currency-selector .symbol,
.currency-selector .choices__inner .symbol,
.language-selector .code {
  color: var(--sp-ink) !important;
  font-weight: 500;
}

.currency-selector .symbol {
  background-color: rgba(255, 255, 255, 0.06);
}

.choices .choices__list.choices__list--dropdown {
  background-color: var(--sp-surface-2);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius) !important;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.choices .choices__list--dropdown .choices__item,
.choices .choices__list[aria-expanded] .choices__item {
  background-color: transparent;
  color: var(--sp-ink);
}

.choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgba(var(--sp-accent-rgb), 0.18);
}

@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    padding-top: 0.75rem;
  }

  .navbar .navbar-collapse .navbar-nav {
    align-items: stretch;
    gap: 0.15rem;
  }

  .navbar .navbar-collapse .navbar-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sp-line);
  }

  .navbar .nav-item a.nav-link {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }
}

/* Announcement bar */
.announcement {
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  color: var(--sp-ink);
  background: color-mix(in srgb, var(--cl-accent) 18%, var(--cl-background-primary));
  border-bottom: 1px solid var(--sp-line);
}

.announcement a {
  margin-left: 0.35rem;
  color: var(--sp-accent-ink);
  font-weight: 500;
}

.announcement a svg {
  width: 1rem;
  height: 1rem;
}

/* 5. Hero -------------------------------------------------------------- */
/* Note: .hero must not become a stacking context (no transform, filter or
   isolation). The search modal lives inside it and would end up trapped
   underneath Bootstrap's backdrop. */

.hero.has-image {
  background-position: center;
}

.hero .bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--sp-bg-rgb), 0.62),
    rgba(var(--sp-bg-rgb), 0.9)
  );
}

.hero {
  overflow: hidden;
}

/* Scoped to the direct child: the rail has its own container further down. */
.hero > .container {
  gap: clamp(2.75rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 10vh, 7rem) clamp(3.5rem, 8vh, 6rem);
  padding-inline: 1rem;
}

/* Split: the pitch on the left, the catalogue on the right. */
.hero.has-preview > .container {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
}

@media (min-width: 992px) {
  /* The headline is the longest thing on the page, so it gets the wider half. */
  .hero.has-preview > .container {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  }
}

/* Nothing in the catalogue yet: keep one column rather than a blank half. */
.hero.has-preview:has(.hero-preview__track:empty) > .container {
  grid-template-columns: minmax(0, 1fr);
}

.hero.has-preview:has(.hero-preview__track:empty) .hero-preview {
  display: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero .content {
  /* pro.css sets min-width: 60% on this, which beats the max-width and stretches
     the measure across the page. */
  min-width: 0;
  max-width: 44rem;
  container-type: inline-size;
}

.hero.alignment-left .content,
.hero.alignment-right .content {
  margin: 0;
  text-align: left;
}

.hero.alignment-right .content {
  margin-left: auto;
  text-align: right;
}

.hero .content h1 {
  margin-bottom: 1.1rem;
  /* Sized against its own column, not the viewport, and tuned so the longer of
     the two lines still sets on one line at every width. */
  font-size: clamp(1.6rem, 2.4vw + 0.4rem, 3.2rem);
  font-size: clamp(1.6rem, 7.8cqw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: #f6f9ff;
}

.hero-line {
  display: block;
}

/* The second line carries the accent, with a slow band of light crossing it —
   the same light as the beams behind the page. */
.hero-line--accent {
  color: var(--sp-accent-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-line--accent {
    background-image:
      linear-gradient(100deg, transparent 33%, rgba(255, 255, 255, 0.92) 46%, transparent 59%),
      linear-gradient(var(--sp-accent-ink), var(--sp-accent-ink));
    background-size: 300% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes sp-sweep {
  0%   { background-position: -60% 0, 0 0; }
  58%  { background-position: 170% 0, 0 0; }
  100% { background-position: 170% 0, 0 0; }
}

.hero .content .lede {
  max-width: 44ch;
  margin: 0 0 1.85rem;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.6;
  color: var(--sp-ink-2);
  text-wrap: pretty;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0 0 1.6rem;
}

.hero .content .actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Storefront-sized calls to action: taller, heavier, and the primary one lit
   from underneath so it reads as the thing to press. */
.hero .actions .btn-lg {
  --bs-btn-padding-x: 1.55rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 700;
  gap: 0.55rem;
  min-height: 3.35rem;
  letter-spacing: -0.005em;
  border-radius: 10px;
}

.hero .actions .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 34px -14px rgba(var(--sp-accent-rgb), 0.95);
  transition: transform 0.2s var(--sp-ease), box-shadow 0.2s ease, background-color 0.15s ease;
}

.hero .actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 18px 42px -14px rgba(var(--sp-accent-rgb), 1);
}

.hero .actions .btn-primary:active {
  transform: none;
}

.hero .actions .btn-discord {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 34px -16px rgba(88, 101, 242, 0.95);
  transition: transform 0.2s var(--sp-ease), box-shadow 0.2s ease, background-color 0.15s ease;
}

.hero .actions .btn-discord:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 18px 40px -16px rgba(88, 101, 242, 1);
}

.hero .actions .btn-discord:active {
  transform: none;
}

.hero .actions .btn-discord svg {
  width: 1.25rem;
  height: 1.25rem;
}

.hero .fake-searchbar {
  flex: 1 1 260px;
  max-width: 360px;
  margin: 0;
  border-radius: var(--sp-radius);
}

.hero .fake-searchbar input {
  height: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 3rem 0.8rem 2.85rem;
  font-size: 1rem;
  color: var(--sp-ink);
  background: rgba(var(--sp-surface-rgb), 0.72);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hero .fake-searchbar:hover input {
  border-color: rgba(var(--sp-accent-rgb), 0.7);
  background: rgba(var(--sp-surface-rgb), 0.9);
}

.hero .fake-searchbar svg,
.hero .search-modal .searchbar svg {
  /* The input's backdrop-filter makes it a stacking context; keep the icon above it. */
  z-index: 1;
  left: 1rem;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--sp-ink-3);
}

.hero .fake-searchbar kbd {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  min-width: 1.5rem;
  padding: 0.15rem 0.4rem;
  transform: translateY(-50%);
  font: 500 0.75rem/1.3 var(--bs-font-sans-serif);
  text-align: center;
  color: var(--sp-ink-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sp-line-strong);
  border-radius: 6px;
}

/* No keyboard, no shortcut hint. */
@media (hover: none), (max-width: 767.98px) {
  .hero .fake-searchbar kbd { display: none; }
  .hero .fake-searchbar input { padding-right: 1rem; }
}

/* Proof as chips: an icon, the figure and what it counts, on one line each —
   the way a storefront badges its track record. */
.hero .proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero .proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  background: rgba(var(--sp-surface-rgb), 0.6);
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero .proof .proof-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sp-accent-ink);
}

.hero .proof .proof-icon.is-star {
  color: var(--sp-star);
}

.hero .proof .figures {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.hero .proof .value {
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #f6f9ff;
}

.hero .proof .label {
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--sp-ink-2);
}

.hero.alignment-right .proof {
  justify-content: flex-end;
}

/* The preview card: one product at a time, in a panel beside the pitch. */
.hero-preview {
  position: relative;
  width: 100%;
  max-width: 32rem;
}

.hero-preview__track {
  display: grid;
}

/* Every slide shares one grid cell, so the panel never resizes between products. */
.hero-preview__track > * {
  grid-area: 1 / 1;
}

.hero-slide {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sp-ink);
  text-decoration: none;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 60px -28px rgba(2, 5, 15, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.6s var(--sp-ease), transform 0.6s var(--sp-ease), visibility 0.6s,
    border-color 0.2s ease;
}

/* Until Alpine takes over, the first product is the one on show. */
.hero-preview__track:not(.is-ready) > .hero-slide:first-child,
.hero-preview__track.is-ready > .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hero-slide:hover {
  border-color: rgba(var(--sp-accent-rgb), 0.65);
}

.hero-slide__media {
  display: block;
  overflow: hidden;
  background: linear-gradient(155deg, var(--sp-surface-2), var(--sp-surface));
}

.hero-slide__media img {
  width: 100%;
  height: 100%;
}

.hero-slide__media .product-img-placeholder {
  height: 100%;
}

.hero-slide__media {
  position: relative;
}

/* Status sits on the artwork, where a buyer looks first: the product's own
   SellAuth status when it has one, otherwise live stock. The dot pulses while
   the product is available. */
.hero-slide__badge {
  --badge: var(--sp-ok);
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem 0.32rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: rgba(3, 6, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-slide__badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--badge);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--badge) 60%, transparent);
}

.hero-slide__badge.is-out {
  --badge: var(--sp-bad);
}

@keyframes sp-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--badge) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--badge) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--badge) 0%, transparent); }
}

@media (min-width: 768px) {
  .hero { min-height: min(88vh, 940px); }
  .hero.height-medium { min-height: min(68vh, 680px); }
  .hero.height-short { min-height: 0; }
}

@media (min-width: 992px) {
  .hero-preview {
    justify-self: end;
  }
}

@media (max-width: 575.98px) {
  .hero .actions {
    flex-direction: column;
  }

  .hero .content .actions a {
    width: 100%;
  }

  .hero .fake-searchbar {
    flex: none;
    max-width: none;
  }

  .hero .proof li {
    padding: 0.45rem 0.8rem 0.45rem 0.65rem;
  }

  .hero .proof .label {
    font-size: 0.8125rem;
  }
}

/* Search dialog */
.hero .search-modal {
  --bs-modal-width: 640px;
}

.hero .search-modal .modal-header {
  padding: 0.5rem;
}

.hero .search-modal .searchbar input {
  padding: 0.85rem 1rem 0.85rem 2.85rem;
  font-size: 1.0625rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero .search-modal .modal-body {
  padding: 0.5rem;
}

.hero .search-modal .products {
  gap: 0.15rem;
}

.hero .search-modal .product {
  align-items: center;
  padding: 0.6rem;
  border-radius: var(--sp-radius);
  transition: background-color 0.15s ease;
}

.hero .search-modal .product:hover,
.hero .search-modal .product:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.hero .search-modal .product .left {
  align-items: center;
}

.hero .search-modal .product .image {
  flex: none;
  width: 5.5rem;
  max-height: none;
  overflow: hidden;
  border-radius: var(--sp-radius-s);
}

.hero .search-modal .product .text {
  color: var(--sp-ink);
}

.hero .search-modal .product h3 {
  margin-bottom: 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero .search-modal .product p {
  color: var(--sp-ink-2);
}

.search-empty {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--sp-ink-2);
}

/* 6. Sections & titles -------------------------------------------------- */

.py-20 {
  padding-top: var(--sp-section-y);
  padding-bottom: var(--sp-section-y);
}

.section-title {
  align-items: baseline;
  margin-bottom: 1.75rem;
}

.section-title h1,
.section-title h2 {
  font-size: clamp(1.45rem, 1vw + 1.2rem, 1.9rem);
  line-height: 1.15;
}

.section-title.with-link {
  flex-wrap: nowrap;
  justify-content: space-between;
}

.section-subtitle {
  margin: -0.75rem 0 2rem;
}

.section-subtitle p {
  max-width: 60ch;
  margin-bottom: 0;
  color: var(--sp-ink-2);
}

.section-title p {
  color: var(--sp-ink-2);
}

.section-link {
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sp-accent-ink);
  text-decoration: none;
}

a.section-link:hover,
a:hover > .card .section-link {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Primary blocks stay see-through so the animated background carries down the
   page. The alternate is a lifted panel rather than a flat grey band. */
.bg-block-primary {
  background-color: transparent;
}

.bg-block-secondary {
  background-color: rgba(var(--sp-surface-rgb), 0.6);
  border-block: 1px solid var(--sp-line);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--sp-ink-2);
  border: 1px dashed var(--sp-line-strong);
  border-radius: var(--sp-radius-l);
}

.empty-state svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--sp-ink-3);
}

.empty-state p {
  margin: 0;
}

.empty-state.is-note {
  padding: 1.5rem;
  font-size: 0.875rem;
}

/* 7. Features strip ----------------------------------------------------- */
/* One ruled band instead of a row of identical cards. */

.features {
  padding-top: 0;
  padding-bottom: var(--sp-section-y);
}

.features.has-title {
  padding-top: var(--sp-section-y);
}

.feature-strip {
  border-block: 1px solid var(--sp-line);
}

/* Rules are drawn between cells only. Each breakpoint restates the base so a
   cell that started a row at one width stops starting one at the next. */
.features .list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.features .list .feature {
  display: block;
  margin: 0;
  padding: 1.5rem 0 1.6rem;
  text-align: left;
  background: none;
  border: 0 solid var(--sp-line);
  border-top-width: 1px;
  border-radius: 0;
}

.features .list .feature:first-child {
  border-top-width: 0;
}

@media (min-width: 576px) {
  .features .list:not(.cols-1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features .list:not(.cols-1) .feature {
    padding: 1.6rem 1.75rem 1.7rem;
    border-top-width: 1px;
    border-left-width: 1px;
  }

  .features .list:not(.cols-1) .feature:nth-child(2n + 1) {
    padding-left: 0;
    border-left-width: 0;
  }

  .features .list:not(.cols-1) .feature:nth-child(2n) {
    padding-right: 0;
  }

  .features .list:not(.cols-1) .feature:nth-child(-n + 2) {
    border-top-width: 0;
  }
}

@media (min-width: 992px) {
  .features .list.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .features .list.cols-3 .feature {
    padding: 1.6rem 1.75rem 1.7rem;
    border-top-width: 1px;
    border-left-width: 1px;
  }

  .features .list.cols-3 .feature:nth-child(3n + 1) {
    padding-left: 0;
    border-left-width: 0;
  }

  .features .list.cols-3 .feature:nth-child(3n) {
    padding-right: 0;
  }

  .features .list.cols-3 .feature:nth-child(-n + 3) {
    border-top-width: 0;
  }
}

/* Four across only once each column can still hold a readable line. */
@media (min-width: 1200px) {
  .features .list.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .features .list.cols-4 .feature {
    padding: 1.6rem 1.75rem 1.7rem;
    border-top-width: 1px;
    border-left-width: 1px;
  }

  .features .list.cols-4 .feature:nth-child(4n + 1) {
    padding-left: 0;
    border-left-width: 0;
  }

  .features .list.cols-4 .feature:nth-child(4n) {
    padding-right: 0;
  }

  .features .list.cols-4 .feature:nth-child(-n + 4) {
    border-top-width: 0;
  }
}

.features .list .feature .head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.features .list .feature i {
  flex: none;
  width: 1.15rem;
  margin: 0;
  font-size: 1rem;
  text-align: center;
  color: var(--sp-accent-ink);
}

.features .list .feature svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  color: var(--sp-accent-ink);
}

.features .list .feature .title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
}

.features .list .feature .description {
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sp-ink-2);
}

/* 8. Products & cards --------------------------------------------------- */

.card {
  --bs-card-bg: var(--sp-surface);
  --bs-card-border-color: var(--sp-line);
  --bs-card-border-radius: var(--sp-radius-l);
  --bs-card-inner-border-radius: calc(var(--sp-radius-l) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-color: var(--sp-ink);
}

.products .card,
.category-card .card {
  height: 100%;
  overflow: hidden;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  /* A lit top edge, the way a real surface catches light. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: border-color 0.2s ease, transform 0.2s var(--sp-ease);
}

.products .card:hover,
.category-card:hover .card {
  transform: translateY(-2px);
  border-color: rgba(var(--sp-accent-rgb), 0.6);
}

.products .card .card-img-top,
.category-card .card-img-top {
  overflow: hidden;
  background: linear-gradient(155deg, var(--sp-surface-2), var(--sp-surface));
  border-radius: 0;
}

.products .card .card-img-top img,
.products .card .card-img-top svg {
  border-radius: 0;
}

.products .card .card-img-top img,
.category-card .card-img-top img {
  width: 100%;
  transition: transform 0.45s var(--sp-ease);
}

.products .card:hover .card-img-top img,
.category-card:hover .card-img-top img {
  transform: scale(1.035);
}

.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: rgba(var(--sp-accent-rgb), 0.55);
}

.product-img-placeholder svg {
  width: 56px;
  height: 56px;
}

.products .card .card-img-top .badges {
  top: 0.6rem;
  right: 0.6rem;
  gap: 0.35rem;
}

.products .card .card-img-top .badges div {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 999px;
}

.products .card .card-body {
  padding: 0.95rem 1rem 1.05rem;
}

.products .card .card-title {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Price and stock share a line when they fit, and stack when they don't.
   Nothing gets cut off with an ellipsis. */
.products .card .info {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  margin: 0.55rem 0 0;
  overflow: visible;
  white-space: normal;
  color: var(--sp-ink-2);
}

.products .card .info .price {
  overflow: visible;
  font-size: 1rem;
  font-weight: 600;
  white-space: normal;
  font-variant-numeric: tabular-nums;
  color: var(--sp-ink);
}

.products .card .info .price > span,
.products .card .info .price s {
  white-space: nowrap;
}

.products .card .info .price s {
  margin-left: 0.3rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--sp-ink-3);
}

.products .card .info .stock {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.products .card .info .stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-ok);
}

.products .card .info .stock.is-out::before { background: var(--sp-bad); }
.products .card .info .stock.is-group::before { display: none; }

.products .card.is-out .card-img-top img {
  filter: grayscale(0.85) brightness(0.7);
}

.products .card.is-out .card-title,
.products .card.is-out .info .price {
  color: var(--sp-ink-2);
}

/* Category cards */
.category-card {
  display: block;
  height: 100%;
}

.category-card .card-img-top {
  aspect-ratio: 16 / 9;
}

.category-card .card-img-top img {
  height: 100%;
  object-fit: cover;
}

.category-card .card-img-top.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--sp-accent-rgb), 0.55);
}

.category-card .card-img-top.is-placeholder svg {
  width: 56px;
  height: 56px;
}

.category-card .card-body {
  padding: 1rem 1rem 1.1rem;
}

.category-card .card-title {
  margin-bottom: 0.3rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sp-ink);
}

.category-card .card-text {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: var(--sp-ink-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Category chips on the products page. */
.chips {
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.chips .btn {
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  border-radius: 999px;
}

/* 9. Reviews ------------------------------------------------------------ */

.testimonial {
  overflow: hidden;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-l);
}

.testimonial .header {
  justify-content: flex-start;
  padding: 1.15rem 1.25rem 0;
  margin-bottom: 0.65rem;
}

.testimonial .header svg.quote {
  display: none;
}

.testimonial .content {
  padding: 0 1.25rem;
}

.testimonial .content .message {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sp-ink);
}

.testimonial .content .reply {
  background: rgba(var(--sp-bg-rgb), 0.6);
  border-radius: var(--sp-radius-s);
}

.testimonial .content .reply .author,
.testimonial .footer {
  color: var(--sp-ink-3);
}

.testimonial .content .reply .author span {
  color: var(--sp-accent-ink);
}

.testimonial .footer {
  padding: 0.7rem 1.25rem;
  background: transparent;
  border-top: 1px solid var(--sp-line);
  border-radius: 0;
}

.testimonial .footer .date {
  font-weight: 500;
}

/* 10. FAQ --------------------------------------------------------------- */

.faq-layout {
  display: grid;
  gap: 1.5rem 4rem;
}

.faq-intro .section-title {
  margin-bottom: 0.9rem;
}

.faq-intro .section-subtitle {
  margin: 0;
}

@media (min-width: 992px) {
  .faq-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .faq-intro {
    position: sticky;
    top: 6.5rem;
  }
}

.faq .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--sp-ink-2);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--sp-ink);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.2rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon-width: 1rem;
  --bs-accordion-btn-icon-transform: rotate(180deg);
  border-top: 1px solid var(--sp-line);
}

/* Bootstrap's dark theme sets its chevrons on the ::after itself, so the
   plus / minus icons have to be set there too. */
.faq .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9b8d6' stroke-width='1.5' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
}

.faq.bg-block-secondary .accordion {
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
}

.faq .accordion-item {
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--sp-line);
}

.faq .accordion-item,
.faq .accordion-item .accordion-button,
.faq .accordion-item .accordion-collapse {
  border-radius: 0;
}

.faq .accordion-button {
  gap: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
}

.faq .accordion-button:hover {
  color: #ffffff;
}

.faq .accordion-body {
  max-width: 62ch;
  padding: 0 2.5rem 1.4rem 0;
  line-height: 1.65;
}

/* Socials band */
.socials {
  padding: var(--sp-section-y) 0;
  background: transparent;
  border-top: 1px solid var(--sp-line);
}

.socials .list .social {
  align-items: center;
  padding: 0.85rem 1rem;
  font-weight: 500;
  color: var(--sp-ink);
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.socials .list .social:hover {
  color: #ffffff;
  border-color: rgba(var(--sp-accent-rgb), 0.6);
}

.socials .list .social .left svg {
  background-color: rgba(var(--sp-accent-rgb), 0.18);
  color: var(--sp-accent-ink);
}

.socials .list .social .right svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--sp-ink-3);
}

/* 11. Footer ------------------------------------------------------------ */

footer.footer {
  position: relative;
  background: rgba(var(--sp-bg-rgb), 0.72);
  border-top: 1px solid var(--sp-line);
}

/* A last edge of light along the top, in the language of the beams. */
footer.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--sp-accent-rgb), 0.55) 24%,
    rgba(92, 200, 255, 0.3) 58%,
    transparent
  );
  pointer-events: none;
}

.footer-main {
  display: grid;
  gap: 2.75rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 5rem);
  }
}

.footer .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: #f6f9ff;
  text-decoration: none;
}

.footer .logo img {
  max-height: 2.25rem;
  border-radius: 6px;
}

.footer .logo p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
}

/* Socials as icon buttons rather than another list of words. */
.socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--sp-ink-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.socials-row a:hover {
  color: #ffffff;
  background: rgba(var(--sp-accent-rgb), 0.16);
  border-color: rgba(var(--sp-accent-rgb), 0.6);
}

.socials-row svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Discord and YouTube get labelled buttons in their own brand colours; any
   other network stays a small icon. */
.socials-row a.social-btn {
  width: auto;
  height: 2.6rem;
  gap: 0.55rem;
  padding: 0 1.05rem 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.2s var(--sp-ease), box-shadow 0.2s ease, background-color 0.15s ease;
}

.socials-row a.social-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.socials-row a.social-btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.socials-row a.social-btn:active {
  transform: none;
}

.socials-row a.social-btn.is-discord {
  background: #5865f2;
}

.socials-row a.social-btn.is-discord:hover {
  background: #4752c4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -14px rgba(88, 101, 242, 1);
}

/* YouTube red. The glyph is white with the play triangle cut out, so the red
   shows through it like the real logo. */
.socials-row a.social-btn.is-youtube {
  background: #ff0033;
}

.socials-row a.social-btn.is-youtube:hover {
  background: #e0002d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -14px rgba(255, 0, 51, 0.9);
}

.socials-row a.social-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem 1.5rem;
}

.footer h5 {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sp-ink);
}

.footer .nav li a {
  display: inline-block;
  padding: 0.32rem 0;
  font-size: 0.9375rem;
  color: var(--sp-ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer .nav li a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(var(--sp-accent-rgb), 0.85);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 2.25rem;
  font-size: 0.875rem;
  color: var(--sp-ink-3);
  border-top: 1px solid var(--sp-line);
}

.footer-copy {
  margin: 0;
}

/* What you can pay with. Glyphs, not claims — the list is set in the editor. */
.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Brand marks are drawn for light backgrounds, so each sits on its own white
   tile — the way payment badges appear on a real checkout. */
.payments li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 1.9rem;
  color: #1c2438;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--sp-radius-s);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.payments i {
  font-size: 1.15rem;
  line-height: 1;
}

.payments .fa-cc-visa { color: #1a1f71; }
.payments .fa-cc-mastercard { color: #eb001b; }
.payments .fa-cc-amex { color: #2e77bc; }
.payments .fa-cc-paypal { color: #003087; }
.payments .fa-apple-pay { color: #000000; }
.payments .fa-google-pay { color: #5f6368; }
.payments .fa-litecoin-sign { color: #345d9d; }
.payments .fa-bitcoin { color: #f7931a; }
.payments .fa-ethereum { color: #3c3c3d; }

/* 12. Buttons & forms --------------------------------------------------- */
/* Scoped to .btn on purpose: variant pickers carry a bare .btn-primary class. */

.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 10px;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-lg {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.8rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--sp-radius);
}

.btn-sm {
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-border-radius: var(--sp-radius-s);
}

.btn.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-hover-bg: var(--sp-accent-hover);
  --bs-btn-hover-border-color: var(--sp-accent-hover);
  --bs-btn-active-bg: var(--sp-accent-press);
  --bs-btn-active-border-color: var(--sp-accent-press);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn.btn-primary:hover {
  background-color: var(--sp-accent-hover);
  border-color: var(--sp-accent-hover);
}

.btn.btn-primary:active {
  background-color: var(--sp-accent-press);
  border-color: var(--sp-accent-press);
}

.btn.btn-outline-primary {
  --bs-btn-color: var(--sp-ink);
  --bs-btn-border-color: var(--sp-line-strong);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(var(--sp-accent-rgb), 0.14);
  --bs-btn-hover-border-color: rgba(var(--sp-accent-rgb), 0.75);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(var(--sp-accent-rgb), 0.24);
  --bs-btn-active-border-color: var(--sp-accent);
  --bs-btn-disabled-color: var(--sp-ink-3);
  --bs-btn-disabled-border-color: var(--sp-line);
}

.btn.btn-outline-secondary {
  --bs-btn-color: var(--sp-ink-2);
  --bs-btn-border-color: var(--sp-line-strong);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: var(--sp-ink-3);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: var(--sp-ink-3);
}

/* Quiet text button (navbar login) and filter-list rows. */
.btn.btn-ghost,
.btn.btn-outline {
  --bs-btn-color: var(--sp-ink-2);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: transparent;
}

/* Discord in its own blurple (with Discord's hover and press shades), so the
   invite is recognised at a glance. */
.btn.btn-discord {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #5865f2;
  --bs-btn-border-color: #5865f2;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #4752c4;
  --bs-btn-hover-border-color: #4752c4;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #3c45a5;
  --bs-btn-active-border-color: #3c45a5;
  --bs-btn-padding-x: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px -12px rgba(88, 101, 242, 0.9);
}

.btn.btn-discord svg {
  width: 1.15rem;
  height: 1.15rem;
}

.btn.btn-icon {
  --bs-btn-color: var(--sp-ink);
  --bs-btn-border-color: var(--sp-line);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: var(--sp-line-strong);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: var(--sp-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.btn.btn-link {
  --bs-btn-color: var(--sp-accent-ink);
  --bs-btn-hover-color: #c3d8ff;
}

.stock-indicator.btn {
  --bs-btn-padding-x: 0.65rem;
  --bs-btn-padding-y: 0.2rem;
  border-radius: 999px;
  font-weight: 500;
}

.form-control,
.form-select {
  padding: 0.6rem 0.85rem;
  color: var(--sp-ink);
  background-color: var(--sp-surface);
  border-color: var(--sp-line-strong);
  border-radius: 10px;
}

.form-control::placeholder {
  color: var(--sp-ink-3);
}

.form-control:focus,
.form-select:focus {
  color: var(--sp-ink);
  background-color: var(--sp-surface);
  border-color: rgba(var(--sp-accent-rgb), 0.85);
  box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.25);
}

.form-control:disabled,
.form-select:disabled {
  color: var(--sp-ink-3);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sp-ink-2);
}

.form-label.fw-bold {
  font-weight: 600 !important;
  color: var(--sp-ink);
}

.form-check-input {
  border-color: var(--sp-line-strong);
}

.input-group > .form-control,
.input-group > .btn {
  border-radius: 10px;
}

/* 13. Overlays & data --------------------------------------------------- */

.modal {
  --bs-modal-bg: var(--sp-surface);
  --bs-modal-color: var(--sp-ink);
  --bs-modal-border-color: var(--sp-line-strong);
  --bs-modal-border-radius: 18px;
  --bs-modal-inner-border-radius: 17px;
  --bs-modal-header-border-color: var(--sp-line);
  --bs-modal-footer-border-color: var(--sp-line);
  --bs-modal-box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}

.modal-backdrop {
  --bs-backdrop-bg: #02040b;
  --bs-backdrop-opacity: 0.72;
}

.modal-title {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--sp-surface-2);
  --bs-dropdown-color: var(--sp-ink);
  --bs-dropdown-border-color: var(--sp-line-strong);
  --bs-dropdown-border-radius: var(--sp-radius);
  --bs-dropdown-link-color: var(--sp-ink);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-dropdown-divider-bg: var(--sp-line);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sp-ink);
  --bs-table-border-color: var(--sp-line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--sp-ink);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--sp-ink);
}

.table > thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sp-ink-2);
}

.pagination {
  --bs-pagination-border-color: var(--sp-line);
  --bs-pagination-border-radius: 10px;
  --bs-pagination-hover-bg: var(--sp-surface-2);
  --bs-pagination-hover-border-color: var(--sp-line-strong);
  --bs-pagination-hover-color: #ffffff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--sp-line);
  --bs-pagination-disabled-color: var(--sp-ink-3);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.25);
}

.pagination .page-item:not(.active) .page-link {
  color: var(--sp-ink-2);
  background-color: var(--sp-surface);
}

.list-group {
  --bs-list-group-bg: var(--sp-surface);
  --bs-list-group-color: var(--sp-ink);
  --bs-list-group-border-color: var(--sp-line);
  --bs-list-group-action-hover-bg: var(--sp-surface-2);
  --bs-list-group-action-hover-color: #ffffff;
}

.alert {
  --bs-alert-border-radius: var(--sp-radius);
}

.badge {
  font-weight: 600;
}

.bg-gray {
  border: 1px solid var(--sp-line);
}

.bg-gray.rounded {
  border-radius: var(--sp-radius-l) !important;
}

.notification-content {
  background-color: var(--sp-surface-2);
  border-color: var(--sp-line-strong);
}

/* 14. Inner pages ------------------------------------------------------- */

/* The header is sticky and in the flow, so pages don't need to clear a fixed bar. */
.py-5-nav {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Product page: a reading column and a panel that holds the whole decision. */
.product-wrapper {
  min-height: 0;
}

.product-layout {
  --bs-gutter-x: clamp(1.5rem, 4vw, 3.5rem);
  --bs-gutter-y: 2rem;
}

.product-media .carousel img,
.product-media__single {
  display: block;
  width: 100%;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-l);
}

.product-media .product-img-placeholder.product-media__single {
  color: rgba(var(--sp-accent-rgb), 0.5);
  background: linear-gradient(155deg, var(--sp-surface-2), var(--sp-surface));
}

.product-wrapper .thumbnails {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.product-wrapper .thumbnails button {
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-s);
}

.product-wrapper .thumbnails button.active {
  opacity: 1;
  border-color: var(--sp-accent);
}

/* Description and extra tabs */
.product-detail {
  margin-top: 2rem;
}

.product-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--sp-line);
}

.product-tab {
  position: relative;
  padding: 0 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sp-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.product-tab:hover {
  color: var(--sp-ink);
}

.product-tab.is-active {
  color: #ffffff;
}

.product-tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--sp-accent);
}

.product-wrapper .editor {
  max-width: 70ch;
  color: var(--sp-ink-2);
  line-height: 1.7;
}

.product-wrapper .editor h1,
.product-wrapper .editor h2,
.product-wrapper .editor h3,
.product-wrapper .editor strong {
  color: var(--sp-ink);
}

/* The buy box */
.buy-box {
  padding: 1.5rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px -30px rgba(2, 5, 15, 0.9);
}

/* Only follow the page where the panel actually fits on screen. A sticky box
   taller than the viewport parks its buy button out of reach. */
@media (min-width: 1200px) and (min-height: 820px) {
  .buy-box {
    position: sticky;
    top: 5.5rem;
  }
}

@media (max-width: 1199.98px) {
  .buy-box {
    padding: 1.25rem;
  }
}

/* The add-on row carries an image, a name, a description, a price and a button.
   Let the price and button drop to their own line before any of it squashes. */
.buy-box .addon-item {
  flex-wrap: wrap;
}

.buy-box .addon-item > div:last-child {
  margin-left: auto;
}

.buy-box__head h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #f6f9ff;
}

.buy-box .status {
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.buy-box .status .indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
}

.buy-box .status .label {
  font-size: 0.875rem;
  font-weight: 600;
}

.buy-box .badges {
  margin-top: 0.9rem;
}

.product-wrapper .badges div,
.product-wrapper .badges a {
  padding: 0.2rem 0.6rem;
  font-size: 0.8125rem;
  border-radius: 999px;
}

.product-wrapper .badges a {
  color: var(--sp-ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sp-line-strong);
}

.buy-box__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sp-line);
}

.buy-box__price .amount {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sp-ink-2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.stock-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-ok);
}

.stock-pill.is-out {
  color: var(--sp-bad);
}

.stock-pill.is-out::before {
  background: var(--sp-bad);
}

.buy-box .live-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}

.buy-box .live-stats p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--sp-ink-2);
}

.buy-box .live-stats svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--sp-accent-ink);
}

.buy-box .live-stats strong {
  font-weight: 600;
  color: var(--sp-ink);
}

.buy-box form {
  margin-top: 1.3rem;
}

.buy-box .form-label {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sp-ink-2);
}

/* Quantity: a compact stepper on the label's line, not a full-width bar. */
.quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quantity-row .form-label {
  margin-bottom: 0;
}

.stepper {
  flex: none;
  width: auto;
  overflow: hidden;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
}

.stepper .btn.input-group-btn {
  --bs-btn-color: var(--sp-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.07);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--sp-ink-3);
  --bs-btn-disabled-border-color: transparent;
  width: 2.5rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.stepper .btn.input-group-btn svg {
  width: 1rem;
  height: 1rem;
}

.stepper .form-control {
  width: 3rem;
  padding: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.stepper .form-control:focus {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

/* Buy now leads; the cart is the quiet alternative. */
.buy-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.btn.btn-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.25rem;
  padding-inline: 1.15rem;
  font-size: 1rem;
  letter-spacing: -0.005em;
  border-radius: var(--sp-radius);
}

.btn-buy__price {
  padding-left: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.btn.btn-buy:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 26px -14px rgba(var(--sp-accent-rgb), 0.95);
}

.btn.btn-buy:active:not(:disabled) {
  transform: translateY(1px);
}

.btn.btn-cart {
  width: 100%;
  min-height: 2.85rem;
  font-size: 0.9375rem;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
}

.btn-cart__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
}

.buy-box__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sp-ink-3);
}

.buy-box__note svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.1rem;
  color: var(--sp-ok);
}

.product-upsells {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Variant picker */
.variants .variant {
  padding: 0.7rem 0.85rem;
  color: var(--sp-ink);
  background: var(--sp-surface);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.variants .variant:hover {
  background: var(--sp-surface-2);
  border-color: rgba(var(--sp-accent-rgb), 0.6);
}

.variants .variant:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.variants .variant:disabled:hover {
  background: var(--sp-surface);
  border-color: var(--sp-line-strong);
}

.variants .variant.active {
  color: #ffffff;
  background: rgba(var(--sp-accent-rgb), 0.1);
  border-color: var(--sp-accent);
  box-shadow: inset 0 0 0 1px var(--sp-accent);
}

.variants .variant .description,
.variants .variant .price {
  color: var(--sp-ink-2);
}

.variants .variant .price {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--sp-radius-s);
}

.variants .variant.active .price {
  color: #ffffff;
}

/* The tick sits in the row rather than floating off its corner. */
.variants .variant .active-indicator {
  position: static;
  display: inline-flex;
  color: var(--sp-accent-ink);
  background: none;
  border-radius: 0;
}

.variants .variant .active-indicator svg {
  width: 1.15rem;
  height: 1.15rem;
}

.variants .variant .name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.variants .variant .stock {
  font-size: 0.75rem;
  color: var(--sp-ink-3);
}

.variants .variant .price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.addon-item {
  background-color: var(--sp-surface);
  border-color: var(--sp-line-strong);
  border-radius: var(--sp-radius);
}

.addon-item:hover {
  background-color: var(--sp-surface-2);
}

/* Cart */
.cart .product,
.cart .form {
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-l);
}

.cart-item-bg {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--sp-line) !important;
}

.cart-variant-text { color: var(--sp-ink-2); }
.cart-discount-text { color: var(--sp-ink-3); }

/* Status page */
.status-card {
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
}

.status-card h3 {
  font-size: 1.0625rem;
}

/* Tickets */
.ticket .ticket-input-area {
  background: var(--sp-surface);
}

/* Visual editor: the toolbar spans the full width of each component and used
   to swallow clicks on whatever sat underneath (the menu button, for one). */
.builder .builder-toolbar {
  z-index: 5;
  pointer-events: none;
}

.builder .builder-toolbar .actions {
  pointer-events: auto;
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-line-strong);
}

.builder .builder-toolbar .actions button {
  background: transparent;
}

.builder .builder-toolbar .actions button:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* The editor injects its toolbar carrying a .container class. Without this it
   gets picked up by the layout rules above and steals half of every flex row
   it lands in — which only ever shows up inside the editor. */
.builder .builder-toolbar.container {
  position: absolute;
  display: block;
  flex: none;
  padding-block: 0;
}

/* 15. Motion & accessibility -------------------------------------------- */

:where(a, button, [role="button"], .btn, .nav-link, .accordion-button, .variant):focus-visible {
  outline: 2px solid var(--sp-accent-ink);
  outline-offset: 2px;
  box-shadow: none;
}

.hero .fake-searchbar:focus-visible {
  outline: 2px solid var(--sp-accent-ink);
  outline-offset: 3px;
}

/* One entrance, once: the hero settles in on page load. Nothing else animates in. */
@keyframes sp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .content > * {
    animation: sp-rise 0.7s var(--sp-ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }

  .hero-preview {
    animation: sp-rise 0.9s var(--sp-ease) 0.3s both;
  }

  /* With the intro playing, the hero waits and rises as the intro lifts away,
     so the entrance is seen instead of spent underneath the overlay. */
  .has-intro .hero .content > * {
    animation-delay: calc(var(--i, 0) * 90ms + 1.55s);
  }

  .has-intro .hero-preview {
    animation-delay: 1.8s;
  }

  /* A live status pulses; an out-of-stock one doesn't. */
  .hero-slide__badge:not(.is-out)::before {
    animation: sp-dot-pulse 2s ease-out infinite;
  }

  .sp-bg {
    animation: sp-fade 1.4s ease-out both;
  }

  /* Don't replay the entrance on every edit inside the visual builder. */
  .builder .hero .content > *,
  .builder .hero-preview,
  .builder .sp-bg {
    animation: none;
  }

  /* The sweep is the page's one signature moment, so it runs in the builder too. */
  .hero-line--accent {
    animation: sp-sweep 7s cubic-bezier(0.4, 0, 0.2, 1) 1.1s infinite;
  }

  .builder .hero-line--accent {
    animation-delay: 0.3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-bg__aurora i {
    animation: none;
  }

  .products .card,
  .products .card .card-img-top img,
  .category-card .card,
  .category-card .card-img-top img {
    transition: none;
  }

  .products .card:hover,
  .category-card:hover .card,
  .products .card:hover .card-img-top img,
  .category-card:hover .card-img-top img {
    transform: none;
  }
}

/* 16. Intro --------------------------------------------------------------- */
/* Once per visit: the mark and wordmark light up on black, a loader fills, and
   the whole stage lifts away into the page. About two seconds end to end.
   Everything animates opacity, transform, clip-path or filter on a handful of
   small elements. Whether it plays at all is decided in <head> (.has-intro). */

.sp-intro {
  display: none;
}

.has-intro .sp-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #020409;
  cursor: pointer;
  animation: sp-intro-out 0.65s cubic-bezier(0.65, 0, 0.35, 1) 1.45s forwards;
}

/* Held on the black frame until the display face has loaded (see master.njk). */
.has-intro .sp-intro:not(.is-go),
.has-intro .sp-intro:not(.is-go)::before,
.has-intro .sp-intro:not(.is-go) *,
.has-intro .sp-intro:not(.is-go) *::after {
  animation-play-state: paused;
}

/* The brand blue swelling behind the mark. */
.has-intro .sp-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  width: min(70vmin, 36rem);
  height: min(70vmin, 36rem);
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(31, 107, 255, 0.26),
    rgba(31, 107, 255, 0.08) 45%,
    transparent 72%
  );
  animation: sp-intro-bloom 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: sp-intro-lift 0.65s cubic-bezier(0.65, 0, 0.35, 1) 1.45s forwards;
}

.sp-intro__mark {
  width: clamp(72px, 11vw, 108px);
  height: auto;
  filter:
    blur(0)
    drop-shadow(0 0 16px rgba(47, 123, 255, 0.7))
    drop-shadow(0 0 44px rgba(47, 123, 255, 0.32));
  animation: sp-intro-mark 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-intro__word {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 700;
  font-stretch: var(--sp-display-stretch, 100%);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #3d86ff;
  clip-path: inset(0 100% 0 0);
  animation: sp-intro-word 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
}

/* Revealed left to right, then the same band of light as the hero crosses it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sp-intro__word {
    background-image:
      linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.95) 47%, transparent 59%),
      linear-gradient(#3d86ff, #3d86ff);
    background-size: 300% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation:
      sp-intro-word 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards,
      sp-intro-sweep 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.72s forwards;
  }
}

/* A loader, because the shop sells one. */
.sp-intro__bar {
  position: relative;
  width: clamp(7rem, 16vw, 9.5rem);
  height: 2px;
  margin-top: 0.35rem;
  overflow: hidden;
  opacity: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  animation: sp-fade 0.3s ease 0.3s forwards;
}

.sp-intro__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1f6bff, #46d6ff);
  transform: scaleX(0);
  transform-origin: left center;
  animation: sp-intro-load 1.05s cubic-bezier(0.45, 0, 0.2, 1) 0.35s forwards;
}

.has-intro .sp-intro.is-skipping {
  animation: sp-intro-out 0.3s ease forwards;
}

@keyframes sp-intro-bloom {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}

@keyframes sp-intro-mark {
  from {
    opacity: 0;
    transform: scale(0.82) rotate(-8deg);
    filter:
      blur(10px)
      drop-shadow(0 0 16px rgba(47, 123, 255, 0))
      drop-shadow(0 0 44px rgba(47, 123, 255, 0));
  }
  to {
    opacity: 1;
    transform: none;
    filter:
      blur(0)
      drop-shadow(0 0 16px rgba(47, 123, 255, 0.7))
      drop-shadow(0 0 44px rgba(47, 123, 255, 0.32));
  }
}

@keyframes sp-intro-word {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes sp-intro-sweep {
  from { background-position: -60% 0, 0 0; }
  to   { background-position: 170% 0, 0 0; }
}

@keyframes sp-intro-load {
  to { transform: scaleX(1); }
}

@keyframes sp-intro-lift {
  to { transform: scale(1.05); filter: blur(6px); }
}

@keyframes sp-intro-out {
  to { opacity: 0; visibility: hidden; }
}

/* 17. Loader window ------------------------------------------------------- */
/* The hero's product window: macOS chrome, the product art, and a status log in
   the system mono (SF Mono on a Mac) — monospace because it is a console. A
   single light runs round its edge. */

.loader {
  position: relative;
  isolation: isolate;
  padding: 1px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sp-line-strong);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 70px -24px rgba(var(--sp-accent-rgb), 0.4);
}

/* The travelling light: a conic wedge turning behind the window and seen only
   through the 1px gap around it. It moves on transform alone. */
.loader__beam {
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 280deg,
    color-mix(in oklab, var(--sp-accent-ink) 25%, transparent) 300deg,
    var(--sp-accent-ink) 336deg,
    #7ee0ff 350deg,
    transparent 360deg
  );
}

.loader__win {
  position: relative;
  overflow: hidden;
  background: #060b17;
  border-radius: 15px;
}

.loader__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.35rem;
  padding: 0 0.9rem;
  background: linear-gradient(#111a30, #0c1426);
  border-bottom: 1px solid var(--sp-line);
}

.term__lights {
  display: flex;
  gap: 0.45rem;
}

.term__lights i {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.term__lights i:nth-child(1) { background: #ff5f57; }
.term__lights i:nth-child(2) { background: #febc2e; }
.term__lights i:nth-child(3) { background: #28c840; }

.loader__title {
  position: absolute;
  left: 50%;
  max-width: 60%;
  overflow: hidden;
  transform: translateX(-50%);
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sp-ink-3);
}

/* Inside the window the slides are just artwork: no card chrome of their own,
   and they cross-fade in place. */
.loader .hero-slide {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.loader__log {
  padding: 0.85rem 1rem 1rem;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--sp-ink-2);
  border-top: 1px solid var(--sp-line);
}

.term__line {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  min-height: 1.75em;
  margin: 0;
  white-space: nowrap;
}

.term__prompt {
  flex: none;
}

.term__user { font-weight: 600; color: var(--sp-accent-ink); }
.term__path { color: var(--sp-spec-3); }
.term__sigil { color: var(--sp-ink-3); }
.term__typed { color: #f6f9ff; }

/* The product on show is the lit row. */
.loader__log .is-row {
  margin: 0 -0.55rem;
  padding: 0 0.55rem;
  color: var(--sp-ink-3);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.loader__log .is-row:hover,
.loader__log .is-row:focus-visible {
  color: var(--sp-ink);
}

.loader__log .is-row.is-active {
  color: #f6f9ff;
  background: rgba(var(--sp-accent-rgb), 0.13);
}

.term__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A dotted leader from the product to its status, like a printed table. */
.term__dots {
  flex: 1;
  min-width: 1.5ch;
  border-bottom: 1px dotted rgba(169, 184, 214, 0.25);
  transform: translateY(-0.35em);
}

.term__status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.6ch;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st, var(--sp-ok));
}

.term__status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.6em currentColor;
}

.term__price {
  flex: none;
  min-width: 6.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sp-ink-2);
}

.term__price small {
  font-size: inherit;
  color: var(--sp-ink-3);
}

.is-row.is-active .term__price {
  color: #ffffff;
}

.term__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--sp-accent-ink);
}

/* Only the replay shows a cursor on the command line while it types. */
.term__cursor.is-typing {
  display: none;
}

[data-term].is-armed:not(.is-typed) .term__cursor.is-typing {
  display: inline-block;
}

/* Lines keep their space while hidden, so the window never changes height. */
[data-term].is-armed .term__line {
  visibility: hidden;
}

[data-term].is-armed .term__line.is-shown {
  visibility: visible;
}

@keyframes sp-term-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sp-blink {
  50% { opacity: 0; }
}

@keyframes sp-beam-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: no-preference) {
  [data-term].is-armed .term__line.is-shown {
    animation: sp-term-in 0.22s ease both;
  }

  .term__cursor {
    animation: sp-blink 1.05s steps(1) infinite;
  }

  .loader__beam {
    animation: sp-beam-spin 6s linear infinite;
  }
}

@media (max-width: 575.98px) {
  .loader__log {
    padding: 0.75rem 0.8rem 0.9rem;
    font-size: 0.72rem;
  }

  .term__price small {
    display: none;
  }
}

/* 18. Game pages & roadmap ---------------------------------------------- */
/* Custom pages: /retrac lists a game's products, /coming-soon is the roadmap.
   Artwork tiles are lit by a blurred copy of their own logo, so every game
   glows in its own colours (Retrac green, Eon violet) with no extra settings. */

/* Navbar links can carry a small icon: a game logo, or the clock for the roadmap. */
.navbar .nav-item a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-ico {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 6px;
}

.nav-ico.is-line {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0;
  color: var(--sp-ink-3);
  transition: color 0.15s ease;
}

.navbar .nav-item a.nav-link:hover .nav-ico.is-line,
.navbar .nav-item a.nav-link.active .nav-ico.is-line {
  color: currentColor;
}

.game,
.roadmap {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: var(--sp-section-y);
}

.game-head h1,
.rm-head h1 {
  margin: 0;
  font-size: clamp(2.1rem, 2.4vw + 1.3rem, 3.1rem);
  font-stretch: var(--sp-display-stretch, 100%);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.game-head p,
.rm-head p {
  max-width: 54ch;
  text-wrap: pretty;
  margin: 0.6rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sp-ink-2);
}

/* Game header: the logo tile beside the name. */
.game-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.game-head__logo {
  position: relative;
  isolation: isolate;
  flex: none;
  width: clamp(4rem, 7vw, 5.25rem);
  aspect-ratio: 1;
}

.game-head__logo::before {
  content: "";
  position: absolute;
  inset: 6%;
  z-index: -1;
  background: var(--logo) center / cover;
  border-radius: 30%;
  filter: blur(26px) saturate(1.6);
  opacity: 0.55;
}

.game-head__logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24%;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
}

/* Product cards share the row; a lone product is capped so it never stretches edge to edge. */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.25rem;
}

.game-grid:has(> .gcard:only-child) {
  grid-template-columns: minmax(0, 38rem);
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: rgba(var(--sp-surface-rgb), 0.62);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--sp-ease), border-color 0.2s ease, box-shadow 0.3s ease;
}

.gcard:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--sp-accent-rgb), 0.5);
  box-shadow: 0 28px 60px -34px rgba(var(--sp-accent-rgb), 0.8);
}

.gcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #060b17;
}

.gcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
  transition: transform 0.6s var(--sp-ease);
}

.gcard:hover .gcard__media img {
  transform: scale(1.04);
}

.gcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 1.2rem 1.2rem;
}

.gcard__id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.gcard__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  overflow: hidden;
  background: #0a1226;
  border-radius: 11px;
  outline: 1px solid rgba(255, 255, 255, 0.12);
  outline-offset: -1px;
}

.gcard__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The board is tall, so it sits in its tile at an angle, like a part on a bench. */
.gcard__icon.is-board {
  background: radial-gradient(circle at 50% 60%, rgba(var(--sp-accent-rgb), 0.35), transparent 70%), #0a1226;
}

.gcard__icon.is-board img {
  width: auto;
  height: 2.55rem;
  object-fit: contain;
  transform: rotate(-12deg);
}

.gcard__title {
  min-width: 0;
}

.gcard__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

/* The name's link covers the whole card, so a click anywhere opens the product. */
.gcard__name a {
  color: inherit;
  text-decoration: none;
}

.gcard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gcard__stock {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--sp-ink-3);
}

.gcard.is-out .gcard__stock {
  color: var(--sp-bad);
}

.gcard__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.38rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--st);
  background: color-mix(in oklab, var(--st) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--st) 32%, transparent);
  border-radius: 999px;
}

.gcard__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st);
}

.gcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--sp-line);
}

.gcard__price {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.gcard__price small {
  margin-right: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sp-ink-3);
}

.btn.gcard__buy {
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.6rem;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 26px -14px rgba(var(--sp-accent-rgb), 0.95);
}

.gcard__buy svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s var(--sp-ease);
}

.gcard:hover .gcard__buy svg {
  transform: translateX(3px);
}

.gcard.is-out .gcard__media img {
  filter: grayscale(0.7) brightness(0.7);
}

/* The way through to the roadmap. */
.game-next {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  color: var(--sp-ink-2);
  text-decoration: none;
  background: rgba(var(--sp-surface-rgb), 0.45);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.game-next:hover {
  color: var(--sp-ink);
  background: rgba(var(--sp-surface-rgb), 0.7);
  border-color: rgba(var(--sp-accent-rgb), 0.5);
}

.game-next__icons {
  display: flex;
  flex: none;
  padding-left: 0.45rem;
}

.game-next__icons > * {
  width: 2rem;
  height: 2rem;
  margin-left: -0.45rem;
  border-radius: 9px;
  outline: 2px solid var(--sp-bg);
}

.game-next__icons .is-board {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0a1226;
}

.game-next__icons .is-board img {
  width: auto;
  height: 1.75rem;
  transform: rotate(-12deg);
}

.game-next__text {
  min-width: 0;
  font-size: 0.9375rem;
}

.game-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sp-accent-ink);
}

.game-next__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s var(--sp-ease);
}

.game-next:hover .game-next__cta svg {
  transform: translateX(3px);
}

/* Roadmap */
.rm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.rm-head .btn-discord svg {
  width: 1.25rem;
  height: 1.25rem;
}

.rm-wrap {
  position: relative;
}

/* The line the releases hang off: across on wide screens, down on phones.
   It runs through the centre of the dots (1.5rem label + 0.6rem gap + half a dot). */
.rm-line {
  position: absolute;
  top: calc(2.1rem + 5px);
  left: 5px;
  right: 0;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(var(--sp-accent-rgb), 0.9), rgba(var(--sp-accent-rgb), 0.35) 45%, var(--sp-line) 100%);
  transform-origin: left center;
}

.rm-line i {
  position: absolute;
  top: 0;
  left: 0;
  width: 22%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: translateX(-100%);
}

.rm-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-item {
  position: relative;
  min-width: 0;
}

.rm-when {
  height: 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--sp-ink-2);
}

.rm-item.is-next .rm-when {
  color: #ffffff;
}

.rm-dot {
  display: block;
  width: 11px;
  height: 11px;
  margin-top: 0.6rem;
  background: var(--sp-bg);
  border: 2px solid rgba(var(--sp-accent-rgb), 0.7);
  border-radius: 50%;
}

.rm-item.is-next .rm-dot {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
}

.rm-card {
  margin-top: 1rem;
  overflow: hidden;
  background: rgba(var(--sp-surface-rgb), 0.62);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--sp-ease), border-color 0.2s ease, box-shadow 0.3s ease;
}

.rm-item.is-next .rm-card {
  border-color: rgba(var(--sp-accent-rgb), 0.4);
}

.rm-item:hover .rm-card {
  transform: translateY(-3px);
  border-color: rgba(var(--sp-accent-rgb), 0.55);
  box-shadow: 0 28px 60px -36px rgba(var(--sp-accent-rgb), 0.8);
}

.rm-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 11.5rem;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 110%, rgba(var(--sp-accent-rgb), 0.18), transparent 60%),
    #070c1a;
  border-bottom: 1px solid var(--sp-line);
}

.rm-art::before {
  content: "";
  position: absolute;
  inset: 18% 28%;
  z-index: -1;
  background: var(--logo) center / cover;
  border-radius: 50%;
  filter: blur(42px) saturate(1.7);
  opacity: 0.6;
}

.rm-art__logo {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 24%;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
  transition: transform 0.45s var(--sp-ease);
}

.rm-item:hover .rm-art__logo {
  transform: translateY(-4px) scale(1.04);
}

.rm-art__board {
  width: auto;
  height: 9.75rem;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.65));
  transform: rotate(-12deg);
  transition: transform 0.5s var(--sp-ease);
}

.rm-item:hover .rm-art__board {
  transform: rotate(-7deg) translateY(-4px);
}

.rm-art__badge {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  outline: 2px solid #070c1a;
}

.rm-body {
  padding: 1.05rem 1.2rem 1.2rem;
}

.rm-name {
  margin: 0;
  font-size: 1.3rem;
  font-stretch: var(--sp-display-stretch, 100%);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.rm-kind {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  color: var(--sp-ink-3);
}

.rm-stage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.rm-stage__bar {
  display: grid;
  flex: 0 1 8.5rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rm-stage__bar i {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.rm-stage__bar i.is-on {
  background: var(--sp-accent);
  box-shadow: 0 0 10px rgba(var(--sp-accent-rgb), 0.6);
}

.rm-stage__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sp-ink-2);
}

@media (max-width: 991.98px) {
  .navbar .nav-item a.nav-link {
    display: flex;
  }
}

/* Phones: the line turns vertical and the releases stack down it. */
@media (max-width: 767.98px) {
  .rm-wrap {
    padding-left: 1.6rem;
  }

  .rm-line {
    top: 0.75rem;
    bottom: 0;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(var(--sp-accent-rgb), 0.9), rgba(var(--sp-accent-rgb), 0.35) 45%, var(--sp-line) 100%);
    transform-origin: center top;
  }

  .rm-line i {
    width: 100%;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: translateY(-100%);
  }

  .rm-dot {
    position: absolute;
    top: calc(0.75rem - 5.5px);
    left: -1.6rem;
    margin: 0;
  }

  .rm-track {
    gap: 1.6rem;
  }

  .rm-card {
    margin-top: 0.6rem;
  }

  .game-next {
    flex-wrap: wrap;
  }

  .game-next__cta {
    margin-left: 0;
  }
}

/* Small phones: logo beside the name, intro full width underneath. */
@media (max-width: 575.98px) {
  .game-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.9rem;
  }

  .game-head__text {
    display: contents;
  }

  .game-head__logo {
    width: 3.4rem;
  }

  .game-head p {
    grid-column: 1 / -1;
    margin-top: 0.9rem;
  }
}

@media (max-width: 420px) {
  .gcard__id {
    flex-wrap: wrap;
  }

  .gcard__status {
    margin-left: calc(2.9rem + 0.85rem);
  }
}

@keyframes rm-draw-x { from { transform: scaleX(0); } }
@keyframes rm-draw-y { from { transform: scaleY(0); } }

@keyframes rm-travel-x {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(460%); }
}

@keyframes rm-travel-y {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(460%); }
}

@keyframes rm-seg { from { transform: scaleX(0); } }

@keyframes rm-ping {
  0% { box-shadow: 0 0 0 0 rgba(var(--sp-accent-rgb), 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(var(--sp-accent-rgb), 0); }
}

@keyframes gcard-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--st) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--st) 0%, transparent); }
}

@keyframes game-glow {
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrances fill backwards only, so hover transforms still work afterwards. */
  .game-head,
  .rm-head {
    animation: sp-rise 0.7s var(--sp-ease) 0.05s backwards;
  }

  .gcard,
  .rm-item {
    animation: sp-rise 0.7s var(--sp-ease) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 160ms);
  }

  .game-next {
    animation: sp-rise 0.7s var(--sp-ease) 0.45s backwards;
  }

  .rm-line {
    animation: rm-draw-x 1.2s var(--sp-ease) 0.25s backwards;
  }

  .rm-line i {
    animation: rm-travel-x 5.5s cubic-bezier(0.45, 0, 0.25, 1) 1.5s infinite;
  }

  .rm-stage__bar i.is-on {
    transform-origin: left center;
    animation: rm-seg 0.45s var(--sp-ease) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + var(--n, 1) * 110ms + 500ms);
  }

  .rm-item.is-next .rm-dot {
    animation: rm-ping 2s ease-out 1s infinite;
  }

  .gcard__status::before {
    animation: gcard-ping 2s ease-out infinite;
  }

  .game-head__logo::before,
  .rm-art::before {
    animation: game-glow 5s ease-in-out infinite;
  }

  @media (max-width: 767.98px) {
    .rm-line {
      animation-name: rm-draw-y;
    }

    .rm-line i {
      animation-name: rm-travel-y;
    }
  }

  /* Don't replay the entrances on every edit inside the visual builder. */
  .builder .game-head,
  .builder .rm-head,
  .builder .gcard,
  .builder .rm-item,
  .builder .game-next,
  .builder .rm-line,
  .builder .rm-stage__bar i.is-on {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcard,
  .gcard__media img,
  .gcard__buy svg,
  .game-next__cta svg,
  .rm-card,
  .rm-art__logo,
  .rm-art__board {
    transition: none;
  }

  .gcard:hover,
  .gcard:hover .gcard__media img,
  .rm-item:hover .rm-card,
  .rm-item:hover .rm-art__logo {
    transform: none;
  }

  .rm-item:hover .rm-art__board {
    transform: rotate(-12deg);
  }
}