/* ==========================================================================
   OCULAR CHEATS — premium storefront theme
   Single source of truth. Built on top of pro.css (platform base).

   01. Design tokens          09. Group modal          17. Login modal
   02. Base & typography      10. Product page         18. Footer & dock
   03. Layout primitives      11. Purchase form        19. Forms & misc
   04. Ambient background     12. Cart                 20. Responsive
   05. Buttons                13. Reviews              21. Motion
   06. Navbar                 14. Showcase / gallery
   07. Hero                   15. FAQ / status / blog
   08. Product cards          16. Customer area
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand */
  --sa-accent: var(--cl-accent, #00e5ff);
  --sa-accent-rgb: var(--cl-accent-rgb, 0, 229, 255);
  --sa-accent-soft: color-mix(in srgb, var(--sa-accent) 70%, #ffffff);
  --sa-accent-deep: color-mix(in srgb, var(--sa-accent) 58%, #0b57d0);
  --sa-accent-ink: #04141d;

  /* Surfaces */
  --sa-bg: var(--cl-background-primary, #0d1117);
  --sa-surface-1: rgba(255, 255, 255, 0.028);
  --sa-surface-2: rgba(255, 255, 255, 0.05);
  --sa-surface-3: rgba(255, 255, 255, 0.075);

  /* Lines */
  --sa-line: rgba(255, 255, 255, 0.07);
  --sa-line-strong: rgba(255, 255, 255, 0.13);
  --sa-line-accent: rgba(var(--sa-accent-rgb), 0.35);

  /* Text */
  --sa-text: #e9eff7;
  --sa-text-2: rgba(233, 239, 247, 0.66);
  --sa-text-3: rgba(233, 239, 247, 0.42);

  /* Status */
  --sa-ok: #3ddc97;
  --sa-warn: #ffc65c;
  --sa-bad: #ff6b6b;

  /* Radii */
  --sa-r-sm: 10px;
  --sa-r-md: 14px;
  --sa-r-lg: 18px;
  --sa-r-xl: 24px;
  --sa-r-pill: 999px;

  /* Elevation */
  --sa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --sa-shadow-md: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --sa-shadow-lg: 0 32px 70px -28px rgba(0, 0, 0, 0.8);

  /* Metrics */
  --sa-nav-h: 68px;
  --sa-gutter: clamp(20px, 4.2vw, 46px);
  --sa-maxw: 1290px;
  /* Applied to both sides of a section, so adjacent sections sit ~2x apart. */
  --sa-section-y: clamp(42px, 4.6vw, 68px);

  /* Motion */
  --sa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sa-fast: 0.18s var(--sa-ease);
  --sa-slow: 0.42s var(--sa-ease);
}

/* ==========================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sa-nav-h) + 20px);
}

body {
  background-color: var(--sa-bg);
  color: var(--sa-text);
  font-family: var(--bs-font-sans-serif);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sa-text);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

p {
  color: var(--sa-text-2);
}

a {
  color: var(--sa-accent);
  text-decoration: none;
  transition: color var(--sa-fast);
}

a:hover {
  color: var(--sa-accent-soft);
}

small,
.text-muted {
  color: var(--sa-text-3) !important;
}

::selection {
  background: rgba(var(--sa-accent-rgb), 0.28);
  color: #fff;
}

/* Keyboard focus only, and never mutate the element's own shape — forcing a
   radius here drew a hard rectangle around cards on click ("hitboxes"). */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgba(var(--sa-accent-rgb), 0.75);
  outline-offset: 3px;
}

/* Bootstrap re-adds a focus ring via box-shadow on buttons; suppress it for
   pointer interaction so clicking never leaves a visible frame behind. */
.btn:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.sa-pcard:focus:not(:focus-visible),
.sa-gCard:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
  background-clip: content-box;
}

/* ==========================================================================
   03. LAYOUT PRIMITIVES
   ========================================================================== */

.sa-container,
.container,
.container-fluid {
  width: 100%;
  max-width: calc(var(--sa-maxw) + var(--sa-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
}

/* A container nested inside another must not add a second gutter. */
.container .container,
.container .sa-container,
.sa-container .container,
.sa-container .sa-container {
  max-width: none;
  padding-inline: 0;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.flex-wrapper > div:first-child {
  flex: 1 0 auto;
}

/* The platform reserves 74px for a fixed navbar; ours is sticky and already
   occupies flow space, so that offset only produced dead air at the top. */
.py-5-nav {
  padding-top: clamp(30px, 3.6vw, 48px);
  padding-bottom: var(--sa-section-y);
}

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

/* Section headings */
.section-title {
  margin-bottom: 10px;
  text-align: left;
}

.section-title h1,
.section-title h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.038em;
  margin: 0;
}

.section-title p,
.section-subtitle p {
  color: var(--sa-text-2);
  font-size: 15px;
  margin: 0;
  max-width: 62ch;
}

.section-subtitle {
  margin-bottom: 30px;
  text-align: left;
}

.section-title + .row,
.section-subtitle + .row {
  margin-top: 32px;
}

/* Page header */
.sa-pageHeader {
  margin-bottom: 34px;
}

.sa-pageHeader__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-accent);
  background: rgba(var(--sa-accent-rgb), 0.08);
  color: var(--sa-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-pageHeader h1 {
  font-size: clamp(32px, 4vw, 50px);
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}

.sa-pageHeader p {
  color: var(--sa-text-2);
  font-size: 15px;
  max-width: 60ch;
  margin: 0;
}

/* ==========================================================================
   04. AMBIENT BACKGROUND
   One fixed, calm ambience. The old mouse-chasing blobs are retired.
   ========================================================================== */

:root {
  /* Updated by script.js with an eased pointer position. */
  --sa-mx: 70%;
  --sa-my: 22%;
}

/* Static ambience + a soft glow that eases toward the pointer. Painted on a
   fixed, full-viewport layer, so it can never be clipped into a visible edge. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      620px 620px at var(--sa-mx) var(--sa-my),
      rgba(var(--sa-accent-rgb), 0.085),
      rgba(var(--sa-accent-rgb), 0.03) 38%,
      transparent 64%
    ),
    radial-gradient(1000px 760px at 74% 12%, rgba(var(--sa-accent-rgb), 0.13), transparent 66%),
    radial-gradient(820px 620px at 92% 44%, rgba(70, 135, 255, 0.1), transparent 68%),
    radial-gradient(760px 540px at 4% 0%, rgba(80, 130, 255, 0.05), transparent 60%),
    radial-gradient(1100px 820px at 50% 108%, rgba(var(--sa-accent-rgb), 0.035), transparent 66%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.021) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1250px 820px at 50% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(1250px 820px at 50% 0%, #000 0%, transparent 76%);
}

.oc-reactive-bg,
.sa-hero__reactive,
.sa-heroSimple__reactive {
  display: none !important;
}

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.sa-btn {
  --btn-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--sa-r-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--sa-fast),
    box-shadow var(--sa-slow),
    border-color var(--sa-fast),
    background-color var(--sa-fast),
    color var(--sa-fast);
}

.sa-btn--lg {
  --btn-h: 50px;
  padding: 0 26px;
  font-size: 15px;
}

.sa-btn--sm {
  --btn-h: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--sa-r-sm);
}

.sa-btn__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
}

.sa-btn__ico svg {
  width: 100%;
  height: 100%;
}

/* Primary */
.sa-btn--primary,
.sa-btn--hero {
  color: var(--sa-accent-ink);
  background-color: var(--sa-accent);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sa-accent) 80%, #ffffff) 0%,
    var(--sa-accent) 46%,
    var(--sa-accent-deep) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 6px 16px -8px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.sa-btn--primary:hover,
.sa-btn--hero:hover {
  color: var(--sa-accent-ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 10px 22px -10px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Ghost / secondary */
.sa-btn--ghost,
.sa-btn--secondary,
.sa-btn--heroAlt {
  color: var(--sa-text);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border-color: var(--sa-line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 22px -12px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sa-btn--ghost:hover,
.sa-btn--secondary:hover,
.sa-btn--heroAlt:hover {
  color: #fff;
  border-color: var(--sa-line-accent);
  transform: translateY(-1px);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
}

.sa-btn:active {
  transform: translateY(0);
}

.sa-btn[disabled],
.sa-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Bootstrap button harmonisation */
.btn {
  --bs-btn-border-radius: var(--sa-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--sa-r-md);
  font-size: 14px;
  font-weight: 600;
  transition:
    transform var(--sa-fast),
    box-shadow var(--sa-slow),
    background-color var(--sa-fast),
    border-color var(--sa-fast),
    color var(--sa-fast);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-primary,
.btn-primary:focus {
  color: var(--sa-accent-ink);
  border-color: transparent;
  background-color: var(--sa-accent);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sa-accent) 80%, #ffffff) 0%,
    var(--sa-accent) 46%,
    var(--sa-accent-deep) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 16px -8px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover:not(:disabled) {
  color: var(--sa-accent-ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 22px -10px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.btn-outline-primary,
.btn-outline-primary:focus {
  color: var(--sa-text);
  border-color: var(--sa-line-strong);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-outline-primary:hover:not(:disabled) {
  color: #fff;
  transform: translateY(-1px);
  border-color: var(--sa-line-accent);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   06. ANNOUNCEMENT & NAVBAR
   ========================================================================== */

header.sticky-top {
  z-index: 1035;
}

.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border: none;
  border-bottom: 1px solid var(--sa-line);
  background: linear-gradient(90deg, rgba(var(--sa-accent-rgb), 0.16), rgba(var(--sa-accent-rgb), 0.06));
  color: var(--sa-text);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.announcement a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sa-accent);
  font-weight: 600;
}

.announcement a svg {
  width: 13px;
  height: 13px;
}

.sa-nav {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 15, 22, 0.84), rgba(10, 15, 22, 0.68));
  border-bottom: 1px solid var(--sa-line);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background var(--sa-slow), border-color var(--sa-slow), box-shadow var(--sa-slow);
}

.sa-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.95), rgba(8, 12, 18, 0.88));
  border-bottom-color: var(--sa-line-strong);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

.sa-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--sa-nav-h);
}

.sa-nav__left {
  justify-self: start;
  min-width: 0;
}

.sa-nav__center {
  justify-self: center;
}

.sa-nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--sa-text);
  min-width: 0;
}

.sa-nav__brand:hover {
  color: #fff;
}

.sa-nav__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}

.sa-nav__brandText {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-pill);
  background: rgba(255, 255, 255, 0.032);
}

