/* =========================================================
   CoreCloud Marketplace — Master Stylesheet
   Dark Dell-only marketplace
   Covers:
   - header / nav
   - hero (with neon underglow fix)
   - product grid (index)
   - auth modal
   - product detail page
   - cart / checkout
   - thank-you
   - msp / accessories / terms / admin
   ========================================================= */

/* -------- RESET -------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:130%; } /* 30% global scale */
html, body { min-height:100%; }
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#050811; color:#fff; line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

/* -------- TOKENS -------- */
:root{
  --bg:#050811;
  --panel:rgba(5,8,17,.4);
  --panel-soft:rgba(5,8,17,.25);
  --border:rgba(255,255,255,.035);
  --text:#ffffff;
  --muted:rgba(156,169,198,1);
  --accent:#00c6ff;
  --gold:#ffd23f;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow:0 20px 40px rgba(0,0,0,.28);
}

/* -------- LAYOUT -------- */
.ccm-shell{ width:min(1180px,100% - 3.6rem); margin:0 auto; }
@media (max-width:720px){ .ccm-shell{ width:calc(100% - 1.6rem); } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.ccm-header{
  position:sticky; top:0; z-index:90;
  background:rgba(5,8,17,.35);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.02);
}
.ccm-header .ccm-shell{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px;
}
.ccm-brand{ display:flex; align-items:center; gap:.6rem; color:#fff; }
.ccm-logo{ height:92px; filter:drop-shadow(0 0 24px rgba(0,198,255,.7)); }
.ccm-title .c1{ font-weight:600; font-size:.85rem; display:block; }
.ccm-title .c2{ font-size:.65rem; color:rgba(230,237,255,.6); display:block; }

.ccm-nav{ display:flex; gap:1rem; }
.ccm-nav a{ color:#fff; font-size:.7rem; opacity:.85; padding:.2rem 0; }
.ccm-nav a:hover, .ccm-nav a.active{ opacity:1; border-bottom:1px solid rgba(0,198,255,.75); }
.ccm-actions{ display:flex; gap:.6rem; align-items:center; }

.ccm-btn{
  border:none; outline:none;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.02);
  border-radius:12px;
  padding:.35rem .8rem; color:#fff; font-size:.68rem; cursor:pointer; white-space:nowrap;
}
.ccm-btn.primary{
  background:linear-gradient(140deg, rgba(0,198,255,1), rgba(0,72,120,1));
  border:1px solid rgba(0,198,255,.5);
}
.ccm-btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.12); }
.ccm-btn.small{ padding:.3rem .6rem; font-size:.6rem; }
.ccm-btn.block{ width:100%; text-align:center; }

/* Focus-visible for a11y */
:where(a,button,.ccm-btn):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,210,63,.18);
}

