/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --accent:#111827;
  --card:#f9fafb;
  --max-width:1100px;
  --radius:12px;
  --gap:18px;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body{background:var(--bg);color:var(--accent);line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{border-bottom:1px solid #e6e7e9;background:rgba(255,255,255,0.8);backdrop-filter:saturate(120%) blur(4px)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:18px;text-decoration:none;color:var(--accent)}
.nav a{margin-left:16px;text-decoration:none;color:var(--muted);font-weight:600}
.hero{padding:48px 0;text-align:center}
.hero h1{font-size:28px;margin-bottom:12px}
.hero p{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:#111827;color:#fff;text-decoration:none;font-weight:700}
.btn-outline{background:transparent;color:var(--accent);border:1px solid #e6e7e9;margin-left:8px}
.about{padding:24px 0}
.about ul{margin-top:12px;list-style:disc;padding-left:20px;color:var(--muted)}
.site-footer{border-top:1px solid #e6e7e9;padding:18px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}

/* Shop grid */
.shop-page h2{margin-top:18px}
.muted{color:var(--muted);margin-bottom:10px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.product-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,0.04);display:flex;flex-direction:column}
.product-media{height:160px;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff}
.placeholder{width:100%;height:100%}
.product-body{padding:16px;flex:1;display:flex;flex-direction:column}
.product-body h3{margin-bottom:6px}
.price{font-weight:700;margin-bottom:8px}
.desc{color:var(--muted);font-size:14px;margin-bottom:14px}
.product-actions{margin-top:auto;display:flex;gap:8px}
.btn-mail{background:#fff;color:var(--accent);border:1px solid #e6e7e9;padding:8px 12px;text-decoration:none;border-radius:8px;font-weight:700}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:18px}
.contact-card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.04)}
.how-to{margin-top:20px;color:var(--muted)}

/* Responsive */
@media (max-width:700px){
  .nav{display:none}
  .header-inner{padding:8px 0}
  .hero h1{font-size:22px}
}
.product img {
    width: 150px;       /* all images same width */
    height: auto;       /* maintains aspect ratio */
    display: block;
    margin: 0 auto 10px auto; /* centers the image with margin below */
    border: 1px solid #ddd;   /* optional border */
    border-radius: 8px;       /* rounded corners */
    padding: 5px;             /* small padding */
}