/* VoxHUB Purple SellAuth Theme
   Safe build: CSS + settings copy only. No template/layout logic edited. */

:root {
  color-scheme: dark;
  --vox-purple: 168, 85, 247;
  --vox-purple-soft: 192, 132, 252;
  --vox-bg: 3, 2, 10;
  --vox-card: 13, 7, 24;
  --vox-border: 168, 85, 247;
  --vox-radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -15%, rgba(var(--vox-purple), 0.32), transparent 34rem),
    radial-gradient(circle at 0% 20%, rgba(124, 58, 237, 0.20), transparent 28rem),
    radial-gradient(circle at 100% 10%, rgba(217, 70, 239, 0.14), transparent 30rem),
    linear-gradient(180deg, rgb(3, 2, 10) 0%, rgb(7, 3, 18) 50%, rgb(3, 2, 10) 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

#particles-js {
  opacity: 0.38;
  filter: blur(0.2px);
}

#app {
  position: relative;
  z-index: 1;
}

nav,
footer,
.component [class*="bg-card"],
.currency-selector .choices__inner,
.order-select + .choices .choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded] {
  border-color: rgba(var(--vox-border), 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(var(--vox-card), 0.78) !important;
  box-shadow:
    0 18px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

nav,
footer {
  border-radius: var(--vox-radius);
  overflow: hidden;
}

.component [class*="bg-card"],
.component a.block.h-full,
.component a[href*="/product/"],
.component a[href="javascript:void(0);"] {
  border-radius: var(--vox-radius) !important;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.component a.block.h-full:hover,
.component a[href*="/product/"]:hover,
.component a[href="javascript:void(0);"]:hover,
.component [class*="bg-card"]:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--vox-purple-soft), 0.52) !important;
  box-shadow:
    0 22px 90px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(var(--vox-purple), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

h1,
h2,
h3,
.text-t-primary.font-semibold,
.text-t-primary.font-bold {
  letter-spacing: -0.025em;
}

h1 .text-accent-500,
.text-accent-500 {
  text-shadow: 0 0 28px rgba(var(--vox-purple), 0.46);
}

hr.border-accent-500,
[class*="border-accent-500"] {
  border-color: rgba(var(--vox-purple-soft), 0.88) !important;
}

[class*="bg-accent-500"] {
  background: linear-gradient(135deg, rgb(147, 51, 234), rgb(192, 132, 252)) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(var(--vox-purple), 0.28);
}

[class*="text-accent-500"],
[class*="text-accent-400"] {
  color: rgb(var(--vox-purple-soft)) !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.inline-flex.items-center.gap-4.border,
a[class*="border-accent"] {
  border-radius: 999px !important;
  min-height: 44px;
}

.inline-flex.items-center.gap-4.border:hover,
a[class*="border-accent"]:hover {
  box-shadow: 0 0 30px rgba(var(--vox-purple), 0.26);
}

input,
textarea,
select,
.component [class*="focus-within:border-accent"] {
  border-radius: 999px !important;
}

.component img {
  transition: transform 220ms ease, filter 220ms ease;
}

.component a:hover img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.badges > div {
  border-radius: 999px !important;
}

.status [style*="background-color"] {
  box-shadow: 0 0 20px currentColor;
}

footer a,
nav a,
nav button {
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

nav a:hover,
nav button:hover,
footer a:hover {
  color: rgb(var(--vox-purple-soft)) !important;
}

@media (max-width: 768px) {
  :root {
    --vox-radius: 14px;
  }

  .component > div {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}


/* Text-fix build polish */
.component h1,
.component h2 {
  text-wrap: balance;
}

.component p {
  line-height: 1.7;
}