/* Vertigo "Edge" layer — layout + components inspired by the Edge gaming e-commerce shot.
   Near-black glass surfaces, pill nav, category tab bar, tinted buttons, buy panel. Accent stays staff-configurable. */

/* ---------- Promo strip ---------- */
.edge-promo {
  margin: 10px auto 0; max-width: 1240px; width: calc(100% - 32px);
  text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 7px 16px;
  color: var(--accent-color); background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 10px;
}

/* ---------- Navbar ---------- */
nav.edge-nav, nav.edge-nav.nav-transparent {
  background: rgba(9, 9, 10, .88) !important; border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
.edge-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.edge-bar { display: flex; align-items: center; gap: 20px; height: 64px; }
.edge-logo { font-weight: 800; font-size: 17px; letter-spacing: .2em; color: var(--text); text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.edge-logo:hover { color: var(--accent-color); }
.edge-links { display: none; align-items: center; gap: 4px; }
.edge-link { padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; }
.edge-link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.edge-search {
  flex: 1; max-width: 340px; margin-left: auto; display: none; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.edge-search:focus-within { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.edge-search i { color: var(--faint); font-size: 13px; }
.edge-search input:not([type=checkbox]):not([type=radio]) {
  flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 13px; color: var(--text);
}
.edge-search select { display: none; }

.edge-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.edge-search ~ .edge-actions { margin-left: 0; }
.edge-icon-btn {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--text); text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); transition: background .15s, border-color .15s;
}
.edge-icon-btn:hover { background: rgba(255, 255, 255, .08); border-color: var(--border-strong); }
.edge-dot {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #111; background: var(--accent-color); box-shadow: 0 0 0 3px var(--bg);
}
.edge-sep { width: 1px; height: 22px; background: var(--border-strong); }
.edge-actions .user-button, .edge-actions .login-button { height: 40px; padding: 0 12px 0 6px !important; border-radius: 12px !important; text-transform: none !important; }
.edge-actions .login-button { padding: 0 16px !important; background: rgba(var(--accent-rgb), .14) !important; color: var(--accent-color) !important; border: 1px solid rgba(var(--accent-rgb), .38) !important; }
.edge-actions .user-avatar, .edge-actions .user-avatar-placeholder { width: 28px; height: 28px; border-width: 1px; }
.edge-actions .user-dropdown-menu { right: 0; }
.edge-burger { display: grid; }

/* category tab row */
.edge-tabrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; }
.edge-tabs {
  display: flex; align-items: center; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 14px;
}
.edge-tabs::-webkit-scrollbar { display: none; }
.edge-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--faint); text-decoration: none; transition: color .15s, background .15s;
}
.edge-tab i { font-size: 12px; }
.edge-tab:hover { color: var(--text); }
.edge-tab.active { color: var(--text); background: radial-gradient(120% 140% at 50% 120%, rgba(var(--accent-rgb), .22), transparent 70%), rgba(255, 255, 255, .03); }
.edge-tab.active::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: -5px; height: 2px; border-radius: 2px; background: var(--accent-color); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8);
}
.edge-chip {
  display: none; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
}
.edge-chip b { font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(var(--accent-rgb), .16); color: var(--accent-color); font-size: 12px; }
.edge-chip i { color: var(--accent-color); }

@media (min-width: 640px) { .edge-chip { display: inline-flex; } }
@media (min-width: 1024px) { .edge-links { display: flex; } .edge-search { display: flex; } .edge-burger { display: none; } }
@media (max-width: 1023px) {
  .edge-bar { gap: 12px; }
  .edge-logo { order: 2; margin: 0 auto; }
  .edge-burger { order: 1; }
  .edge-actions { order: 3; margin-left: 0; }
}

/* landing hero sits right under the nav now (Adam hands untouched) */
.vx-hero { margin-top: 0 !important; padding-top: 64px !important; }
@media (max-width: 767px) { .vx-hero { padding-top: 40px !important; } }

/* ---------- Shared: glass panel, chips, badges ---------- */
.edge-panel {
  background: var(--glass), var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.edge-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 13px; }
.edge-meta span { display: inline-flex; align-items: center; gap: 8px; }
.edge-meta i { color: var(--faint); }
.edge-meta strong { color: var(--text); font-weight: 600; }
.edge-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); text-decoration: none;
}
a.edge-pill:hover { color: var(--text); border-color: var(--border-strong); }
.edge-pill .sep { color: var(--faint); }
.edge-save { display: inline-flex; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fca5a5; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .22); }

/* ---------- Product page ---------- */
.pp-hero { position: relative; margin-top: 0; overflow: hidden; }
.pp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pp-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.7); transform: scale(1.04); }
.pp-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 10, .72) 0%, rgba(9, 9, 10, .25) 35%, var(--bg) 100%),
              radial-gradient(60% 70% at 78% 30%, rgba(var(--accent-rgb), .25), transparent 70%);
}
.pp-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 200px 16px 28px; }
.pp-title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; margin: 18px 0 14px; color: var(--text); }
.pp-title b { font-weight: 700; }
.pp-grid { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 16px 64px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .pp-aside { position: sticky; top: 148px; margin-top: 0; }
}
@media (max-width: 1023px) { .pp-hero-inner { padding-top: 120px; } }

