<?php
/**
 * Shop — Aptum Merch & Digital Products
 * Deploy at: https://aptum.fun/shop/
 */

$products = [
  [
    'id'       => 1,
    'slug'     => 'aptum-alpha-tee',
    'category' => 'Apparel',
    'name'     => 'Aptum Alpha Tee',
    'price'    => 38.00,
    'badge'    => 'Bestseller',
    'badge_type'=> 'hot',
    'desc'     => 'Heavyweight 320gsm drop-shoulder. Embroidered APTUM wordmark. Black on black.',
    'details'  => ['320gsm cotton', 'Drop shoulder cut', 'Embroidered logo', 'Unisex sizing'],
    'in_stock' => true,
    'new'      => false,
    'emoji'    => '◼',
  ],
  [
    'id'       => 2,
    'slug'     => 'on-chain-hoodie',
    'category' => 'Apparel',
    'name'     => 'On-Chain Hoodie',
    'price'    => 72.00,
    'badge'    => 'New Drop',
    'badge_type'=> 'new',
    'desc'     => 'Oversized 450gsm fleece. "ON-CHAIN" mono print across the back. Washed charcoal.',
    'details'  => ['450gsm fleece', 'Oversized fit', 'Back mono print', 'Ribbed cuffs'],
    'in_stock' => true,
    'new'      => true,
    'emoji'    => '◈',
  ],
  [
    'id'       => 3,
    'slug'     => 'signal-cap',
    'category' => 'Accessories',
    'name'     => 'Signal Cap',
    'price'    => 29.00,
    'badge'    => null,
    'badge_type'=> null,
    'desc'     => 'Six-panel structured cap. Embroidered SIGNAL wordmark. Strap-back, one size.',
    'details'  => ['6-panel structured', 'Embroidered wordmark', 'Adjustable strap', 'One size fits all'],
    'in_stock' => true,
    'new'      => false,
    'emoji'    => '⬡',
  ],
  [
    'id'       => 4,
    'slug'     => 'aptum-research-pack',
    'category' => 'Digital',
    'name'     => 'Research Pack Vol. 1',
    'price'    => 19.00,
    'badge'    => 'Digital',
    'badge_type'=> 'digital',
    'desc'     => '14 deep-dive research reports. PDF format. Covers DeFi, AI×Crypto, tokenomics.',
    'details'  => ['14 research reports', 'PDF download', 'DeFi + AI focus', 'Instant delivery'],
    'in_stock' => true,
    'new'      => false,
    'emoji'    => '▣',
  ],
  [
    'id'       => 5,
    'slug'     => 'noise-filter-tee',
    'category' => 'Apparel',
    'name'     => 'Noise Filter Tee',
    'price'    => 38.00,
    'badge'    => 'Low Stock',
    'badge_type'=> 'low',
    'desc'     => 'Same premium cut as the Alpha Tee. "NOISE FILTER" printed in tonal grey. Off-white.',
    'details'  => ['320gsm cotton', 'Tonal grey print', 'Relaxed fit', 'Off-white colorway'],
    'in_stock' => true,
    'new'      => false,
    'emoji'    => '◻',
  ],
  [
    'id'       => 6,
    'slug'     => 'aptum-sticker-pack',
    'category' => 'Accessories',
    'name'     => 'Sticker Pack',
    'price'    => 9.00,
    'badge'    => null,
    'badge_type'=> null,
    'desc'     => '8 die-cut vinyl stickers. Matte finish. Waterproof. Laptop-ready.',
    'details'  => ['8 stickers', 'Die-cut vinyl', 'Matte finish', 'Waterproof'],
    'in_stock' => true,
    'new'      => false,
    'emoji'    => '✦',
  ],
  [
    'id'       => 7,
    'slug'     => 'defi-thesis-pdf',
    'category' => 'Digital',
    'name'     => 'DeFi Thesis 2025',
    'price'    => 12.00,
    'badge'    => 'Digital',
    'badge_type'=> 'digital',
    'desc'     => '42-page structured thesis. Our full framework for DeFi analysis entering 2025.',
    'details'  => ['42 pages', 'PDF download', 'Full framework', 'Instant delivery'],
    'in_stock' => true,
    'new'      => true,
    'emoji'    => '◉',
  ],
  [
    'id'       => 8,
    'slug'     => 'aptum-tote',
    'category' => 'Accessories',
    'name'     => 'Canvas Tote',
    'price'    => 22.00,
    'badge'    => 'Sold Out',
    'badge_type'=> 'sold',
    'desc'     => 'Heavyweight 12oz canvas. Screen-printed APTUM mark. Natural colorway.',
    'details'  => ['12oz canvas', 'Screen printed', 'Reinforced handles', 'Natural colorway'],
    'in_stock' => false,
    'new'      => false,
    'emoji'    => '⬭',
  ],
];

$categories  = ['All', 'Apparel', 'Accessories', 'Digital'];
$active_cat  = $_GET['cat'] ?? 'All';

$total_items    = count($products);
$in_stock_count = count(array_filter($products, fn($p) => $p['in_stock']));
$digital_count  = count(array_filter($products, fn($p) => $p['category'] === 'Digital'));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Shop — Merch & Digital Products · Aptum</title>
<meta name="description" content="Aptum merch and digital products. Premium apparel, accessories, and research packs.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════
   TOKENS
