:root { --bg:#fbfaf8; --fg:#222; --muted:#6b6b6b; --line:#e4e0d9; --accent:#8a4b2f; }
@media (prefers-color-scheme: dark) { :root { --bg:#181716; --fg:#eee; --muted:#a09b94; --line:#34312e; --accent:#e0a27f; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
.top { position:fixed; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); transition:background .3s,color .3s; }
.top.solid { background:var(--bg); color:var(--fg); text-shadow:none; border-bottom:1px solid var(--line); }
.logo { color:inherit; text-decoration:none; font:italic 1.5rem Georgia,serif; }
.hero { position:relative; height:100vh; height:100svh; min-height:420px; }
.hero-img { position:absolute; inset:0; width:100%; border:0; padding:0; background:#888 center/cover no-repeat; cursor:zoom-in; }
.hero-text { position:absolute; left:0; right:0; bottom:14%; text-align:center; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); pointer-events:none; padding:0 16px; }
.hero-text h1, .hero-text h2 { margin:0; font:400 clamp(2rem,6vw,3.4rem)/1.2 Georgia,serif; }
.hero-text p { margin:6px 0 0; font:1.2rem Georgia,serif; }
.lang { display:flex; gap:4px; }
.lang button { color:inherit !important; text-shadow:inherit; font:inherit; font-size:.9rem; padding:6px 10px; min-width:44px; min-height:44px; background:none; color:var(--fg); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.lang button { border-color:rgba(255,255,255,.5) !important; }
.top.solid .lang button { border-color:var(--line) !important; }
.lang button[aria-pressed="true"] { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; text-shadow:none; }
main { max-width:1200px; margin:0 auto; padding:0 16px 32px; }
h2 { margin:32px 0 16px; font:600 1.3rem Georgia,serif; }
.gallery { column-width:260px; column-gap:14px; margin-top:32px; }
.gallery figure { margin:0 0 14px; break-inside:avoid; }
.thumb { display:block; width:100%; padding:0; border:0; background:var(--line); border-radius:4px; overflow:hidden; cursor:zoom-in; }
.thumb img { width:100%; height:auto; display:block; transition:transform .25s; }
.thumb:hover img, .thumb:focus-visible img { transform:scale(1.04); }
figcaption { display:flex; flex-direction:column; gap:2px; padding:8px 2px 0; font-size:.95rem; }
figcaption .price { color:var(--accent); font-weight:600; }
figcaption .comment { color:var(--muted); font-size:.9rem; }
.contacts { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
footer { text-align:center; color:var(--muted); padding:24px 16px; border-top:1px solid var(--line); font-size:.9rem; }
.lb { border:0; padding:0; width:100vw; height:100vh; max-width:none; max-height:none; background:rgba(0,0,0,.92); color:#fff; }
.lb[open] { display:flex; align-items:center; justify-content:center; }
.lb::backdrop { background:#000; }
.lb figure { margin:0; max-width:calc(100vw - 8px); text-align:center; }
.lb img { max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; display:block; margin:0 auto; }
.lb figcaption { align-items:center; color:#fff; padding:10px 56px 0; }
.lb figcaption .comment { color:#ccc; }
.lb button { position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:50%; width:48px; height:48px; font-size:28px; line-height:1; cursor:pointer; }
.lb-close { top:12px; right:12px; }
.lb-prev { left:8px; top:50%; transform:translateY(-50%); }
.lb-next { right:8px; top:50%; transform:translateY(-50%); }
@media (max-width:600px) { .logo { font-size:1.15rem; white-space:nowrap; } .gallery { column-width:150px; column-gap:10px; } .lb-nav { top:auto; bottom:12px; transform:none; } .lang button { min-width:40px; padding:6px 6px; } }