/* ============================================================================
   ACCESS//GRANTED — black / silver / neon green terminal aesthetic
   Fonts: VT323 (display) + Share Tech Mono (body), loaded in head.ejs
   ========================================================================== */

:root {
  --bg: #050705;
  --panel: #0a0e0a;
  --panel-2: #0d130d;
  --line: #1c2a1c;
  --line-bright: #2c452c;
  --grn: #39ff14;
  --grn-soft: #7dff5f;
  --grn-dim: #1f9912;
  --grn-dark: #0c3a08;
  --silver: #c7cfc7;
  --silver-dim: #7d877d;
  --amber: #ffb000;
  --red: #ff4747;
  --glow: 0 0 6px rgba(57, 255, 20, .55), 0 0 22px rgba(57, 255, 20, .18);
  --glow-soft: 0 0 14px rgba(57, 255, 20, .12);
  --mono: 'Share Tech Mono', 'Courier New', monospace;
  --disp: 'VT323', 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(57, 255, 20, .05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(57, 255, 20, .025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(57, 255, 20, .025) 39px 40px);
  color: var(--silver);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; width: 100%; padding-bottom: 3rem; }
main.wrap { padding-top: 1.6rem; }

::selection { background: var(--grn); color: #000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #060906; }
::-webkit-scrollbar-thumb { background: var(--grn-dark); border: 1px solid var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--grn-dim); }

/* ---- global overlays ---------------------------------------------------- */
#rain { position: fixed; inset: 0; z-index: -1; opacity: .14; pointer-events: none; }
.scanlines {
  position: fixed; inset: -10px;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, .16) 2px 3px);
  mix-blend-mode: multiply;
  animation: scan-drift 9s linear infinite;
}
@keyframes scan-drift { from { transform: translateY(0); } to { transform: translateY(3px); } }
.vignette {
  position: fixed; inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 45%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

/* ---- layout ------------------------------------------------------------- */
.wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 2rem); }
.wrap.wide { width: min(1280px, 100% - 2rem); }

a { color: var(--grn-soft); text-decoration: none; }
a:hover { color: var(--grn); text-shadow: var(--glow); }

h1, h2, h3 { font-weight: 400; margin: 0 0 .5rem; }
p { margin: .4rem 0 .9rem; }

.dim { color: var(--silver-dim); }
.tiny { font-size: .78rem; }
.grn { color: var(--grn); }
.amb { color: var(--amber); }
.red { color: var(--red); }
.r { text-align: right; }
.center { text-align: center; }
.spacer { flex: 1; }
b { color: var(--silver); }
b.grn { color: var(--grn); }