═══════════════════════════════ */
:root {
  --bg0:     #ECEEF2;
  --bg1:     #E4E7EC;
  --bg2:     #FFFFFF;
  --bg3:     #F5F6F9;
  --border:  rgba(10,12,16,0.14);
  --border2: rgba(10,12,16,0.22);
  --border3: rgba(10,12,16,0.36);
  --border4: rgba(10,12,16,0.55);
  --ink:     #090B0F;
  --ink2:    rgba(9,11,15,0.88);
  --ink3:    rgba(9,11,15,0.65);
  --ink4:    rgba(9,11,15,0.42);
  --ink5:    rgba(9,11,15,0.18);
  --green:   #0A7A3E;
  --green-bg:rgba(10,122,62,0.08);
  --red:     #B91C1C;
  --red-bg:  rgba(185,28,28,0.08);
  --amber:   #B45309;
  --amber-bg:rgba(180,83,9,0.08);
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'IBM Plex Sans', sans-serif;
  --display: 'Syne', sans-serif;
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --safe-t:  env(safe-area-inset-top, 0px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ═══════════════════════════════
   DESKTOP
═══════════════════════════════ */
#desktop { display:block; }
#mobile  { display:none;  }

body {
  background:var(--bg0);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:fixed; inset:0; z-index:9000;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(10,12,16,0.007) 3px,rgba(10,12,16,0.007) 4px);
  pointer-events:none;
}
body::after {
  content:''; position:fixed; inset:0; z-index:0;
  background-image:linear-gradient(rgba(10,12,16,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,12,16,0.06) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

/* Cursor */
#cursor { position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); }
#cursor-inner { width:7px; height:7px; background:var(--ink); border-radius:50%; transition:width .15s,height .15s; }
#cursor-cross-h { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:1px; background:rgba(10,12,16,0.35); }
#cursor-cross-v { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1px; height:22px; background:rgba(10,12,16,0.35); }
body:has(a:hover) #cursor-inner,
body:has(button:hover) #cursor-inner { width:14px; height:14px; }

/* Status bar */
.t-statusbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:30px; background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; padding:0 16px;
}
.t-sb-left { display:flex; align-items:center; flex:1; }
.t-sb-cell {
  display:flex; align-items:center; gap:8px;
  padding:0 16px; height:30px;
  border-right:1px solid rgba(255,255,255,0.1);
  font-size:10.5px; letter-spacing:0.08em;
  color:rgba(255,255,255,0.5); white-space:nowrap;
}
.t-sb-cell:first-child { border-left:1px solid rgba(255,255,255,0.1); }
.t-sb-cell .lbl { color:rgba(255,255,255,0.38); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; }
.t-sb-cell .val { color:rgba(255,255,255,0.92); font-weight:600; font-size:11px; }
.t-sb-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:pulse 2.4s ease-in-out infinite; box-shadow:0 0 6px rgba(74,222,128,0.6); flex-shrink:0; }
.t-sb-time { font-size:10.5px; color:rgba(255,255,255,0.42); letter-spacing:0.1em; font-variant-numeric:tabular-nums; padding:0 16px; }

/* Navbar */
.t-navbar {
  position:fixed; top:30px; left:0; right:0; z-index:499;
  height:48px; background:var(--bg2);
  border-bottom:2px solid var(--border3);
  display:flex; align-items:stretch;
  box-shadow:0 2px 12px rgba(10,12,16,0.07);
}
.t-nav-logo {
  display:flex; align-items:center; padding:0 22px;
  border-right:2px solid var(--border3);
  font-family:var(--display); font-size:16px; font-weight:800;
  letter-spacing:0.14em; color:var(--ink); gap:10px; cursor:none;
}
.t-nav-logo-tag {
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--bg2); letter-spacing:0.12em;
  background:var(--ink); padding:2px 8px;
}
.t-nav-center {
  display:flex; align-items:center; padding:0 22px;
  font-family:var(--sans); font-size:13px; color:var(--ink3); font-weight:500;
  flex:1;
}
.t-nav-center strong { color:var(--ink); font-weight:700; margin-right:6px; }
.t-nav-right { display:flex; align-items:center; margin-left:auto; }
.t-nav-link {
  display:flex; align-items:center; gap:7px;
  padding:0 18px; height:48px;
  font-size:10.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink3);
  border-left:1px solid var(--border);
  transition:color .15s, background .15s; cursor:none;
}
.t-nav-link:hover { color:var(--ink); background:var(--bg3); }
.t-nav-link.active { color:var(--ink); font-weight:700; background:var(--bg1); }

/* Cart pill in nav */
.t-nav-cart {
  display:flex; align-items:center; gap:8px;
  padding:0 20px; height:48px;
  font-size:10.5px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--bg2); background:var(--ink);
  border-left:2px solid var(--border3); cursor:none;
  transition:background .15s;
}
.t-nav-cart:hover { background:#22252E; }
.t-cart-count {
  min-width:18px; height:18px; background:var(--bg2); color:var(--ink);
  border-radius:50%; font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* Shell */
.t-shell {
  position:relative; z-index:1;
  padding-top:78px;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* Tape */
.t-tape {
  border-bottom:2px solid var(--border3);
  background:var(--bg1); overflow:hidden; height:30px;
  display:flex; align-items:center; flex-shrink:0;
}
.t-tape-track {
  display:flex; white-space:nowrap;
  animation:tapeScroll 30s linear infinite;
}
.t-tape-item {
  display:flex; align-items:center; gap:8px;
  padding:0 20px; border-right:1px solid var(--border);
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink3); height:30px; font-weight:600;
}
.t-tape-item .sym { color:var(--ink); font-weight:800; }
.t-tape-item .gr  { color:var(--green); font-weight:700; }
.t-tape-item .am  { color:var(--amber); font-weight:700; }
@keyframes tapeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 3-col grid */
.t-page {
  flex:1; display:grid;
  grid-template-columns:160px 1fr 300px;
  width:100%; border-top:1px solid var(--border2);
}

/* Left nav */
.t-leftnav {
  border-right:2px solid var(--border3);
  background:var(--bg2); display:flex; flex-direction:column;
  position:sticky; top:78px; height:calc(100vh - 78px); overflow-y:auto;
}
.t-leftnav-hd {
  padding:11px 14px; border-bottom:2px solid var(--border3);
  font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink4); font-weight:700; background:var(--bg1); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
}
.t-leftnav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid var(--border);
  font-size:11px; color:var(--ink3); font-weight:500;
  background:none; border-left:3px solid transparent;
  cursor:none; text-align:left; transition:background .12s, color .12s;
  text-decoration:none; width:100%; font-family:var(--mono);
}
.t-leftnav-link:hover { background:var(--bg3); color:var(--ink2); }
.t-leftnav-link.active { color:var(--ink); font-weight:700; border-left-color:var(--ink); background:var(--bg3); }
.t-leftnav-arr { font-size:11px; color:var(--ink4); }
.t-leftnav-section { padding:12px 14px; border-bottom:1px solid var(--border2); }
.t-leftnav-section-hd { font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink4); font-weight:700; margin-bottom:8px; }
.t-leftnav-stat { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); }
.t-leftnav-stat:last-child { border-bottom:none; }
.t-leftnav-stat-k { font-size:10px; color:var(--ink3); font-weight:500; }
.t-leftnav-stat-v { font-size:10.5px; color:var(--ink2); font-weight:700; }
.t-leftnav-stat-v.green { color:var(--green); }

/* Main */
.t-main { padding:28px 32px; display:flex; flex-direction:column; min-width:0; }

