/* ==========================================================================
   SolsticeHub storefront skin for SellAuth
   Style: near-black violet, purple accent, two-tone header,
          uppercase nav tabs, pill badge + big headline hero.

   Install: Themes > Canvas > Code editor
            1. assets/custom.css  -> replace everything with this file, Save
            2. assets/custom.js   -> replace everything with custom.js, Save
            3. Upload solstice-hero.webp into the assets folder (keep that exact name)
   Survives theme updates. Built on SellAuth's documented sa- class hooks.

   Recolor the whole store by editing ONLY the palette block below.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root:root {
  /* Palette */
  --sh-bg: #0d0a17;               /* page */
  --sh-bg-rgb: 13,10,23;
  --sh-bar: #110d1e;              /* top header row */
  --sh-nav: #181228;              /* second row (nav tabs + search) */
  --sh-surface: #150f25;          /* cards, panels */
  --sh-surface-2: #1f1736;        /* hover / raised */
  --sh-input: #1a1430;
  --sh-line: rgba(255,255,255,.08);
  --sh-text: #ffffff;
  --sh-muted: #9a92b8;
  --sh-accent: #8b5cf6;           /* purple accent */
  --sh-accent-rgb: 139,92,246;
  --sh-accent-light: #b79bff;
  --sh-accent-deep-rgb: 88,44,200;
  --sh-accent-grad: linear-gradient(180deg, #a06bff 0%, #7a3ff0 100%);

  --sh-hero-art: url("solstice-hero.webp");  /* custom.js swaps in the full link */

  --sh-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Feed SellAuth's own color tokens (RGB channels) so built-in parts follow */
  --cl-accent: var(--sh-accent-rgb);
  --cl-background: var(--sh-bg-rgb);
}
[data-scheme="light"]:root,
[data-scheme="dark"]:root {
  --cl-accent: var(--sh-accent-rgb);
  --cl-background: var(--sh-bg-rgb);
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--sh-bg) !important;
  color: var(--sh-text);
  font-family: var(--sh-font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.sa-section-header,
[class*="sa-"][class*="-title"] {
  font-family: var(--sh-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sh-text);
}
p, li, [class*="sa-"][class*="-subtitle"] { color: var(--sh-muted); }
a { transition: color .15s ease; }
::selection { background: rgba(var(--sh-accent-rgb), .35); color: #fff; }

/* Use in a headline: Level up with <span class="sol-accent">SolsticeHub</span> */
.sol-accent { color: var(--sh-accent); }

:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 3px;
}

/* ---------- Header: top row + nav row ---------- */
.sa-header {
  background: var(--sh-bar) !important;
  border-bottom: 1px solid var(--sh-line);
}
.sa-navbar {
  background: var(--sh-nav) !important;
  border-bottom: 1px solid var(--sh-line);
}
.sa-navbar-link {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--sh-muted);
  padding: .65rem 1rem;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.sa-navbar-link:hover {
  color: var(--sh-text);
  background: rgba(255,255,255,.04);
}
.sa-navbar-link[aria-current="page"],
.sa-navbar-link.active,
.sa-navbar-link.is-active {
  color: var(--sh-text);
  background: rgba(var(--sh-accent-rgb), .16);
  box-shadow: inset 0 -2px 0 var(--sh-accent);
}
.sa-navbar-cart { color: var(--sh-accent-light); }

/* ---------- Search ---------- */
.sa-searchbar,
.sa-searchbar input {
  background: var(--sh-input) !important;
  color: var(--sh-text) !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 10px;
}
.sa-searchbar input::placeholder { color: var(--sh-muted); }
.sa-searchbar:focus-within { border-color: rgba(var(--sh-accent-rgb), .6) !important; }

/* ---------- Buttons ---------- */
.sa-btn,
.sa-add-to-cart {
  font-family: var(--sh-font);
  font-weight: 700;
  border-radius: 6px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.sa-add-to-cart,
.sa-btn--primary {
  background: var(--sh-accent-grad) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 26px -12px rgba(var(--sh-accent-rgb), .9);
}
.sa-add-to-cart:hover,
.sa-btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 30px -12px rgba(var(--sh-accent-rgb), 1);
}
.sa-add-to-cart:active,
.sa-btn--primary:active { transform: translateY(0); }
.sa-btn--secondary,
.sa-btn--outline,
.sa-btn--ghost {
  background: var(--sh-surface) !important;
  color: var(--sh-text) !important;
  border: 1px solid var(--sh-line) !important;
}
.sa-btn--secondary:hover,
.sa-btn--outline:hover,
.sa-btn--ghost:hover {
  border-color: rgba(var(--sh-accent-rgb), .55) !important;
  background: var(--sh-surface-2) !important;
}

/* ---------- Hero ---------- */
/* Layers, back to front: text fade (hero background) -> angled slab (::before)
   -> character art (::after) -> headline and buttons */
.sa-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(90deg, rgba(var(--sh-bg-rgb), .85) 0%, rgba(var(--sh-bg-rgb), .5) 40%, rgba(var(--sh-bg-rgb), 0) 70%);
}
.sa-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(115deg, transparent 0 70px, rgba(255,255,255,.10) 70px 72px, transparent 72px 170px),
    linear-gradient(135deg, rgba(var(--sh-accent-rgb), .85) 0%, rgba(var(--sh-accent-deep-rgb), .35) 100%);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .5;
  pointer-events: none;
}
.sa-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0; bottom: 0;
  width: min(46vw, 860px);
  aspect-ratio: 1100 / 987;
  max-height: 100%;
  background: var(--sh-hero-art) no-repeat right bottom / contain;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14%);
          mask-image: linear-gradient(to top, transparent 0, #000 14%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  pointer-events: none;
}
.sa-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--sh-accent-rgb), .45);
  background: rgba(var(--sh-accent-rgb), .1);
  color: var(--sh-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sa-hero-title {
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  max-width: 14ch;
}
.sa-hero-subtitle { color: var(--sh-muted); max-width: 46ch; }

/* ---------- Product cards ---------- */
.sa-product-card {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.sa-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--sh-accent-rgb), .55) !important;
  background: var(--sh-surface-2) !important;
  box-shadow: 0 18px 40px -22px rgba(var(--sh-accent-rgb), .7);
}
.sa-product-card [class*="price"],
.sa-product-price { color: var(--sh-accent-light); font-weight: 700; }
.sa-product-card [class*="-badge"],
.sa-product-badge {
  background: rgba(var(--sh-accent-rgb), .12);
  color: var(--sh-accent-light);
  border: 1px solid rgba(var(--sh-accent-rgb), .4);
  border-radius: 999px;
}

