/* ═══════════════════════════════════════
   TSC SHOP — LIGHT BLUE THEME
   The Sapientia Collective © 2026
═══════════════════════════════════════ */

/* ── NAV OVERRIDE (shop uses sticky not fixed) ── */
nav { position: sticky; }
.nav-cart-btn {
  padding: 10px 20px;
  background: var(--blue); color: #fff;
  border-radius: 6px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  border: none; cursor: pointer; transition: background 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.nav-cart-btn:hover { background: var(--blue2); }
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.25); color: #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700;
}

/* ── SHOP HERO ── */
.shop-hero {
  background: var(--navy); padding: 64px 52px 52px;
  position: relative; overflow: hidden; border-bottom: 3px solid var(--gold);
}
.shop-hero::before {
  content:'SHOP'; position:absolute; right:-20px; bottom:-60px;
  font-family:var(--h); font-size:260px; color:rgba(255,255,255,0.04);
  pointer-events:none; line-height:1;
}
.sh-eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.sh-eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); }
.shop-hero-grid { display:grid; grid-template-columns:1fr auto; align-items:flex-end; gap:60px; }
.shop-hero h1 { font-family:var(--h); font-size:clamp(60px,8vw,110px); letter-spacing:-1px; line-height:0.9; color:#fff; text-transform:uppercase; }
.shop-hero h1 span { color:var(--gold); }
.shop-hero h1 .out { -webkit-text-stroke:2px rgba(255,255,255,0.3); color:transparent; }
.shop-hero-desc { font-family:var(--serif); font-style:italic; font-size:17px; color:rgba(255,255,255,0.45); max-width:300px; line-height:1.65; text-align:right; }
.shop-impact-bar { display:flex; gap:2px; margin-top:40px; }
.sib { flex:1; background:rgba(255,255,255,0.06); padding:18px 22px; border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; gap:14px; }
.sib-icon { font-size:22px; }
.sib-num { font-family:var(--h); font-size:28px; color:var(--gold); line-height:1; }
.sib-label { font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-top:2px; }

/* ── TICKER ── */
.ticker { background:rgba(59,91,219,0.15); padding:11px 0; overflow:hidden; border-bottom:1px solid var(--border); }
.ticker-track { display:flex; animation:tick 20s linear infinite; white-space:nowrap; }
@keyframes tick { from{transform:translateX(0);}to{transform:translateX(-50%);} }
.ticker-item { font-family:var(--h); font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--navy); padding:0 28px; flex-shrink:0; display:flex; align-items:center; gap:28px; }
.ticker-star { font-size:10px; opacity:0.4; }

/* ── LAYOUT ── */
.shop-body { display:grid; grid-template-columns:240px 1fr; gap:0; min-height:80vh; }

/* ── SIDEBAR ── */
.sidebar { background:var(--bg2); padding:40px 32px; border-right:1.5px solid var(--border); position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; }
.sb-section { margin-bottom:36px; }
.sb-title { font-family:var(--mono); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--dimmed); margin-bottom:14px; }
.cat-list { display:flex; flex-direction:column; gap:2px; }
.cat-item { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:5px; cursor:pointer; transition:all 0.15s; font-size:13px; color:var(--muted); border:1.5px solid transparent; }
.cat-item:hover { background:var(--surface); color:var(--navy); }
.cat-item.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.cat-item .cat-count { font-family:var(--mono); font-size:10px; opacity:0.6; }
.price-range { display:flex; flex-direction:column; gap:10px; }
.pr-row { display:flex; justify-content:space-between; align-items:center; }
.pr-label { font-size:12px; color:var(--muted); }
.pr-val { font-family:var(--mono); font-size:11px; color:var(--navy); font-weight:500; }
input[type="range"] { width:100%; accent-color:var(--blue); cursor:pointer; }
.sort-row { display:flex; flex-direction:column; gap:6px; }
.sort-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:4px; cursor:pointer; font-size:12px; color:var(--muted); transition:all 0.15s; }
.sort-opt:hover { background:var(--surface); color:var(--navy); }
.sort-opt.active { color:var(--blue); }
.sort-dot { width:7px; height:7px; border:1.5px solid currentColor; border-radius:50%; flex-shrink:0; }
.sort-opt.active .sort-dot { background:var(--blue); border-color:var(--blue); }
.cause-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:rgba(59,91,219,0.08); border:1px solid var(--border); font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--blue); margin-bottom:20px; }

