:root{
  --bg:#fff;
  --muted:#666;
  --accent:#e86b5a;
  --accent-dark:#d25546;
  --card:#faf9f8;
  --max-width:1100px;
  --radius:12px;
  --shadow: 0 6px 18px rgba(12,12,12,0.08);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  padding: 0 8px;
}

a, a:visited, a:active {
  color: var(--accent);
  transition: 0.3s ease;
  text-decoration: none;
  padding: 0;
}
a:hover, nav a:hover, a:hover h2 {
  color: #fff;
  background-color: var(--accent-dark);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--accent-dark);
}


.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:60; padding-top: 20px; padding-bottom: 2px; overflow-y: hidden;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height: 100px; flex-wrap: nowrap;}
.logo img{height:180px}
.nav a{margin:0 12px;color:var(--muted);text-decoration:none}
.header-actions{display:flex;align-items:center; gap: 16px;}
.cart-btn{background:none;border:1px solid transparent;padding:8px 12px;border-radius:8px;cursor:pointer}
.cart-btn:hover{background:#f6f6f6}
.header-icon { width:  24px;  height: 24px;}

.contact-info, .about-content { display: grid; grid-template-columns: auto auto;  }
.contact-info *, .about-content * { grid-column: 1;}
.contact-info h2, .about-content h2 { grid-column: 1;}
.portrait {
  grid-column: 2;
  grid-row: 1 / 5;
  max-width: 100%;
}

@media (max-width:900px) {
  .header-inner {
  margin: 0;
  padding: 0;}
  .about-content, .contact-info {
    grid-template-columns: 1fr;
  }
  .portrait {
    grid-column: 1;
    grid-row: auto;
  }
}
/* Hero */
.hero{padding:44px 0}
.hero-inner{display:flex;gap:28px;align-items:center}
.hero-copy{flex:1}
.hero-copy h1{font-size:34px;margin:0 0 8px}
.hero-copy p{margin:0 0 16px;color:var(--muted)}
.btn{display:inline-block;background-color:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:none;cursor:pointer}
.btn:hover{background:var(--accent-dark)}

.hero-image img{width:80%;border-radius:18px;box-shadow:var(--shadow); margin: auto;}

/* Products */
.products{padding:36px 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.product-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product-card img{width:100%;height:300px;object-fit:cover;display:block}
.product-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.product-title{margin:0;font-size:16px}
.product-desc{margin:0;color:var(--muted);font-size:13px}
.product-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.price{font-weight:700}

/* Sections */
.section{padding:28px 0;border-top:1px solid #f2f2f2}

/* Contact form */
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #e8e8e8}

/* Cart drawer */
.cart-drawer{
  position:fixed;
  right:24px;
  top:80px;
  width:340px;
  max-height:70vh;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(12,12,12,0.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(-12px) scale(.995);
  transition:transform .18s ease,opacity .18s ease;
  opacity:0;
  pointer-events:none;
  z-index:120;
}
.cart-drawer[aria-hidden="false"]{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f2f2f2}
.cart-items{padding:12px 16px;overflow:auto;flex:1;min-height:80px}
.cart-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #f5f5f5}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.item-info{flex:1}
.item-title{margin:0;font-size:14px}
.item-qty{display:flex;gap:6px;align-items:center;margin-top:6px}
.qty-btn{border-radius:6px;border:1px solid #e7e7e7;padding:6px 8px;background:#fff;cursor:pointer}
.cart-footer{padding:12px 16px;border-top:1px solid #f2f2f2}
.totals{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cart-actions{display:flex;gap:8px;justify-content:space-between}
.ghost{background:#fff;border:1px solid #ddd;color:#333}
footer {
  width: 70%;
  margin: auto;
  display: flex;
  justify-content: space-between; 
  padding-bottom: 16px;
}
@media screen and (max-width: 900px) {
  footer {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
}
.addresses {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
main img {
  max-width: 100%;
}
/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(10,10,10,0.32);z-index:110}

/* Responsive */
@media (max-width:720px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .cart-drawer{right:12px;left:12px;top:auto;bottom:12px;width:auto;max-height:60vh}
}