/* style.css */
:root{
  --purple:#8a2be2;
  --pink:#ff6fbf;
  --white:#ffffff;
  --bg:#fff7fb;
}
*{box-sizing:border-box}
body{font-family:Tahoma,Arial,sans-serif;background:var(--bg);margin:0;color:#222}
.container{display:grid;grid-template-columns:1fr 360px;gap:20px;max-width:1200px;margin:20px auto;padding:20px}
.site-header{text-align:center;padding:16px;background:var(--white);border-bottom:6px solid var(--purple)}
.site-header h1{margin:0;color:var(--purple);font-size:28px}
.catalog{display:flex;flex-wrap:wrap;gap:16px}
.prod-card, .prod-card img, .prod-card h3 { }
.prod-card { width:220px;background:#fff;border-radius:10px;padding:12px;box-shadow:0 6px 20px rgba(0,0,0,0.05);text-align:center }
.products img {
  width: 100%;
  height: auto;
  max-height: 400px; /* تا خیلی بزرگ نشه */
  object-fit: contain; /* عکس کامل و واضح نمایش داده میشه */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.prod-card h3{font-size:16px;margin:8px 0;color:#5a2c6b}
.price{font-weight:bold;color:var(--purple);margin-bottom:8px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:none;cursor:pointer}
.btn.big{font-size:18px;padding:12px 18px;border-radius:12px}
.btn.primary{background:var(--purple);color:white}
.cart-section{background:#fff;padding:14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.03)}
.cart-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed #eee}
.cart-actions button{margin-left:6px}
.container .catalog-section{padding:0}
.container .cart-section{padding:20px}
.danger{color:#c0392b}
.grid{display:flex;flex-wrap:wrap;gap:12px}
.card{background:#fff;padding:10px;border-radius:8px;width:220px;box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.order-card{background:#fff;padding:12px;border-radius:8px;margin-bottom:10px;box-shadow:0 6px 20px rgba(0,0,0,0.03)}
label{display:block;margin-bottom:8px}
input, textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px}
.site-footer{text-align:center;padding:16px;color:#6a2c6a}
@media(max-width:900px){
  .container{grid-template-columns:1fr; padding:12px}
  .prod-card{width:48%}
}
@media(max-width:500px){
  .prod-card{width:100%}
}