/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1f2937; }
img { max-width: 100%; display: block; }

:root{
  --brand:#254e3e;
  --accent:#4caf50;
  --bg:#f7f5ef;
  --card:#ffffff;
  --muted:#6b7280;
  --ring:#e5e7eb;
}

.container{ width:min(1100px, 92%); margin-inline:auto; }
.narrow{ width:min(800px, 92%); margin-inline:auto; }

.site-header{
  position: sticky; top:0; z-index:10;
  background: #fff; border-bottom:1px solid var(--ring);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-icon{ font-size:22px; }
.brand-name{ text-decoration:none; color:var(--brand); font-size:20px; }

.nav{ display:flex; gap:16px; }
.nav-link{ color:#374151; text-decoration:none; padding:6px 8px; border-radius:8px; }
.nav-link:hover, .nav-link.active{ background:#f3f4f6; }

.actions{ display:flex; align-items:center; gap:12px; }
.search{ padding:8px 10px; border:1px solid var(--ring); border-radius:10px; min-width:220px; }
.cart{ position:relative; padding:6px 8px; border-radius:10px; background:#f3f4f6; display:flex; align-items:center; gap:8px; }
.cart-count{ position:absolute; top:-6px; right:-6px; background:var(--accent); color:#fff; border-radius:999px; font-size:12px; padding:2px 6px; }

.hero{ 
  background: linear-gradient(135deg, #f0f4f0 0%, #e8ede8 50%, #dfe7df 100%);
  border-bottom:1px solid var(--ring); 
}
.hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:24px; align-items:center; padding:60px 0; }
.hero-text h1{ margin:0 0 12px; font-size:52px; color:#1f4d3c; letter-spacing:0px; font-weight:800; line-height:1.1; }
.hero-text p{ margin:0 0 24px; color:#4a5568; font-size:19px; line-height:1.6; }
.btn{ display:inline-block; background:#6bb174; color:#fff; padding:14px 28px; border-radius:8px; text-decoration:none; font-weight:600; box-shadow:0 2px 8px rgba(107,177,116,0.3); }
.btn:hover{ background:#5ca365; transform:translateY(-1px); box-shadow:0 4px 12px rgba(107,177,116,0.4); }
.hero-art .cans{ width:100%; height:300px; background:
  radial-gradient(circle at 35% 45%, rgba(180,190,200,0.8) 0 32%, transparent 33%),
  radial-gradient(circle at 68% 62%, rgba(200,180,130,0.85) 0 30%, transparent 31%),
  linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius:16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.section-title{ margin:34px 0 6px; font-size:28px; color:#23423b; }
.section-subtitle{ margin:0 0 24px; color:var(--muted); }

.catalog{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .1s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.06); }
.card-img{ aspect-ratio: 1 / 1; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.card-body{ padding:10px; display:grid; gap:6px; }
.card-title{ font-weight:600; font-size:14px; }
.card-price{ color:#065f46; font-weight:700; font-size:15px; }
.qty{ display:flex; align-items:center; gap:10px; }
.qty button{ width:32px; height:32px; border:1px solid var(--ring); border-radius:10px; background:#fff; }
.add{ width:100%; border:1px solid var(--ring); background:#fff; padding:10px; border-radius:10px; cursor:pointer; }
.add:hover{ background:#f3f4f6; }

.sentinel{ display:flex; align-items:center; justify-content:center; gap:10px; padding:24px 0; color:var(--muted); }
.spinner{ width:16px; height:16px; border:3px solid #e5e7eb; border-left-color:#6bb174; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg);} }

.about,.contact{ background:#fff; border-top:1px solid var(--ring); padding:28px 0; }

.site-footer{ background:#111827; color:#d1d5db; }
.footer-inner{ padding:18px 0; }

@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; }
  .search{ min-width: 140px; }
}