/* ── PRODUCTS AREA ── */
.products-area { background:var(--bg); padding:36px 48px 64px; }
.products-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; padding-bottom:20px; border-bottom:1.5px solid var(--border); }
.pt-count { font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--dimmed); }
.pt-count span { color:var(--navy); font-weight:600; }
.view-toggle { display:flex; gap:6px; }
.vt-btn { width:34px; height:34px; border:1.5px solid var(--border); border-radius:4px; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); transition:all 0.15s; }
.vt-btn:hover,.vt-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product-grid.list-view { grid-template-columns:1fr; }

/* ── PRODUCT CARD ── */
.pc { background:#fff; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:all 0.28s cubic-bezier(0.23,1,0.32,1); position:relative; display:flex; flex-direction:column; }
.pc:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(59,91,219,0.12); border-color:var(--blue); }
.pc-badge { position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:4px; z-index:2; font-weight:600; }
.badge-new { background:var(--navy); color:#fff; }
.badge-popular { background:var(--blue); color:#fff; }
.badge-cause { background:var(--bg4); color:var(--navy); border:1px solid var(--border); }
.pc-img { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:72px; background:linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%); position:relative; overflow:hidden; transition:background 0.3s; }
.pc:hover .pc-img { background:linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%); }
.pc-img-pattern { position:absolute; inset:0; background-image:radial-gradient(circle at 20% 80%,rgba(59,91,219,0.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(232,160,32,0.06) 0%,transparent 50%); }
.pc-wishlist { position:absolute; top:12px; right:12px; width:34px; height:34px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:1.5px solid var(--border); cursor:pointer; transition:all 0.2s; opacity:0; backdrop-filter:blur(4px); color:var(--muted); }
.pc:hover .pc-wishlist { opacity:1; }
.pc-wishlist:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.pc-wishlist.liked { opacity:1; color:#e33; }
.pc-quick-add { position:absolute; bottom:0; left:0; right:0; background:var(--blue); color:#fff; padding:12px; font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; text-align:center; border:none; cursor:pointer; transform:translateY(100%); transition:transform 0.25s cubic-bezier(0.23,1,0.32,1); }
.pc:hover .pc-quick-add { transform:translateY(0); }
.pc-quick-add:hover { background:var(--blue2); }
.pc-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.pc-cat { font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--dimmed); margin-bottom:8px; }
.pc-name { font-size:15px; font-weight:600; color:var(--navy); line-height:1.35; margin-bottom:6px; flex:1; }
.pc-desc { font-size:12px; color:var(--muted); line-height:1.55; margin-bottom:14px; }
.pc-impact { display:flex; align-items:center; gap:6px; background:rgba(59,91,219,0.06); border:1px solid var(--border); border-radius:4px; padding:6px 10px; margin-bottom:14px; }
.pc-impact-icon { font-size:12px; }
.pc-impact-text { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--blue); }
.pc-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc-price { font-family:var(--h); font-size:26px; letter-spacing:-0.5px; color:var(--navy); line-height:1; }
.pc-price .old { font-size:14px; color:var(--dimmed); text-decoration:line-through; margin-left:6px; font-family:var(--b); }
.pc-add { padding:9px 18px; background:var(--blue); color:#fff; border:none; border-radius:5px; font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.pc-add:hover { background:var(--blue2); }
.pc-add.added { background:#16a34a; color:#fff; }
.product-grid.list-view .pc { flex-direction:row; }
.product-grid.list-view .pc-img { aspect-ratio:unset; width:180px; flex-shrink:0; font-size:56px; }
.product-grid.list-view .pc-body { padding:24px 28px; }
.product-grid.list-view .pc-name { font-size:17px; }
.product-grid.list-view .pc-quick-add { display:none; }

/* ── CART DRAWER ── */
#cart-drawer { position:fixed; top:0; right:-420px; width:420px; height:100vh; background:#fff; border-left:1.5px solid var(--border); z-index:2000; display:flex; flex-direction:column; transition:right 0.4s cubic-bezier(0.23,1,0.32,1); box-shadow:-20px 0 60px rgba(59,91,219,0.10); }
#cart-drawer.open { right:0; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:1.5px solid var(--border); background:var(--navy); }
.cart-title { font-family:var(--h); font-size:28px; letter-spacing:1px; color:#fff; text-transform:uppercase; }
.cart-close { width:36px; height:36px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; background:transparent; color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.cart-close:hover { background:rgba(255,255,255,0.12); }
.cart-items { flex:1; overflow-y:auto; padding:20px 28px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; text-align:center; }
.cart-empty-icon { font-size:56px; }
.cart-empty-text { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--muted); }
.cart-empty-sub { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--dimmed); }
.cart-item { display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border); animation:slideIn 0.3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;} }
.ci-emoji { width:56px; height:56px; background:var(--bg2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; border:1px solid var(--border); }
.ci-info { flex:1; }
.ci-name { font-size:13px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.ci-impact { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.ci-bottom { display:flex; align-items:center; justify-content:space-between; }
.ci-price { font-family:var(--h); font-size:20px; color:var(--navy); }
.ci-qty { display:flex; align-items:center; gap:8px; }
.ci-qty-btn { width:26px; height:26px; border:1.5px solid var(--border); border-radius:4px; background:transparent; cursor:pointer; font-size:14px; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.ci-qty-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.ci-qty-num { font-family:var(--mono); font-size:13px; min-width:20px; text-align:center; color:var(--navy); }
.ci-remove { width:28px; height:28px; border:none; background:transparent; cursor:pointer; color:var(--dimmed); font-size:16px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all 0.15s; }
.ci-remove:hover { color:#dc2626; background:rgba(220,38,38,0.06); }
.cart-footer { padding:24px 28px; border-top:1.5px solid var(--border); background:var(--bg2); }
.cart-impact-strip { background:rgba(59,91,219,0.07); border:1px solid var(--border); border-radius:6px; padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.cart-impact-text { font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--blue); }
.cart-subtotal { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cart-subtotal-label { font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--dimmed); }
.cart-subtotal-val { font-family:var(--h); font-size:32px; letter-spacing:-0.5px; color:var(--navy); }
.cart-note { font-size:11px; color:var(--dimmed); margin-bottom:16px; font-family:var(--mono); letter-spacing:0.5px; }
.cart-checkout { width:100%; padding:16px; background:var(--blue); color:#fff; border:none; border-radius:6px; font-family:var(--h); font-size:20px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:10px; }
.cart-checkout:hover { background:var(--blue2); }

/* ── OVERLAY & TOAST ── */
#overlay { position:fixed; inset:0; background:rgba(15,28,77,0.35); z-index:1999; opacity:0; pointer-events:none; transition:opacity 0.3s; }
#overlay.visible { opacity:1; pointer-events:all; }
#toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--navy); color:#fff; padding:14px 24px; border-radius:6px; font-family:var(--mono); font-size:11px; letter-spacing:1px; z-index:3000; transition:transform 0.3s cubic-bezier(0.23,1,0.32,1),opacity 0.3s; opacity:0; white-space:nowrap; display:flex; align-items:center; gap:10px; border-left:3px solid var(--blue); }
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── SHOP FOOTER ── */
footer { position:relative; overflow:hidden; }
footer::before { content:'TSC'; position:absolute; bottom:-40px; right:-10px; font-family:var(--h); font-size:200px; color:rgba(255,255,255,0.03); pointer-events:none; line-height:1; }

/* ── RESPONSIVE ── */
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:860px){
  .shop-body{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1.5px solid var(--border);padding:24px 28px;}
  nav{padding:0 24px;}
  .shop-hero{padding:48px 28px 40px;}
  .shop-hero-grid{grid-template-columns:1fr;gap:20px;}
  .shop-hero-desc{text-align:left;}
  .products-area{padding:28px 28px 52px;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  #cart-drawer{width:100%;right:-100%;}
}
@media(max-width:560px){.product-grid{grid-template-columns:1fr;}.shop-impact-bar{flex-direction:column;}}
@media(max-width:640px){.n-links{display:none;}}