:root{
  --accent: #ff4081;
  --bg: #fafafa;
  --card: #ffffff;
  --muted: #777;
}

*{box-sizing:border-box}
body{
  font-family: Inter, Arial, sans-serif;
  margin:0;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
}

.header{
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 28px;
  box-shadow:0 4px 18px rgba(0,0,0,0.06);
  position:sticky; top:0; z-index:50;
}
.header .logo{height:56px;}
.header nav a{margin:0 10px; text-decoration:none; color:#222; font-weight:600}
.header nav a.cta{background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none}

.hero{
  display:flex; align-items:center; justify-content:center;
  padding:80px 20px; background-image:linear-gradient(120deg, rgba(255,64,129,0.08), rgba(0,0,0,0.02));
  text-align:center;
}
.hero .wrap{max-width:980px;}
.hero h1{font-size:2.6rem; margin:0 0 12px; letter-spacing:-0.5px}
.hero p{color:var(--muted); margin:0 0 18px; font-size:1.05rem}

.container{max-width:1100px; margin:40px auto; padding:0 18px}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px}

/* product card */
.card{background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(16,24,40,0.06); transition:transform .18s ease}
.card:hover{transform:translateY(-6px)}
.card img{width:100%; height:240px; object-fit:cover; display:block}
.card .meta{padding:14px}
.card h3{margin:0 0 8px; font-size:1.05rem}
.card p.price{margin:0; font-weight:700; color:var(--accent)}

/* product page */
.product-page{display:grid; grid-template-columns: 1fr 400px; gap:28px; align-items:start}
.product-page img{width:100%; height:560px; object-fit:cover; border-radius:12px}
.product-details{background:var(--card); padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(16,24,40,0.04)}
.product-details h2{margin:0 0 10px}
.product-details p{color:var(--muted)}

/* cart */
.cart-list{list-style:none; padding:0; margin:0}
.cart-item{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #f0f0f0}
.cart-item img{width:86px; height:86px; object-fit:cover; border-radius:8px}
.qty{width:56px; padding:6px; border-radius:6px; border:1px solid #e6e6e6}

/* footer */
footer{margin-top:40px; padding:30px 18px; text-align:center; color:var(--muted)}
.small{font-size:0.95rem}

/* responsive */
@media (max-width:900px){
  .product-page{grid-template-columns:1fr; gap:18px}
  .product-page img{height:360px}
}

/* Responsive adjustments */
img {
    max-width: 100%;
    height: auto;
}
.container, .content, .wrapper {
    max-width: 100%;
    padding: 0 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    .product-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .product-card, .cart-item, .order-summary {
        width: 100% !important;
        max-width: 100%;
    }
    form input, form select, form textarea, form button {
        width: 100% !important;
        box-sizing: border-box;
    }
    nav ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* Mobile cart vertical fix */
@media (max-width: 768px) {
  .cart-item {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}