.sa-nav__links a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--sa-r-pill);
  color: var(--sa-text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: color var(--sa-fast), background var(--sa-fast);
}

.sa-nav__links a:hover,
.sa-nav__links a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.sa-nav__account,
.sa-nav__cartbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--sa-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--sa-fast), background var(--sa-fast), transform var(--sa-fast), color var(--sa-fast);
}

.sa-nav__account:hover,
.sa-nav__cartbtn:hover {
  color: #fff;
  border-color: var(--sa-line-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  transform: translateY(-1px);
}

.sa-nav__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--sa-text-2);
  transition: color var(--sa-fast);
}

.sa-nav__icon svg {
  width: 100%;
  height: 100%;
}

.sa-nav__account:hover .sa-nav__icon,
.sa-nav__cartbtn:hover .sa-nav__icon {
  color: var(--sa-accent);
}

.sa-nav__count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-accent);
  color: var(--sa-accent-ink);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--sa-bg);
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.sa-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

/* No glow layer inside the hero at all.
   Any gradient painted on an element inside an overflow:hidden section gets
   sliced at that section's edge wherever it still has opacity, and that slice
   is the hard rectangle that kept appearing behind the render. The hero glow
   therefore lives on body::before, which is fixed and full-viewport, so its
   own edges are always off-screen and can never form a seam. */
.sa-hero__ambience {
  display: none;
}

.sa-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  min-height: clamp(460px, 62vh, 640px);
}

.sa-hero__content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

/* Eyebrow */
.sa-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 14px;
  margin-bottom: 22px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--sa-text-2);
  font-size: 12.5px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sa-hero__eyebrowDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sa-ok);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.18);
  animation: sa-pulse 2.4s var(--sa-ease) infinite;
}

@keyframes sa-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.04); }
}

/* Title — real text, revealed with a CSS mask wipe (no JS typing). */
.sa-hero__title {
  margin: 0 0 18px;
  font-size: clamp(42px, 5.1vw, 74px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.052em;
}

.sa-hero__line {
  display: block;
  animation: sa-lineIn 0.85s var(--sa-ease) both;
}

.sa-hero__line:nth-child(1) {
  animation-delay: 0.05s;
}

.sa-hero__line:nth-child(2) {
  animation-delay: 0.18s;
}

/* Typewriter: once script.js takes over it drops the entrance animation and
   reserves the final height, so nothing reflows while the text is typed. */
.sa-hero__title--type.is-typing .sa-hero__line,
.sa-hero__title--type.is-typed .sa-hero__line {
  animation: none;
  opacity: 1;
  transform: none;
}

.sa-hero__line[data-typewriter] {
  min-height: 1em;
}

.sa-hero__line.is-caret::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 0.06em;
  border-radius: 2px;
  background: var(--sa-accent);
  vertical-align: baseline;
  translate: 0 0.06em;
  animation: sa-caret 0.9s steps(1) infinite;
}