/* collapsible sections */
.pp-sec { overflow: hidden; }
.pp-sec > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text);
}
.pp-sec > summary::-webkit-details-marker { display: none; }
.pp-sec > summary .count { margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--muted); font-weight: 500; }
.pp-sec > summary .chev { color: var(--muted); transition: transform .2s ease; font-size: 12px; }
.pp-sec[open] > summary .chev { transform: rotate(180deg); }
.pp-sec[open] > summary { border-bottom: 1px solid var(--border); }
.pp-sec-body { padding: 22px; }

/* buy panel */
.buy-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); overflow-x: auto; }
.buy-tabs.stack { grid-auto-flow: row; }
.buy-tab { cursor: pointer; text-align: center; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; white-space: nowrap; }
.buy-tab:hover { color: var(--text); }
.buy-tab.selected { background: rgba(255, 255, 255, .09); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.buy-tab input { display: none; }
.buy-tab small { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); font-weight: 500; }
.buy-tab.selected small { color: var(--muted); }
.buy-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 4px 14px; }
.buy-old { font-size: 15px; color: var(--faint); text-decoration: line-through; min-height: 20px; }
.buy-now { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
.buy-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.buy-btn {
  position: relative; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s, transform .15s, opacity .15s;
  color: var(--accent-color); border: 1px solid rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .14);
}
.buy-btn:hover:not(:disabled) { background-color: rgba(var(--accent-rgb), .22); border-color: rgba(var(--accent-rgb), .65); transform: translateY(-1px); }
.buy-btn:disabled { opacity: .45; cursor: not-allowed; }
.buy-btn.alt { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, .05); }
.buy-btn.alt:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
.buy-list { margin-top: 14px; padding: 6px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); }
.buy-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13px; color: var(--text); list-style: none; }
.buy-list li i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--accent-color); font-size: 10px; }
.buy-list li.bad i { color: #f87171; }
.buy-support { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); text-decoration: none; }
.buy-support .ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--text); }
.buy-support b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.buy-support span { font-size: 12px; color: var(--faint); }
.buy-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px; }

/* aside bundle rows */
.bundle-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); }
.bundle-row img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.bundle-row .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-row .pr { font-size: 14px; font-weight: 700; color: var(--text); }
.bundle-row button { padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .07); border: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.bundle-row button:hover { background: rgba(var(--accent-rgb), .2); color: var(--accent-color); }

/* reviews summary */
.rv-sum { display: grid; gap: 16px; }
@media (min-width: 640px) { .rv-sum { grid-template-columns: 170px 1fr; } }
.rv-score { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); text-align: center; }
.rv-score .n { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rv-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.rv-bar > i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.rv-bar > i > u { display: block; height: 100%; border-radius: 6px; background: var(--accent-color); }

/* ---------- Products list ---------- */
.pl-head { max-width: 1240px; margin: 0 auto; padding: 36px 16px 8px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pl-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.pl-head h1 b { font-weight: 700; }
.pl-head p { margin-top: 8px; color: var(--muted); font-size: 14px; max-width: 520px; }

/* product cards */
.product-card { border-radius: 18px !important; }
.product-card .card-chip { border-radius: 8px !important; background: rgba(9, 9, 10, .75) !important; backdrop-filter: blur(6px) !important; border-color: var(--border-strong); }
.product-card .absolute.top-2\.5 span { border-radius: 8px !important; background: rgba(239, 68, 68, .16) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, .3); }
.card-go { border-radius: 10px !important; }
.product-card:hover .card-go { background: rgba(var(--accent-rgb), .18) !important; color: var(--accent-color) !important; border-color: rgba(var(--accent-rgb), .45) !important; }

/* ---------- Footer ---------- */
footer { background: var(--bg) !important; }

.buy-status.hidden, .bundle-row.hidden { display: none !important; }

/* ---- Sale event banner: thin Edge strip ---- */
#sale-event-banner.sale-event-banner { box-shadow: none !important; border-bottom: 1px solid var(--border) !important; animation: none !important; }
#sale-event-banner .container > div { padding-top: 8px !important; padding-bottom: 8px !important; }
#sale-event-banner .sale-event-icon i { font-size: 16px !important; }
#sale-event-banner .sale-event-message { font-size: 13px !important; font-weight: 700 !important; margin: 0 !important; }
#sale-event-banner .sale-event-message + div { display: none; }
#sale-event-banner .sale-event-cta { padding: 5px 14px !important; font-size: 12px !important; border-radius: 999px !important; box-shadow: none !important; }
#sale-event-banner .sale-event-cta:hover { transform: none !important; }
#sale-event-banner .flex.items-center.gap-4 { gap: 12px !important; }
@media (max-width: 640px) { #sale-event-banner .sale-event-icon { display: none; } #sale-event-banner .sale-event-message { font-size: 12px !important; } }

/* ---- Home sections ---- */
#features, section.py-24 { padding-top: 64px !important; padding-bottom: 64px !important; }
#features { margin-top: 48px !important; }
.section-heading { font-size: clamp(28px, 4vw, 40px) !important; }
.glass-effect { background-image: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.review-card .glass-effect, .glass-effect.rounded-2xl { border-radius: var(--radius) !important; }
.faq-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--border) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%) !important; }
footer a[target="_blank"] { border-radius: 10px !important; background-image: var(--glass); }
footer a[target="_blank"]:hover { border-color: rgba(var(--accent-rgb), .4) !important; color: var(--accent-color); }
footer h4 { font-size: 12px !important; letter-spacing: .12em !important; color: var(--muted) !important; }
#back-to-top { border-radius: 12px !important; background: rgba(var(--accent-rgb), .14) !important; border: 1px solid rgba(var(--accent-rgb), .38); color: var(--accent-color) !important; box-shadow: none !important; }

