/* Helios seller storefront.
   Sellers control the logo, banner, accent colour, light/dark theme, and the
   home page copy; everything below reacts to those values. No webfonts: this
   host serves font-src 'self', so the display type is a heavy system stack. */

:root {
  color-scheme: dark;
  --accent: #52a8ff;
  --accent-rgb: 82, 168, 255;
  --accent-ink: #04121f;
  --accent-soft: rgba(82, 168, 255, 0.14);
  --accent-glow: rgba(82, 168, 255, 0.34);
  --bg: #05070b;
  --bg-soft: #080b12;
  --panel: #0e131c;
  --panel-soft: #141a25;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f6f8fc;
  --muted: #97a3b6;
  --green: #5df29c;
  --amber: #ffcc66;
  --red: #ff6b79;
  --nav-bg: rgba(5, 7, 11, 0.86);
  --scrim: 4, 7, 12;
  --shell: min(1200px, calc(100% - 32px));
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme='light'] {
  color-scheme: light;
  --accent-soft: rgba(82, 168, 255, 0.12);
  --accent-glow: rgba(82, 168, 255, 0.28);
  --bg: #f1f4f9;
  --bg-soft: #e9eef6;
  --panel: #ffffff;
  --panel-soft: #f5f8fc;
  --line: rgba(12, 20, 32, 0.1);
  --line-strong: rgba(12, 20, 32, 0.2);
  --text: #0d1420;
  --muted: #58657a;
  --green: #10804a;
  --amber: #8f6104;
  --red: #c42535;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --scrim: 255, 255, 255;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main {
  flex: 1 0 auto;
}

.sf-shell,
.sf-section,
.sf-page-head,
.sf-browse,
.sf-nav-inner,
.sf-footer-inner,
.sf-hero-inner {
  width: var(--shell);
  margin-inline: auto;
}

.sf-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Big uppercase display type carries the whole look, so it is sized off the
   viewport and tightened hard at every step. */
.sf-display {
  margin: 14px 0 0;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.sf-display span {
  display: block;
}

.sf-display-accent {
  background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #ffffff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sf-display-accent {
    background: none;
    color: var(--accent);
  }
}

.sf-display-sm {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}

/* ---------------------------------------------------------------- nav --- */

.sf-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.sf-nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}

.sf-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.sf-brand strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

.sf-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent-ink);
  background: var(--accent);
  overflow: hidden;
}

.sf-brand-mark img,
.sf-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-brand-mark.has-image {
  background: transparent;
}

.sf-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.sf-nav-links a {
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.sf-nav-links a:hover {
  color: var(--text);
  background: var(--panel-soft);
}

.sf-nav-links a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.sf-nav-account-link {
  display: none;
}

/* Discord brand blue, matching the Login button on heliosrce.com. This one
   colour deliberately ignores the seller's accent — it is Discord's, not
   theirs. */
.sf-account-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #5865f2;
  border-radius: 999px;
  background: #5865f2;
  color: #ffffff;
  padding: 0.62rem 1.05rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.2);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.sf-account-toggle:hover {
  border-color: #4954e0;
  background: #4954e0;
  box-shadow: 0 10px 28px rgba(88, 101, 242, 0.32);
}

.sf-account-toggle-mark {
  flex: 0 0 auto;
}

/* Signed in it just says "Account", so it drops back to the neutral nav pill. */
.sf-account-toggle.is-authenticated {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.sf-account-toggle.is-authenticated:hover {
  border-color: var(--accent);
  color: var(--text);
}

.sf-account-toggle.is-authenticated .sf-account-toggle-mark {
  display: none;
}

.sf-nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.sf-nav-bars,
.sf-nav-bars::before,
.sf-nav-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
}

.sf-nav-bars::before,
.sf-nav-bars::after {
  content: '';
  position: relative;
}

.sf-nav-bars::before {
  top: -5px;
}

.sf-nav-bars::after {
  top: 3px;
}

/* ------------------------------------------------------------- ticker --- */

.sf-ticker {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 9px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sf-ticker-track {
  display: flex;
  width: max-content;
  animation: sf-marquee var(--ticker-duration, 42s) linear infinite;
  will-change: transform;
}

.sf-ticker-group {
  display: flex;
  flex: 0 0 auto;
  gap: 34px;
  padding-right: 34px;
}

.sf-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.sf-ticker-item b {
  color: var(--text);
  font-weight: 700;
}

.sf-ticker-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

@keyframes sf-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------- hero --- */

.sf-shell:empty {
  display: none;
}

.sf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62vh, 640px);
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.sf-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

.sf-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 12%, var(--accent-glow), transparent 45%),
    linear-gradient(180deg, rgba(var(--scrim), 0.2) 0%, rgba(var(--scrim), 0.72) 78%, var(--bg) 100%);
}

/* A banner photo needs a much heavier scrim than the flat gradient does. */
.sf-hero.has-banner::after {
  background:
    radial-gradient(circle at 18% 12%, var(--accent-glow), transparent 42%),
    linear-gradient(180deg, rgba(4, 7, 12, 0.3) 0%, rgba(4, 7, 12, 0.62) 68%, rgba(4, 7, 12, 0.92) 100%);
}

.sf-hero.has-banner {
  --text: #f8fafd;
  --muted: rgba(236, 241, 248, 0.8);
  --line-strong: rgba(255, 255, 255, 0.42);
  color: var(--text);
}

.sf-hero-inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sf-logo {
  width: 88px;
  height: 88px;
  margin-bottom: 22px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.sf-logo.has-image {
  background: transparent;
}

.sf-hero-sub {
  margin: 18px 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.sf-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.sf-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(var(--scrim), 0.28);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-trust li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.sf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.sf-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 14px 34px var(--accent-glow);
}

.sf-btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(var(--scrim), 0.3);
}

.sf-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ----------------------------------------------------------- sections --- */

.sf-section {
  padding: 60px 0 0;
}

.sf-section:last-child {
  padding-bottom: 80px;
}

.sf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.sf-section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sf-section-sub {
  margin: 8px 0 0;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.55;
}

.sf-link {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------ product --- */

.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.sf-group-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 -4px;
}

.sf-group-heading h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.sf-group-heading span {
  color: var(--muted);
  font-size: 0.78rem;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent-soft);
}

.product-card.is-sold-out {
  opacity: 0.7;
}

/* -------------------------------------------------------- outline + orbit

   Every product card is drawn inside a slow travelling outline. On top of that
   a seller can switch on the orbit: a wider band just outside the outline
   carrying two bright streaks half a turn apart, moving three times faster.
   Both are conic gradients masked down to a thin ring, so they follow whatever
   corner radius they land on, and a coloured halo breathes underneath.

   The two have their own colour, picked per product. Left alone, the outline
   runs through the whole palette and there is no orbit at all. */

