:root{
  --accent:#2563eb;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f7fafc;
  --danger:#ef4444;
}
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:var(--bg); color:#111 }
.site{ max-width:1100px; margin:0 auto; padding:1rem }

.site-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem }
.logo{ font-size:1.4rem; font-weight:700; letter-spacing:0.2px }
.controls-top{ display:flex; gap:0.75rem; align-items:center }
.search{ padding:0.55rem 0.75rem; border:1px solid #e6e6e6; border-radius:10px; min-width:220px; background:white }
.cart-btn{ padding:0.45rem 0.85rem; border-radius:10px; background:var(--accent); color:white; border:none; cursor:pointer; box-shadow:0 6px 18px rgba(37,99,235,0.12) }

.filters{ display:flex; gap:1rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap }
.filters label{ font-size:0.9rem; color:var(--muted) }
.price-label{ display:flex; align-items:center; gap:0.5rem }

.product-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom:2rem }

.card{ background:var(--card); border:1px solid #eef2f7; border-radius:12px; padding:0; overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .12s ease, box-shadow .12s ease }
.card:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(16,24,40,0.08) }
.card img{ width:100%; height:150px; object-fit:cover; display:block; border-bottom:1px solid #f3f6f9 }
.card-body{ padding:0.85rem; display:flex; flex-direction:column; gap:8px; flex:1 }
.card-title{ margin:0; font-size:1rem; font-weight:600 }
.card-sub{ color:var(--muted); font-size:0.9rem }
.card-meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:0.5rem }
.price{ font-weight:700; color:#111; }
.add{ background:var(--accent); color:white; border:none; padding:0.45rem 0.6rem; border-radius:9px; cursor:pointer; box-shadow:0 6px 14px rgba(37,99,235,0.08) }
.add[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; background:#9bb7ff }

.badge{ font-size:0.75rem; padding:0.25rem 0.45rem; border-radius:999px; background:#111; color:white; display:inline-block }

.stock-legend{ font-size:0.85rem; color:var(--muted) }

/* Cart */
.cart{ position:fixed; right:1rem; top:4rem; width:360px; background:var(--card); padding:0.85rem; box-shadow:0 18px 44px rgba(16,24,40,0.12); border-radius:12px; z-index:40 }
.hidden{ display:none }
.cart-header{ display:flex; justify-content:space-between; align-items:center; gap:0.5rem }
.cart-items{ margin-top:0.5rem; max-height:55vh; overflow:auto; padding-right:6px }
.cart-row{ display:flex; gap:0.6rem; align-items:center; padding:0.5rem 0; border-bottom:1px solid #f1f5f9 }
.thumb{ width:60px; height:60px; object-fit:cover; border-radius:8px }
.qty{ width:64px; padding:0.25rem; border-radius:6px; border:1px solid #e6e6e6 }
.small{ padding:0.35rem 0.5rem; border-radius:8px; background:#f0f3ff; border:none; cursor:pointer }
.primary{ background:var(--accent); color:white; border:none; padding:0.45rem 0.6rem; border-radius:9px; cursor:pointer; }

/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); z-index:50 }
.modal.hidden{ display:none }
.modal-panel{ background:var(--card); padding:1rem; border-radius:12px; width:min(720px,95%); max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(2,6,23,0.12) }
.modal-actions{ display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.75rem }
.form-row{ display:flex; gap:0.7rem; }
.form-row label{ display:block; flex:1; font-size:0.9rem; }
.form-row input{ width:100%; padding:0.45rem; border-radius:8px; border:1px solid #e6e6e6 }

/* Footer */
.site-footer{ text-align:center; color:var(--muted); padding:1rem 0 }

/* tiny responsive */
@media (max-width:700px){
  .cart{ left:0; right:0; top:64px; width:auto; border-radius:0; }
  .card img{ height:200px }
  .controls-top{ flex-direction:column; align-items:flex-start; gap:0.5rem }
  .form-row{ flex-direction:column }
}