/* ---- Cart / checkout ---- */
.rounded-2xl, .rounded-xl { border-radius: var(--radius) !important; }
input[type="text"], input[type="email"], input[type="number"], select, textarea { border-radius: var(--radius-sm) !important; }
#sale-event-banner .sale-event-message { line-height: 1.3 !important; }
#sale-event-banner .sale-event-bg { opacity: .35; }
@media (max-width: 640px) { #sale-event-banner .sale-event-cta { padding: 4px 10px !important; } }

/* ---- Sparkle tinted-glass buttons everywhere ---- */
.btn-primary {
  position: relative;
  background: rgba(var(--accent-rgb), .14) !important;
  border-radius: 12px !important;
}
.btn-primary:hover { background-color: rgba(var(--accent-rgb), .22) !important; }
.btn-outline { border-radius: 12px !important; background: rgba(255,255,255,.04) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- Background blur on cards ---- */
.glass-effect, .product-card, .feature-card, .stat-card, .review-card > div, .faq-item, .cart-item,
.summary-card, .profile-card, .variant-card, .error-card, .success-card, .bundle-card, .panel, .card,
.edge-panel, .buy-list, .buy-support, .bundle-row, .pill, .edge-pill {
  background-color: rgba(19, 19, 20, .55) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

/* ---- Animated sparkle particles (twinkle + drift) ---- */
.btn-primary, .buy-btn:not(.alt) { isolation: isolate; overflow: hidden; }
.btn-primary::before, .btn-primary::after, .buy-btn:not(.alt)::before, .buy-btn:not(.alt)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-repeat: repeat;
}
.btn-primary::before, .buy-btn:not(.alt)::before {
  background-image:
    radial-gradient(circle at 12% 28%, rgba(var(--accent-rgb), .95) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 37% 71%, rgba(var(--accent-rgb), .8) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 58% 18%, rgba(255, 255, 255, .55) 0 .5px, transparent 1px),
    radial-gradient(circle at 81% 63%, rgba(var(--accent-rgb), .9) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 93% 22%, rgba(var(--accent-rgb), .7) 0 .5px, transparent 1px),
    radial-gradient(circle at 70% 88%, rgba(255, 255, 255, .45) 0 .5px, transparent 1px);
  background-size: 131px 47px;
  animation: vx-drift-a 14s linear infinite, vx-twinkle 3.1s ease-in-out infinite;
}
.btn-primary::after, .buy-btn:not(.alt)::after {
  background-image:
    radial-gradient(circle at 22% 62%, rgba(var(--accent-rgb), .9) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 47% 33%, rgba(255, 255, 255, .5) 0 .5px, transparent 1px),
    radial-gradient(circle at 66% 76%, rgba(var(--accent-rgb), .8) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 88% 41%, rgba(var(--accent-rgb), .85) 0 .5px, transparent 1.1px),
    radial-gradient(circle at 6% 85%, rgba(255, 255, 255, .4) 0 .5px, transparent 1px);
  background-size: 97px 39px;
  animation: vx-drift-b 19s linear infinite, vx-twinkle 4.3s ease-in-out -1.7s infinite;
}
@keyframes vx-drift-a { to { background-position: 131px -47px; } }
@keyframes vx-drift-b { to { background-position: -97px 39px; } }
@keyframes vx-twinkle { 0%, 100% { opacity: .25; } 35% { opacity: 1; } 60% { opacity: .5; } 80% { opacity: .95; } }
.btn-primary::before, .btn-primary::after, .buy-btn:not(.alt)::before, .buy-btn:not(.alt)::after { transition: filter .35s ease; }
.btn-primary:hover::before, .btn-primary:hover::after, .buy-btn:hover:not(.alt)::before, .buy-btn:hover:not(.alt)::after { filter: brightness(1.9) saturate(1.6) drop-shadow(0 0 2px rgba(var(--accent-rgb), .95)) drop-shadow(0 0 5px rgba(var(--accent-rgb), .6)); }
@media (prefers-reduced-motion: reduce) { .btn-primary::before, .btn-primary::after, .buy-btn::before, .buy-btn::after { animation: none; opacity: .6; } }

/* ---- Selected tab: top bar + glow + floating particles ---- */
.edge-tab.active, .buy-tab.selected {
  isolation: isolate; overflow: visible;
  background: radial-gradient(90% 120% at 50% 0%, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .06) 55%, transparent 80%), rgba(255, 255, 255, .03);
}
.edge-tab.active::before, .buy-tab.selected::before {
  content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent-color); box-shadow: 0 2px 14px rgba(var(--accent-rgb), .85); z-index: 1;
}
.buy-tab.selected::before { top: -5px; }
.edge-tab.active::after, .buy-tab.selected::after {
  content: ''; position: absolute; inset: -6px 0 0 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(var(--accent-rgb), .95) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 38% 58%, rgba(255, 255, 255, .6) 0 .5px, transparent 1px),
    radial-gradient(circle at 57% 14%, rgba(var(--accent-rgb), .9) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 76% 44%, rgba(var(--accent-rgb), .8) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 91% 26%, rgba(255, 255, 255, .5) 0 .5px, transparent 1px),
    radial-gradient(circle at 66% 82%, rgba(var(--accent-rgb), .7) 0 .5px, transparent 1px);
  background-size: 113px 41px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
  animation: vx-drift-a 12s linear infinite, vx-twinkle 3.4s ease-in-out infinite;
}
.buy-tab.selected { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .edge-tab.active::after, .buy-tab.selected::after { animation: none; opacity: .6; } }
.edge-tabs { padding: 0 4px; }
.edge-tab { padding: 12px 16px; border-radius: 0 0 10px 10px; }
.edge-tab.active::before, .buy-tab.selected::before { top: 0; }
.edge-tab.active::after, .buy-tab.selected::after { inset: 0; }
.edge-tab.active { border-radius: 0 0 10px 10px; }
.edge-tab.active, .buy-tab.selected { background: radial-gradient(80% 130% at 50% 0%, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .12) 55%, transparent 85%), rgba(255, 255, 255, .03); }
.edge-tab.active::after, .buy-tab.selected::after { filter: brightness(1.5) drop-shadow(0 0 2px rgba(var(--accent-rgb), .9)); }

