:root { --maxw: 1100px; --gap: 1rem; --radius: 14px; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#111; background:#fafafa; }
header { border-bottom: 1px solid #eee; background: white; position: sticky; top: 0; z-index: 10; }
header .wrap { max-width: var(--maxw); margin: 0 auto; padding: 1rem; display:flex; align-items:center; justify-content:space-between; }
header a { text-decoration:none; color:#111; font-weight:600; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }
.grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(230px, 1fr) ); gap: var(--gap); }
.card { background:white; border:1px solid #eee; border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.card img { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.card .body { padding: .8rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; }
.card h3 { margin:0; font-size: 1.05rem; }
.price { font-weight:700; }
.badge { font-size:.75rem; color:#0a7; background:#e8fff4; border:1px solid #bdf0d7; padding:.2rem .5rem; border-radius:999px; display:inline-block; }
.search { margin: .5rem 0 1rem; display:flex; gap:.5rem; }
.search input { flex:1; padding:.65rem .75rem; border-radius:10px; border:1px solid #ddd; }
.footer { color:#666; text-align:center; padding:2rem; }
@media (hover:hover) { .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.06);} }

/* --- Dark theme override --- */
html, body { background:#000; color:#fff; }
header { background:#000; border-bottom:1px solid #222; }
header a { color:#fff; }
.card { background:#111; border:1px solid #222; }
.card .body { color:#ddd; }
.price { color:#fff; }
.badge { background:#222; border-color:#333; color:#fff; }
.search input { background:#111; color:#fff; border:1px solid #333; }
.search button { background:#222; color:#fff; border:1px solid #333; }
.footer { color:#aaa; }



header .wrap { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.banner img { max-width:100%; max-height:140px; height:auto; object-fit:contain; display:block; margin:0 auto; }


/* Center + limit banner width/height */
.banner-container {
  max-width: 900px;          /* adjust to taste */
  width: min(90vw, 900px);   /* responsive clamp */
  margin: 0 auto;            /* center */
  padding: .5rem 1rem;       /* optional breathing room */
}

.banner-container img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100px;         /* cap the height; tweak as needed */
  object-fit: contain;
}


.site-description {
	    background: #111;          /* same as card background */
    color: #ddd !important;    /* same text color as card descriptions */
    border: 1px solid #222;    /* same border tone as cards */
    border-radius: 12px;
    padding: 0.8rem 1rem;
    line-height: 1.4;
    font-size: .9rem;
}