:root{
  --orange:#f59e0b; /* amber-500 */
  --orange2:#fb923c; /* orange-400 */
  --text:#111827;
  --muted:#6b7280;
  --bg:#fff7ed;  /* orange-50 */
  --card:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--orange);text-decoration:none}
.container{width:min(1100px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{font-weight:800;font-size:1.2rem;background:linear-gradient(90deg,var(--orange),var(--orange2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:.9rem;align-items:center}
.nav-links a{color:#374151}
.hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(251,146,60,.15));border-bottom:1px solid var(--border)}
.hero-inner{padding:3.2rem 0 2.2rem 0}
.hero h1{font-size:2.2rem;margin:.2rem 0}
.hero p{color:var(--muted);margin:.4rem 0 1.2rem 0}
.button{background:var(--orange);color:white;border:none;border-radius:.7rem;padding:.55rem 1rem;font-weight:600;cursor:pointer;transition:.2s}
.button:hover{filter:brightness(.95)}
.button.large{padding:.8rem 1.2rem;font-size:1rem}
.button.small{padding:.35rem .7rem;font-size:.9rem}
.button.full{width:100%;height:2.8rem}
.shop{padding:2rem 0}
.shop h2,.faq h2,.contact h2{font-size:1.6rem;margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 2px 8px rgba(0,0,0,.03);padding:1rem;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:4/3;border-radius:.8rem;background:linear-gradient(135deg,#fff1e6,#ffe6cc);display:flex;align-items:center;justify-content:center;font-size:2rem}
.card h3{margin:.6rem 0 .2rem 0;font-size:1rem}
.meta{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.85rem}
.price-row{margin-top:.6rem;display:flex;align-items:center;justify-content:space-between}
.price{font-weight:800}
.footer{padding:2rem 0;border-top:1px solid var(--border);color:var(--muted);margin-top:2rem;text-align:center}
/* Drawer */
.drawer{position:fixed;inset:0;display:none}
.drawer.open{display:block}
.drawer-mask{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.drawer-panel{position:absolute;top:0;right:0;width:min(420px,92%);height:100%;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}
.drawer-body{padding:1rem;overflow:auto;flex:1;display:flex;flex-direction:column;gap:1rem}
.cart-item{display:flex;gap:.8rem}
.qty{display:flex;align-items:center;gap:.4rem}
.qty button{width:28px;height:28px;border:1px solid var(--border);border-radius:.5rem;background:#fff;cursor:pointer}
.drawer-foot{padding:1rem;border-top:1px solid var(--border)}
.total{font-weight:800;margin-bottom:.8rem}
.icon-btn{background:#fff;border:1px solid var(--border);border-radius:.5rem;padding:.3rem .5rem;cursor:pointer}
details{background:#fff;border:1px solid var(--border);border-radius:.7rem;padding:.7rem .9rem;margin:.6rem 0}
summary{cursor:pointer;font-weight:600}