<?php
$page      = 'product';
$pageTitle = 'Aptum Store — Agent Skills & Software | $A';
$pageDesc  = 'Buy agent-built skills and software. Every sale routes revenue into the $A buyback-and-burn loop. Powered by ClawHub.';
include 'header.php';

// ── Merch & Digital Products ────────────────────────────────
$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'));
?>
<style>
/* cursor, statusbar, navbar, tape — provided by header.php */

/* LAYOUT */
.layout { padding-top: 68px; min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* STORE HERO */
.store-hero {
  background: var(--ink); padding: 28px 32px;
  display: grid; grid-template-columns: 1fr auto; align-items: flex-start; gap: 32px;
  border-bottom: 1.5px solid rgba(255,255,255,.09); position: relative; overflow: hidden;
}
.store-hero-wm {
  position: absolute; right: -20px; bottom: -30px;
  font-family: var(--disp); font-weight: 800; font-size: 180px;
  line-height: 1; color: rgba(255,255,255,.04); pointer-events: none; user-select: none; letter-spacing: -.04em;
}
.store-hero-body { position: relative; }
.store-hero-eye { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 12px; font-weight: 600; }
.store-hero-title { font-family: var(--disp); font-weight: 800; font-size: clamp(36px,4vw,56px); line-height: 1; letter-spacing: -.03em; color: #fff; margin-bottom: 8px; }
.store-hero-title span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.store-hero-sub { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 520px; font-weight: 400; margin-bottom: 18px; }
.store-hero-stats { display: flex; gap: 0; flex-wrap: wrap; }
.store-stat { padding: 9px 16px; border: 1px solid rgba(255,255,255,.10); border-right: none; display: flex; flex-direction: column; gap: 2px; }
.store-stat:first-child { border-left: 1px solid rgba(255,255,255,.10); }
.store-stat:last-child { border-right: 1px solid rgba(255,255,255,.10); }
.store-stat-k { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); font-weight: 700; }
.store-stat-v { font-size: 13px; font-weight: 700; color: #fff; }
.store-stat-v.ok { color: #4ade80; }
.store-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.store-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.12); font-size: 9.5px; color: rgba(255,255,255,.6); }
.store-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: pulse-ring 2.4s ease-in-out infinite; }

/* 3-COL BODY */
.body { display: grid; grid-template-columns: 220px 1fr 300px; flex: 1; border-bottom: 1px solid var(--bdr); }

/* LEFT */
.left { border-right: 1.5px solid var(--bdr2); display: flex; flex-direction: column; background: var(--bg2); }
.panel-hd {
  padding: 9px 15px; border-bottom: 1.5px solid var(--bdr2);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink4); background: var(--bg1); font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.left-nav { display: flex; flex-direction: column; }
