@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root{--bg:#fffaf7;--cream:#f7eee8;--pink:#f3dadd;--rose:#d58f9d;--dark:#654b52;--line:#ead9d4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#514145;font-family:Vazirmatn,sans-serif}header{height:76px;padding:0 7%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#fffaf7e8;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.logo{display:flex;align-items:center;gap:9px}.logo>span{width:39px;height:39px;border-radius:50%;background:var(--pink);display:grid;place-items:center;color:var(--dark);font-size:21px}.logo b{display:block;font:600 25px "Playfair Display",serif;color:var(--dark)}.logo small{display:block;font-size:9px;letter-spacing:4px;color:#9b7a80}.bag{border:1px solid var(--line);background:white;border-radius:22px;padding:9px 15px;color:var(--dark);font-family:inherit}.bag i{font-style:normal;margin-right:5px}.hero{max-width:1160px;margin:28px auto;padding:55px 7%;border-radius:32px;background:linear-gradient(135deg,#fff8f5,#f5e0e1);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px}.hero small{letter-spacing:4px;color:#a57c83}.hero h1{font-size:40px;line-height:1.6;font-weight:400;color:var(--dark);margin:8px 0}.hero h1 strong{font-weight:700}.hero p{line-height:2;color:#786167;max-width:600px}.hero a{display:inline-block;margin-top:10px;background:var(--dark);color:white;text-decoration:none;padding:11px 22px;border-radius:24px}.hero-art{height:270px;border-radius:28px;background:#f0d4d8;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dark)}.flower{font-size:65px}.hero-art b{font:600 39px "Playfair Display",serif}.hero-art span{font-size:10px;letter-spacing:4px;margin-top:7px}nav{max-width:1160px;margin:0 auto 22px;padding:0 7%;display:flex;gap:9px}nav button{background:#fff;border:1px solid var(--line);border-radius:22px;padding:9px 18px;color:#755e63;font-family:inherit}nav button.on{background:var(--pink);color:var(--dark);font-weight:600}.grid{max-width:1160px;margin:auto;padding:0 7% 70px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}article{background:#fff;border:1px solid var(--line);border-radius:23px;overflow:hidden}article img{width:100%;aspect-ratio:1;display:block;object-fit:cover}.info{padding:14px}.info>small{font-size:9px;color:#a4777f;background:#fbefef;border-radius:10px;padding:4px 7px}.info h3{font-size:14px;margin:10px 0 14px;color:#574449}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.row b{font-size:11px;color:var(--dark)}.row button{border:0;background:#f3e0e1;color:var(--dark);padding:7px 10px;border-radius:15px;font-family:inherit;font-size:10px}.drawer{position:fixed;inset:0;background:#4c343733;z-index:20;opacity:0;visibility:hidden;transition:.2s}.drawer.show{opacity:1;visibility:visible}.drawer-box{position:absolute;right:0;top:0;width:min(400px,92vw);height:100%;background:#fffaf7;padding:24px}.x{border:0;background:transparent;font-size:28px;color:var(--dark)}.drawer h2{color:var(--dark)}.item{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}.item button{border:0;background:#f8e6e6;border-radius:14px;padding:5px 10px;color:#8b626b}.total{position:absolute;bottom:85px;left:24px;right:24px;display:flex;justify-content:space-between;color:var(--dark)}.checkout{position:absolute;bottom:25px;left:24px;right:24px;width:calc(100% - 48px);border:0;background:var(--dark);color:#fff;padding:12px;border-radius:25px;font-family:inherit}.empty{text-align:center;color:#927d82;padding:35px}footer{border-top:1px solid var(--line);padding:28px 7%;display:flex;justify-content:space-between;color:#927b80;font-size:11px}footer b{font:600 22px "Playfair Display",serif;color:var(--dark)}
@media(max-width:850px){.hero{grid-template-columns:1fr;margin:18px 4%;padding:38px 7%}.hero h1{font-size:31px}.hero-art{height:200px}.grid{grid-template-columns:repeat(2,1fr);padding:0 4% 55px}nav{padding:0 4%}.header{padding:0 4%}}@media(max-width:480px){.grid{gap:10px}.info{padding:11px}.row{flex-direction:column;align-items:stretch}.row button{width:100%}}
