:root{
  --bg:#16120f; --bg2:#1f1a16; --card:#241e19; --line:#3a3029;
  --ink:#f3ebe0; --mute:#b8a893; --gold:#d4ad6a; --gold2:#e9c98f; --red:#b3382c;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 Manrope,system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(1200px 500px at 50% -200px,#3a2a1c 0,transparent 70%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:5;background:rgba(22,18,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:16px 16px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center}
.logo{width:48px;height:48px;border-radius:50%;object-fit:cover}
.brand h1{font:700 30px/1 "Cormorant Garamond",serif;letter-spacing:.06em;color:var(--gold2);text-transform:uppercase}
.slogan{color:var(--mute);font-size:12.5px;margin-top:4px;letter-spacing:.02em}
.search{display:flex;align-items:center;gap:8px;margin:14px auto 14px;max-width:640px;background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:10px 14px}
.search svg{width:18px;height:18px;fill:var(--mute);flex:none}
.search input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:inherit;min-width:0}
.search input::placeholder{color:#8d7f6e}
main{max-width:900px;margin:0 auto;padding:16px}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
#home{flex:1;display:flex;flex-direction:column;width:100%;padding-bottom:12px}
.groupgrid{flex:1;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(92px,1fr);gap:10px}
@media(min-width:560px){.groupgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(160px,1fr)}}
.grp{position:relative;display:block;border-radius:18px;overflow:hidden;min-height:0;background:var(--card);border:1px solid var(--line)}
.grp .ph{position:absolute;inset:0;background:var(--card) center/cover no-repeat;transition:transform .5s}
.grp:hover .ph{transform:scale(1.04)}
.grp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.9) 0,rgba(10,8,6,.25) 55%,rgba(10,8,6,.1))}
.grp .gn{position:absolute;left:18px;bottom:34px;z-index:1;font:700 30px/1 "Cormorant Garamond",serif;letter-spacing:.06em;color:#fff}
.grp .cc{position:absolute;left:18px;bottom:14px;z-index:1;font-size:12px;color:var(--gold2);letter-spacing:.04em}
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.catgrid{grid-template-columns:repeat(3,1fr)}}
.cat{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card);border:1px solid var(--line)}
.cat .ph{position:absolute;inset:0;background:var(--card) center/cover no-repeat;transition:transform .4s}
.cat:hover .ph{transform:scale(1.05)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.92) 5%,rgba(10,8,6,.15) 60%,transparent)}
.cat .cn{position:absolute;left:12px;right:12px;bottom:26px;z-index:1;font-weight:800;font-size:14px;line-height:1.25;letter-spacing:.02em}
.cat .cc{position:absolute;left:12px;bottom:9px;z-index:1;font-size:11.5px;color:var(--gold2)}

.listhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.listhead h2{font:700 24px/1.15 "Cormorant Garamond",serif;color:var(--gold2)}
.back{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.back svg{width:22px;height:22px;fill:var(--ink)}

.prod{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px}
.prod img,.prod .noimg{width:104px;height:104px;border-radius:12px;object-fit:cover;flex:none;background:#2d251f;cursor:zoom-in}
.prod .noimg{cursor:default;background:linear-gradient(135deg,#2d251f,#3a2f26)}
.pb{flex:1;min-width:0;display:flex;flex-direction:column}
.pb h3{font-size:14.5px;font-weight:800;line-height:1.3;letter-spacing:.01em}
.pb p{color:var(--mute);font-size:13px;line-height:1.45;margin-top:4px}
.price{margin-top:auto;padding-top:8px;align-self:flex-end;font-weight:800;font-size:16px;color:var(--gold2);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.rcat{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}

.empty{color:var(--mute);text-align:center;padding:40px 0}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}
.lightbox img{max-width:100%;max-height:78vh;border-radius:12px}
.lbt{font-weight:700;text-align:center}
main:not(#home){width:100%}
.foot{text-align:center;color:var(--mute);font-size:12.5px;padding:24px 16px 40px;border-top:1px solid var(--line);margin-top:20px}
.foot .links{display:flex;gap:16px;justify-content:center;margin:10px 0;flex-wrap:wrap}
.foot .links a{color:var(--gold2);font-weight:700}
.foot .note{font-size:11px;opacity:.7}
.meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.meta span{font-size:11.5px;color:var(--gold2);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.foot .tel{margin-top:6px}.foot .tel a{color:var(--ink);font-weight:800;font-size:16px;letter-spacing:.03em}