@property --sf-ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.sf-ring {
  position: relative;
  /* Set per host so the orbit can widen the corner to match. */
  --sf-ring-radius: 18px;

  /* The palette both bands choose from, named once so light mode can restate
     the whole set rather than every colour class twice over. */
  --c-accent: var(--accent-rgb);
  --c-gold: 255, 199, 74;
  --c-cyan: 64, 214, 255;
  --c-magenta: 255, 92, 214;
  --c-emerald: 76, 233, 148;
  --c-violet: 167, 121, 255;
  --c-crimson: 255, 88, 104;

  --outline: var(--c-violet);
  --orbit: var(--c-violet);
  /* The halo belongs to the orbit when there is one, the outline otherwise. */
  --glow: var(--outline);
  --outline-lit: color-mix(in srgb, rgb(var(--outline)) 55%, #ffffff);
  --orbit-lit: color-mix(in srgb, rgb(var(--orbit)) 55%, #ffffff);
  --orbit-peak: #ffffff;

  /* The default outline: one ramp through the palette rather than a single
     hue. Picking a colour swaps in the single-hue ramp further down. */
  --sf-outline-ramp:
    rgba(255, 255, 255, 0.16) 0deg,
    #40d6ff 40deg,
    #5f83ff 90deg,
    #a779ff 140deg,
    #ff5ad6 180deg,
    rgba(255, 255, 255, 0.16) 226deg,
    rgba(255, 255, 255, 0.16) 360deg;

  /* The travelling outline is the border. The host drops its own so nothing
     sits outside the gradient, and the band lands on the element edge. */
  border-width: 0;
  /* Both bands sit outside the box, so a ringed host cannot clip its children. */
  overflow: visible;
  /* Held by the animation below; this is what reduced motion falls back to. */
  box-shadow:
    0 0 18px -8px rgba(var(--glow), 0.42),
    0 12px 34px -26px rgba(var(--glow), 0.45);
  animation: sf-ring-radiate 3.4s ease-in-out infinite;
}

.sf-ring.has-orbit { --glow: var(--orbit); }

.sf-ring.is-outline-accent { --outline: var(--c-accent); }
.sf-ring.is-outline-gold { --outline: var(--c-gold); }
.sf-ring.is-outline-cyan { --outline: var(--c-cyan); }
.sf-ring.is-outline-magenta { --outline: var(--c-magenta); }
.sf-ring.is-outline-emerald { --outline: var(--c-emerald); }
.sf-ring.is-outline-violet { --outline: var(--c-violet); }
.sf-ring.is-outline-crimson { --outline: var(--c-crimson); }

.sf-ring.is-orbit-accent { --orbit: var(--c-accent); }
.sf-ring.is-orbit-gold { --orbit: var(--c-gold); }
.sf-ring.is-orbit-cyan { --orbit: var(--c-cyan); }
.sf-ring.is-orbit-magenta { --orbit: var(--c-magenta); }
.sf-ring.is-orbit-emerald { --orbit: var(--c-emerald); }
.sf-ring.is-orbit-violet { --orbit: var(--c-violet); }
.sf-ring.is-orbit-crimson { --orbit: var(--c-crimson); }

/* A named colour replaces the multicoloured ramp with its own hue. */
.sf-ring.is-outline-accent,
.sf-ring.is-outline-gold,
.sf-ring.is-outline-cyan,
.sf-ring.is-outline-magenta,
.sf-ring.is-outline-emerald,
.sf-ring.is-outline-violet,
.sf-ring.is-outline-crimson {
  --sf-outline-ramp:
    rgba(var(--outline), 0.16) 0deg,
    rgb(var(--outline)) 40deg,
    var(--outline-lit) 90deg,
    rgb(var(--outline)) 140deg,
    var(--outline-lit) 180deg,
    rgba(var(--outline), 0.16) 226deg,
    rgba(var(--outline), 0.16) 360deg;
}

/* On paper a white peak is invisible and neon reads as washed out, so the
   palette drops to hues that hold against white and the ramp runs the other
   way: faint, then saturated, then deeper than the base. */
[data-theme='light'] .sf-ring {
  --c-gold: 214, 148, 0;
  --c-cyan: 0, 145, 190;
  --c-magenta: 205, 30, 160;
  --c-emerald: 13, 150, 90;
  --c-violet: 116, 62, 224;
  --c-crimson: 205, 35, 55;
  --outline-lit: color-mix(in srgb, rgb(var(--outline)) 78%, #000000);
  --orbit-lit: color-mix(in srgb, rgb(var(--orbit)) 78%, #000000);
  --orbit-peak: rgb(var(--orbit));
  box-shadow:
    0 0 16px -8px rgba(var(--glow), 0.45),
    0 10px 30px -24px rgba(var(--glow), 0.6);
}

[data-theme='light'] .sf-ring.is-outline-multi {
  --sf-outline-ramp:
    rgba(12, 20, 32, 0.12) 0deg,
    #0091be 40deg,
    #2f5fe0 90deg,
    #743ee0 140deg,
    #cd1ea0 180deg,
    rgba(12, 20, 32, 0.12) 226deg,
    rgba(12, 20, 32, 0.12) 360deg;
}

/* The outline. The padding is its thickness: the mask keeps only that. */
.sf-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(from var(--sf-ring-angle), var(--sf-outline-ramp));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: sf-ring-spin 8s linear infinite;
}

/* The orbit, only on a product the seller flagged. The stops ramp in and out
   over ~12deg at each end rather than relying on a blur filter: filtering this
   band costs about a third of the frame budget once a grid is on screen. */
.sf-ring.has-orbit::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: 2;
  padding: 6px;
  border-radius: calc(var(--sf-ring-radius) + 5px);
  background: conic-gradient(
    from var(--sf-ring-angle),
    transparent 0deg,
    rgba(var(--orbit), 0.22) 12deg,
    rgba(var(--orbit), 0.75) 24deg,
    var(--orbit-lit) 32deg,
    var(--orbit-peak) 36deg,
    var(--orbit-lit) 40deg,
    rgba(var(--orbit), 0.75) 48deg,
    rgba(var(--orbit), 0.22) 60deg,
    transparent 74deg,
    transparent 192deg,
    rgba(var(--orbit), 0.22) 204deg,
    rgba(var(--orbit), 0.75) 216deg,
    var(--orbit-lit) 224deg,
    var(--orbit-peak) 228deg,
    var(--orbit-lit) 232deg,
    rgba(var(--orbit), 0.75) 240deg,
    rgba(var(--orbit), 0.22) 252deg,
    transparent 266deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: sf-ring-spin 3.6s linear infinite;
}

@keyframes sf-ring-spin {
  to { --sf-ring-angle: 360deg; }
}

/* A whole grid of these is on screen at once, so the card halo only shifts a
   little. The product page gets the fuller version below. */
@keyframes sf-ring-radiate {
  0%,
  100% {
    box-shadow:
      0 0 14px -9px rgba(var(--glow), 0.32),
      0 10px 30px -26px rgba(var(--glow), 0.38);
  }

  50% {
    box-shadow:
      0 0 24px -8px rgba(var(--glow), 0.52),
      0 14px 38px -22px rgba(var(--glow), 0.56);
  }
}

@keyframes sf-ring-radiate-lg {
  0%,
  100% {
    box-shadow:
      0 0 22px -8px rgba(var(--glow), 0.4),
      0 18px 48px -26px rgba(var(--glow), 0.5);
  }

  50% {
    box-shadow:
      0 0 46px -4px rgba(var(--glow), 0.72),
      0 24px 62px -18px rgba(var(--glow), 0.85);
  }
}

/* Both hosts stop clipping while ringed, so their corners are rounded here
   instead of by the frame that used to do it. */
.product-card.sf-ring { --sf-ring-radius: 18px; }

/* The band is 3px thick, so the artwork is rounded to its inner edge. */
.product-card.sf-ring .product-media { border-radius: 15px 15px 0 0; }

.sf-product-media.sf-ring {
  --sf-ring-radius: 22px;
  overflow: visible;
  animation-name: sf-ring-radiate-lg;
  animation-duration: 4.2s;
}

.sf-product-media.sf-ring > img { border-radius: 19px; }

/* A grid travelling and breathing in lockstep looks mechanical, so each column
   starts at a different point in both cycles. */
.product-card.sf-ring:nth-child(3n + 2) { animation-delay: -1.1s; }
.product-card.sf-ring:nth-child(3n + 3) { animation-delay: -2.2s; }

.product-card.sf-ring:nth-child(3n + 2)::before,
.product-card.sf-ring:nth-child(3n + 2)::after { animation-delay: -1.7s; }

.product-card.sf-ring:nth-child(3n + 3)::before,
.product-card.sf-ring:nth-child(3n + 3)::after { animation-delay: -3.4s; }

/* The orbit is the wider, faster band, so phones keep only the outline. */
@media (max-width: 768px) {
  .sf-ring.has-orbit::before { display: none; }
}

/* Left still, both bands keep their colour and simply stop travelling. */
@media (prefers-reduced-motion: reduce) {
  .sf-ring,
  .sf-ring::before,
  .sf-ring::after {
    animation: none;
  }
}

.product-media {
  position: relative;
  aspect-ratio: 10 / 11;
  display: grid;
  place-items: center;
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--accent);
  background: linear-gradient(155deg, var(--accent-soft), var(--panel-soft) 70%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.product-media .product-media-backdrop {
  position: absolute;
  z-index: 0;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(20px) saturate(0.8);
  opacity: 0.5;
  transform: scale(1.08);
}

.product-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-media .product-media-image {
  z-index: 1;
}

.product-badges {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  /* The pills keep their old inset; the best-seller band cancels it out below
     so it can reach the corner. */
  padding: 10px;
}

.product-badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(4, 7, 12, 0.76);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.product-badge.is-kind {
  color: var(--accent);
}

.product-badge.is-subscription {
  color: var(--green);
}

/* Not a pill. The best-seller flag starts hard in the card's top-left corner
   and dissolves into the artwork on its way right, so it reads as part of the
   card rather than something stuck on top of it. It borrows the highlight
   outline's colour, falling back to the store accent if there is no ring. */
.product-badges .product-badge.is-featured {
  order: -1;
  width: 100%;
  margin: -10px -10px 4px;
  padding: 8px 46px 8px 13px;
  border-radius: 15px 0 0 0;
  background: linear-gradient(
    90deg,
    rgba(var(--outline, var(--accent-rgb)), 0.92) 0%,
    rgba(var(--outline, var(--accent-rgb)), 0.5) 38%,
    rgba(var(--outline, var(--accent-rgb)), 0) 80%
  );
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(4, 7, 12, 0.5);
  backdrop-filter: none;
}

/* The product page's frame is rounded harder than a card's. */
.sf-product-media .product-badge.is-featured {
  border-top-left-radius: 19px;
}

.product-badge.is-stock {
  margin-left: auto;
  color: var(--amber);
}

.product-badge.is-sold-out {
  margin-left: auto;
  color: var(--red);
}

/* Only the plate flips in light mode; the per-badge colours stay so kind,
   low-stock, and sold-out keep meaning something. */
[data-theme='light'] .product-badge {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.22);
}

/* The band is already a wash of colour, so it keeps its own treatment and
   skips the white plate the pills get. */
[data-theme='light'] .product-badge.is-featured {
  box-shadow: none;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
}

.product-body h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.3;
}

.product-body .product-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-target {
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.product-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.product-price {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.product-price-original {
  color: var(--muted);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}

.product-sale-badge {
  align-self: center;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.53rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1.35;
  white-space: nowrap;
}

.buy-button {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.buy-button:hover:not(:disabled) {
  filter: brightness(1.09);
}

.buy-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.buy-button.is-sold-out {
  background: var(--panel-soft);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  opacity: 1;
}

/* The home page is a storefront window rather than the dense catalog. Three
   larger editorial cards mirror the seller-site reference while the full
   Store page keeps its compact, fast-scanning grid. */
#sf-featured {
  width: min(1480px, calc(100% - 64px));
  padding-top: 74px;
}

#sf-featured .sf-section-head {
  margin-bottom: 38px;
}

#sf-featured .sf-section-head h2 {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.96;
}

#sf-featured .sf-section-sub {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.035em;
}

#sf-featured-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

#sf-featured-grid .product-card {
  min-height: 520px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 88%, #02040a);
}

