/* ============================================================
   THEME A — GRAPHITE  ·  dark techno-premium
   Apple Dark × iFixit Pro × SaaS dashboard
   ============================================================ */
[data-theme="a"] {
  --bg:        #0d0b09;
  --surface:   #16130f;
  --surface-2: #211c16;
  --ink:       #f5efe7;
  --ink-2:     #b6ada1;
  --ink-3:     #837a6e;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --accent:    #3b82f6;
  --blue:      #3b82f6;
  --blue-deep: #2563eb;
  --blue-soft: rgba(59,130,246,.16);
  --accent-2:  #22d3ee;
  --photo-bg:  #e9eef4;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-float: 0 -8px 30px rgba(0,0,0,.55);
}

/* Mesh + glow ornament behind everything */
[data-theme="a"] body {
  background:
    radial-gradient(680px 460px at 78% -4%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(720px 520px at 8% 4%, rgba(59,130,246,.16), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="a"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  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: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}
[data-theme="a"] .wrap, [data-theme="a"] .site-header, [data-theme="a"] .tabbar,
[data-theme="a"] .sticky-cta { position: relative; z-index: 1; }

/* Glassy surfaces */
[data-theme="a"] .site-header { background: rgba(13,11,9,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="a"] .search input { background: rgba(255,255,255,.05); }
[data-theme="a"] .mega { background: rgba(22,19,15,.96); backdrop-filter: blur(20px); }

/* Gradient-bordered glass cards */
[data-theme="a"] .card,
[data-theme="a"] .prod,
[data-theme="a"] .bento-tile,
[data-theme="a"] .picker,
[data-theme="a"] .buybox,
[data-theme="a"] .trust-card,
[data-theme="a"] .seo,
[data-theme="a"] .spectable,
[data-theme="a"] .gallery-main,
[data-theme="a"] .reviews-head,
[data-theme="a"] .faq-item,
[data-theme="a"] .qvariants .qv,
[data-theme="a"] .dw {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 40%, rgba(34,211,238,.12)) border-box;
  border: 1px solid transparent;
}
[data-theme="a"] .dw, [data-theme="a"] .qvariants .qv { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.02)) border-box; }

/* Glow behind product imagery */
[data-theme="a"] .prod-media,
[data-theme="a"] .gallery-main,
[data-theme="a"] .hero-photo {
  background:
    radial-gradient(closest-side, rgba(59,130,246,.30), transparent 72%),
    var(--photo-bg);
}
[data-theme="a"] .prod-media::after,
[data-theme="a"] .hero-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(34,211,238,.12);
}
[data-theme="a"] .prod:hover { box-shadow: var(--shadow-lg), 0 0 36px rgba(59,130,246,.22); }
[data-theme="a"] .bento-tile:hover { box-shadow: var(--shadow-lg), 0 0 36px rgba(34,211,238,.18); }

/* Hero headline glow */
[data-theme="a"] .hero h1 .accent {
  background: linear-gradient(100deg, #60a5fa, #22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="a"] .hero-eyebrow .pill { background: rgba(255,255,255,.06); border: 1px solid var(--line); }

/* Primary button glow */
[data-theme="a"] .btn--primary { background: linear-gradient(100deg, #3b82f6, #2563eb); box-shadow: 0 6px 22px rgba(59,130,246,.4); }
[data-theme="a"] .btn--primary:hover { box-shadow: 0 10px 30px rgba(59,130,246,.55); }
[data-theme="a"] .prod-add { background: linear-gradient(100deg, #3b82f6, #2563eb); box-shadow: 0 4px 16px rgba(59,130,246,.4); }

/* Chips / specs darker */
[data-theme="a"] .chip, [data-theme="a"] .prod-specs .sp, [data-theme="a"] .pinfo .specs .chip { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--ink-2); }

/* Footer melds with bg */
[data-theme="a"] .site-footer { background: #0a0907; border-top: 1px solid var(--line); }

/* SEO fade uses surface */
[data-theme="a"] .seo .group_description_block.bottom::after { background: linear-gradient(transparent, var(--surface)); }

/* Quality + availability badges keep light pastel — pop nicely on dark.
   Brand-blue quality variant gets a glassy tint instead: */
[data-theme="a"] .q--orig { background: rgba(59,130,246,.16); color: #93c5fd; border-color: rgba(59,130,246,.4); }
[data-theme="a"] .q--incell { background: rgba(34,211,238,.14); color: #67e8f9; border-color: rgba(34,211,238,.4); }
[data-theme="a"] .q--oled { background: rgba(168,85,247,.16); color: #d8b4fe; border-color: rgba(168,85,247,.4); }
[data-theme="a"] .q--tft { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(245,158,11,.4); }
[data-theme="a"] .q--aaa { background: rgba(255,255,255,.06); color: #cbd5e1; border-color: var(--line-2); }

[data-theme="a"] .qvariants .qv.sel { background: rgba(59,130,246,.12); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px rgba(59,130,246,.25); }
[data-theme="a"] .opt { background: linear-gradient(150deg, #0a1628, #0d0b09); border: 1px solid var(--line); }
[data-theme="a"] .gallery-main img, [data-theme="a"] .prod-media img { mix-blend-mode: multiply; }