:root{--ink:#0f1722;--paper:#f4f5f8;--card:#fff;--line:#e3e6ec;--mute:#667085;--acc:#3358ff;--tag:#e5384f}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Be Vietnam Pro",system-ui,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;margin-right:auto}
.logo img{height:150px;width:auto}
.hero{background-size:cover;background-position:center}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.search{flex:1 1 220px;max-width:320px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px}
.hero{background:radial-gradient(900px 400px at 85% 20%,#3a3fd6aa,transparent),linear-gradient(120deg,#0b1020,#151a33);color:#fff;padding:84px 0 92px}
.hero h1{font-size:clamp(36px,7vw,68px);line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
.hero p{max-width:520px;color:#c9cfe6;margin:0 0 28px;font-size:18px}
section{padding:44px 0}
h2{font-size:26px;margin:0 0 20px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 12px;text-align:center;cursor:pointer;font:inherit;color:inherit}
.cat b{display:block}.cat small{color:var(--mute)}
.cat[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tools select{padding:9px 12px;border-radius:10px;border:1px solid var(--line);font:inherit;font-size:14px;background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card:hover{border-color:var(--acc)}
.ph{position:relative;aspect-ratio:4/3;background:#e9ecf3 center/cover}
.tag{position:absolute;top:10px;left:10px;background:var(--tag);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.info small{color:var(--mute)}.info h3{margin:0;font-size:15px;line-height:1.35}
.price{margin-top:auto;padding-top:8px;font-weight:800;font-size:18px}
.empty{color:var(--mute);padding:30px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.box ul{padding-left:20px;margin:8px 0 0}
.row{display:flex;gap:8px;margin:12px 0}.row input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
footer{background:var(--ink);color:#c9cfe6;padding:34px 0;margin-top:20px}
footer a{color:#fff;text-decoration:underline}
.float{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:30}
.float a{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 4px 14px #0002}
.det{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:28px 0}
.det .main{aspect-ratio:4/3;border-radius:12px;background:#e9ecf3 center/cover}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs button{width:72px;height:56px;border:2px solid transparent;border-radius:8px;background:#e9ecf3 center/cover;cursor:pointer}
.thumbs button[aria-current=true]{border-color:var(--acc)}
.det h1{font-size:28px;line-height:1.2;margin:8px 0}
.det .price{font-size:30px}
table{border-collapse:collapse;width:100%;margin:16px 0}td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}td:first-child{color:var(--mute);width:38%}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:760px){.two,.det{grid-template-columns:1fr}.hero{padding:56px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}