/* AetherX brand layer — on top of Porto/Bootstrap (loaded via <link>). */

:root {
  --primary: #6d4aff;
  --primary-rgb: 109, 74, 255;
  --aether-dark: #0c0c14;
  --aether-panel: #14141f;
  --aether-border: #23233a;
}

/* ---------- Typography (Porto pairing: Poppins headings / Open Sans body) ---------- */
html { background: #000000; }   /* pure-black base behind the animated particle canvas */
body {
  font-family: "Open Sans", Arial, sans-serif;
  background: transparent;       /* transparent so the particle canvas shows through */
  color: #d8d8e6;
}
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: "Poppins", Arial, sans-serif;
}
.main { min-height: 60vh; }

/* ---------- Animated particle background ---------- */
.aether-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* behind all content, above the page base colour */
  pointer-events: none;   /* never blocks clicks; mouse is tracked on window */
  display: block;
}

/* ---------- Page background pattern system (admin-selectable) ---------- */
/* A single fixed layer behind all content; the variant class paints it.
   See src/lib/backgrounds.ts + src/components/site/PageBackground.tsx. */
.aether-pagebg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background-color: #05050c;
}

/* aurora — drifting light blooms */
.aether-pagebg--aurora::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(30% 32% at 22% 28%, rgba(109,74,255,.40), transparent 70%),
    radial-gradient(26% 28% at 80% 60%, rgba(58,214,255,.24), transparent 70%),
    radial-gradient(32% 34% at 60% 12%, rgba(157,134,255,.22), transparent 70%),
    radial-gradient(30% 30% at 35% 88%, rgba(109,74,255,.20), transparent 70%);
  filter: blur(60px);
  animation: aether-bg-drift 22s ease-in-out infinite alternate;
}
@keyframes aether-bg-drift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%,-3%) scale(1.1); }
}

/* nebula — two static corner glows */
.aether-pagebg--nebula {
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(109,74,255,.24), transparent 60%),
    radial-gradient(46% 38% at 0% 100%, rgba(58,214,255,.14), transparent 60%),
    radial-gradient(40% 32% at 50% 50%, rgba(109,74,255,.06), transparent 70%),
    #05050c;
}

/* nebula-pulse — animated nebula, glows breathe in/out */
.aether-pagebg--nebula-pulse { background: #05050c; }
.aether-pagebg--nebula-pulse::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(109,74,255,.30), transparent 60%),
    radial-gradient(46% 38% at 0% 100%, rgba(58,214,255,.18), transparent 60%),
    radial-gradient(40% 32% at 50% 50%, rgba(109,74,255,.07), transparent 70%);
  animation: aether-bg-breathe 9s ease-in-out infinite;
}
@keyframes aether-bg-breathe {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* grid — faint HUD grid fading out */
.aether-pagebg--grid::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 12%, rgba(109,74,255,.18), transparent 72%);
}
.aether-pagebg--grid::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(157,134,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,134,255,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 24%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 24%, #000 42%, transparent 100%);
}

/* grid-pulse — animated HUD grid: grid scrolls, glow sweeps down */
.aether-pagebg--grid-pulse::before {
  content: ""; position: absolute; inset: -44px 0;
  background-image:
    linear-gradient(rgba(157,134,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,134,255,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 24%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 24%, #000 42%, transparent 100%);
  animation: aether-bg-grid-scroll 6s linear infinite;
}
.aether-pagebg--grid-pulse::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 32% at 50% 0%, rgba(109,74,255,.26), transparent 70%);
  animation: aether-bg-grid-glow 7s ease-in-out infinite;
}
@keyframes aether-bg-grid-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(44px); }
}
@keyframes aether-bg-grid-glow {
  0% { transform: translateY(-10%); opacity: .5; }
  50% { transform: translateY(60%); opacity: 1; }
  100% { transform: translateY(140%); opacity: .5; }
}

/* dots — frozen, masked dot field */
.aether-pagebg--dots::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 44% at 50% 20%, rgba(109,74,255,.15), transparent 72%);
}
.aether-pagebg--dots::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(157,134,255,.34) 1.4px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 28%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 82% at 50% 28%, #000 30%, transparent 100%);
}

/* grain — diagonal violet wash + film grain */
.aether-pagebg--grain {
  background:
    radial-gradient(55% 45% at 85% 6%, rgba(109,74,255,.18), transparent 60%),
    linear-gradient(155deg, #0b0718 0%, #06060e 50%, #04040a 100%);
}
.aether-pagebg--grain::before {
  content: ""; position: absolute; inset: 0; opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* beam — top spotlight with vignette */
.aether-pagebg--beam::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 38% at 50% -6%, rgba(109,74,255,.32), transparent 66%),
    radial-gradient(26% 22% at 82% 3%, rgba(58,214,255,.12), transparent 70%);
}
.aether-pagebg--beam::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 min(30vw,340px) min(8vw,90px) rgba(0,0,0,.92);
}

/* beam-sweep — animated spotlight that glides left↔right */
.aether-pagebg--beam-sweep::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 38% at 50% -6%, rgba(109,74,255,.34), transparent 66%),
    radial-gradient(26% 22% at 50% 3%, rgba(58,214,255,.12), transparent 70%);
  animation: aether-bg-sweep 12s ease-in-out infinite alternate;
}
.aether-pagebg--beam-sweep::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 min(30vw,340px) min(8vw,90px) rgba(0,0,0,.92);
}
@keyframes aether-bg-sweep {
  0% { transform: translateX(-22%); }
  100% { transform: translateX(22%); }
}

@media (prefers-reduced-motion: reduce) {
  .aether-pagebg--aurora::before,
  .aether-pagebg--nebula-pulse::before,
  .aether-pagebg--grid-pulse::before,
  .aether-pagebg--grid-pulse::after,
  .aether-pagebg--beam-sweep::before { animation: none; }
}

/* ---------- Primary color wired through Porto ---------- */
.text-primary, .text-color-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #5a39e0;
  --bs-btn-hover-border-color: #5a39e0;
  --bs-btn-active-bg: #5a39e0;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  box-shadow: 0 8px 24px -10px rgba(var(--primary-rgb), 0.7);
}
.badge.bg-secondary { background: #2a2a40 !important; }

/* ---------- Header / nav ---------- */
/* Floating, centered, rounded-rectangle nav bar that overlays the hero (fixed). */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; background: transparent; }
#header .header-body.aether-header-bar {
  position: relative !important;   /* beat Porto's sticky position:fixed */
  top: auto !important; left: auto !important; right: auto !important;
  width: min(1240px, calc(100% - 28px)) !important;
  margin: 14px auto 0 !important;  /* …so margin-auto can center it */
  border: 1px solid var(--aether-border);
  border-radius: 18px;
  background: rgba(12, 12, 20, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.8);
  z-index: 1001;
}
/* logo + nav on the left, actions pushed right (margin-left:auto on actions) */
.aether-header-row { display: flex; align-items: center; gap: 14px; }
.aether-header-row > * { min-width: 0; }
/* clear the fixed header on every page… */
.main { padding-top: 92px; }
/* …but let the home hero slide up under it so the media covers the very top */
.aether-hero { margin-top: -92px; }
@media (max-width: 575.98px) {
  #header .header-body.aether-header-bar { width: calc(100% - 18px); margin-top: 10px; border-radius: 14px; }
  .main { padding-top: 76px; }
  .aether-hero { margin-top: -76px; }
}
#header .header-nav-main nav > ul > li > a { color: #e9e9f4; font-weight: 600; }
#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li.dropdown:hover > a { color: var(--primary); }
#header .header-nav-main-effect-1 nav > ul > li > a::before { background: var(--primary); }
.header-nav-features .header-nav-feature .badge { background: var(--primary); }

/* ---------- Hero ---------- */
.aether-hero {
  position: relative;
  overflow: hidden;
  background: #000;                  /* base behind the media */
}