/* ---- header / nav ------------------------------------------------------- */
.site-head {
  position: sticky; top: 0;
  z-index: 40;
  background: rgba(5, 8, 5, .92);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(57, 255, 20, .12), 0 8px 24px rgba(0, 0, 0, .6);
}
.head-row { display: flex; align-items: center; gap: 1.2rem; padding: .55rem 0; flex-wrap: wrap; }
.logo {
  font-family: var(--disp);
  font-size: 1.75rem;
  letter-spacing: .06em;
  color: var(--grn);
  text-shadow: var(--glow);
  white-space: nowrap;
}
.cursor { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.nav a, .navbtn {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--silver-dim);
  padding: .35rem .6rem;
  border: 1px solid transparent;
}
.nav a:hover, .navbtn:hover { color: var(--grn); border-color: var(--line-bright); text-shadow: var(--glow); }
.nav a.on { color: var(--grn); border-color: var(--grn-dark); background: rgba(57, 255, 20, .06); }
.nav a.reg { color: var(--grn); border-color: var(--grn-dark); }
.nav a.adm { color: var(--amber); }
.nav a.adm:hover, .nav a.adm.on { border-color: rgba(255, 176, 0, .4); text-shadow: 0 0 8px rgba(255, 176, 0, .6); }
.cart-link { color: var(--silver); }
.inline-form { display: inline; margin: 0; }
.navbtn { background: none; cursor: pointer; }

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #070b07;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--grn-dim);
}
.ticker-track {
  display: inline-flex; gap: 2.2rem;
  white-space: nowrap;
  padding: .28rem 0;
  padding-right: 2.2rem;
  will-change: transform;
  animation: ticker 44s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.tk-loc { color: var(--silver-dim); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- flash messages ----------------------------------------------------- */
.flash-zone { margin-top: 1rem; display: grid; gap: .5rem; }
.flash {
  border: 1px solid var(--line-bright);
  background: var(--panel);
  padding: .55rem .8rem;
  font-size: .85rem;
  animation: flash-in .25s ease-out;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
.flash.ok { border-color: var(--grn-dark); color: var(--grn-soft); box-shadow: inset 3px 0 0 var(--grn); }
.flash.warn { border-color: rgba(255, 176, 0, .4); color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.flash.error { border-color: rgba(255, 71, 71, .45); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.fx-tag { font-weight: bold; }

/* ---- page headings ------------------------------------------------------ */
.page-h {
  font-family: var(--disp);
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--grn);
  text-shadow: var(--glow);
  letter-spacing: .04em;
  margin: 0 0 .25rem;
}
.page-sub { color: var(--silver-dim); margin-top: 0; }
.page-h-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.backlink { display: inline-block; font-size: .8rem; letter-spacing: .1em; color: var(--silver-dim); margin-bottom: 1rem; }
.backlink:hover { color: var(--grn); }
.crumbs { font-size: .8rem; letter-spacing: .08em; color: var(--silver-dim); margin: 0 0 .3rem; }

.sec-h {
  font-family: var(--disp);
  font-size: 1.7rem;
  color: var(--silver);
  letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
  margin-bottom: 1.1rem;
}
.sec-tag { color: var(--grn); text-shadow: var(--glow); }
.sec-count { color: var(--silver-dim); font-size: 1.05rem; }
.section { margin: 2.6rem 0; }

/* ---- cards (corner-bracket signature) ----------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--grn-dim);
  border-style: solid;
  transition: border-color .25s;
}
.card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.card:hover::before, .card:hover::after { border-color: var(--grn); }
.card-h { font-size: .85rem; letter-spacing: .14em; color: var(--grn); margin-bottom: .8rem; }
.card.empty { text-align: center; padding: 2.2rem 1.2rem; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--grn);
  background: rgba(57, 255, 20, .04);
  border: 1px solid var(--grn-dim);
  padding: .55rem 1.05rem;
  cursor: pointer;
  text-align: center;
  transition: background .15s, box-shadow .15s, color .15s;
}
.btn::before { content: "[ "; color: var(--grn-dim); }
.btn::after { content: " ]"; color: var(--grn-dim); }
.btn:hover:not(:disabled) { background: var(--grn); color: #021102; box-shadow: var(--glow); text-shadow: none; }
.btn:hover:not(:disabled)::before, .btn:hover:not(:disabled)::after { color: #021102; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { color: var(--silver); border-color: var(--silver-dim); background: transparent; }
.btn-ghost::before, .btn-ghost::after { color: var(--silver-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--silver); color: #0a0a0a; box-shadow: 0 0 12px rgba(199, 207, 199, .35); }
.btn-full { display: block; width: 100%; }
.btn-big { font-size: .95rem; padding: .75rem 1.5rem; }
.btn-sm { font-size: .72rem; padding: .3rem .6rem; }
.btn-danger, .btn-ghost.danger { color: var(--red); border-color: rgba(255, 71, 71, .5); background: transparent; }
.btn-danger::before, .btn-danger::after,
.btn-ghost.danger::before, .btn-ghost.danger::after { color: rgba(255, 71, 71, .6); }
.btn-danger:hover:not(:disabled), .btn-ghost.danger:hover:not(:disabled) {
  background: var(--red); color: #140202; box-shadow: 0 0 12px rgba(255, 71, 71, .5);
}

/* ---- glitch effect (fx.js toggles .glitching) --------------------------- */
[data-glitch] { position: relative; display: inline-block; }
[data-glitch].glitching::before,
[data-glitch].glitching::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
[data-glitch].glitching::before {
  color: #2bd9ff;
  animation: glitch-a .28s steps(2) both;
  clip-path: inset(12% 0 58% 0);
}
[data-glitch].glitching::after {
  color: var(--red);
  animation: glitch-b .28s steps(2) both;
  clip-path: inset(60% 0 8% 0);
}
@keyframes glitch-a {
  0% { transform: translate(-3px, -2px); } 40% { transform: translate(3px, 1px); }
  70% { transform: translate(-2px, 2px); } 100% { transform: translate(0); }
}
@keyframes glitch-b {
  0% { transform: translate(3px, 2px); } 40% { transform: translate(-3px, -1px); }
  70% { transform: translate(2px, -2px); } 100% { transform: translate(0); }
}

/* ---- terminal windows --------------------------------------------------- */
.term {
  background: rgba(6, 10, 6, .96);
  border: 1px solid var(--line-bright);
  box-shadow: var(--glow-soft), 0 18px 50px rgba(0, 0, 0, .65);
  margin-bottom: 1.2rem;
}
.term-bar {
  display: flex; align-items: center; gap: .45rem;
  background: linear-gradient(180deg, #141b14, #0c110c);
  border-bottom: 1px solid var(--line);
  padding: .45rem .7rem;
}
.tdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tdot.r { background: #ff5f56; box-shadow: 0 0 6px rgba(255, 95, 86, .7); }
.tdot.y { background: #ffbd2e; box-shadow: 0 0 6px rgba(255, 189, 46, .7); }
.tdot.g { background: #27c93f; box-shadow: 0 0 6px rgba(39, 201, 63, .7); }
.term-title { margin-left: .4rem; font-size: .74rem; letter-spacing: .1em; color: var(--silver-dim); }
.term-body { padding: 1.3rem 1.4rem 1.5rem; }
.term.ok-glow { box-shadow: 0 0 0 1px var(--grn-dark), var(--glow), 0 18px 50px rgba(0, 0, 0, .65); }

/* ---- hero --------------------------------------------------------------- */
.hero { margin-top: 1.8rem; }
.bootseq { font-size: .85rem; color: var(--grn-dim); min-height: 6.2em; margin-bottom: 1rem; }
.type-line { opacity: 0; white-space: pre-wrap; }
.type-line.done, .no-motion .type-line { opacity: 1; }
.type-line b { color: var(--grn); text-shadow: var(--glow); }
.hero-title {
  font-family: var(--disp);
  font-size: clamp(3rem, 9vw, 5.6rem);
  line-height: .95;
  color: var(--grn);
  text-shadow: var(--glow), 0 0 60px rgba(57, 255, 20, .25);
  letter-spacing: .05em;
  margin: .2rem 0 .4rem;
}
.hero-sub { color: var(--silver); letter-spacing: .18em; font-size: .95rem; margin: 0 0 .4rem; }
.hero-tag { color: var(--silver-dim); max-width: 60ch; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

.status-strip { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
.stat-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--silver-dim);
  font-size: .74rem;
  letter-spacing: .1em;
  padding: .4rem .75rem;
}

/* LEDs */
.led {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
  background: #333c33;
  border: 1px solid #000;
  vertical-align: middle;
  flex: none;
}
.led.on { background: var(--grn); box-shadow: 0 0 8px var(--grn); animation: led-pulse 2.2s ease-in-out infinite; }
.led.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.led.off { background: var(--red); opacity: .55; box-shadow: 0 0 5px rgba(255, 71, 71, .4); }
@keyframes led-pulse { 50% { box-shadow: 0 0 3px var(--grn); opacity: .75; } }
.open-line { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; letter-spacing: .08em; }

/* ---- services grid ------------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.svc { padding: 1rem 1rem 1.15rem; margin-bottom: 0; overflow: hidden; }
.svc-code { position: absolute; top: .55rem; right: .7rem; font-size: .68rem; letter-spacing: .14em; color: var(--grn-dim); }
.svc-name { font-family: var(--disp); font-size: 1.35rem; color: var(--silver); letter-spacing: .04em; margin: 0 0 .3rem; padding-right: 3.2rem; }
.svc:hover .svc-name { color: var(--grn); text-shadow: var(--glow); }
.svc-blurb { font-size: .82rem; color: var(--silver-dim); margin: 0 0 .7rem; }
.svc-bar { height: 3px; background: var(--grn-dark); overflow: hidden; }
.svc-bar i { display: block; height: 100%; width: 35%; background: var(--grn); box-shadow: 0 0 8px var(--grn); transform: translateX(-110%); }
.svc:hover .svc-bar i { animation: bar-sweep 1.1s ease-out forwards; }
@keyframes bar-sweep { to { transform: translateX(300%); } }
.svc:hover { border-color: var(--line-bright); transform: translateY(-2px); transition: transform .2s, border-color .2s; }

/* ---- contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; gap: 1rem; }
.contact-card .btn { margin-bottom: .6rem; }

/* admin log filters + badges */
.inline-filter { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-filter .txt, .inline-filter .sel {
  background: #060a06; border: 1px solid var(--line); color: var(--silver);
  font-family: var(--mono); font-size: .8rem; padding: .35rem .5rem; border-radius: 6px; max-width: 220px;
}
.inline-filter .txt:focus, .inline-filter .sel:focus { border-color: var(--grn-dark); outline: none; }
.chip.ok.on, .chip.ok:hover { color: var(--grn); border-color: var(--grn-dark); }
.chip.bad.on, .chip.bad:hover { color: #ff3b5c; border-color: rgba(255, 59, 92, .5); }
.badge.login-ok { color: var(--grn); border-color: var(--grn-dark); background: rgba(57, 255, 20, .07); }
.badge.login-fail { color: #ff3b5c; border-color: rgba(255, 59, 92, .45); background: rgba(255, 59, 92, .08); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; }
.kv dt { color: var(--grn-dim); font-size: .74rem; letter-spacing: .14em; padding-top: .15rem; }
.kv dd { margin: 0; color: var(--silver); }
.coord-card { text-align: center; }
.coord-art pre {
  font-size: .72rem;
  line-height: 1.25;
  color: var(--grn-dim);
  text-align: left;
  display: inline-block;
  margin: .2rem auto .6rem;
  text-shadow: 0 0 4px rgba(57, 255, 20, .25);
}

/* ---- store gate --------------------------------------------------------- */
.gate { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gate-icon { font-size: 2rem; color: var(--grn); text-shadow: var(--glow); }
.gate-cta { display: flex; gap: .6rem; margin-left: auto; flex-wrap: wrap; }

/* ---- product grid ------------------------------------------------------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.prod { padding: 0; margin-bottom: 0; display: flex; flex-direction: column; }
.prod-img {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: #060906;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); transition: transform .3s, filter .3s; }
.prod:hover .prod-img img { transform: scale(1.04); filter: saturate(1.05); }
.noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--grn-dark);
  font-family: var(--disp);
  font-size: 1.3rem;
  letter-spacing: .2em;
  background: repeating-linear-gradient(45deg, #070a07 0 12px, #090d09 12px 24px);
  animation: noimg-flicker 3.5s steps(2) infinite;
}
.noimg.big { font-size: 2rem; aspect-ratio: 4 / 3; }
@keyframes noimg-flicker { 92% { opacity: 1; } 94% { opacity: .55; } 96% { opacity: 1; } }
.prod.sold .prod-img img { filter: grayscale(1) brightness(.55); }
.sold-tag {
  position: absolute; inset: auto 0 0 0;
  background: rgba(255, 71, 71, .14);
  border-top: 1px solid rgba(255, 71, 71, .5);
  color: var(--red);
  text-align: center;
  font-size: .74rem;
  letter-spacing: .3em;
  padding: .3rem 0;
}
.prod-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.prod-name { font-size: .95rem; margin: 0; }
.prod-name a { color: var(--silver); }
.prod-name a:hover { color: var(--grn); }
.prod-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; }
.price { font-family: var(--disp); font-size: 1.5rem; color: var(--grn); text-shadow: var(--glow); }
.stock { font-size: .72rem; letter-spacing: .1em; color: var(--silver-dim); }
.stock.low { color: var(--amber); animation: blink 1.6s steps(1) infinite; }
.add-cart { margin: 0; }

/* ---- product detail ----------------------------------------------------- */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.pd-main { padding: 0; overflow: hidden; }
.pd-main img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: contain; background: #060906; }
.pd-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.pd-thumb {
  width: 74px; height: 58px;
  padding: 0; border: 1px solid var(--line);
  background: #060906; cursor: pointer;
  opacity: .65; transition: opacity .15s, border-color .15s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.on, .pd-thumb:hover { opacity: 1; border-color: var(--grn); box-shadow: var(--glow-soft); }
.pd-name { font-family: var(--disp); font-size: 2rem; color: var(--silver); letter-spacing: .03em; }
.pd-price { font-family: var(--disp); font-size: 2.6rem; color: var(--grn); text-shadow: var(--glow); }
.pd-stock { font-size: .8rem; letter-spacing: .12em; color: var(--grn-soft); margin: .3rem 0 1rem; }
.pd-stock.low { color: var(--amber); }
.pd-stock.out { color: var(--red); }
.pd-add { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
.qty-lab { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; letter-spacing: .14em; color: var(--grn-dim); }
.qty {
  width: 74px;
  background: #060906;
  border: 1px solid var(--line-bright);
  color: var(--grn);
  font-family: var(--mono);
  font-size: 1rem;
  padding: .5rem;
  text-align: center;
}
.qty:focus { outline: none; border-color: var(--grn); box-shadow: var(--glow-soft); }
.pickup-note {
  margin: 1.1rem 0;
  border: 1px dashed var(--grn-dark);
  background: rgba(57, 255, 20, .04);
  padding: .7rem .85rem;
  font-size: .82rem;
}
.pd-desc { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.pd-desc p { color: var(--silver-dim); font-size: .88rem; }
.foot-h { font-size: .74rem; letter-spacing: .16em; color: var(--grn); margin-bottom: .5rem; }

/* ---- cart --------------------------------------------------------------- */
.cart-table { padding: .4rem .9rem; }
.cart-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line);
}
.cart-img { width: 92px; height: 70px; display: block; border: 1px solid var(--line); background: #060906; }
.cart-img img, .cart-img .noimg { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: .8rem; }
.cart-name { color: var(--silver); font-size: .95rem; }
.cart-name:hover { color: var(--grn); }
.cart-qty { display: flex; gap: .45rem; align-items: center; margin-top: .45rem; flex-wrap: wrap; }
.cart-qty .qty { width: 62px; padding: .3rem; font-size: .88rem; }
.cart-line { font-family: var(--disp); font-size: 1.5rem; color: var(--grn); }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0 .7rem; letter-spacing: .2em; }
.cart-total b { font-family: var(--disp); font-size: 2rem; letter-spacing: .05em; text-shadow: var(--glow); }
.checkout-zone { text-align: center; padding: 1.4rem 1.2rem; }
.checkout-zone .gate-icon { margin-bottom: .3rem; }
.checkout-zone .gate-cta { justify-content: center; margin: .6rem 0 0; }

/* ---- order status / thanks ---------------------------------------------- */
.order-h { font-family: var(--disp); font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: .06em; }
.order-h.grn { text-shadow: var(--glow); }
.blink-slow { animation: blink 1.8s steps(1) infinite; color: var(--amber); }
.order-items .oi-row { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--line); gap: 1rem; }
.order-items .oi-row.total { border-bottom: 0; margin-top: .4rem; letter-spacing: .14em; }
.order-items .oi-row.total b { font-family: var(--disp); font-size: 1.5rem; }

/* ---- forms -------------------------------------------------------------- */
.form { display: grid; gap: .9rem; }
.form label { display: grid; gap: .3rem; font-size: .72rem; letter-spacing: .14em; color: var(--grn-dim); }
.form input, .form textarea, .form select, .searchbar input, .dash-controls select {
  background: #060906;
  border: 1px solid var(--line-bright);
  color: var(--silver);
  font-family: var(--mono);
  font-size: .95rem;
  padding: .6rem .7rem;
  width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus, .searchbar input:focus, .dash-controls select:focus {
  outline: none;
  border-color: var(--grn);
  box-shadow: var(--glow-soft);
  color: var(--grn-soft);
}
.form input::placeholder, .searchbar input::placeholder { color: #3c463c; }
.form textarea { resize: vertical; line-height: 1.5; }
input.reject { animation: reject .18s; border-color: var(--red) !important; }
@keyframes reject { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; }
.check-l { display: flex !important; flex-direction: row !important; align-items: center; gap: .6rem !important; color: var(--silver) !important; font-size: .85rem !important; letter-spacing: .06em !important; }
.check-l input { width: auto; accent-color: var(--grn); transform: scale(1.25); }
input[type="file"] { padding: .45rem; font-size: .8rem; color: var(--silver-dim); }
input[type="file"]::file-selector-button {
  background: transparent; border: 1px solid var(--grn-dim); color: var(--grn);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  padding: .35rem .7rem; margin-right: .8rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--grn); color: #021102; }

.auth-wrap { display: flex; justify-content: center; padding-top: 2.2rem; }
.auth-term { width: min(480px, 100%); }

/* ---- tables & badges ---------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--grn-dim);
  border-bottom: 1px solid var(--line-bright);
  padding: .45rem .55rem;
  font-weight: 400;
}
.tbl th.r { text-align: right; }
.tbl td { padding: .55rem; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.tbl tbody tr:hover { background: rgba(57, 255, 20, .035); }
.tbl.tight td, .tbl.tight th { padding: .3rem .45rem; font-size: .78rem; }
.row-off { opacity: .45; }
.thcell { width: 56px; }
.row-thumb { width: 52px; height: 40px; object-fit: cover; border: 1px solid var(--line); display: block; }

.badge {
  display: inline-block;
  font-size: .66rem;
  letter-spacing: .14em;
  padding: .18rem .5rem;
  border: 1px solid;
  white-space: nowrap;
}
.badge.pending { color: var(--amber); border-color: rgba(255, 176, 0, .5); background: rgba(255, 176, 0, .07); }
.badge.paid { color: var(--grn); border-color: var(--grn-dark); background: rgba(57, 255, 20, .07); }
.badge.picked_up { color: var(--silver); border-color: var(--silver-dim); background: rgba(199, 207, 199, .06); }
.badge.canceled { color: var(--red); border-color: rgba(255, 71, 71, .45); background: rgba(255, 71, 71, .06); }

/* ---- CRT video enclosure (/content signature piece) ---------------------- */
.crt-unit { margin: 2.4rem auto; max-width: 760px; }
.crt-chassis {
  background: linear-gradient(175deg, #d9ded9 0%, #b9c0b9 18%, #9aa29a 55%, #7e867e 100%);
  border: 1px solid #5c645c;
  border-radius: 14px 14px 10px 10px;
  padding: 12px 14px 10px;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .75),
    inset 0 -3px 6px rgba(0, 0, 0, .45),
    0 22px 45px rgba(0, 0, 0, .7);
}
.crt-top {
  display: flex; align-items: center; gap: .8rem;
  color: #2c332c;
  font-size: .68rem;
  letter-spacing: .3em;
  padding: 0 .2rem .55rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.crt-brand { font-weight: bold; }
.crt-model { margin-left: auto; letter-spacing: .18em; color: #465046; }
.screw {
  width: 11px; height: 11px; border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #f2f5f2, #8b938b 60%, #565e56);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .6), 0 1px 1px rgba(255, 255, 255, .5);
  position: relative;
}
.screw::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 50%;
  height: 1px; background: #3a413a;
  transform: rotate(38deg);
}
.crt-screen {
  background: #000;
  border-radius: 10px;
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px #2a2f2a,
    inset 0 6px 22px rgba(0, 0, 0, .95),
    inset 0 0 60px rgba(0, 0, 0, .9);
}
.yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #020402;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.05) brightness(.85); transition: filter .3s; }
.yt-facade:hover img, .yt-facade:focus-visible img { filter: saturate(1) contrast(1.05) brightness(.95); }
.yt-facade:focus-visible { outline: 2px solid var(--grn); outline-offset: 3px; }
.crt-noise {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  color: var(--grn);
  text-shadow: 0 0 12px var(--grn), 0 0 40px rgba(57, 255, 20, .6);
  background: radial-gradient(circle at center, rgba(0, 0, 0, .35), transparent 65%);
  transition: transform .2s;
  pointer-events: none;
}
.yt-facade:hover .play-btn { transform: scale(1.15); }
.crt-hint {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: .64rem;
  letter-spacing: .34em;
  color: rgba(57, 255, 20, .8);
  text-shadow: 0 0 6px rgba(57, 255, 20, .6);
  animation: blink 1.4s steps(1) infinite;
  pointer-events: none;
}
.yt-facade.playing { cursor: default; animation: crt-on .35s ease-out; }
.yt-facade.playing .play-btn,
.yt-facade.playing .crt-hint,
.yt-facade.playing .crt-noise,
.yt-facade.playing > img { display: none; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@keyframes crt-on {
  0% { transform: scaleY(.005) scaleX(.6); filter: brightness(6); }
  55% { transform: scaleY(1.02) scaleX(1); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); }
}
.crt-controls { display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem .2rem; }
.crt-ch { font-size: .68rem; letter-spacing: .2em; color: #333b33; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.knob {
  width: 16px; height: 16px; border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #eef1ee, #969e96 55%, #4e564e);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .55), 0 1px 1px rgba(255, 255, 255, .5);
  position: relative;
}
.knob::after {
  content: ""; position: absolute; top: 2px; left: 50%;
  width: 2px; height: 5px; background: #2b322b; transform: translateX(-50%);
}
.vents {
  flex: 1; height: 12px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 3px, transparent 3px 8px);
  border-radius: 3px;
}
.crt-plate { max-width: 680px; margin: -4px auto 0; }
.post-title { font-family: var(--disp); font-size: 1.7rem; color: var(--grn); letter-spacing: .04em; margin-bottom: .1rem; }
.post-date { margin-bottom: .6rem; }
.post-body p { color: var(--silver-dim); font-size: .9rem; }

/* ---- collect page ------------------------------------------------------- */
.collect-card p { font-size: .9rem; }

/* ---- error pages -------------------------------------------------------- */
.errpage { padding-top: 3.5rem; }
.err-code {
  font-family: var(--disp);
  font-size: clamp(6rem, 22vw, 11rem);
  line-height: 1;
  color: var(--grn);
  text-shadow: var(--glow), 0 0 80px rgba(57, 255, 20, .3);
}
.err-code.red { color: var(--red); text-shadow: 0 0 10px rgba(255, 71, 71, .7), 0 0 60px rgba(255, 71, 71, .3); }
.err-h { font-family: var(--disp); font-size: 2rem; letter-spacing: .3em; color: var(--silver); }

/* ---- admin -------------------------------------------------------------- */
.admnav {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  border: 1px solid rgba(255, 176, 0, .3);
  background: rgba(255, 176, 0, .04);
  padding: .4rem .7rem;
  margin: 1.6rem 0 1.3rem;
  font-size: .76rem;
  letter-spacing: .12em;
}
main.wrap .admnav:first-child, main .admnav:first-child { margin-top: 0; }
.admnav-tag { color: var(--amber); margin-right: .6rem; }
.admnav a { color: var(--silver-dim); padding: .25rem .55rem; border: 1px solid transparent; }
.admnav a:hover { color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 0, .5); }
.admnav a.on { color: var(--amber); border-color: rgba(255, 176, 0, .4); background: rgba(255, 176, 0, .07); }

.searchbar { display: flex; gap: .6rem; margin-bottom: 1rem; }
.searchbar input { max-width: 420px; }

.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.mini-order { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.mini-order:last-child { border-bottom: 0; }
.mini-order-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mini-order-h .r { margin-left: auto; font-family: var(--disp); font-size: 1.2rem; }

.filter-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { font-size: .72rem; letter-spacing: .12em; color: var(--silver-dim); border: 1px solid var(--line); padding: .32rem .7rem; }
.chip:hover { color: var(--grn); border-color: var(--grn-dim); text-shadow: none; }
.chip.on { color: var(--grn); border-color: var(--grn); background: rgba(57, 255, 20, .07); box-shadow: var(--glow-soft); }

.img-manage { display: flex; gap: .8rem; flex-wrap: wrap; }
.img-tile { position: relative; width: 150px; }
.img-tile img { width: 150px; height: 110px; object-fit: cover; border: 1px solid var(--line); display: block; }
.img-tile .x {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 71, 71, .5);
  border-top: 0;
  color: var(--red);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  padding: .28rem 0;
  cursor: pointer;
}
.img-tile .x:hover { background: var(--red); color: #140202; }
.danger-zone { margin-top: 1.4rem; text-align: right; }

.dash-controls { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.range-l { display: grid; gap: .3rem; font-size: .68rem; letter-spacing: .14em; color: var(--grn-dim); }
.dash-controls select { width: auto; min-width: 170px; padding: .5rem .6rem; color: var(--grn); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.stat { text-align: center; padding: .9rem .6rem; margin-bottom: 0; }
.stat-n { font-family: var(--disp); font-size: 2.1rem; color: var(--grn); text-shadow: var(--glow); line-height: 1.05; }
.stat-l { font-size: .64rem; letter-spacing: .18em; color: var(--silver-dim); margin-top: .2rem; }

.alert-row { display: grid; gap: .6rem; margin-bottom: 1rem; }
.alertcard {
  margin-bottom: 0;
  border-color: rgba(255, 176, 0, .4);
  color: var(--amber);
  font-size: .85rem;
  display: block;
}
.alertcard:hover { text-shadow: 0 0 8px rgba(255, 176, 0, .5); }
.alertcard::before, .alertcard::after { border-color: rgba(255, 176, 0, .5); }

.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chartcard { margin-bottom: 0; }
.chartcard.big { grid-column: 1 / -1; }
.chartcard canvas { max-height: 300px; }

/* ---- footer ------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); background: #060a06; margin-top: 2rem; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  padding: 1.8rem 0 1.4rem;
  font-size: .82rem;
}
.foot-brand { font-family: var(--disp); font-size: 1.4rem; color: var(--grn); text-shadow: var(--glow); margin-bottom: .3rem; }
.foot-col .btn { margin: .3rem 0 .4rem; }
.statusbar { border-top: 1px solid var(--line); background: #050805; }
.statusrow {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  padding: .45rem 0;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--silver-dim);
}
.statusrow span { display: inline-flex; align-items: center; gap: .45rem; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .contact-grid, .admin-2col, .chart-grid, .pd-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-line { grid-column: 2; text-align: right; }
  .cart-img { width: 72px; height: 56px; }
}
@media (max-width: 620px) {
  body { font-size: 14px; }
  .two-col { grid-template-columns: 1fr; }
  .head-row { gap: .5rem; }
  .logo { font-size: 1.45rem; }
  .nav { margin-left: 0; width: 100%; justify-content: flex-start; }
  .nav a, .navbtn { padding: .3rem .42rem; font-size: .74rem; }
  .gate-cta { margin-left: 0; }
  .statusrow { gap: .8rem; }
  .tbl-scroll, .card > .tbl { display: block; overflow-x: auto; }
  .crt-chassis { padding: 8px 9px 7px; }
  .crt-screen { padding: 7px; }
  .err-code { font-size: 5.2rem; }
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #rain { display: none; }
  .type-line { opacity: 1; }
  html { scroll-behavior: auto; }
}
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
.no-motion #rain { display: none; }

/* ---- add-to-cart flight + "click the cart" callout ---------------------- */
.fly-item {
  /* Sized by JS to match the item exactly — a full-size copy "pops out",
     then glides up and shrinks into the cart over ~5s. */
  position: fixed; z-index: 1200; pointer-events: none;
  border: 1px solid var(--grn); border-radius: 10px;
  overflow: hidden; background: #020402;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(57, 255, 20, .55);
  animation: flyGlow 1.1s ease-in-out infinite;
  will-change: transform, opacity;
}
.fly-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-item .fly-ph { font-size: 2.4rem; color: var(--grn); text-shadow: var(--glow); }
@keyframes flyGlow { 0%, 100% { box-shadow: 0 0 14px rgba(57, 255, 20, .45); } 50% { box-shadow: 0 0 30px rgba(57, 255, 20, .85); } }

.cart-link.cart-pop { animation: cartPop .9s ease; }
@keyframes cartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); color: var(--grn); text-shadow: var(--glow); }
  100% { transform: scale(1); }
}

.cc-arrow {
  position: fixed; z-index: 1191; color: var(--grn); font-size: 1.5rem; line-height: 1;
  pointer-events: none; text-shadow: var(--glow);
  animation: ccBounce .9s ease-in-out infinite;
}
@keyframes ccBounce { 0%, 100% { transform: translateY(7px); } 50% { transform: translateY(-4px); } }

.cart-callout {
  position: fixed; z-index: 1190; width: min(300px, calc(100vw - 16px));
  background: #050a05; border: 1px solid var(--grn); border-radius: 10px;
  padding: .8rem 1rem .9rem; color: var(--silver); font-family: var(--mono);
  font-size: .92rem; line-height: 1.5; text-decoration: none; display: block;
  box-shadow: 0 0 26px rgba(57, 255, 20, .35);
}
.cart-callout b { color: var(--grn); }
.cart-callout .cc-go { display: block; text-align: center; margin-top: .6rem; }
.cart-callout .cc-x {
  position: absolute; top: 2px; right: 4px; background: none; border: 0;
  color: var(--silver-dim); font-size: 1rem; cursor: pointer; padding: 4px 8px;
}
.cart-callout .cc-x:hover { color: var(--grn); }

/* ---- public services page -------------------------------------------- */
.service-card { margin-bottom: 1.4rem; }
.service-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .8rem; }
.service-title { font-family: var(--display); font-size: 1.9rem; color: var(--grn); letter-spacing: 1px; margin: 0; text-shadow: 0 0 12px rgba(57, 255, 20, .35); }
.service-price { margin-left: auto; font-family: var(--mono); color: var(--amber); border: 1px solid rgba(255, 176, 0, .45); background: rgba(255, 176, 0, .07); padding: .25rem .7rem; border-radius: 6px; white-space: nowrap; }
.service-media { margin-bottom: .9rem; }
.service-main img { width: 100%; max-height: 460px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; display: block; background: #000; }
.service-thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.service-thumb { padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #000; cursor: pointer; overflow: hidden; width: 86px; height: 62px; opacity: .7; transition: opacity .15s, border-color .15s; }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-thumb.on, .service-thumb:hover { opacity: 1; border-color: var(--grn-dark); }
.service-crt { max-width: 760px; margin: 0 auto 1rem; }
.service-body { color: var(--silver); line-height: 1.65; }
.service-body p { margin: .55rem 0; }
@media (max-width: 620px) {
  .service-price { margin-left: 0; }
  .service-title { font-size: 1.5rem; }
}

/* ==== EASY-READING VIEW =================================================
   html.theme-basic — plain white background, black text, normal fonts,
   no effects. Toggled from the account page or the footer. */
html.theme-basic {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f4f4;
  --line: #c8c8c8;
  --line-bright: #8f8f8f;
  --grn: #0e6b1f;
  --grn-soft: #0b551a;
  --grn-dim: #3d6e46;
  --grn-dark: #9fc4a6;
  --silver: #111111;
  --silver-dim: #444444;
  --amber: #7a5200;
  --red: #b30021;
  --glow: none;
  --glow-soft: none;
  --mono: -apple-system, 'Segoe UI', Arial, sans-serif;
  --disp: -apple-system, 'Segoe UI', Arial, sans-serif;
}
html.theme-basic *, html.theme-basic *::before, html.theme-basic *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.theme-basic body { background-image: none; color: #111; }
html.theme-basic #rain, html.theme-basic .scanlines, html.theme-basic .vignette,
html.theme-basic .ticker, html.theme-basic .crt-noise, html.theme-basic .crt-hint { display: none !important; }
html.theme-basic [data-glitch]::before, html.theme-basic [data-glitch]::after { display: none !important; }
html.theme-basic a:not(.btn):not(.chip):not(.logo) { text-decoration: underline; }
html.theme-basic .site-head { background: #ffffff; border-bottom: 2px solid #d0d0d0; }
html.theme-basic .logo, html.theme-basic .logo .cursor { color: #111; }
html.theme-basic .btn {
  background: #ffffff; color: #111; border: 1.5px solid #333;
}
html.theme-basic .btn:hover { background: #111; color: #ffffff; }
html.theme-basic .btn-ghost { border-color: #777; }
html.theme-basic input, html.theme-basic textarea, html.theme-basic select {
  background: #ffffff !important; color: #111 !important; border-color: #888 !important;
}
html.theme-basic .term, html.theme-basic .card {
  background: #ffffff; border-color: #c8c8c8;
}
html.theme-basic .term-bar { background: #efefef; }
html.theme-basic .tbl tbody tr:hover { background: #f3f3f3; }
html.theme-basic .tbl th { color: #333; border-color: #bbb; }
html.theme-basic .badge { background: #f4f4f4; }
html.theme-basic .crt-top, html.theme-basic .crt-controls { display: none !important; }
html.theme-basic .crt-chassis {
  background: #ffffff; border: 1px solid #c8c8c8; border-radius: 8px; padding: 0;
}
html.theme-basic .crt-screen { border: 0; border-radius: 8px; }
html.theme-basic .crt-plate { border-top: 0; }
html.theme-basic .service-price { background: #fff6e0; }
html.theme-basic .fly-item { background: #ffffff; border-color: #333; }
html.theme-basic .cart-callout { background: #ffffff; border-color: #333; color: #111; }
html.theme-basic .cc-arrow { color: #111; }
html.theme-basic .statusbar { background: #f4f4f4; border-color: #c8c8c8; }
html.theme-basic .chip { background: #f4f4f4; }
html.theme-basic .noimg, html.theme-basic .prod-img { background: #f0f0f0; }
.theme-toggle { display: inline; }

/* easy-reading: remaining dark surfaces found by audit */
html.theme-basic .site-foot { background: #f7f7f7; border-top: 2px solid #d0d0d0; }
html.theme-basic .foot-brand { color: #111; }
html.theme-basic ::-webkit-scrollbar-track { background: #ececec; }
html.theme-basic ::-webkit-scrollbar-thumb { background: #b5b5b5; border: 0; }
html.theme-basic .pd-main img, html.theme-basic .cart-img,
html.theme-basic .service-main img { background: #f0f0f0; border-color: #c8c8c8; }
html.theme-basic .pd-thumb, html.theme-basic .service-thumb { background: #f0f0f0; border-color: #c8c8c8; }
html.theme-basic .qty { background: #ffffff; border-color: #888; color: #111; }
html.theme-basic .crt-screen { background: #000; padding: 0; } /* the video area itself stays a normal black player frame */

/* ---- product variants ---------------------------------------------------- */
.price .from, .pd-price .from { font-size: .62em; color: var(--silver-dim); letter-spacing: 1px; }
.variant-set { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem .8rem; margin: 0 0 .9rem; }
.variant-set legend { font-family: var(--mono); color: var(--silver-dim); font-size: .78rem; letter-spacing: 2px; padding: 0 .4rem; }
.variant-opt { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; border-bottom: 1px dashed var(--line); cursor: pointer; }
.variant-opt:last-child { border-bottom: 0; }
.variant-opt .v-name { color: var(--silver); }
.variant-opt .v-price { margin-left: auto; color: var(--grn); font-family: var(--mono); }
.variant-opt .v-stock { font-size: .72rem; color: var(--silver-dim); font-family: var(--mono); min-width: 74px; text-align: right; }
.variant-opt .v-stock.low { color: var(--amber); }
.variant-opt .v-stock.bad { color: var(--red); }
.variant-opt.vout { opacity: .45; cursor: not-allowed; }
.variant-opt.vout .v-name { text-decoration: line-through; }
.variant-editor { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem .9rem; margin: .4rem 0 1rem; }
.variant-editor legend { font-family: var(--mono); color: var(--amber); font-size: .8rem; letter-spacing: 2px; padding: 0 .4rem; }
.variant-editor input { width: 100%; box-sizing: border-box; }
.variant-editor td { padding: .3rem .35rem; }
html.theme-basic .variant-set, html.theme-basic .variant-editor { border-color: #c8c8c8; }