/* ---- nav cleanup: single search field, accent sign-in ---- */
.edge-search input, .edge-search input:focus {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important;
  box-shadow: none !important; outline: none !important; padding: 0 !important; height: 100% !important; width: 100%;
}
.edge-search { overflow: hidden; }
.edge-nav .login-button {
  height: 40px; padding: 0 16px !important; font-size: 13px !important; gap: 8px;
  background-color: rgba(var(--accent-rgb), .14) !important; color: var(--accent-color) !important;
  border: 1px solid rgba(var(--accent-rgb), .38) !important; box-shadow: none !important;
}
.edge-nav .login-button i { color: inherit !important; }
.edge-nav .edge-search input[type="text"], .edge-nav .edge-search input[type="text"]:focus, .edge-nav .edge-search input[type="text"]:hover {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important;
}
.edge-nav .edge-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.edge-nav .edge-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; height: 100% !important;
}

/* ======== Frosted card system (outer glass panel + soft inset blocks) ======== */
:root { --radius: 18px; --radius-sm: 12px; }
.glass-effect, .product-card, .feature-card, .stat-card, .review-card > div, .faq-item, .cart-item,
.summary-card, .profile-card, .error-card, .success-card, .bundle-card, .panel, .card, .edge-panel {
  background-color: rgba(26, 26, 28, .52) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 40%, rgba(255,255,255,0)) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}
/* inner blocks: no hard borders, softly lifted */
.buy-tabs, .buy-list, .buy-support, .bundle-row, .variant-card, .rv-card, .review-card .glass-effect {
  background-color: rgba(255, 255, 255, .035) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
  border: 1px solid rgba(255, 255, 255, .04) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.buy-tab.selected { background-color: rgba(255,255,255,.08); box-shadow: 0 4px 12px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.buy-tab { border-radius: 12px; }
.pp-aside .buy-btn { height: 48px; }
.buy-support .ic { background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); border-radius: 14px; }
/* hover for product cards stays accent-lit */
.product-card:hover, .hover-lift:hover { border-color: rgba(var(--accent-rgb), .35) !important; transform: translateY(-2px); }
.edge-tabs { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background-color: rgba(26,26,28,.5); border-radius: 16px; }

/* ======== Selected tab v2: crisp top bar, soft glow that fades on every side ======== */
.edge-tab.active, .buy-tab.selected { background: transparent !important; box-shadow: none; }
.edge-tab.active::before, .buy-tab.selected::before {
  top: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent-color); box-shadow: none;
  -webkit-mask-image: none; mask-image: none;
}
.buy-tab.selected::before { top: 0; border-radius: 10px 10px 2px 2px / 2px; }
/* glow lives in a layer that fades to nothing at its edges, so nothing is cut off */
.edge-tab.active::after, .buy-tab.selected::after {
  inset: 0 -14px -10px -14px; border-radius: 0; filter: none;
  background-image:
    radial-gradient(ellipse 55% 85% at 50% 0%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .08) 60%, transparent 100%),
    radial-gradient(circle at 18% 30%, rgba(var(--accent-rgb), .8) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 44% 62%, rgba(255,255,255,.45) 0 .5px, transparent 1px),
    radial-gradient(circle at 63% 22%, rgba(var(--accent-rgb), .75) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 82% 50%, rgba(var(--accent-rgb), .6) 0 .5px, transparent 1px);
  background-size: 100% 100%, 97px 37px, 97px 37px, 97px 37px, 97px 37px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 95% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 50% 95% at 50% 0%, #000 30%, transparent 100%);
  animation: vx-twinkle 4s ease-in-out infinite;
}
.edge-tabs { overflow: visible; }
.edge-tabs { overflow-x: clip; overflow-y: visible; }
@media (min-width: 1024px) { .edge-tabs { margin-left: -16px; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; } }
.edge-tab.active::before { left: 12px; right: 12px; border-radius: 0 0 3px 3px; }
.pp-aside { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin-top: 0 !important; }
.buy-tabs { scrollbar-width: none; } .buy-tabs::-webkit-scrollbar { display: none; }