.ccm-burger{
  display:none; width:36px; height:30px; background:none; border:none; gap:5px;
  flex-direction:column; justify-content:center; cursor:pointer;
}
.ccm-burger span{ display:block; height:2px; background:#fff; border-radius:99px; }

@media (max-width:940px){
  .ccm-nav{
    position:absolute; top:74px; right:1rem;
    background:rgba(5,8,17,.95); backdrop-filter:blur(20px);
    padding:.6rem .9rem; border:1px solid rgba(255,255,255,.03); border-radius:14px;
    display:none; flex-direction:column; gap:.4rem;
  }
  .ccm-nav.open{ display:flex; }
  .ccm-burger{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.ccm-hero{
  padding:3.2rem 0 2.6rem;
  background:radial-gradient(circle at 8% 12%, rgba(0,198,255,.25), rgba(5,8,17,0) 46%), #050811;
}
.hero-grid{ display:grid; grid-template-columns:1.12fr .8fr; gap:2.2rem; align-items:center; }
.hero-copy h1{ font-size:2.6rem; line-height:1.05; margin-bottom:.85rem; }
.hero-copy .subtitle{ font-size:1.05rem; color:var(--muted); max-width:520px; margin-bottom:1rem; }
.badge{
  display:inline-block; background:rgba(0,198,255,.09); border:1px solid rgba(0,198,255,.32);
  padding:.25rem .6rem; border-radius:999px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.7rem;
}
.hero-actions{ display:flex; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.hero-metas{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.72rem; }
.hero-metas .k{ display:block; font-weight:600; }
.hero-metas .v{ display:block; color:var(--muted); }

.hero-panel .hero-card{
  background:rgba(5,8,17,.45); border:1px solid rgba(255,255,255,.03);
  border-radius:18px; padding:1.1rem 1rem 1rem; box-shadow:var(--shadow);
}
.hc-tag{ font-size:.62rem; text-transform:uppercase; color:rgba(224,242,255,.5); margin-bottom:.35rem; }
.hero-panel h2{ font-size:1.35rem; margin-bottom:.35rem; }
.hc-sub{ color:var(--muted); font-size:.8rem; margin-bottom:.4rem; }
.hc-price{ font-size:1.5rem; font-weight:600; margin-bottom:.5rem; }
.hc-price span{ font-size:.7rem; color:rgba(224,242,255,.6); }
.hc-specs{ list-style:none; margin-bottom:.6rem; }
.hc-specs li{ font-size:.72rem; margin-bottom:.3rem; }

@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:2.25rem; }
}

/* === Neon underglow (robust) === */
.ccm-hero, .hero-panel, .hero-grid{ position:relative; overflow:visible; z-index:1; }
.hero-card--highlight{
  position:relative; isolation:isolate; overflow:visible; transform:translateZ(0); will-change:filter,transform;
  background: radial-gradient(circle at 12% 0%, rgba(0,198,255,.12), rgba(5,8,17,.5));
  border:1px solid rgba(0,198,255,.85);
  box-shadow:0 0 42px rgba(0,198,255,.55), 0 16px 48px rgba(0,0,0,.45);
}
.hero-card--highlight::before{
  content:""; position:absolute; inset:-28px; border-radius:28px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(0,198,255,.60) 0%, rgba(0,198,255,.18) 55%, rgba(0,198,255,0) 80%),
    radial-gradient(closest-side, rgba(255,210,63,.28) 0%, rgba(255,210,63,0) 70%);
  filter:blur(26px); opacity:.95;
  z-index:0; /* <- sits above page but below content */
}
.hero-card--highlight > *{ position:relative; z-index:1; }

/* =========================================================
   SECTION BASE
   ========================================================= */
.ccm-section{ padding:2.6rem 0 2.4rem; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.section-head h2{ font-size:1.25rem; margin-bottom:.35rem; }
.section-head p{ color:var(--muted); font-size:.9rem; }

/* filters */
.filters{ display:flex; gap:.35rem; flex-wrap:wrap; }
.pill{
  background:rgba(5,8,17,.25); border:1px solid rgba(255,255,255,.02);
  border-radius:999px; padding:.25rem .7rem; font-size:.65rem; color:#fff; cursor:pointer;
}
.pill.active{ background:rgba(0,198,255,.18); border:1px solid rgba(0,198,255,.5); }

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(195px, 1fr)); gap:1.1rem;
  overflow:visible;
}
.product-card{
  background:rgba(5,8,17,.35); border:1px solid rgba(255,255,255,.02);
  border-radius:16px; padding:.7rem .7rem .6rem;
  display:flex; flex-direction:column; gap:.3rem;
  box-shadow:0 14px 35px rgba(0,0,0,.35), 0 0 16px rgba(0,198,255,.03);
  backdrop-filter:blur(8px);
  background:radial-gradient(circle at 10% 0%, rgba(0,198,255,.04), rgba(5,8,17,.3));
  transition:transform .18s ease-out, border .18s ease-out;
  content-visibility:auto; contain-intrinsic-size:320px 280px;

  /* Glow plumbing */
  position:relative; isolation:isolate; overflow:visible; transform:translateZ(0);
}
.product-card:hover{ transform:translateY(-3px); border:1px solid rgba(0,198,255,.35); }

/* Card glow layer */
.product-card::before{
  content:""; position:absolute; inset:-18px -14px -16px -14px; border-radius:22px; pointer-events:none;
  background:
    radial-gradient(120px 80px at 25% 10%, rgba(0,198,255,.20), rgba(0,198,255,0) 70%),
    radial-gradient(160px 90px at 80% 85%, rgba(255,210,63,.14), rgba(255,210,63,0) 70%);
  filter:blur(18px); opacity:.55; transition:opacity .18s ease, filter .18s ease, transform .18s ease;
  z-index:0;
}
.product-card > *{ position:relative; z-index:1; }
.product-card:hover::before{ opacity:.9; filter:blur(22px); transform:translateY(-2px); }

