/* =====================================================================
   ShxdowCheats design system — Invision/Nexus dark + orange→red brand
   accent #9900ff → #7a00cc · page #1a1b24 · surface #232430 · Inter
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
:root{
  /* brand */
  --shx-accent: var(--cl-accent, #9900ff);
  --shx-accent-rgb: var(--cl-accent-rgb, 153,0,255);
  --shx-accent-2: #7a00cc;
  --shx-accent-2-rgb: 122,0,204;
  --shx-grad: linear-gradient(to bottom right, rgb(var(--shx-accent-rgb)), var(--shx-accent-2));
  /* surfaces (from the live site's Invision theme vars) */
  --shx-bg: #1a1b24;
  --shx-light: #232430;
  --shx-lighter: #242833;
  --shx-verylight: #2e3341;
  --shx-text: #a7aab7;
  --shx-muted: #80828b;
  --shx-radius: 10px;
  --shx-container: 1550px;

  /* legacy aliases so inherited components keep working */
  --nx-accent: var(--shx-accent);
  --nx-accent-rgb: var(--shx-accent-rgb);
  --nx-accent-2: var(--shx-accent-2);
  --nb-grad: var(--shx-grad);
  --nx-bg: var(--shx-bg);
  --nx-card: var(--shx-light);
  --nx-panel: rgba(255,255,255,.035);
  --nx-panel-2: rgba(255,255,255,.012);
  --nx-border: rgba(255,255,255,.08);
  --nx-border-2: rgba(255,255,255,.16);
  --nx-text: #ededed;
  --nx-muted: var(--shx-muted);
  --nx-radius: var(--shx-radius);
}
.container{ max-width: var(--shx-container) !important; padding-left:3em; padding-right:3em; }
@media (max-width:767px){ .container{ padding-left:1.25em; padding-right:1.25em; } }

/* ---------- base ---------- */
body{ background: var(--nx-bg) !important; color: var(--nx-text); }
[data-dsr]{ visibility:visible !important; opacity:1 !important; transform:none !important; }
#snow,#particles-js,#globalCanvas,canvas[id="globalCanvas"],.snowflake,
.typing-words::after,.typing-words::before{ display:none !important; }
html{ scroll-behavior:smooth; }
::selection{ background: var(--nx-accent); color:#fff; }
a{ text-decoration:none; }
.text-primary,a.text-primary{ color: rgba(var(--nx-accent-rgb),1) !important; }
h1,h2,h3,h4,h5{ color:#fff; letter-spacing:-.4px; }

/* ---------- eyebrow pill (Best Sellers / WATCH / Questions / EARN MONEY) ---------- */
.nx-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color: rgba(var(--nx-accent-rgb),1);
  padding:7px 14px; border-radius:999px; margin-bottom:18px;
  background: rgba(var(--nx-accent-rgb),.12); border:1px solid rgba(var(--nx-accent-rgb),.30);
}

/* ---------- buttons ---------- */
.btn{ font-weight:700; border-radius:8px; transition:.2s cubic-bezier(.2,.7,.3,1); }
.btn-primary,.btn-cta,.btn-buy,.add-to-cart,.buy-now,.nx-btn{
  background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-2)) !important;
  border:0 !important; color:#fff !important;
  box-shadow: 0 8px 24px rgba(var(--nx-accent-rgb),.40);
}
.btn-primary:hover,.btn-cta:hover,.btn-buy:hover,.add-to-cart:hover,.buy-now:hover,.nx-btn:hover{
  transform: translateY(-2px); filter:brightness(1.08);
  box-shadow: 0 12px 32px rgba(var(--nx-accent-rgb),.6);
}
.btn-outline-primary,.btn-ghost,.btn-secondary{
  background: rgba(255,255,255,.06) !important; color:#fff !important; border:1px solid var(--nx-border-2) !important;
}
.btn-outline-primary:hover,.btn-ghost:hover,.btn-secondary:hover{
  background: rgba(255,255,255,.1) !important; border-color: var(--nx-accent) !important; transform: translateY(-2px);
}

