/* =======================================================
   JAX — purple / black SellAuth theme
   Custom layer (loaded after pro.css, so it wins)
   ======================================================= */

:root{
  --jax-accent: var(--cl-accent, #9d4edd);
  --jax-accent-rgb: var(--cl-accent-rgb, 157,78,221);
  --jax-bg: var(--cl-background-primary, #08070d);
  --jax-bg-2: var(--cl-background-secondary, #110d1c);
  --jax-card: rgba(255,255,255,.025);
  --jax-line: rgba(var(--jax-accent-rgb), .14);
  --jax-line-soft: rgba(255,255,255,.06);
  --jax-text: #f3effa;
  --jax-muted: #a89cba;
  --jax-radius: 18px;
  --jax-glow: 0 0 0 1px rgba(var(--jax-accent-rgb),.25), 0 18px 50px -12px rgba(var(--jax-accent-rgb),.45);
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
.jax-body{
  background: var(--jax-bg);
  color: var(--jax-text);
  font-family: var(--bs-font-sans-serif);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
a{ color:inherit; }
::selection{ background:rgba(var(--jax-accent-rgb),.35); color:#fff; }

/* ---------- ambient background ---------- */
.jax-aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.jax-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.jax-orb-1{
  width:50vw; height:50vw; top:-12vw; left:-8vw;
  background:radial-gradient(circle, rgba(var(--jax-accent-rgb),.55), transparent 65%);
  animation:jaxFloat 18s ease-in-out infinite;
}
.jax-orb-2{
  width:42vw; height:42vw; right:-10vw; top:18vw;
  background:radial-gradient(circle, rgba(120,40,200,.45), transparent 65%);
  animation:jaxFloat 22s ease-in-out infinite reverse;
}
.jax-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}
@keyframes jaxFloat{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(2vw,3vw,0) } }
@media (prefers-reduced-motion: reduce){ .jax-orb{ animation:none } html{ scroll-behavior:auto } }

/* ============================================================
   NAVBAR
   ============================================================ */
.jax-navbar{
  background:rgba(8,7,13,.7);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--jax-line-soft);
  transition:box-shadow .3s ease, background .3s ease;
}
.jax-navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--jax-accent-rgb),.7), transparent);
  background-size:200% 100%; animation:jaxLine 7s linear infinite;
}
@keyframes jaxLine{ to{ background-position:-200% 0 } }
.jax-navbar.is-scrolled{ box-shadow:0 14px 40px -18px rgba(0,0,0,.9); background:rgba(8,7,13,.92); }
.jax-navbar .container{ gap:14px; }

.jax-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; color:#fff; }
.jax-brand img{ height:30px; width:auto; border-radius:8px; }
.jax-brand-mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--jax-accent), #6a22b8);
  color:#fff; font-weight:900; box-shadow:var(--jax-glow);
}
.jax-brand-name{ letter-spacing:.02em; font-size:1.05rem; }