/* Trust / payment badges section: no pills, purple-dark card instead of the theme's brown */
[class*="sa-trust"] [class*="-badge"],
[class*="sa-trust"][class*="-badge"] {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit;
}
.sa-trust-badges,
.sa-trust-badges-inner {
  background-color: var(--sh-surface) !important;
  border-color: var(--sh-line) !important;
}

/* ---------- Product page ---------- */
.sa-product-gallery {
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sh-surface);
}
.sa-product-form {
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  padding: 1.25rem;
}

/* ---------- Cart, reviews, pagination ---------- */
.sa-cart-panel {
  background: var(--sh-bg) !important;
  border-left: 1px solid var(--sh-line);
}
.sa-cart-item { border-bottom: 1px solid var(--sh-line); }
.sa-feedback-card {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 12px;
}
.sa-breadcrumbs { color: var(--sh-muted); }

/* ---------- Footer ---------- */
.sa-footer {
  background: var(--sh-bar) !important;
  border-top: 1px solid var(--sh-line);
}
.sa-footer-link { color: var(--sh-muted); }
.sa-footer-link:hover { color: var(--sh-accent-light); }

/* ---------- Motion + small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 1100px) {
  .sa-hero { background: linear-gradient(180deg, rgba(var(--sh-bg-rgb), .35) 0%, rgba(var(--sh-bg-rgb), .8) 100%); }
  .sa-hero::before { width: 100%; opacity: .16; clip-path: polygon(0 30%, 100% 12%, 100% 100%, 0 100%); }
  .sa-hero::after { display: none; }
  .sa-hero-title { max-width: none; }
  .sa-navbar-link { padding: .55rem .75rem; }
}
@media (max-width: 640px) {
  .sa-product-form { padding: 1rem; }
}

/* ---------- Announcement bar: give the text room so it can't be clipped ---------- */
.sa-announcement,
.sa-announcement-bar {
  position: relative;
  z-index: 60;
  min-height: 2.5rem;
  padding-block: .4rem;
}
[class*="sa-announcement"],
[class*="sa-announcement"] * {
  line-height: 1.5;
}

