/* ToolSavvy production CSS (minimal seed) */
body{background:#0f1115;color:#e8eaee;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0} .wrap{max-width:1100px;margin:0 auto;padding:0 16px} .ts-header{position:sticky;top:0;background:#0c0e12;border-bottom:1px solid #232734} .row{display:flex;align-items:center;justify-content:space-between;padding:12px 0} .logo{width:24px;height:24px;background:#e6132e;border-radius:4px} .nav a{color:#9aa0a6;margin-left:14px;text-decoration:none} h1{font-size:28px;margin:18px 0 6px} .btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid #2a2f3c;color:#cfd2da} .btn-primary{background:#e6132e;border-color:#e6132e;color:#fff} .grid{display:grid;gap:14px} .cards-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .card{background:#151821;border:1px solid #232734;border-radius:12px;overflow:hidden} .footer{color:#9aa0a6;border-top:1px solid #232734;padding:20px 0;margin-top:24px}

/* --- Shop UI polish --- */
a{color:#e8eaee;text-decoration:none}

.card{display:block;background:#151821;border:1px solid #232734;border-radius:12px;overflow:hidden}
.card .media{height:160px;background:#0b0d11}
.card .body{padding:12px}
.price{font-weight:700}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#1c212e;color:#cfd2da;font-size:12px;margin-right:6px}

/* Brand tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:8px 12px;border:1px solid #2a2f3c;border-radius:999px;background:#151821;color:#e8eaee;cursor:pointer}
.tab.active{background:#e6132e;border-color:#e6132e;color:#fff}

/* Shop UI */
a{color:#e8eaee;text-decoration:none}
.card{display:block;background:#151821;border:1px solid #232734;border-radius:12px;overflow:hidden}
.card .media{height:160px;background:#0b0d11}
.card .body{padding:12px}
.price{font-weight:700}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#1c212e;color:#cfd2da;font-size:12px;margin-right:6px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:8px 12px;border:1px solid #2a2f3c;border-radius:999px;background:#151821;color:#e8eaee;cursor:pointer}
.tab.active{background:#e6132e;border-color:#e6132e;color:#fff}

/* === v3.5 Visual Polish === */

/* Cards: hover/tap feedback */
.card{display:block;background:#151821;border:1px solid #232734;border-radius:12px;overflow:hidden;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.card:focus,.card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.25);border-color:#30364a}
.card .media{height:160px;background:#0b0d11}
.card .body{padding:12px}
.price{font-weight:700}
a{color:#e8eaee;text-decoration:none}

/* Pills (brand tabs) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:8px 12px;border:1px solid #2a2f3c;border-radius:999px;background:#151821;color:#e8eaee;cursor:pointer;transition:background .12s ease, border-color .12s ease}
.tab.active{background:#e6132e;border-color:#e6132e;color:#fff}

/* Category tiles */
.cat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-tile{position:relative;background:#151821;border:1px solid #232734;border-radius:12px;padding:14px;transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;cursor:pointer}
.cat-tile:hover{transform:translateY(-2px);border-color:#30364a;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.cat-name{font-weight:700;display:block;margin-bottom:6px}
.cat-count{display:inline-block;padding:2px 8px;border-radius:999px;background:#1c212e;color:#cfd2da;font-size:12px}

/* Empty brand placeholder */
.empty{background:#13161d;border:1px dashed #2a2f3c;border-radius:12px;padding:14px}
.empty strong{color:#e6132e}

/* Fade-in animation for lists */
.fade-in{opacity:0;transform:translateY(6px);animation:fadeIn .18s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

.nav-icon img{
  width:22px;
  height:22px;
  vertical-align:middle;
  filter:invert(100%) brightness(90%);
  transition:transform .15s ease, filter .15s ease;
}
.nav-icon:hover img{
  transform:scale(1.1);
  filter:invert(60%) sepia(100%) saturate(1000%) hue-rotate(-10deg);
}
/* Basket icon — red + pop */
.nav-icon img{ width:22px;height:22px;vertical-align:middle;transition:transform .15s ease, opacity .15s ease }
.nav-icon:hover img{ transform:scale(1.08) }
@keyframes ts-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.nav-icon img.pop{ animation: ts-pop .35s ease; }
/* Basket icon — ToolSavvy red + hover + pop */
.nav-icon img {
  width:22px;
  height:22px;
  vertical-align:middle;
  filter:none;                     /* keep the true red from the SVG */
  transition:transform .15s ease, opacity .15s ease;
}
.nav-icon:hover img {
  transform:scale(1.1);
  opacity:.9;                      /* subtle fade */
}
@keyframes ts-pop {
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.nav-icon img.pop {
  animation:ts-pop .35s ease;
}
/* === Basket badge dot (modular) === */
.nav-icon{ position:relative }
.nav-icon::after{
  content:''; position:absolute; top:-2px; right:-2px;
  width:9px; height:9px; border-radius:50%;
  background:#e6132e; box-shadow:0 0 0 2px #0f1115;
  opacity:0; transform:scale(.6);
  transition:opacity .15s ease, transform .15s ease;
}
.nav-icon.has-badge::after{ opacity:1; transform:scale(1) }

/* Optional: numeric badge mode (auto-switches if JS sets data-badge) */
.nav-icon.badge-count::after{
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  content: attr(data-badge);
  font-size:11px; font-weight:700; color:#fff;
  border-radius:10px;
}
#ai-bar { display:flex; gap:8px; margin:14px 0 }
#ai-bar input { flex:1 }
/* ToolSavvy Screenshot→Basket helpers */
.upload-zone{border:2px dashed #e6132e;border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:.2s}
.upload-zone.active{background:#151515}
.vt-card{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:16px;margin:16px 0}
.vt-preview{width:100%;max-width:720px;border-radius:6px}
.vt-compare{display:flex;gap:16px;justify-content:space-between;margin-top:10px;border-top:1px solid #333;padding-top:10px}
.vt-deals{background:#111;border-radius:6px;padding:10px;margin-top:10px}
.vt-offer{border-bottom:1px solid #222;padding:6px 0}
.vt-confirm{background:#e6132e;color:#fff;border:none;border-radius:6px;padding:10px 14px;cursor:pointer}
.merchant-badge{display:inline-block;background:#222;color:#e6132e;padding:2px 6px;border-radius:3px;font-size:12px;margin-right:6px}
/* --- Basket / Vision Turbo / Optimiser helpers --- */
.dropzone{border:2px dashed #e6132e;border-radius:8px;padding:28px;text-align:center;cursor:pointer;transition:.2s}
.dropzone.active{background:#151515}
.dz-emoji{font-size:40px;margin-bottom:6px}
.dz-title{font-weight:700}
.dz-sub{opacity:.8;font-size:.95rem;margin-bottom:10px}
.btn{background:#e6132e;color:#fff;border:0;border-radius:6px;padding:10px 14px;display:inline-block;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.95}
.grid{display:grid;gap:14px}
.cards-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:14px}
.row{display:flex;gap:12px}
.pill{display:inline-block;background:#222;border:1px solid #333;color:#ddd;font-size:.8rem;border-radius:999px;padding:3px 8px;margin-right:6px}
.brand-badge{display:inline-block;background:#222;color:#e6132e;border:1px solid #333;border-radius:4px;padding:2px 6px;margin-bottom:6px;font-size:.85rem}
.price{font-weight:800}
.list{margin:0;padding-left:18px}
.muted{color:#9a9a9a}
.vt-card{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:14px;margin:14px 0}
.vt-preview{width:100%;max-width:720px;border-radius:6px}
.vt-compare{display:flex;gap:16px;justify-content:space-between;margin-top:10px;border-top:1px solid #333;padding-top:10px}