/* ---------- cards / panels ---------- */
.card,.panel,.box{
  background: var(--nx-card) !important;
  border:1px solid var(--nx-border) !important; border-radius: var(--nx-radius) !important;
}

/* ---------- forms ---------- */
.form-control,.form-select,input[type=text],input[type=email],input[type=number],textarea,select{
  background: rgba(255,255,255,.04) !important; color:#fff !important;
  border:1px solid var(--nx-border) !important; border-radius:10px !important;
}
.form-control:focus,.form-select:focus,input:focus,textarea:focus{
  border-color: var(--nx-accent) !important; box-shadow: 0 0 0 3px rgba(var(--nx-accent-rgb),.25) !important;
}

/* ---------- section headings (white -> grey, centered, eyebrow handled separately) ---------- */
.section-title{
  flex-direction:column; align-items:center !important; justify-content:center;
  text-align:center; gap:.4rem !important; margin:0 auto 1rem auto !important;
}
.section-title h1,.section-title h2{
  font-size: clamp(30px,5vw,52px) !important; font-weight:800 !important; letter-spacing:-1.5px; line-height:1.05;
  background: linear-gradient(180deg,#ffffff,#c2c2c2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.section-subtitle{ justify-content:center !important; text-align:center; margin:0 auto 2.5rem auto !important; max-width:620px; }
.section-subtitle p{ font-size:1rem !important; color:var(--nx-muted) !important; }
@media (min-width:768px){ .section-title p{ padding-left:0 !important; border-left:0 !important; } }

/* ---------- one continuous dark canvas (no banding) ---------- */
.socials, .bg-block-primary, .bg-block-secondary, .cta-text-image, [class*="bg-block-"]{ background: transparent !important; }
section.component{ background: transparent !important; }

/* ---------- review cards ---------- */
.testimonial{
  height:100%; background: var(--nx-card) !important; border:1px solid var(--nx-border) !important;
  border-radius:14px !important; padding:22px !important; transition: transform .25s ease, border-color .25s ease;
}
.testimonial:hover{ transform:translateY(-4px); border-color: rgba(var(--nx-accent-rgb),.5) !important; }
.testimonial .header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.testimonial .quote{ width:28px; height:28px; color: rgba(var(--nx-accent-rgb),.9); }
.testimonial .stars svg{ width:18px; height:18px; }
.testimonial .footer{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); font-size:.82rem; color:var(--nx-muted); }

/* ---------- socials ---------- */
.socials .list > div{ display:flex; justify-content:center; }
.socials .list .social{
  width:100%; max-width:360px; align-items:center; gap:14px; padding:16px 18px !important;
  border:1px solid var(--nx-border) !important; background: var(--nx-card) !important;
  border-radius:12px !important; transition: transform .2s ease, border-color .2s ease !important;
}
.socials .list .social:hover{ transform:translateY(-3px); border-color: rgba(var(--nx-accent-rgb),.6) !important; color:#fff !important; }
.socials .list .social .left svg{ width:42px !important; height:42px !important; padding:9px !important; background: linear-gradient(135deg,var(--nx-accent),var(--nx-accent-2)) !important; color:#fff !important; }
.socials .list .social .right svg{ color: var(--nx-muted); }

@media (max-width:991.98px){
  .nx-nav .nav-mobile-utility{ display:inline-flex !important; align-items:center; justify-content:center; min-width:72px; min-height:42px; padding:8px 10px; border-radius:10px; border:1px solid var(--nx-border); background: rgba(255,255,255,.04); color:#fff; font-weight:700; }
}

/* =====================================================================
   ASX lower sections: video / FAQ / affiliate
   ===================================================================== */

/* eyebrow pills injected above each section heading */
[data-component-id="video"] .section-title::before,
[data-component-id="faq"] .section-title::before,
[data-component-id="affiliate"] .section-title::before{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color: rgba(var(--nx-accent-rgb),1);
  padding:7px 14px; border-radius:999px; margin-bottom:16px; -webkit-text-fill-color: rgba(var(--nx-accent-rgb),1);
  background: rgba(var(--nx-accent-rgb),.12); border:1px solid rgba(var(--nx-accent-rgb),.30);
}
[data-component-id="video"] .section-title::before{ content:"WATCH"; }
[data-component-id="faq"] .section-title::before{ content:"QUESTIONS"; }
[data-component-id="affiliate"] .section-title::before{ content:"EARN MONEY"; }

/* center text + button for the text-video blocks */
.text-video-block.alignment-center .whitespace-pre-line{ text-align:center; color:var(--nx-muted); max-width:620px; margin:0 auto; }
.text-video-block.alignment-center .row{ justify-content:center; }
.text-video-block.alignment-center .col-12{ text-align:center; }
.text-video-block .btn-primary{ margin-top:1.5rem !important; }
.video-wrapper:empty{ display:none; }
.video-wrapper iframe{ width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid rgba(255,255,255,.08); }

/* FAQ accordion — matched 1:1 to ASX */
.faq .accordion{ max-width:768px; margin:0 auto; display:grid; gap:10px; }
.faq .accordion-item{
  background: rgba(255,255,255,.02) !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important; overflow:hidden; margin-bottom:0 !important;
}
.faq .accordion-header{ margin:0; }
.faq .accordion-button{
  background: transparent !important; color:#fff !important; font-weight:500; font-size:16px;
  padding:20px 22px; box-shadow:none !important; display:flex; align-items:center; gap:12px;
}
.faq .accordion-button::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background: var(--nx-accent); box-shadow:0 0 8px var(--nx-accent);
}
.faq .accordion-button:not(.collapsed){ color:#fff !important; background: transparent !important; }
.faq .accordion-button::after{
  margin-left:auto; width:1rem; height:1rem; background-size:1rem; filter:none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f8fafc' stroke-width='2.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}
.faq .accordion-button:focus{ box-shadow:none !important; border:0 !important; }
.faq .accordion-body{ color:var(--nx-muted); padding:0 22px 20px 41px; font-size:.92rem; }

/* =====================================================================
   PRODUCT (BUY) PAGE — ASX styling
   ===================================================================== */
/* uppercase muted labels (Select Variant / Quantity) */
.hyper-product .form-shell .form-label{
  text-transform:uppercase; letter-spacing:1.2px; font-size:.72rem; color:#8b8b96 !important; font-weight:700;
}

/* variant rows: dark by default, purple only when active (override the btn-primary paint) */
.hyper-product .form-shell .variants{ display:grid !important; gap:10px !important; }
.hyper-product .form-shell .variant.btn-primary{
  background:#1c1c1c !important; color:#fff !important; box-shadow:none !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:12px !important;
  text-align:left; transition:border-color .18s ease, background .18s ease;
}
.hyper-product .form-shell .variant.btn-primary:hover{ border-color: rgba(153,0,255,.45) !important; transform:none !important; }
.hyper-product .form-shell .variant.btn-primary.active{
  background: linear-gradient(135deg, rgba(153,0,255,.22), rgba(153,0,255,.16)) !important;
  border-color: var(--cl-accent,#9900ff) !important;
  box-shadow: inset 0 0 0 1px var(--cl-accent,#9900ff) !important;
}
.hyper-product .form-shell .variant .name{ color:#fff !important; font-weight:700; margin:0; }
.hyper-product .form-shell .variant .description,
.hyper-product .form-shell .variant .stock{ color:#9a9aa6 !important; font-size:.8rem; margin:0; }
.hyper-product .form-shell .variant .price{ color:#fff !important; font-weight:800; white-space:nowrap; }
.hyper-product .form-shell .variant .price s{ color:#8b8b96 !important; font-weight:600; font-size:.85em; margin-left:6px; }
.hyper-product .form-shell .variant .active-indicator svg{ color: var(--cl-accent,#9900ff) !important; width:22px; height:22px; }

/* price block -> clean dark panel with big white price */
.hyper-product .price-chip{
  background:#1c1c1c !important; color:#fff !important; box-shadow:none !important;
  border:1px solid rgba(255,255,255,.1) !important; padding:12px 16px !important; border-radius:12px !important;
}
.hyper-product .price-chip i{ color: var(--cl-accent,#9900ff); }
.hyper-product .price-chip .value{ font-size:1.45rem !important; font-weight:900; }

/* quantity stepper */
.hyper-product .form-shell .input-group .form-control{ background:#1c1c1c !important; color:#fff !important; text-align:center; border-color:rgba(255,255,255,.1) !important; }
.hyper-product .form-shell .input-group-btn{ background:#1c1c1c !important; border-color:rgba(255,255,255,.1) !important; }

/* summary panel + gallery frame a touch more ASX */
.hyper-product .prod-summary{ background:#161619 !important; border-color:rgba(255,255,255,.08) !important; }
.hyper-product .form-shell{ background:transparent !important; border:0 !important; padding:0 !important; }

/* =====================================================================
   Card ratios: homepage 21:9, group-modal cards back to original 16:8
   ===================================================================== */
.modal .asx-card .asx-card-media{ aspect-ratio:16/8 !important; }

/* =====================================================================
   Affiliate "Join Our Media Programme" — ASX two-column (text left, video right)
   ===================================================================== */
[data-component-id="affiliate"] .section-title{ align-items:flex-start !important; text-align:left !important; margin-left:0 !important; }
[data-component-id="affiliate"] .section-title h2{ text-align:left !important; }
[data-component-id="affiliate"] .whitespace-pre-line{ text-align:left !important; margin:0 !important; max-width:none !important; color:var(--nx-muted); }
[data-component-id="affiliate"] .row{ align-items:center !important; }
[data-component-id="affiliate"] .btn-primary{ display:inline-flex; align-items:center; }

/* lock the active-variant indicator to purple (no pink) */
.hyper-product .form-shell .variant .active-indicator{ background:transparent !important; }
.hyper-product .form-shell .variant .active-indicator svg,
.hyper-product .form-shell .variant .active-indicator .text-primary{ color: var(--cl-accent,#9900ff) !important; }
.hyper-product .form-shell .variant.btn-primary.active{
  background: rgba(153,0,255,.16) !important; border-color: var(--cl-accent,#9900ff) !important;
  box-shadow: inset 0 0 0 1px var(--cl-accent,#9900ff) !important;
}

/* =====================================================================
   FIX: oversized Tailwind-class SVG icons inside the buy form
   (size-5 / size-3.5 etc. have no CSS here, so they render huge)
   ===================================================================== */
.form-shell .btn svg{ width:1.15rem !important; height:1.15rem !important; flex:0 0 auto; }
.form-shell .btn-addon-add svg, .form-shell .btn-addon-remove svg{ width:.9rem !important; height:.9rem !important; }
.size-3\.5{ width:.9rem !important; height:.9rem !important; }
.size-4{ width:1rem !important; height:1rem !important; }
.size-5{ width:1.15rem !important; height:1.15rem !important; }
.size-6{ width:1.4rem !important; height:1.4rem !important; }
/* keep the two buy buttons tidy / equal */
.form-shell .buy-buttons{ align-items:stretch; }
.form-shell .buy-buttons .btn{ min-height:52px; padding:.75rem 1rem; font-size:1rem; }

/* =====================================================================
   Gandyhub — palette + font + container (from gandyhub.lol)
   page #1a1b24 · surface #232430 · border #2e3341 · accent #9900ff · Inter
   ===================================================================== */
:root{
  --nx-bg:#1a1b24; --nx-card:#232430; --nx-radius:10px;
  --inv-text:#f7f8fb; --inv-muted:#9da3b2;
  --cl-background-primary:#1a1b24; --cl-background-primary-rgb:15,16,20;
  --cl-background-secondary:#232430; --cl-background-secondary-rgb:23,26,34;
  --cl-border:#2e3341; --cl-border-rgb:42,46,57;
  --cl-accent:#9900ff; --cl-accent-rgb:153,0,255;
  --inv-accent-hover:#7a00cc;
}
body, h1,h2,h3,h4,h5,h6, .btn, button, input, select, textarea{ font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body{ background:#1a1b24 !important; color:#f7f8fb; }
.container{ max-width:1200px; }