#sf-featured-grid .product-card.sf-ring {
  --sf-ring-radius: 22px;
}

#sf-featured-grid .product-card.sf-ring .product-media {
  border-radius: 19px 19px 0 0;
}

#sf-featured-grid .product-media {
  aspect-ratio: 10 / 11;
  background: #05070c;
}

#sf-featured-grid .product-badges {
  z-index: 2;
  min-height: 48px;
  align-items: center;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(2, 4, 9, 0.94), rgba(2, 4, 9, 0.78));
}

#sf-featured-grid .product-badge {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(2, 4, 9, 0.88);
  backdrop-filter: none;
}

#sf-featured-grid .product-badges .product-badge.is-featured {
  order: initial;
  width: auto;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(var(--outline, var(--accent-rgb)), 0.78);
  border-radius: 999px;
  background: rgba(2, 4, 9, 0.88);
  color: rgb(var(--outline, var(--accent-rgb)));
  text-shadow: none;
}

#sf-featured-grid .product-plan-strip {
  position: absolute;
  z-index: 2;
  top: 48px;
  left: 0;
  right: 0;
  padding: 7px 13px;
  background: linear-gradient(90deg, rgb(var(--outline, var(--accent-rgb))), rgba(var(--outline, var(--accent-rgb)), 0.72));
  color: #05070b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

#sf-featured-grid .product-body {
  gap: 10px;
  padding: 22px 20px 20px;
}

#sf-featured-grid .product-body h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.24rem;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

#sf-featured-grid .product-body .product-description {
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: 0.88rem;
  line-height: 1.48;
  -webkit-line-clamp: 4;
}

#sf-featured-grid .product-buy-row {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#sf-featured-grid .product-price {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.2rem;
}

#sf-featured-grid .buy-button.is-view {
  height: auto;
  padding: 8px 0 8px 14px;
  background: transparent;
  color: var(--accent);
}

#sf-featured-grid .buy-button.is-view:hover {
  filter: none;
  color: color-mix(in srgb, var(--accent) 65%, #ffffff);
}

