/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ============================================================
   CRIMSON THEME — custom overrides
   Loads after pro.css, so these rules win on the same selectors.
   ============================================================ */

:root {
  --nav-logo-size: 100px;
  --xp-dark: #1c1c1c;
  --xp-green-lo: #3f9c1e;
  --xp-green-hi: #8bf24a;
}
@media (min-width: 768px) { :root { --nav-logo-size: 165px; } }
@media (min-width: 992px) { :root { --nav-logo-size: 250px; } }

/* ---------- Navbar: center the logo, keep it sticky (theme already
   uses .sticky-top on <header>, which stays visible on scroll without
   the overlap issues of position: fixed) ---------- */
.navbar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: calc(var(--nav-logo-size) + 24px);
}

.navbar .navbar-brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 0;
  margin: 0;
}

.navbar > .container > .d-flex {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.navbar .navbar-collapse {
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: contents;
  }
  .navbar .navbar-collapse > .navbar-nav:first-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .navbar .navbar-collapse > .navbar-nav:last-child {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* Logo: 200x200 on desktop (scaling down on smaller screens) with a
   one-time load animation, then an infinite subtle "breathing" glow
   loop. Width/height are transitioned smoothly so the logo can shrink
   in place on scroll instead of just popping in/out (see the
   nav-scrolled compact state further down). */
.navbar .navbar-brand img {
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  max-height: none;
  max-width: none;
  object-fit: contain;
  transition: width .35s cubic-bezier(.4, 0, .2, 1), height .35s cubic-bezier(.4, 0, .2, 1);
  animation:
    crimson-logo-intro 900ms cubic-bezier(.2, .9, .25, 1) 120ms both,
    crimson-logo-loop 4.5s ease-in-out 1020ms infinite;
}

@keyframes crimson-logo-intro {
  0% {
    opacity: 0;
    transform: scale(.55) rotate(-8deg);
    filter: drop-shadow(0 0 0 rgba(226, 16, 48, 0));
  }
  55% {
    opacity: 1;
    transform: scale(1.08) rotate(2deg);
    filter: drop-shadow(0 0 24px rgba(226, 16, 48, .55));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(226, 16, 48, .3));
  }
}

/* Idle loop: picks up right where the intro leaves off (same scale,
   rotation and glow at 0%/100%) and gently breathes forever. */
@keyframes crimson-logo-loop {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(226, 16, 48, .3));
  }
  50% {
    transform: scale(1.07) rotate(2.5deg);
    filter: drop-shadow(0 0 22px rgba(226, 16, 48, .65));
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .navbar-brand img { animation: none; }
}

/* ---------- Navbar: Discord button ---------- */
.navbar .btn-discord-nav {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #5865F2;
  border: 1px solid #5865F2;
  color: #fff;
  font-weight: 600;
  padding-inline: .9rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.navbar .btn-discord-nav .icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.navbar .btn-discord-nav:hover {
  background: #4752C4;
  border-color: #4752C4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(88, 101, 242, .55);
}
/* Icon-only on narrow screens so it doesn't crowd the collapsed menu row */
@media (max-width: 480px) {
  .navbar .btn-discord-nav .discord-label { display: none; }
  .navbar .btn-discord-nav { padding-inline: .6rem; }
}

/* ---------- Hero: two CTAs side by side, wrap cleanly on mobile ---------- */
.hero .content .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.hero .content .hero-ctas a { margin-bottom: 0; }

.hero .btn-discord {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bs-gray-bg);
  border: 1px solid var(--cl-border);
  color: #fff;
}
.hero .btn-discord:hover {
  border-color: var(--cl-accent);
}

/* Slightly tighter hero type on small screens for better mobile balance */
@media (max-width: 480px) {
  .hero .content h1 { font-size: clamp(1.7rem, 8vw, 3rem); }
  .hero .container { padding: 2.5rem 1.25rem; }
}

/* ---------- Product cards: hover glow-swipe + 3D pop-out ---------- */
.products.row {
  perspective: 1200px;
}