@keyframes sa-caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.sa-hero__line--accent {
  background: linear-gradient(100deg, var(--sa-accent) 0%, color-mix(in srgb, var(--sa-accent) 45%, #4d8bff) 58%, #5b93ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes sa-lineIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 6%);
    mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 6%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-mask-image: linear-gradient(90deg, #000 100%, #000 100%, transparent 106%);
    mask-image: linear-gradient(90deg, #000 100%, #000 100%, transparent 106%);
  }
}

.sa-hero__subtitle {
  max-width: 44ch;
  margin: 0 0 28px;
  color: var(--sa-text-2);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.68;
  animation: sa-fadeUp 0.7s var(--sa-ease) 0.3s both;
}

.sa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: sa-fadeUp 0.7s var(--sa-ease) 0.38s both;
}

.sa-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  animation: sa-fadeUp 0.7s var(--sa-ease) 0.46s both;
}

.sa-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sa-text-3);
  font-size: 13px;
  font-weight: 500;
}

.sa-hero__trustIco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(var(--sa-accent-rgb), 0.11);
  color: var(--sa-accent);
}

.sa-hero__trustIco svg {
  width: 11px;
  height: 11px;
}

@keyframes sa-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Visual ---------------------------------------------------------------
   The render is a cut-out with hard edges on its right and bottom. We let
   it bleed past the container and fade the bottom, so no seam is visible. */
.sa-hero__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  min-height: clamp(320px, 40vw, 560px);
  /* Full-bleed to the right viewport edge: pull back the container gutter plus
     whatever margin the max-width leaves on wide screens. Without this the
     render stops short and its cropped edge reads as a hard border. */
  margin-right: calc(
    var(--sa-gutter) * -1 -
    max(0px, (100vw - var(--sa-maxw) - var(--sa-gutter) * 2) / 2)
  );
  pointer-events: none;
}

/* Kept in the markup for backwards compatibility; the glow itself now lives on
   .sa-hero__ambience, where it cannot be clipped. */
.sa-hero__glow {
  display: none;
}

.sa-hero__picture {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.sa-hero__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  /* Fades the render's cropped bottom edge into the page. No drop-shadow: on a
     cut-out this large it only muddied the silhouette. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 99%);
  animation: sa-heroIn 1.1s var(--sa-ease) 0.12s both;
}

@keyframes sa-heroIn {
  from { opacity: 0; transform: translate3d(22px, 10px, 0) scale(1.02); }
  to { opacity: 1; transform: none; }
}

/* Safety net: the platform can serve a cached page from a previous revision.
   Those builds injected decorative layers this design no longer uses, so they
   are neutralised rather than left to paint over the current hero. */
.sa-heroSimple__bg,
.sa-heroSimple__glow {
  display: none !important;
}

/* ==========================================================================
   08. PRODUCT CARDS & GRID
   ========================================================================== */

.sa-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 22px;
  margin: 0;
}

.sa-products-grid > * {
  width: auto !important;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
}

.sa-prod-col {
  display: flex;
}

.sa-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
    var(--sa-bg);
  box-shadow: var(--sa-shadow-md);
  color: var(--sa-text);
  transition:
    transform var(--sa-slow),
    border-color var(--sa-slow),
    box-shadow var(--sa-slow);
}

.sa-pcard:hover {
  color: var(--sa-text);
  transform: translateY(-4px);
  border-color: var(--sa-line-accent);
  box-shadow:
    var(--sa-shadow-lg),
    0 0 0 1px rgba(var(--sa-accent-rgb), 0.12),
    0 20px 60px -30px rgba(var(--sa-accent-rgb), 0.22);
}

/* Media */
.sa-pcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(140deg, #0e1a27, #0a1119);
  border-bottom: 1px solid var(--sa-line);
}

.sa-pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sa-ease);
}

.sa-pcard:hover .sa-pcard__media img {
  transform: scale(1.055);
}

.sa-pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 9, 14, 0.12) 0%, transparent 42%, rgba(5, 9, 14, 0.62) 100%);
}

.sa-pcard__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.sa-pcard__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.13) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--sa-ease);
}

.sa-pcard:hover .sa-pcard__shine {
  transform: translateX(120%);
}

/* Stock pill */
.sa-pcStock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-strong);
  background: rgba(8, 12, 18, 0.72);
  color: var(--sa-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sa-pcStock .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-ok);
  flex: none;
}

.sa-pcStock.is-in .dot { background: var(--sa-ok); box-shadow: 0 0 8px rgba(61, 220, 151, 0.7); }
.sa-pcStock.is-low .dot { background: var(--sa-warn); box-shadow: 0 0 8px rgba(255, 198, 92, 0.7); }
.sa-pcStock.is-out .dot { background: var(--sa-bad); box-shadow: 0 0 8px rgba(255, 107, 107, 0.7); }
.sa-pcStock.is-out { color: var(--sa-text-2); }

/* Badges */
.sa-pcard__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 120px);
}

.sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--sa-r-pill);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.8);
}

.sa-badge i {
  font-size: 10px;
}

/* Body */
.sa-pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  padding: 18px;
}

.sa-pcard__infoBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sa-pcard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--sa-accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sa-pcard__slash {
  color: var(--sa-text-3);
  font-size: 13px;
  font-weight: 500;
}

.sa-pcard__title {
  margin: 0;
  color: var(--sa-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.3;
}

.sa-pcard__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.sa-feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: rgba(255, 255, 255, 0.032);
  color: var(--sa-text-3);
  font-size: 11.5px;
  font-weight: 500;
}

.sa-feat__ico {
  display: inline-flex;
  width: 10px;
  height: 10px;
  color: var(--sa-accent);
}

.sa-feat__ico svg {
  width: 100%;
  height: 100%;
}

/* Card CTA */
.sa-pcard__cta {
  margin-top: auto;
}

.sa-buyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  border-radius: var(--sa-r-md);
  border: 1px solid var(--sa-line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  color: var(--sa-text);
  font-size: 13.5px;
  font-weight: 600;
  transition: background var(--sa-fast), border-color var(--sa-fast), color var(--sa-fast), box-shadow var(--sa-slow);
}

.sa-pcard:hover .sa-buyBtn {
  color: var(--sa-accent-ink);
  border-color: transparent;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sa-accent) 80%, #ffffff) 0%,
    var(--sa-accent) 46%,
    var(--sa-accent-deep) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 18px -10px rgba(0, 0, 0, 0.55);
}

.sa-buyBtn__ico {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.sa-buyBtn__ico svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   09. GROUP MODAL
   ========================================================================== */

.modal-backdrop.show {
  background: rgba(4, 7, 11, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
}

.sa-gmodal__panel,
.sa-loginModal__panel {
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    #0b1019;
  box-shadow: var(--sa-shadow-lg);
  overflow: hidden;
}

.sa-gmodal .modal-dialog {
  max-width: 760px;
}

.sa-gmodal__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-gmodal__heading {
  min-width: 0;
}

.sa-gmodal__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--sa-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-gmodal__close,
.sa-loginModal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sa-text-2);
  transition: color var(--sa-fast), border-color var(--sa-fast), background var(--sa-fast);
}

