:root{--or:#F26A1B;--or-d:#C94F0A;--tint:#FFF3EA;--ink:#2B2320;--mut:#7A6D66;--line:#EADFD7;--blue:#6EC1F0;--blue-d:#3CA4DC}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 Jost,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.2;margin:0 0 .5em}a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue-d);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5}
.bar{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.logo{font:700 26px Fraunces,Georgia,serif;color:var(--or)}.logo small{display:block;font:400 11px Jost,sans-serif;color:var(--mut)}
nav{display:flex;gap:18px;flex:1}nav a:hover{color:var(--or)}
.search{display:flex}.search input{border:1px solid var(--line);border-radius:8px 0 0 8px;padding:8px 12px;width:180px;font:inherit}
.search button{border:0;background:var(--or);color:#fff;padding:0 14px;border-radius:0 8px 8px 0;cursor:pointer}
.icons a{margin-left:14px;font-weight:500}.badge{background:var(--or);color:#fff;border-radius:99px;padding:0 7px;font-size:13px}
.hero{background:linear-gradient(120deg,var(--tint),#fff);padding:72px 0}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,58px)}.hero p{color:var(--mut);max-width:46ch}
.glow{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFD7B5 0,#FFE9D6 45%,transparent 70%);display:grid;place-items:center}
.btn{display:inline-block;border:0;border-radius:8px;padding:11px 22px;font:500 16px Jost,sans-serif;cursor:pointer;color:#fff}
.buy{background:var(--or)}.buy:hover{background:var(--or-d)}.add{background:var(--blue);color:#12384F}.add:hover{background:var(--blue-d);color:#fff}
.ghost{background:#fff;color:var(--or);border:1px solid var(--or)}
section{padding:48px 0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.thumb{aspect-ratio:1;display:grid;place-items:center;background:var(--tint)}
.card .in{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}.card .row{margin-top:auto;display:flex;gap:8px}.card .btn{padding:8px 12px;font-size:14px;flex:1;text-align:center}
.price{font-weight:600;font-size:18px}.price s{color:var(--mut);font-weight:400;font-size:14px;margin-left:6px}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.cats a{background:var(--tint);border-radius:12px;padding:28px;font:600 20px Fraunces,serif}.cats a:hover{background:#FFE4D0}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.filters select,.filters input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px}.pd .thumb{border-radius:12px}.spec{border-collapse:collapse;margin:16px 0}.spec td{padding:6px 18px 6px 0;border-bottom:1px solid var(--line)}
.ok{color:#1c7a3d}.no{color:#b3261e}.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px}.qty button{border:0;background:none;width:34px;height:34px;font-size:18px;cursor:pointer}
table.cart{width:100%;border-collapse:collapse}.cart td,.cart th{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left}
.sum{background:var(--tint);border-radius:12px;padding:22px;max-width:380px;margin:24px 0 0 auto}.sum div{display:flex;justify-content:space-between;padding:4px 0}
.form{display:grid;gap:12px;max-width:460px}.form input{padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;width:100%}
footer{background:var(--ink);color:#e9ddd5;padding:40px 0;margin-top:40px}footer a{display:block;opacity:.85}footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;z-index:9}
.note{background:var(--tint);border-left:4px solid var(--or);padding:10px 14px;border-radius:6px;font-size:14px}
@media(max-width:800px){.hero .wrap,.pd{grid-template-columns:1fr}nav{order:3;width:100%;overflow-x:auto}.search input{width:120px}}