:root{--ink:#1b1b1f;--muted:#6b6b73;--line:#e6e6ea;--bg:#f7f7f9;--accent:#1f3a5f;--wa:#25d366;--ratio:1100 / 1200}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--bg);flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex}#app{flex-direction:column;min-height:100vh;display:flex}.header{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffe6;position:sticky;top:0}.header__inner{justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:12px 16px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;text-decoration:none;display:flex}.brand__mark{background:var(--accent);color:#fff;border-radius:8px;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.brand__name{letter-spacing:.5px;font-size:1.1rem}.brand__name b{color:var(--accent)}.header__wa{background:var(--wa);color:#fff;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:.9rem;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex}.header__wa:hover{transform:translateY(-1px);box-shadow:0 6px 16px #25d36659}.catalog{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px 12px 32px}.catalog__head{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.catalog__head h1{font-size:1.5rem}.catalog__head p{color:var(--muted);font-size:.9rem}.filters{margin-bottom:18px}.filters__top{gap:8px;display:flex}.search{flex:1}.search input,.field select{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:8px;padding:10px 12px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.search input:focus,.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #1f3a5f1f}.filters__toggle{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:0 16px;font-size:.95rem;display:inline-flex}.badge{background:var(--accent);color:#fff;border-radius:999px;place-items:center;min-width:18px;height:18px;padding:0 5px;font-size:.72rem;display:grid}.filters__panel{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;animation:.25s fadeDown;display:none}.filters__panel.open{display:grid}.field span{color:var(--muted);margin-bottom:4px;font-size:.75rem;display:block}.clear{border:1px dashed var(--muted);color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;grid-column:1/-1;padding:9px;transition:color .2s,border-color .2s}.clear:hover{color:var(--accent);border-color:var(--accent)}.grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.card{border:1px solid var(--line);opacity:0;animation:.5s forwards fadeUp;animation-delay:var(--d,0s);background:#fff;border-radius:12px;transition:transform .3s,box-shadow .3s;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0000001a}.card__media{cursor:zoom-in;width:100%;aspect-ratio:var(--ratio);background:#fff;border:0;padding:0;display:block;overflow:hidden}.card__media img{object-fit:contain;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);display:block}.card__media:hover img{transform:scale(1.04)}.card__action{border-top:1px solid var(--line);justify-content:center;padding:12px;display:flex}.wa-btn{background:var(--wa);color:#fff;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex}.wa-btn:hover{filter:brightness(.96);transform:translateY(-2px);box-shadow:0 8px 18px #25d36666}.wa-btn:active{transform:scale(.97)}.skeleton{aspect-ratio:var(--ratio);background:linear-gradient(100deg,#ececf0 30%,#f6f6f8 50%,#ececf0 70%) 0 0/200% 100%;border-radius:12px;animation:1.2s linear infinite shimmer}.msg{text-align:center;color:var(--muted);padding:24px 16px}.error{color:#c0392b}.more{border:1px solid var(--ink);cursor:pointer;background:#fff;border-radius:999px;margin:24px auto 0;padding:11px 32px;font-size:.95rem;transition:background .2s,color .2s;display:block}.more:hover{background:var(--ink);color:#fff}.footer{background:var(--ink);color:#cfcfd6;padding:28px 16px 16px}.footer__inner{flex-wrap:wrap;justify-content:space-between;gap:24px;max-width:1280px;margin:0 auto;display:flex}.footer__brand{color:#fff;margin-bottom:6px;font-size:1.1rem}.footer__brand b{color:#8fb3e6}.footer__text{max-width:320px;font-size:.85rem}.footer__title{color:#fff;margin-bottom:6px;font-weight:600}.footer__link{color:var(--wa);font-size:.9rem;text-decoration:none}.footer__link:hover{text-decoration:underline}.footer__copy{text-align:center;border-top:1px solid #34343c;max-width:1280px;margin:20px auto 0;padding-top:14px;font-size:.78rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width>=640px){.catalog{padding:24px 16px 40px}.filters__toggle{display:none}.filters__panel{grid-template-columns:repeat(3,1fr) auto;align-items:end;display:grid}.clear{grid-column:auto}}@media (width>=1024px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}.lightbox{z-index:100;cursor:zoom-out;background:#000;place-items:center;display:grid;position:fixed;inset:0}.lightbox img{object-fit:contain;max-width:100vw;max-height:100dvh;display:block}.lightbox__close{color:#fff;cursor:pointer;background:#ffffff1f;border:0;border-radius:50%;width:40px;height:40px;font-size:1.6rem;line-height:1;transition:background .2s;position:absolute;top:12px;right:14px}.lightbox__close:hover{background:#ffffff40}.lightbox-enter-active,.lightbox-leave-active{transition:opacity .25s}.lightbox-enter-from,.lightbox-leave-to{opacity:0}.lightbox-enter-active img{animation:.3s zoomIn}@keyframes zoomIn{0%{transform:scale(.94)}to{transform:scale(1)}}@media (width<=639px){.skeleton:nth-child(n+3){display:none}.wa-btn{width:100%;padding:10px 14px;font-size:.85rem}.card__action{padding:10px}}