/* Right sidebar */
.t-sidebar {
  border-left:2px solid var(--border3); background:var(--bg2);
  display:flex; flex-direction:column;
  position:sticky; top:78px; height:calc(100vh - 78px); overflow-y:auto;
}
.t-sidebar::-webkit-scrollbar { width:4px; }
.t-sidebar::-webkit-scrollbar-track { background:var(--bg1); }
.t-sidebar::-webkit-scrollbar-thumb { background:var(--border3); }
.t-sb-section { border-bottom:1px solid var(--border2); }
.t-sb-section-hd {
  padding:12px 18px; background:var(--bg1);
  font-size:9.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink4); font-weight:700;
  border-bottom:1px solid var(--border);
}
.t-sb-body { padding:16px 18px; }
.t-sb-stat { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.t-sb-stat:last-child { border-bottom:none; }
.t-sb-stat-k { font-size:11px; color:var(--ink3); font-weight:500; }
.t-sb-stat-v { font-size:11.5px; color:var(--ink2); font-weight:700; }
.t-sb-stat-v.green { color:var(--green); }

/* ── HERO ── */
.t-hero {
  background:var(--bg2); border:2px solid var(--border3);
  padding:28px 32px 24px; margin-bottom:20px;
  position:relative; overflow:hidden;
  box-shadow:0 2px 16px rgba(10,12,16,0.06);
  animation:fadeUp .5s ease;
}
.t-hero-wm {
  position:absolute; right:-8px; top:-20px;
  font-family:var(--display); font-weight:800; font-size:110px;
  line-height:1; color:rgba(10,12,16,0.03);
  pointer-events:none; user-select:none; letter-spacing:-0.04em;
}
.t-tag-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.t-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  padding:3px 10px; border:1px solid var(--border2); color:var(--ink3); font-weight:600;
}
.t-tag.live { border-color:var(--green); color:var(--green); background:var(--green-bg); }
.t-tag-dot { width:5px; height:5px; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }
.t-hero-title {
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,3.2vw,38px); line-height:1;
  letter-spacing:-0.025em; color:var(--ink); margin-bottom:8px;
}
.t-hero-sub {
  font-family:var(--sans); font-size:14px; color:var(--ink3);
  font-weight:500; max-width:560px; line-height:1.65;
}

/* Filter bar */
.t-filter-bar {
  display:flex; align-items:center; gap:0;
  border:2px solid var(--border3); margin-bottom:20px;
  background:var(--bg2); overflow:hidden;
  animation:fadeUp .5s ease .05s both;
}
.t-filter-btn {
  padding:10px 18px; border:none; background:none;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3);
  border-right:1px solid var(--border); cursor:none;
  transition:background .12s, color .12s; white-space:nowrap;
}
.t-filter-btn:last-child { border-right:none; }
.t-filter-btn:hover { background:var(--bg3); color:var(--ink); }
.t-filter-btn.active { background:var(--ink); color:var(--bg2); }

/* Product grid */
.t-product-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  animation:fadeUp .5s ease .1s both;
}

/* Product card */
.t-product-card {
  background:var(--bg2); border:2px solid var(--border3);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
  cursor:none;
}
.t-product-card:hover { border-color:var(--border4); box-shadow:0 4px 24px rgba(10,12,16,0.1); }
.t-product-card.out-of-stock { opacity:0.6; }

/* Product image area */
.t-product-img {
  height:180px; background:var(--bg1);
  border-bottom:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  font-family:var(--display); font-size:64px; font-weight:800;
  color:rgba(10,12,16,0.08); letter-spacing:-0.04em;
  user-select:none;
}
.t-product-img-emoji {
  font-size:52px; line-height:1; position:relative; z-index:1;
  filter:grayscale(1) contrast(1.3);
  color:rgba(10,12,16,0.18);
}
.t-product-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(10,12,16,0.04));
}

/* Badge */
.t-product-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:8.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  padding:3px 10px; border:1px solid;
}
.t-product-badge.hot    { background:var(--amber-bg); color:var(--amber); border-color:rgba(180,83,9,0.25); }
.t-product-badge.new    { background:var(--green-bg); color:var(--green); border-color:rgba(10,122,62,0.25); }
.t-product-badge.low    { background:var(--red-bg); color:var(--red); border-color:rgba(185,28,28,0.2); }
.t-product-badge.sold   { background:var(--bg1); color:var(--ink4); border-color:var(--border2); }
.t-product-badge.digital{ background:rgba(79,70,229,0.08); color:#4338CA; border-color:rgba(79,70,229,0.2); }

/* Product body */
.t-product-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:8px; }
.t-product-cat { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink4); font-weight:700; }
.t-product-name { font-family:var(--display); font-size:17px; font-weight:800; line-height:1.15; letter-spacing:-0.01em; color:var(--ink); }
.t-product-desc { font-family:var(--sans); font-size:12.5px; color:var(--ink3); line-height:1.6; flex:1; }
.t-product-details { display:flex; flex-direction:column; gap:2px; padding-top:8px; border-top:1px solid var(--border); }
.t-product-detail { font-size:10px; color:var(--ink4); display:flex; align-items:center; gap:5px; }
.t-product-detail::before { content:'—'; color:var(--ink5); }