/* ---------- Store stays dark: hide the light/dark toggle (custom.js also locks dark) ---------- */
:is(.sa-header, .sa-navbar) :is(button, a)[class*="scheme"],
:is(.sa-header, .sa-navbar) :is(button, a)[class*="dark-mode"],
:is(.sa-header, .sa-navbar) :is(button, a)[aria-label*="dark" i],
:is(.sa-header, .sa-navbar) :is(button, a)[aria-label*="light" i],
:is(.sa-header, .sa-navbar) :is(button, a)[aria-label*="scheme" i],
:is(.sa-header, .sa-navbar) :is(button, a)[aria-label*="theme" i],
:is(.sa-header, .sa-navbar) :is(button, a)[title*="theme" i],
:is(.sa-header, .sa-navbar) :is(button, a)[title*="mode" i] {
  display: none !important;
}

/* ==========================================================================
   Animated background: slow drifting purple aurora behind the whole page
   (turns itself off for visitors who prefer reduced motion)
   ========================================================================== */
html { background-color: var(--sh-bg) !important; }
body { background: transparent !important; }

body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(var(--sh-accent-rgb), .30) 0%, transparent 70%),
    radial-gradient(34% 34% at 82% 18%, rgba(var(--sh-accent-deep-rgb), .40) 0%, transparent 70%),
    radial-gradient(42% 42% at 62% 86%, rgba(var(--sh-accent-rgb), .20) 0%, transparent 70%),
    radial-gradient(30% 30% at 12% 80%, rgba(var(--sh-accent-deep-rgb), .30) 0%, transparent 70%);
  animation: sh-aurora 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sh-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-5deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

.sa-header {
  background: rgba(17, 13, 30, .72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sa-navbar {
  background: rgba(24, 18, 40, .72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ==========================================================================
   Reference-site layout: left-aligned hero, angled accent shapes,
   styled FAQ / call-to-action sections
   ========================================================================== */

/* Left-align the hero text and buttons (the centered layout stays for the split-media variant's own grid) */
.sa-hero:not(.sa-hero--split-media) .text-center { text-align: left !important; }
.sa-hero:not(.sa-hero--split-media) .items-center { align-items: flex-start !important; }
.sa-hero .justify-center { justify-content: flex-start !important; }
.sa-hero .mx-auto:not(.wrap):not(.container) { margin-left: 0 !important; }
.sa-hero-title,
.sa-hero-subtitle { margin-left: 0 !important; }
.sa-hero-actions { justify-content: flex-start !important; }

/* Hero image (split-media layout) sits in front of the slab */
.sa-hero-media { position: relative; z-index: 1; }
.sa-hero-media img { filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

/* FAQ: dark cards, purple edge when open */
.sa-faq-item {
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  transition: border-color .2s ease;
}
.sa-faq-item:hover { border-color: rgba(var(--sh-accent-rgb), .35); }
.sa-faq-item[open],
.sa-faq-item.is-open,
.sa-faq-item.open { border-color: rgba(var(--sh-accent-rgb), .6); }

/* Call-to-action band: purple panel with the same diagonal lines as the hero */
.sa-cta {
  background:
    repeating-linear-gradient(115deg, transparent 0 70px, rgba(255,255,255,.06) 70px 72px, transparent 72px 170px),
    linear-gradient(135deg, rgba(var(--sh-accent-deep-rgb), .55) 0%, rgba(var(--sh-accent-rgb), .25) 100%) !important;
  border-top: 1px solid rgba(var(--sh-accent-rgb), .3);
  border-bottom: 1px solid rgba(var(--sh-accent-rgb), .3);
}

/* ---------- Social links removed ---------- */
:is(.sa-header, .sa-navbar, .sa-footer) [class*="social"] { display: none !important; }

/* ---------- Discord support links (added by custom.js) ---------- */
.sh-discord svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.sh-discord-header {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--sh-muted) !important;
  transition: color .15s ease;
}
.sh-discord-header:hover,
.sh-discord-header:focus-visible { color: #fff !important; }
.sh-discord-footer {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
}
.sh-discord-footer svg { width: 18px; height: 18px; }
.sh-discord-footer:hover { color: var(--sh-accent-light) !important; }
.sh-discord-footer-box { margin-top: 1rem; }