.sa-gmodal__close svg {
  width: 15px;
  height: 15px;
}

.sa-gmodal__close:hover,
.sa-loginModal__close:hover {
  color: #fff;
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.09);
}

.sa-gmodal__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.034em;
}

.sa-gmodal__body {
  padding: 22px 26px 26px;
  max-height: min(68vh, 620px);
  overflow-y: auto;
}

/* Options are shown as cards rather than list rows: it matches the storefront
   grid and stops a small group from looking like an empty menu. */
.sa-gGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
}

.sa-gCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--sa-text);
  transition: border-color var(--sa-fast), background var(--sa-fast), transform var(--sa-fast);
}

.sa-gCard:hover {
  color: var(--sa-text);
  transform: translateY(-3px);
  border-color: rgba(var(--sa-accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.055);
}

.sa-gCard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a0f16;
  border-bottom: 1px solid var(--sa-line);
}

.sa-gCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sa-ease);
}

.sa-gCard:hover .sa-gCard__media img {
  transform: scale(1.05);
}

.sa-gCard__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sa-text-3);
}

.sa-gCard__ph svg {
  width: 30px;
  height: 30px;
}

.sa-gPill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-strong);
  background: rgba(8, 12, 18, 0.76);
  color: var(--sa-text);
  font-size: 11px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sa-gPill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sa-ok);
}

.sa-gPill.is-low .dot { background: var(--sa-warn); }
.sa-gPill.is-out .dot { background: var(--sa-bad); }

.sa-gCard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 14px;
}

.sa-gCard__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.sa-gCard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.sa-gCard__price {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-gCard__go {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sa-text-3);
  font-size: 12px;
  font-weight: 600;
  transition: color var(--sa-fast);
}

.sa-gCard__go svg {
  width: 14px;
  height: 14px;
}

.sa-gCard:hover .sa-gCard__go {
  color: var(--sa-accent);
}


/* ==========================================================================
   10. PRODUCT PAGE
   ========================================================================== */

.product-wrapper {
  padding-top: clamp(26px, 3.2vw, 44px);
  padding-bottom: var(--sa-section-y);
}

.sa-backLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--sa-text-3);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--sa-fast);
}

.sa-backLink:hover {
  color: var(--sa-text);
}

.sa-backLink__ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.sa-backLink__ico svg {
  width: 100%;
  height: 100%;
}

.sa-productPage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  align-items: start;
  gap: clamp(18px, 2.2vw, 30px);
}

.sa-productPage__main {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.sa-productPage__aside {
  min-width: 0;
}

/* Media shell — the artwork sits flush to the card edge. Padding plus an inner
   radius produced a second frame around the image, which read as a border. */
.sa-productMediaShell {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  background: var(--sa-bg);
  box-shadow: var(--sa-shadow-md);
}

.sa-productMediaShell .carousel-item img,
.sa-productMediaShell > img.card-img-top,
.sa-productMediaShell .product-img-placeholder {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
}

.sa-productMediaShell .product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #0a0f16;
  opacity: 0.45;
}

/* Thumbnails sit on their own strip under the artwork. */
.sa-productThumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: none;
  border-top: 1px solid var(--sa-line);
  background: rgba(255, 255, 255, 0.022);
}

.sa-productThumbs button {
  width: 68px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-sm);
  background: #0c1420;
  opacity: 0.55;
  transition: opacity var(--sa-fast), border-color var(--sa-fast), transform var(--sa-fast);
}

.sa-productThumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa-productThumbs button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.sa-productThumbs button.active {
  opacity: 1;
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 1px rgba(var(--sa-accent-rgb), 0.4);
}

/* Tabs */
.sa-productTabsWrap {
  padding: 20px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--sa-bg);
  box-shadow: var(--sa-shadow-md);
}

.sa-productTabsNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-pill);
  background: rgba(255, 255, 255, 0.028);
  width: fit-content;
  max-width: 100%;
}

.sa-tab {
  height: 34px;
  padding: 0 18px;
  border: none;
  border-radius: var(--sa-r-pill);
  background: transparent;
  color: var(--sa-text-3);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--sa-fast), background var(--sa-fast);
}

.sa-tab:hover {
  color: var(--sa-text);
}

.sa-tab.is-active {
  color: var(--sa-accent-ink);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sa-accent) 80%, #ffffff) 0%,
    var(--sa-accent) 48%,
    var(--sa-accent-deep) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Editor content */
.editor {
  color: var(--sa-text-2);
  font-size: 14.5px;
  line-height: 1.78;
}

.editor > *:first-child { margin-top: 0; }
.editor > *:last-child { margin-bottom: 0; }

.editor h1, .editor h2, .editor h3, .editor h4 {
  color: var(--sa-text);
  margin: 26px 0 12px;
  letter-spacing: -0.03em;
}

.editor h1 { font-size: 24px; }
.editor h2 { font-size: 20px; }
.editor h3 { font-size: 17px; }

.editor p {
  margin: 0 0 14px;
}

.editor ul,
.editor ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.editor li {
  margin-bottom: 7px;
}

.editor ul li::marker {
  color: var(--sa-accent);
}

.editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sa-r-md);
  border: 1px solid var(--sa-line);
}

.editor a {
  color: var(--sa-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.editor hr {
  border-color: var(--sa-line);
  opacity: 1;
  margin: 22px 0;
}

.editor code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--sa-accent);
  font-size: 0.9em;
}

/* Purchase card */
.sa-productPurchaseCard {
  position: sticky;
  top: calc(var(--sa-nav-h) + 16px);
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    var(--sa-bg);
  /* Inset top highlight reads as a lit glass edge rather than a flat panel. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--sa-shadow-lg);
}

.sa-productMediaShell,
.sa-productTabsWrap {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--sa-shadow-md);
}

.sa-productHeaderMini {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 25px;
  padding: 0 11px;
  margin-bottom: 14px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-accent);
  background: rgba(var(--sa-accent-rgb), 0.09);
  color: var(--sa-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sa-productPurchaseCard__title {
  margin: 0 0 12px;
  font-size: clamp(25px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.14;
}

.sa-statusInline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
}


/* Price row */
.sa-productPurchaseCard__priceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.032);
}

.sa-productPrice {
  color: #fff;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.sa-stockPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--sa-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sa-stockPill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-ok);
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.7);
}

.sa-stockPill.is-out {
  color: var(--sa-bad);
  border-color: rgba(255, 107, 107, 0.34);
  background: rgba(255, 107, 107, 0.09);
}

.sa-stockPill.is-out .sa-stockPill__dot {
  background: var(--sa-bad);
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.7);
}

