:root{--accent:#f97316;--accent-d:#ea580c;--text:#111827;--muted:#374151;--line:#d1d5db;--bg:#f3f4f6}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;line-height:1.6;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92vw);margin:auto} .section{padding:60px 0}
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.menu{display:flex;gap:16px;align-items:center} .menu a{padding:8px 10px;border-radius:10px;font-weight:700}
.menu a:hover{background:var(--bg)}
.hero{background:radial-gradient(80% 60% at 50% 10%,#fff3e8 0%,#fff 50%,#fff 100%);padding:72px 0 40px}
.grid{display:grid;gap:20px}
.card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.card img.cover{aspect-ratio: 4/3; width:100%; height:auto; object-fit:cover; border-radius:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:800;box-shadow:0 6px 20px rgba(249,115,22,.25)}
.btn.outline{background:#fff;color:var(--accent);border-color:var(--accent)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--accent);font-weight:800}
.title{font-size:clamp(1.6rem,2vw + 1rem,2.6rem);line-height:1.2;margin:8px 0 12px}
.lead{color:var(--muted);max-width:70ch}
.products{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.products{grid-template-columns:1fr 1fr}} @media(max-width:600px){.products{grid-template-columns:1fr}}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#fff6ed;color:var(--accent);font-weight:800;border:1px solid #ffedd5}
footer{padding:28px 0 60px;color:var(--muted)}
.wa{position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 12px 30px rgba(37,211,102,.35);z-index:99}
.thumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.gallery{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gallery img{width:58px;height:58px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.pricepill{display:inline-block;background:#fff7ed;color:var(--accent);border:1px solid #fed7aa;border-radius:999px;padding:4px 8px;font-weight:800;margin-right:6px}
.catgrid{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.catgrid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.catgrid{grid-template-columns:1fr}}
.longform{color:var(--muted);max-width:75ch}
.longform p{margin:14px 0}
details>summary{cursor:pointer}
.brand img{width:28px;height:28px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.contact-block{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-item{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.contact-ico{font-size:18px}

/* === Mobile Navigation (injected) === */
.hamburger{display:none;background:none;border:0;padding:8px;cursor:pointer;border-radius:10px}
.hamburger:focus{outline:2px solid var(--accent); outline-offset:2px}
.hamburger .bar{display:block;width:24px;height:2px;margin:5px 0;background:var(--text)}
.mobile-overlay{display:none}
.mobile-drawer{display:none}
@media (max-width: 768px){
  .menu{display:none !important}
  .hamburger{display:inline-flex}
  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-drawer{position:fixed;top:0;right:-280px;width:260px;height:100%;background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.1);padding:20px;display:flex;flex-direction:column;gap:12px;transition:right .25s;overflow:auto}
  .mobile-open .mobile-overlay{opacity:1;pointer-events:auto;display:block}
  .mobile-open .mobile-drawer{right:0;display:flex}
  .mobile-link{padding:12px 14px;border-radius:10px;font-weight:700;color:var(--text);text-decoration:none;border:1px solid var(--line)}
  .mobile-link:hover{background:var(--bg)}
}