/* styles.css - modern responsive + cart sidebar + product page styles */

:root{
  --accent:#ff6b6b;
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#6b6b6b;
  --shadow: 0 12px 30px rgba(15,15,15,0.06);
  --radius:12px;
}

*{box-sizing:border-box}
body{font-family:Inter, "Segoe UI", Roboto, Arial; margin:0; background:var(--bg); color:#111; -webkit-font-smoothing:antialiased;}
.header{background:var(--card); box-shadow:0 2px 6px rgba(0,0,0,0.04); position:sticky; top:0; z-index:80;}
.nav{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px;}
.brand{font-weight:700; color:var(--accent); letter-spacing:0.3px}
.nav a{color:#222; text-decoration:none; margin-left:12px; padding:8px 10px; border-radius:8px}
.nav a:hover{background:#f0f0f3}

/* container */
.container{max-width:1100px; margin:28px auto; padding:0 20px}

/* product grid */
.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px}
.card{background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); transition:transform .22s, box-shadow .22s; display:flex; flex-direction:column; align-items:center; text-align:center}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,15,15,0.08)}
.card img{width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:12px}
.card h3{margin:6px 0 4px; font-size:16px}
.card p.price{margin:0; color:var(--muted); font-weight:700}

/* product page */
.product-page{display:grid; grid-template-columns: 1fr 380px; gap:28px; align-items:start}
.product-hero{background:var(--card); padding:16px; border-radius:12px; box-shadow:var(--shadow)}
.product-hero img{width:100%; height:420px; object-fit:cover; border-radius:10px}
.product-info{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.variants{display:flex; gap:10px; margin-top:10px}
.variant-select{padding:10px; border-radius:8px; border:1px solid #e6e6e9; background:#fff}

/* buttons */
button.primary{background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; transition:transform .12s}
button.primary:hover{transform:translateY(-2px)}

/* cart sidebar */
.cart{position:fixed; right:20px; bottom:20px; width:340px; max-height:78vh; overflow:auto; background:var(--card); padding:14px; border-radius:12px; box-shadow:0 18px 40px rgba(15,15,15,0.08); z-index:120; transform: translateY(30px); transition:transform .28s, opacity .28s; opacity:1}
.cart.hidden{opacity:0; transform: translateY(12px)}
.cart h4{margin:0 0 8px}
.cart ul{list-style:none; padding:0; margin:0}
.cart li{display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:8px; background:#fbfbfd; margin-bottom:8px}
.qty{width:56px; padding:6px; border-radius:8px; border:1px solid #eee; text-align:center}

/* small helpers */
.small{font-size:13px; color:var(--muted)}

/* modal (image) */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:140}
.modal .inner{background:var(--card); padding:18px; border-radius:10px; max-width:920px; width:92%}
.modal img{width:100%; border-radius:8px}

/* animations */
.fly-img{position:fixed; width:80px; height:80px; object-fit:cover; border-radius:8px; z-index:9999; pointer-events:none; transition:all .8s cubic-bezier(.2,.9,.2,1)}

/* responsive */
@media(max-width:920px){
  .product-page{grid-template-columns: 1fr}
  .product-hero img{height:360px}
  .cart{right:12px; left:12px; width:auto}
}
@media(max-width:520px){
  .card img{height:140px}
  .product-hero img{height:280px}
  .nav{padding:10px}
}