.products .card {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s ease;
  will-change: transform;
}

.products .card:hover {
  transform: translateY(-10px) scale(1.035) rotateX(3deg) rotateY(-2deg);
  box-shadow:
    0 22px 40px -14px rgba(0, 0, 0, .55),
    0 0 0 1px var(--cl-border),
    0 0 26px 2px color-mix(in srgb, var(--cl-accent) 45%, transparent);
  z-index: 3;
}

/* Diagonal light sweep across the card on hover — fires once,
   then fully fades out (no static streak left behind) */
.products .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, .16) 48%,
    rgba(255, 255, 255, .35) 50%,
    rgba(255, 255, 255, .16) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 250% 250%;
  background-position: 140% 140%;
}

.products .card:hover::after {
  animation: crimson-card-sweep .9s cubic-bezier(.25, .7, .3, 1) 1;
}

@keyframes crimson-card-sweep {
  0% { opacity: 0; background-position: 140% 140%; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; background-position: -20% -20%; }
}

/* Keep badges + "view details" overlay above the light sweep
   (both are already position: absolute in the base stylesheet) */
.products .card .card-img-top .badges,
.products .card .card-img-top .overlay {
  z-index: 5;
}

/* Keep the image crisp within the 3D card (no transform on the
   container itself, so it doesn't trap the badges/overlay in a new
   stacking context below the sweep) */
.products .card:hover .card-img-top img {
  transform: scale(1.05);
}
.products .card .card-img-top img {
  transition: transform .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .products .card,
  .products .card .card-img-top img {
    transition: none;
  }
  .products .card:hover {
    transform: none;
  }
  .products .card::after {
    display: none;
  }
}

/* ---------- Product cards: price-per-unit note + Minecraft-style XP stock bar ---------- */
.products .card .info {
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
  gap: .4rem;
}

.products .card .price-note {
  font-size: .74rem;
  color: #9a9aa1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-wrap { display: flex; flex-direction: column; gap: 5px; }

.stock-label {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9a9aa1;
}

.xp-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #050505;
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

.xp-seg {
  flex: 1 1 0;
  min-width: 5px;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background: #0c150c;
  box-shadow: inset 0 0 0 1px #1e2b1e;
}

.xp-seg.filled {
  background:
    radial-gradient(circle at 32% 28%, #dcffb0 0%, #8bf24a 32%, #4fae1f 62%, #295e0d 100%);
  box-shadow: inset 0 0 0 1px #173d09, 0 0 3px rgba(139, 242, 74, .45);
}

.xp-bar.unlimited .xp-seg.filled {
  animation: crimson-xp-pulse 1.7s ease-in-out infinite;
}

@keyframes crimson-xp-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .xp-bar.unlimited .xp-seg.filled { animation: none; }
}

.stock-wrap.is-empty .xp-bar {
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

/* ---------- Product descriptions: bolder, clearer type ---------- */
.product-tabs .editor {
  /* Description size: a bit smaller than the product title (display-6 = 2.5rem max) */
  --desc-size: clamp(1.35rem, calc(1rem + 1.15vw), 2.1rem);
  font-weight: 600;
  font-size: var(--desc-size);
  line-height: 1.4;
  letter-spacing: .01em;
  color: #f2f2f3;
}
.product-tabs .editor p,
.product-tabs .editor li,
.product-tabs .editor span {
  font-weight: 600;
}
.product-tabs .editor h1,
.product-tabs .editor h2,
.product-tabs .editor h3,
.product-tabs .editor .e-heading-h1,
.product-tabs .editor .e-heading-h2,
.product-tabs .editor .e-heading-h3 {
  font-weight: 800;
}

/* Product card teaser text (the short blurb under the price) */
.products .card .price-note {
  font-weight: 600;
  color: #c7c7cc;
}

/* ---------- Back to top button, bottom-left, fades in on scroll ---------- */
.back-to-top {
  position: fixed;
  left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1050;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--cl-border);
  background: var(--bs-gray-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--cl-accent);
  border-color: var(--cl-accent);
}
@media (max-width: 480px) {
  .back-to-top { width: 42px; height: 42px; left: 12px; bottom: 12px; }
}


/* ---------- Homepage Discord community card ---------- */
.socials .section-title {
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
  text-align: center;
}
.socials .section-title h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: .75rem auto 0;
  background: var(--cl-accent);
  border-radius: 2px;
}