.p-img{
  height:95px; border-radius:12px;
  background:radial-gradient(circle at 35% 35%, rgba(0,198,255,.35), rgba(5,8,17,0));
  border:1px solid rgba(0,198,255,.26); margin-bottom:.25rem;
}
.p-img-real{
  max-height:120px; width:100%; height:auto; object-fit:contain;
  border-radius:12px; border:1px solid rgba(255,255,255,.02); margin-bottom:.25rem;
}
.product-card h3{ font-size:.85rem; line-height:1.25; min-height:2.2em; }
.p-sub{
  font-size:.72rem; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1em;
}
.p-price{ font-size:.9rem; font-weight:600; }
.p-meta{ font-size:.72rem; color:var(--muted); }
.p-actions{ display:flex; gap:.35rem; margin-top:.25rem; }

/* Card “Details” buttons in gold */
.product-card .ccm-btn.ghost, .related-grid .ccm-btn.ghost{
  background:rgba(255,210,63,.1); border:1px solid rgba(255,210,63,.65); color:#ffd23f;
}
.product-card .ccm-btn.ghost:hover, .related-grid .ccm-btn.ghost:hover{
  background:rgba(255,210,63,.2); border-color:rgba(255,210,63,1); color:#fff;
}

/* Segment badges */
.card-fig{ position:relative; }
.p-badges, .badge-corner{ position:absolute; top:10px; left:10px; display:flex; gap:.35rem; }
.b{
  padding:.28rem .55rem; border-radius:999px; font-size:.68rem; font-weight:800;
  border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px);
}
.b.pro{ background:linear-gradient(135deg,#00c6ff55,#00c6ff18); border-color:rgba(0,198,255,.5); text-shadow:0 0 10px rgba(0,198,255,.35); }
.b.fire{ background:linear-gradient(135deg,#ffd23f77,#ffd23f22); border-color:rgba(255,210,63,.5); color:#151515; box-shadow:0 0 22px rgba(255,210,63,.28); }

/* =========================================================
   BUNDLES
   ========================================================= */
.bundles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; overflow:visible; }
.bundle-card{
  background:rgba(5,8,17,.35); border:1px solid rgba(255,255,255,.03);
  border-radius:16px; padding:.95rem .9rem .85rem; position:relative;
}
.bundle-card h3{ font-size:.9rem; margin-bottom:.35rem; }
.bundle-card p{ font-size:.78rem; color:var(--muted); }
.bundle-card ul{ list-style:none; margin:.45rem 0 .6rem 0; }
.bundle-card ul li{ font-size:.75rem; margin-bottom:.25rem; }
.b-price{ font-size:.85rem; font-weight:600; margin-top:.4rem; }
.bundle-card.hot{
  border:1px solid rgba(0,198,255,.75);
  background:radial-gradient(circle at 10% 0%, rgba(0,198,255,.12), rgba(5,8,17,.35));
  box-shadow:0 0 35px rgba(0,198,255,.45), 0 16px 38px rgba(0,0,0,.4);
}
.bundle-card.hot::before{
  content:""; position:absolute; inset:-16px -12px; background:radial-gradient(circle, rgba(0,198,255,.45) 0%, rgba(0,198,255,0) 65%);
  filter:blur(22px); z-index:-1; pointer-events:none; border-radius:28px;
}

/* =========================================================
   ABOUT / TRUST
   ========================================================= */
.trust{ display:flex; gap:1.4rem; align-items:flex-start; }
.trust > div:first-child{ flex:0 0 34%; }
.trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; flex:1; overflow:visible; }
.trust-card{ background:rgba(5,8,17,.35); border:1px solid rgba(255,255,255,.02); border-radius:15px; padding:.75rem .65rem .6rem; }
.trust-card h3{ font-size:.85rem; margin-bottom:.3rem; }
.trust-card p{ font-size:.72rem; color:var(--muted); }
@media(max-width:900px){ .trust{ flex-direction:column; } }

/* =========================================================
   AUTH MODAL
   ========================================================= */
.auth-overlay{
  position:fixed; inset:0; background:rgba(5,8,17,.8); backdrop-filter:blur(12px);
  display:none; align-items:center; justify-content:center; z-index:120;
}
.auth-box{
  background:rgba(5,8,17,.4); border:1px solid rgba(255,255,255,.03); border-radius:20px;
  width:min(380px,92%); padding:1.4rem 1.2rem 1.2rem;
}
.auth-box h2{ margin-bottom:.3rem; font-size:1.15rem; }
.auth-box p{ color:var(--muted); font-size:.78rem; margin-bottom:1rem; }
.auth-field{ margin-bottom:.65rem; }
.auth-field label{ display:block; font-size:.7rem; margin-bottom:.2rem; color:var(--muted); }
.auth-field input{
  width:100%; background:rgba(255,255,255,.01); border:1px solid rgba(255,255,255,.03);
  border-radius:12px; padding:.42rem .55rem; color:#fff; font-size:.78rem;
}
.auth-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.auth-close{ background:none; border:none; color:var(--muted); font-size:.7rem; cursor:pointer; margin-top:.55rem; }

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.pd-shell{ width:min(1180px,100% - 3.6rem); margin:0 auto; padding:3rem 0 2.5rem; }
.crumbs{ font-size:.72rem; color:rgba(230,237,255,.6); margin-bottom:1.2rem; }
.pd-top{ display:grid; grid-template-columns:1.05fr .75fr; gap:2rem; }
.pd-gallery{
  background:rgba(0,198,255,.03); border:1px solid rgba(255,255,255,.03); border-radius:18px;
  min-height:320px; display:flex; align-items:center; justify-content:center;
}
.pd-gallery .fake-img{
  width:88%; height:auto; aspect-ratio:4 / 3;
  border-radius:16px; background:linear-gradient(160deg, rgba(0,198,255,.35), rgba(5,8,17,0));
  border:1px solid rgba(0,198,255,.32);
}
.pd-title{ margin-bottom:.5rem; font-size:1.25rem; }
.pd-meta{ color:var(--muted); font-size:.85rem; margin-bottom:.85rem; }
.pd-stats{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.pd-stat{
  background:rgba(255,255,255,.01); border:1px solid rgba(255,255,255,.03);
  padding:.55rem .85rem; border-radius:14px; font-size:.72rem;
}
.pd-price{ font-size:1.7rem; font-weight:600; margin-bottom:.4rem; }
.pd-price small{ font-size:.7rem; color:var(--muted); margin-left:.35rem; }
.pd-actions{ display:flex; gap:.6rem; margin:1.1rem 0 1.4rem; flex-wrap:wrap; }
.pd-panels{ margin-top:2.4rem; display:grid; grid-template-columns:1.05fr .75fr; gap:1.5rem; align-items:flex-start; }
.pd-block{
  background:rgba(5,8,17,.4); border:1px solid rgba(255,255,255,.02); border-radius:16px; padding:1.1rem 1rem;
}
.pd-block h3{ margin-bottom:.5rem; font-size:1rem; }
.spec-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.spec-table tr td{ padding:.4rem .2rem; border-bottom:1px solid rgba(255,255,255,.012); }
.spec-table tr td:first-child{ color:var(--muted); width:38%; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)); gap:1rem; margin-top:1rem; }
.pill-tag{
  display:inline-block; background:rgba(0,198,255,.09); border:1px solid rgba(0,198,255,.3);
  padding:.25rem .6rem; border-radius:999px; font-size:.65rem; text-transform:uppercase; letter-spacing:.07em;
  margin-right:.35rem; margin-bottom:.4rem;
}
.warn{
  background:rgba(255,210,63,.05); border:1px solid rgba(255,210,63,.22);
  border-radius:14px; padding:.55rem .65rem; font-size:.72rem; color:rgba(255,210,63,1); margin-top:.75rem;
}
@media(max-width:920px){
  .pd-top{ grid-template-columns:1fr; }
  .pd-panels{ grid-template-columns:1fr; }
  .pd-shell{ width:calc(100% - 1.6rem); }
}

/* Fix: product detail image stretching */
.pd-gallery{ display:grid; place-items:center; aspect-ratio:16 / 10; min-height:280px; overflow:hidden; }
.pd-gallery img{ width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain; display:block; }
.product-media{ display:grid; place-items:center; aspect-ratio:16 / 10; min-height:280px; overflow:hidden; }
.product-media img{ width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain; display:block; }
.pd-top img, .pd-block img{ height:auto !important; width:auto !important; object-fit:contain; }

/* =========================================================
   CART PAGE
   ========================================================= */
.cart-shell{ width:min(1180px,100% - 3.6rem); margin:0 auto; padding:3.2rem 0 3rem; }
.cart-grid{ display:grid; grid-template-columns:1.15fr .65fr; gap:1.4rem; align-items:flex-start; }
.cart-card{ background:rgba(5,8,17,.4); border:1px solid rgba(255,255,255,.03); border-radius:16px; padding:1rem .9rem 1rem; }
.cart-item{
  display:flex; justify-content:space-between; gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.015); padding:.65rem 0;
}
.cart-item:last-child{ border-bottom:none; }
.cart-item h3{ font-size:.9rem; margin-bottom:.3rem; }
.qty-input{
  width:58px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.03);
  border-radius:10px; color:#fff; padding:.25rem .35rem;
}
.summary-line{ display:flex; justify-content:space-between; margin-bottom:.4rem; font-size:.82rem; }
.summary-line.total{ font-size:1.15rem; font-weight:600; margin-top:.5rem; }
.checkout-form label{ display:block; font-size:.7rem; color:var(--muted); margin-bottom:.2rem; }
.checkout-form input, .checkout-form textarea, .checkout-form select{
  width:100%; background:rgba(255,255,255,.015); border:1px solid rgba(255,255,255,.035);
  border-radius:12px; padding:.4rem .6rem; color:#fff; font-size:.78rem; margin-bottom:.65rem;
}
.empty{ padding:1.3rem .5rem; font-size:.95rem; color:var(--muted); }
@media(max-width:820px){ .cart-grid{ grid-template-columns:1fr; } .cart-shell{ width:calc(100% - 2rem); } }