.sa-stockPill.is-hold {
  color: var(--sa-warn);
  border-color: rgba(255, 198, 92, 0.34);
  background: rgba(255, 198, 92, 0.09);
}

/* Quick points */
/* A single quiet reassurance row reads better here than three boxed tiles. */
.sa-productQuickPoints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--sa-line);
}

.sa-productQuickPoints li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sa-text-3);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
}

.sa-productQuickPoints__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--sa-accent);
}

.sa-productQuickPoints__ico svg {
  width: 100%;
  height: 100%;
}

.sa-upsells {
  margin-top: clamp(48px, 6vw, 80px);
}

/* Legacy product page selectors from the platform base */
.product-wrapper .py-5-nav {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   11. PURCHASE FORM
   ========================================================================== */

.sa-productPurchaseCard .form-label,
.form-label {
  display: block;
  margin-bottom: 9px;
  color: var(--sa-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sa-productPurchaseCard form .row {
  margin: 0;
}

.sa-productPurchaseCard form .row > [class^="col"],
.sa-productPurchaseCard form .row > [class*=" col"] {
  padding: 0;
}

/* Variants */
.variants {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.variants .variant {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 13px;
  min-height: 52px;
  text-align: left;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-sm);
  background: rgba(255, 255, 255, 0.028);
  color: var(--sa-text);
  transition: border-color var(--sa-fast), background var(--sa-fast);
}

.variants .variant:hover:not(:disabled) {
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

/* Selection is shown with a crisp border and a faint wash — no glow ring. */
.variants .variant.active {
  border-color: rgba(var(--sa-accent-rgb), 0.55);
  background: rgba(var(--sa-accent-rgb), 0.055);
  box-shadow: none;
}

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

.variants .variant .name-stock {
  min-width: 0;
}

.variants .variant .name {
  margin: 0;
  color: var(--sa-text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.018em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variants .variant .description {
  margin: 2px 0 0;
  color: var(--sa-text-3) !important;
  font-size: 11px;
  line-height: 1.35;
}

.variants .variant .stock {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0;
  color: var(--sa-text-3) !important;
  font-size: 11px;
  font-weight: 500;
}

/* The infinity glyph before "In Stock" is noise at this size. */
.variants .variant .stock svg {
  display: none;
}


/* Prices stay near-white so the column reads as data, not as neon. pro.css
   wraps them in a padded tinted pill, which read as a stray box — cleared. */
.variants .variant .price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.variants .variant .price s {
  color: var(--sa-text-3);
  font-size: 12px;
  font-weight: 500;
}

/* pro.css floats this outside the row on a filled circle; keep it inline. */
.variants .variant .active-indicator {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex: none;
  background: none;
  border-radius: 0;
}

.variants .variant .active-indicator svg {
  width: 100%;
  height: 100%;
  color: var(--sa-accent);
}

/* Quantity */
.sa-productPurchaseCard .input-group,
.input-group.col-4 {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-pill);
  background: rgba(255, 255, 255, 0.04);
}

.sa-productPurchaseCard .input-group .btn,
.input-group .input-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 42px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--sa-text-2);
}

.sa-productPurchaseCard .input-group .btn:hover:not(:disabled) {
  transform: none;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.sa-productPurchaseCard .input-group .btn:disabled {
  opacity: 0.3;
  background: transparent;
}

.input-group-btn svg {
  width: 15px;
  height: 15px;
}

.sa-productPurchaseCard .input-group .form-control {
  width: 52px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.sa-productPurchaseCard .input-group .form-control:focus {
  box-shadow: none;
  border-color: var(--sa-line);
}

/* Addons */
.addon-item {
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color var(--sa-fast), background var(--sa-fast);
}

.addon-item:hover {
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.addon-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--sa-r-sm);
}

.btn-addon-add,
.btn-addon-remove {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: var(--sa-r-sm);
}

.btn-addon-add svg,
.btn-addon-remove svg {
  width: 14px;
  height: 14px;
}

/* Buy buttons */
/* The markup carries Bootstrap's .flex-column.flex-lg-row utilities, which are
   !important — so direction is left to them and only the finish is set here. */
.buy-buttons {
  gap: 10px !important;
  margin-top: 22px !important;
}

.buy-buttons .col {
  padding: 0;
  min-width: 0;
}

.buy-buttons .btn {
  width: 100%;
  min-height: 48px;
  font-size: 14.5px;
}

.buy-buttons .btn svg {
  width: 17px;
  height: 17px;
}

/* Stock indicator fallback (platform base) */
.stock-indicator {
  min-height: 0;
  padding: 4px 10px;
  border-radius: var(--sa-r-pill);
  font-size: 11.5px;
}

.stock-unlimited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stock-unlimited svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   12. CART
   ========================================================================== */

.sa-cartShell {
  padding-bottom: var(--sa-section-y);
}

/* The list is a bare container: each row carries its own border, so wrapping
   them in a bordered panel too produced visibly nested frames. */
.sa-cartPanel {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.sa-orderPanel {
  padding: 22px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--sa-bg);
  box-shadow: var(--sa-shadow-md);
}

.sa-orderPanel {
  position: sticky;
  top: calc(var(--sa-nav-h) + 16px);
  border-color: var(--sa-line-strong);
  box-shadow: var(--sa-shadow-lg);
}

.sa-orderPanel .form-label {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.sa-orderPanel .border-bottom {
  border-color: var(--sa-line) !important;
}

/* Empty / loading states sit in the same bordered surface as the rows. */
.sa-cartPanel > div > .p-4.border.rounded,
.sa-cartPanel .p-4.border.rounded.text-center {
  padding: 42px 22px !important;
  border-color: var(--sa-line) !important;
  border-radius: var(--sa-r-lg) !important;
  background: rgba(255, 255, 255, 0.025);
}

.sa-cartPanel .text-muted {
  font-size: 14px;
}

.cart-item-bg {
  align-items: center;
  border-color: var(--sa-line) !important;
  border-radius: var(--sa-r-lg) !important;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--sa-fast), background var(--sa-fast);
}

.cart-item-bg:hover {
  border-color: var(--sa-line-strong) !important;
  background: rgba(255, 255, 255, 0.048);
}

/* Keeps the controls close to the price instead of flung to the far edge. */
.cart-controls {
  gap: 24px !important;
  padding-right: 18px !important;
}

.cart-product-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--sa-r-sm);
  object-fit: cover;
}

.cart-image-container {
  max-width: 88px !important;
  width: 88px !important;
  flex: none;
}

.cart-product-link {
  font-size: 14.5px;
  letter-spacing: -0.02em;
}

.cart-product-link:hover {
  color: var(--sa-accent) !important;
}

.cart-variant-text {
  color: var(--sa-text-3);
  font-size: 12.5px;
}

.cart-discount-text {
  color: var(--sa-accent);
  font-size: 12px;
}

.cart-addon-badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sa-text-3);
  font-size: 10.5px;
  font-weight: 500;
}