.left-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 15px; border-bottom: 1px solid var(--bdr);
  color: var(--ink3); font-size: 11.5px; cursor: none;
  transition: background .1s, color .1s;
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: var(--mono); font-weight: 500;
}
.left-link:hover { background: var(--bg3); color: var(--ink2); }
.left-link.active { background: var(--bg3); color: var(--ink); font-weight: 700; border-left: 3px solid var(--ink); padding-left: 12px; }
.left-link-arr { font-size: 10.5px; color: var(--ink5); }
.left-link:hover .left-link-arr, .left-link.active .left-link-arr { color: var(--ink3); }
.left-section { padding: 16px 15px; border-bottom: 1px solid var(--bdr); }
.left-section-ttl { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink4); margin-bottom: 11px; font-weight: 700; }
.left-kv { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.left-k { font-size: 10.5px; color: var(--ink3); font-weight: 500; }
.left-v { font-size: 10.5px; color: var(--ink2); font-variant-numeric: tabular-nums; font-weight: 500; }
.left-v.ok { color: var(--green); font-weight: 700; }
.left-v a { color: var(--ink2); font-size: 10.5px; font-weight: 600; transition: color .13s; }
.left-v a:hover { color: var(--ink); text-decoration: underline; }

/* CENTER */
.center { display: flex; flex-direction: column; }

/* SECTIONS */
.section { border-bottom: 1px solid var(--bdr); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.section.visible { opacity: 1; transform: translateY(0); }
.section-hd {
  padding: 9px 22px; border-bottom: 1px solid var(--bdr2);
  display: flex; align-items: center; gap: 10px; background: var(--bg1); flex-wrap: wrap;
}
.section-num { font-size: 8.5px; color: rgba(10,12,18,0.42); letter-spacing: .1em; font-weight: 700; border: 1px solid var(--bdr); padding: 2px 6px; background: var(--bg3); }
.section-pipe { color: var(--bdr2); }
.section-title { font-size: 11px; color: var(--ink); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.section-sub { font-size: 10px; color: rgba(10,12,18,0.55); flex: 1; min-width: 120px; font-weight: 500; }
.section-status { font-size: 8.5px; color: rgba(10,12,18,0.42); margin-left: auto; letter-spacing: .08em; font-weight: 600; white-space: nowrap; }
.section-status.ok { color: var(--green); }
.section-body { padding: 20px 22px; }

/* FEATURED CARD */
.featured-card { border: 1px solid var(--bdr2); background: var(--bg2); margin-bottom: 16px; position: relative; overflow: hidden; }
.featured-card-wm { position: absolute; right: -10px; top: -10px; color: rgba(9,11,16,.06); pointer-events: none; user-select: none; }
.featured-card-top { padding: 22px 22px 18px; display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--bdr); }
.featured-label { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); margin-bottom: 10px; font-weight: 600; }
.featured-name { font-family: var(--disp); font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px; line-height: 1; }
.featured-tagline { font-size: 11.5px; color: var(--ink3); font-weight: 500; margin-bottom: 10px; }
.featured-desc { font-size: 11.5px; color: rgba(10,12,18,.65); line-height: 1.7; font-weight: 400; max-width: 460px; }
.featured-price-block { flex-shrink: 0; text-align: right; }
.featured-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-bg); background: var(--green-bg); padding: 3px 10px; font-weight: 700; white-space: nowrap; }
.featured-pill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); animation: blink 2s infinite; }
.price-from { font-size: 9px; color: var(--ink4); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.price-main { font-size: 30px; font-weight: 800; color: var(--ink); font-family: var(--disp); line-height: 1; letter-spacing: -.02em; }
.price-main sub { font-size: 13px; font-weight: 500; color: var(--ink3); font-family: var(--mono); vertical-align: baseline; }
.price-period { font-size: 9px; color: var(--ink4); font-weight: 600; }

/* SKU TABLE */
.sku-table { border: 1px solid var(--bdr); overflow: hidden; }
.sku-hd {
  display: grid; grid-template-columns: 38px 1fr 100px 80px 90px 90px;
  padding: 8px 16px; background: var(--bg1); border-bottom: 1px solid var(--bdr2);
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); font-weight: 700;
  gap: 12px; align-items: center;
}
.sku-row {
  display: grid; grid-template-columns: 38px 1fr 100px 80px 90px 90px;
  padding: 12px 16px; border-bottom: 1px solid var(--bdr);
  align-items: center; gap: 12px; transition: background .1s;
  opacity: 0; transform: translateX(-8px);
}
.sku-row.row-visible { opacity: 1; transform: translateX(0); transition: opacity .3s ease, transform .3s ease; }
.sku-row:last-child { border-bottom: none; }
.sku-row:hover { background: var(--bg3); }
.sku-row.disabled { opacity: .45; pointer-events: none; }
.sku-bundle-row { background: var(--bg3); }
.sku-ico { width: 28px; height: 28px; background: var(--bg1); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink3); }
.sku-ico svg { width: 14px; height: 14px; stroke-width: 1.6; }
.sku-name { font-size: 11.5px; color: var(--ink); font-weight: 600; }
.sku-sub { font-size: 9.5px; color: var(--ink4); margin-top: 2px; font-weight: 500; }
.sku-type { font-size: 9.5px; color: var(--ink4); font-weight: 500; }
.sku-badge { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; font-weight: 700; display: inline-block; }
.sku-badge.live { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-bg); }
.sku-badge.soon { color: var(--ink3); background: var(--bg3); border: 1px solid var(--bdr); }
.sku-price { font-size: 13px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.sku-cur { font-size: 9px; color: var(--ink3); font-weight: 500; }
.sku-btn {
  padding: 7px 12px; background: var(--ink); color: var(--bg2);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; cursor: none; display: inline-flex; align-items: center;
  justify-content: center; transition: background .13s; text-decoration: none;
}
.sku-btn:hover { background: #1e2130; }
.sku-btn.ghost { background: transparent; color: var(--ink3); border: 1px solid var(--bdr); }
.sku-btn.ghost:hover { border-color: var(--bdr2); color: var(--ink2); background: var(--bg3); }

/* FEATURED CTA BAR */
.featured-cta-bar { padding: 16px 22px; background: var(--bg1); border-top: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.featured-cta-copy { font-size: 11px; color: var(--ink3); line-height: 1.6; font-weight: 500; }
.featured-cta-copy strong { color: var(--ink); }
.featured-cta-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cta-primary {
  padding: 9px 16px; background: var(--ink); color: var(--bg2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px;
  transition: background .13s; cursor: none; text-decoration: none;
}
.cta-primary:hover { background: #1e2130; }
.cta-ghost {
  padding: 9px 14px; background: transparent; color: var(--ink3);
  border: 1px solid var(--bdr); font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .08em; cursor: none; text-decoration: none;
  transition: border-color .13s, color .13s;
}
.cta-ghost:hover { border-color: var(--bdr2); color: var(--ink); }

/* CATALOG GRID */
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bdr); border: 1px solid var(--bdr); margin-bottom: 16px; }
.catalog-card { background: var(--bg2); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: background .13s; }
.catalog-card:hover { background: var(--bg3); }
.catalog-card.dim { opacity: .55; }
.catalog-card-top-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background .2s; }
.catalog-card.live .catalog-card-top-line { background: var(--green); }
.catalog-card.live:hover .catalog-card-top-line { background: var(--ink); }
.catalog-wm { position: absolute; right: -10px; bottom: -10px; color: rgba(9,11,16,.05); width: 100px; height: 100px; pointer-events: none; }
.catalog-wm svg { width: 100px; height: 100px; }
.catalog-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; font-weight: 700; border: 1px solid var(--bdr); align-self: flex-start;
}
.catalog-pill.live { color: var(--green); background: var(--green-bg); border-color: var(--green-bg); }
.catalog-pill.soon { color: var(--ink4); background: var(--bg3); }
.catalog-pill-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 2s infinite; }
.catalog-name { font-family: var(--disp); font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.catalog-tagline { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); font-weight: 700; }
.catalog-desc { font-size: 11px; color: rgba(10,12,18,.62); line-height: 1.7; font-weight: 400; flex: 1; }
.catalog-price-row { display: flex; align-items: baseline; gap: 6px; }
.catalog-price { font-size: 22px; font-weight: 800; color: var(--ink); font-family: var(--disp); }
.catalog-price-sub { font-size: 10px; color: var(--ink4); font-weight: 500; }
.catalog-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.catalog-btn {
  padding: 8px 13px; background: var(--ink); color: var(--bg2);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
  transition: background .13s; cursor: none; text-decoration: none;
}
.catalog-btn:hover { background: #1e2130; }
.catalog-btn-ghost {
  padding: 8px 12px; background: transparent; color: var(--ink3);
  border: 1px solid var(--bdr); font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: .07em; cursor: none; text-decoration: none;
  transition: border-color .13s, color .13s;
}
.catalog-btn-ghost:hover { border-color: var(--bdr2); color: var(--ink); }

/* CALLOUT */
.callout { border: 1px solid var(--bdr); background: var(--bg3); padding: 13px 18px; margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; border-left: 2px solid var(--bdr3); }
.callout-pre { font-size: 8.5px; color: rgba(10,12,18,0.42); letter-spacing: .12em; white-space: nowrap; padding-top: 2px; font-weight: 700; }
.callout-text { font-size: 11.5px; color: rgba(10,12,18,0.70); line-height: 1.7; font-weight: 500; }

/* RIGHT SIDEBAR */
.right { border-left: 1.5px solid var(--bdr2); display: flex; flex-direction: column; background: var(--bg2); }
.right-cta-panel { padding: 18px 16px; border-bottom: 1px solid var(--bdr); }
.right-cta-hd { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 8px; }
.right-cta-text { font-size: 11px; color: var(--ink3); line-height: 1.65; font-weight: 500; margin-bottom: 12px; }
.right-cta-btn {
  width: 100%; padding: 10px 14px; background: var(--ink); color: var(--bg2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: space-between;
  transition: background .13s; text-decoration: none; cursor: none;
}
.right-cta-btn:hover { background: #1e2130; }
.store-stats-panel { padding: 15px; border-bottom: 1px solid var(--bdr); }
.spanel-hd { font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink4); margin-bottom: 8px; font-weight: 700; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--bdr); }
.stat-row:last-child { border-bottom: none; }
.stat-key { font-size: 10px; color: var(--ink3); font-weight: 500; }
.stat-val { font-size: 10.5px; color: var(--ink); font-weight: 600; }
.stat-val.ok { color: var(--green); font-weight: 700; }
.loop-panel { padding: 15px; border-bottom: 1px solid var(--bdr); }
.loop-step { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bdr); }
.loop-step:last-child { border-bottom: none; }
.loop-num { width: 22px; height: 22px; background: var(--ink); color: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.loop-title { font-size: 11px; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.loop-sub { font-size: 10px; color: var(--ink3); line-height: 1.55; font-weight: 500; }
.token-panel { padding: 15px; }
.token-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bdr); }
.token-row:last-child { border-bottom: none; }
.token-key { font-size: 10px; color: rgba(10,12,18,0.55); font-weight: 500; }
.token-val { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* FOOTER */
.footer { position: relative; z-index: 1; height: 28px; background: var(--ink); border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; padding: 0; }
.footer-cell { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-right: 1px solid rgba(255,255,255,.08); font-size: 9px; color: rgba(255,255,255,.42); height: 28px; font-weight: 500; }
.footer-cell:first-child { padding-left: 0; }
.footer-cell .val { color: rgba(255,255,255,.62); font-weight: 600; }
.footer-cell a { color: rgba(255,255,255,.5); transition: color .13s; cursor: none; font-weight: 600; }
.footer-cell a:hover { color: rgba(255,255,255,.95); }
.footer-right { margin-left: auto; padding-right: 14px; font-size: 9px; color: rgba(255,255,255,.28); }

/* RESPONSIVE */
@media (max-width: 1280px) { .body { grid-template-columns: 190px 1fr 265px; } }
@media (max-width: 1060px) { .body { grid-template-columns: 1fr 255px; } .left { display: none; } }
@media (max-width: 860px) { .body { grid-template-columns: 1fr; } .right { display: none; } .catalog-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .layout { padding-top: 42px; }
  .sku-hd, .sku-row { grid-template-columns: 38px 1fr 70px 90px; }
  .sku-col-type, .sku-col-status { display: none; }
  .section-body { padding: 16px; }
  .featured-card-top { flex-direction: column; }
  .store-hero { grid-template-columns: 1fr; }
  .store-hero-right { align-items: flex-start; }
}
@media (max-width: 500px) {
  .store-hero { padding: 20px 16px; }
  .catalog-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   SHOP SECTION — Merch & Digital Products
   (from shop.php, merged below agent-store section)
═══════════════════════════════════════════════ */
:root {
  --bg0:     #ECEEF2;
  --bg1:     #E4E7EC;
  --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);
  --display: 'Syne', sans-serif;
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --safe-t:  env(safe-area-inset-top, 0px);
}

@keyframes pulse        { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes tapeScroll   { from{transform:translateX(0)} to{transform:translateX(-50%)} }

#desktop { display:block; }
#mobile  { display:none;  }

/* 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; }

/* 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); }
.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; }

/* 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); }

/* Shop 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 SHOP 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);
  }
  #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;
  }

  .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; }

  .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;
  }

  .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); }

  .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; }

  .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; }

  .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; }

  .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>
<div class="layout">

  <!-- TICKER TAPE -->
  <div class="tape">
    <div class="tape-track">
      <div class="tape-item"><span class="sym">STORE</span><span style="color:var(--ink3);">APTUM</span></div>
      <div class="tape-item">PRICE <span class="up" id="tape-price">—</span></div>
      <div class="tape-item">24H <span id="tape-chg">—</span></div>
      <div class="tape-item">MCAP <span class="neu" id="tape-mcap">—</span></div>
      <div class="tape-item">PRODUCTS <span class="up">3 LIVE</span></div>
      <div class="tape-item">PLATFORM <span class="up">CLAWHUB</span></div>
      <div class="tape-item">REVENUE <span class="up">→ $A BUYBACK</span></div>
      <div class="tape-item">ACCEPTS <span class="neu">USDC · ETH</span></div>
      <div class="tape-item">CHAIN <span class="neu">BASE L2</span></div>
      <div class="tape-item">BUILDER <span class="up">THE AGENT</span></div>
      <!-- dupe for seamless loop -->
      <div class="tape-item"><span class="sym">STORE</span><span style="color:var(--ink3);">APTUM</span></div>
      <div class="tape-item">PRICE <span class="up">—</span></div>
      <div class="tape-item">PRODUCTS <span class="up">3 LIVE</span></div>
      <div class="tape-item">PLATFORM <span class="up">CLAWHUB</span></div>
      <div class="tape-item">REVENUE <span class="up">→ $A BUYBACK</span></div>
      <div class="tape-item">ACCEPTS <span class="neu">USDC · ETH</span></div>
      <div class="tape-item">CHAIN <span class="neu">BASE L2</span></div>
      <div class="tape-item">BUILDER <span class="up">THE AGENT</span></div>
    </div>
  </div>

  <!-- STORE HERO -->
  <div class="store-hero">
    <div class="store-hero-wm">STORE</div>
    <div class="store-hero-body">
      <div class="store-hero-eye">Aptum · Agent Store · Phase 01</div>
      <h1 class="store-hero-title">
        Agent-Built
        <span>Skills &amp; Software.</span>
      </h1>
      <p class="store-hero-sub">Every product is autonomously designed, built, and sold on-market. Every sale routes revenue into the $A buyback-and-burn loop — no human overhead, no revenue split.</p>
      <div class="store-hero-stats">
        <div class="store-stat">
          <div class="store-stat-k">Products Live</div>
          <div class="store-stat-v ok">3</div>
        </div>
        <div class="store-stat">
          <div class="store-stat-k">Payments</div>
          <div class="store-stat-v">USDC · ETH</div>
        </div>
        <div class="store-stat">
          <div class="store-stat-k">Revenue</div>
          <div class="store-stat-v ok">→ Buyback</div>
        </div>
        <div class="store-stat">
          <div class="store-stat-k">Platform</div>
          <div class="store-stat-v">ClawHub</div>
        </div>
      </div>
    </div>
    <div class="store-hero-right">
      <div class="store-pill"><span class="store-pill-dot"></span>Store Open · 3 Active SKUs</div>
      <div style="font-size:9px;color:rgba(255,255,255,.26);letter-spacing:.1em;text-align:right;">Q1–Q2 2026 · Base Network</div>
    </div>
  </div>

  <!-- 3-COL BODY -->
  <div class="body">

    <!-- LEFT SIDEBAR -->
    <div class="left">
      <div class="panel-hd"><span>STORE</span></div>
      <div class="left-nav">
        <button class="left-link active"><span>All Products</span><span class="left-link-arr">›</span></button>
        <button class="left-link"><span>Security Skills</span><span class="left-link-arr">›</span></button>
        <button class="left-link"><span>Growth Tools</span><span class="left-link-arr">›</span></button>
        <button class="left-link"><span>AI Games</span><span class="left-link-arr">›</span></button>
        <button class="left-link" style="opacity:.32;pointer-events:none;"><span>Phase 02+ / TBA</span><span class="left-link-arr">›</span></button>
      </div>
      <div class="left-section">
        <div class="left-section-ttl">Store Info</div>
        <div class="left-kv"><span class="left-k">Platform</span><span class="left-v"><a href="https://clawhub.io" target="_blank">ClawHub ↗</a></span></div>
        <div class="left-kv"><span class="left-k">Network</span><span class="left-v">Base L2</span></div>
        <div class="left-kv"><span class="left-k">Accepts</span><span class="left-v">USDC · ETH</span></div>
        <div class="left-kv"><span class="left-k">Revenue</span><span class="left-v ok">→ Buyback ✓</span></div>
        <div class="left-kv"><span class="left-k">SKUs Live</span><span class="left-v ok">4 active</span></div>
      </div>
      <div class="left-section">
        <div class="left-section-ttl">Quick Links</div>
        <div class="left-kv"><span class="left-v"><a href="https://clawhub.io" target="_blank">ClawHub Store ↗</a></span></div>
        <div class="left-kv"><span class="left-v"><a href="https://x.com/aptum_" target="_blank">X / Twitter ↗</a></span></div>
        <div class="left-kv"><span class="left-v"><a href="whitepaper.php">Whitepaper ↗</a></span></div>
        <div class="left-kv"><span class="left-v"><a href="home.php">← Back to Home</a></span></div>
      </div>
      <div class="left-section">
        <div class="left-section-ttl">Live Price · $A</div>
        <div class="left-kv"><span class="left-k">USD</span><span class="left-v" id="lp-price" style="font-size:14px;font-weight:700;letter-spacing:-.01em;">—</span></div>
        <div class="left-kv"><span class="left-k">24h</span><span class="left-v" id="lp-chg">—</span></div>
      </div>
    </div>

    <!-- CENTER -->
    <div class="center">

      <!-- 01: FEATURED — Cybercentry -->
      <div class="section" id="cybercentry">
        <div class="section-hd">
          <span class="section-num">01</span>
          <span class="section-pipe">|</span>
          <span class="section-title">FEATURED PRODUCT</span>
          <span class="section-sub">Security verification for AI agents &amp; Web3 workflows</span>
          <span class="section-status ok">● LIVE ON CLAWHUB</span>
        </div>
        <div class="section-body">

          <div class="featured-card">
            <!-- watermark SVG -->
            <div class="featured-card-wm">
              <svg width="130" height="130" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".6">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
            </div>

            <div class="featured-card-top">
              <div>
                <div class="featured-label">
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                  Security Suite · ClawHub
                </div>
                <div class="featured-name">Cybercentry</div>
                <div class="featured-tagline">Modular Security Verification Suite</div>
                <p class="featured-desc">Autonomous security for AI agents and Web3 workflows. Smart contract auditing, wallet threat screening, phishing detection — packaged as deployable skill modules. Buy individual modules or the full suite.</p>
              </div>
              <div class="featured-price-block">
                <div class="featured-pill"><span class="featured-pill-dot"></span>Live · 4 Modules Active</div>
                <div style="margin-top:10px; text-align:right;">
                  <div class="price-from">Bundle from</div>
                  <div class="price-main">$29<sub>/mo</sub></div>
                  <div class="price-period">Individual modules from $9/mo</div>
                </div>
              </div>
            </div>

            <!-- SKU table -->
            <div class="sku-table">
              <div class="sku-hd">
                <div></div>
                <div>Module</div>
                <div class="sku-col-type">Type</div>
                <div class="sku-col-status">Status</div>
                <div>Price</div>
                <div>Action</div>
              </div>

              <div class="sku-row">
                <div class="sku-ico">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name">Smart Contract Auditing</div>
                  <div class="sku-sub">Automated vulnerability scanning · EVM-compatible</div>
                </div>
                <div class="sku-type">Skill Module</div>
                <div class="sku-badge live">Active</div>
                <div class="sku-price"><span class="sku-cur">$</span>9<span class="sku-cur">/mo</span></div>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="sku-btn">Get →</a>
              </div>

              <div class="sku-row">
                <div class="sku-ico">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name">Wallet Threat Screening</div>
                  <div class="sku-sub">Real-time risk scoring · flags drainers &amp; exploiters</div>
                </div>
                <div class="sku-type">Skill Module</div>
                <div class="sku-badge live">Active</div>
                <div class="sku-price"><span class="sku-cur">$</span>9<span class="sku-cur">/mo</span></div>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="sku-btn">Get →</a>
              </div>

              <div class="sku-row">
                <div class="sku-ico">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name">Phishing Detection</div>
                  <div class="sku-sub">Malicious URLs, fake contracts, social engineering</div>
                </div>
                <div class="sku-type">Skill Module</div>
                <div class="sku-badge live">Active</div>
                <div class="sku-price"><span class="sku-cur">$</span>9<span class="sku-cur">/mo</span></div>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="sku-btn">Get →</a>
              </div>

              <div class="sku-row">
                <div class="sku-ico">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name">Transaction Analysis</div>
                  <div class="sku-sub">MEV detection, sandwich attacks, rug signals</div>
                </div>
                <div class="sku-type">Skill Module</div>
                <div class="sku-badge live">Active</div>
                <div class="sku-price"><span class="sku-cur">$</span>9<span class="sku-cur">/mo</span></div>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="sku-btn">Get →</a>
              </div>

              <div class="sku-row disabled">
                <div class="sku-ico">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name">Agent Security Layer</div>
                  <div class="sku-sub">Drop-in verification for AI agent workflows</div>
                </div>
                <div class="sku-type">Skill Module</div>
                <div class="sku-badge soon">Phase 02</div>
                <div class="sku-price" style="color:var(--ink4);">TBA</div>
                <a href="home.php#roadmap" class="sku-btn ghost">Soon</a>
              </div>

              <div class="sku-row sku-bundle-row">
                <div class="sku-ico" style="color:var(--green);">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                </div>
                <div class="sku-info">
                  <div class="sku-name" style="color:var(--ink);font-weight:700;">Full Suite Bundle</div>
                  <div class="sku-sub">All 4 active modules · best value · save 19%</div>
                </div>
                <div class="sku-type">Bundle</div>
                <div class="sku-badge live">Best Value</div>
                <div class="sku-price" style="color:var(--green);"><span class="sku-cur">$</span>29<span class="sku-cur">/mo</span></div>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="sku-btn" style="background:var(--green);">Buy Bundle →</a>
              </div>

            </div><!-- /sku-table -->

            <div class="featured-cta-bar">
              <div class="featured-cta-copy"><strong>All revenue → $A open-market buyback.</strong> Each active subscription compounds the deflationary loop automatically.</div>
              <div class="featured-cta-actions">
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="cta-primary">
                  Open on ClawHub
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M7 17L17 7M7 7h10v10"/></svg>
                </a>
                <a href="whitepaper.php" class="cta-ghost">Whitepaper →</a>
              </div>
            </div>

          </div><!-- /featured-card -->

          <div class="callout">
            <span class="callout-pre">// LOOP</span>
            <span class="callout-text">Every Cybercentry subscription → direct USDC revenue → open-market $A buyback → permanent burn → holder airdrop. Subscription count directly maps to buyback frequency.</span>
          </div>

        </div>
      </div>

      <!-- 02: CATALOG -->
      <div class="section" id="catalog">
        <div class="section-hd">
          <span class="section-num">02</span>
          <span class="section-pipe">|</span>
          <span class="section-title">FULL CATALOG</span>
          <span class="section-sub">All agent-built products · Phase 01 and beyond</span>
          <span class="section-status ok">● 3 PRODUCTS LISTED</span>
        </div>
        <div class="section-body">

          <div class="catalog-grid">

            <!-- Social Agent -->
            <div class="catalog-card live">
              <div class="catalog-card-top-line"></div>
              <div class="catalog-wm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".7">
                  <circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
                </svg>
              </div>
              <div class="catalog-pill live"><span class="catalog-pill-dot"></span>Live · Phase 01</div>
              <div>
                <div class="catalog-name">Social Agent</div>
                <div class="catalog-tagline">Autonomous Growth Engine</div>
              </div>
              <p class="catalog-desc">Operating live on X — finding conversations, building reach, growing community. 97K impressions in 48 hours, $0 ad spend. Growth-as-a-service for Web3 projects.</p>
              <div class="catalog-price-row">
                <div class="catalog-price" style="font-size:14px;color:var(--ink3);font-weight:600;">Contact for Pricing</div>
              </div>
              <div class="catalog-actions">
                <a href="https://x.com/aptum_" target="_blank" rel="noopener" class="catalog-btn">
                  See Live on X
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M7 17L17 7M7 7h10v10"/></svg>
                </a>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="catalog-btn-ghost">ClawHub</a>
              </div>
            </div>

            <!-- AI Games -->
            <div class="catalog-card soon dim">
              <div class="catalog-card-top-line"></div>
              <div class="catalog-wm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".7">
                  <line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/>
                  <line x1="15" y1="13" x2="15.01" y2="13"/><line x1="18" y1="11" x2="18.01" y2="11"/>
                  <rect x="2" y="6" width="20" height="12" rx="2"/>
                </svg>
              </div>
              <div class="catalog-pill soon">Phase 02 · In Development</div>
              <div>
                <div class="catalog-name">AI Games</div>
                <div class="catalog-tagline">Agent-Generated Standalone Games</div>
              </div>
              <p class="catalog-desc">The agent designs, builds, and ships standalone games — each a self-contained revenue stream. Every play session creates buyback pressure and compresses supply.</p>
              <div class="catalog-price-row">
                <div class="catalog-price" style="font-size:13px;color:var(--ink4);">TBA · Phase 02</div>
              </div>
              <div class="catalog-actions">
                <a href="home.php#roadmap" class="catalog-btn-ghost">View Roadmap →</a>
              </div>
            </div>

            <!-- Cybercentry -->
            <div class="catalog-card live">
              <div class="catalog-card-top-line"></div>
              <div class="catalog-wm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".7">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
              </div>
              <div class="catalog-pill live"><span class="catalog-pill-dot"></span>Live · 4 Modules</div>
              <div>
                <div class="catalog-name">Cybercentry</div>
                <div class="catalog-tagline">Security Verification Suite</div>
              </div>
              <p class="catalog-desc">Modular Web3 security for AI agents and DeFi workflows. Available as individual modules or full suite via ClawHub.</p>
              <div class="catalog-price-row">
                <div class="catalog-price">$9</div>
                <div class="catalog-price-sub">/ module / month · bundle from $29</div>
              </div>
              <div class="catalog-actions">
                <a href="#cybercentry" class="catalog-btn">
                  View SKUs
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M7 17L17 7M7 7h10v10"/></svg>
                </a>
                <a href="https://clawhub.io" target="_blank" rel="noopener" class="catalog-btn-ghost">ClawHub</a>
              </div>
            </div>

            <!-- New Verticals -->
            <div class="catalog-card soon dim">
              <div class="catalog-card-top-line"></div>
              <div class="catalog-wm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".7">
                  <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
              </div>
              <div class="catalog-pill soon">Phase 03 / 04 · TBA</div>
              <div>
                <div class="catalog-name">New Verticals</div>
                <div class="catalog-tagline">Expanding Revenue Streams</div>
              </div>
              <p class="catalog-desc">Each new vertical compounds total revenue and adds more buyback pressure. Identified, built, and deployed autonomously as the ecosystem scales.</p>
              <div class="catalog-price-row">
                <div class="catalog-price" style="font-size:13px;color:var(--ink4);">Announced Per Phase</div>
              </div>
              <div class="catalog-actions">
                <a href="home.php#roadmap" class="catalog-btn-ghost">View Roadmap →</a>
              </div>
            </div>

          </div><!-- /catalog-grid -->

          <div class="callout">
            <span class="callout-pre">// ALL SALES</span>
            <span class="callout-text">Every product in the catalog — regardless of vertical — feeds the same revenue loop. Sale → buyback → burn → airdrop. The agent earns autonomously, holders benefit automatically.</span>
          </div>

        </div>
      </div>

    </div><!-- /center -->

    <!-- RIGHT SIDEBAR -->
    <div class="right">

      <div class="right-cta-panel">
        <div class="right-cta-hd">Ready to Buy?</div>
        <div class="right-cta-text">All products sold via ClawHub. Accepts USDC and ETH on Base L2. Revenue routes automatically into the $A buyback loop.</div>
        <a href="https://clawhub.io" target="_blank" rel="noopener" class="right-cta-btn">
          Open ClawHub Store
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M7 17L17 7M7 7h10v10"/></svg>
        </a>
      </div>

      <div class="store-stats-panel">
        <div class="spanel-hd">STORE · LIVE STATUS</div>
        <div class="stat-row"><span class="stat-key">Products listed</span><span class="stat-val ok">3 active</span></div>
        <div class="stat-row"><span class="stat-key">SKUs live</span><span class="stat-val ok">4</span></div>
        <div class="stat-row"><span class="stat-key">Phase 02 SKUs</span><span class="stat-val">2 in dev</span></div>
        <div class="stat-row"><span class="stat-key">Platform</span><span class="stat-val">ClawHub</span></div>
        <div class="stat-row"><span class="stat-key">Payment methods</span><span class="stat-val">USDC · ETH</span></div>
        <div class="stat-row"><span class="stat-key">Revenue routing</span><span class="stat-val ok">→ $A Buyback ✓</span></div>
        <div class="stat-row"><span class="stat-key">Builder</span><span class="stat-val">The Agent</span></div>
      </div>

      <div class="loop-panel">
        <div class="spanel-hd">REVENUE LOOP</div>
        <div class="loop-step">
          <div class="loop-num">1</div>
          <div>
            <div class="loop-title">Customer Buys</div>
            <div class="loop-sub">Purchase made on ClawHub in USDC or ETH on Base</div>
          </div>
        </div>
        <div class="loop-step">
          <div class="loop-num">2</div>
          <div>
            <div class="loop-title">Revenue Collected</div>
            <div class="loop-sub">100% of revenue captured — no overhead, no split</div>
          </div>
        </div>
        <div class="loop-step">
          <div class="loop-num">3</div>
          <div>
            <div class="loop-title">$A Buyback</div>
            <div class="loop-sub">Revenue deployed open-market — buys $A at market price</div>
          </div>
        </div>
        <div class="loop-step">
          <div class="loop-num">4</div>
          <div>
            <div class="loop-title">Burn &amp; Airdrop</div>
            <div class="loop-sub">$A permanently burned + portion airdropped to holders</div>
          </div>
        </div>
      </div>

      <div class="token-panel">
        <div class="spanel-hd">TOKEN · LIVE DATA</div>
        <div class="token-row"><span class="token-key">Price USD</span><span class="token-val" id="rp-price">—</span></div>
        <div class="token-row"><span class="token-key">24h Change</span><span class="token-val" id="rp-chg">—</span></div>
        <div class="token-row"><span class="token-key">Market Cap</span><span class="token-val" id="rp-mcap">—</span></div>
        <div class="token-row"><span class="token-key">Liquidity</span><span class="token-val" id="rp-liq">—</span></div>
        <div class="token-row"><span class="token-key">Vol 24h</span><span class="token-val" id="rp-vol">—</span></div>
        <div class="token-row"><span class="token-key">Chain</span><span class="token-val">Base L2</span></div>
        <div class="token-row"><span class="token-key">Inflation</span><span class="token-val ok">None ✓</span></div>
        <div class="token-row" style="padding-top:6px;">
          <span style="font-size:9px;color:var(--ink5);font-weight:600;">Updated <span id="rp-updated">—</span></span>
        </div>
      </div>

    </div><!-- /right -->

  </div><!-- /body -->

  <footer class="footer">
    <div class="footer-cell">APTUM STORE · $A <span class="val">Base Network</span></div>
    <div class="footer-cell"><a href="https://clawhub.io" target="_blank">ClawHub ↗</a></div>
    <div class="footer-cell"><a href="https://x.com/aptum_" target="_blank">X/Twitter ↗</a></div>
    <div class="footer-cell"><a href="https://t.me/aptum" target="_blank">Telegram ↗</a></div>
    <div class="footer-cell"><a href="whitepaper.php">Whitepaper ↗</a></div>
    <div class="footer-cell"><a href="https://dexscreener.com/base/0x23e52ed0f63f3663bc5a8b688ac0e1dbafabe928c5a2de552f5f67ac1b33cd4d" target="_blank">DEX Screener ↗</a></div>
    <div class="footer-right">2026 · Built on Base</div>
  </footer>

</div><!-- /layout -->


<!-- ═══════════════════════════════════════════════════════════
     MERCH & DIGITAL PRODUCTS — Desktop
     (unified from shop.php; cursor/statusbar/navbar come from header.php)
════════════════════════════════════════════════════════════ -->
<div id="desktop">
  <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 -->


<!-- ═══════════════════════════════════════════════════════════
     MERCH & DIGITAL PRODUCTS — Mobile
     (m-topbar omitted — header.php handles navigation)
════════════════════════════════════════════════════════════ -->
<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>

  <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>
'use strict';

/* ── Section reveal ── */
const sectionObserver = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.04 });
document.querySelectorAll('.section').forEach(el => sectionObserver.observe(el));

