:root{--bg:#f7f7f5;--card:#fff;--text:#171717;--muted:#6b6b6b;--line:#e8e8e3;--accent:#171717}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.nav{max-width:1200px;margin:auto;padding:16px 20px;display:flex;align-items:center;gap:20px}.logo{font-size:23px;font-weight:800;margin-right:auto}
button,.btn{border:0;border-radius:12px;padding:11px 15px;background:var(--accent);color:#fff;cursor:pointer;font-weight:650;display:inline-block;text-align:center}.light,.nav-btn.light{background:#f0f0ec;color:#222}
.cartbtn{position:relative}.count{position:absolute;top:-7px;right:-7px;background:#e53935;color:#fff;border-radius:20px;font-size:11px;padding:3px 7px}
.hero{max-width:1200px;margin:30px auto 20px;padding:45px 28px;border-radius:24px;background:#e9e9e2;display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:center}.hero h1{font-size:clamp(38px,6vw,68px);line-height:.95;margin:0 0 18px;letter-spacing:-3px}.hero p{font-size:18px;color:#555;max-width:560px}.hero-art{font-size:120px;text-align:center}
.wrap{max-width:1200px;margin:auto;padding:0 20px 50px}.tools{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.search{flex:1;min-width:220px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px}
.categories{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.cat{white-space:nowrap;background:#fff;color:#333;border:1px solid var(--line)}.cat.active{background:#171717;color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product{background:var(--card);border:1px solid var(--line);border-radius:17px;overflow:hidden}.pic{height:190px;background:#efefe9;display:grid;place-items:center;font-size:70px}.pic img{width:100%;height:100%;object-fit:cover}.info{padding:15px}.tag{font-size:12px;color:#777}.name{font-weight:750;margin:5px 0;display:block}.price{font-weight:800;margin:10px 0}.row{display:flex;gap:8px}.row button,.row .btn{flex:1}.add-form{flex:1;display:flex}.add-form button{width:100%}
.panel{position:fixed;right:0;top:0;height:100%;width:min(420px,100%);background:#fff;z-index:30;box-shadow:-10px 0 40px #0002;padding:22px;transform:translateX(105%);transition:.25s;overflow:auto}.panel.open{transform:none}.overlay{display:none;position:fixed;inset:0;background:#0005;z-index:20}.overlay.show{display:block}.panel h2{margin-top:18px}.cartitem{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 0;border-bottom:1px solid var(--line)}.total{font-size:20px;font-weight:800;margin:20px 0}.full{width:100%}
.product-page{padding-top:35px}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:35px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px}.detail-image{background:#efefe9;border-radius:15px;min-height:420px;display:grid;place-items:center}.detail-image img{width:100%;height:100%;max-height:600px;object-fit:contain}.detail-info h1{font-size:42px;letter-spacing:-2px}.description{color:#555;line-height:1.6;margin:20px 0}.detail-info select,.detail-info input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0 15px}
.cart-page-item{grid-template-columns:1fr auto auto;align-items:center}.cart-page-item input{width:70px;padding:10px;border:1px solid var(--line);border-radius:10px}.site-footer{border-top:1px solid var(--line);padding:30px 20px;text-align:center;color:#777}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-art{display:none}.grid{grid-template-columns:repeat(2,1fr)}.product-detail{grid-template-columns:1fr}}@media(max-width:520px){.grid{grid-template-columns:1fr}.nav{padding:12px 14px}.hero{margin:15px 14px;padding:30px 20px}.wrap{padding:0 14px 40px}.logo{font-size:20px}.detail-info h1{font-size:32px}} .product {
  display: flex;
  flex-direction: column;
}

.pic {
  height: 240px;
  flex-shrink: 0;
  overflow: hidden;
}

.info {
  flex: 1;
  background: var(--card);
  position: relative;
  z-index: 1;
}