/* One continuous pill. The segments stretch to the full height so a hover fill
   covers its whole area instead of painting a smaller box inside the pill. */
.cart-quantity-controls {
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-pill) !important;
  background: rgba(255, 255, 255, 0.04);
  gap: 0 !important;
}

.cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 38px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--sa-text-2);
  transition: background var(--sa-fast), color var(--sa-fast);
}

.cart-qty-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: none;
}

.cart-qty-btn:disabled {
  opacity: 0.3;
  background: transparent;
}

.cart-qty-icon {
  width: 14px;
  height: 14px;
}

.cart-qty-input {
  width: 38px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
}

.cart-qty-input:focus {
  box-shadow: none !important;
}

.cart-price-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cart-remove-desktop,
.cart-remove-mobile {
  min-height: 0;
  color: var(--sa-text-3) !important;
  transition: color var(--sa-fast);
}

.cart-remove-desktop:hover,
.cart-remove-mobile:hover {
  color: var(--sa-bad) !important;
}

/* ==========================================================================
   13. REVIEWS
   ========================================================================== */

.sa-reviewsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 34px;
}

.sa-reviewsHead__text {
  min-width: 0;
}

.sa-reviewsHead__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-accent);
  background: rgba(var(--sa-accent-rgb), 0.08);
  color: var(--sa-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-reviewsHead h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}

.sa-reviewsHead p {
  color: var(--sa-text-2);
  font-size: 15px;
  max-width: 56ch;
  margin: 0;
}

.sa-reviewsScore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 28px;
  flex: none;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  background: rgba(255, 255, 255, 0.032);
}

.sa-reviewsScore__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.sa-reviewsScore strong {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.sa-reviewsScore__outOf {
  color: var(--sa-text-3);
  font-size: 15px;
  font-weight: 500;
}

.sa-reviewsScore__stars {
  display: inline-flex;
  gap: 2px;
  color: #ffc94a;
}

.sa-reviewsScore__stars svg {
  width: 14px;
  height: 14px;
}

.sa-reviewsScore__meta {
  color: var(--sa-text-3);
  font-size: 12.5px;
}

.sa-reviewsFoot {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Marquee */
.feedbacks-marquee-block {
  overflow: hidden;
}

.feedback-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.feedback-marquee + .feedback-marquee {
  margin-top: 16px;
}

.feedback-marquee__track {
  display: flex;
  gap: 16px;
  /* The set is rendered twice; this trailing gap makes the halves equal so the
     -50% loop repeats without a visible jump. */
  padding-right: 16px;
  width: max-content;
  will-change: transform;
}

.feedback-marquee__track--left {
  animation: sa-marquee-left 56s linear infinite;
}

.feedback-marquee__track--right {
  animation: sa-marquee-right 62s linear infinite;
}

.feedback-marquee:hover .feedback-marquee__track,
.feedback-marquee.is-paused .feedback-marquee__track {
  animation-play-state: paused;
}

@keyframes sa-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes sa-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.feedback-marquee__item {
  width: 340px;
  flex: none;
  display: flex;
}

/* feedback-card.njk wraps each testimonial in a plain div; stretch it so every
   card in a row matches height regardless of whether it carries a reply. */
.feedback-marquee__item > div {
  display: flex;
  width: 100%;
}

/* Testimonial card */
.testimonial {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--sa-slow), background var(--sa-slow);
}

.testimonial:hover {
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

/* pro.css pads .header/.content/.footer individually, assuming the card itself
   has none. We pad the card, so those are cleared to avoid a doubled inset. */
.testimonial,
.testimonials .col-12 {
  margin-bottom: 0;
}

.testimonial .header,
.testimonial .content {
  padding: 0;
}

.testimonial .main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.testimonial .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* The decorative quote glyph competed with the rating for attention. */
.testimonial .header svg.quote {
  display: none;
}

.testimonial .stars {
  display: inline-flex;
  gap: 2px;
}

.testimonial .stars svg {
  width: 15px;
  height: 15px;
}

/* A verified marker reads as more trustworthy than a decorative quote mark. */
.testimonial .header::after {
  content: "Verified";
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  order: 2;
  border-radius: var(--sa-r-pill);
  background: rgba(61, 220, 151, 0.11);
  color: var(--sa-ok);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.testimonial .stars {
  order: 1;
}

.testimonial .content {
  flex: 1;
  color: var(--sa-text-2);
  font-size: 13.5px;
  line-height: 1.68;
}

.testimonial .content p {
  margin: 0;
}

.testimonial .content .message {
  color: var(--sa-text);
}

.testimonial .content .reply {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--sa-line-accent);
  border-radius: 0 var(--sa-r-sm) var(--sa-r-sm) 0;
  background: rgba(0, 0, 0, 0.22);
}

.testimonial .content .reply .text,
.testimonial .content .reply p {
  margin: 0;
  padding-left: 0;
  border-left: none;
  color: var(--sa-text-2);
  font-size: 12.5px;
}

.testimonial .content .reply .author {
  margin: 8px 0 0;
  color: var(--sa-text-3);
  font-size: 11.5px;
  text-align: left;
}

.testimonial .reply .author span {
  color: var(--sa-accent);
  font-weight: 600;
}

.testimonial .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 0 0;
  border: none;
  border-top: 1px solid var(--sa-line);
  background: none;
  color: var(--sa-text-3);
  font-size: 11.5px;
}

.testimonial .footer .items {
  min-width: 0;
  font-weight: 600;
  color: var(--sa-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testimonial .footer .date {
  flex: none;
  white-space: nowrap;
}

.testimonials.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 18px;
  margin: 0;
}

.testimonials.row > * {
  display: flex;
  width: auto !important;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
}

/* feedback-card.njk nests the card in a plain div; stretch it so every card in
   a row ends at the same height whether or not it carries a shop reply. */
.testimonials.row > * > div {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   14. SHOWCASE / GALLERY
   ========================================================================== */

.compare-showcase {
  position: relative;
  margin-top: 30px;
}

.compare-showcase__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  background: #080f18;
  box-shadow: var(--sa-shadow-lg);
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
}

.compare-showcase__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.compare-showcase__overlay {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}

.compare-showcase__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(var(--sa-accent-rgb), 0.9) 18%, rgba(var(--sa-accent-rgb), 0.9) 82%, transparent);
  box-shadow: 0 0 18px rgba(var(--sa-accent-rgb), 0.55);
  pointer-events: none;
}

.compare-showcase__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--sa-line-strong);
  background: rgba(10, 15, 22, 0.86);
  color: var(--sa-accent);
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.compare-showcase__handle svg {
  width: 20px;
  height: 20px;
}