.discord-card {
  max-width: 450px;
  margin: 0 auto;
  padding: 2.25rem 2rem 2.5rem;
  text-align: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cl-border);
  border-radius: 20px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.discord-card:hover {
  border-color: rgba(88, 101, 242, .45);
  box-shadow: 0 18px 40px -20px rgba(88, 101, 242, .45);
  transform: translateY(-3px);
}

.discord-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(88, 101, 242, .18);
  color: #7983f5;
}
.discord-card-icon svg { width: 30px; height: 30px; }

.discord-card-title {
  margin: 0 0 .5rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
}
.discord-card-text {
  margin: 0 0 1.5rem;
  color: #8f9bb3;
  font-size: .95rem;
}

.btn-discord-card {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.4rem;
  background: #5865F2;
  border: 1px solid #5865F2;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-discord-card svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.btn-discord-card:hover {
  background: #4752C4;
  border-color: #4752C4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(88, 101, 242, .6);
}

@media (max-width: 480px) {
  .discord-card { padding: 1.75rem 1.25rem 2rem; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .discord-card, .btn-discord-card { transition: none; }
  .discord-card:hover { transform: none; }
}

/* ---------- How It Works: numbered steps, pop-out animation ---------- */
.how-it-works .section-title {
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2.25rem;
  text-align: center;
}
.how-it-works .section-title h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: .75rem auto 0;
  background: var(--cl-accent);
  border-radius: 2px;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  perspective: 1200px;
}

.hiw-step {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.5rem 1.8rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  outline: none;
  transition:
    transform .45s cubic-bezier(.2, .9, .25, 1.25),
    border-color .3s ease,
    background .3s ease,
    box-shadow .35s ease;
  will-change: transform;
}

.hiw-num {
  position: absolute;
  top: -.35rem;
  right: 1rem;
  font-size: 5.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cl-accent);
  opacity: .14;
  pointer-events: none;
  transform-origin: 70% 30%;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1.4);
}

.hiw-label {
  margin-bottom: .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9a9aa1;
  transition: color .3s ease;
}

.hiw-title {
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}

.hiw-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #8f9bb3;
}

.hiw-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: var(--cl-accent);
  transition: width .6s cubic-bezier(.2, .8, .25, 1);
}

/* "Popped" state: used by the 1-2-3 run, on hover, and on keyboard focus */
.hiw-step.is-active,
.hiw-step:hover,
.hiw-step:focus-visible {
  transform: translateY(-8px) scale(1.045);
  z-index: 2;
  border-color: var(--cl-accent);
  background: color-mix(in srgb, var(--cl-accent) 9%, rgba(255, 255, 255, .03));
  box-shadow:
    0 0 0 1px var(--cl-accent),
    0 22px 40px -16px rgba(0, 0, 0, .6),
    0 0 30px 2px color-mix(in srgb, var(--cl-accent) 40%, transparent);
}
.hiw-step.is-active .hiw-num,
.hiw-step:hover .hiw-num,
.hiw-step:focus-visible .hiw-num {
  opacity: .38;
  transform: scale(1.2) rotate(-5deg);
}
.hiw-step.is-active .hiw-label,
.hiw-step:hover .hiw-label,
.hiw-step:focus-visible .hiw-label {
  color: var(--cl-accent);
}
.hiw-step.is-active .hiw-bar,
.hiw-step:hover .hiw-bar,
.hiw-step:focus-visible .hiw-bar {
  width: 38%;
}