/* ======== Tabs live in the main bar, next to the logo, as one bar ======== */
.edge-tabrow { padding: 0; justify-content: flex-start; min-width: 0; }
.edge-tabs, .edge-tabs {
  margin-left: 0 !important; padding: 0 4px !important; gap: 2px; height: 46px; align-items: stretch;
  background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--border) !important; border-radius: 14px;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; overflow-x: clip; overflow-y: visible;
}
.edge-tab { padding: 0 16px; align-items: center; border-radius: 0 0 10px 10px; }
@media (max-width: 1023px) {
  .edge-bar { flex-wrap: wrap; height: auto; padding: 10px 0 12px; row-gap: 10px; }
  .edge-tabrow { order: 9; flex: 0 0 100%; overflow-x: auto; scrollbar-width: none; }
  .edge-tabrow::-webkit-scrollbar { display: none; }
  .edge-tabs { overflow-x: auto; }
  .edge-tab.active::after { display: none; }
}
.pl-head .edge-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.pl-head .edge-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; height: 100% !important;
}

/* ======== Selected tab v3: glow on the tab itself, particles drift in ::after ======== */
.edge-tab.active, .buy-tab.selected {
  background: radial-gradient(ellipse 48% 90% at 50% 0%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .08) 60%, transparent 100%) !important;
}
.edge-tab.active::after, .buy-tab.selected::after {
  inset: 0; filter: none;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(var(--accent-rgb), .9) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 44% 66%, rgba(255,255,255,.55) 0 .5px, transparent 1px),
    radial-gradient(circle at 63% 20%, rgba(var(--accent-rgb), .85) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 84% 52%, rgba(var(--accent-rgb), .7) 0 .5px, transparent 1px),
    radial-gradient(circle at 30% 82%, rgba(255,255,255,.4) 0 .5px, transparent 1px),
    radial-gradient(circle at 72% 78%, rgba(var(--accent-rgb), .75) 0 .6px, transparent 1.1px);
  background-size: 113px 37px, 113px 37px, 113px 37px, 97px 43px, 97px 43px, 97px 43px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, #000 25%, transparent 100%);
  animation: vx-drift-tab 11s linear infinite, vx-twinkle 3.6s ease-in-out infinite;
}
@keyframes vx-drift-tab {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 113px -37px, 113px -37px, 113px -37px, -97px 43px, -97px 43px, -97px 43px; }
}
.edge-search input:hover, .edge-search input:active, .edge-search input:focus-visible, .edge-search input:-webkit-autofill {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  -webkit-box-shadow: 0 0 0 100px transparent inset !important; -webkit-text-fill-color: var(--text);
}