.compare-showcase__badge {
  position: absolute;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 12px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line-strong);
  background: rgba(8, 12, 18, 0.72);
  color: var(--sa-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.compare-showcase__badge--left { left: 16px; }
.compare-showcase__badge--right { right: 16px; }

.compare-showcase__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* Gallery */
.image-gallery .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
}

.image-gallery .row > * {
  width: auto !important;
  max-width: none;
  padding: 0 !important;
}

.image-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-shadow-md);
}

/* ==========================================================================
   15. FAQ, STATUS, SOCIALS, BLOG
   ========================================================================== */

.faq .accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
  background: transparent;
  border: none;
}

.faq .accordion-item {
  overflow: hidden;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-md) !important;
  background: rgba(255, 255, 255, 0.028);
}

.accordion-button {
  padding: 16px 18px;
  background: transparent;
  color: var(--sa-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: var(--sa-accent);
  background: rgba(var(--sa-accent-rgb), 0.05);
}

.accordion-button::after {
  filter: invert(1) opacity(0.5);
}

.accordion-body {
  padding: 0 18px 18px;
  color: var(--sa-text-2);
  font-size: 14px;
  line-height: 1.72;
}

/* Status */
.status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 26px;
}

.status-group {
  grid-column: 1 / -1;
  margin-top: 12px;
}

.status-group h2 {
  font-size: 19px;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.028);
  color: var(--sa-text);
  transition: border-color var(--sa-fast), background var(--sa-fast), transform var(--sa-fast);
}

.status-card:hover {
  color: var(--sa-text);
  transform: translateY(-2px);
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.status-card h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
}

.status .indicator {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* Socials */
.socials .list .social {
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color var(--sa-fast), background var(--sa-fast), transform var(--sa-fast);
}

.socials .list .social:hover {
  transform: translateY(-2px);
  border-color: var(--sa-line-accent);
  background: rgba(255, 255, 255, 0.05);
}

/* Blog + any platform card that uses the generic Bootstrap card markup */
.blog-posts .card,
.blog-post-page .card {
  overflow: hidden;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  background: rgba(255, 255, 255, 0.03);
  color: var(--sa-text);
  transition: border-color var(--sa-fast), transform var(--sa-fast), background var(--sa-fast);
}

.blog-posts .card:hover {
  transform: translateY(-3px);
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.blog-posts .card .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.blog-posts .card .card-body {
  padding: 16px;
}

.blog-posts .card .card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.024em;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 36px;
}

.pagination .page-link {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-sm) !important;
  background: rgba(255, 255, 255, 0.028);
  color: var(--sa-text-2);
  font-size: 13px;
  font-weight: 600;
}

.pagination .page-item.active .page-link {
  border-color: transparent;
  background: var(--sa-accent);
  color: var(--sa-accent-ink);
}

.pagination .page-link:hover {
  border-color: var(--sa-line-strong);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ==========================================================================
   16. CUSTOMER AREA
   ========================================================================== */

.sa-customerPage .card,
.sa-customerPanel,
.sa-customerStat,
.sa-customerSidebar {
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-lg) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--sa-bg) !important;
  box-shadow: var(--sa-shadow-md);
}

.sa-customerSidebar {
  position: sticky;
  top: calc(var(--sa-nav-h) + 16px);
}

.sa-customerSidebar__head {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-customerSidebar__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--sa-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-customerSidebar__head h5 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: -0.026em;
}

.sa-customerSidebar__nav .nav-link {
  padding: 10px 14px;
  border-radius: var(--sa-r-sm);
  color: var(--sa-text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--sa-fast), color var(--sa-fast);
}

.sa-customerSidebar__nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sa-customerSidebar__nav .nav-link.active {
  background: rgba(var(--sa-accent-rgb), 0.13) !important;
  color: var(--sa-accent) !important;
}

.sa-pageHeader--compact {
  margin-bottom: 26px;
}

.sa-inlineLink {
  color: var(--sa-accent);
  font-weight: 600;
  transition: color var(--sa-fast);
}

.sa-inlineLink:hover {
  color: var(--sa-accent-soft);
}

.sa-mutedSep {
  margin: 0 7px;
  color: var(--sa-text-3);
}

.sa-customerStat__label {
  display: block;
  margin-bottom: 8px;
  color: var(--sa-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sa-customerStat h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.sa-customerStat__date {
  font-size: 17px !important;
}

.sa-customerPanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.sa-customerPanel__title {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.028em;
}

.sa-customerPanel--danger {
  border-color: rgba(255, 107, 107, 0.28) !important;
}

.sa-dangerBtn {
  border-color: rgba(255, 107, 107, 0.4);
  color: var(--sa-bad);
  background: rgba(255, 107, 107, 0.08);
}

.sa-dangerBtn:hover {
  color: #fff;
  background: rgba(255, 107, 107, 0.2);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sa-text-2);
  --bs-table-border-color: var(--sa-line);
  font-size: 13.5px;
}

.table > thead th {
  color: var(--sa-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--sa-line);
}

/* ==========================================================================
   17. LOGIN MODAL
   ========================================================================== */

.sa-loginModal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-loginModal__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--sa-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-loginModal__header .modal-title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.032em;
}

.sa-loginModal__body {
  padding: 24px;
}

.sa-loginModal__input,
.sa-loginModal__otp {
  min-height: 46px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.032);
  color: #fff;
  font-size: 14px;
}

/* One digit per box, so keep them square rather than letting them stretch. */
.sa-loginModal__otp {
  width: 100%;
  max-width: 56px;
  padding-inline: 0;
  font-size: 19px;
  font-weight: 700;
}

.sa-loginModal__body .d-flex.gap-2 {
  justify-content: center !important;
  gap: 8px !important;
}

.sa-loginModal__submit {
  min-height: 48px;
}

/* ==========================================================================
   18. FOOTER & DISCORD DOCK
   ========================================================================== */

.sa-footer {
  position: relative;
  margin-top: clamp(50px, 6vw, 90px);
  padding: clamp(40px, 5vw, 64px) 0 28px;
  border-top: 1px solid var(--sa-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 55%);
}

.sa-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 440px;
}

.sa-footer__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: none;
}

.sa-footer__name {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.026em;
}

.sa-footer__text {
  margin: 0;
  color: var(--sa-text-3);
  font-size: 13.5px;
  line-height: 1.66;
}

.sa-footer__discordBtn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  color: var(--sa-text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--sa-fast), background var(--sa-fast), transform var(--sa-fast), color var(--sa-fast);
}