/* =========================================================
   THANK-YOU PAGE
   ========================================================= */
.thanks-shell{ width:min(720px,100% - 3.4rem); margin:4.5rem auto 3rem; text-align:left; }
.thanks-card{ background:rgba(5,8,17,.45); border:1px solid rgba(255,255,255,.035); border-radius:20px; padding:1.6rem 1.4rem 1.4rem; }
.thanks-card h1{ margin-bottom:.4rem; font-size:1.45rem; }
.thanks-meta{ color:var(--muted); font-size:.78rem; margin-bottom:1.1rem; }
.thanks-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.25rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.ccm-footer{ background:rgba(5,8,17,.3); border-top:1px solid rgba(255,255,255,.018); padding:1.6rem 0 1.2rem; margin-top:2rem; }
.foot-grid{ display:flex; gap:1.2rem; align-items:flex-start; justify-content:space-between; }
.footer-logo{ height:54px; margin-bottom:.4rem; }
.foot-links{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.7rem; }
.foot-links a{ color:#fff; }
.copy{ font-size:.68rem; color:rgba(220,234,255,.5); }
@media(max-width:760px){ .foot-grid{ flex-direction:column; } }

/* Hard overrides for footer consistency */
.ccm-footer{ font-size:16px; line-height:1.5; }
.ccm-footer .foot-grid{ padding:1.2rem; }
.ccm-footer .foot-links a{ font-size:.9rem; }
.ccm-footer .footer-logo{ height:54px !important; width:auto !important; max-width:none !important; display:block; object-fit:contain; }
.ccm-footer img{ height:auto; width:auto; }
.ccm-footer .ccm-shell{ max-width:1200px; margin:0 auto; padding-left:1rem; padding-right:1rem; }
@media (max-width:820px){
  .ccm-footer{ font-size:15px; }
  .ccm-footer .foot-grid{ padding:1rem; }
  .ccm-footer .footer-logo{ height:50px !important; }
}

/* =========================================================
   EXTRA PAGES (MSP / ACCESSORIES / TERMS / ADMIN)
   ========================================================= */
.table-like{ background:rgba(5,8,17,.4); border:1px solid rgba(255,255,255,.025); border-radius:16px; padding:1rem; }
.notice{ background:rgba(0,198,255,.08); border:1px solid rgba(0,198,255,.28); border-radius:14px; padding:.6rem .7rem; font-size:.7rem; color:#fff; margin-bottom:1rem; }
.tag{
  display:inline-block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.02);
  border-radius:999px; padding:.18rem .6rem; font-size:.6rem; margin-right:.35rem;
}
.admin-shell{ width:min(880px,100% - 3.4rem); margin:4rem auto 3rem; }
.admin-card{ background:rgba(5,8,17,.45); border:1px solid rgba(255,255,255,.025); border-radius:16px; padding:1rem .9rem 1rem; }
textarea{
  background:rgba(255,255,255,.015); border:1px solid rgba(255,255,255,.035);
  border-radius:12px; color:#fff;
}

/* =========================================================
   UTILITY
   ========================================================= */
.hide{ display:none !important; }
.small{ font-size:.68rem; }
.muted{ color:var(--muted); }
.mt-1{ margin-top:.5rem; }
.mt-2{ margin-top:1rem; }

/* === PARTICLES BACKGROUND === */
body.has-particles{ position:relative; background:radial-gradient(circle at 8% 12%, rgba(0,198,255,.25), rgba(5,8,17,0) 46%), #050811; }
#bgParticles{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; filter:drop-shadow(0 0 18px rgba(0,198,255,.25));
}
.ccm-header, .ccm-hero, .ccm-section, .ccm-footer{ position:relative; z-index:1; }

/* === SEARCH BAR NEON UNDERGLOW === */
.search-row{ position:relative; padding-bottom:1.4rem; }
.search-row::after{
  content:""; position:absolute; left:0; right:0; bottom:-14px; height:36px;
  background:radial-gradient(circle, rgba(255,210,63,.55) 0%, rgba(255,210,63,0) 62%);
  filter:blur(18px); opacity:.6; pointer-events:none;
}
.search-input{
  width:280px; max-width:100%;
  padding:.6rem .9rem; border-radius:8px; border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,17,.55); color:#e6eefc; box-shadow:0 9px 30px rgba(0,198,255,.08);
  transition:box-shadow .2s ease;
}
.search-input:focus{ outline:none; box-shadow:0 0 18px rgba(255,210,63,.4); }

