:root{
  --bg:#fbf7ef;
  --paper:#ffffff;
  --ink:#1f2a2e;
  --muted:#5d6a70;
  --line:#eadfce;
  --sand:#e7cda0;
  --clay:#d9b27b;
  --leaf:#5c7a6b;
  --shadow:0 18px 38px rgba(35,28,18,.12);
  --radius:12px;
  --pad:16px;
  --max:1160px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(231,205,160,.25), transparent 60%),
    radial-gradient(760px 520px at 92% 10%, rgba(92,122,107,.12), transparent 55%),
    var(--bg);
  line-height:1.75;
}
a{color:var(--leaf); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.wrap{width:min(var(--max), 100% - 32px); margin:0 auto}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.lead{white-space:pre-wrap}

/* header */
.top{position:sticky; top:0; z-index:10; background:rgba(251,247,239,.78); backdrop-filter: blur(14px); border-bottom:1px solid var(--line)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.left{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px}
.logoMark{width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg,var(--sand),var(--clay)); box-shadow:0 10px 18px rgba(217,178,123,.26)}
.logoTxt{font-weight:900; letter-spacing:.02em; color:var(--ink)}
.tag{font-size:.86rem; color:var(--muted)}
.right{display:flex; align-items:center; gap:10px}
.mini{padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.55); color:var(--muted)}
#nav-cart-count{margin-left:6px; padding:2px 8px; border-radius:999px; background:rgba(231,205,160,.35); border:1px solid rgba(231,205,160,.6); color:var(--ink)}
.navBtn{display:none; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.65); padding:9px 12px; cursor:pointer}
.nav{display:flex; gap:10px; padding:0 0 14px}
.nav a{padding:9px 12px; border-radius:999px; color:var(--muted); border:1px solid transparent}
.nav a:hover{background:rgba(231,205,160,.22); border-color:rgba(231,205,160,.55); color:var(--ink)}

/* hero */
.hero{
  padding:26px 0 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.0));
}
.heroInner{
  background:rgba(255,255,255,.70);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 10px);
  box-shadow:var(--shadow);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.heroInner:before{
  content:"";
  position:absolute; inset:-40px -60px auto auto;
  width:220px; height:220px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(92,122,107,.22), transparent 60%);
}
.hero h1{margin:0 0 10px; font-size:clamp(2rem, 3.2vw, 2.6rem); line-height:1.15}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:999px; border:1px solid transparent; font-weight:800; letter-spacing:.02em; cursor:pointer}
.btn.solid{background:linear-gradient(135deg,var(--sand),var(--clay)); color:#2a2015; box-shadow:0 14px 26px rgba(217,178,123,.22)}
.btn.ghost{background:rgba(255,255,255,.65); border-color:var(--line); color:var(--ink)}

/* blocks */
.block{padding:14px 0 22px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tile{background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad)}
.tile h2{margin:0 0 6px; font-size:1.15rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center}
.splitImg img{border-radius:calc(var(--radius) + 8px); border:1px solid rgba(231,205,160,.7); box-shadow:var(--shadow)}
.splitTxt{background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:calc(var(--radius) + 8px); padding:var(--pad)}

/* headings */
.head{padding:18px 0 6px}
.narrow{max-width:900px}

/* catalog */
.gridCatalog{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-bottom:28px}
.card{background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:calc(var(--radius) + 10px); padding:12px; display:flex; flex-direction:column; gap:10px}
.card img{height:170px; object-fit:cover; border-radius:14px; border:1px solid rgba(231,205,160,.55)}
.card h3{margin:0}
.card p{margin:0; color:var(--muted); font-size:.93rem}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-weight:900}

/* product */
.product{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; background:rgba(255,255,255,.78); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 10px); padding:14px; box-shadow:var(--shadow)}
.product img{border-radius:14px; border:1px solid rgba(231,205,160,.55)}
.pdesc{color:var(--muted); margin:0 0 12px}

/* cart */
.cartLayout{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; padding-bottom:28px}
.panel{background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:calc(var(--radius) + 10px); padding:14px; box-shadow:var(--shadow)}
.cartItem{display:grid; grid-template-columns:1.4fr .7fr .7fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(217,178,123,.35)}
.cartItem:last-child{border-bottom:none}
.qty{width:86px}
.remove{border:1px solid rgba(231,205,160,.7); background:transparent; border-radius:999px; padding:7px 10px; color:#b13b5b; font-weight:900; cursor:pointer}
.totalRow{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:1.05rem}

/* forms */
.form{display:grid; gap:10px; margin-top:10px}
label{display:grid; gap:6px; color:var(--muted); font-size:.92rem}
input,textarea{border:1px solid var(--line); border-radius:14px; padding:10px 12px; font:inherit; background:rgba(255,255,255,.92); color:var(--ink)}

/* contact */
.contact2{display:grid; grid-template-columns:1fr 1fr; gap:16px}

/* footer */
.foot{border-top:1px solid var(--line); background:rgba(255,255,255,.55); padding:18px 0 12px}
.footGrid{display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:16px}
.foot h4{margin:0 0 10px}
.foot p{margin:3px 0; color:var(--muted); font-size:.92rem}
.links{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.links a{padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.65); color:var(--muted)}
.footBottom{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem}
.bullets{padding-left:18px}
.bullets li{margin-bottom:6px; color:var(--muted)}

/* responsive */
@media (max-width: 1020px){
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .gridCatalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartLayout{grid-template-columns:1fr}
  .footGrid{grid-template-columns:1fr}
  .contact2{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .navBtn{display:inline-flex}
  .nav{display:none; flex-direction:column; padding:10px 0 14px}
  .nav.open{display:flex}
  .gridCatalog{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .cartItem{grid-template-columns:1fr 1fr; grid-auto-rows:auto}
}