/* Heater Finder + catalog + TOC + FAQ — heatingfilm.com
CSS-standard only, minimal decoration, no emoji glyphs in content. */
:root{
--htc-primary:#000f22; /* steel blue */
--htc-primary-2:#345076;
--htc-accent:#C68119; /* precision orange — fills and large text */
--htc-accent-ink:#8a5810; /* same hue, readable as text on white (4.9:1) */
--htc-ink:#191c1d;
--htc-muted:#5b5f64;
--htc-line:#D1D5DB;
--htc-bg:#f8f9fa;
--htc-surface:#ffffff;
--htc-radius:4px;
}
.htc-config *,.htc-page *{box-sizing:border-box}
/* ── Configurator ─────────────────────────────────────────── */
.htc-config{background:var(--htc-surface);border:1px solid var(--htc-line);border-radius:var(--htc-radius);overflow:hidden}
.htc-config-inner{padding:clamp(18px,3vw,30px)}
.htc-config-banner{background:linear-gradient(135deg,#000f22 0%,#345076 100%);border:0;color:#fff}
.htc-config-banner .htc-config-title,.htc-config-banner .htc-config-sub{color:#fff}
.htc-config-banner .htc-form,.htc-config-banner .htc-step{color:var(--htc-ink)}
.htc-config-head{text-align:center;margin-bottom:18px}
.htc-config-title{font-size:clamp(20px,3vw,28px);font-weight:800;margin:0 0 6px;color:var(--htc-ink)}
.htc-config-sub{margin:0;color:var(--htc-muted);font-size:15px}
.htc-config-banner .htc-config-sub{color:rgba(255,255,255,.85)}
.htc-steps{list-style:none;display:flex;gap:8px;justify-content:center;padding:0;margin:0 0 22px;flex-wrap:wrap}
.htc-steps li{font-size:13px;font-weight:600;color:var(--htc-muted);padding:6px 14px;border-radius:999px;background:var(--htc-bg);border:1px solid var(--htc-line)}
.htc-steps li.is-active{background:var(--htc-primary);color:#fff;border-color:var(--htc-primary)}
.htc-config-banner .htc-steps li{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
.htc-config-banner .htc-steps li.is-active{background:#fff;color:var(--htc-primary)}
.htc-step{display:none}
.htc-step.is-active{display:block}
.htc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.htc-grid-2{grid-template-columns:repeat(2,1fr)}
.htc-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:780px){.htc-grid,.htc-grid-2,.htc-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.htc-grid,.htc-grid-2,.htc-grid-3{grid-template-columns:1fr}}
.htc-config-banner .htc-grid{background:#fff;padding:18px;border-radius:4px}
.htc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.htc-lbl{font-size:12px;font-weight:700;color:var(--htc-ink);text-transform:uppercase;letter-spacing:.3px}
.htc-input{height:42px;padding:0 12px;border:1.5px solid var(--htc-line);border-radius:4px;font-size:14px;font-family:inherit;background:#fff;color:var(--htc-ink);width:100%}
textarea.htc-input{height:auto;padding:10px 12px}
.htc-input:focus{outline:none;border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-advanced{margin-top:14px;border:1px dashed var(--htc-line);border-radius:4px;padding:10px 14px}
.htc-advanced summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--htc-primary)}
.htc-advanced .htc-grid-3{margin-top:12px}
/* Homepage banner only: Advanced filters text light on the blue background */
.htc-config-banner .htc-advanced summary{color:#fff}
.htc-config-banner .htc-advanced{border-color:rgba(255,255,255,.45)}
.htc-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.htc-btn{border:0;border-radius:4px;font-weight:700;font-size:15px;padding:0 24px;height:46px;cursor:pointer;font-family:inherit;transition:transform .12s,opacity .15s}
.htc-btn:hover{transform:translateY(-1px)}
.htc-btn-primary{background:var(--htc-accent);color:#fff}
.htc-btn-secondary{background:var(--htc-primary);color:#fff}
.htc-btn-ghost{background:transparent;border:1.5px solid var(--htc-line);color:var(--htc-ink)}
/* Results */
.htc-results{display:flex;flex-direction:column;gap:14px}
.htc-result-card{border:1px solid var(--htc-line);border-radius:6px;padding:16px 18px;background:#fff}
.htc-result-card.is-top{border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-result-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.htc-result-model{font-size:18px;font-weight:800;margin:0;color:var(--htc-ink)}
.htc-result-model a{color:inherit;text-decoration:none}
.htc-match{text-align:right;min-width:120px}
.htc-match-pct{font-size:22px;font-weight:800;color:var(--htc-primary)}
.htc-match-bar{height:8px;border-radius:4px;background:var(--htc-bg);overflow:hidden;margin-top:4px}
.htc-match-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--htc-primary),var(--htc-primary-2))}
.htc-result-specs{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 16px;font-size:13px;color:var(--htc-muted)}
@media(max-width:600px){.htc-result-specs{grid-template-columns:1fr 1fr}}
.htc-result-specs strong{color:var(--htc-ink)}
.htc-result-notes{margin:10px 0 0;font-size:12.5px;color:var(--htc-accent)}
.htc-result-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.htc-result-actions .htc-btn{height:40px;font-size:14px}
.htc-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.htc-fieldset{border:1px solid var(--htc-line);border-radius:4px;padding:14px 16px;margin:0 0 16px}
.htc-fieldset legend{font-weight:700;padding:0 6px;color:var(--htc-primary)}
.htc-form-title{margin:0 0 14px}
.htc-form-msg{margin-top:12px;font-weight:600}
.htc-form-msg.ok{color:#15803d}.htc-form-msg.err{color:var(--htc-accent)}
.htc-selected-model{background:var(--htc-bg);border:1px solid var(--htc-line);border-radius:4px;padding:10px 14px;margin-bottom:14px;font-weight:600}
.htc-captcha{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 -2px}
.htc-captcha-img{display:block;width:136px;height:46px;border:1px solid var(--htc-line);border-radius:4px;background:#fff}
.htc-captcha-answer{max-width:104px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.htc-config-compact .htc-step-1,.htc-config-compact .htc-step-2{display:none}
@media(max-width:520px){.htc-captcha{justify-content:flex-start}.htc-captcha-answer{max-width:96px}}
/* ── Product / archive pages ──────────────────────────────── */
.htc-page{max-width:1180px;margin:0 auto;padding:24px 20px 60px}
.htc-breadcrumb{font-size:13px;color:var(--htc-muted);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.htc-breadcrumb a{color:var(--htc-primary);text-decoration:none}
.htc-product-layout{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start}
@media(max-width:900px){.htc-product-layout{grid-template-columns:1fr}.htc-side{display:none}}
.htc-eyebrow{text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:700;color:var(--htc-accent);margin:0 0 6px}
.htc-product-title{font-size:clamp(24px,4vw,34px);font-weight:800;margin:0 0 10px;line-height:1.2}
.htc-product-excerpt{color:var(--htc-muted);font-size:16px;margin:0 0 22px}
.htc-spec-table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:14px}
.htc-spec-table th,.htc-spec-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--htc-line)}
.htc-spec-table th{width:38%;color:var(--htc-muted);font-weight:600}
.htc-article-body h2{font-size:22px;margin:30px 0 12px;scroll-margin-top:90px}
.htc-article-body h3{font-size:18px;margin:22px 0 10px;scroll-margin-top:90px}
.htc-article-body p,.htc-article-body li{font-size:15.5px;line-height:1.7;color:#43474d}
.htc-article-body ul{padding-left:20px}
/* TOC */
/* Offset from the site's fixed header + sticky sub-nav rather than a
hardcoded figure, so this panel is never parked underneath them. */
.htc-side{position:sticky;top:calc(var(--ehw-chrome-h, 120px) + 16px);max-height:calc(100vh - var(--ehw-chrome-h, 120px) - 32px);overflow-y:auto;overscroll-behavior:contain}
.htc-toc{border-left:2px solid var(--htc-line);padding-left:16px}
.htc-toc-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--htc-muted);font-weight:700;margin:0 0 10px}
.htc-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.htc-toc-list a{color:var(--htc-muted);text-decoration:none;font-size:13.5px;line-height:1.4;display:block;border-left:2px solid transparent;margin-left:-18px;padding-left:16px}
.htc-toc-list a:hover{color:var(--htc-ink)}
.htc-toc-list a.is-active{color:var(--htc-primary);border-left-color:var(--htc-primary);font-weight:600}
.htc-toc-list .lvl-3{padding-left:28px;font-size:13px}
.htc-toc-list .lvl-4{padding-left:38px;font-size:12.5px}
/* FAQ */
.htc-faq{margin-top:36px}
.htc-faq h2{font-size:22px;margin:0 0 14px}
.htc-faq-item{border:1px solid var(--htc-line);border-radius:4px;margin-bottom:10px;background:#fff}
.htc-faq-item summary{cursor:pointer;font-weight:600;padding:13px 16px;font-size:15px}
.htc-faq-a{padding:0 16px 14px;color:#43474d;font-size:14.5px;line-height:1.65}
/* Archive grids */
.htc-archive-head{margin-bottom:26px}
.htc-archive-title{font-size:clamp(26px,4vw,38px);font-weight:800;margin:0 0 10px}
.htc-archive-intro{color:var(--htc-muted);font-size:16px;max-width:760px;line-height:1.6}
.htc-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}
.htc-type-card{display:block;border:1px solid var(--htc-line);border-radius:6px;padding:18px;text-decoration:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.htc-type-card:hover{border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-type-card-title{font-size:17px;font-weight:700;color:var(--htc-ink);margin:0 0 8px}
.htc-type-card-desc{font-size:13.5px;color:var(--htc-muted);margin:0 0 12px;line-height:1.5}
.htc-type-card-count{font-size:12px;font-weight:700;color:var(--htc-accent)}
.htc-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.htc-product-card{border:1px solid var(--htc-line);border-radius:6px;background:#fff;transition:border-color .15s,box-shadow .15s}
.htc-product-card:hover{border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-product-card-link{display:block;height:100%;padding:18px;text-decoration:none}
.htc-product-card-body{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:14px;align-items:end;min-height:170px}
.htc-product-card-copy{min-width:0}
.htc-product-card-model{font-size:16px;font-weight:800;color:var(--htc-ink);margin:0 0 12px}
.htc-product-card-specs{list-style:none;margin:0 0 12px;padding:0;font-size:13px;color:var(--htc-muted);display:flex;flex-direction:column;gap:4px}
.htc-product-card-specs strong{color:var(--htc-ink);font-weight:600}
.htc-product-card-cta{font-size:13px;font-weight:700;color:var(--htc-primary)}
.htc-product-card-thumb{display:block;align-self:end;width:128px;aspect-ratio:4/3;border:1px solid var(--htc-line);border-radius:4px;background:#f8f9fa;overflow:hidden}
.htc-product-card-thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
@media(max-width:980px){.htc-type-grid,.htc-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.htc-type-grid,.htc-product-grid{grid-template-columns:1fr}.htc-product-card-body{grid-template-columns:minmax(0,1fr) 112px}.htc-product-card-thumb{width:112px}}
.htc-archive-cta{margin-top:48px;padding-top:32px;border-top:1px solid var(--htc-line)}
.htc-archive-cta h2{font-size:24px;margin:0 0 8px}
.htc-archive-cta>p{color:var(--htc-muted);margin:0 0 20px;max-width:680px}
/* ── Tab navigation ───────────────────────────────────────── */
.htc-tab-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;border-bottom:2px solid var(--htc-line);padding-bottom:0}
.htc-tab{display:inline-block;padding:10px 18px;font-size:14px;font-weight:600;color:var(--htc-muted);text-decoration:none;border-radius:4px 4px 0 0;border:1px solid transparent;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s,background .15s}
.htc-tab:hover{color:var(--htc-ink);background:var(--htc-bg)}
.htc-tab.is-active{color:var(--htc-primary);border-color:var(--htc-line);border-bottom-color:var(--htc-surface);background:var(--htc-surface)}
.htc-subtab-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.htc-subtab{display:inline-block;padding:6px 14px;font-size:13px;font-weight:600;color:var(--htc-muted);text-decoration:none;border:1.5px solid var(--htc-line);border-radius:999px;background:#fff;transition:color .15s,border-color .15s}
.htc-subtab:hover{border-color:var(--htc-primary);color:var(--htc-primary)}
.htc-subtab.is-active{background:var(--htc-primary);color:#fff;border-color:var(--htc-primary)}
/* ── 4-column product grid ────────────────────────────────── */
.htc-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.htc-grid-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.htc-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.htc-grid-4{grid-template-columns:1fr}}
.htc-product-card--acc{border-top:3px solid var(--htc-accent)}
.htc-product-card-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--htc-accent);background:rgba(184,115,51,.07);padding:2px 8px;border-radius:4px;margin-bottom:8px}
.htc-no-results{color:var(--htc-muted);padding:32px 0;font-size:15px}
/* ── Pagination ───────────────────────────────────────────── */
.htc-pagination{margin:36px 0 0;display:flex;justify-content:center}
.htc-pagination .nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.htc-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1.5px solid var(--htc-line);border-radius:4px;font-size:14px;font-weight:600;color:var(--htc-muted);text-decoration:none;background:#fff;transition:border-color .15s,color .15s,background .15s}
.htc-pagination .page-numbers:hover{border-color:var(--htc-primary);color:var(--htc-primary)}
.htc-pagination .page-numbers.current{background:var(--htc-primary);border-color:var(--htc-primary);color:#fff}
.htc-pagination .page-numbers.dots{border-color:transparent;background:transparent;pointer-events:none}
.htc-pagination .prev,.htc-pagination .next{font-size:13px;padding:0 14px}
/* ── v3.0.1 additions: sidebar tech-library panel, accessories block,
same-type product navigation ─────────────────────────────────────── */
/* Sidebar panel under the sticky TOC */
.htc-side-panel{margin-top:22px;padding-top:18px;border-top:1px solid var(--htc-line)}
.htc-side-panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--htc-muted);font-weight:700;margin:0 0 12px}
.htc-techlib-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.htc-techlib-list a{display:block;text-decoration:none;border:1px solid var(--htc-line);border-radius:4px;padding:10px 12px;transition:border-color .15s,box-shadow .15s,transform .12s}
.htc-techlib-list a:hover{border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06);transform:translateY(-1px)}
.htc-techlib-link-title{display:block;font-weight:700;font-size:13.5px;color:var(--htc-primary);line-height:1.3;margin-bottom:3px}
.htc-techlib-link-desc{display:block;font-size:12px;color:var(--htc-muted);line-height:1.4}
/* Accessories & components block */
.htc-acc-section{margin-top:40px;padding-top:30px;border-top:1px solid var(--htc-line)}
.htc-acc-section h2{font-size:22px;margin:0 0 8px}
.htc-acc-intro{color:var(--htc-muted);font-size:14.5px;margin:0 0 20px;max-width:680px;line-height:1.6}
.htc-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.htc-acc-card{display:block;border:1px solid var(--htc-line);border-radius:6px;padding:16px;text-decoration:none;background:#fff;transition:border-color .15s,box-shadow .15s,transform .12s}
.htc-acc-card:hover{border-color:var(--htc-accent);box-shadow:0 1px 2px rgba(0,15,34,.06);transform:translateY(-2px)}
.htc-acc-card-title{font-size:15px;font-weight:700;color:var(--htc-ink);margin:0 0 6px}
.htc-acc-card-desc{font-size:12.5px;color:var(--htc-muted);line-height:1.45;margin:0 0 10px}
.htc-acc-card-count{font-size:11.5px;font-weight:700;color:var(--htc-accent)}
/* Same-type previous / next navigation */
.htc-stn{margin-top:36px;padding-top:26px;border-top:1px solid var(--htc-line)}
.htc-stn-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--htc-muted);font-weight:700;margin:0 0 14px}
.htc-stn-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.htc-stn-row{grid-template-columns:1fr}}
.htc-stn-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--htc-line);border-radius:6px;padding:16px 18px;text-decoration:none;background:#fff;transition:border-color .15s,box-shadow .15s,transform .12s}
.htc-stn-card:hover{border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06);transform:translateY(-2px)}
.htc-stn-next{text-align:right;align-items:flex-end}
.htc-stn-dir{font-size:12px;font-weight:700;color:var(--htc-accent);text-transform:uppercase;letter-spacing:.4px}
.htc-stn-model{font-size:16px;font-weight:800;color:var(--htc-ink)}
.htc-stn-meta{font-size:12.5px;color:var(--htc-muted)}
/* ── heatingfilm.com catalog additions: archive subnav, product header, layout ── */
.htc-main{min-width:0}
.htc-product-head{margin-bottom:18px}
.htc-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--htc-primary);font-weight:700;margin:0 0 6px}
.htc-product-excerpt{color:var(--htc-muted);font-size:16px;line-height:1.6;margin:6px 0 0}
.htc-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.htc-subnav-link{display:inline-block;padding:7px 14px;border:1px solid var(--htc-line);border-radius:999px;text-decoration:none;color:var(--htc-ink);font-size:13.5px;font-weight:600;background:#fff;transition:border-color .15s,color .15s,background .15s}
.htc-subnav-link:hover{border-color:var(--htc-primary);color:var(--htc-primary);background:var(--htc-bg)}
.htc-techlib-panel{margin-top:0}
.htc-config-compact .htc-config-inner{padding:0}
.aes-rec-grid{margin-top:18px}
/* Hero accent handled by theme; plugin keeps neutral surfaces */
/* ── Pagination (core the_posts_pagination output) ─────────────────────── */
.htc-page .navigation.pagination,.htc-page nav.pagination,.htc-archive-page .pagination{margin:38px 0 6px}
.htc-page .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.htc-page .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--htc-line);border-radius:4px;text-decoration:none;color:var(--htc-ink);font-weight:600;background:#fff;line-height:1;transition:border-color .15s,color .15s,background .15s}
.htc-page .page-numbers:hover{border-color:var(--htc-primary);color:var(--htc-primary)}
.htc-page .page-numbers.current{background:var(--htc-primary);color:#fff;border-color:var(--htc-primary)}
.htc-page .page-numbers.dots{border-color:transparent;background:transparent;min-width:auto;padding:0 4px}
.htc-page .page-numbers.prev,.htc-page .page-numbers.next{font-weight:700}
/* ── In-content product image ──────────────────────────────────────────── */
.htc-product-figure{margin:18px 0 24px;border:1px solid var(--htc-line);border-radius:6px;overflow:hidden;background:var(--htc-bg)}
.htc-product-figure img{display:block;width:100%;height:auto}
.htc-product-figure figcaption{padding:10px 14px;font-size:13px;color:var(--htc-muted);border-top:1px solid var(--htc-line);background:#fff}
/* ── Accessories module (rendered last) ────────────────────────────────── */
.htc-acc-section{margin-top:42px;padding-top:30px;border-top:2px solid var(--htc-line)}
.htc-acc-section h2{font-size:22px;margin:0 0 8px}
.htc-acc-intro{color:var(--htc-muted);font-size:14.5px;margin:0 0 18px;max-width:680px;line-height:1.6}
.htc-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.htc-acc-card{border:1px solid var(--htc-line);border-radius:6px;padding:15px 16px;background:#fff}
.htc-acc-card-title{font-size:15px;font-weight:700;color:var(--htc-ink);margin:0 0 6px}
.htc-acc-card-desc{font-size:13px;color:var(--htc-muted);line-height:1.5;margin:0}
/* ── Heater-specific additions ───────────────────────────────────────── */
.htc-table-wrap{overflow-x:auto;margin:14px 0 22px;border:1px solid var(--htc-line);border-radius:6px}
.htc-spec-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.htc-spec-table th,.htc-spec-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--htc-line);white-space:nowrap}
.htc-spec-table thead th{background:var(--htc-primary);color:#fff;font-weight:600;position:sticky;top:0}
.htc-spec-table tbody tr:nth-child(even){background:var(--htc-bg)}
.htc-related-links{margin:8px 0 0;padding-left:18px;line-height:1.9}
.htc-related-links a{color:var(--htc-primary);font-weight:600;text-decoration:none}
.htc-related-links a:hover{text-decoration:underline}
.htc-result-sub{margin:4px 0 0;color:var(--htc-muted);font-size:13px}
.htc-result-price{display:inline-block;margin:6px 0;font-weight:700;color:var(--htc-accent-ink)}
.htc-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--htc-primary);font-weight:700;margin:0 0 6px}
.htc-product-excerpt{color:var(--htc-muted);font-size:16px;line-height:1.6;margin:6px 0 0}
.htc-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.htc-subnav-link{display:inline-block;padding:7px 14px;border:1px solid var(--htc-line);border-radius:999px;text-decoration:none;color:var(--htc-ink);font-size:13.5px;font-weight:600;background:#fff}
.htc-subnav-link:hover{border-color:var(--htc-primary);color:var(--htc-primary)}
.htc-side-list{list-style:none;margin:0;padding:0}
.htc-side-list li{border-bottom:1px solid var(--htc-line)}
.htc-side-list a{display:block;padding:9px 0;text-decoration:none;color:var(--htc-ink)}
.htc-side-link-title{display:block;font-weight:600;font-size:13.5px}
.htc-side-link-meta{display:block;font-size:12px;color:var(--htc-muted)}
.htc-page .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:30px 0}
.htc-page .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--htc-line);border-radius:4px;text-decoration:none;color:var(--htc-ink);font-weight:600;background:#fff}
.htc-page .page-numbers.current{background:var(--htc-primary);color:#fff;border-color:var(--htc-primary)}
.htc-page .page-numbers:hover{border-color:var(--htc-primary);color:var(--htc-primary)}
/* ── Technical drawing (SVG schematic) ────────────────────────────────── */
.htc-schematic-section{margin:22px 0 26px}
.htc-sch-help{color:var(--htc-muted);font-size:14px;margin:0 0 12px}
.htc-schematic{border:1px solid var(--htc-line);border-radius:6px;background:#fff;padding:14px}
.htc-sch-svg{display:block;width:100%;max-width:560px;margin:0 auto;height:auto;background:repeating-linear-gradient(0deg,#f8f9fa,#f8f9fa 19px,#f3f4f5 20px),repeating-linear-gradient(90deg,#f8f9fa,#f8f9fa 19px,#f3f4f5 20px);border-radius:4px}
/* Parametric drawing — controls grid */
.htc-schematic{position:relative}
.htc-sch-help{margin:6px 0 14px;font-size:13.5px;color:var(--htc-muted);line-height:1.55}
.htc-sch-svg{display:block;width:100%;height:auto;max-height:340px;background:linear-gradient(180deg,#f8f9fa,#f8f9fa);border:1px solid var(--htc-line);border-radius:6px;padding:10px}
.htc-sch-caption{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;margin:10px 0 16px;padding:10px 14px;background:#f8f9fa;border:1px dashed var(--htc-line);border-radius:4px;font-size:13px;color:var(--htc-ink)}
.htc-sch-caption span{display:block;line-height:1.45}
.htc-sch-caption strong{color:var(--htc-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;display:block}
.htc-sch-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 14px;margin:14px 0 4px;padding:14px 16px;background:#fff;border:1px solid var(--htc-line);border-radius:6px;box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-sch-lbl{display:flex;flex-direction:column;gap:5px;font-size:13px}
.htc-sch-lbl-text{font-weight:600;color:var(--htc-ink);font-size:12.5px;letter-spacing:.2px}
.htc-sch-controls select{width:100%;padding:8px 30px 8px 11px;border:1px solid var(--htc-line);border-radius:4px;font-size:14px;line-height:1.3;background:#fff url("data:image/svg+xml;utf8,") no-repeat right 10px center/10px 7px;appearance:none;-webkit-appearance:none;color:var(--htc-ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.htc-sch-controls select:hover{border-color:var(--htc-primary)}
.htc-sch-controls select:focus{outline:none;border-color:var(--htc-primary);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.htc-sch-rfq{margin:14px 0 4px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.htc-sch-rfq-hint{font-size:13px;color:var(--htc-muted)}
.htc-sch-quote{flex-shrink:0}
@media(max-width:600px){.htc-sch-controls{grid-template-columns:1fr 1fr;padding:12px 14px;gap:10px}.htc-sch-caption{grid-template-columns:1fr 1fr;font-size:12.5px}.htc-sch-rfq{flex-direction:column;align-items:stretch}.htc-sch-quote{width:100%}}
@media(max-width:380px){.htc-sch-controls,.htc-sch-caption{grid-template-columns:1fr}}
/* Selected-configuration panel inside the inquiry form */
.htc-selected-model{display:none;margin:0 0 14px;padding:12px 16px 14px;background:linear-gradient(180deg,#f4f8fc,#fff);border:1px solid var(--htc-primary);border-left:4px solid var(--htc-primary);border-radius:4px}
.htc-selected-model.is-on{display:block}
.htc-sel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.htc-sel-title{font-weight:700;color:var(--htc-primary);font-size:14px;letter-spacing:.2px;text-transform:uppercase;margin:0}
.htc-sel-sub{font-size:12.5px;color:var(--htc-muted)}
.htc-sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 16px;margin:0;padding:0;list-style:none;font-size:13.5px}
.htc-sel-grid li{line-height:1.4}
.htc-sel-grid .k{display:block;font-size:11.5px;color:var(--htc-muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600;margin-bottom:1px}
.htc-sel-grid .v{display:block;color:var(--htc-ink);font-weight:600}
@media(max-width:520px){.htc-sel-grid{grid-template-columns:1fr 1fr}}
.htc-sch-caption{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--htc-muted)}
.htc-sch-caption span strong{color:var(--htc-ink)}
/* SVG primitives */
/* ── Line types, ISO 128 ────────────────────────────────────────────────
Type A visible outline continuous thick
Type B dimension / hatch continuous thin
Type E hidden dashed thin
Type G centre / pitch long chain thin (dash-dot)
The thick:thin ratio is 2:1. Everything is monochrome — a drawing that
colours its dimensions reads as an infographic, not as a drawing. */
.fs-ln{fill:none;stroke:#191c1d;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.fs-thin{fill:none;stroke:#191c1d;stroke-width:.75}
.fs-cl{stroke:#191c1d;stroke-width:.65;stroke-dasharray:14 3 2.5 3;fill:none}
/* Minor diameter of a thread: ISO 6410 says thin CONTINUOUS, not dashed. */
.fs-thr{stroke:#191c1d;stroke-width:.75;fill:none}
.fs-hatch{stroke:#191c1d;stroke-width:.6;fill:none}
.fs-dim{fill:none;stroke:#191c1d;stroke-width:.7}
.fs-ext{fill:none;stroke:#191c1d;stroke-width:.7}
.fs-arrow{fill:#191c1d;stroke:none}
.fs-dot{fill:var(--htc-primary)}
.fs-tx{fill:#191c1d;font-size:10.5px;font-family:"ISOCPEUR","osifont",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.fs-sub{fill:var(--htc-muted);font-size:10px}
.fs-title{fill:var(--htc-ink);font-size:11px;font-weight:600}
.htc-result-drawing{margin-top:12px;border-top:1px dashed var(--htc-line);padding-top:12px}
/* refined thread + control layout */
/* Kept as an alias so older renderers that still ask for the dashed minor
diameter get the correct thin continuous line instead. */
.fs-thr-d{stroke:#191c1d;stroke-width:.75;fill:none}
/* Hidden edge (feature behind the cutting plane) — dashed, per ISO 128.
Used by the coupling-nut through-thread and the shaft-collar set-screw hole. */
.fs-hid{fill:none;stroke:#191c1d;stroke-width:.75;stroke-dasharray:6 3}
/* product page layout: schematic → RFQ → spec table */
.htc-quote-section{margin:22px 0;padding:18px 20px;background:var(--htc-bg);border:1px solid var(--htc-line);border-radius:6px}
.htc-quote-section h2{margin-top:0}
.htc-quote-help{margin:0 0 14px;color:var(--htc-muted);font-size:14px}
.htc-spec-section{margin:22px 0}
.htc-spec-help{margin:0 0 8px;color:var(--htc-muted);font-size:13px}
@media(max-width:600px){.htc-quote-section{padding:14px 16px}}
/* Tip lists used in SEO body sections */
.htc-bullets{margin:8px 0;padding-left:22px;list-style:disc}
.htc-bullets li{margin:6px 0;line-height:1.55}
/* Clickable spec-table rows — when the Heater SEO Pages plugin is active,
each row that maps to a /guide/size/{size}-{product}/ page becomes a link.
The whole reacts to hover/click; the first cell carries the real . */
.htc-spec-table--linked tbody tr.htc-row-link{cursor:pointer;transition:background-color .12s ease}
.htc-spec-table--linked tbody tr.htc-row-link:hover,
.htc-spec-table--linked tbody tr.htc-row-link:focus{background:#edeeef;outline:none}
.htc-spec-table--linked tbody tr.htc-row-link:focus-within{background:#edeeef}
.htc-spec-table--linked tbody tr.htc-row-link .htc-row-link__a{color:var(--htc-primary,#345076);text-decoration:none;font-weight:600}
.htc-spec-table--linked tbody tr.htc-row-link:hover .htc-row-link__a{text-decoration:underline}
.htc-spec-table--linked tbody tr.htc-row-link::after{display:none}
.htc-spec-table--linked tbody tr.htc-row-link td:first-child{position:relative}
/* ═══ Answer-first spec summary (1.8.0) ══════════════════════════════════ */
.htc-answer { border-left:3px solid #345076; padding:0 0 0 1.15rem; margin:1.4rem 0 2rem; }
.htc-answer-lead { font-size:1.0625rem; line-height:1.65; color:#191c1d; margin:0 0 1rem; }
.htc-answer-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.55rem 1.5rem; margin:0 0 .9rem; }
.htc-answer-point dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.045em; color:#5b5f64; font-weight:600; margin:0 0 .1rem; }
.htc-answer-point dd { margin:0; font-size:1rem; color:#191c1d; font-weight:600; font-variant-numeric:tabular-nums; }
.htc-answer-note { font-size:.8125rem; line-height:1.5; color:#5b5f64; margin:0; }
@media (max-width:640px){ .htc-answer{padding-left:.9rem;} .htc-answer-lead{font-size:1rem;} }
/* ── Precision Industrial System alignment ─────────────────────────────── */
/* The finder is the densest tool on the site, so it leans hardest on the
4/8px rhythm, hairline outlines and label-caps field labels. */
.htc-config{border-radius:4px}
.htc-config-banner{background:#000f22}
.htc-config-head{text-align:left}
.htc-config-title{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.015em}
.htc-config-sub{font-size:16px;line-height:24px}
.htc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C68119}
.htc-steps li{border-radius:2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}
.htc-lbl{letter-spacing:.1em;color:#43474d}
.htc-input{border-width:1px;border-radius:4px;height:40px}
.htc-input:focus{border-color:#345076;box-shadow:inset 0 0 0 1px #345076}
.htc-advanced{border-radius:4px}
.htc-btn{border-radius:4px;height:44px;font-size:14px;letter-spacing:.01em;
transition:background-color .15s,border-color .15s,color .15s}
.htc-btn:hover{transform:none}
.htc-btn-primary{background:#C68119}
.htc-btn-primary:hover{background:#a86c12}
.htc-btn-secondary{background:#000f22}
.htc-btn-secondary:hover{background:#0a2540}
.htc-btn-ghost{border-width:1px;border-color:#D1D5DB;color:#000f22;background:#fff}
.htc-btn-ghost:hover{border-color:#345076;color:#345076}
/* Cards: border shift, not lift. */
.htc-product-card,.htc-type-card,.htc-acc-card,.htc-techlib-panel,.htc-toc{
border-radius:4px;box-shadow:none;transition:border-color .15s}
.htc-product-card:hover,.htc-type-card:hover,.htc-acc-card:hover{
border-color:#345076;box-shadow:none;transform:none}
.htc-product-card-model,.htc-type-card-title,.htc-acc-card-title{font-weight:700;font-size:16px}
.htc-type-card-count,.htc-acc-card-count{font-size:12px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#5b5f64}
.htc-product-card-cta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#345076}
/* Tabs read as a hairline rail with an engineering-blue active edge. */
.htc-tab-nav,.htc-subtab-nav{border-bottom:1px solid #D1D5DB;gap:0}
.htc-tab{border-radius:0;border:0;border-bottom:2px solid transparent;background:none;
font-size:14px;font-weight:600;color:#43474d;padding:10px 16px}
.htc-tab:hover{color:#345076}
.htc-tab.is-active,.htc-tab[aria-selected="true"]{color:#345076;font-weight:700;
border-bottom-color:#345076;background:none}
/* Data tables: steel header, zebra rows, horizontal scroll on mobile. */
.htc-table-wrap{border:1px solid #D1D5DB;border-radius:4px;overflow-x:auto}
.htc-table-wrap table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.htc-table-wrap th{background:#e1e3e4;color:#191c1d;font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:12px;
border-bottom:1px solid #c4c6ce;white-space:nowrap}
.htc-table-wrap td{padding:12px;border-bottom:1px solid #D1D5DB}
.htc-table-wrap tbody tr:nth-child(even){background:#f8f9fa}
/* Standard markings and match meters. */
.htc-std,.htc-tag,.htc-match-pct{font-size:12px;font-weight:700;letter-spacing:.06em;
border-radius:2px;background:#edeeef;color:#345076;padding:3px 7px}
.htc-match-bar{border-radius:2px;background:#e1e3e4;height:6px}
.htc-match-bar>span,.htc-match-bar i{background:#345076;border-radius:2px}
.htc-toc-title,.htc-form-title,.htc-archive-title{font-weight:700;letter-spacing:-.01em}
.htc-pagination a,.htc-pagination span{border-radius:4px;border:1px solid #D1D5DB;font-size:14px}
/* ── Banner variant: dark shell, light content ─────────────────────────────
Only the header and the step rail sit on the dark shell. Every stage that
holds real content — filters, matches, quote form — sits on a white plate.
The plate sets a dark default color and each element then re-states its own
role color (muted meta, accent price, blue emphasis) so the hierarchy inside
the results survives; a blanket "make everything dark" would flatten it. */
.htc-config-banner .htc-config-title{color:#fff}
.htc-config-banner .htc-config-sub{color:rgba(255,255,255,.82)}
.htc-config-banner .htc-steps li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.htc-config-banner .htc-steps li.is-active{background:#C68119;border-color:#C68119;color:#fff}
/* The white plate. .htc-step wraps each of the three stages. */
.htc-config-banner .htc-step{background:#fff;color:#191c1d;padding:20px;border-radius:4px}
.htc-config-banner .htc-grid{background:transparent;padding:0;border-radius:0}
/* Ink roles inside the plate. */
.htc-config-banner .htc-step h2,
.htc-config-banner .htc-step h3,
.htc-config-banner .htc-step h4,
.htc-config-banner .htc-step strong,
.htc-config-banner .htc-result-model,
.htc-config-banner .htc-result-model a,
.htc-config-banner .htc-form-title,
.htc-config-banner .htc-selected-model,
.htc-config-banner .htc-result-specs strong{color:#191c1d}
.htc-config-banner .htc-step p,
.htc-config-banner .htc-step li,
.htc-config-banner .htc-result-sub,
.htc-config-banner .htc-result-specs,
.htc-config-banner .htc-result-specs li,
.htc-config-banner .htc-sch-help,
.htc-config-banner .htc-side-link-meta,
.htc-config-banner .htc-field-hint{color:#43474d}
.htc-config-banner .htc-lbl,
.htc-config-banner .htc-size-lbl,
.htc-config-banner .htc-step label{color:#43474d}
.htc-config-banner .htc-match-pct{color:#345076}
.htc-config-banner .htc-fieldset legend,
.htc-config-banner .htc-advanced summary{color:#345076}
/* Raised to beat the generic `.htc-step p` / `.htc-step span` rules above,
and using the darker ink variant so small orange text clears 4.5:1. */
.htc-config-banner .htc-step .htc-result-price,
.htc-config-banner .htc-step .htc-result-notes{color:#8a5810}
.htc-config-banner .htc-form-msg.ok{color:#1B5E20}
.htc-config-banner .htc-form-msg.err{color:#ba1a1a}
.htc-config-banner .htc-no-results{color:#43474d}
/* Surfaces inside the plate. */
.htc-config-banner .htc-input{background:#fff;color:#191c1d;border-color:#D1D5DB}
.htc-config-banner .htc-input::placeholder{color:#74777e}
.htc-config-banner .htc-advanced,
.htc-config-banner .htc-fieldset,
.htc-config-banner .htc-result-card,
.htc-config-banner .htc-schematic{border-color:#D1D5DB;background:#fff}
.htc-config-banner .htc-result-card.is-top{border-color:#345076}
.htc-config-banner .htc-selected-model{background:#f8f9fa;border-color:#D1D5DB}
.htc-config-banner .htc-match-bar{background:#e1e3e4}
.htc-config-banner .htc-captcha-img{background:#fff;border-color:#D1D5DB}
/* Buttons on the white plate. */
.htc-config-banner .htc-btn-primary{background:#C68119;border:1px solid #C68119;color:#fff}
.htc-config-banner .htc-btn-primary:hover{background:#a86c12;border-color:#a86c12}
.htc-config-banner .htc-btn-secondary{background:#000f22;border:1px solid #000f22;color:#fff}
.htc-config-banner .htc-btn-secondary:hover{background:#0a2540;border-color:#0a2540}
.htc-config-banner .htc-btn-ghost{background:#fff;border:1px solid #D1D5DB;color:#000f22}
.htc-config-banner .htc-btn-ghost:hover{border-color:#345076;color:#345076}
/* Step 1 has a single action, so it spans the plate; steps 2 and 3 have two
or more and keep their natural width. */
.htc-config-banner .htc-step-1 .htc-actions .htc-btn{width:100%}
/* In a narrow column — the hero, a sidebar — the six filters go two-up. */
.ehw-hero-tool .htc-grid,
.ehw-hero-tool .htc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ehw-hero-tool .htc-steps{display:flex;gap:6px;margin-bottom:16px}
.ehw-hero-tool .htc-steps li{font-size:11px;padding:5px 8px;letter-spacing:.06em}
.ehw-hero-tool .htc-actions{margin-top:16px}
.ehw-hero-tool .htc-result-specs{grid-template-columns:1fr 1fr}
@media(max-width:520px){
.ehw-hero-tool .htc-grid,
.ehw-hero-tool .htc-grid-3{grid-template-columns:1fr}
}
/* ── Result card: wrapper-independent colors, tighter layout ───────────────
The colour rules above are scoped through `.htc-step`. If a caching layer
ever serves a stale copy of part of this file, or a future markup change
moves the results out of that wrapper, the text falls back to inheriting
white from the dark hero. These rules key off the result card itself, so
they hold regardless of what wraps it — a card is always on white. */
.htc-result-card{color:#191c1d}
.htc-result-card .htc-result-model,
.htc-result-card .htc-result-model a{color:#191c1d;text-decoration:none}
.htc-result-card .htc-result-sub{color:#43474d}
.htc-result-card .htc-result-specs,
.htc-result-card .htc-result-specs li{color:#43474d}
.htc-result-card .htc-result-specs strong{color:#191c1d}
.htc-result-card .htc-match-pct{color:#345076}
.htc-result-card .htc-result-price,
.htc-result-card .htc-result-notes{color:#8a5810}
.htc-result-card .htc-btn-ghost{color:#000f22;background:#fff;border:1px solid #D1D5DB}
.htc-result-card .htc-btn-primary{color:#fff}
.htc-result-card p{color:#43474d}
.htc-no-match-card{
display:grid;
grid-template-columns:76px minmax(0,1fr);
gap:14px;
align-items:center;
color:#191c1d;
background:#fff;
border-color:#D1D5DB;
}
.htc-no-match-visual{
width:76px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
background:#f8f9fa;
border:1px solid #D1D5DB;
border-radius:4px;
}
.htc-no-match-visual svg{display:block;width:68px;height:52px;overflow:visible}
.htc-no-match-copy h3{
margin:0 0 4px;
font-size:15px;
line-height:20px;
font-weight:700;
color:#191c1d;
}
.htc-no-match-card .htc-no-match-copy p{
margin:0;
font-size:13px;
line-height:18px;
color:#43474d;
}
.htc-no-match-filters{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}
.htc-no-match-filters span{
display:inline-flex;
align-items:center;
min-height:24px;
padding:3px 8px;
border-radius:2px;
background:#edeeef;
color:#345076;
font-size:12px;
font-weight:700;
line-height:16px;
}
.htc-config-banner .htc-step .htc-no-match-card,
.htc-config-banner .htc-step .htc-no-match-card h3,
.htc-config-banner .htc-step .htc-no-match-card span{color:#191c1d}
.htc-config-banner .htc-step .htc-no-match-card p{color:#43474d}
.htc-config-banner .htc-step .htc-no-match-filters span{color:#345076}
@media(max-width:520px){
.htc-no-match-card{grid-template-columns:1fr;align-items:start}
.htc-no-match-visual{width:100%;height:58px}
}
/* Denser card. The old one spent a lot of height on padding and on a match
meter that sat in its own column. */
.htc-result-card{padding:14px 16px;border-radius:4px}
.htc-results{gap:10px}
.htc-result-top{align-items:center;gap:10px;flex-wrap:nowrap}
.htc-result-model{font-size:15px;line-height:20px;font-weight:700}
.htc-result-sub{margin:2px 0 0;font-size:12px;line-height:16px}
/* Match score becomes a compact chip instead of a column with a meter. */
.htc-match{min-width:0;flex:0 0 auto;text-align:right}
.htc-match-pct{display:inline-block;font-size:12px;font-weight:700;line-height:16px;
padding:2px 7px;border-radius:2px;background:#edeeef;font-variant-numeric:tabular-nums}
.htc-match-bar{display:none}
/* Specs go two-up and lose a line of vertical space each. */
.htc-result-specs{margin:10px 0 0;gap:4px 14px;font-size:12px;line-height:16px;
grid-template-columns:repeat(2,minmax(0,1fr))}
.htc-result-price{margin:8px 0 0;font-size:13px}
.htc-result-notes{margin:4px 0 0;font-size:12px;line-height:16px}
.htc-result-actions{margin-top:12px;gap:8px}
.htc-result-actions .htc-btn{height:34px;padding:0 12px;font-size:13px;
display:inline-flex;align-items:center}
/* Inside the hero the panel is narrower still, so actions stack full width
rather than wrapping into ragged rows. */
.ehw-hero-tool .htc-result-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.ehw-hero-tool .htc-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ehw-hero-tool .htc-result-actions .htc-btn{width:100%;justify-content:center}
.ehw-hero-tool .htc-result-actions .htc-btn:nth-child(3){grid-column:1 / -1}
.ehw-hero-tool .htc-config-inner{padding:20px}
.ehw-hero-tool .htc-config-banner .htc-step{padding:16px}
/* White on #C68119 is 3.20:1; the solid button fill uses the darker step so
its label clears 4.5:1. Eyebrows and marks keep the bright value. */
.htc-btn-primary,
.htc-config-banner .htc-btn-primary,
.htc-result-card .htc-btn-primary{background:#9c6410;border-color:#9c6410;color:#fff}
.htc-btn-primary:hover,
.htc-config-banner .htc-btn-primary:hover{background:#8a5810;border-color:#8a5810}
/* ── Collapsible TOC branch ────────────────────────────────────────────────
Sections marked [data-toc-collapse] (Materials & Grades) fold their
sub-headings behind a twisty instead of listing dozens of them flat. */
.htc-toc-list .is-branch{position:relative;padding-left:18px}
.htc-toc-list .is-branch>a{display:inline-block}
.htc-toc-twist{position:absolute;left:0;top:3px;width:16px;height:16px;padding:0;
border:0;background:none;cursor:pointer;color:#5b5f64;line-height:1}
.htc-toc-twist::before{content:"";display:block;width:6px;height:6px;margin:4px 0 0 3px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(-45deg);transition:transform .15s}
.htc-toc-twist[aria-expanded="true"]::before{transform:rotate(45deg);margin-top:2px}
.htc-toc-twist:hover{color:#345076}
.htc-toc-twist::after{content:attr(data-count);position:absolute;left:20px;top:0;
font-size:0;}
.htc-toc-sub{list-style:none;margin:4px 0 4px;padding:0 0 0 4px;
border-left:1px solid #D1D5DB}
.htc-toc-sub[hidden]{display:none}
.htc-toc-sub a{font-size:12px;line-height:16px;color:#5b5f64}
.htc-toc-sub a:hover{color:#345076}
/* ── Product photograph beside the technical drawing ──────────────────────
* The drawing says what the heater IS; the photograph says what arrives in
* the box. Both are wanted, and the photograph changes with the designation
* the visitor selects — so it sits next to the drawing rather than at the top
* of the page where it would be read as decoration.
*
* Hidden with the `hidden` attribute when the library has no photograph for
* the selected designation: an empty frame is worse than no frame, because it
* reads as a failed load rather than as coverage that does not extend to that
* size yet.
*/
.htc-sch-photo {
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.htc-sch-photo[hidden] { display: none !important; }
.htc-sch-photo img {
display: block;
width: 100%;
max-width: 460px;
aspect-ratio: 4 / 3;
object-fit: contain;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 10px;
box-sizing: border-box;
}
.htc-sch-photo figcaption {
margin-top: 8px;
font-size: 0.85em;
font-weight: 600;
letter-spacing: 0.04em;
color: #5b6b7c;
}
/* Side by side once there is room for both to be legible. Below that the
photograph goes under the drawing rather than shrinking, because a heater
photographed against white loses all detail at small sizes. */
@media (min-width: 900px) {
.htc-schematic-section {
--htc-sch-gap: 24px;
}
.htc-sch-photo {
margin-top: 0;
align-self: start;
}
}
/* ── Category card thumbnail ──────────────────────────────────────────────
* Sampled from the category's own first product. Contained rather than
* cropped: these are studio shots of round objects on white, and object-fit
* cover would slice the outer ring off every one of them.
*/
.htc-type-card.has-thumb {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-areas:
"thumb title"
"thumb desc"
"thumb count";
column-gap: 16px;
align-items: start;
}
.htc-type-card-thumb { grid-area: thumb; align-self: center; }
.htc-type-card.has-thumb .htc-type-card-title { grid-area: title; }
.htc-type-card.has-thumb .htc-type-card-desc { grid-area: desc; }
.htc-type-card.has-thumb .htc-type-card-count { grid-area: count; }
.htc-type-card-thumb img {
display: block;
width: 92px;
height: 92px;
object-fit: contain;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 6px;
box-sizing: border-box;
}
@media (max-width: 560px) {
.htc-type-card.has-thumb {
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 12px;
}
.htc-type-card-thumb img { width: 64px; height: 64px; }
}
/* ── Shared figure, used by guide and application pages ───────────────────
* One treatment for every generated page type. Four page types with four
* image treatments is how a generated site starts to look generated.
*/
.htc-figure {
margin: 26px 0 30px;
padding: 0;
}
.htc-figure img {
display: block;
width: 100%;
max-height: 460px;
object-fit: cover;
border-radius: 14px;
border: 1px solid #e5e7eb;
}
.htc-figure figcaption {
margin-top: 10px;
font-size: 0.87em;
line-height: 1.5;
color: #5b6b7c;
}
/* ── Gaps found by the class audit ────────────────────────────
Markup emitted these; no rule existed anywhere. */
/* FAQ list wrapper (class-htc-toc-faq.php). The items were styled, the
list itself was not, so the block ran flush against the heading. */
.htc-faq-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 0}
.htc-faq-list .htc-faq-item.is-generic{opacity:.92}
/* Full size table under the configurator on a product page. */
.htc-spec-table-below{margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--htc-line)}
.htc-spec-table-below>h3{margin:0 0 4px;font-size:clamp(17px,2.2vw,21px);color:var(--htc-ink)}
.htc-spec-table-below>.hsp-note{margin:0 0 14px;color:var(--htc-muted);font-size:13.5px}
/* Product page wrapper — a modifier on .htc-page, so only the extra
bottom room the product layout needs. */
.htc-product-page{padding-bottom:44px}
/* ── Contextual internal-link block (HSP_Interlink) ───────────
Rendered on product, guide and application pages, so the rule lives here
rather than in one plugin's stylesheet. Styled as a quiet aside: it is
navigation written as prose, and it should not compete with the body it
sits under. */
.hsp-interlink{
margin:28px 0;padding:20px 22px;
border:1px solid var(--htc-line);border-left:3px solid var(--htc-accent);
border-radius:var(--htc-radius);background:var(--htc-bg);
}
.hsp-interlink>h2{
margin:0 0 10px;font-size:clamp(16px,2vw,19px);font-weight:700;color:var(--htc-ink);
}
.hsp-interlink p{margin:0 0 10px;font-size:15px;line-height:1.7;color:var(--htc-ink)}
.hsp-interlink p:last-child{margin-bottom:0}
.hsp-interlink a{color:var(--htc-primary-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hsp-interlink a:hover{color:var(--htc-accent-ink)}
@media(max-width:520px){.hsp-interlink{padding:16px}}