/* minimal colorful header + responsive grid */
:root{
  --accent:#ff6b6b;
  --green:#2ecc71;
  --muted:#888;
}
body{font-family:Arial, Helvetica, sans-serif;margin:0;background:#f6f7fb;color:#222}
.header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(90deg,#4b6cb7,#182848);color:#fff}
.header .brand{font-size:18px}
.header .accent{color:var(--accent);font-weight:700}
.controls select{margin-left:8px;padding:6px;border-radius:6px;border:0}
main{padding:16px}
.grid{display:grid;grid-gap:12px}
/* Desktop: 4 columns */
@media(min-width:800px){
  .grid{grid-template-columns:repeat(4,1fr)}
}
/* Mobile: 2 columns */
@media(max-width:799px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
.card{background:#fff;border-radius:8px;padding:8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);display:flex;flex-direction:column}
.card img{width:100%;height:200px;object-fit:contain;border-radius:6px}
.card .name{font-size:14px;margin:6px 0;height:40px;overflow:hidden}
.card .prices{display:flex;align-items:center;gap:8px}
.card .first{color:var(--muted);text-decoration:line-through}
.card .sale{color:var(--green);font-weight:700}
.card .discount{color:var(--accent);font-weight:700}
.sizes{margin-top:8px}
.sizes span{display:inline-block;padding:4px 6px;border:1px solid #eee;border-radius:4px;margin-right:4px;margin-bottom:4px;font-size:12px}
.pagination{display:flex;justify-content:center;align-items:center;margin-top:16px;gap:12px}
.pagination button{padding:8px 12px;border-radius:6px;border:0;background:#333;color:#fff}
#productsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 1rem;
  padding: 1rem;
}

.product-tile {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0.5rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.product-tile:hover {
  transform: scale(1.03);
}
.price-row {
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.price-discount { color:red; font-weight:bold; }
.price-sale { color:green; font-weight:bold; }
.price-first { color:gray; text-decoration:line-through; }