@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root{ --bg:#fff; --text:#2b2b2b; --muted:#6b6b6b; --accent:#d7a6a2; --accent-dark:#8d5e58; --card:#f9f9fb; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; overflow-x:hidden; }
body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--text); background:var(--bg); line-height:1.5; }

/* Header */
.header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid #eee; background:#fff; min-height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:20px; flex-shrink:0; }
.brand img{ height:40px; width:auto; max-width:120px; }
.logo-fallback{ color:var(--accent-dark); letter-spacing:0.3px; }
.promo{ flex:1; text-align:center; font-size:14px; color:var(--accent-dark); background:linear-gradient(90deg,#f7e6e4,transparent); padding:6px 8px; border-radius:8px; min-width:0; }
.checkout-icon{ text-decoration:none; color:var(--text); font-size:20px; position:relative; flex-shrink:0; }
.badge{ margin-left:6px; font-size:12px; background:var(--accent-dark); color:#fff; padding:2px 6px; border-radius:10px; vertical-align:middle; }

/* Layout */
.container{ padding:20px; max-width:100%; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.card{ background:var(--card); border:1px solid #eee; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card img{ width:100%; height:260px; object-fit:cover; background:#f1f1f1; }
.card .info{ padding:12px 12px 8px; }
.card .name{ font-weight:600; margin:0 0 4px; }
.card .price{ color:var(--muted); margin:0 0 12px; }
.card .actions{ display:flex; gap:8px; padding:12px; }
.btn{ flex:1; border:none; cursor:pointer; padding:10px 12px; border-radius:8px; font-weight:600; transition:all 0.2s ease; }
.btn.checkout{ background:var(--accent-dark); color:#fff; }
.btn.buy{ background:#fff; color:var(--accent-dark); border:1px solid var(--accent-dark); }
.btn:active{ transform: translateY(1px); }

/* Checkout page */
.checkout-wrap{ max-width:900px; margin:0 auto; padding:24px; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px; border-bottom:1px solid #eee; text-align:left; }
.table img{ width:80px; height:60px; object-fit:cover; border-radius:6px; }
.qty{ display:flex; align-items:center; gap:8px; }
.qty button{ width:28px; height:28px; border-radius:6px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.total{ display:flex; justify-content:flex-end; gap:16px; padding:16px 0; font-weight:600; }
.note{ color:var(--accent-dark); background:#f7e6e4; padding:10px 12px; border-radius:8px; margin:12px 0; }
.actions-line{ display:flex; gap:12px; justify-content:flex-end; }
.primary{ background:var(--accent-dark); color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; }
.secondary{ background:#fff; color:var(--accent-dark); border:1px solid var(--accent-dark); padding:10px 16px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; }

/* Product detail */
.product-wrap{ 
  max-width:1200px; 
  margin:0 auto; 
  padding:24px; 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:32px; 
  align-items:start;
}
.product-hero{ 
  position:sticky; 
  top:100px; 
}
.product-hero img{ 
  width:100%; 
  max-width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover; 
  border-radius:12px; 
  background:#f1f1f1; 
  display:block;
}
.product-info{ 
  padding:0; 
}
.product-info h2{ 
  margin:0 0 12px; 
  font-size:28px; 
  line-height:1.2;
}
.product-info .price{ 
  color:var(--muted); 
  margin:0 0 16px; 
  font-size:18px; 
  font-weight:600;
}
.chips{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  margin:0 0 24px; 
}
.chip{ 
  background:#f4e4e2; 
  color:var(--accent-dark); 
  border:1px solid #e7d2cf; 
  padding:8px 12px; 
  border-radius:999px; 
  font-size:13px; 
  font-weight:500;
}
.product-actions{ 
  display:flex; 
  gap:12px; 
  margin:0 0 32px;
}
.product-actions .btn{ 
  flex:1; 
  padding:14px 20px; 
  font-size:16px;
  min-height:48px;
}
.section{ 
  margin:24px 0; 
  padding:0;
}
.section h3{ 
  margin:0 0 12px; 
  font-size:18px; 
  color:var(--text);
}
.section p{ 
  color:var(--muted); 
  margin:0 0 8px; 
  line-height:1.6;
}
.section ul{ 
  color:var(--muted); 
  margin:0; 
  padding-left:20px; 
  line-height:1.6;
}
.section li{ 
  margin-bottom:4px; 
}

/* Responsive Design */
@media (max-width: 1024px){
  .product-wrap{ 
    max-width:100%; 
    padding:20px; 
    gap:24px; 
  }
  .product-hero{ 
    position:static; 
  }
}

@media (max-width: 768px){
  .header{ 
    padding:12px 16px; 
    gap:12px; 
  }
  .brand{ 
    font-size:18px; 
  }
  .brand img{ 
    height:36px; 
  }
  .promo{ 
    font-size:12px; 
    padding:4px 6px; 
  }
  
  .container{ 
    padding:16px; 
  }
  .grid{ 
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); 
    gap:16px; 
  }
  
  .product-wrap{ 
    grid-template-columns: 1fr; 
    padding:16px; 
    gap:20px; 
  }
  .product-info h2{ 
    font-size:24px; 
  }
  .product-info .price{ 
    font-size:16px; 
  }
  .product-actions{ 
    flex-direction:column; 
  }
  .product-actions .btn{ 
    flex:none; 
  }
  .section{ 
    margin:20px 0; 
  }
  .section h3{ 
    font-size:16px; 
  }
}

@media (max-width: 480px){
  .header{ 
    padding:10px 12px; 
    gap:8px; 
  }
  .brand{ 
    font-size:16px; 
    gap:8px; 
  }
  .brand img{ 
    height:32px; 
  }
  .promo{ 
    display:none; 
  }
  
  .container{ 
    padding:12px; 
  }
  .grid{ 
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); 
    gap:12px; 
  }
  .card .actions{ 
    flex-direction:column; 
    gap:6px; 
  }
  
  .product-wrap{ 
    padding:12px; 
    gap:16px; 
  }
  .product-info h2{ 
    font-size:20px; 
  }
  .product-info .price{ 
    font-size:15px; 
  }
  .chips{ 
    gap:6px; 
  }
  .chip{ 
    padding:6px 10px; 
    font-size:12px; 
  }
  .product-actions .btn{ 
    padding:12px 16px; 
    font-size:15px; 
  }
  .section{ 
    margin:16px 0; 
  }
  .section h3{ 
    font-size:15px; 
  }
  .section p, .section ul{ 
    font-size:14px; 
  }
  
  .checkout-wrap{ 
    padding:16px 12px; 
  }
  .table{ 
    font-size:14px; 
  }
  .table th, .table td{ 
    padding:8px 4px; 
  }
  .table img{ 
    width:60px; 
    height:45px; 
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape){
  .product-wrap{ 
    grid-template-columns: 1fr 1fr; 
    gap:16px; 
  }
  .product-hero img{ 
    aspect-ratio:4/3; 
  }
}