/* ── SKU row stagger ── */
const rowObserver = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (!e.isIntersecting) return;
    const rows = e.target.querySelectorAll('.sku-row');
    rows.forEach((row, i) => {
      setTimeout(() => row.classList.add('row-visible'), i * 48);
    });
    rowObserver.unobserve(e.target);
  });
}, { threshold: 0.1 });
document.querySelectorAll('.sku-table').forEach(el => rowObserver.observe(el));

/* ── Helpers ── */
function fmtUSD(n) {
  if (!n && n !== 0) return '—';
  if (n >= 1e9) return '$' + (n / 1e9).toFixed(2) + 'B';
  if (n >= 1e6) return '$' + (n / 1e6).toFixed(2) + 'M';
  if (n >= 1e3) return '$' + (n / 1e3).toFixed(1) + 'K';
  return '$' + n.toFixed(2);
}
function fmtPrice(p) {
  if (!p && p !== 0) return '—';
  const n = parseFloat(p);
  if (isNaN(n) || n === 0) return '$0';
  if (n >= 1) return '$' + n.toFixed(4);
  if (n >= 0.001) return '$' + n.toFixed(6);
  const s = n.toFixed(20), m = s.match(/^0\.(0*)([1-9]\d*)/);
  if (!m) return '$' + n.toExponential(3);
  const z = m[1].length, sig = m[2].slice(0, 4);
  const S = '\u2080\u2081\u2082\u2083\u2084\u2085\u2086\u2087\u2088\u2089';
  if (z >= 4) return '$0.0' + String(z).split('').map(d => S[+d]).join('') + sig;
  return '$' + n.toFixed(z + 4);
}
function fmtPct(n) { if (n == null) return '—'; return (n >= 0 ? '+' : '') + n.toFixed(2) + '%'; }
function setEl(id, v) { const e = document.getElementById(id); if (e) e.textContent = v; }