/* ===== POP BOOST FOR BUCKET BUTTONS ===== */
.bucket-btn{
  position:relative; overflow:visible;
  border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(120% 140% at 20% 0%, rgba(5,8,17,.55), rgba(5,8,17,.35));
  border-radius:999px; padding:.58rem 1.1rem; font-size:.8rem; font-weight:800; letter-spacing:.02em;
  cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .2s ease, border .2s ease, background .2s ease, filter .2s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 rgba(0,198,255,0);
  will-change:transform, box-shadow, filter;
}
.bucket-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.bucket-btn:active{ transform:translateY(0); filter:brightness(.98); }
.bucket-btn.active::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0) 30%);
  -webkit-mask:radial-gradient(farthest-side, transparent 65%, black 66%);
  mask:radial-gradient(farthest-side, transparent 65%, black 66%);
  animation:ringSpin 3.2s linear infinite; opacity:.5;
}
/* Cyan (New Gen) */
.bucket-btn[data-bucket="new"]{ color:#e8f7ff; border-color:rgba(0,198,255,.55); text-shadow:0 0 18px rgba(0,198,255,.35); }
.bucket-btn[data-bucket="new"].active{
  background:radial-gradient(120% 140% at 30% -10%, rgba(0,198,255,.25), rgba(5,8,17,.55));
  border-color:rgba(0,198,255,.95);
  box-shadow:0 12px 46px rgba(0,198,255,.35), 0 18px 44px rgba(0,0,0,.55);
  animation:btnPulseCyan 2.4s ease-in-out infinite;
}
/* Gold (Firesale) */
.bucket-btn[data-bucket="firesale"]{ color:#fff7de; border-color:rgba(255,210,63,.6); text-shadow:0 0 18px rgba(255,210,63,.35); }
.bucket-btn[data-bucket="firesale"].active{
  background:radial-gradient(120% 140% at 30% -10%, rgba(255,210,63,.22), rgba(5,8,17,.55));
  border-color:rgba(255,210,63,.95);
  box-shadow:0 12px 46px rgba(255,210,63,.35), 0 18px 44px rgba(0,0,0,.55);
  animation:btnPulseGold 2.4s ease-in-out infinite;
}
.bucket-btn .count{
  margin-left:.45rem; padding:.1rem .48rem; border-radius:999px;
  font-size:.68rem; font-weight:800; line-height:1;
  border:1px solid currentColor; opacity:.9;
  background:rgba(255,255,255,.06);
}

/* Firesale ribbon tweak */
.ribbon{ background:rgba(255,210,63,.16); border:1px solid rgba(255,210,63,.75); color:#ffe284; box-shadow:0 0 22px rgba(255,210,63,.25); }

* {}

/* Keyframes */
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
@keyframes btnPulseCyan{
  0%,100%{ box-shadow:0 10px 40px rgba(0,198,255,.28), 0 18px 44px rgba(0,0,0,.55); }
  50%{    box-shadow:0 16px 60px rgba(0,198,255,.46), 0 20px 48px rgba(0,0,0,.6); }
}
@keyframes btnPulseGold{
  0%,100%{ box-shadow:0 10px 40px rgba(255,210,63,.28), 0 18px 44px rgba(0,0,0,.55); }
  50%{    box-shadow:0 16px 60px rgba(255,210,63,.46), 0 20px 48px rgba(0,0,0,.6); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bucket-btn.active, .bucket-btn.active::before{ animation:none !important; }
  .product-card::before{ transition:none; }
}

/* === Footer/Logo consistency across pages === */
.ccm-logo, .footer-logo{
  width:auto !important; height:auto; max-height:64px; object-fit:contain; aspect-ratio:auto;
}
.ccm-logo{ max-height:64px; }
.footer-logo{ max-height:48px; }
.ccm-brand img, .foot-grid img{ align-self:center; flex:0 0 auto; }

/* ===============================
   HERO HIGHLIGHT — TRUE UNDERGLOW
   (keep for future toggles)
   =============================== */
.ccm-hero, .hero-grid, .hero-panel, .ccm-shell { overflow: visible; position: relative; z-index: 1; }
#bgParticles { z-index: 0; }

.hero-card--highlight{
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: translateZ(0);
  background: rgba(5,8,17,.55);
  border: 1px solid rgba(0,198,255,.85);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.hero-card--highlight::before{
  content:"";
  position:absolute; inset:-26px;
  border-radius: 28px;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(0,198,255,.55) 0%, rgba(0,198,255,0) 70%),
    radial-gradient(closest-side, rgba(255,210,63,.18) 0%, rgba(255,210,63,0) 75%);
  filter: blur(22px);
  opacity: .85;
}

/* ===============================
   HERO GLOW — REVERT TO WORKING
   =============================== */
#bgParticles { z-index: 0 !important; }
.ccm-header, .ccm-section, .ccm-footer { position: relative; z-index: 2 !important; }
.ccm-hero { position: relative; z-index: 3 !important; overflow: visible !important; }
.hero-panel { position: relative; z-index: 4 !important; overflow: visible !important; }
.hero-card--highlight::after { content: none !important; }

.hero-panel .hero-card {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.hero-panel .hero-card.hero-card--highlight {
  background: rgba(5,8,17,.45) !important;
  border: 1px solid rgba(0,198,255,.90) !important;
  box-shadow:
    0 0 42px rgba(0,198,255,.55),
    0 18px 48px rgba(0,0,0,.46) !important;
}
.hero-panel .hero-card.hero-card--highlight::before{
  content: "" !important;
  position: absolute !important;
  inset: -26px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 40% 10%, rgba(0,198,255,.55) 0%, rgba(0,198,255,0) 70%),
    radial-gradient(circle at 60% 90%, rgba(255,210,63,.22) 0%, rgba(255,210,63,0) 65%) !important;
  filter: blur(28px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
.hero-grid, .ccm-shell { overflow: visible !important; }

/* ===========================
   FLAT PAGE (keep particles)
   =========================== */
#bgParticles{ display:block !important; filter:drop-shadow(0 0 18px rgba(0,198,255,.25)); }
body.has-particles{ background:#050811 !important; }
.ccm-hero{ background:#050811 !important; }
.ccm-section{ background:#050811 !important; }

.product-card,
.bundle-card,
.trust-card,
.cart-card,
.pd-block,
.thanks-card{
  background:rgba(5,8,17,.35) !important;
  box-shadow:0 14px 35px rgba(0,0,0,.35), 0 0 16px rgba(0,198,255,.03);
}
.p-img{
  background:transparent !important;
  border:1px solid rgba(0,198,255,.26);
}
.search-row::after{ display:none !important; }

.hero-panel .hero-card.hero-card--highlight{
  position:relative; isolation:isolate; overflow:visible;
  background:rgba(5,8,17,.55);
  border:1px solid rgba(0,198,255,.9);
  box-shadow:0 0 42px rgba(0,198,255,.55), 0 18px 48px rgba(0,0,0,.46);
}
.hero-panel .hero-card.hero-card--highlight::before{
  content:""; position:absolute; inset:-28px; border-radius:30px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(0,198,255,.60) 0%, rgba(0,198,255,.18) 55%, rgba(0,198,255,0) 80%),
    radial-gradient(closest-side, rgba(255,210,63,.28) 0%, rgba(255,210,63,0) 70%);
  filter:blur(26px); z-index:-1; opacity:.95;
}

/* ===== Particles full-page with flat sections ===== */
#bgParticles{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: drop-shadow(0 0 18px rgba(0,198,255,.25));
}
.ccm-header,
.ccm-hero,
.ccm-section,
.ccm-footer{
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body.has-particles{ background: #050811 !important; }
.hero-panel .hero-card.hero-card--highlight{
  position: relative; isolation: isolate; overflow: visible;
  border: 1px solid rgba(0,198,255,.9);
  box-shadow: 0 0 42px rgba(0,198,255,.55), 0 18px 48px rgba(0,0,0,.46);
}
.hero-panel .hero-card.hero-card--highlight::before{
  content:""; position:absolute; inset:-28px; border-radius:30px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(0,198,255,.60) 0%, rgba(0,198,255,.18) 55%, rgba(0,198,255,0) 80%),
    radial-gradient(closest-side, rgba(255,210,63,.28) 0%, rgba(255,210,63,0) 70%);
  filter: blur(26px); z-index:-1; opacity:.95;
}

/* ================================
   SAGE QUOTE MODAL (global styles)
   ================================ */
.ccm-modal{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
}
.ccm-modal.show{ display:grid; place-items:center; }
.ccm-modal__dialog{
  width:min(560px, 92vw);
  background:rgba(5,8,17,.5);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:1rem;
}

/* Form bits */
.ccm-modal .row{ margin:.6rem 0; display:grid; gap:.35rem; }
.ccm-modal label{ font-size:.78rem; color:var(--muted); }
.ccm-modal input, .ccm-modal textarea{
  width:100%;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-size:.9rem;
}
.ccm-modal textarea{ resize:vertical; min-height:90px; }

/* Actions + status */
.ccm-modal .actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.6rem; }
.ccm-modal .status{ margin-top:.6rem; opacity:.9; font-size:.85rem; color:var(--muted); }
.action-row{ display:flex; gap:.6rem; align-items:center; margin:.8rem 0; }
.action-row .ccm-btn{ flex:0 0 auto; }

/* Buttons inside modal inherit your tokens */
.ccm-modal .ccm-btn{ border-radius:12px; padding:.42rem .8rem; font-size:.8rem; }
.ccm-modal .ccm-btn.primary{
  background:linear-gradient(140deg, rgba(0,198,255,1), rgba(0,72,120,1));
  border:1px solid rgba(0,198,255,.5);
}

/* Accessibility */
.ccm-modal [type="button"], .ccm-modal [type="submit"]{ cursor:pointer; }
.ccm-modal :where(input,textarea):focus{ outline:none; box-shadow:0 0 0 3px rgba(0,198,255,.25); }

/* With particles: enforce stacking so modal wins */
body.has-particles #bgParticles{ z-index:0; }
body.has-particles .ccm-header,
body.has-particles .ccm-hero,
body.has-particles .ccm-section,
body.has-particles .ccm-footer{ position:relative; z-index:1; }

/* Small screens */
@media (max-width:420px){
  .ccm-modal__dialog{ padding:.85rem; border-radius:12px; }
  .ccm-modal input, .ccm-modal textarea{ font-size:.85rem; }
}

/* ===========================
   CART PAGE SMALL TWEAKS
   =========================== */
.ccm-btn.inline{ display:inline-block; vertical-align:middle; }