@media (min-width: 741px) {
  #sf-featured-grid .product-media {
    aspect-ratio: 20 / 23;
  }

  #sf-featured-grid .product-body {
    gap: 8px;
    padding: 16px 18px 16px;
  }

  #sf-featured-grid .product-body .product-description {
    -webkit-line-clamp: 3;
  }

  #sf-featured-grid .product-buy-row {
    padding-top: 12px;
  }
}

[data-theme='light'] #sf-featured-grid .product-card {
  background: var(--panel);
}

[data-theme='light'] #sf-featured-grid .product-badges {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.88));
}

[data-theme='light'] #sf-featured-grid .product-badge,
[data-theme='light'] #sf-featured-grid .product-badges .product-badge.is-featured {
  background: rgba(255, 255, 255, 0.94);
}

@media (max-width: 1080px) {
  #sf-featured {
    width: var(--shell);
  }

  #sf-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
  }

  #sf-featured-grid .product-card {
    min-height: 440px;
  }

  #sf-featured-grid .product-badges {
    min-height: 42px;
    gap: 4px;
    padding: 9px;
  }

  #sf-featured-grid .product-badge,
  #sf-featured-grid .product-badges .product-badge.is-featured {
    padding: 4px 7px;
    font-size: 0.56rem;
    letter-spacing: 0.075em;
    white-space: nowrap;
  }

  #sf-featured-grid .product-plan-strip {
    top: 42px;
    padding: 6px 10px;
    font-size: 0.62rem;
  }

  #sf-featured-grid .product-body {
    gap: 8px;
    padding: 16px 14px 14px;
  }

  #sf-featured-grid .product-body h3 {
    font-size: clamp(0.92rem, 1.8vw, 1.08rem);
  }

  #sf-featured-grid .product-body .product-description {
    font-size: clamp(0.72rem, 1.35vw, 0.82rem);
    line-height: 1.4;
    -webkit-line-clamp: 3;
  }

  #sf-featured-grid .product-buy-row {
    gap: 8px;
    padding-top: 13px;
  }

  #sf-featured-grid .product-price {
    font-size: clamp(0.92rem, 1.8vw, 1.08rem);
  }

  #sf-featured-grid .buy-button.is-view {
    padding-left: 8px;
    font-size: 0.66rem;
  }
}

@media (max-width: 740px) {
  #sf-featured-grid .product-media {
    aspect-ratio: 10 / 11;
  }

  #sf-featured-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 330px);
    gap: 16px;
    margin-inline: -2px;
    padding: 6px 18px 20px 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  #sf-featured-grid .product-card {
    min-height: 0;
    scroll-snap-align: start;
  }

  #sf-featured-grid .product-badges {
    flex-wrap: nowrap;
    gap: 4px;
    padding-inline: 9px;
  }

  #sf-featured-grid .product-badge,
  #sf-featured-grid .product-badges .product-badge.is-featured {
    padding: 4px 7px;
    font-size: 0.56rem;
    letter-spacing: 0.075em;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------- categories --- */

.sf-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.sf-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 148px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--accent-soft), var(--panel) 65%);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.sf-category-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.sf-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.sf-category-card strong,
.sf-category-card span {
  position: relative;
}

.sf-category-card strong {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sf-category-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- steps --- */

.sf-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sf-step;
}

/* store.js gives each step the same travelling outline a product card gets,
   locked to the store accent, so the border here comes from .sf-ring. */
.sf-steps li {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 18px;
  background: var(--panel);
}

/* These three read as one row of a single explanation, so unlike the product
   grid they travel and breathe together rather than staggered. */

.sf-steps li::before {
  counter-increment: sf-step;
  content: counter(sf-step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
}

.sf-steps h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
}

.sf-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* --------------------------------------------------------- store view --- */

.sf-page-head {
  padding: 46px 0 30px;
}

.sf-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.sf-back:hover {
  color: var(--accent);
}

.sf-search {
  display: block;
  max-width: 460px;
  margin-top: 22px;
}

.sf-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.sf-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sf-browse {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 80px;
}

.sf-rail {
  align-self: start;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.sf-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.sf-rail-item:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.sf-rail-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.sf-rail-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-rail-count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.sf-rail-item.is-active .sf-rail-count {
  background: transparent;
  color: var(--accent);
}

.sf-rail-child {
  padding-left: 26px;
  font-size: 0.86rem;
}

.sf-rail-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--line);
}

.sf-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sf-catalog-head h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sf-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------- states --- */

.store-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 78px 20px;
  color: var(--muted);
}

.store-state h1,
.store-state h2 {
  margin: 0;
  color: var(--text);
}

.store-state p {
  margin: 0;
  max-width: 46ch;
}

.store-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  padding: 56px 20px;
}

.store-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: sf-spin 0.9s linear infinite;
}

@keyframes sf-spin {
  to {
    transform: rotate(360deg);
  }
}

.store-state-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 1.3rem;
  font-weight: 900;
}

.order-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}

.order-banner span {
  color: var(--muted);
  font-size: 0.9rem;
}

.order-banner.is-success {
  border-color: rgba(93, 242, 156, 0.4);
}

.order-banner.is-success strong {
  color: var(--green);
}

.order-banner.is-error {
  border-color: rgba(255, 107, 121, 0.42);
}

.order-banner.is-error strong {
  color: var(--red);
}

/* ------------------------------------------------------------- footer --- */

.sf-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.sf-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.sf-footer-inner span {
  margin-right: auto;
}

.sf-footer-inner a {
  color: var(--muted);
  text-decoration: none;
}

.sf-footer-inner a:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .sf-ticker-track {
    animation: none;
  }

  .store-spinner {
    animation-duration: 4s;
  }

  .product-card:hover,
  .sf-category-card:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {
  .sf-account-toggle {
    display: none;
  }

  .sf-nav-account-link {
    display: block;
  }

  .sf-nav-toggle {
    display: grid;
    place-items: center;
  }

  .sf-nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px 16px 16px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }

  .sf-nav-links.is-open {
    display: flex;
  }

  .sf-nav-links a {
    padding: 13px 14px;
  }

  .sf-browse {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* The category rail becomes a horizontally scrolling chip row. */
  .sf-rail {
    position: static;
    flex-direction: row;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .sf-rail-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sf-rail-child {
    padding-left: 12px;
  }

  .sf-rail-divider {
    width: 1px;
    height: auto;
    margin: 4px 2px;
    flex: 0 0 auto;
  }

  .sf-hero {
    min-height: 0;
    padding: 48px 0 52px;
  }

  .sf-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    font-size: 1.7rem;
  }

  .sf-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sf-catalog-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 540px) {
  .sf-grid,
  .sf-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-btn {
    width: 100%;
    justify-content: center;
  }

  .sf-hero-actions {
    width: 100%;
  }
}

/* ------------------------------------------------------- product page --- */

.sf-product {
  width: var(--shell);
  margin-inline: auto;
  padding: 34px 0 80px;
}

.sf-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-top: 18px;
}

.sf-product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(150deg, var(--accent-soft), var(--panel-soft) 70%);
  color: var(--accent);
  font-size: 5rem;
  font-weight: 900;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.sf-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #05070c;
}

.sf-product-detail h1 {
  margin: 10px 0 0;
}