/* Entrance: cards pop in one after another (only when JS is running) */
.hiw-js:not(.is-visible) .hiw-step { opacity: 0; }
.hiw-js.is-visible .hiw-step {
  animation: hiw-pop-in .65s cubic-bezier(.2, .9, .25, 1.25) backwards;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes hiw-pop-in {
  0%   { opacity: 0; transform: translateY(28px) scale(.86); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
  .hiw-num { font-size: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-step, .hiw-num, .hiw-bar { transition: none; }
  .hiw-step:hover, .hiw-step:focus-visible { transform: none; }
}

/* ---------- Navbar: title under the centered logo (desktop only) ---------- */
.navbar .navbar-title { display: none; }

@media (min-width: 992px) {
  .navbar .container { row-gap: 0; }
  .navbar .navbar-title {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    padding: .1rem 0 .85rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.1;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--cl-accent);
    text-shadow: 0 0 18px rgba(var(--cl-accent-rgb), .45);
    user-select: none;
  }
}

/* ---------- Navbar: compact state once the page is scrolled.
   The big logo is only for the top of the page; past the scroll
   threshold it smoothly shrinks down to a small mark instead of
   disappearing, so the sticky bar stays compact while browsing but
   the brand mark never fully vanishes. This header wraps every page
   (see layouts/master.njk), so it applies on the homepage too, not
   just inner pages. The old under-logo title text is hidden once
   compact — .navbar-title's own d-none/d-lg-block classes are
   !important, so this needs !important + higher specificity to win. ---------- */
html {
  /* The compact/expanded header height swap below resizes a sticky element
     above the fold. Left alone, the browser's scroll anchoring "corrects"
     the scroll position to compensate for that resize, which yanks the
     page back and makes nav-scrolled flicker on/off right at the threshold.
     (Scoping this to just the header isn't enough — anchoring reacts based
     on whichever node it picks as the anchor elsewhere on the page, not
     based on what resized, so it has to be disabled at the document level.) */
  overflow-anchor: none;
}

.navbar .container {
  transition: min-height .35s cubic-bezier(.4, 0, .2, 1);
}

header.nav-scrolled .navbar .container {
  min-height: 60px;
}

/* Shrink in place rather than hide — width/height transition lives on
   the base .navbar .navbar-brand img rule above so it animates smoothly
   both shrinking down and growing back on the way up. */
header.nav-scrolled .navbar .navbar-brand img {
  width: 42px;
  height: 42px;
}

header.nav-scrolled .navbar .navbar-title {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .navbar .container { transition: none; }
}


/* ---------- Product cards: "View Details" button ---------- */
/* Layer order inside a card (bottom -> top):
   image (auto) < light sweep (1) < badges + overlay (5) < button (6) */
.products .card::after { z-index: 1; }

.products .card .card-img-top .overlay .btn {
  position: relative;
  z-index: 6;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: .55rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Spinning glow ring, only visible while hovering the button */
@property --vd-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.products .card .card-img-top .overlay .btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--vd-angle),
    transparent 0deg,
    transparent 150deg,
    var(--cl-accent) 230deg,
    #ffd9df 300deg,
    var(--cl-accent) 340deg,
    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 exclude, linear-gradient(#000 0 0);
  transition: opacity .2s ease;
}

.products .card .card-img-top .overlay .btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cl-accent) 70%, transparent),
    0 0 16px 1px color-mix(in srgb, var(--cl-accent) 60%, transparent);
  animation: vd-glow 1.4s ease-in-out infinite;
}
.products .card .card-img-top .overlay .btn:hover::before {
  opacity: 1;
  animation: vd-spin 1.6s linear infinite;
}

@keyframes vd-spin { to { --vd-angle: 360deg; } }
@keyframes vd-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--cl-accent) 70%, transparent),
      0 0 12px 0 color-mix(in srgb, var(--cl-accent) 50%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--cl-accent),
      0 0 26px 4px color-mix(in srgb, var(--cl-accent) 70%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .products .card .card-img-top .overlay .btn:hover,
  .products .card .card-img-top .overlay .btn:hover::before { animation: none; }
  .products .card .card-img-top .overlay .btn:hover::before { opacity: 1; }
}

