:root{
  --bg:#f8f6f2; --card:#ffffff; --accent:#e07a5f; --muted:#6b6b6b; --container:1100px;
  --radius:12px; --shadow: 0 6px 18px rgba(10,10,10,0.08);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif; margin:0; background:var(--bg); color:#222}
.container{max-width:var(--container); margin:0 auto; padding:1.25rem}
.site-header{background:#fff; position:sticky; top:0; z-index:40; box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem}
.brand{margin:0; font-weight:700}
.nav a{margin-left:1rem; color:#333; text-decoration:none}
.nav a:hover{color:var(--accent)}

.instagram-section{padding:1.25rem 0; background:linear-gradient(180deg,#fff, #fbfafa)}
.ig-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.ig-card{background:#eee; height:140px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#777}
.ig-note{font-size:0.9rem; color:var(--muted); margin-top:8px}

.hero{padding:3rem 0;}
.hero-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hero-text h2{font-size:1.6rem; margin:0 0 0.5rem}
.hero-actions .btn{margin-right:0.5rem}

.about, .products, .contact{padding:2rem 0}

.product-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem}
.product-card{background:var(--card); border-radius:10px; padding:0.75rem; box-shadow:var(--shadow); text-align:center}
.product-image{height:160px; background-size:cover; background-position:center; border-radius:8px}
.price{color:var(--accent); font-weight:600}

.btn{display:inline-block; background:var(--accent); color:#fff; padding:0.6rem 0.9rem; border-radius:8px; text-decoration:none; border:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn.small{padding:0.4rem 0.6rem; font-size:0.9rem}

.contact form .row{display:flex; gap:0.5rem; margin-bottom:0.5rem}
.contact input, .contact textarea{width:100%; padding:0.6rem; border-radius:8px; border:1px solid #ddd}

.site-footer{padding:1rem 0; text-align:center; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); padding:1rem; opacity:0; pointer-events:none; transition:all 0.15s}
.modal[aria-hidden="false"]{opacity:1; pointer-events:auto}
.modal-content{background:#fff; padding:1rem; border-radius:12px; max-width:720px; width:100%; box-shadow:var(--shadow)}
.modal-close{float:right; background:transparent; border:none; font-size:1.6rem; cursor:pointer}

@media(max-width:800px){
  .hero-inner{flex-direction:column; text-align:center}
}