:root{
  --brand:#164e3a;
  --ink:#111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --card:#f8fafc;
  --blue:#3665f3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans";color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:var(--blue)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 0;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800}
.nav{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.btn.light{background:#fff;color:var(--blue);border:1px solid var(--line)}
.banner{background:linear-gradient(90deg,#0f172a 0%, #1e293b 100%);color:#fff}
.banner-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px 0}
.search{display:grid;grid-template-columns:1fr auto;gap:8px}
.search input{padding:12px;border:1px solid var(--line);border-radius:10px}
.search button{padding:12px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);cursor:pointer}
.grid{display:grid;grid-template-columns:260px 1fr;gap:16px;margin:16px 0}
.sidebar{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;position:sticky;top:74px;height:max-content}
.sidebar h3{margin:0 0 8px 0;font-size:1rem}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cat-list a{display:block;padding:8px;border-radius:8px;color:var(--ink);border:1px solid transparent}
.cat-list a:hover{background:#fff;border-color:var(--line)}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.card img{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.card h4{margin:.5rem 0 0 0;font-size:1rem}
.kicker{color:#fff;opacity:.9;font-size:.95rem}
.footer{border-top:1px solid var(--line);color:var(--muted);margin-top:24px}
.footer-inner{padding:16px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:960px){
  .grid{grid-template-columns:1fr}
  .card{grid-column:span 6}
}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 6}
}


.banner-image {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.banner .banner-inner { padding-top: 10px; }


/* === Banner full-bleed fix === */
.banner-hero{
  width:100vw;                       /* span full viewport width */
  margin-left:calc(50% - 50vw);      /* break out of centered container */
  height:clamp(180px, 28vw, 380px);  /* responsive height */
  background:url('/img/banner.jpg') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
/* keep inner content readable on dark */
.banner{ background:linear-gradient(90deg,#0f172a 0%, #1e293b 100%); color:#fff; }

/* === merged: category tiles === */
/* === Category tiles (eBay-style) === */
.cat-tiles{{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:10px}}
.cat-card{{grid-column:span 4;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .15s,transform .05s,border-color .15s}}
.cat-card:hover{{box-shadow:0 6px 24px rgba(0,0,0,.08);border-color:#cbd5e1;transform:translateY(-1px)}}
.cat-card .thumb{{position:relative;background:#fff}}
.cat-card .thumb img{{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f8fafc;border-bottom:1px solid var(--line)}}
.cat-card .body{{padding:10px}}
.cat-card h3{{margin:.3rem 0 .1rem 0;font-size:1.02rem}}
.cat-card p{{margin:0;color:var(--muted);font-size:.9rem}}
@media (max-width:960px){{ .cat-card{{grid-column:span 6}} }}
@media (max-width:640px){{ .cat-card{{grid-column:span 12}} }}