/* ======== Auth pages (login / register / reset / verify) ======== */
body.auth-page {
  --bg: #09090a; --surface: #131314; --border: rgba(255,255,255,.07); --text: #f4f4f5; --muted: #a1a1aa; --radius: 14px;
  background: var(--bg) !important;
}
.auth-page section.relative.min-h-screen {
  background: radial-gradient(60% 55% at 50% 0%, rgba(var(--accent-rgb), .14), transparent 70%), var(--bg) !important;
  margin-top: 0 !important; padding-top: 128px !important;
}
.auth-page .noise, .auth-page .hero-grid, .auth-page .particle { display: none !important; }
.auth-page h1 { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; font-weight: 300 !important; letter-spacing: -.03em; }
.auth-page h1 span, .auth-page h1 b { font-weight: 700; color: var(--accent-color); -webkit-text-fill-color: var(--accent-color); }
.auth-page p[style*="#ffffff"], .auth-page header p { color: var(--muted) !important; }
.auth-page .glass-effect { padding: 28px !important; }
.auth-page .form-input, .auth-page input[type=email], .auth-page input[type=password], .auth-page input[type=text] {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--text) !important;
}
.auth-page .form-input:focus, .auth-page input:focus { border-color: rgba(var(--accent-rgb), .55) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14) !important; }
/* primary submit -> sparkle tinted glass */
.auth-page button[type=submit] {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 12px !important;
  background: rgba(var(--accent-rgb), .14) !important; color: var(--accent-color) !important; border: 1px solid rgba(var(--accent-rgb), .4) !important; box-shadow: none !important;
  padding-top: 15px !important; padding-bottom: 15px !important; font-size: 15px !important; font-weight: 600 !important;
}
.auth-page button[type=submit]:hover { background: rgba(var(--accent-rgb), .22) !important; transform: translateY(-1px); }
.auth-page button[type=submit] i, .auth-page button[type=submit] span { color: inherit !important; }
.auth-page button[type=submit]::before, .auth-page button[type=submit]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.auth-page button[type=submit]::before {
  background-image: radial-gradient(circle at 12% 28%, rgba(var(--accent-rgb), .95) 0 .7px, transparent 1.3px), radial-gradient(circle at 37% 71%, rgba(var(--accent-rgb), .8) 0 .6px, transparent 1.1px), radial-gradient(circle at 58% 18%, rgba(255,255,255,.55) 0 .5px, transparent 1px), radial-gradient(circle at 81% 63%, rgba(var(--accent-rgb), .9) 0 .7px, transparent 1.3px);
  background-size: 131px 47px; animation: vx-drift-a 14s linear infinite, vx-twinkle 3.1s ease-in-out infinite;
}
.auth-page button[type=submit]::after {
  background-image: radial-gradient(circle at 22% 62%, rgba(var(--accent-rgb), .9) 0 .6px, transparent 1.2px), radial-gradient(circle at 47% 33%, rgba(255,255,255,.5) 0 .5px, transparent 1px), radial-gradient(circle at 66% 76%, rgba(var(--accent-rgb), .8) 0 .7px, transparent 1.3px);
  background-size: 97px 39px; animation: vx-drift-b 19s linear infinite, vx-twinkle 4.3s ease-in-out -1.7s infinite;
}
/* Discord button -> glass */
.auth-page a[href="/auth/discord"] {
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--border-strong, rgba(255,255,255,.12)); border-radius: 12px !important; color: var(--text) !important; font-size: 15px;
}
.auth-page a[href="/auth/discord"]:hover { background: rgba(88,101,242,.16) !important; border-color: rgba(88,101,242,.5); }
.auth-page .error-card { border-color: rgba(248,113,113,.3) !important; background-color: rgba(248,113,113,.07) !important; animation: none !important; }
.auth-page .bg-dark-card\/80 { background: rgba(19,19,20,.9) !important; }
.auth-page h1 { text-shadow: none !important; }
.auth-page label > i.fas.text-accent.text-sm { display: none; }
.auth-page input[type=checkbox] { accent-color: var(--accent-color); border-radius: 6px; width: 18px; height: 18px; }

/* ======== Two-row nav (Edge reference): logo + links + search + actions, then a full-width tab bar ======== */
.edge-bar { flex-wrap: nowrap !important; height: 64px !important; padding: 0 !important; row-gap: 0 !important; }
.edge-links { gap: 2px; margin-left: 8px; }
.edge-link { padding: 8px 14px; font-size: 14px; }
.edge-link.active { color: var(--text); }
.edge-tabrow { order: 0 !important; flex: none !important; width: 100%; overflow: visible !important; padding: 0 0 14px !important; display: block; }
.edge-tabs {
  display: flex; width: 100%; height: 48px !important; padding: 0 8px !important; gap: 4px !important;
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 14px !important;
  backdrop-filter: blur(18px) saturate(1.2) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}
.edge-tab { padding: 0 18px !important; font-size: 14px; white-space: nowrap; }
@media (max-width: 1023px) {
  .edge-bar { height: 60px !important; }
  .edge-tabrow { padding-bottom: 10px !important; }
  .edge-tabs { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
  .edge-tab.active::after { display: block !important; }
}

/* nav logo image (staff-configurable) */
.edge-logo { display: inline-flex; align-items: center; }
.edge-logo img { height: 22px; width: auto; max-width: 160px; display: block; object-fit: contain; }

/* ======== Single row again: logo | tabs | search | actions ======== */
.edge-bar { gap: 20px; }
.edge-tabrow { flex: 0 1 auto !important; width: auto !important; min-width: 0; padding: 0 !important; }
.edge-tabs { width: auto !important; height: 46px !important; }
.edge-links { margin-left: 0; }
@media (max-width: 1023px) {
  .edge-bar { flex-wrap: wrap !important; height: auto !important; padding: 10px 0 12px !important; row-gap: 10px !important; }
  .edge-tabrow { order: 9 !important; flex: 0 0 100% !important; width: 100% !important; overflow-x: auto !important; scrollbar-width: none; }
  .edge-tabs { width: 100% !important; overflow-x: auto !important; }
}

/* ======== Product page: tighter hero + themed panels ======== */
.pp-hero-inner { padding: 96px 16px 14px !important; }
.pp-hero-bg::after {
  background: linear-gradient(180deg, rgba(9,9,10,.6) 0%, rgba(9,9,10,.35) 45%, var(--bg) 100%),
              radial-gradient(60% 80% at 78% 30%, rgba(var(--accent-rgb), .22), transparent 70%) !important;
}
.pp-title { margin: 12px 0 10px !important; }
.pp-grid { padding-bottom: 48px !important; gap: 18px !important; }
@media (max-width: 1023px) { .pp-hero-inner { padding-top: 72px !important; } }

.pp-sec, .pp-aside .edge-panel, .pp-aside > .edge-panel {
  position: relative; border-color: rgba(var(--accent-rgb), .16) !important;
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02), inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px -22px rgba(var(--accent-rgb), .55) !important;
}
.pp-sec::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent); opacity: .7;
}
.pp-sec > summary { padding: 16px 22px !important; font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; }
.pp-sec > summary > span { display: inline-flex; align-items: center; gap: 10px; }
.pp-sec > summary > span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .9);
}
.pp-sec > summary .chev {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
}
.pp-sec[open] > summary { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.pp-sec-body { padding: 20px 22px 22px !important; }
.pp-sec-body > img { border: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); }

