:root{--g:#173d35;--cream:#f8f3e9;--ink:#253630;--serif:"DM Serif Display",serif;--sans:Manrope,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fbfaf6;font-family:var(--sans)}a{color:inherit;text-decoration:none}.demo{height:30px;background:var(--g);color:#d8e4df;display:grid;place-items:center;font-size:8px}.demo a{color:#cde37c;text-decoration:underline}header{height:80px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;background:#fbfaf6;border-bottom:1px solid #e6e4dd}.logo{font:25px var(--serif);display:grid;line-height:.8}.logo small{font:6px var(--sans);letter-spacing:.2em;margin-top:9px}header nav{display:flex;gap:28px;font-size:9px;font-weight:800}header button{border:0;background:transparent;font:800 9px var(--sans);cursor:pointer}header button b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--g);color:white;margin-left:7px}.hero{min-height:540px;padding:90px 9vw;color:white;background:linear-gradient(90deg,#173d35ed 8%,#173d3575 60%,transparent),radial-gradient(circle at 82% 35%,#c79a78,#708b78 62%,#506b5f)}.hero>p,.title p,.about>p{font-size:8px;font-weight:800;letter-spacing:.2em}.hero h1{font:58px/1.03 var(--serif);margin:18px 0}.hero em,.about em{color:#e5bd92;font-weight:400}.hero span{display:block;max-width:430px;font-size:11px;color:#d8e4df}.hero a{display:inline-block;margin-top:28px;font-size:9px;font-weight:800;border-bottom:1px solid #d8e4df;padding-bottom:5px}.catalog{padding:85px 7vw}.title{display:flex;align-items:end;justify-content:space-between}.title h2,.about h2{font:42px var(--serif);margin:5px 0}.title label{border-bottom:1px solid #9aa7a2;padding:8px;font-size:10px}.title input{border:0;background:transparent;outline:0;font:9px var(--sans)}.cats{display:flex;gap:8px;margin:30px 0}.cats button{border:1px solid #d4d9d3;background:white;border-radius:18px;padding:7px 14px;font:700 8px var(--sans);cursor:pointer}.cats .active{background:var(--g);color:white}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product .image{height:245px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#e9ceb0,#91a58e)}.product:nth-child(2n) .image{background:linear-gradient(145deg,#dbe6c9,#be9270)}.product .image:after{content:'✦';font-size:55px;color:#ffffff55}.product h3{font:19px var(--serif);margin:13px 0 2px}.product>p{font-size:8px;color:#75817d}.product div:last-child{display:flex;justify-content:space-between;align-items:center}.product b{font-size:10px}.product button{border:0;width:30px;height:30px;border-radius:50%;background:var(--g);color:white;cursor:pointer}.about{padding:100px 9vw;text-align:center;background:var(--g);color:white}.about span{font-size:10px;color:#b6c8c2}.about h2{font-size:45px}aside{position:fixed;right:-430px;top:0;width:min(430px,100%);height:100vh;background:white;z-index:20;padding:30px;display:flex;flex-direction:column;transition:.3s}aside.open{right:0}.drawer-head{display:flex;justify-content:space-between;border-bottom:1px solid #e1e5e0}.drawer-head h2{font:29px var(--serif);margin:5px 0 18px}.drawer-head small{font-size:7px}.drawer-head button{border:0;background:transparent;font-size:27px}.bag-items{flex:1;overflow:auto}.bag-item{display:grid;grid-template-columns:50px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid #edf0ec}.bag-item i{background:linear-gradient(145deg,#e9ceb0,#91a58e);border-radius:6px}.bag-item h4{font:16px var(--serif);margin:0}.bag-item small{font-size:8px}.bag-item button{border:0;background:transparent}.drawer-foot{border-top:1px solid #e1e5e0;padding-top:17px}.drawer-foot>div{display:flex;justify-content:space-between}.drawer-foot>button{width:100%;border:0;border-radius:7px;background:var(--g);color:white;padding:14px;margin:17px 0 7px;font-weight:800}.drawer-foot small{display:block;text-align:center;font-size:7px}#overlay{position:fixed;inset:0;background:#102f2980;z-index:15;opacity:0;visibility:hidden;transition:.3s}#overlay.open{opacity:1;visibility:visible}#toast{position:fixed;left:50%;bottom:-50px;transform:translateX(-50%);background:var(--g);color:white;border-radius:7px;padding:11px 17px;font-size:8px;transition:.3s;z-index:30}#toast.show{bottom:25px}footer{padding:40px 7vw;background:#0d2d27;color:white;display:flex;justify-content:space-between;align-items:center;font-size:8px}footer b{font:21px var(--serif)}footer a{color:#cde37c}@media(max-width:800px){header nav{display:none}.grid{grid-template-columns:1fr 1fr}.title{align-items:start;flex-direction:column}.title label{margin-top:14px}.product .image{height:180px}.hero h1{font-size:44px}footer{align-items:flex-start;flex-direction:column;gap:10px}}@media(max-width:450px){.catalog{padding:65px 20px}.grid{gap:12px}.product .image{height:145px}.hero{padding:70px 24px}.hero h1{font-size:39px}.title h2{font-size:34px}}