.jax-links{ gap:2px; }
.jax-navbar .nav-link{
  color:var(--jax-muted); font-weight:600; padding:8px 14px; border-radius:10px;
  transition:color .2s, background .2s;
}
.jax-navbar .nav-link:hover, .jax-navbar .nav-link.active{ color:#fff; background:rgba(var(--jax-accent-rgb),.12); }
.jax-link-btn{ background:rgba(var(--jax-accent-rgb),.16)!important; color:#fff!important; }

.jax-right{ gap:10px; }
.jax-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
  border:1px solid var(--jax-line); background:rgba(255,255,255,.03); color:#fff;
  font-weight:600; cursor:pointer; transition:.2s; text-decoration:none;
}
.jax-ghost:hover{ border-color:rgba(var(--jax-accent-rgb),.5); background:rgba(var(--jax-accent-rgb),.12); }

.jax-icon-btn{
  position:relative; display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:11px; border:1px solid var(--jax-line); background:rgba(255,255,255,.03);
  color:#fff; text-decoration:none; transition:.2s;
}
.jax-icon-btn:hover{ border-color:rgba(var(--jax-accent-rgb),.5); background:rgba(var(--jax-accent-rgb),.14); transform:translateY(-1px); }
.jax-count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px; font-size:11px; font-weight:800;
  background:linear-gradient(135deg,var(--jax-accent),#6a22b8); color:#fff;
}
.jax-toggler{ border:1px solid var(--jax-line); background:rgba(255,255,255,.03); color:#fff; border-radius:10px; padding:8px 12px; }
.jax-toggler:focus{ box-shadow:none; }

/* ---------- SEARCH BAR ---------- */
.jax-search{
  position:relative; display:flex; align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--jax-line);
  border-radius:14px; padding:4px 4px 4px 42px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.jax-search:focus-within{
  border-color:rgba(var(--jax-accent-rgb),.6);
  box-shadow:0 0 0 4px rgba(var(--jax-accent-rgb),.16);
  background:rgba(255,255,255,.06);
}
.jax-search-ico{ position:absolute; left:15px; color:var(--jax-muted); font-size:.95rem; }
.jax-search-input{
  flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff;
  font-size:.95rem; padding:8px 6px;
}
.jax-search-input::placeholder{ color:var(--jax-muted); }
.jax-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.jax-search-go{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--jax-accent),#6a22b8); color:#fff; font-weight:700;
  border-radius:10px; padding:9px 14px; transition:.2s; white-space:nowrap;
}
.jax-search-go:hover{ filter:brightness(1.1); box-shadow:0 8px 22px -8px rgba(var(--jax-accent-rgb),.8); }
.jax-search-nav{ flex:1; max-width:360px; margin:0 8px; }
.jax-search-nav .jax-search-go{ padding:9px 12px; }
@media (max-width:991.98px){
  .jax-search-nav{ max-width:none; width:100%; margin:10px 0; }
}

/* currency select */
.jax-currency .currency-selector select{
  appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.03);
  color:#fff; border:1px solid var(--jax-line); border-radius:11px; padding:9px 30px 9px 14px;
  font-weight:700; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a89cba' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}

/* ============================================================
   HERO
   ============================================================ */
.jax-hero{ position:relative; padding:84px 0 64px; overflow:hidden; }
.jax-hero-medium{ padding:104px 0 72px; }
.jax-hero-tall{ padding:140px 0 92px; }
.jax-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    var(--jax-hero-bg, none) center/cover no-repeat,
    radial-gradient(60% 60% at 50% 0%, rgba(var(--jax-accent-rgb),.18), transparent 70%);
  opacity:.9;
}
.jax-hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.jax-align-left .jax-hero-inner{ align-items:flex-start; text-align:left; }
.jax-align-right .jax-hero-inner{ align-items:flex-end; text-align:right; }
.jax-hero-split .jax-hero-inner{ flex-direction:row; align-items:center; text-align:left; justify-content:space-between; gap:40px; }
.jax-hero-copy{ max-width:760px; display:flex; flex-direction:column; gap:20px; align-items:inherit; }
.jax-hero-split .jax-hero-media{ flex:0 0 42%; }
.jax-hero-media img{ width:100%; border-radius:24px; border:1px solid var(--jax-line); box-shadow:var(--jax-glow); }