/* ---- Product page v2: closer to the reference (calm dark cards, title-case headers) ---- */
.pp-sec, .pp-aside > .edge-panel {
  border-color: rgba(255,255,255,.07) !important; border-radius: 16px !important;
  background-color: rgba(20,20,22,.62) !important;
  box-shadow: 0 14px 36px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.pp-sec::before { display: none; }
.pp-sec > summary { padding: 16px 20px !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; }
.pp-sec > summary > span::before { display: none; }
.pp-sec > summary .chev { width: auto; height: auto; background: none; border: 0; font-size: 11px; color: var(--muted); }
.pp-sec[open] > summary { border-bottom: 0 !important; }
.pp-sec-body { padding: 0 20px 20px !important; }
.pp-sec-body > img { border-radius: 12px !important; max-height: 300px !important; box-shadow: none; }
.pp-sec .markdown-body { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.pp-sec > summary .count { background: rgba(255,255,255,.07); border-radius: 6px; }
.pp-aside > .edge-panel { padding: 16px !important; }
.pp-aside .buy-now { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.pp-aside .buy-btn { border-radius: 10px; height: 46px; }
.pp-aside .buy-list { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 4px 0 !important; margin-top: 14px; }
.pp-hero-inner { padding-top: 84px !important; }
.pp-title { font-size: clamp(28px, 4vw, 44px) !important; margin: 10px 0 8px !important; }

/* ======== Less gray, more glass: translucent tint + stronger blur, ambient glows behind ======== */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 420px at 12% 18%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(620px 520px at 88% 42%, rgba(var(--accent-rgb), .11), transparent 70%),
    radial-gradient(560px 460px at 30% 92%, rgba(var(--accent-rgb), .09), transparent 70%);
}
.glass-effect, .product-card, .feature-card, .stat-card, .review-card > div, .faq-item, .cart-item,
.summary-card, .profile-card, .error-card, .success-card, .bundle-card, .panel, .card, .edge-panel,
.pp-sec, .pp-aside > .edge-panel {
  background-color: rgba(12, 12, 14, .34) !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 45%, rgba(var(--accent-rgb), .03)) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}
.buy-tabs, .buy-list, .buy-support, .bundle-row, .variant-card, .rv-card {
  background-color: rgba(255, 255, 255, .025) !important;
}

/* Brighter ambient glows behind the glass (particles canvas sits on top of these) */
body::before {
  background:
    radial-gradient(640px 520px at 10% 16%, rgba(var(--accent-rgb), .24), transparent 70%),
    radial-gradient(720px 600px at 90% 40%, rgba(var(--accent-rgb), .18), transparent 70%),
    radial-gradient(640px 520px at 35% 95%, rgba(var(--accent-rgb), .16), transparent 70%) !important;
}

/* Calmer glows that drift with scroll */
body::before {
  background:
    radial-gradient(640px 520px at 10% 16%, rgba(var(--accent-rgb), .13), transparent 70%),
    radial-gradient(720px 600px at 90% 40%, rgba(var(--accent-rgb), .10), transparent 70%),
    radial-gradient(640px 520px at 35% 95%, rgba(var(--accent-rgb), .09), transparent 70%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 calc(var(--vx-sy, 0) * -.12px), 0 calc(var(--vx-sy, 0) * -.2px), 0 calc(var(--vx-sy, 0) * -.3px) !important;
  background-size: 100% 130% !important;
}

/* ======== No hard seams: hero/product header/footer/auth fade into the page background ======== */
.vx-hero { background: transparent !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); }
.pp-hero-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%);
}
.pp-hero-bg::after {
  background: linear-gradient(180deg, rgba(9,9,10,.55) 0%, rgba(9,9,10,.3) 50%, rgba(9,9,10,0) 100%),
              radial-gradient(60% 80% at 78% 30%, rgba(var(--accent-rgb), .2), transparent 70%) !important;
}
.pp-hero-inner { padding-bottom: 36px !important; }
footer { background: linear-gradient(180deg, transparent 0, rgba(9,9,10,.82) 90px) !important; border-top: 0 !important; }
.auth-page section.relative.min-h-screen { background: radial-gradient(60% 55% at 50% 0%, rgba(var(--accent-rgb), .14), transparent 70%) !important; }
body.auth-page { background: var(--bg) !important; }

/* Glows tile vertically (each fully inside its tile) so scrolling never exposes a hard edge */
body::before {
  background:
    radial-gradient(520px 340px at 10% 25%, rgba(var(--accent-rgb), .13), transparent 100%),
    radial-gradient(560px 360px at 90% 50%, rgba(var(--accent-rgb), .10), transparent 100%),
    radial-gradient(520px 340px at 35% 75%, rgba(var(--accent-rgb), .09), transparent 100%) !important;
  background-repeat: repeat-y !important;
  background-size: 100% 1600px !important;
  background-position: 0 calc(var(--vx-sy, 0) * -.12px), 0 calc(var(--vx-sy, 0) * -.2px), 0 calc(var(--vx-sy, 0) * -.3px) !important;
}