.sf-product-price-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.sf-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 10px;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.sf-product-price .product-price-original {
  font-size: 0.48em;
}

.sf-product-price .product-sale-badge {
  padding: 4px 9px;
  font-size: 0.62rem;
}

.sf-product-flag {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-product-flag.is-sold-out {
  color: var(--red);
}

.sf-panel {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.sf-panel-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sf-panel p:last-child {
  margin: 0;
  line-height: 1.65;
}

#sf-product-description { overflow-wrap: anywhere; }

.markdown-content {
  color: inherit;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content p { margin: 0 0 0.85em; }
.markdown-content ul,
.markdown-content ol { margin: 0.45em 0 0.9em; padding-left: 1.45em; }
.markdown-content li + li { margin-top: 0.3em; }
.markdown-content blockquote {
  margin: 0.65em 0;
  padding: 0.2em 0 0.2em 0.9em;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.markdown-content code {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.34em;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
  font: 0.88em/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
.markdown-content pre {
  max-width: 100%;
  margin: 0.7em 0 1em;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  overflow-x: auto;
}
.markdown-content pre code { border: 0; padding: 0; background: transparent; white-space: pre; }
.markdown-content a { color: var(--accent); text-underline-offset: 0.16em; }
.markdown-content u { text-underline-offset: 0.14em; }

.sf-product-buy {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
  height: 54px;
  font-size: 0.9rem;
}

.sf-product-buy:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.sf-product-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.product-card.is-clickable {
  cursor: pointer;
}

.product-link {
  color: inherit;
  text-decoration: none;
}

.product-card.is-clickable:hover .product-link {
  color: var(--accent);
}

@media (max-width: 860px) {
  .sf-product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sf-product-media {
    font-size: 3.4rem;
  }
}

.sf-product-server {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sf-cart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.sf-cart-toggle:hover {
  border-color: var(--line-strong);
}

.sf-cart-toggle-mark {
  flex: 0 0 auto;
}

.sf-cart-toggle span {
  min-width: 1.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.12rem 0.38rem;
  text-align: center;
  font-size: 0.75rem;
}

.sf-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 7, 12, 0.64);
  backdrop-filter: blur(3px);
}

.sf-cart {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 100;
  display: flex;
  width: min(440px, 100%);
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.3);
  transform: translateX(105%);
  transition: transform 180ms ease;
}

.sf-cart.is-open { transform: translateX(0); }

.sf-cart-head,
.sf-cart-footer {
  padding: 1.35rem;
  border-bottom: 1px solid var(--line);
}

.sf-cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sf-cart-head h2 { margin: 0.2rem 0 0; }

.sf-cart-close {
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.45rem;
  cursor: pointer;
}

.sf-cart-items {
  flex: 1;
  overflow: auto;
  padding: 0 1.35rem;
}

.sf-cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.sf-cart-item strong { font-size: 0.95rem; }
.sf-cart-item small { color: var(--muted); }
.sf-cart-item-price { grid-column: 2; grid-row: 1; }

.sf-cart-remove {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.sf-cart-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2rem;
  color: var(--muted);
  text-align: center;
}

.sf-cart-empty strong { color: var(--text); }
.sf-cart-footer { border-top: 1px solid var(--line); border-bottom: 0; }
.sf-cart-footer .sf-btn { width: 100%; margin-top: 1rem; }
.sf-cart-footer p { margin: 0.7rem 0 0; color: var(--muted); text-align: center; font-size: 0.76rem; }
.sf-cart-total { display: flex; align-items: center; justify-content: space-between; }
.sf-cart-total strong { font-size: 1.35rem; }
.sf-offer-form { display: grid; gap: .45rem; margin-bottom: 1rem; }
.sf-offer-form label { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sf-offer-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.sf-offer-form input { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: .72rem .8rem; color: var(--text); background: var(--surface); font: inherit; text-transform: uppercase; }
.sf-offer-form .sf-btn { width: auto; margin: 0; padding-inline: 1rem; }
.sf-offer-form p { margin: 0; text-align: left; }
.sf-offer-form p[data-kind="success"] { color: var(--accent); }
.sf-offer-form p[data-kind="error"] { color: #ef6464; }
.sf-cart-footer .sf-cart-total + .sf-cart-total { margin-top: .45rem; }
.sf-cart-subtotal strong,
.sf-cart-discount strong { font-size: 1rem; }
.sf-cart-discount { color: var(--accent); }

.sf-server-choice {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 750;
}

.sf-server-choice select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 0.8rem;
  font: inherit;
}

body.sf-cart-open { overflow: hidden; }

.sf-notice {
  position: fixed;
  z-index: 120;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  width: min(420px, calc(100vw - 2rem));
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 1rem 1.05rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
}

.sf-notice.is-warning { border-left-color: #f2be5c; }
.sf-notice.is-error { border-left-color: #ff6678; }

.sf-notice span {
  line-height: 1.5;
  font-size: 0.9rem;
  font-weight: 700;
}

.sf-notice button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 560px) {
  .sf-notice { top: 0.75rem; right: 0.75rem; width: calc(100vw - 1.5rem); }
}

/* ------------------------------------------------------------ account --- */

.sf-account-page { width: var(--shell); margin-inline: auto; padding: 34px 0 80px; }
.sf-account-heading { max-width: 800px; margin: 22px 0 28px; }
.sf-account-heading .sf-hero-sub { margin-top: 16px; }
.sf-account-state {
  min-height: 330px; display: grid; place-items: center; align-content: center; gap: 14px;
  padding: 48px 22px; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(145deg, var(--panel), var(--bg-soft)); text-align: center;
}
.sf-account-state h2, .sf-account-state p { margin: 0; }
.sf-account-state p { max-width: 52ch; color: var(--muted); line-height: 1.6; }
.sf-discord-mark {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  background: #5865f2; color: #fff; font-size: 1.5rem; font-weight: 950;
}
.sf-account-profile, .sf-account-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.sf-account-profile {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px; margin-bottom: 18px;
}
.sf-account-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sf-account-identity img {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--panel-soft);
}
.sf-account-identity div, .sf-order-main, .sf-order-meta { display: grid; gap: 5px; min-width: 0; }
.sf-account-identity small, .sf-order-main small { color: var(--muted); }
.sf-account-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-account-sign-out { flex: 0 0 auto; }
.sf-account-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px;
}
.sf-account-card { padding: 22px; }
.sf-account-card h2 { margin: 8px 0 18px; font-size: 1.25rem; }
.sf-account-card p { color: var(--muted); line-height: 1.55; }
.sf-linked-name { display: block; color: var(--green); font-size: 1.1rem; }
.sf-account-card-head, .sf-order-row, .sf-subscription-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.sf-subscription-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sf-subscription-row:last-child { border-bottom: 0; }
.sf-subscription-copy, .sf-subscription-actions { display: grid; gap: 5px; }
.sf-subscription-copy small, .sf-subscription-actions span { color: var(--muted); font-size: 0.8rem; }
.sf-subscription-actions { justify-items: end; text-align: right; }
.sf-subscription-actions .sf-link { border: 0; padding: 0; background: none; cursor: pointer; }
.sf-account-card-head h2 { margin-bottom: 0; }
.sf-order-list { display: grid; gap: 10px; margin-top: 20px; }
.sf-order-row {
  flex-wrap: wrap; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--bg-soft);
}
.sf-order-meta { justify-items: end; }
.sf-order-status {
  color: var(--amber); font-size: 0.74rem; font-weight: 850;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.sf-order-status.is-fulfilled { color: var(--green); }
.sf-order-status.is-failed, .sf-order-status.is-disputed, .sf-order-error { color: var(--red); }
.sf-order-error { flex: 1 0 100%; margin: 4px 0 0; font-size: 0.82rem; }
.sf-orders-empty {
  display: grid; gap: 7px; padding: 30px; border: 1px dashed var(--line-strong);
  border-radius: 14px; color: var(--muted); text-align: center;
}

@media (max-width: 700px) {
  .sf-account-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-account-profile { align-items: stretch; flex-direction: column; }
  .sf-account-card-head, .sf-order-row, .sf-subscription-row { align-items: flex-start; }
  .sf-subscription-row { flex-direction: column; }
  .sf-subscription-actions { justify-items: start; text-align: left; }
}

/* ------------------------------------------------------------- backdrop ---

   Optional animated backgrounds a seller can put behind their storefront. They
   share one set of layers and only ever repaint through transform and opacity,
   so they composite on the GPU and cost nothing per frame — the one thing this
   file has to avoid is animating a filter or a gradient over a full viewport.

   The whole thing is inert until <html data-backdrop> names one. */

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

.sf-backdrop-glow,
.sf-backdrop-band,
.sf-backdrop-motes,
.sf-backdrop-grid,
.sf-shooting-star {
  display: none;
}

/* The drifting layer. It hangs one tile above the viewport and travels exactly
   one tile, so the repeat lines up again at the end of every cycle. */
.sf-backdrop-motes {
  position: absolute;
  top: calc(-1 * var(--tile));
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: repeat;
  background-size: var(--tile) var(--tile);
  will-change: transform;
  animation: sf-backdrop-drift var(--speed) linear infinite;
}

.sf-backdrop-glow {
  position: absolute;
  inset: -20%;
  will-change: transform;
}

@keyframes sf-backdrop-drift {
  to { transform: translate3d(0, var(--tile), 0); }
}

@keyframes sf-backdrop-drift-up {
  to { transform: translate3d(0, calc(-1 * var(--tile)), 0); }
}

/* ---------------------------------------------------------- starfield ---

   Four star layers, a galactic band and a nebula wash. Depth comes from pairing
   size against speed: the faint dust is small and slow, the bright stars are
   large and quick, so the field parallaxes instead of sliding as one sheet.

   Twinkling is the easy thing to get wrong here. A layer can only fade as a
   whole, so pulsing all of them hard makes the entire sky breathe in unison,
   which is what reads as cheap. Instead the dense layers barely move — the dust
   not at all — and one sparse layer carries a fast, obvious sparkle. That is
   the layer the eye reads as individual stars twinkling. */

[data-backdrop='starfield'] .sf-backdrop-glow,
[data-backdrop='starfield'] .sf-backdrop-band,
[data-backdrop='starfield'] .sf-backdrop-motes,
[data-backdrop='starfield'] .sf-shooting-star {
  display: block;
}

/* Far dust: small, dense, and deliberately never twinkles. It is texture rather
   than stars, and it is dense enough that the tile edge stops being legible. */
[data-backdrop='starfield'] .sf-backdrop-motes-a {
  --tile: 200px;
  --speed: 130s;
  opacity: 0.72;
  background-image:
    radial-gradient(0.9px 0.9px at 12% 8%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(0.8px 0.8px at 27% 19%, rgba(214, 230, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 41% 5%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(0.8px 0.8px at 58% 14%, rgba(255, 240, 225, 0.5), transparent 60%),
    radial-gradient(0.9px 0.9px at 73% 3%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(0.8px 0.8px at 88% 11%, rgba(206, 224, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 5% 31%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(0.8px 0.8px at 19% 44%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(0.9px 0.9px at 33% 27%, rgba(226, 238, 255, 0.6), transparent 60%),
    radial-gradient(0.8px 0.8px at 49% 38%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 64% 29%, rgba(255, 246, 232, 0.55), transparent 60%),
    radial-gradient(0.8px 0.8px at 81% 41%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(0.9px 0.9px at 94% 33%, rgba(210, 228, 255, 0.55), transparent 60%),
    radial-gradient(0.8px 0.8px at 9% 58%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 24% 67%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(0.8px 0.8px at 37% 52%, rgba(232, 242, 255, 0.5), transparent 60%),
    radial-gradient(0.9px 0.9px at 52% 61%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(0.8px 0.8px at 69% 55%, rgba(255, 238, 220, 0.45), transparent 60%),
    radial-gradient(1px 1px at 85% 66%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(0.8px 0.8px at 3% 79%, rgba(216, 232, 255, 0.5), transparent 60%),
    radial-gradient(0.9px 0.9px at 16% 91%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(0.8px 0.8px at 30% 84%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 46% 95%, rgba(255, 248, 236, 0.55), transparent 60%),
    radial-gradient(0.9px 0.9px at 61% 77%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(0.8px 0.8px at 76% 88%, rgba(220, 234, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 91% 80%, rgba(255, 255, 255, 0.6), transparent 60%);
}

/* Mid field. A long, shallow twinkle that never fully dims. */
[data-backdrop='starfield'] .sf-backdrop-motes-b {
  --tile: 320px;
  --speed: 100s;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(1.2px 1.2px at 23% 31%, rgba(198, 220, 255, 0.8), transparent 62%),
    radial-gradient(1.5px 1.5px at 39% 7%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(1.2px 1.2px at 55% 24%, rgba(255, 236, 214, 0.8), transparent 62%),
    radial-gradient(1.4px 1.4px at 71% 15%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1.3px 1.3px at 87% 35%, rgba(206, 226, 255, 0.75), transparent 62%),
    radial-gradient(1.5px 1.5px at 14% 52%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(1.2px 1.2px at 31% 68%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1.4px 1.4px at 47% 45%, rgba(214, 232, 255, 0.8), transparent 62%),
    radial-gradient(1.3px 1.3px at 63% 74%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(1.5px 1.5px at 79% 58%, rgba(255, 242, 224, 0.8), transparent 62%),
    radial-gradient(1.2px 1.2px at 94% 84%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1.4px 1.4px at 21% 88%, rgba(202, 224, 255, 0.75), transparent 62%),
    radial-gradient(1.3px 1.3px at 44% 92%, rgba(255, 255, 255, 0.8), transparent 62%);
  animation-name: sf-backdrop-drift, sf-backdrop-twinkle;
  animation-duration: var(--speed), 14s;
  animation-timing-function: linear, ease-in-out;
}

/* Foreground stars: fewer, larger, and warm or cold rather than plain white. */
[data-backdrop='starfield'] .sf-backdrop-motes-c {
  --tile: 460px;
  --speed: 65s;
  background-image:
    radial-gradient(2.2px 2.2px at 17% 21%, #ffffff, transparent 64%),
    radial-gradient(2px 2px at 38% 9%, rgba(196, 224, 255, 0.95), transparent 64%),
    radial-gradient(2.4px 2.4px at 59% 33%, rgba(255, 255, 255, 0.95), transparent 64%),
    radial-gradient(1.9px 1.9px at 81% 17%, rgba(255, 232, 206, 0.9), transparent 64%),
    radial-gradient(2.1px 2.1px at 26% 58%, rgba(255, 255, 255, 0.9), transparent 64%),
    radial-gradient(2.3px 2.3px at 48% 76%, rgba(206, 228, 255, 0.95), transparent 64%),
    radial-gradient(2px 2px at 69% 62%, rgba(255, 255, 255, 0.9), transparent 64%),
    radial-gradient(2.2px 2.2px at 90% 88%, rgba(255, 244, 226, 0.9), transparent 64%);
  animation-name: sf-backdrop-drift, sf-backdrop-twinkle;
  animation-duration: var(--speed), 9s;
  animation-delay: 0s, -3s;
  animation-timing-function: linear, ease-in-out;
}

/* The sparkle layer. Four stars on a very large tile, each with a soft halo, on
   a short cycle that dips almost to nothing — this is the one doing the work. */
[data-backdrop='starfield'] .sf-backdrop-motes-d {
  --tile: 620px;
  --speed: 52s;
  background-image:
    radial-gradient(3px 3px at 22% 34%, #ffffff 0%, rgba(190, 220, 255, 0.55) 35%, transparent 70%),
    radial-gradient(2.6px 2.6px at 57% 12%, #ffffff 0%, rgba(255, 226, 200, 0.5) 35%, transparent 70%),
    radial-gradient(3.2px 3.2px at 78% 67%, #ffffff 0%, rgba(200, 228, 255, 0.5) 35%, transparent 70%),
    radial-gradient(2.8px 2.8px at 41% 88%, #ffffff 0%, rgba(255, 255, 255, 0.5) 35%, transparent 70%);
  animation-name: sf-backdrop-drift, sf-backdrop-sparkle;
  animation-duration: var(--speed), 4.2s;
  animation-delay: 0s, -1.7s;
  animation-timing-function: linear, ease-in-out;
}

@keyframes sf-backdrop-twinkle {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@keyframes sf-backdrop-sparkle {
  0%, 100% { opacity: 0.18; }
  45% { opacity: 1; }
  62% { opacity: 0.5; }
}

/* The galactic band. A single soft diagonal wash, laid across the field at an
   angle none of the tiled layers use, which is what stops the sky reading as a
   flat grid of dots. */
[data-backdrop='starfield'] .sf-backdrop-band {
  position: absolute;
  top: -30%;
  right: -40%;
  bottom: -30%;
  left: -40%;
  transform: rotate(-19deg);
  background:
    linear-gradient(
      to bottom,
      transparent 33%,
      rgba(150, 178, 255, 0.05) 41%,
      rgba(206, 216, 255, 0.11) 50%,
      rgba(150, 178, 255, 0.05) 59%,
      transparent 67%
    );
  will-change: transform, opacity;
  animation: sf-backdrop-band-shift 68s ease-in-out infinite alternate;
}

@keyframes sf-backdrop-band-shift {
  from { transform: rotate(-19deg) translate3d(-2%, 0, 0); opacity: 0.55; }
  to { transform: rotate(-19deg) translate3d(2%, 0, 0); opacity: 0.9; }
}

/* Nebula. Deep colour so the stars are not sitting on flat black, plus a dark
   bloom along the bottom so the storefront content stays readable over it. */
[data-backdrop='starfield'] .sf-backdrop-glow {
  background:
    radial-gradient(42% 34% at 16% 14%, rgba(var(--accent-rgb), 0.2), transparent 70%),
    radial-gradient(38% 32% at 82% 74%, rgba(167, 121, 255, 0.18), transparent 72%),
    radial-gradient(30% 26% at 62% 22%, rgba(64, 196, 255, 0.1), transparent 72%),
    radial-gradient(70% 55% at 50% 108%, rgba(8, 14, 34, 0.7), transparent 70%);
  animation: sf-backdrop-breathe 34s ease-in-out infinite;
}

/* Long gaps between passes: a shooting star is an event, not a texture. Each
   one stretches out of nothing, runs, and collapses — scaleX applies along the
   streak because the rotation is composed after it. */
.sf-shooting-star {
  --angle: 20deg;
  --travel-x: 128vw;
  --travel-y: 48vh;
  position: absolute;
  width: 190px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 35%,
    rgba(255, 255, 255, 0.7) 82%,
    #ffffff
  );
  opacity: 0;
  will-change: transform, opacity;
  /* Linear, and not negotiable. A CSS timing function is applied to every
     keyframe segment separately, so any easing here makes the streak brake into
     the stretch keyframe and take off again — it reads as the star stopping
     dead halfway across. A meteor travels at a constant speed anyway. */
  animation: sf-shooting-star 17s linear infinite;
}

/* The head. A static halo — no animated shadow, so it stays free. */
.sf-shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.85),
    0 0 18px 6px rgba(140, 190, 255, 0.45);
}

.sf-shooting-star-1 {
  top: 8%;
  left: -14%;
}

.sf-shooting-star-2 {
  --angle: 13deg;
  --travel-y: 34vh;
  top: 34%;
  left: -16%;
  animation-duration: 23s;
  animation-delay: -9s;
}

.sf-shooting-star-3 {
  --angle: 29deg;
  --travel-y: 62vh;
  width: 240px;
  top: 3%;
  left: -12%;
  animation-duration: 31s;
  animation-delay: -19s;
}

/* The pass runs from 0% to 8% and the element is parked and invisible for the
   rest of the cycle. Every position below sits exactly on the constant-speed
   line between start and finish — 1% of the cycle is one eighth of the run, so
   it is one eighth of the distance — which leaves the middle keyframes free to
   stretch and fade the streak without ever disturbing its speed. */
@keyframes sf-shooting-star {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--angle)) scaleX(0.3);
    opacity: 0;
  }
  1% {
    transform: translate3d(calc(var(--travel-x) * 0.125), calc(var(--travel-y) * 0.125), 0)
      rotate(var(--angle)) scaleX(0.6);
    opacity: 1;
  }
  3% {
    transform: translate3d(calc(var(--travel-x) * 0.375), calc(var(--travel-y) * 0.375), 0)
      rotate(var(--angle)) scaleX(1);
    opacity: 1;
  }
  8% {
    transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(var(--angle)) scaleX(0.65);
    opacity: 0;
  }
  100% {
    transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(var(--angle)) scaleX(0.65);
    opacity: 0;
  }
}

/* ------------------------------------------------------------- aurora --- */

[data-backdrop='aurora'] .sf-backdrop-glow,
[data-backdrop='aurora'] .sf-backdrop-motes-a {
  display: block;
}

/* Soft radial blobs rather than a blurred shape: a filter this size is the one
   thing that would actually cost frames. */
[data-backdrop='aurora'] .sf-backdrop-glow {
  background:
    radial-gradient(38% 30% at 24% 22%, rgba(var(--accent-rgb), 0.3), transparent 68%),
    radial-gradient(34% 32% at 78% 34%, rgba(93, 242, 156, 0.2), transparent 70%),
    radial-gradient(42% 34% at 56% 82%, rgba(167, 121, 255, 0.24), transparent 70%);
  animation: sf-backdrop-aurora 26s ease-in-out infinite alternate;
}

[data-backdrop='aurora'] .sf-backdrop-motes-a {
  --tile: 300px;
  --speed: 150s;
  opacity: 0.5;
  background-image:
    radial-gradient(1.2px 1.2px at 22% 34%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 68% 72%, rgba(255, 255, 255, 0.5), transparent 60%);
}

@keyframes sf-backdrop-aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

@keyframes sf-backdrop-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* ------------------------------------------------------------- embers --- */

[data-backdrop='embers'] .sf-backdrop-glow,
[data-backdrop='embers'] .sf-backdrop-motes-a,
[data-backdrop='embers'] .sf-backdrop-motes-b {
  display: block;
}

/* Same drifting layers, turned upward and recoloured into rising sparks. */
[data-backdrop='embers'] .sf-backdrop-motes {
  top: 0;
  bottom: calc(-1 * var(--tile));
  animation-name: sf-backdrop-drift-up;
}

[data-backdrop='embers'] .sf-backdrop-motes-a {
  --tile: 280px;
  --speed: 34s;
  background-image:
    radial-gradient(2px 2px at 16% 30%, rgba(255, 176, 76, 0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 58% 12%, rgba(255, 120, 60, 0.85), transparent 62%),
    radial-gradient(1.8px 1.8px at 82% 58%, rgba(255, 200, 110, 0.9), transparent 62%),
    radial-gradient(1.6px 1.6px at 38% 76%, rgba(255, 140, 70, 0.8), transparent 62%);
}

[data-backdrop='embers'] .sf-backdrop-motes-b {
  --tile: 420px;
  --speed: 21s;
  background-image:
    radial-gradient(2.2px 2.2px at 30% 22%, rgba(255, 210, 130, 0.95), transparent 64%),
    radial-gradient(2px 2px at 74% 64%, rgba(255, 150, 70, 0.85), transparent 64%);
  animation-name: sf-backdrop-drift-up, sf-backdrop-twinkle;
  animation-duration: var(--speed), 4s;
  animation-timing-function: linear, ease-in-out;
}

[data-backdrop='embers'] .sf-backdrop-glow {
  background:
    radial-gradient(62% 44% at 50% 100%, rgba(255, 122, 44, 0.34), transparent 70%),
    radial-gradient(44% 32% at 12% 92%, rgba(255, 78, 44, 0.22), transparent 70%);
  animation: sf-backdrop-breathe 18s ease-in-out infinite;
}

/* ---------------------------------------------------------- neon grid ---

   A horizon plane in the seller's own accent colour, so it reskins itself per
   store rather than being locked to one palette. The whole floor is a single
   rotated element: it travels exactly one cell along its local Y, which under
   the rotation reads as the grid running toward the viewer, and because a cell
   is indistinguishable from the next one the loop is seamless. A mask fades the
   far end out, which saves a second element covering the vanishing point. */

[data-backdrop='grid'] .sf-backdrop-glow,
[data-backdrop='grid'] .sf-backdrop-band,
[data-backdrop='grid'] .sf-backdrop-grid,
[data-backdrop='grid'] .sf-backdrop-motes-a {
  display: block;
}

.sf-backdrop-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 260px;
  perspective-origin: 50% 42%;
}

.sf-backdrop-grid-plane {
  --cell: 56px;
  position: absolute;
  top: 42%;
  right: -60%;
  bottom: -80%;
  left: -60%;
  transform-origin: 50% 0;
  transform: rotateX(74deg) translate3d(0, 0, 0);
  background-image:
    linear-gradient(to right, rgba(var(--accent-rgb), 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--accent-rgb), 0.55) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  /* Fades at both ends: the far one hides the vanishing point, the near one
     keeps the widest, brightest cells from competing with the product grid. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 58%, rgba(0, 0, 0, 0.22));
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 58%, rgba(0, 0, 0, 0.22));
  will-change: transform;
  animation: sf-backdrop-grid-scroll 3.2s linear infinite;
}

@keyframes sf-backdrop-grid-scroll {
  to { transform: rotateX(74deg) translate3d(0, var(--cell), 0); }
}

/* The horizon itself, sitting exactly where the plane starts. */
[data-backdrop='grid'] .sf-backdrop-band {
  position: absolute;
  top: 42%;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb), 0.85) 26%,
    #ffffff 50%,
    rgba(var(--accent-rgb), 0.85) 74%,
    transparent
  );
  box-shadow: 0 0 24px 4px rgba(var(--accent-rgb), 0.5);
  will-change: opacity;
  animation: sf-backdrop-pulse 9s ease-in-out infinite;
}

/* Sky above the horizon only — the layer is clipped short of it so no stars
   land on the floor. */
[data-backdrop='grid'] .sf-backdrop-motes-a {
  --tile: 320px;
  --speed: 220s;
  bottom: 58%;
  opacity: 0.5;
  background-image:
    radial-gradient(1.2px 1.2px at 14% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 37% 9%, rgba(206, 226, 255, 0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 31%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 79% 15%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 38%, rgba(214, 232, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 26% 44%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 52%, rgba(255, 255, 255, 0.6), transparent 60%);
}

/* Opacity only: scaling this one would drag the horizon glow off the line. */
[data-backdrop='grid'] .sf-backdrop-glow {
  background:
    radial-gradient(58% 22% at 50% 44%, rgba(var(--accent-rgb), 0.36), transparent 68%),
    radial-gradient(40% 32% at 22% 18%, rgba(167, 121, 255, 0.18), transparent 70%),
    radial-gradient(36% 30% at 80% 14%, rgba(64, 196, 255, 0.14), transparent 72%);
  animation: sf-backdrop-pulse 22s ease-in-out infinite;
}

@keyframes sf-backdrop-pulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

/* On paper the same layers read as dirt, so they drop to a hint. */
[data-theme='light'] .sf-backdrop {
  opacity: 0.42;
}

/* Phones drop the moving layers and keep the colour wash. */
@media (max-width: 768px) {
  .sf-backdrop-motes,
  .sf-shooting-star {
    display: none !important;
  }

  /* A starfield with no stars is just a dark page, so phones keep the two dense
     layers with the drift switched off. A tiled gradient that never moves costs
     one paint and nothing after it. */
  [data-backdrop='starfield'] .sf-backdrop-motes-a,
  [data-backdrop='starfield'] .sf-backdrop-motes-b {
    display: block !important;
    animation: none;
  }

  .sf-backdrop-band,
  .sf-backdrop-grid-plane {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-backdrop-glow,
  .sf-backdrop-band,
  .sf-backdrop-motes,
  .sf-backdrop-grid-plane {
    animation: none;
  }

  .sf-shooting-star {
    display: none !important;
  }
}