/* Cover mode — full-viewport background that fills & crops (video, or image set to "fill"). */
.aether-hero--cover {
  min-height: 100vh;                 /* full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 0 90px;             /* keep content clear of the fixed header */
}
.aether-hero--cover .aether-hero-bg { position: absolute; inset: 0; z-index: 0; }
.aether-hero--cover .aether-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Fit mode — show the WHOLE banner at its natural aspect ratio, scaled to the viewport width.
   The image sits in normal flow so it defines the hero height (any banner size), never cropped. */
.aether-hero--fit .aether-hero-bg { position: relative; z-index: 0; }
.aether-hero--fit .aether-hero-media { display: block; width: 100%; height: auto; }
.aether-hero--fit::after { display: none; }               /* no grid texture over banner art */
.aether-hero--fit .aether-hero-bg::after { display: none; } /* no heavy scrim dimming the banner */

/* Configurable bottom fade so the hero image blends into the page (no abrupt cut).
   The gradient (start %) is applied inline from settings; this just positions it. */
.aether-hero-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.aether-hero-embed { position: absolute; inset: 0; overflow: hidden; }
.aether-hero-embed iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;          /* 16:9 by width… */
  min-height: 100vh; min-width: 177.78vh; /* …but cover by height too */
  border: 0;
}
/* readability scrim over the media, blending to black at the bottom (cover mode) */
.aether-hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 75% -10%, rgba(var(--primary-rgb), 0.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.86) 86%, #000 100%);
}
/* subtle grid texture above the media, below the content (cover mode) */
.aether-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  pointer-events: none;
}
/* Each hero piece is placed independently, anchored in PERCENT (left/top/transform set
   inline from the admin position settings) so the layout is identical across resolutions. */
.aether-hero-el {
  position: absolute;
  z-index: 2;
  width: min(92%, 640px);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}
.aether-hero h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }

/* Per-element entrance animations — order/timing driven by inline animation-delay. */
.aether-hero-anim { animation-duration: 0.7s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.aether-hero-anim--none { animation: none; }
.aether-hero-anim--fade { animation-name: axHeroFade; }
.aether-hero-anim--up { animation-name: axHeroUp; }
.aether-hero-anim--down { animation-name: axHeroDown; }
@keyframes axHeroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes axHeroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes axHeroDown { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aether-hero-anim { animation: none !important; } }
.aether-gradient-text {
  background: linear-gradient(100deg, #9d86ff, #6d4aff 40%, #3ad6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aether-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: #c9bcff; font-size: 13px; font-weight: 600;
}

/* ---------- Feature / icon boxes ---------- */
.aether-feature {
  background: var(--aether-panel);
  border: 1px solid var(--aether-border);
  border-radius: 14px;
  padding: 26px 22px;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.aether-feature:hover { transform: translateY(-4px); border-color: rgba(var(--primary-rgb), 0.6); }
.aether-feature .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--primary), #3ad6ff);
  margin-bottom: 14px;
}

/* ---------- Section panels ---------- */
/* transparent so the animated particle background shows through these full-width sections */
.aether-section-dark { background: transparent; }
.aether-section-panel { background: linear-gradient(180deg, rgba(14,14,24,0.55), rgba(10,10,18,0.35)); }
.card { background: var(--aether-panel); border: 1px solid var(--aether-border); color: #d8d8e6; }
.table { --bs-table-color: #d8d8e6; --bs-table-border-color: var(--aether-border); }

/* ---------- Product cards (whole card is a bubble) ---------- */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;       /* fades into the black page at rest */
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 12px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.product:hover {
  transform: translateY(-6px);
  background: rgba(var(--primary-rgb), 0.10);   /* purple-ish only on hover */
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 18px 44px -22px rgba(var(--primary-rgb), 0.7);
}
.product .product-thumb-info,
.product:hover .product-thumb-info {
  /* no box around the image — product PNGs carry their own border/styling.
     Override Porto's white background + grey borders (incl. its :hover white). */
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* kill Porto's dark image overlay on hover too */
.product:hover .product-thumb-info .product-thumb-info-image:before { opacity: 0; }
/* action buttons pinned to the bottom so cards line up regardless of name length */
.product .aether-card-actions { margin-top: auto; }
.product .aether-card-btn {
  font-size: 12.5px; font-weight: 600; padding: 7px 10px; white-space: nowrap;
}
.aether-card-btn-disabled {
  background: rgba(255,255,255,0.06); color: #8a8aa6 !important;
  border: 1px solid var(--aether-border); cursor: not-allowed; opacity: 1;
}
/* out-of-stock "fade" style: keep the primary look but dimmed & non-clickable */
.aether-card-btn-faded { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); }
.aether-card-btn-faded:hover { opacity: 0.4; }

/* ---------- Stock indicator — gaming-HUD signal-bar chip ---------- */
/* Hide the stock indicator on multi-product listings when the admin turns it off.
   Only ProductCard uses .aether-stock, so the product detail page is unaffected. */
[data-card-stock="off"] .aether-stock { display: none; }
.aether-stock {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  color: #e9e9f4;
  background: rgba(10,10,18,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
}
/* glowing status dot */
.aether-stock-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #6a6a80;
}

/* in stock — green dot, soft steady glow */
.aether-stock--high .aether-stock-label { color: #7fe6a8; }
.aether-stock--high .aether-stock-dot {
  background: #2ee07a;
  box-shadow: 0 0 6px 1px rgba(46,224,122,0.85), 0 0 12px 2px rgba(46,224,122,0.4);
}

/* low stock — orange dot, gentle pulse to signal urgency */
.aether-stock--low .aether-stock-label { color: #ffce7a; }
.aether-stock--low .aether-stock-dot {
  background: #ffae33;
  box-shadow: 0 0 6px 1px rgba(255,174,51,0.9), 0 0 12px 2px rgba(255,174,51,0.45);
  animation: aether-stock-pulse 1.4s ease-in-out infinite;
}
@keyframes aether-stock-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* out of stock — red dot */
.aether-stock--out { background: rgba(40,12,14,0.6); border-color: rgba(255,77,79,0.4); }
.aether-stock--out .aether-stock-label { color: #ff9a9b; }
.aether-stock--out .aether-stock-dot {
  background: #ff4d4f;
  box-shadow: 0 0 6px 1px rgba(255,77,79,0.85), 0 0 12px 2px rgba(255,77,79,0.4);
}
.product-thumb-info-image {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent; padding: 0;   /* no surrounding box; image shows as-is */
}
/* Rectangle (banner) product art — admin-toggled via [data-prod-shape] on #main.
   Drives both the card frame and the product-detail image box from one attribute. */
[data-prod-shape="rectangle"] .product-thumb-info-image { aspect-ratio: 16 / 9; }
.aether-detail-image { aspect-ratio: 1 / 1; }
[data-prod-shape="rectangle"] .aether-detail-image { aspect-ratio: 16 / 9; }
/* contain = the whole image fits inside the square card, never cropped */
.product-thumb-info-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.product:hover .product-thumb-info-image img { transform: scale(1.04); }
.product .aether-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em;
}
.product .aether-quickadd {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 18px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb), 0.9);
}
.product:hover .aether-quickadd { opacity: 1; transform: translateY(0); }
.product .aether-quickadd:hover { background: #5a39e0; }
.product-name a { color: #f0f0f8; }
.product-name a:hover { color: var(--primary); }

/* links */
a { color: inherit; }
a.text-muted:hover { color: var(--primary) !important; }

/* ============================================================
   Global dark theming — lifts every page (auth, shop, checkout,
   account, admin) cohesively onto the AetherX dark theme.
   ============================================================ */

/* Inner-page header band */
.aether-page-header {
  position: relative;
  overflow: hidden;
  padding: 56px 0 40px;
  background:
    radial-gradient(700px 240px at 80% -40%, rgba(var(--primary-rgb), 0.28), transparent 60%),
    linear-gradient(180deg, #100f1e 0%, #0a0a12 100%);
  border-bottom: 1px solid var(--aether-border);
  margin-bottom: 40px;
}
.aether-page-header h1 { font-family: "Poppins"; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; }
.aether-page-header .breadcrumb { --bs-breadcrumb-divider-color: #6b6b88; margin: 0; }
.aether-page-header .breadcrumb a { color: #9a9ab4; text-decoration: none; }
.aether-page-header .breadcrumb a:hover { color: var(--primary); }
.aether-page-header .breadcrumb-item.active { color: #c7c7e0; }

/* Forms */
.form-control, .form-select {
  background-color: #101019;
  border: 1px solid var(--aether-border);
  color: #e6e6f2;
}
.form-control::placeholder { color: #6b6b88; }
.form-control:focus, .form-select:focus {
  background-color: #101019;
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}
.form-control:disabled, .form-select:disabled { background-color: #0c0c14; color: #6b6b88; }
.form-label { color: #b9b9d0; font-weight: 600; }
.form-select option { background: #14141f; color: #e6e6f2; }
textarea.form-control { min-height: 90px; }

/* Cards / panels */
.card { border-radius: 14px; }
.card-title { color: #fff; font-family: "Poppins"; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-striped-color: #d8d8e6; color: #d8d8e6; }
.table > :not(caption) > * > * { border-bottom-color: var(--aether-border); background: transparent; }
.table thead th { color: #8a8aa6; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; border-bottom-color: var(--aether-border); }
.table-hover > tbody > tr:hover > * { background: rgba(var(--primary-rgb), 0.06); color: #fff; }
.table code, .table .user-select-all { color: #c9bcff; }

/* Alerts */
.alert { border: 1px solid var(--aether-border); border-radius: 12px; }
.alert-info { background: rgba(58, 214, 255, 0.08); color: #bdecff; border-color: rgba(58,214,255,0.25); }
.alert-warning { background: rgba(255, 196, 0, 0.08); color: #ffe39a; border-color: rgba(255,196,0,0.25); }
.alert-success { background: rgba(40, 200, 120, 0.1); color: #b6f0cf; border-color: rgba(40,200,120,0.25); }

/* Dropdowns / pagination / badges */
.dropdown-menu { background: #14141f; border: 1px solid var(--aether-border); }
.dropdown-item { color: #d8d8e6; }
.dropdown-item:hover { background: rgba(var(--primary-rgb), 0.14); color: #fff; }
.pagination { --bs-pagination-bg: #101019; --bs-pagination-color: #d8d8e6; --bs-pagination-border-color: var(--aether-border);
  --bs-pagination-hover-bg: rgba(var(--primary-rgb),0.15); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--primary);
  --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); }
code { color: #c9bcff; }

/* Buttons polish */
.btn-outline-light { --bs-btn-border-color: #33334d; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0a0a12; }
.btn-outline-secondary { --bs-btn-color: #b9b9d0; --bs-btn-border-color: #33334d; --bs-btn-hover-bg: #23233a; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#33334d; }
.btn-success { --bs-btn-bg:#1fae6a; --bs-btn-border-color:#1fae6a; --bs-btn-hover-bg:#19945a; --bs-btn-hover-border-color:#19945a; }
.btn { border-radius: 10px; font-weight: 600; }

/* Admin sidebar */
aside .nav-link { color: #9a9ab4; border-radius: 8px; padding: 8px 12px; }
aside .nav-link:hover { color: #fff; background: rgba(var(--primary-rgb), 0.12); }

/* Auth card */
.aether-auth-card { background: var(--aether-panel); border: 1px solid var(--aether-border); border-radius: 16px; padding: 32px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }

/* details summary as button */
details > summary { cursor: pointer; list-style: none; display: inline-block; }
details > summary::-webkit-details-marker { display: none; }

/* ============================================================
   Contrast pass — guarantee every text element is human-readable
   on the dark theme (WCAG-AA-ish). Headings were inheriting
   Porto's dark color (invisible on dark bg).
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: #f4f4fa; }
.h1, .h2, .h3, .h4, .h5, .h6 { color: #f4f4fa; }
/* secondary text: lift muted/dark Porto greys to a readable tone */
.text-muted { color: #9a9ab4 !important; }   /* ~5:1 on #0a0a10 */
.text-color-dark { color: #ececf4 !important; }
.text-color-default { color: #c4c4d6 !important; }
.card-title, .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5 { color: #f4f4fa; }
/* table cells + labels readable */
.table { color: #d8d8e6; }
.table thead th { color: #9a9ab4; }
/* breadcrumb + small print */
.breadcrumb-item.active { color: #c7c7e0; }
small, .text-2, .text-1 { color: inherit; }
/* gradient text must keep its clip (don't let heading color override it) */
.aether-gradient-text { color: transparent; }

/* CTA band — give it real presence + AA text contrast */
.aether-cta {
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(var(--primary-rgb), 0.35), transparent 70%),
    linear-gradient(120deg, #1a1640 0%, #120f26 60%, #0c1230 100%);
  border-top: 1px solid rgba(var(--primary-rgb), 0.35);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.35);
}
.aether-cta h2 { color: #ffffff; }
.aether-cta p { color: #d7d2ff; }

/* Header: vertically center sign-in + cart, consistent sizing */
#header .header-nav-features, #header .header-row .d-flex { align-items: center; }
.header-cart-link { display: inline-flex; align-items: center; height: 38px; line-height: 1; }

/* ============================================================
   Product page + login — rich dark-native components
   ============================================================ */
/* Quantity stepper */
.aether-qty { display:inline-flex; align-items:center; border:1px solid var(--aether-border); border-radius:12px; overflow:hidden; background:#101019; }
.aether-qty button { width:44px; height:50px; border:0; background:transparent; color:#c7c7e0; font-size:20px; cursor:pointer; transition:background .15s, color .15s; }
.aether-qty button:hover { background:rgba(var(--primary-rgb),0.18); color:#fff; }
.aether-qty input { width:56px; height:50px; border:0; background:transparent; color:#fff; text-align:center; font-weight:700; -moz-appearance:textfield; }
.aether-qty input::-webkit-outer-spin-button, .aether-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Dark Bootstrap tabs */
.nav-tabs { border-bottom:1px solid var(--aether-border); }
.nav-tabs .nav-link { color:#9a9ab4; border:0; border-bottom:2px solid transparent; background:transparent; font-weight:600; padding:10px 18px; }
.nav-tabs .nav-link:hover { color:#fff; border-color:transparent; isolation:isolate; }
.nav-tabs .nav-link.active { color:#fff; background:transparent; border-bottom:2px solid var(--primary); }
.tab-pane { color:#c7c7e0; }

/* Rating stars */
.aether-stars { color:#ffc04d; letter-spacing:2px; }

/* Delivery chips */
.aether-chip-sm { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:10px; background:#14141f; border:1px solid var(--aether-border); color:#cfcfe0; font-size:13px; font-weight:600; }
.aether-chip-sm i { color:var(--primary); }

/* Out-of-stock / dark button now visible on dark bg */
.btn-dark { --bs-btn-bg:#23233a; --bs-btn-border-color:#33334d; --bs-btn-color:#aeaecb; --bs-btn-disabled-bg:#1a1a28; --bs-btn-disabled-border-color:#33334d; --bs-btn-disabled-color:#8a8aa6; }

/* Login split panel */
.aether-split { min-height: calc(100vh - 70px); }
.aether-split-art {
  position:relative; overflow:hidden;
  background:
    radial-gradient(640px 320px at 28% 18%, rgba(var(--primary-rgb),0.5), transparent 60%),
    radial-gradient(500px 300px at 80% 100%, rgba(58,214,255,0.18), transparent 60%),
    linear-gradient(160deg, #1b1742 0%, #0c0c18 100%);
}
.aether-split-art::after {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(ellipse 75% 75% at 40% 40%, #000 30%, transparent 100%);
}
.aether-split-art > * { position:relative; z-index:2; }
.aether-oauth-btn { display:flex; align-items:center; justify-content:center; gap:10px; height:46px; border-radius:12px; font-weight:600; border:1px solid var(--aether-border); background:#14141f; color:#e9e9f4; transition:border-color .2s, background .2s; }
.aether-oauth-btn:hover { border-color:var(--primary); background:#191926; color:#fff; }
.aether-divider { display:flex; align-items:center; gap:12px; color:#6b6b88; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:18px 0; }
.aether-divider::before, .aether-divider::after { content:""; flex:1; height:1px; background:var(--aether-border); }

/* ============================================================
   Cascade hardening — these MUST win over Bootstrap light-theme
   component defaults. aether.css is linked LAST in the <head>.
   ============================================================ */
.nav-tabs { background: transparent !important; border-bottom: 1px solid var(--aether-border) !important; }
.nav-tabs .nav-link { color: #9a9ab4 !important; background: transparent !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { color: #ffffff !important; }
.nav-tabs .nav-link.active { color: #ffffff !important; background: transparent !important; border-bottom: 2px solid var(--primary) !important; }
.tab-content, .tab-pane { background: transparent !important; }
.card { background: var(--aether-panel) !important; color: #d8d8e6; }
.form-control, .form-select { background-color: #101019 !important; color: #e6e6f2 !important; }
.table { color: #d8d8e6; }

/* Slide-in mini-cart drawer */
/* z-index sits ABOVE the fixed site header (#header z-index:1050) so the drawer
   and its close button are on top and clickable when open. */
.aether-drawer-overlay { position:fixed; inset:0; background:rgba(4,4,10,0.6); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1055; backdrop-filter:blur(2px); }
.aether-drawer-overlay.show { opacity:1; pointer-events:auto; }
.aether-drawer { position:fixed; top:0; right:0; height:100%; width:390px; max-width:92vw; background:#0e0e16; border-left:1px solid var(--aether-border); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:1060; display:flex; flex-direction:column; }
.aether-drawer.show { transform:translateX(0); box-shadow:-24px 0 60px -24px rgba(0,0,0,0.85); }
.aether-drawer-head { padding:18px 20px; border-bottom:1px solid var(--aether-border); }
.aether-drawer-body { flex:1 1 auto; overflow-y:auto; padding:6px 20px; }
.aether-drawer-foot { padding:18px 20px; border-top:1px solid var(--aether-border); background:#0b0b13; }

/* Porto's native scroll-to-top (theme.js injects it) — brand it */
html .scroll-to-top { background: var(--primary); color: #fff; border-radius: 12px; opacity: .92; }
html .scroll-to-top:hover, html .scroll-to-top:focus { background: #5a39e0; color: #fff; opacity: 1; }

/* Rounded bordered panel (no hover lift) — for tabs/content blocks */
.aether-panel { background: var(--aether-panel); border: 1px solid var(--aether-border); border-radius: 16px; }

/* Bootstrap accordion -> dark theme (default is light = white-on-white) */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: #d8d8e6;
  --bs-accordion-border-color: var(--aether-border);
  --bs-accordion-btn-color: #f4f4fa;
  --bs-accordion-btn-bg: #14141f;
  --bs-accordion-active-bg: #191926;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-btn-focus-border-color: var(--primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25);
}
.accordion-item { background: transparent; border-color: var(--aether-border); }
.accordion-button { font-weight: 600; border-radius: 10px !important; }
.accordion-button:not(.collapsed) { color: #fff; box-shadow: none; }
.accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.accordion-body { color: #c4c4d6; }

/* Clean header nav (replaces Porto header-nav-main layout quirks) */
.aether-nav { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aether-nav .nav-link { display: inline-flex; align-items: center; gap: 8px; color: #e9e9f4; font-weight: 600; padding: 7px 12px; font-size: 14.5px; white-space: nowrap; border-radius: 999px; text-decoration: none; transition: background .18s ease, color .18s ease; }
.aether-nav .nav-link:hover, .aether-nav .nav-link:focus, .aether-nav .nav-link.active { text-decoration: none; }
.aether-mobile-nav .nav-link, .aether-mobile-nav .nav-link:hover, .aether-mobile-nav .nav-link:focus { text-decoration: none; }
.aether-nav .nav-link .aether-nav-ic { font-size: 13px; opacity: 0.85; }
.aether-nav .nav-link:hover { color: #fff; background: rgba(var(--primary-rgb), 0.18); }
.aether-nav .nav-link:hover .aether-nav-ic { opacity: 1; color: var(--primary); }
.aether-mobile-nav .nav-link { display: flex; align-items: center; gap: 10px; color: #e9e9f4; font-weight: 600; padding: 10px 12px; border-radius: 12px; }
.aether-mobile-nav .nav-link .aether-nav-ic { width: 18px; text-align: center; font-size: 14px; opacity: 0.85; }
.aether-mobile-nav .nav-link:hover { color: #fff; background: rgba(var(--primary-rgb), 0.16); }

/* Remove Porto's bordered tab-content panel (the lingering "white border") */
.tab-content { border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; }

/* Consistent admin page titles (applied via .admin-main, no per-page edits) */
.admin-main h1 { font-size: 26px; font-weight: 800; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--aether-border); }
.admin-main h1 + p { margin-top: -14px; } /* tighten when a page added its own subtitle under h1 */
.admin-main .card { transition: border-color .2s ease; }
.admin-main .card:hover { border-color: #2e2e48; }
/* simplify: drop the divider (clashes with pages that have a subtitle under the h1) */
.admin-main h1 { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 18px !important; }
.admin-main h1 + p { margin-top: -10px !important; }

/* ============================================================
   Responsive / mobile sweep
   ============================================================ */
.aether-features-overlap { margin-top: -70px; }

@media (max-width: 991.98px) {
  .aether-hero--cover { padding: 72px 0 130px; }
  .aether-features-overlap { margin-top: 0; }      /* no overlap collision on stacked layout */
  .aether-page-header { padding: 40px 0 28px; margin-bottom: 28px; }
  .aether-drawer { width: 340px; }
}
/* Phones: a wide banner is too short to hold the overlay on top, so the pieces stack
   below the banner in document order (the percent positions are a desktop/tablet concern). */
@media (max-width: 767.98px) {
  .aether-hero--fit .aether-hero-el {
    position: static;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    padding: 0 18px;
    box-sizing: border-box;
  }
  .aether-hero--fit .aether-hero-media + .aether-hero-el { margin-top: 22px; }
  .aether-hero--fit .aether-hero-el + .aether-hero-el { margin-top: 14px; }
  .aether-hero--fit .aether-hero-el:last-child { margin-bottom: 30px; }
  .aether-hero--fit .aether-hero-el .d-flex { justify-content: center !important; }
  .aether-hero--fit .aether-hero-bg { background: #0b0b14; }
}
@media (max-width: 575.98px) {
  .aether-hero--cover { padding: 56px 0 100px; }
  .aether-hero h1 { font-size: 2.1rem !important; }
  .aether-section-dark, .aether-section-panel { padding-top: 32px !important; padding-bottom: 32px !important; }
  .aether-cta { padding: 48px 0 !important; }
  .aether-qty { transform: none; }
  /* prevent any accidental horizontal overflow */
  body { overflow-x: hidden; }
  .card-body { padding: 1rem; }
}

/* Loading skeletons (shimmer) */
.aether-skeleton { position: relative; overflow: hidden; background: #14141f; border: 1px solid var(--aether-border); border-radius: 10px; }
.aether-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: aether-shimmer 1.4s infinite; }
@keyframes aether-shimmer { 100% { transform: translateX(100%); } }

/* Inline (unstyled) links get the brand accent so they read as links; buttons/nav/utility links keep their own classes */
a:not([class]) { color: var(--primary); }
a:not([class]):hover { color: #9d86ff; text-decoration: underline; }

/* Brand-purple scrollbar */
* { scrollbar-color: #6c4afe #0a0a10; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a10; }
::-webkit-scrollbar-thumb { background: #6c4afe; border-radius: 10px; border: 2px solid #0a0a10; }
::-webkit-scrollbar-thumb:hover { background: #8467ff; }

/* Active nav link (current page) — same rounded bubble, brand-tinted */
.aether-nav .nav-link.active { color: #fff; background: rgba(var(--primary-rgb), 0.22); }
.aether-nav .nav-link.active .aether-nav-ic { opacity: 1; color: var(--primary); }
.aether-mobile-nav .nav-link.active { color: #fff; background: rgba(var(--primary-rgb), 0.20); }
.aether-mobile-nav .nav-link.active .aether-nav-ic { color: var(--primary); }

/* Accessibility: keyboard focus rings + skip-to-content */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, a:focus-visible, .nav-link:focus-visible { outline-offset: 3px; }
.aether-skip { position: absolute; left: 12px; top: -56px; z-index: 2000; background: var(--primary); color: #fff !important; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top .2s ease; }
.aether-skip:focus { top: 12px; }

/* Respect users who prefer reduced motion (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-appear-animation] { opacity: 1 !important; transform: none !important; }
}

/* Header user menu (logged-in) */
.aether-usermenu-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--aether-border); background: #14141f; color: #e9e9f4; font-size: 14px; font-weight: 600; cursor: pointer; max-width: 220px; text-decoration: none; }
.aether-usermenu-btn:hover, .aether-usermenu-btn:hover span { border-color: var(--primary); text-decoration: none; }
.aether-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), #3ad6ff); color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.aether-usermenu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; background: #14141f; border: 1px solid var(--aether-border); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.85); z-index: 1050; overflow: hidden; padding-bottom: 6px; }
.aether-usermenu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #d8d8e6; background: transparent; border: 0; text-decoration: none; font-size: 14px; cursor: pointer; }
.aether-usermenu-item:hover { background: rgba(var(--primary-rgb), 0.14); color: #fff; }
/* Porto's `a:not(.btn):hover` (0,2,1) underlines links — beat it for the menu items. */
.aether-usermenu .aether-usermenu-item:hover { text-decoration: none; }
.aether-usermenu-item i { width: 18px; text-align: center; color: #9a9ab4; }
.aether-usermenu-item:hover i { color: var(--primary); }

/* Expandable account orders */
.aether-order summary { list-style: none; cursor: pointer; outline: none; }
.aether-order summary::-webkit-details-marker { display: none; }
.aether-order summary::marker { content: ""; }
.aether-order-chev { transition: transform .2s ease; color: #9a9ab4; }
.aether-order[open] .aether-order-chev { transform: rotate(180deg); }
.aether-deliverable { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: #101019; border: 1px solid var(--aether-border); border-radius: 8px; }

/* Delivery instructions + fields shown after purchase (engine-rendered HTML) */
.aether-delivery-card { background: rgba(20,20,31,0.5); border: 1px solid var(--aether-border); border-radius: 12px; padding: 14px 16px; }
.ax-di-block :where(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
.ax-di-fields { display: flex; flex-direction: column; gap: 8px; margin: .6em 0; }
.ax-di-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ax-di-label { color: #9a9ab4; font-size: 13px; font-weight: 600; }
.ax-di-value { display: inline-block; background: #101019; border: 1px solid var(--aether-border); border-radius: 8px; padding: 5px 10px; color: #eaeaf4; font-size: 13px; word-break: break-all; transition: border-color .15s, color .15s; }
.ax-di-value.ax-di-copied { border-color: #35d07f; color: #7fe6a8; }
.ax-di-value.ax-di-copied::after { content: " ✓ copied"; font-size: 11px; }
.ax-di-note { color: #c7c7dc; font-size: 14px; background: rgba(109,74,255,0.08); border-left: 3px solid var(--primary); border-radius: 4px; padding: 8px 12px; margin: .5em 0; }

/* Admin-authored rich HTML (product descriptions) on the dark storefront */
.aether-rich { color: #c4c4d6; line-height: 1.65; }
.aether-rich h1, .aether-rich h2, .aether-rich h3, .aether-rich h4, .aether-rich h5, .aether-rich h6 { color: #fff; font-weight: 700; margin: 1.2em 0 .5em; }
.aether-rich a { color: var(--primary); text-decoration: underline; }
.aether-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.aether-rich ul, .aether-rich ol { padding-left: 1.4em; }
.aether-rich li { margin-bottom: .35em; }
.aether-rich code, .aether-rich pre { background: #101019; border: 1px solid var(--aether-border); border-radius: 6px; }
.aether-rich code { padding: 1px 6px; }
.aether-rich pre { padding: 12px; overflow: auto; }
.aether-rich blockquote { border-left: 3px solid var(--primary); margin: 0 0 1em; padding: .2em 0 .2em 1em; color: #b6b6cc; }
.aether-rich table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.aether-rich th, .aether-rich td { border: 1px solid var(--aether-border); padding: 8px 10px; text-align: left; }
.aether-rich th { background: rgba(255,255,255,0.04); color: #e9e9f4; }

/* Notification bell */
@keyframes aetherBellRing { 0%,100%{transform:rotate(0)} 10%,30%{transform:rotate(12deg)} 20%,40%{transform:rotate(-12deg)} 50%{transform:rotate(0)} }
.aether-bell-ring { animation: aetherBellRing 1.6s ease-in-out infinite; transform-origin: 50% 0; }
.aether-noti-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; }
.aether-noti-item:hover { background: rgba(var(--primary-rgb), 0.10); }
.aether-noti-icon { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), 0.16); color: var(--primary); font-size: 15px; }

/* Support chat thread */
.aether-chat { display: flex; flex-direction: column; gap: 14px; }
.aether-msg { max-width: 80%; display: flex; flex-direction: column; }
.aether-msg.from-me { align-self: flex-end; align-items: flex-end; }
.aether-msg.from-admin { align-self: flex-start; align-items: flex-start; }
.aether-msg-meta { font-size: 12px; color: #8a8aa6; margin-bottom: 4px; padding: 0 4px; }
.aether-msg-bubble { padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.aether-msg.from-me .aether-msg-bubble { background: linear-gradient(135deg, var(--primary), #5a36e8); color: #fff; border-bottom-right-radius: 4px; }
.aether-msg.from-admin .aether-msg-bubble { background: #1b1b2b; color: #e6e6f2; border: 1px solid var(--aether-border); border-bottom-left-radius: 4px; }

/* Toasts */
.aether-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.aether-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #14141f; color: #ececf6; border: 1px solid var(--aether-border); border-left-width: 3px; border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px -16px rgba(0,0,0,0.8); max-width: 340px; animation: aetherToastIn .22s ease; }
@keyframes aetherToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Header search ============ */
.aether-search { position: relative; display: flex; align-items: center; }
.aether-search-toggle { background: #14141f; border: 1px solid var(--aether-border); color: #c7c7e0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.aether-search-toggle:hover { color: #fff; }
.aether-search-field { position: relative; display: flex; align-items: center; width: 200px; height: 38px; background: #14141f; border: 1px solid var(--aether-border); border-radius: 999px; padding: 0 12px; transition: border-color .18s ease, box-shadow .18s ease, width .18s ease; }
.aether-search-field:focus-within { border-color: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16); }
.aether-search-ic { color: #8a8aa6; font-size: 14px; }
.aether-search-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #ececf6; font-size: 14px; padding: 0 8px; }
.aether-search-field input::placeholder { color: #7a7a96; }
.aether-search-clear { background: transparent; border: 0; color: #8a8aa6; padding: 2px 4px; line-height: 1; }
.aether-search-clear:hover { color: #fff; }

.aether-search-results { position: absolute; top: calc(100% + 10px); left: 0; width: 360px; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: #111120; border: 1px solid var(--aether-border); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8); padding: 6px; z-index: 1300; }
.aether-search-state { padding: 16px 14px; color: #9a9ab4; font-size: 14px; }
.aether-search-group + .aether-search-group { border-top: 1px solid var(--aether-border); margin-top: 4px; padding-top: 4px; }
.aether-search-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a96; font-weight: 700; padding: 8px 12px 4px; }
.aether-search-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: #e9e9f4; }
.aether-search-row:hover { background: rgba(var(--primary-rgb), 0.12); color: #fff; }
.aether-search-thumb { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #1c1c2c; border: 1px solid var(--aether-border); display: inline-flex; align-items: center; justify-content: center; color: #7a7a96; overflow: hidden; }
.aether-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aether-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aether-search-name { min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aether-search-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #9a9ab4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aether-search-price { flex: none; font-size: 13px; font-weight: 700; color: var(--primary); }
/* Never underline anything inside the search dropdown (beats Porto's link hover). */
.aether-search-results a,
.aether-search-results a:hover,
.aether-search-results a:focus { text-decoration: none !important; }
.aether-search-go { color: #7a7a96; font-size: 12px; }
.aether-search-all { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--aether-border); color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; }
.aether-search-all:hover { background: rgba(var(--primary-rgb), 0.12); border-radius: 10px; }
.aether-nav-ext { font-size: 10px; opacity: 0.6; margin-left: 6px; }

@media (max-width: 1199.98px) {
  /* Below xl: field is hidden until the toggle expands it into a full-width bar under the header
     (keeps the floating bar compact so the centered nav always fits). */
  .aether-search-field { display: none; }
  .aether-search.is-open .aether-search-field { display: flex; position: fixed; top: 92px; left: 20px; right: 20px; width: auto; z-index: 1300; }
  .aether-search.is-open .aether-search-results { width: 100%; left: 0; }
  .aether-search.is-open .aether-search-toggle { color: var(--primary); }
}
@media (min-width: 1200px) {
  .aether-search-toggle { display: none !important; }
}

/* ============ Home — Browse Inventory menu + AJAX grid ============ */
/* Layout: a sticky left rail OUTSIDE the product column, wider than the site
   container so the menu sits to the left of the centered content and follows
   the scroll. Stacks above the grid on tablet/mobile. */
.aether-catalog {
  display: flex; align-items: flex-start; gap: 30px;
  max-width: 1520px; margin: 0 auto; padding: 0 24px;
}
.aether-catnav-rail { flex: 0 0 266px; }
@media (min-width: 992px) {
  .aether-catnav-rail { position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow-y: auto; }
}
.aether-catalog-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 991.98px) {
  .aether-catalog { flex-direction: column; gap: 20px; padding: 0 15px; }
  .aether-catnav-rail { flex: none; width: 100%; }
}
.aether-catnav {
  background: rgba(20, 20, 31, 0.55);
  border: 1px solid var(--aether-border);
  border-radius: 16px;
  padding: 14px 12px;
}
/* Kill Porto's link underline (incl. on hover/focus) for every menu item. */
.aether-catnav a,
.aether-catnav a:hover,
.aether-catnav a:focus { text-decoration: none !important; }
.aether-catnav-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7a7a96; padding: 4px 10px 10px;
}
.aether-catnav-list, .aether-catnav-cats { list-style: none; margin: 0; padding: 0; }
.aether-catnav-game {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: #d9d9ea; font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.aether-catnav-game:hover { background: rgba(var(--primary-rgb), 0.10); color: #fff; }
.aether-catnav-game.is-active {
  background: rgba(var(--primary-rgb), 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.45);
}
.aether-catnav-ico { width: 14px; font-size: 12px; color: #8a8aa6; flex: none; text-align: center; }
.aether-catnav-game.is-active .aether-catnav-ico { color: rgb(var(--primary-rgb)); }
.aether-catnav-name { flex: 1 1 auto; min-width: 0; }
.aether-catnav-count {
  flex: none; font-size: 11px; font-weight: 700; color: #8a8aa6;
  background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 1px 8px;
}
.aether-catnav-cats { margin: 2px 0 6px; padding-left: 12px; border-left: 1px solid var(--aether-border); margin-left: 18px; }
.aether-catnav-cat {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  color: #a9a9c2; font-weight: 500; font-size: 13px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.aether-catnav-cat:hover { background: rgba(var(--primary-rgb), 0.08); color: #fff; }
.aether-catnav-cat.is-active { color: #fff; background: rgba(var(--primary-rgb), 0.12); }
.aether-catnav-cat .aether-catnav-count { font-size: 10px; }

/* AJAX grid: loading dim + spinner overlay while a filter is fetching */
.aether-catalog-grid { position: relative; transition: opacity .18s ease; }
.aether-catalog-grid.is-loading { opacity: .45; pointer-events: none; }
.aether-catalog-spinner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 48px;
}

/* Entrance animations — cards fade-up (staggered), category submenu slides in */
@keyframes axCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.aether-cardin { animation: axCardIn .40s cubic-bezier(.2,.7,.3,1) both; }
@keyframes axCatIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.aether-catnav-cats { animation: axCatIn .22s ease both; }
@media (prefers-reduced-motion: reduce) {
  .aether-cardin, .aether-catnav-cats { animation: none !important; }
}

/* Shop search results grouped by game */
.aether-shop-group { margin-bottom: 8px; }
.aether-shop-group-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.aether-shop-group-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.aether-shop-group-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--aether-border); }

/* ============ Home FAQ — two-column accordion ============ */
/* NOTE: `scroll-behavior: smooth` on <html> was removed — it turned Next's
   instant scroll-to-top on route navigation into a broken smooth animation, so
   opening a product page left you scrolled mid-page. Smooth scrolling for
   in-page "#" anchors is handled by <HashScroll> instead (client component). */
.aether-faq-badge {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12); border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: #c9bcff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.w-questions-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1040px; margin: 0 auto;
  align-items: start;
}
.cQuestions_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cQuestion {
  background: var(--aether-panel); border: 1px solid var(--aether-border); border-radius: 14px;
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.cQuestion.is-active { border-color: rgba(var(--primary-rgb), 0.55); box-shadow: 0 18px 40px -26px rgba(var(--primary-rgb), 0.9); }
.cQuestion_title {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  color: #fff; font-family: "Poppins", Arial, sans-serif; font-weight: 600; font-size: 16px;
}
.cQuestion_title > span { flex: 1; min-width: 0; }
.cQuestion_icon { flex: none; color: #8a8aa6; font-size: 13px; transition: transform .25s ease, color .2s ease; }
.cQuestion.is-active .cQuestion_icon { transform: rotate(45deg); color: var(--primary); }
.cQuestion_answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.cQuestion.is-active .cQuestion_answer { grid-template-rows: 1fr; }
.cQuestion_answer .text { overflow: hidden; }
.cQuestion_answer .text p { margin: 0; padding: 0 20px 20px; color: #c4c4d6; font-size: 14.5px; line-height: 1.65; }
.cQuestion_answer .text p + p { padding-top: 10px; }
@media (max-width: 767.98px) {
  .w-questions-wrap { grid-template-columns: 1fr; gap: 12px; }
  .cQuestions_list { gap: 12px; }
  .cQuestion_title { padding: 15px 16px; font-size: 15px; gap: 10px; }
  .cQuestion_answer .text p { padding: 0 16px 16px; }
}

/* ============ Welcome / splash overlay ============ */
.welcome-overlay {
  display: flex; align-items: flex-end; justify-content: center;
  background: #000;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.55s ease;
  overflow: hidden;
}
.welcome-overlay.is-leaving { opacity: 0; }
.welcome-media-wrap { position: absolute; inset: 0; }
/* images & <video> cover the whole screen */
.welcome-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 0.8s ease;
}
.welcome-media.is-active { opacity: 1; }
.welcome-slider { position: absolute; inset: 0; }
/* embedded YouTube/Vimeo scaled to cover the viewport */
.welcome-embed { position: absolute; inset: 0; overflow: hidden; }
.welcome-embed iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;          /* 16:9 by width */
  min-height: 100vh; min-width: 177.78vh; /* …but cover by height too */
  border: 0;
}
/* readability gradient at the bottom for the hint */
.welcome-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 28%);
}
.welcome-hint {
  position: relative; z-index: 2;
  margin-bottom: clamp(28px, 7vh, 70px);
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; font-family: "Poppins", Arial, sans-serif; font-weight: 600;
  font-size: clamp(15px, 2.2vw, 20px); letter-spacing: 0.02em;
  padding: 12px 24px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: welcomeFloat 2.4s ease-in-out infinite;
}
.welcome-hint-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.7);
  animation: welcomePulse 1.8s ease-out infinite;
}
@keyframes welcomeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes welcomePulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.6); }
  100% { box-shadow: 0 0 0 14px rgba(var(--primary-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-hint, .welcome-hint-pulse { animation: none; }
}

/* Product page: back button overlaid on image + category link above title (2026-07-03) */
.aether-back-btn{
  display:inline-flex; align-items:center; gap:2px;
  padding:7px 14px; border-radius:999px;
  background:rgba(10,10,18,0.62); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.14); color:#f0f0f8;
  font-size:13px; font-weight:600; line-height:1; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.aether-back-btn:hover{ background:rgba(109,74,255,0.30); border-color:rgba(109,74,255,0.55); transform:translateX(-2px); }
.aether-cat-link{ transition:color .15s ease; }
.aether-cat-link:hover{ color:var(--aether-primary,#6d4aff) !important; text-decoration:underline !important; }

/* Game cards on /games — product-style image + name (2026-07-03) */
.aether-game-card{
  display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  background:#14141f; border:1px solid transparent;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.aether-game-card:hover{ border-color:rgba(109,74,255,0.45); transform:translateY(-3px); box-shadow:0 16px 40px -20px rgba(109,74,255,0.5); }
.aether-game-card-media{
  position:relative; width:100%; aspect-ratio:16/10; background:#101019;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.aether-game-card-fallback{ font-size:34px; color:#4a4a63; }
.aether-game-card-name{
  padding:12px 12px; text-align:center; font-family:Poppins,sans-serif; font-weight:600;
  color:#f0f0f8; font-size:15px;
}

/* ---- Product variant selector (product detail) — vertical list of priced options ---- */
.aether-variants{ max-width:560px; }
.aether-variant-list{ display:flex; flex-direction:column; gap:10px; }
.aether-variant-chip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; text-align:left;
  border:1px solid var(--aether-border,#23233a);
  background:#14141f; color:#e6e6f2;
  border-radius:12px; padding:14px 18px; font-size:15px; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.aether-variant-chip:hover{ border-color:rgba(109,74,255,0.55); }
.aether-variant-chip.is-active{
  border-color:#6d4aff; background:rgba(109,74,255,0.14);
  box-shadow:0 0 0 1px #6d4aff inset;
}
.aether-variant-chip.is-oos{ opacity:.6; }
.aether-variant-name{ display:flex; align-items:baseline; gap:8px; }
.aether-variant-price{ color:#a58bff; font-weight:800; font-size:16px; white-space:nowrap; }
.aether-variant-oos{ color:#ff6b6b; font-size:12px; font-weight:600; }

/* ---- Auth modal (same-page login / register) ---- */
.aether-authmodal-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(4,4,10,0.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:axFadeIn .2s ease;
}
.aether-authmodal{
  position:relative; width:100%; max-width:420px;
  background:#101019; border:1px solid var(--aether-border,#23233a); border-radius:18px;
  padding:26px 24px; max-height:calc(100vh - 40px); overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,0.6);
  animation:axModalIn .22s cubic-bezier(.2,.8,.2,1);
}
.aether-authmodal-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:9px;
  background:#14141f; border:1px solid var(--aether-border,#23233a); color:#c7c7e0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.aether-authmodal-close:hover{ color:#fff; border-color:rgba(109,74,255,0.5); }
.aether-authtoggle{ display:flex; gap:6px; background:#0c0c14; border:1px solid var(--aether-border,#23233a); border-radius:12px; padding:4px; }
.aether-authtoggle button{
  flex:1; border:0; background:transparent; color:#9a9ab4; font-weight:700; font-size:14px;
  padding:9px 0; border-radius:9px; cursor:pointer; transition:background .15s, color .15s;
}
.aether-authtoggle button.is-active{ background:rgba(109,74,255,0.16); color:#fff; box-shadow:0 0 0 1px #6d4aff inset; }
@keyframes axFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes axModalIn{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }
/* button styled as an inline text link (auth triggers inside paragraphs) */
.aether-linkbtn{ background:none; border:0; padding:0; color:var(--primary); cursor:pointer; font:inherit; }
.aether-linkbtn:hover{ text-decoration:underline; }

/* Center the Cloudflare Turnstile widget (auth modal) */
.aether-turnstile{ display:flex; justify-content:center; }

/* ---- Customizable user menu items (heading / label / divider / variants) ---- */
.aether-usermenu-heading { display:flex; align-items:center; gap:10px; padding:12px 16px 4px; color:#f0f0f8; font-weight:600; font-size:14px; }
.aether-usermenu-heading i { width:18px; text-align:center; color:#9a9ab4; }
.aether-usermenu-label { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 16px 10px; }
.aether-usermenu-label-text { display:flex; align-items:center; gap:10px; color:#9a9ab4; font-size:13px; }
.aether-usermenu-label-text i { width:18px; text-align:center; }
.aether-usermenu-label-value { color:var(--primary); font-weight:700; white-space:nowrap; }
.aether-usermenu-divider { height:1px; background:var(--aether-border); margin:6px 0; }
.aether-usermenu-item--danger, .aether-usermenu-item--danger i { color:#ff6b6b; }
.aether-usermenu-item--danger:hover { background:rgba(255,107,107,0.12); color:#ff8585; }
.aether-usermenu-item--primary, .aether-usermenu-item--primary i { color:var(--primary); }

/* ---- Marketplace game cards (Phase 02) ---- */
.aether-mp-gamecard{background:#14141f;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;display:flex;flex-direction:column}
.aether-mp-gamecard:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.45);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.aether-mp-gamecard-img{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#0e0e17;display:flex;align-items:center;justify-content:center;color:#3a3a4d;font-size:44px}
.aether-mp-gamecard-name{padding:.7rem .8rem;font-weight:600;color:#f0f0f8;text-align:center}

/* Marketplace listing card (browse grid, Phase 04) */
.aether-mp-listing{background:#14141f;border:1px solid rgba(255,255,255,.06);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.aether-mp-listing:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.45);box-shadow:0 10px 28px rgba(0,0,0,.35)}

/* ---- Marketplace UI rework (2026-07-20) ---- */
/* Landing hero */
.aether-mp-hero{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(139,92,246,.22);background:
  radial-gradient(60% 90% at 20% 0%, rgba(109,74,255,.28), transparent 65%),
  radial-gradient(50% 80% at 85% 100%, rgba(58,214,255,.14), transparent 60%),
  #10101b;padding:4rem 1.5rem}
.aether-mp-hero-inner{max-width:680px;margin:0 auto;text-align:center}
.aether-mp-hero-title{font-weight:800;font-size:clamp(2rem,4.5vw,3rem);color:#fff;margin-bottom:.75rem}
.aether-mp-hero-sub{color:#b9b9cf;font-size:1.05rem;margin:0 auto 1.5rem;max-width:560px}
/* Quick links */
.aether-mp-quicklinks{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.aether-mp-quicklink{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;background:#14141f;border:1px solid rgba(255,255,255,.08);color:#d6d6e8;font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.aether-mp-quicklink:hover{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.12);color:#fff}
.aether-mp-quicklink i{color:var(--primary,#8b5cf6);font-size:.95rem}
/* Trust strip */
.aether-mp-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.aether-mp-trust-item{display:flex;gap:.9rem;align-items:flex-start;background:#12121c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1.1rem 1.2rem}
.aether-mp-trust-item>i{color:var(--primary,#8b5cf6);font-size:1.4rem;margin-top:.15rem}
.aether-mp-trust-title{font-weight:700;color:#f0f0f8}
.aether-mp-trust-sub{color:#a9a9c5;font-size:.925rem}
/* Game card body (name + count) */
.aether-mp-gamecard-body{padding:.7rem .8rem;text-align:center}
.aether-mp-gamecard-body .aether-mp-gamecard-name{padding:0}
.aether-mp-gamecard-count{color:#a0a0bb;font-size:.9rem;margin-top:.15rem}
/* Browse listing card */
.aether-mp-listing-img{aspect-ratio:16/10;background-color:#0e0e17;background-size:cover;background-position:center;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;color:#3a3a4d;font-size:34px}
.aether-mp-listing-price{font-weight:800;font-size:1.15rem;color:#fff}
/* Search pill (browse + my listings) */
.aether-mp-search{display:flex;align-items:center;gap:.55rem;background:#14141f;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.45rem 1rem;min-width:240px;flex:1 1 240px;max-width:380px}
.aether-mp-search:focus-within{border-color:rgba(139,92,246,.6)}
.aether-mp-search i{color:#8a8aa3;font-size:.85rem}
.aether-mp-search input{background:transparent;border:0;outline:0;color:#f0f0f8;width:100%;font-size:.95rem}
.aether-mp-search input::placeholder{color:#6b6b88}
/* Status filter chips (my listings) */
.aether-mp-chip{background:#14141f;border:1px solid rgba(255,255,255,.1);color:#c2c2d8;border-radius:999px;padding:.4rem .95rem;font-size:.9rem;font-weight:600;transition:border-color .15s,background .15s,color .15s}
.aether-mp-chip:hover{border-color:rgba(139,92,246,.5);color:#fff}
.aether-mp-chip.is-active{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.65);color:#fff}
/* My-listing rows */
.aether-mp-mylisting-thumb{width:76px;height:76px;object-fit:cover;border-radius:10px}
.aether-mp-mylisting-thumb--empty{background:#0e0e17;display:flex;align-items:center;justify-content:center;color:#3a3a4d;font-size:22px}
/* Listing detail: gallery */
.aether-mp-gallery-main{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0e0e17;border:1px solid rgba(255,255,255,.06)}
.aether-mp-gallery-main img{width:100%;height:100%;object-fit:contain;display:block}
.aether-mp-gallery-empty{display:flex;align-items:center;justify-content:center;color:#3a3a4d;font-size:52px}
.aether-mp-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(10,10,18,.72);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;backdrop-filter:blur(4px)}
.aether-mp-gallery-nav:hover{background:rgba(139,92,246,.55);border-color:rgba(139,92,246,.8)}
.aether-mp-gallery-nav--prev{left:12px}
.aether-mp-gallery-nav--next{right:12px}
.aether-mp-gallery-count{position:absolute;right:12px;bottom:10px;background:rgba(10,10,18,.72);color:#e2e2f2;font-size:.85rem;font-weight:600;padding:.15rem .6rem;border-radius:999px;backdrop-filter:blur(4px)}
.aether-mp-gallery-thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.25rem}
.aether-mp-gallery-thumb{flex:0 0 auto;width:84px;height:56px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:#0e0e17;opacity:.65;transition:opacity .15s,border-color .15s}
.aether-mp-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.aether-mp-gallery-thumb:hover{opacity:1}
.aether-mp-gallery-thumb.is-active{opacity:1;border-color:var(--primary,#8b5cf6)}
/* Listing detail: buy card + specs */
.aether-mp-buycard{background:#12121c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.5rem}
.aether-mp-buycard-game{color:var(--primary,#8b5cf6);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.aether-mp-buycard-title{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.aether-mp-buycard-price{font-size:2.3rem;font-weight:800;color:#fff;margin:.5rem 0 1rem;line-height:1}
.aether-mp-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.aether-mp-spec{background:#12121c;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:.9rem 1.1rem}
.aether-mp-spec-label{color:#a0a0bb;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.aether-mp-spec-value{color:#f0f0f8;font-weight:700;font-size:1.05rem;word-break:break-word}

/* ---- Marketplace readability pass + sell-form rework (2026-07-20b) ---- */
/* Readable metadata line — use instead of `text-muted small` on marketplace pages. */
.aether-mp-meta{color:#a9a9c5;font-size:.925rem}
.aether-mp-meta strong,.aether-mp-meta .text-body{color:#f0f0f8}
/* Info strip — replaces fine-print notes with a proper container. */
.aether-mp-note{display:flex;gap:.65rem;align-items:flex-start;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.28);border-radius:10px;padding:.75rem .95rem;color:#cfcfe6;font-size:.925rem;line-height:1.45}
.aether-mp-note>i{color:var(--primary,#8b5cf6);margin-top:.2rem;flex:0 0 auto}
.aether-mp-note--danger{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.35);color:#ffb4b4}
.aether-mp-note--danger>i{color:#ff6b6b}
/* Delivered-secret panel (buyer orders) */
.aether-mp-secret{background:#0e0e17;border:1px solid rgba(139,92,246,.3);border-radius:12px;padding:1rem 1.1rem;margin-top:1rem}
.aether-mp-secret-head{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#f0f0f8;margin-bottom:.5rem}
.aether-mp-secret-head i{color:var(--primary,#8b5cf6)}
.aether-mp-secret pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#e2e2f2;font-size:.95rem;background:transparent;border:0;padding:0}
/* Filters panel (browse sidebar) */
.aether-mp-filters{background:#12121c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.35rem 1.4rem}
.aether-mp-filters-title{display:flex;align-items:center;gap:.55rem;font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:1.1rem}
.aether-mp-filters-title i{color:var(--primary,#8b5cf6);font-size:.95rem}
.aether-mp-filters .form-label{font-weight:600;color:#d6d6e8;font-size:.95rem;margin-bottom:.35rem}
/* Sell/edit form sections */
.aether-mp-form-section{background:#12121c;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:1.5rem 1.6rem}
.aether-mp-form-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.4rem}
.aether-mp-form-num{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.5);color:#c9b8ff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.aether-mp-form-title{font-size:1.2rem;font-weight:800;color:#fff;margin:0}
.aether-mp-form-sub{color:#a9a9c5;font-size:.95rem;margin:0 0 1.15rem;padding-left:calc(32px + .85rem)}
.aether-mp-form-section .form-label{font-weight:600;color:#d6d6e8;font-size:.95rem}
.aether-mp-form-switch{background:#0e0e17;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.7rem .9rem .7rem 3.2rem;height:100%;display:flex;align-items:center}
.aether-mp-form-switch .form-check-label{color:#d6d6e8;font-weight:600;font-size:.95rem}
.aether-mp-count{color:#8a8aa3;font-size:.85rem}
/* Sell-form image upload tiles */
.aether-mp-upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.7rem}
.aether-mp-upload-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.aether-mp-upload-item img{width:100%;height:100%;object-fit:cover;display:block}
.aether-mp-upload-del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,10,18,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:background .15s}
.aether-mp-upload-del:hover{background:#dc3545}
.aether-mp-upload-cover{position:absolute;left:6px;bottom:6px;background:rgba(139,92,246,.9);color:#fff;font-size:.72rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.aether-mp-upload-add{aspect-ratio:1;border:2px dashed rgba(139,92,246,.45);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#a9a9c5;cursor:pointer;background:rgba(139,92,246,.05);font-size:.875rem;font-weight:600;transition:border-color .15s,color .15s,background .15s;margin:0}
.aether-mp-upload-add:hover{border-color:rgba(139,92,246,.85);color:#fff;background:rgba(139,92,246,.12)}
.aether-mp-upload-add i{font-size:1.15rem;color:var(--primary,#8b5cf6)}
/* Price breakdown rows (sell form) */
.aether-mp-price-rows{display:flex;flex-direction:column;gap:.45rem}
.aether-mp-price-row{display:flex;justify-content:space-between;align-items:baseline;color:#a9a9c5;font-size:.95rem}
.aether-mp-price-row strong{color:#f0f0f8}
.aether-mp-price-row--total{border-top:1px solid rgba(255,255,255,.1);padding-top:.55rem;margin-top:.2rem;color:#d6d6e8;font-size:1rem}
.aether-mp-price-row--total strong{font-size:1.35rem;font-weight:800}
/* Dark input-group prefix ($ etc.) — input-groups are only used on marketplace forms. */
.input-group-text{background:#1a1a28;border-color:rgba(255,255,255,.14);color:#c2c2d8}
/* Notification preference rows (/account/notifications) */
.aether-mp-pref-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.aether-mp-pref-row:last-child{border-bottom:0;padding-bottom:.2rem}
.aether-mp-pref-label{color:#f0f0f8;font-size:1rem;font-weight:600}
.aether-mp-pref-toggles{display:flex;gap:1.5rem;flex-wrap:wrap}
.aether-mp-pref-toggle{display:flex;align-items:center;gap:.55rem;margin:0;padding:0;min-height:0}
.aether-mp-pref-toggle .form-check-input{width:2.5em;height:1.3em;margin:0;cursor:pointer;flex:0 0 auto;float:none}
.aether-mp-pref-toggle .form-check-label{color:#a9a9c5;font-size:.925rem;font-weight:600;cursor:pointer}