.sa-footer__discordBtn:hover {
  color: #fff;
  transform: translateY(-1px);
  border-color: var(--sa-line-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.sa-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 30px;
  margin-bottom: 34px;
}

.sa-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.sa-footer__col h4 {
  margin: 0 0 4px;
  color: var(--sa-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sa-footer__col a {
  color: var(--sa-text-3);
  font-size: 13.5px;
  transition: color var(--sa-fast);
}

.sa-footer__col a:hover {
  color: var(--sa-accent);
}

.sa-footer__col p {
  margin: 0;
  color: var(--sa-text-3);
  font-size: 13px;
  line-height: 1.66;
}

.sa-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--sa-line);
  color: var(--sa-text-3);
  font-size: 12.5px;
}

/* Discord dock */
.sa-discordDock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 12px;
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-lg);
  background: rgba(10, 15, 22, 0.86);
  color: var(--sa-text);
  box-shadow: var(--sa-shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: transform var(--sa-fast), border-color var(--sa-fast), box-shadow var(--sa-slow);
}

.sa-discordDock:hover {
  color: var(--sa-text);
  transform: translateY(-2px);
  border-color: rgba(88, 101, 242, 0.5);
  box-shadow: var(--sa-shadow-lg), 0 14px 40px -18px rgba(88, 101, 242, 0.7);
}

.sa-discordDock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--sa-r-md);
  background: linear-gradient(180deg, #5b6cf5, #4a57d8);
  color: #fff;
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sa-discordDock__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.sa-discordDock__text strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-discordDock__text span {
  color: var(--sa-text-3);
  font-size: 11.5px;
}

/* ==========================================================================
   19. FORMS & MISC
   ========================================================================== */

.form-control,
.form-select {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background-color: rgba(255, 255, 255, 0.032);
  color: var(--sa-text);
  font-size: 14px;
  transition: border-color var(--sa-fast), box-shadow var(--sa-fast);
}

.form-control::placeholder {
  color: var(--sa-text-3);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sa-line-accent);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--sa-accent-rgb), 0.14);
}

.form-text {
  color: var(--sa-text-3);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.alert {
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  font-size: 13.5px;
}

.alert-warning {
  border-color: rgba(255, 198, 92, 0.3);
  background: rgba(255, 198, 92, 0.09);
  color: var(--sa-warn);
}

.alert-danger {
  border-color: rgba(255, 107, 107, 0.3);
  background: rgba(255, 107, 107, 0.09);
  color: var(--sa-bad);
}

.card {
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  background: rgba(255, 255, 255, 0.028);
}

.border {
  border-color: var(--sa-line) !important;
}

.rounded,
.rounded-3 {
  border-radius: var(--sa-r-md) !important;
}

/* Choices.js */
.choices .choices__inner {
  min-height: 42px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  background: rgba(255, 255, 255, 0.032);
  color: var(--sa-text);
  font-size: 13.5px;
}

.choices .choices__list--dropdown {
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-md);
  background: #0c1119;
  box-shadow: var(--sa-shadow-lg);
  overflow: hidden;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(var(--sa-accent-rgb), 0.14);
}

/* Sales notification toast */
.notification-toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1029;
  padding: 12px 16px;
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-lg);
  background: rgba(10, 15, 22, 0.88);
  box-shadow: var(--sa-shadow-lg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-product-image {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--sa-r-sm);
  border: 1px solid var(--sa-line);
}

.notification-text-primary {
  margin: 0;
  font-size: 11.5px;
}

.notification-text-secondary {
  margin: 1px 0;
  color: var(--sa-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.notification-text-tertiary {
  margin: 0;
  font-size: 11px;
}

/* Spinner */
.spinner-border {
  color: var(--sa-accent);
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  :root {
    --sa-nav-h: 64px;
  }

  .sa-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    text-align: left;
  }

  .sa-hero__content {
    max-width: 100%;
    padding-top: 12px;
  }

  .sa-hero__visual {
    justify-content: center;
    align-items: flex-end;
    min-height: clamp(280px, 46vw, 440px);
    margin-inline: calc(var(--sa-gutter) * -1);
    margin-top: 10px;
  }

  .sa-hero__image {
    width: min(760px, 108%);
    margin-inline: auto;
  }

  .sa-hero__ambience {
    background:
      radial-gradient(70vw 50vw at 50% 72%, rgba(var(--sa-accent-rgb), 0.16), transparent 70%);
  }

  .sa-productPage__grid {
    grid-template-columns: 1fr;
  }

  /* Stacked, the buy card belongs above the long description. Unwrapping the
     main column lets media / purchase / tabs be sequenced independently. */
  .sa-productPage__main {
    display: contents;
  }

  .sa-productMediaShell { order: 1; }
  .sa-productPage__aside { order: 2; }
  .sa-productTabsWrap { order: 3; }

  .sa-productPurchaseCard {
    position: static;
  }

  .sa-orderPanel,
  .sa-customerSidebar {
    position: static;
  }
}

@media (max-width: 991px) {
  .sa-nav__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand actions"
      "links links";
    gap: 10px 16px;
    padding-block: 12px;
  }

  .sa-nav__left { grid-area: brand; }
  .sa-nav__right { grid-area: actions; justify-self: end; }
  .sa-nav__center { grid-area: links; justify-self: stretch; }

  .sa-nav__links {
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sa-nav__links::-webkit-scrollbar {
    display: none;
  }

  .sa-nav__links a {
    padding: 0 12px;
    white-space: nowrap;
  }

  .sa-reviewsHead {
    align-items: flex-start;
  }

  .feedback-marquee__item {
    width: 292px;
  }
}

@media (max-width: 767px) {
  :root {
    --sa-section-y: 52px;
  }

  .sa-hero__title {
    font-size: clamp(36px, 10.5vw, 54px);
  }

  .sa-hero__actions .sa-btn {
    flex: 1 1 160px;
  }

  .sa-hero__trust {
    gap: 8px 16px;
  }

  .sa-products-grid,
  .testimonials.row {
    grid-template-columns: 1fr;
  }

  .sa-productMediaShell,
  .sa-productTabsWrap,
  .sa-productPurchaseCard,
  .sa-cartPanel,
  .sa-orderPanel {
    padding: 18px;
    border-radius: var(--sa-r-lg);
  }

  .sa-productQuickPoints {
    justify-content: flex-start;
    gap: 10px 18px;
  }

  .sa-discordDock {
    right: 14px;
    bottom: 14px;
    padding: 9px 14px 9px 10px;
  }

  .sa-discordDock__icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .notification-toast {
    left: 14px;
    right: 14px;
    bottom: 84px;
  }

  .sa-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .compare-showcase__frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .sa-nav__account span:not(.sa-nav__icon):not(.sa-nav__count),
  .sa-nav__cartbtn span:not(.sa-nav__icon):not(.sa-nav__count) {
    display: none;
  }

  .sa-nav__account,
  .sa-nav__cartbtn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
}

/* ==========================================================================
   21. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .feedback-marquee__track {
    animation: none !important;
  }
}