:root{--p:#5b21b6;--p2:#7c3aed;--ink:#111827;--mut:#6b7280;--bg:#f6f5fb;--line:#e5e7eb;--g:#16a34a}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}.w{max-width:1100px;margin:0 auto;padding:0 12px}
header{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;gap:10px;padding:10px 0}.logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:20px;color:var(--p)}
.logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--p),#c026d3);color:#fff;display:grid;place-items:center;font-style:normal;font-size:17px}
.search{flex:1;display:flex}.search input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px 0 0 10px;font-size:14px;outline:none;min-width:0}
.search button{background:var(--p);color:#fff;border:0;padding:0 14px;border-radius:0 10px 10px 0;font-size:15px}
nav.cats{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}nav.cats::-webkit-scrollbar{display:none}
nav.cats a{white-space:nowrap;font-size:13px;padding:7px 12px;border-radius:99px;background:#f1effa;color:var(--p);font-weight:600}nav.cats a.on{background:var(--p);color:#fff}
.hero{background:linear-gradient(120deg,#4c1d95,#7c3aed 60%,#c026d3);color:#fff;border-radius:18px;margin:14px 0;padding:26px 20px}
.hero h1{font-size:26px;line-height:1.2}.hero p{margin:8px 0 16px;opacity:.9;font-size:14px}
.btn{display:inline-block;background:#fff;color:var(--p);font-weight:700;padding:11px 20px;border-radius:10px;font-size:14px}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.perks div{background:#fff;border-radius:12px;padding:10px 6px;text-align:center;font-size:12px;font-weight:600;color:var(--mut)}.perks b{display:block;font-size:20px;margin-bottom:2px}

.sec{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 8px}.sec h2{font-size:18px}.sec a{font-size:13px;color:var(--p2);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.card{background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #efeef6}
.img{aspect-ratio:1/1;display:grid;place-items:center;font-size:62px;position:relative;background-size:cover;background-position:center}
.img.has{font-size:0}.tag{position:absolute;top:8px;left:8px;background:var(--g);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px}
.cb{padding:9px 10px 11px;display:flex;flex-direction:column;gap:4px;flex:1}.cn{font-size:13px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.pr b{font-size:17px}.pr s{color:var(--mut);font-size:12px}.pr em{color:var(--g);font-size:12px;font-style:normal;font-weight:700}
.shop{margin-top:auto;background:var(--p);color:#fff;text-align:center;padding:9px;border-radius:9px;font-weight:700;font-size:13px}
.crumb{font-size:12px;color:var(--mut);margin:12px 0}.pd{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:14px}.pd .img{aspect-ratio:4/3;font-size:110px}
.pd .in{padding:14px}.pd h1{font-size:19px;line-height:1.3}.pd .pr b{font-size:26px}.pd ul{margin:12px 0 0 18px;font-size:14px;line-height:1.7;color:#374151}.pd p.d{margin-top:10px;font-size:14px;color:#374151;line-height:1.5}
.note{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.5}.buy{display:block;text-align:center;background:var(--p);color:#fff;font-weight:800;padding:14px;border-radius:12px;margin-top:14px;font-size:16px}
.empty{background:#fff;border-radius:12px;padding:30px;text-align:center;color:var(--mut)}
footer{background:#1f1147;color:#c4b5fd;margin-top:30px;padding:24px 0;font-size:13px;line-height:1.7}footer a{color:#fff;margin-right:14px}footer .logo{color:#fff;margin-bottom:6px}
.page{background:#fff;border-radius:14px;padding:18px;margin:14px 0;line-height:1.7;font-size:14px}.page h1{font-size:22px;margin-bottom:8px}.page h2{font-size:16px;margin:14px 0 4px}
@media(min-width:700px){.grid{grid-template-columns:repeat(4,1fr)}.hero{padding:44px 40px}.hero h1{font-size:38px}.pd{display:grid;grid-template-columns:1fr 1fr}.pd .img{aspect-ratio:1/1}}

.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero{padding:18px 18px;margin:12px 0}.hero h1{font-size:21px}.hero p{margin:6px 0 12px}.btn{padding:9px 16px}@media(min-width:700px){.hero{padding:28px 32px}.hero h1{font-size:30px}}

.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;background:#fff;border-radius:14px;padding:12px 6px;margin:6px 0}
.ct{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ct i{width:58px;height:58px;border-radius:50%;background-size:cover;background-position:center;background-color:#ddd;border:2px solid #ede9fe}
.ct span{font-size:11.5px;font-weight:600;line-height:1.2;color:#374151;padding:0 2px}
.sec{margin:16px 0 8px}.sec h2{font-size:16px}
.grid{grid-template-columns:repeat(3,1fr);gap:8px}
.card{border-radius:10px}.img{font-size:36px;aspect-ratio:1/1}
.tag{top:5px;left:5px;font-size:9.5px;padding:2px 5px;border-radius:4px}
.cb{padding:6px 7px 8px;gap:2px}.cn{font-size:11.5px;line-height:1.25;min-height:29px;font-weight:500;color:#374151}
.pr{gap:4px}.pr b{font-size:13.5px}.pr s{font-size:10.5px}.pr em{display:none}
.pd .pr em{display:inline}.pd .pr b{font-size:26px}.pd .pr s{font-size:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(6,1fr)}.cgrid{grid-template-columns:repeat(7,1fr)}}