:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#171717;background:#fff;font-synthesis:none;--muted:#6b6b6b;--accent:#e60023;--chip:#f1f1f1}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#fff}body.detail-open{overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}
.topbar{height:80px;position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:0 32px;background:#fff}.brand{display:flex;align-items:center;gap:10px;flex:none;font-size:19px;font-weight:750;letter-spacing:-.035em}.brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:20px;font-weight:800}.search-wrap{height:48px;max-width:860px;min-width:120px;flex:1;display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:999px;background:#f1f1f1}.search-wrap:focus-within{background:#e9e9e9}.search-wrap svg,.shuffle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:#171717;font-size:15px}.search-wrap input::placeholder{color:#767676}.shuffle{height:44px;border:0;border-radius:999px;padding:0 18px;display:flex;align-items:center;gap:9px;background:#111;color:#fff;font-weight:650;font-size:13px;white-space:nowrap}.shuffle:hover{background:#333}
main{max-width:1680px;margin:auto;padding:24px 32px 90px}.filter-area{margin-bottom:18px}.filter-heading{display:flex;align-items:baseline;gap:18px;margin-bottom:19px}.filter-heading h1{font-size:27px;line-height:1.15;letter-spacing:-.035em;margin:0;font-weight:720}.filter-heading span{font-size:13px;color:var(--muted)}.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 12px;scrollbar-width:thin;scrollbar-color:#ccc transparent}.filter{border:0;background:var(--chip);color:#242424;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:620;white-space:nowrap}.filter:hover{background:#e6e6e6}.filter.active{background:#111;color:#fff}.grid{columns:5 220px;column-gap:16px}.card{display:block;break-inside:avoid;margin:0 0 22px;cursor:pointer}.card-image{display:block;width:100%;min-height:170px;aspect-ratio:var(--ratio,4/5);object-fit:cover;background:#f1f1f1;border-radius:17px;transition:filter .2s}.card:hover .card-image{filter:brightness(.92)}.card-content{padding:9px 5px 0}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.card-code{font-size:14px;font-weight:750}.card-price{font-size:11px;font-weight:650;color:#555;background:#f1f1f1;border-radius:7px;padding:4px 6px;white-space:nowrap}.card-desc{font-size:13px;line-height:1.43;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#555;margin:0}.card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.card-tag{font-size:11px;color:#555;background:#f1f1f1;border-radius:6px;padding:3px 6px}.loading{text-align:center;padding:24px;color:var(--muted);font-size:13px}.empty{text-align:center;padding:100px 15px;color:var(--muted)}.empty h2{color:#171717;font-size:22px}.empty p{font-size:14px}.empty button{border:0;border-radius:9px;padding:11px 17px;background:#111;color:#fff}
.detail-page{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#171717;opacity:0}.detail-page.visible{opacity:1}.detail-layout{width:min(1040px,100%);min-height:100%;margin:auto;padding:26px 24px 70px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:40px;align-items:start}.detail-media{position:relative;min-width:0}.detail-hero-frame{width:100%;min-height:350px;aspect-ratio:4/5;background:#f1f1f1;border-radius:22px;overflow:hidden}.detail-hero{display:block;width:100%;height:100%;object-fit:cover}.close-detail{position:absolute;left:16px;top:16px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;box-shadow:0 2px 12px #0002}.close-detail svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.detail-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.detail-photos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#f1f1f1;border-radius:15px}.detail-copy{padding:26px 0;position:sticky;top:0}.detail-code{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;background:#f1f1f1;font-size:13px;font-weight:750}.detail-copy h2{font-size:29px;letter-spacing:-.035em;line-height:1.2;margin:16px 0 12px}.detail-copy p{font-size:15px;line-height:1.6}.detail-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}.detail-tags span{font-size:12px;border-radius:999px;background:#f1f1f1;padding:8px 11px}.privacy-note{font-size:12px!important;color:var(--muted);border-top:1px solid #eee;padding-top:18px}.transition-cover{position:fixed;inset:0;z-index:40;background:#fff;pointer-events:none}.transition-image{position:fixed;display:block;object-fit:cover;will-change:transform,width,height,left,top}
@media(max-width:850px){.topbar{height:auto;min-height:66px;flex-wrap:wrap;gap:10px;padding:12px 18px}.brand{font-size:17px}.brand-mark{height:34px;width:34px}.search-wrap{order:3;flex-basis:100%;max-width:none;height:43px}.shuffle{margin-left:auto;height:40px;padding:0 12px}.shuffle span{display:none}main{padding:20px 17px 70px}.filter-heading{display:block}.filter-heading h1{font-size:23px}.filter-heading span{display:block;margin-top:5px}.grid{columns:3 160px;column-gap:12px}.card{margin-bottom:18px}.detail-layout{width:min(720px,100%);display:block;padding:0 0 70px}.detail-hero-frame{border-radius:0;min-height:0;aspect-ratio:1/1}.close-detail{top:calc(env(safe-area-inset-top) + 14px);left:16px}.detail-copy{position:static;padding:24px 22px 10px}.detail-photos{padding:0 12px;gap:10px;margin-top:24px}}
@media(max-width:520px){.grid{columns:2;column-gap:10px}.card{margin-bottom:16px}.card-image{border-radius:14px;min-height:125px}.card-code{font-size:12px}.card-price{font-size:10px}.card-desc{font-size:12px}.card-tags{display:none}.filters{margin-right:-17px;padding-right:17px}.detail-hero-frame{aspect-ratio:4/5}.detail-copy h2{font-size:25px}.detail-photos img{border-radius:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card-image{transition:none}}
@media(max-width:850px){.detail-layout{display:flex;flex-direction:column;gap:0}.detail-media{display:contents}.detail-hero-frame{order:1}.detail-copy{order:2;width:100%}.detail-photos{order:3;width:100%}.close-detail{position:fixed;top:calc(env(safe-area-inset-top) + 14px);left:16px}}
.transition-cover{background:transparent}.transition-backdrop{position:absolute;inset:0;background:#fff}.transition-image{z-index:1}
.image-frame{position:relative;display:block;overflow:hidden;background:#efefef}.image-frame:not(.ready):not(.failed)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,#ededed 25%,#f8f8f8 48%,#ededed 72%);background-size:200% 100%;animation:skeleton-shift 1.35s ease-in-out infinite}.image-frame img{opacity:0;transition:opacity .24s ease}.image-frame.ready img{opacity:1}.image-frame.failed::after{content:"Фото недоступно";position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:12px}@keyframes skeleton-shift{from{background-position:200% 0}to{background-position:-200% 0}}
.card-media{width:100%;min-height:170px;aspect-ratio:var(--ratio,4/5);border-radius:17px}.card-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:0;transition:opacity .24s ease,filter .2s}.detail-hero-frame{border:0;padding:0;cursor:zoom-in}.detail-hero{height:100%}.detail-meta{display:flex;align-items:center;gap:10px}.detail-photo-count{font-size:13px;color:#777}.detail-page.viewer-open{overflow:hidden}.photo-tile{width:100%;aspect-ratio:4/5;min-width:0;padding:0;border:0;border-radius:15px;cursor:zoom-in}.detail-photos .photo-tile img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}.photo-tile:hover img{filter:brightness(.94)}
.photo-viewer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#fff;animation:viewer-in .22s cubic-bezier(.2,.8,.2,1)}@keyframes viewer-in{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}.viewer-toolbar{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 16px);left:22px;right:22px;display:flex;align-items:center;justify-content:space-between}.viewer-count{font-size:14px;font-weight:700;color:#555}.viewer-close,.viewer-nav{border:0;border-radius:50%;display:grid;place-items:center;background:#f1f1f1;color:#171717}.viewer-close{width:44px;height:44px;font-size:31px;line-height:1}.viewer-nav{position:absolute;z-index:2;top:50%;width:46px;height:46px;font-size:36px;line-height:1;transform:translateY(-50%)}.viewer-prev{left:18px}.viewer-next{right:18px}.viewer-nav:disabled{opacity:.3;cursor:default}.viewer-frame{width:min(1120px,calc(100vw - 150px));height:calc(100dvh - 112px);max-height:1000px;border-radius:16px;touch-action:pan-y}.viewer-frame.ready{background:#fff}.viewer-frame img{width:100%;height:100%;object-fit:contain}
@media(max-width:520px){.card-media{min-height:125px;border-radius:14px}.photo-tile{border-radius:12px}.viewer-toolbar{left:16px;right:16px}.viewer-frame{width:100vw;height:calc(100dvh - 118px);border-radius:0}.viewer-nav{width:38px;height:38px;font-size:30px;background:#ffffffd9;box-shadow:0 1px 8px #0002}.viewer-prev{left:9px}.viewer-next{right:9px}}
@media(prefers-reduced-motion:reduce){.image-frame:not(.ready):not(.failed)::before,.photo-viewer{animation:none}.image-frame img{transition:none}}
.filter.active{background:var(--selected-filter-color,#e60023);color:var(--selected-filter-text,#fff)}.filter.active:hover{background:var(--selected-filter-color,#e60023)}.filter-cross{display:inline-block;margin-left:9px;font-size:18px;font-weight:600;line-height:10px;vertical-align:-1px}
.photo-viewer,.viewer-frame,.viewer-frame img{touch-action:pinch-zoom}.viewer-frame img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.hero-wrap{position:relative;min-width:0}.detail-hero-frame{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;touch-action:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.detail-hero-frame::-webkit-scrollbar{display:none}.hero-slide{flex:0 0 100%;align-self:stretch;scroll-snap-align:start;scroll-snap-stop:always}.hero-slide .detail-hero{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none}.detail-slide-count{position:absolute;right:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:#171717c9;color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
@media(max-width:850px){.hero-wrap{order:1;width:100%}}
@media(prefers-reduced-motion:reduce){.detail-hero-frame{scroll-behavior:auto}}