.jax-badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border-radius:999px;
  background:rgba(var(--jax-accent-rgb),.12); border:1px solid var(--jax-line);
  font-size:.85rem; color:#e7defa; width:max-content;
}
.jax-stars .fa-star{ color:rgba(255,255,255,.2); font-size:.8rem; }
.jax-stars .fa-star.is-on{ color:#f4c150; }

.jax-hero-title{
  font-size:clamp(2.2rem, 6vw, 4rem); font-weight:800; line-height:1.05; margin:0;
  background:linear-gradient(180deg,#fff 30%, #c7b3e6); -webkit-background-clip:text;
  background-clip:text; color:transparent; letter-spacing:-.02em;
}
.jax-hero-sub{ font-size:clamp(1rem,2.2vw,1.2rem); color:var(--jax-muted); margin:0; max-width:620px; }
.jax-align-center .jax-hero-sub, .jax-align-center .jax-search-hero{ margin-left:auto; margin-right:auto; }

.jax-search-hero{ width:100%; max-width:560px; padding:6px 6px 6px 48px; border-radius:16px; }
.jax-search-hero .jax-search-input{ font-size:1.05rem; padding:12px 6px; }

.jax-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.jax-stats{ display:flex; gap:34px; flex-wrap:wrap; margin-top:6px; }
.jax-align-center .jax-stats{ justify-content:center; }
.jax-stat{ display:flex; flex-direction:column; }
.jax-stat-num{ font-size:1.7rem; font-weight:800; color:#fff; line-height:1; }
.jax-stat-label{ font-size:.8rem; color:var(--jax-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }

@media (max-width:768px){ .jax-hero-split .jax-hero-inner{ flex-direction:column; text-align:center; } .jax-hero-split .jax-hero-media{ flex:1 0 auto; } }

/* ---------- buttons ---------- */
.jax-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:13px;
  font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.2s;
}
.jax-btn-primary{ background:linear-gradient(135deg,var(--jax-accent),#6a22b8); color:#fff; box-shadow:0 14px 34px -14px rgba(var(--jax-accent-rgb),.9); }
.jax-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.jax-btn-ghost{ background:rgba(255,255,255,.03); border-color:var(--jax-line); color:#fff; }
.jax-btn-ghost:hover{ border-color:rgba(var(--jax-accent-rgb),.5); }

/* ============================================================
   SECTIONS / PRODUCTS
   ============================================================ */
.jax-section{ padding:64px 0; position:relative; }
.jax-section-head{ text-align:center; max-width:640px; margin:0 auto 42px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.jax-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:rgba(var(--jax-accent-rgb),.12); border:1px solid var(--jax-line);
  font-size:.8rem; color:#e7defa; text-transform:uppercase; letter-spacing:.1em;
}
.jax-section-title{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; color:#fff; margin:0; letter-spacing:-.02em; }
.jax-section-sub{ color:var(--jax-muted); margin:0; }

.jax-products{ --bs-gutter-x:1.4rem; }

/* product card (overrides product-card.njk inline look toward purple) */
.shop-card.card{
  --accent: var(--jax-accent) !important;
  --accent-2: rgba(var(--jax-accent-rgb),.8) !important;
  background:var(--jax-card) !important;
  border:1px solid var(--jax-line-soft) !important;
  border-radius:var(--jax-radius) !important;
  box-shadow:0 18px 48px -22px rgba(0,0,0,.8) !important;
}
.shop-card.card:hover{ box-shadow:var(--jax-glow) !important; border-color:rgba(var(--jax-accent-rgb),.4) !important; }
.shop-card .btn-cta{ background:linear-gradient(135deg,var(--jax-accent),#6a22b8) !important; color:#fff !important; }
.shop-card .price .p-now{ color:#fff !important; }
.shop-card .card-title{ color:#fff !important; }
.shop-card .card-img-top::before{ background:radial-gradient(circle at 50% 50%, rgba(var(--jax-accent-rgb),.4) 0, transparent 60%) !important; }

/* no results */
.jax-no-results{ text-align:center; color:var(--jax-muted); padding:50px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.jax-no-results i{ font-size:2rem; color:rgba(var(--jax-accent-rgb),.7); }
.jax-no-results p{ margin:0; font-size:1.05rem; }
.jax-no-results [data-jax-query]{ color:#fff; font-weight:700; }

/* card filtered-out state */
.jax-hide{ display:none !important; }

/* ============================================================
   GENERIC SECTION TITLES (feedbacks, socials, faq use pro.css markup)
   ============================================================ */
.section-title h2{ color:#fff; font-weight:800; }
.section-subtitle p{ color:var(--jax-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.jax-footer{ border-top:1px solid var(--jax-line-soft); background:linear-gradient(180deg, transparent, rgba(var(--jax-accent-rgb),.06)); padding:56px 0 28px; margin-top:40px; }
.jax-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.jax-footer-desc{ color:var(--jax-muted); margin:14px 0 18px; max-width:320px; font-size:.92rem; }
.jax-socials{ display:flex; gap:10px; }
.jax-socials a{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px; border:1px solid var(--jax-line); background:rgba(255,255,255,.03); color:#fff; transition:.2s; }
.jax-socials a:hover{ border-color:rgba(var(--jax-accent-rgb),.5); background:rgba(var(--jax-accent-rgb),.14); transform:translateY(-2px); }
.jax-footer-col h4{ color:#fff; font-size:.95rem; font-weight:700; margin:0 0 14px; }
.jax-footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.jax-footer-col a{ color:var(--jax-muted); text-decoration:none; font-size:.92rem; transition:.2s; }
.jax-footer-col a:hover{ color:#fff; }
.jax-footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--jax-line-soft); color:var(--jax-muted); font-size:.86rem; }
.jax-footer-pay i{ color:rgba(var(--jax-accent-rgb),.9); margin-right:6px; }
@media (max-width:768px){ .jax-footer-grid{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.jax-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.jax-reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   ANNOUNCEMENT
   ============================================================ */
.announcement{ background:linear-gradient(90deg, rgba(var(--jax-accent-rgb),.22), rgba(var(--jax-accent-rgb),.08)); color:#fff; text-align:center; padding:9px 14px; font-size:.9rem; }
.announcement a{ color:#fff; font-weight:700; text-decoration:underline; }

/* tidy modals + forms */
.modal-content{ background:var(--jax-bg-2); border:1px solid var(--jax-line); border-radius:18px; color:var(--jax-text); }
.modal-header{ border-bottom:1px solid var(--jax-line-soft); }
.form-control{ background:rgba(255,255,255,.04); border:1px solid var(--jax-line); color:#fff; border-radius:12px; }
.form-control:focus{ background:rgba(255,255,255,.06); border-color:rgba(var(--jax-accent-rgb),.6); box-shadow:0 0 0 4px rgba(var(--jax-accent-rgb),.16); color:#fff; }
.btn-primary{ background:linear-gradient(135deg,var(--jax-accent),#6a22b8); border:0; }

/* ---- product card purple sheen overrides ---- */
.shop-card .card-img-top .spot{
  background:
    radial-gradient(260px 160px at var(--mx) var(--my), rgba(255,255,255,.16), transparent 60%),
    radial-gradient(200px 140px at calc(var(--mx) + 40px) calc(var(--my) + 20px), rgba(var(--jax-accent-rgb),.30), transparent 60%) !important;
}
.shop-card .btn-cta{ box-shadow:0 12px 26px rgba(var(--jax-accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3) !important; }
.shop-card .pill{ --p: var(--jax-accent) !important; color:#fff !important; }