.template-catalog-page{--catalog-line:rgba(60,47,73,.16);--catalog-raised:rgba(255,254,252,.78);--catalog-muted:#746e78}
.site-nav a.active{color:#fff;background:var(--violet);border-radius:999px}
.template-main{position:relative;z-index:1;width:calc(100% - 64px);max-width:1500px;margin:0 auto;padding:106px 0 0}
.template-intro{padding:32px 0 34px}
.back-link{display:inline-block;width:max-content;margin-bottom:34px;color:var(--muted);font-size:13px}.back-link:hover,.back-link:focus-visible{color:var(--violet)}
.template-kicker{margin:0 0 14px;color:var(--violet);font-size:10px;letter-spacing:.16em}
.template-intro h1{margin:0;font-size:44px;line-height:1.12;font-weight:430;letter-spacing:-.045em}
.intro-copy>p:last-child{max-width:650px;margin:18px 0 0;color:var(--catalog-muted);font-size:14px;line-height:1.75}
.template-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:32px 0 46px}
.template-card{min-width:0;overflow:hidden;border:1px solid var(--catalog-line);background:var(--catalog-raised);box-shadow:0 18px 52px rgba(66,49,83,.07)}
.template-visual{position:relative;display:block;width:100%;height:clamp(680px,78vh,760px);padding:0;overflow:hidden;border:0;border-bottom:1px solid var(--catalog-line);background:#dedfdd;cursor:zoom-in}
.template-visual::after{content:"";position:absolute;inset:auto 0 0;height:105px;background:linear-gradient(transparent,rgba(22,19,25,.68));opacity:0;transition:opacity .2s}
.template-visual img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center;transition:transform .32s ease}
.template-visual span{position:absolute;z-index:2;left:50%;bottom:20px;min-width:128px;padding:10px 16px;transform:translate(-50%,10px);border:1px solid rgba(255,255,255,.62);background:rgba(24,21,28,.84);color:#fff;font-size:12px;letter-spacing:.03em;opacity:0;transition:.2s}
.template-visual:hover img{transform:translateY(-10px)}.template-visual:hover::after,.template-visual:hover span,.template-visual:focus-visible::after,.template-visual:focus-visible span{opacity:1}.template-visual:hover span,.template-visual:focus-visible span{transform:translate(-50%,0)}
.template-visual:focus-visible{outline:3px solid rgba(110,67,175,.38);outline-offset:-3px}
.template-meta{padding:15px 18px 14px}.template-meta h2{margin:0;font-size:23px;line-height:1.2;font-weight:450;letter-spacing:-.035em}.template-meta p{margin:7px 0 0;overflow:hidden;color:var(--catalog-muted);font-size:12px;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}
.template-actions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--catalog-line)}
.template-actions button,.template-actions a{min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;padding:10px 8px;border:0;border-right:1px solid var(--catalog-line);background:transparent;color:var(--ink);font:inherit;font-size:12px;text-align:center;cursor:pointer}.template-actions>*:last-child{border-right:0}.template-actions a{background:var(--ink);color:#fff}.template-actions button:hover,.template-actions button:focus-visible{background:rgba(110,67,175,.08);color:var(--violet)}.template-actions a:hover,.template-actions a:focus-visible{background:var(--violet);color:#fff}.template-actions button:focus-visible,.template-actions a:focus-visible{outline:3px solid rgba(110,67,175,.32);outline-offset:-3px}
.template-empty{padding:40px 0;color:var(--catalog-muted)}
.template-dialog{width:min(660px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;overflow:hidden;border:0;background:#e1e2e0;color:var(--ink);box-shadow:0 36px 110px rgba(0,0,0,.36)}.template-dialog::backdrop{background:rgba(24,20,29,.72);backdrop-filter:blur(6px)}
.dialog-head{position:relative;z-index:2;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 22px;background:rgba(255,254,252,.97);border-bottom:1px solid var(--catalog-line)}.dialog-head small,.dialog-head h2{display:block;margin:0}.dialog-head small{color:var(--catalog-muted);font-size:9px;letter-spacing:.12em}.dialog-head h2{margin-top:3px;font-size:18px;font-weight:500}.dialog-head button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:28px;cursor:pointer}.dialog-head button:hover,.dialog-head button:focus-visible{color:var(--violet)}
.dialog-scroll{height:calc(100vh - 176px);min-height:360px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px;overscroll-behavior:contain}.dialog-scroll img{display:block;width:343px;max-width:100%;height:auto;box-shadow:0 18px 46px rgba(0,0,0,.18)}
.dialog-actions{position:relative;z-index:2;height:76px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px;background:rgba(255,254,252,.97);border-top:1px solid var(--catalog-line)}.dialog-actions a,.dialog-actions button{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.dialog-actions a{background:var(--ink);color:#fff}.dialog-actions a:hover,.dialog-actions a:focus-visible{background:var(--violet);border-color:var(--violet)}.dialog-actions button:hover,.dialog-actions button:focus-visible{border-color:var(--violet);color:var(--violet)}
.template-toast{position:fixed;right:20px;bottom:20px;z-index:90;max-width:calc(100vw - 40px);padding:12px 16px;background:var(--ink);color:#fff;font-size:12px;opacity:0;transform:translateY(24px);transition:.2s}.template-toast.show{opacity:1;transform:none}
@media(max-width:1280px){.template-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.template-visual{height:680px}}
@media(max-width:900px){.template-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.template-visual{height:650px}}
@media(max-width:809px){.template-main{width:calc(100% - 40px);padding-top:78px}.template-intro{padding:28px 0 28px}.back-link{margin-bottom:28px}.template-intro h1{font-size:36px}.template-gallery{gap:18px;padding-top:18px}}
@media(max-width:620px){.template-main{width:calc(100% - 28px);padding-top:66px}.template-gallery{grid-template-columns:1fr}.template-visual{height:640px}.template-meta{padding:14px 16px 13px}.template-actions button,.template-actions a{min-height:52px}.dialog-scroll{padding:14px}.dialog-actions{padding:12px;height:72px}.site-footer{width:calc(100% - 28px)}}
@media(max-width:390px){.template-actions button,.template-actions a{font-size:11px;padding-inline:4px}}
@media(prefers-reduced-motion:reduce){.template-visual img,.template-visual span,.template-visual::after,.template-toast{transition:none}}