/* Product footer */
.t-product-foot {
  padding:14px 20px; border-top:1px solid var(--border2);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg3);
}
.t-product-price { font-family:var(--display); font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.t-product-price .cents { font-size:12px; font-weight:600; color:var(--ink3); }
.t-add-btn {
  padding:9px 16px; background:var(--ink); color:var(--bg2);
  border:none; cursor:none; font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  transition:background .15s; display:flex; align-items:center; gap:7px;
}
.t-add-btn:hover { background:#22252E; }
.t-add-btn:disabled { background:var(--bg1); color:var(--ink4); cursor:not-allowed; }
.t-add-btn.added { background:var(--green); }

/* Cart sidebar */
.t-cart-empty {
  padding:28px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.t-cart-empty-ico { font-size:40px; color:var(--ink5); }
.t-cart-empty-txt { font-family:var(--sans); font-size:13px; color:var(--ink4); line-height:1.55; }
.t-cart-item {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.t-cart-item-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.t-cart-item-name { font-family:var(--sans); font-size:12px; font-weight:700; color:var(--ink); flex:1; }
.t-cart-item-price { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink2); }
.t-cart-item-meta { font-size:10px; color:var(--ink4); display:flex; align-items:center; gap:8px; }
.t-cart-remove { font-size:10px; color:var(--red); font-weight:700; background:none; border:none; cursor:none; font-family:var(--mono); padding:0; transition:opacity .15s; }
.t-cart-remove:hover { opacity:0.7; }
.t-cart-subtotal {
  padding:14px 18px; border-top:2px solid var(--border3);
  display:flex; justify-content:space-between; align-items:center;
}
.t-cart-subtotal-k { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink3); }
.t-cart-subtotal-v { font-family:var(--display); font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.t-checkout-btn {
  margin:14px; padding:16px 20px; background:var(--ink); color:var(--bg2);
  border:none; cursor:none; font-family:var(--mono);
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .15s;
}
.t-checkout-btn:hover { background:#22252E; }
.t-checkout-btn:disabled { opacity:.55; pointer-events:none; }

/* Promo banner */
.t-promo {
  background:var(--ink); color:var(--bg2);
  padding:14px 24px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between;
  animation:fadeUp .5s ease .02s both;
  border:2px solid var(--ink);
}
.t-promo-left { display:flex; align-items:center; gap:14px; }
.t-promo-tag { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; padding:3px 9px; background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.9); }
.t-promo-txt { font-family:var(--sans); font-size:13px; color:rgba(255,255,255,0.75); font-weight:500; }
.t-promo-txt strong { color:#fff; font-weight:700; }
.t-promo-code { font-family:var(--mono); font-size:12px; font-weight:700; color:#fff; letter-spacing:0.14em; padding:6px 14px; border:1px solid rgba(255,255,255,0.3); }

/* Footer */
.t-footer {
  height:34px; background:var(--ink);
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; padding:0 16px;
  position:relative; z-index:1;
}
.t-footer-cell {
  display:flex; align-items:center; gap:8px; padding:0 16px; height:34px;
  border-right:1px solid rgba(255,255,255,0.08);
  font-size:10px; letter-spacing:0.08em; color:rgba(255,255,255,0.4);
}
.t-footer-cell:first-child { border-left:1px solid rgba(255,255,255,0.08); }
.t-footer-cell a { color:rgba(255,255,255,0.55); font-weight:600; transition:color .15s; }
.t-footer-cell a:hover { color:rgba(255,255,255,0.9); }
.t-footer-r { margin-left:auto; display:flex; align-items:center; }

/* ═══════════════════════════════
   MOBILE STYLES
═══════════════════════════════ */
@media (pointer:coarse),(max-width:779px) {
  :root {
    --m-bg:    #080A0F;
    --m-glass: rgba(255,255,255,0.058);
    --m-g2:    rgba(255,255,255,0.036);
    --m-gb:    rgba(255,255,255,0.12);
    --m-gb2:   rgba(255,255,255,0.07);
    --m-ink:   #FFFFFF;
    --m-ink2:  rgba(255,255,255,0.75);
    --m-ink3:  rgba(255,255,255,0.45);
    --m-ink4:  rgba(255,255,255,0.24);
    --m-green: #34D399;
    --m-gdim:  rgba(52,211,153,0.12);
    --m-red:   #F87171;
    --m-rdim:  rgba(248,113,113,0.12);
    --m-amber: #FB923C;
    --m-adim:  rgba(251,146,60,0.12);
  }
  body   { background:var(--m-bg); color:var(--m-ink); cursor:auto; scrollbar-width:none; }
  body::-webkit-scrollbar { display:none; }
  body::before,body::after { display:none; }
  #cursor  { display:none; }
  #desktop { display:none; }
  #mobile  { display:block; }

  .m-orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
  .m-orb-1 { width:500px; height:500px; top:-120px; left:-180px; background:radial-gradient(circle,rgba(139,92,246,0.22) 0%,transparent 68%); animation:mOrb 18s ease-in-out infinite; }
  .m-orb-2 { width:380px; height:380px; bottom:20%; right:-90px; background:radial-gradient(circle,rgba(6,182,212,0.17) 0%,transparent 68%); animation:mOrb 24s ease-in-out infinite reverse; }
  .m-orb-3 { width:300px; height:300px; top:55%; left:5%; background:radial-gradient(circle,rgba(25,55,100,0.14) 0%,transparent 68%); animation:mOrb 21s ease-in-out infinite 5s; }
  @keyframes mOrb { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-26px) scale(1.04)} 70%{transform:translateY(14px) scale(0.97)} }
  @keyframes mIn  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

  .m-topbar {
    position:fixed; top:0; left:0; right:0; z-index:200;
    padding:calc(var(--safe-t) + 14px) 20px 14px;
    background:rgba(8,10,15,0.82); backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--m-gb);
    display:flex; align-items:center; justify-content:space-between;
  }
  .m-topbar-logo {
    font-family:var(--display); font-size:18px; font-weight:800;
    letter-spacing:0.12em; color:var(--m-ink); display:flex; align-items:center; gap:10px;
  }
  .m-topbar-logo-tag {
    font-family:var(--mono); font-size:9px; font-weight:700;
    color:var(--m-bg); background:var(--m-ink); padding:2px 8px; letter-spacing:0.12em;
  }
  .m-topbar-right { display:flex; align-items:center; gap:10px; }
  .m-topbar-pill {
    font-family:var(--mono); font-size:9.5px; font-weight:700;
    letter-spacing:0.12em; text-transform:uppercase;
    padding:6px 14px; background:var(--m-glass);
    border:1px solid var(--m-gb); color:var(--m-ink2);
  }
  .m-topbar-cart {
    font-family:var(--mono); font-size:9.5px; font-weight:700;
    letter-spacing:0.1em; padding:6px 14px;
    background:var(--m-ink); color:var(--m-bg);
    border:1px solid var(--m-ink); display:flex; align-items:center; gap:7px;
  }
  .m-cart-count-pill {
    min-width:16px; height:16px; background:var(--m-bg); color:var(--m-ink);
    border-radius:50%; font-size:9px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }

  .m-shop {
    position:relative; z-index:1;
    padding-top:calc(var(--safe-t) + 70px);
    padding-bottom:calc(var(--safe-b) + 80px);
    min-height:100vh;
  }

  /* Header */
  .m-shop-header { padding:28px 20px 20px; border-bottom:1px solid var(--m-gb); }
  .m-shop-header-tags { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .m-shop-header-tag {
    font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
    padding:3px 10px; border:1px solid var(--m-gb); color:var(--m-ink3); font-weight:700;
    background:var(--m-glass); backdrop-filter:blur(8px);
  }
  .m-shop-title {
    font-family:var(--display); font-weight:800;
    font-size:clamp(28px,7vw,38px); line-height:1.05;
    letter-spacing:-0.025em; color:var(--m-ink); margin-bottom:8px;
  }
  .m-shop-sub { font-family:var(--sans); font-size:13px; color:var(--m-ink3); line-height:1.65; }

  /* Promo */
  .m-promo {
    margin:16px 16px 0;
    background:var(--m-glass); border:1px solid var(--m-gb);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding:16px 18px; display:flex; flex-direction:column; gap:8px;
  }
  .m-promo-label {
    font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase;
    font-weight:700; color:var(--m-amber); display:flex; align-items:center; gap:6px;
  }
  .m-promo-txt { font-family:var(--sans); font-size:13px; color:var(--m-ink2); line-height:1.5; }
  .m-promo-txt strong { color:var(--m-ink); }
  .m-promo-code {
    font-family:var(--mono); font-size:13px; font-weight:700;
    color:var(--m-ink); letter-spacing:0.12em;
    padding:8px 14px; background:rgba(255,255,255,0.07);
    border:1px solid var(--m-gb); align-self:flex-start;
  }

  /* Tag filter */
  .m-tag-scroll {
    display:flex; gap:8px; padding:14px 16px;
    overflow-x:auto; scrollbar-width:none;
    border-bottom:1px solid var(--m-gb);
  }
  .m-tag-scroll::-webkit-scrollbar { display:none; }
  .m-tag-btn {
    flex-shrink:0; padding:7px 16px;
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    background:var(--m-glass); border:1px solid var(--m-gb2);
    color:var(--m-ink3); backdrop-filter:blur(8px);
    white-space:nowrap; cursor:pointer; transition:background .12s, color .12s;
  }
  .m-tag-btn.active { background:var(--m-ink); color:var(--m-bg); border-color:var(--m-ink); }

  /* Product cards */
  .m-product-list { padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
  .m-product-card {
    background:var(--m-glass); border:1px solid var(--m-gb2);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    display:flex; gap:0; overflow:hidden;
    animation:mIn .4s ease both; position:relative;
  }
  .m-product-card.out-of-stock { opacity:0.55; }

  /* Image strip */
  .m-product-img {
    width:90px; flex-shrink:0;
    background:rgba(255,255,255,0.04); border-right:1px solid var(--m-gb2);
    display:flex; align-items:center; justify-content:center;
    font-size:36px; color:rgba(255,255,255,0.15);
  }

  .m-product-info { flex:1; padding:16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .m-product-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .m-product-name-wrap { flex:1; min-width:0; }
  .m-product-cat { font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--m-ink4); font-weight:700; margin-bottom:3px; }
  .m-product-name { font-family:var(--display); font-size:15px; font-weight:800; line-height:1.2; letter-spacing:-0.01em; color:var(--m-ink); }
  .m-product-price-wrap { text-align:right; flex-shrink:0; }
  .m-product-price { font-family:var(--display); font-size:18px; font-weight:800; color:var(--m-ink); letter-spacing:-0.02em; line-height:1; }
  .m-product-desc { font-family:var(--sans); font-size:12px; color:var(--m-ink3); line-height:1.55; }

  .m-product-badge {
    position:absolute; top:10px; right:10px;
    font-size:8px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    padding:2px 8px; border:1px solid;
  }
  .m-product-badge.hot    { background:var(--m-adim); color:var(--m-amber); border-color:rgba(251,146,60,0.3); }
  .m-product-badge.new    { background:var(--m-gdim); color:var(--m-green); border-color:rgba(52,211,153,0.3); }
  .m-product-badge.low    { background:var(--m-rdim); color:var(--m-red); border-color:rgba(248,113,113,0.3); }
  .m-product-badge.sold   { background:rgba(255,255,255,0.05); color:var(--m-ink4); border-color:var(--m-gb2); }
  .m-product-badge.digital{ background:rgba(99,102,241,0.12); color:#818CF8; border-color:rgba(99,102,241,0.25); }

  .m-product-foot {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:10px; border-top:1px solid var(--m-gb2); margin-top:4px;
  }
  .m-product-details { display:flex; gap:8px; flex-wrap:wrap; }
  .m-product-detail { font-size:9.5px; color:var(--m-ink4); }
  .m-add-btn {
    padding:8px 16px; background:var(--m-ink); color:var(--m-bg);
    border:none; cursor:pointer; font-family:var(--mono);
    font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    transition:background .15s; display:flex; align-items:center; gap:6px; flex-shrink:0;
  }
  .m-add-btn:disabled { background:rgba(255,255,255,0.1); color:var(--m-ink4); }
  .m-add-btn.added { background:var(--m-green); color:#000; }

  /* Mobile cart panel */
  .m-cart-overlay {
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .m-cart-overlay.open { opacity:1; pointer-events:all; }
  .m-cart-panel {
    position:fixed; right:0; top:0; bottom:0; z-index:301;
    width:min(340px,100vw);
    background:rgba(10,12,18,0.96); backdrop-filter:blur(24px);
    border-left:1px solid var(--m-gb);
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
    display:flex; flex-direction:column;
  }
  .m-cart-panel.open { transform:translateX(0); }
  .m-cart-panel-hd {
    padding:calc(var(--safe-t) + 18px) 20px 16px;
    border-bottom:1px solid var(--m-gb);
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-0.01em;
  }
  .m-cart-close {
    font-size:20px; background:none; border:none; color:var(--m-ink3); cursor:pointer; padding:4px;
  }
  .m-cart-items { flex:1; overflow-y:auto; }
  .m-cart-item {
    padding:14px 20px; border-bottom:1px solid var(--m-gb2);
    display:flex; flex-direction:column; gap:5px;
  }
  .m-cart-item-row { display:flex; align-items:center; justify-content:space-between; }
  .m-cart-item-name { font-family:var(--sans); font-size:13px; font-weight:700; color:var(--m-ink); flex:1; }
  .m-cart-item-price { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--m-ink2); }
  .m-cart-item-meta { font-size:10px; color:var(--m-ink4); display:flex; align-items:center; gap:8px; }
  .m-cart-remove-btn { font-size:10px; color:var(--m-red); font-weight:700; background:none; border:none; cursor:pointer; font-family:var(--mono); padding:0; }
  .m-cart-empty-panel { padding:40px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .m-cart-empty-ico { font-size:40px; color:var(--m-ink4); }
  .m-cart-empty-txt { font-family:var(--sans); font-size:13px; color:var(--m-ink4); line-height:1.55; }
  .m-cart-subtotal-row {
    padding:16px 20px; border-top:1px solid var(--m-gb);
    display:flex; align-items:center; justify-content:space-between;
  }
  .m-cart-subtotal-k { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--m-ink3); }
  .m-cart-subtotal-v { font-family:var(--display); font-size:22px; font-weight:800; color:var(--m-ink); letter-spacing:-0.02em; }
  .m-cart-checkout {
    margin:0 16px 16px; padding:16px;
    background:var(--m-ink); color:var(--m-bg);
    border:none; cursor:pointer; font-family:var(--mono);
    font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:space-between;
  }
  .m-cart-checkout:disabled { opacity:.5; pointer-events:none; }

  /* Bottom nav */
  .m-bottomnav {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    padding-bottom:var(--safe-b);
    background:rgba(8,10,15,0.88); backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--m-gb);
    display:flex;
  }
  .m-nav-btn {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:10px 8px;
    font-family:var(--mono); font-size:9px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--m-ink3);
    background:none; border:none; cursor:pointer; transition:color .15s;
    text-decoration:none;
  }
  .m-nav-btn.active { color:var(--m-green); }
  .m-nav-btn-ico { font-size:18px; line-height:1; }
}
</style>
</head>
<body>

<div id="cursor">
  <div id="cursor-inner"></div>
  <div id="cursor-cross-h"></div>
  <div id="cursor-cross-v"></div>
</div>

<!-- ─────────────────────────────────────────────
     DESKTOP
───────────────────────────────────────────── -->
<div id="desktop">

  <div class="t-statusbar">
    <div class="t-sb-left">
      <div class="t-sb-cell">
        <span class="t-sb-dot"></span>
        <span class="lbl">Shop</span>
        <span class="val">OPEN</span>
      </div>
      <div class="t-sb-cell">
        <span class="lbl">Items</span>
        <span class="val"><?= $total_items ?></span>
      </div>
      <div class="t-sb-cell">
        <span class="lbl">In Stock</span>
        <span class="val"><?= $in_stock_count ?></span>
      </div>
      <div class="t-sb-cell">
        <span class="lbl">Digital</span>
        <span class="val"><?= $digital_count ?></span>
      </div>
      <div class="t-sb-cell">
        <span class="lbl">Shipping</span>
        <span class="val">Worldwide ✓</span>
      </div>
    </div>
    <div class="t-sb-time" id="sb-time">--:--:--</div>
  </div>

  <nav class="t-navbar">
    <div class="t-nav-logo">APTUM <span class="t-nav-logo-tag">ALPHA</span></div>
    <div class="t-nav-center"><strong>Shop</strong> Merch &amp; Digital Products</div>
    <div class="t-nav-right">
      <a href="/aptum_index.php" class="t-nav-link">← Home</a>
      <a href="/bangpost/" class="t-nav-link">BangPost</a>
      <a href="/feed/" class="t-nav-link">Feed</a>
      <a href="#" class="t-nav-link active">Shop</a>
      <button class="t-nav-cart" id="d-cart-btn">
        ◈ Cart <span class="t-cart-count" id="d-cart-count">0</span>
      </button>
    </div>
  </nav>

  <div class="t-shell">

    <!-- Tape -->
    <div class="t-tape">
      <div class="t-tape-track">
        <?php
        $tape = [
          ['sym'=>'FREE SHIP','val'=>'Orders over','am'=>'$75'],
          ['sym'=>'DIGITAL','val'=>'Instant','gr'=>'delivery'],
          ['sym'=>'ALPHA TEE','val'=>'$38','gr'=>'In Stock'],
          ['sym'=>'NEW DROP','val'=>'On-Chain Hoodie','gr'=>'↑'],
          ['sym'=>'RETURNS','val'=>'30 day','gr'=>'guarantee'],
          ['sym'=>'ITEMS','val'=>$total_items,'gr'=>'available'],
          ['sym'=>'PROMO','val'=>'APTUM10','am'=>'10% off'],
          ['sym'=>'BTC','val'=>'$98,420','gr'=>'+2.1%'],
        ];
        $all = array_merge($tape,$tape);
        foreach($all as $t):
        ?>
        <div class="t-tape-item">
          <span class="sym"><?= $t['sym'] ?></span>
          <?= $t['val'] ?>
          <?php if(isset($t['gr'])): ?><span class="gr"><?= $t['gr'] ?></span><?php endif; ?>
          <?php if(isset($t['am'])): ?><span class="am"><?= $t['am'] ?></span><?php endif; ?>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="t-page">

      <!-- Left nav -->
      <div class="t-leftnav">
        <div class="t-leftnav-hd">Navigation <span>→</span></div>
        <a href="/aptum_index.php" class="t-leftnav-link"><span>← Aptum Home</span><span class="t-leftnav-arr">↗</span></a>
        <a href="/bangpost/" class="t-leftnav-link"><span>BangPost</span><span class="t-leftnav-arr">↗</span></a>
        <a href="/feed/" class="t-leftnav-link"><span>Feed</span><span class="t-leftnav-arr">↗</span></a>
        <a href="#" class="t-leftnav-link active"><span>Shop</span><span class="t-leftnav-arr">→</span></a>
        <a href="#" class="t-leftnav-link"><span>X / Twitter</span><span class="t-leftnav-arr">↗</span></a>
        <a href="#" class="t-leftnav-link"><span>Telegram</span><span class="t-leftnav-arr">↗</span></a>

        <div class="t-leftnav-section">
          <div class="t-leftnav-section-hd">Shop Info</div>
          <div class="t-leftnav-stat">
            <span class="t-leftnav-stat-k">Total Items</span>
            <span class="t-leftnav-stat-v"><?= $total_items ?></span>
          </div>
          <div class="t-leftnav-stat">
            <span class="t-leftnav-stat-k">In Stock</span>
            <span class="t-leftnav-stat-v green"><?= $in_stock_count ?> ✓</span>
          </div>
          <div class="t-leftnav-stat">
            <span class="t-leftnav-stat-k">Digital</span>
            <span class="t-leftnav-stat-v"><?= $digital_count ?></span>
          </div>
          <div class="t-leftnav-stat">
            <span class="t-leftnav-stat-k">Shipping</span>
            <span class="t-leftnav-stat-v green">Global</span>
          </div>
        </div>
      </div>

      <!-- Main -->
      <div class="t-main">

        <!-- Hero -->
        <div class="t-hero">
          <div class="t-hero-wm">SHOP</div>
          <div class="t-tag-row">
            <span class="t-tag live"><span class="t-tag-dot"></span> Store Open</span>
            <span class="t-tag">Premium Apparel</span>
            <span class="t-tag">Digital Products</span>
          </div>
          <div class="t-hero-title">Merch &amp; Digital Products</div>
          <div class="t-hero-sub">Premium gear and research packs from the Aptum desk. Worldwide shipping. Instant digital delivery.</div>
        </div>

        <!-- Promo banner -->
        <div class="t-promo">
          <div class="t-promo-left">
            <span class="t-promo-tag">Promo</span>
            <span class="t-promo-txt"><strong>10% off</strong> your first order — use code at checkout</span>
          </div>
          <span class="t-promo-code">APTUM10</span>
        </div>

        <!-- Filter bar -->
        <div class="t-filter-bar">
          <?php foreach($categories as $cat): ?>
          <button class="t-filter-btn<?= ($active_cat === $cat ? ' active' : '') ?>"
                  onclick="filterCat(this,'<?= $cat ?>')"><?= $cat ?></button>
          <?php endforeach; ?>
        </div>

        <!-- Product grid -->
        <div class="t-product-grid" id="d-product-grid">
          <?php foreach($products as $i => $p): ?>
          <div class="t-product-card<?= !$p['in_stock'] ? ' out-of-stock' : '' ?>"
               data-cat="<?= htmlspecialchars($p['category']) ?>"
               style="animation:fadeUp .5s ease <?= 0.1 + $i * 0.04 ?>s both;">
            <div class="t-product-img">
              <?php if($p['badge']): ?>
              <span class="t-product-badge <?= $p['badge_type'] ?>"><?= htmlspecialchars($p['badge']) ?></span>
              <?php endif; ?>
              <span class="t-product-img-emoji"><?= $p['emoji'] ?></span>
            </div>
            <div class="t-product-body">
              <div class="t-product-cat"><?= htmlspecialchars($p['category']) ?></div>
              <div class="t-product-name"><?= htmlspecialchars($p['name']) ?></div>
              <div class="t-product-desc"><?= htmlspecialchars($p['desc']) ?></div>
              <div class="t-product-details">
                <?php foreach($p['details'] as $d): ?>
                <span class="t-product-detail"><?= htmlspecialchars($d) ?></span>
                <?php endforeach; ?>
              </div>
            </div>
            <div class="t-product-foot">
              <div class="t-product-price">
                $<?= number_format(floor($p['price'])) ?><span class="cents">.<?= sprintf('%02d', ($p['price'] - floor($p['price'])) * 100 ) ?></span>
              </div>
              <?php if($p['in_stock']): ?>
              <button class="t-add-btn"
                      onclick="addToCart(this,<?= $p['id'] ?>,'<?= addslashes($p['name']) ?>',<?= $p['price'] ?>)">
                Add + <span>→</span>
              </button>
              <?php else: ?>
              <button class="t-add-btn" disabled>Sold Out</button>
              <?php endif; ?>
            </div>
          </div>
          <?php endforeach; ?>
        </div>

      </div><!-- /t-main -->

      <!-- Right sidebar: cart -->
      <div class="t-sidebar" id="d-cart-sidebar">
        <div class="t-sb-section">
          <div class="t-sb-section-hd">Your Cart</div>
        </div>

        <div id="d-cart-items">
          <div class="t-cart-empty" id="d-cart-empty">
            <div class="t-cart-empty-ico">◈</div>
            <div class="t-cart-empty-txt">Your cart is empty.<br>Add something above.</div>
          </div>
        </div>

        <div id="d-cart-subtotal" style="display:none;">
          <div class="t-cart-subtotal">
            <span class="t-cart-subtotal-k">Subtotal</span>
            <span class="t-cart-subtotal-v" id="d-subtotal-val">$0.00</span>
          </div>
          <button class="t-checkout-btn" id="d-checkout-btn">
            <span>Proceed to Checkout</span>
            <span>→</span>
          </button>
          <div style="padding:0 14px 14px;">
            <div style="font-size:10px;color:var(--ink4);line-height:1.65;font-family:var(--sans);">
              Free shipping on orders over $75. Digital products delivered instantly via email.
            </div>
          </div>
        </div>

        <!-- Sidebar info -->
        <div class="t-sb-section" style="margin-top:auto;">
          <div class="t-sb-section-hd">Shipping &amp; Returns</div>
          <div class="t-sb-body">
            <div class="t-sb-stat"><span class="t-sb-stat-k">Standard</span><span class="t-sb-stat-v">5–7 days</span></div>
            <div class="t-sb-stat"><span class="t-sb-stat-k">Express</span><span class="t-sb-stat-v">2–3 days</span></div>
            <div class="t-sb-stat"><span class="t-sb-stat-k">Digital</span><span class="t-sb-stat-v green">Instant</span></div>
            <div class="t-sb-stat"><span class="t-sb-stat-k">Returns</span><span class="t-sb-stat-v">30 days</span></div>
            <div class="t-sb-stat"><span class="t-sb-stat-k">Free ship</span><span class="t-sb-stat-v">Over $75</span></div>
          </div>
        </div>
      </div><!-- /t-sidebar -->

    </div><!-- /t-page -->

    <footer class="t-footer">
      <div class="t-footer-cell"><span>© 2025 Aptum</span></div>
      <div class="t-footer-cell"><a href="/feed/">Feed</a></div>
      <div class="t-footer-cell"><a href="/bangpost/">BangPost</a></div>
      <div class="t-footer-cell"><a href="#">X / Twitter</a></div>
      <div class="t-footer-r">
        <div class="t-footer-cell">
          <span class="t-sb-dot" style="width:5px;height:5px;"></span>
          <span>Store Open</span>
        </div>
      </div>
    </footer>

  </div><!-- /t-shell -->
</div><!-- /desktop -->


<!-- ─────────────────────────────────────────────
     MOBILE
───────────────────────────────────────────── -->
<div id="mobile">
  <div class="m-orb m-orb-1"></div>
  <div class="m-orb m-orb-2"></div>
  <div class="m-orb m-orb-3"></div>

  <!-- Cart overlay + panel -->
  <div class="m-cart-overlay" id="m-cart-overlay" onclick="closeMCart()"></div>
  <div class="m-cart-panel" id="m-cart-panel">
    <div class="m-cart-panel-hd">
      <span>Cart <span id="m-cart-hd-count" style="font-size:14px;color:rgba(255,255,255,0.4);font-weight:400;"></span></span>
      <button class="m-cart-close" onclick="closeMCart()">✕</button>
    </div>
    <div class="m-cart-items" id="m-cart-items">
      <div class="m-cart-empty-panel" id="m-cart-empty">
        <div class="m-cart-empty-ico">◈</div>
        <div class="m-cart-empty-txt">Your cart is empty.<br>Add something below.</div>
      </div>
    </div>
    <div id="m-cart-foot" style="display:none;">
      <div class="m-cart-subtotal-row">
        <span class="m-cart-subtotal-k">Subtotal</span>
        <span class="m-cart-subtotal-v" id="m-subtotal-val">$0.00</span>
      </div>
      <button class="m-cart-checkout" id="m-checkout-btn">
        <span>Proceed to Checkout</span><span>→</span>
      </button>
    </div>
  </div>

  <!-- Top bar -->
  <div class="m-topbar">
    <div class="m-topbar-logo">APTUM <span class="m-topbar-logo-tag">ALPHA</span></div>
    <div class="m-topbar-right">
      <div class="m-topbar-pill">Shop</div>
      <button class="m-topbar-cart" onclick="openMCart()">
        ◈ <span id="m-cart-count">0</span>
      </button>
    </div>
  </div>

  <div class="m-shop">

    <!-- Header -->
    <div class="m-shop-header">
      <div class="m-shop-header-tags">
        <span class="m-shop-header-tag">Premium Apparel</span>
        <span class="m-shop-header-tag">Digital Products</span>
        <span class="m-shop-header-tag">Worldwide Shipping</span>
      </div>
      <div class="m-shop-title">Merch &amp;<br>Digital</div>
      <div class="m-shop-sub">Premium gear and research packs from the Aptum desk.</div>
    </div>

    <!-- Promo -->
    <div class="m-promo">
      <div class="m-promo-label">✦ Promo Active</div>
      <div class="m-promo-txt"><strong>10% off</strong> your first order — use code at checkout</div>
      <div class="m-promo-code">APTUM10</div>
    </div>

    <!-- Tag filter -->
    <div class="m-tag-scroll">
      <?php foreach($categories as $cat): ?>
      <button class="m-tag-btn<?= ($active_cat === $cat ? ' active' : '') ?>"
              onclick="mFilterCat(this,'<?= $cat ?>')"><?= $cat ?></button>
      <?php endforeach; ?>
    </div>

    <!-- Product list -->
    <div class="m-product-list" id="m-product-list">
      <?php foreach($products as $i => $p): ?>
      <div class="m-product-card<?= !$p['in_stock'] ? ' out-of-stock' : '' ?>"
           data-cat="<?= htmlspecialchars($p['category']) ?>"
           style="animation-delay:<?= 0.04 * $i ?>s;">
        <div class="m-product-img"><?= $p['emoji'] ?></div>
        <?php if($p['badge']): ?>
        <span class="m-product-badge <?= $p['badge_type'] ?>"><?= htmlspecialchars($p['badge']) ?></span>
        <?php endif; ?>
        <div class="m-product-info">
          <div class="m-product-top">
            <div class="m-product-name-wrap">
              <div class="m-product-cat"><?= htmlspecialchars($p['category']) ?></div>
              <div class="m-product-name"><?= htmlspecialchars($p['name']) ?></div>
            </div>
            <div class="m-product-price-wrap">
              <div class="m-product-price">$<?= number_format($p['price'], 0) ?></div>
            </div>
          </div>
          <div class="m-product-desc"><?= htmlspecialchars($p['desc']) ?></div>
          <div class="m-product-foot">
            <div class="m-product-details">
              <?php foreach(array_slice($p['details'],0,2) as $d): ?>
              <span class="m-product-detail"><?= htmlspecialchars($d) ?></span>
              <?php endforeach; ?>
            </div>
            <?php if($p['in_stock']): ?>
            <button class="m-add-btn"
                    onclick="addToCart(this,<?= $p['id'] ?>,'<?= addslashes($p['name']) ?>',<?= $p['price'] ?>)">
              Add →
            </button>
            <?php else: ?>
            <button class="m-add-btn" disabled>Sold Out</button>
            <?php endif; ?>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

  </div><!-- /m-shop -->

  <!-- Bottom nav -->
  <div class="m-bottomnav">
    <a href="/aptum_index.php" class="m-nav-btn">
      <span class="m-nav-btn-ico">⌂</span><span>Home</span>
    </a>
    <a href="/feed/" class="m-nav-btn">
      <span class="m-nav-btn-ico">◈</span><span>Feed</span>
    </a>
    <a href="#" class="m-nav-btn active">
      <span class="m-nav-btn-ico">✦</span><span>Shop</span>
    </a>
    <a href="/bangpost/" class="m-nav-btn">
      <span class="m-nav-btn-ico">↗</span><span>BangPost</span>
    </a>
  </div>
</div><!-- /mobile -->


<script>
/* ── Cursor ─────────────────────────────────── */
const cur = document.getElementById('cursor');
if(cur){
  document.addEventListener('mousemove', e => {
    cur.style.left = e.clientX + 'px';
    cur.style.top  = e.clientY + 'px';
  });
}

/* ── Clock ──────────────────────────────────── */
function tick(){
  const el = document.getElementById('sb-time');
  if(!el) return;
  const n = new Date();
  el.textContent = n.toLocaleTimeString('en-US',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'}) + ' UTC';
}
tick(); setInterval(tick, 1000);

/* ── Cart State ─────────────────────────────── */
let cart = [];

function getTotal(){ return cart.reduce((s,i) => s + i.price * i.qty, 0); }
function getCount(){ return cart.reduce((s,i) => s + i.qty, 0); }

function updateCartUI(){
  const count = getCount();
  const total = getTotal();
  const totalStr = '$' + total.toFixed(2);

  // Desktop count badge
  const dCount = document.getElementById('d-cart-count');
  if(dCount) dCount.textContent = count;

  // Mobile count
  const mCount = document.getElementById('m-cart-count');
  if(mCount) mCount.textContent = count;

  // Mobile cart hd
  const mHd = document.getElementById('m-cart-hd-count');
  if(mHd) mHd.textContent = count > 0 ? '(' + count + ')' : '';

  // Desktop subtotal
  const dSub = document.getElementById('d-subtotal-val');
  if(dSub) dSub.textContent = totalStr;
  const dCartSubtotal = document.getElementById('d-cart-subtotal');
  if(dCartSubtotal) dCartSubtotal.style.display = count > 0 ? '' : 'none';
  const dEmpty = document.getElementById('d-cart-empty');

  // Desktop cart items
  const dItems = document.getElementById('d-cart-items');
  if(dItems){
    if(cart.length === 0){
      dItems.innerHTML = `<div class="t-cart-empty" id="d-cart-empty">
        <div class="t-cart-empty-ico">◈</div>
        <div class="t-cart-empty-txt">Your cart is empty.<br>Add something above.</div>
      </div>`;
    } else {
      let html = '';
      cart.forEach(item => {
        html += `<div class="t-cart-item">
          <div class="t-cart-item-row">
            <span class="t-cart-item-name">${item.name}</span>
            <span class="t-cart-item-price">$${(item.price * item.qty).toFixed(2)}</span>
          </div>
          <div class="t-cart-item-meta">
            <span>Qty: ${item.qty}</span>
            <span>·</span>
            <span>$${item.price.toFixed(2)} each</span>
            <button class="t-cart-remove" onclick="removeFromCart(${item.id})">Remove</button>
          </div>
        </div>`;
      });
      dItems.innerHTML = html;
    }
  }

  // Mobile cart items
  const mCartItems = document.getElementById('m-cart-items');
  const mCartFoot  = document.getElementById('m-cart-foot');
  const mSubVal    = document.getElementById('m-subtotal-val');
  if(mSubVal) mSubVal.textContent = totalStr;
  if(mCartFoot) mCartFoot.style.display = count > 0 ? '' : 'none';
  if(mCartItems){
    if(cart.length === 0){
      mCartItems.innerHTML = `<div class="m-cart-empty-panel" id="m-cart-empty">
        <div class="m-cart-empty-ico">◈</div>
        <div class="m-cart-empty-txt">Your cart is empty.<br>Add something below.</div>
      </div>`;
    } else {
      let html = '';
      cart.forEach(item => {
        html += `<div class="m-cart-item">
          <div class="m-cart-item-row">
            <span class="m-cart-item-name">${item.name}</span>
            <span class="m-cart-item-price">$${(item.price * item.qty).toFixed(2)}</span>
          </div>
          <div class="m-cart-item-meta">
            <span>Qty: ${item.qty}</span>
            <span>·</span>
            <span>$${item.price.toFixed(2)} ea</span>
            <button class="m-cart-remove-btn" onclick="removeFromCart(${item.id})">Remove</button>
          </div>
        </div>`;
      });
      mCartItems.innerHTML = html;
    }
  }
}

function addToCart(btn, id, name, price){
  const existing = cart.find(i => i.id === id);
  if(existing){ existing.qty++; }
  else { cart.push({id, name, price, qty:1}); }

  // Button feedback
  btn.classList.add('added');
  btn.textContent = '✓ Added';
  setTimeout(() => {
    btn.classList.remove('added');
    btn.innerHTML = 'Add + <span>→</span>';
  }, 1400);

  updateCartUI();
}

function removeFromCart(id){
  cart = cart.filter(i => i.id !== id);
  updateCartUI();
}

/* ── Desktop filter ─────────────────────────── */
function filterCat(btn, cat){
  document.querySelectorAll('.t-filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  document.querySelectorAll('#d-product-grid .t-product-card').forEach(card => {
    card.style.display = (cat === 'All' || card.dataset.cat === cat) ? '' : 'none';
  });
}

/* ── Mobile filter ──────────────────────────── */
function mFilterCat(btn, cat){
  document.querySelectorAll('.m-tag-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  document.querySelectorAll('#m-product-list .m-product-card').forEach(card => {
    card.style.display = (cat === 'All' || card.dataset.cat === cat) ? '' : 'none';
  });
}

/* ── Mobile cart panel ──────────────────────── */
function openMCart(){
  document.getElementById('m-cart-overlay').classList.add('open');
  document.getElementById('m-cart-panel').classList.add('open');
}
function closeMCart(){
  document.getElementById('m-cart-overlay').classList.remove('open');
  document.getElementById('m-cart-panel').classList.remove('open');
}

/* Init */
updateCartUI();
</script>
</body>
</html>