/* ── DEX Data ── */
const CA = '0xaa681b1D3dE076f2524c94Ceb2Db712878Bb6b07';
async function fetchDex() {
  try {
    const r = await fetch(`https://api.dexscreener.com/tokens/v1/base/${CA}`);
    if (!r.ok) return;
    const d = await r.json();
    const pairs = Array.isArray(d) ? d : (d.pairs || []);
    if (!pairs.length) return;
    const pair = pairs.reduce((b, p) => (p.liquidity?.usd || 0) > (b.liquidity?.usd || 0) ? p : b, pairs[0]);
    applyDex(pair);
  } catch (e) { console.warn('DEX:', e.message); }
}
function applyDex(p) {
  const pr = p.priceUsd, mc = p.marketCap, liq = p.liquidity?.usd, vol = p.volume?.h24;
  const c24 = p.priceChange?.h24 ?? null;

  setEl('sb-price', fmtPrice(pr));
  const sc = document.getElementById('sb-chg24');
  if (sc) { sc.textContent = fmtPct(c24); sc.className = 'sb-val ' + (c24 >= 0 ? 'pos' : 'neg'); }
  setEl('sb-mcap', mc ? fmtUSD(mc) : '—');
  setEl('sb-liq', liq ? fmtUSD(liq) : '—');
  setEl('sb-vol', vol ? fmtUSD(vol) : '—');

  setEl('rp-price', fmtPrice(pr));
  const rc = document.getElementById('rp-chg');
  if (rc) { rc.textContent = fmtPct(c24); rc.style.color = c24 >= 0 ? 'var(--green)' : 'var(--red)'; rc.style.fontWeight = '700'; }
  setEl('rp-mcap', mc ? fmtUSD(mc) : '—');
  setEl('rp-liq', liq ? fmtUSD(liq) : '—');
  setEl('rp-vol', vol ? fmtUSD(vol) : '—');
  setEl('rp-updated', new Date().toUTCString().slice(17, 25) + ' UTC');

  setEl('lp-price', fmtPrice(pr));
  const lc = document.getElementById('lp-chg');
  if (lc) { lc.textContent = fmtPct(c24); lc.style.color = c24 >= 0 ? 'var(--green)' : 'var(--red)'; lc.style.fontWeight = '700'; }

  setEl('tape-price', fmtPrice(pr));
  setEl('tape-mcap', mc ? fmtUSD(mc) : '—');
  const tc = document.getElementById('tape-chg');
  if (tc) { tc.textContent = fmtPct(c24); tc.style.color = c24 >= 0 ? 'var(--green)' : 'var(--red)'; }
}
fetchDex(); setInterval(fetchDex, 30000);
window._dexReady = applyDex;

/* ── 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';

  // 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>