/* ---------- Live deliveries ticker ---------- */
.live-orders {
  --lo-green: #4ade80;
  --lo-orange: #fb923c;
  padding: 0;
  border-top: 1px solid var(--cl-border);
  border-bottom: 1px solid var(--cl-border);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}

.lo-bar {
  display: flex;
  align-items: center;
  min-height: 52px;
}

.lo-label {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .5rem 0 1rem;
  padding: .35rem .85rem;
  border: 1px solid rgba(74, 222, 128, .45);
  border-radius: 999px;
  background: rgba(74, 222, 128, .1);
  color: var(--lo-green);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lo-dot,
.lo-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lo-green);
}
.lo-dot { animation: lo-pulse 1.6s ease-in-out infinite; }
@keyframes lo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.lo-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.lo-track {
  display: flex;
  width: max-content;
  animation: lo-scroll var(--lo-duration, 45s) linear infinite;
  will-change: transform;
}
.lo-viewport:hover .lo-track { animation-play-state: paused; }

.lo-group { display: flex; flex-shrink: 0; }

@keyframes lo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.lo-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.5rem;
  font-size: .85rem;
  white-space: nowrap;
}
.lo-name { color: #fff; font-weight: 700; }
.lo-muted { color: #8f9bb3; }
.lo-value { font-weight: 700; }
.lo-green { color: var(--lo-green); }
.lo-orange { color: var(--lo-orange); }
.lo-time { color: var(--lo-green); font-weight: 600; }

@media (max-width: 575px) {
  .lo-label { margin-left: .6rem; padding: .3rem .65rem; font-size: .62rem; letter-spacing: .1em; }
  .lo-item { font-size: .8rem; padding: 0 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-track { animation: none; }
  .lo-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .lo-group[aria-hidden="true"] { display: none; }
  .lo-dot { animation: none; }
}


/* ---------- Product description: large text, just under the title size ---------- */
/* The base theme hard-codes size + line-height on these, so override them directly */
.product-tabs .editor .e-paragraph,
.product-tabs .editor .e-listitem,
.product-tabs .editor .e-nested-listitem,
.product-tabs .editor p,
.product-tabs .editor li {
  font-size: var(--desc-size);
  line-height: 1.4;
}
.product-tabs .editor .e-listitem { margin-block: .35rem; }
.product-tabs .editor .e-heading-h1 { font-size: calc(var(--desc-size) * 1.1);  line-height: 1.25; }
.product-tabs .editor .e-heading-h2 { font-size: calc(var(--desc-size) * 1.05); line-height: 1.25; }
.product-tabs .editor .e-heading-h3 { font-size: var(--desc-size);              line-height: 1.3; }


/* ===== Discord-only sign-in modal ===== */
#customer-login-modal .modal-dialog {
  max-width: 420px;
}
#customer-login-modal .mc-login {
  position: relative;
  background: #0d1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
#customer-login-modal .mc-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: 0.5;
  filter: invert(1);
}
#customer-login-modal .mc-login-close:hover { opacity: 1; }
#customer-login-modal .mc-login-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e6e9f5;
}
#customer-login-modal .mc-login-sub {
  margin: 0 0 22px;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #7f8bb0;
}
#customer-login-modal .mc-login-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: #5865f2;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
#customer-login-modal .mc-login-discord:hover:not(:disabled) { background: #4752c4; }
#customer-login-modal .mc-login-discord:active:not(:disabled) { transform: translateY(1px); }
#customer-login-modal .mc-login-discord:disabled { opacity: 0.7; cursor: wait; }
#customer-login-modal .mc-login-error {
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: #f87171;
  text-align: center;
}
#customer-login-modal .mc-login-note {
  margin-top: 20px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  text-align: center;
  font-size: 0.95rem;
  color: #8f9bbd;
}
#customer-login-modal .mc-login-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6e9f5;
  border-radius: 10px;
  padding: 12px 14px;
}