/* Products header: toned-down grid + aurora */
.hero-grid, .vx-grid {
  background-image:
    linear-gradient(rgba(236, 232, 221, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 232, 221, .022) 1px, transparent 1px) !important;
}
.aurora-layer { opacity: .4 !important; }

/* softer ambient glows */
body::before { opacity: .75; }

/* Logo: accent light sweeps through the logo's own shapes (masked by the logo image) */
.edge-logo { position: relative; display: inline-flex; align-items: center; }
.edge-logo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--logo-url) center / 100% 100% no-repeat; mask: var(--logo-url) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--accent-rgb), .95) 47%, #fff 50%, rgba(var(--accent-rgb), .95) 53%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8));
  animation: vx-logo-sweep 5.5s cubic-bezier(.45, .05, .3, 1) 1s infinite;
}
@keyframes vx-logo-sweep {
  0% { background-position: 140% 0; }
  40%, 100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) { .edge-logo::after { animation: none; opacity: 0; } }

/* Logo sweep v2: slower, wider band, stronger glow */
.edge-logo::after {
  background: linear-gradient(105deg, transparent 25%, rgba(var(--accent-rgb), .85) 42%, #fff 50%, rgba(var(--accent-rgb), .85) 58%, transparent 75%) 140% 0 / 300% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 1)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .9)) drop-shadow(0 0 22px rgba(var(--accent-rgb), .55));
  animation: vx-logo-sweep2 10s ease-in-out 1s infinite;
}
@keyframes vx-logo-sweep2 {
  0% { background-position: 140% 0; }
  65%, 100% { background-position: -40% 0; }
}
.edge-logo img { transition: filter .4s; animation: vx-logo-breathe 10s ease-in-out 1s infinite; }
@keyframes vx-logo-breathe {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .35)); }
}
@media (prefers-reduced-motion: reduce) { .edge-logo img { animation: none; } }

/* No opaque page-hero blocks / bottom fades (reviews, products, etc.): let the ambient background show through */
section[style*="background: var(--bg)"] { background: transparent !important; }
div[style*="linear-gradient(to top, var(--bg)"] { display: none !important; }
section.min-h-\[60vh\] { min-height: 38vh !important; padding-bottom: 24px; }

/* ======== Product page: no faded banner behind the header; rounded edition buttons ======== */
.pp-hero-bg { display: none !important; }

.buy-tabs { border-radius: 16px !important; }
.buy-tab, .variant-card.buy-tab { border-radius: 12px !important; }
.buy-tab.selected, .variant-card.buy-tab.selected {
  border-radius: 12px !important; overflow: hidden;
  background: radial-gradient(90% 140% at 50% 0%, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .08) 70%), rgba(255,255,255,.04) !important;
  border: 1px solid rgba(var(--accent-rgb), .45) !important;
  box-shadow: 0 0 18px -6px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.buy-tab.selected::before { display: none !important; }
.buy-tab.selected::after { inset: 0 !important; border-radius: inherit !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: .7; }

/* ======== Product images: never cropped; scaled down to fit entirely ======== */
.product-card .card-image { object-fit: contain !important; padding: 10px; background: rgba(0,0,0,.25); }
.product-card .relative.aspect-\[16\/10\] { background: rgba(255,255,255,.02); }
.pp-sec-body > img {
  display: block; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 340px !important;
  object-fit: contain !important; margin: 0 auto; background: rgba(0,0,0,.25);
}

/* ======== Product gallery ======== */
.pg-stage { position: relative; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.07); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.pg-stage > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; display: block; }
.pg-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(12,12,14,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; transition: background .15s, border-color .15s; z-index: 2; }
.pg-arrow:hover { background: rgba(var(--accent-rgb), .35); border-color: rgba(var(--accent-rgb), .6); }
.pg-arrow.prev { left: 12px; } .pg-arrow.next { right: 12px; }
.pg-count, .pg-zoom { position: absolute; z-index: 2; background: rgba(12,12,14,.55); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
.pg-count { left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.pg-zoom { right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; font-size: 12px; }
.pg-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.pg-thumb { flex: 0 0 auto; width: 96px; height: 62px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08); opacity: .6; transition: opacity .15s, border-color .15s, box-shadow .15s; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:hover { opacity: .9; }
.pg-thumb.active { opacity: 1; border-color: rgba(var(--accent-rgb), .8); box-shadow: 0 0 14px -4px rgba(var(--accent-rgb), .7); }
.pg-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(5,5,7,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 40px 70px; }
.pg-lightbox[hidden] { display: none; }
.pg-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px -20px #000; }
.pg-lightbox .pg-arrow { width: 46px; height: 46px; font-size: 15px; }
.pg-lightbox .pg-arrow.prev { left: 16px; } .pg-lightbox .pg-arrow.next { right: 16px; }
.pg-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
@media (max-width: 640px) { .pg-lightbox { padding: 60px 12px 20px; } .pg-thumb { width: 76px; height: 50px; } }