/* ===== Template gallery ===== */
.tpl-filters { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.tpl-tabs { display:inline-flex; background:var(--mist,#f5f8fa); border:1px solid var(--line,#e7ecf0); border-radius:10px; padding:4px; gap:2px; }
.tpl-tabs a { padding:8px 16px; border-radius:7px; font-weight:600; font-size:14px; color:var(--ink-3); text-decoration:none; }
.tpl-tabs a.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(11,24,34,.08); }
.tpl-cats { display:flex; gap:8px; flex-wrap:wrap; }
.tpl-cats a { padding:6px 12px; border:1px solid var(--line,#e7ecf0); border-radius:999px; font-size:13px; color:var(--ink-3); text-decoration:none; background:#fff; }
.tpl-cats a.on, .tpl-cats a:hover { border-color:var(--blue); color:var(--blue); }

.tpl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tplcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line,#e7ecf0); border-radius:14px; overflow:hidden; text-decoration:none; transition:.16s; }
.tplcard:hover { border-color:var(--blue); box-shadow:0 10px 30px rgba(11,24,34,.10); transform:translateY(-3px); }
.tplcard__img { position:relative; aspect-ratio:16/10; background:var(--mist,#f5f8fa); overflow:hidden; }
.tplcard__img img { width:100%; height:100%; object-fit:cover; display:block; }
.tplcard__noimg { width:100%; height:100%; display:grid; place-items:center; color:#c3ced6; } .tplcard__noimg svg { width:46px; height:46px; }
.tplcard__kind { position:absolute; top:12px; left:12px; background:rgba(11,24,34,.78); color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:6px; }
.tplcard__kind--solid { position:static; display:inline-block; background:var(--blue); }
.tplcard__body { padding:16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tplcard__body h3 { font-family:var(--font-display); font-size:17px; color:var(--ink); margin:0; }
.tplcard__body p { font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tplcard__meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.chip { background:var(--mist,#f5f8fa); border:1px solid var(--line,#e7ecf0); border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; color:var(--ink-2,#445); }
.chip--ghost { background:#fff; }
.tplcard__foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--line,#e7ecf0); }
.tplcard__free { color:#15923f; font-weight:800; font-size:14px; }
.tplcard__dl { color:var(--ink-3); font-size:13px; display:inline-flex; align-items:center; gap:5px; } .tplcard__dl svg { width:15px; height:15px; }
.tpl-empty { text-align:center; padding:60px 20px; color:var(--ink-3); } .tpl-empty svg { width:48px; height:48px; opacity:.4; }

/* ===== Detail ===== */
.tpl-detail { display:grid; grid-template-columns:1fr 360px; gap:40px; padding:34px 40px 50px; align-items:start; }
.tpl-detail__head h1 { font-size:32px; margin:10px 0 8px; }
.tpl-detail__sub { font-size:16px; color:var(--ink-3); line-height:1.55; }
.tpl-gallery { margin:22px 0 30px; }
.tpl-gallery__main { border:1px solid var(--line,#e7ecf0); border-radius:14px; overflow:hidden; background:var(--mist,#f5f8fa); }
.tpl-gallery__main img { width:100%; display:block; }
.tpl-gallery__thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.tpl-thumb { width:90px; height:60px; border:2px solid transparent; border-radius:8px; overflow:hidden; padding:0; cursor:pointer; background:none; }
.tpl-thumb img { width:100%; height:100%; object-fit:cover; }
.tpl-thumb.on { border-color:var(--blue); }
.tpl-section { margin-top:30px; }
.tpl-section h2 { font-size:21px; margin-bottom:12px; }
.tpl-prose { color:var(--ink-2,#33424d); line-height:1.7; font-size:15px; white-space:pre-wrap; }
.tpl-features { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.tpl-features li { display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--ink-2,#33424d); line-height:1.5; }
.tpl-features svg { width:18px; height:18px; color:#15923f; flex:none; margin-top:1px; }

.tpl-detail__side { position:sticky; top:90px; }
.tpl-buy { border:1px solid var(--line,#e7ecf0); border-radius:16px; padding:22px; background:#fff; box-shadow:0 8px 26px rgba(11,24,34,.06); }
.tpl-buy__price { font-family:var(--font-display); font-size:26px; font-weight:800; color:#15923f; margin-bottom:14px; } .tpl-buy__price span { color:var(--ink-3); font-size:14px; font-weight:600; }
.tpl-spec { list-style:none; padding:0; margin:0 0 18px; }
.tpl-spec li { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line,#e7ecf0); font-size:14px; }
.tpl-spec li span { color:var(--ink-3); } .tpl-spec li b { color:var(--ink); }
.tpl-form__lead { font-size:13.5px; color:var(--ink-3); margin-bottom:12px; }
.tpl-form .field { margin-bottom:12px; }
.tpl-form__note { font-size:12px; color:var(--ink-3); margin-top:10px; display:flex; align-items:center; gap:6px; justify-content:center; } .tpl-form__note svg { width:14px; height:14px; }
.tpl-related__h { font-size:22px; margin-bottom:18px; }
.tpl-sent__ic { width:70px; height:70px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:rgba(31,119,192,.1); color:var(--blue); } .tpl-sent__ic svg { width:34px; height:34px; }

@media (max-width:1000px){ .tpl-grid { grid-template-columns:repeat(2,1fr); } .tpl-detail { grid-template-columns:1fr; } .tpl-detail__side { position:static; } .tpl-features { grid-template-columns:1fr; } }
@media (max-width:640px){ .tpl-grid { grid-template-columns:1fr; } }