/* ===== Product detail page (product.html) — QATM-style layout on the ETS palette ===== */
.dt-eyebrow{display:block;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.dt-sec{padding:96px 0;scroll-margin-top:calc(var(--nav-h) + 60px)}
.dt-sec h2{font-size:34px;font-weight:300;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 28px}
.dt-sec.alt{background:#f3f5f6}
.dt-center{text-align:center}
.dt-center h2{margin-bottom:12px}
.dt-center .dt-eyebrow{margin-bottom:10px}

/* Hero */
.dt-hero{position:relative;min-height:560px;background:linear-gradient(180deg,#f6f8f9,#e9eef1);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);padding:48px 0 120px}
.dt-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch;min-height:520px}
.dt-hero .txt{min-width:0;display:flex;flex-direction:column;justify-content:center}
.dt-hero h1{font-size:40px;font-weight:300;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 14px;max-width:640px}
.dt-hero .code{font-size:16px;font-weight:500;color:var(--text-md);margin:0}
.dt-hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.dt-thumbs{display:flex;gap:10px;margin-top:auto;padding-top:44px}
.dt-thumbs button{width:72px;height:72px;border:1px solid var(--line);background:#fff;padding:6px;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,box-shadow .2s;border-radius:2px}
.dt-thumbs button img{width:56px;height:56px;object-fit:contain}
.dt-thumbs button:hover{border-color:var(--accent)}
.dt-thumbs button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dt-hero .pic{min-width:0;display:flex;align-items:center;justify-content:center;min-height:0}
.dt-hero .pic img{max-height:560px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(14,47,61,.18))}

/* Buttons */
.dt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border:1px solid var(--accent);border-radius:2px;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.dt-btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.dt-btn.line{background:transparent;color:var(--accent-dk);border-color:var(--accent-dk)}
.dt-btn.line:hover{background:var(--accent-dk);color:#fff}
.dt-btn svg{width:16px;height:16px}

/* Sticky sub-nav */
.dt-nav{position:sticky;top:var(--nav-h);z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.04)}
.dt-nav .wrap{display:flex;align-items:center;gap:24px;height:62px}
.dt-nav ul{display:flex;gap:34px;flex:1;height:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dt-nav ul::-webkit-scrollbar{display:none}
.dt-nav li{flex:none}
.dt-nav li a{position:relative;display:flex;align-items:center;height:62px;font-size:14px;font-weight:500;color:var(--text-md);white-space:nowrap;transition:color .2s}
.dt-nav li a:hover,.dt-nav li a.on{color:var(--accent)}
.dt-nav li a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.dt-nav .dt-btn{flex:none;height:40px;padding:0 20px}

/* Introduction */
.dt-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.dt-intro .lead{font-size:18px;font-weight:600;line-height:1.6;color:var(--accent-dk);margin:0 0 28px}
.dt-list{margin:0;padding:0;list-style:none}
.dt-list li{border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 14px;font-size:14px;line-height:1.65;color:var(--text-md)}
.dt-intro figure{min-width:0;margin:0;background:#f3f5f6;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:320px}
.dt-intro figure img{width:100%;height:auto;max-height:560px;object-fit:contain}

/* Long description (below the lead, above the feature list) */
.dt-desc{margin:0 0 28px}
.dt-desc p{font-size:15px;line-height:1.75;color:var(--text-md);margin:0 0 14px}
.dt-desc p:last-child{margin-bottom:0}

/* Feature band */
.dt-band{position:relative;background:#12283A center/cover no-repeat;clip-path:polygon(0 0,50% 8%,100% 0,100% 92%,50% 100%,0 92%);padding:150px 0 160px;margin:-8px 0}
.dt-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,47,61,.35),rgba(14,47,61,0) 60%)}
.dt-band .wrap{position:relative}
.dt-band .box{width:520px;max-width:100%;background:rgba(14,47,61,.85);color:#fff;padding:44px 48px;border-radius:2px}
.dt-band .box .dt-eyebrow{color:#9fd4e6}
.dt-band .box h2{font-size:26px;font-weight:300;text-transform:uppercase;letter-spacing:.03em;color:#fff;margin:0 0 22px;line-height:1.25}
.dt-steps{margin:0;padding:0;list-style:none;counter-reset:step}
.dt-steps li{position:relative;padding:0 0 0 44px;margin:0 0 16px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.92);counter-increment:step}
.dt-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.dt-steps li:last-child{margin-bottom:0}

/* Test methods & force range */
.dt-variants{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 0}
.dt-var{display:inline-flex;align-items:center;height:40px;padding:0 20px;border:1px solid var(--accent-dk);border-radius:999px;background:#fff;color:var(--accent-dk);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.dt-var:hover{background:rgba(70,130,180,.12)}
.dt-var.on{background:var(--accent-dk);color:#fff;cursor:default}
.dt-force{max-width:760px;margin:44px auto 0}
.dt-force .bar{position:relative;height:2px;background:var(--accent);margin:0 8px}
.dt-force .bar::before,.dt-force .bar::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);transform:translate(-50%,-50%)}
.dt-force .bar::before{left:0}
.dt-force .bar::after{left:100%}
.dt-force .lbl{display:flex;justify-content:space-between;margin-top:14px;font-size:14px;color:var(--text-md)}
.dt-force .lbl b{display:block;font-size:20px;font-weight:600;color:var(--accent-dk);line-height:1.2}
.dt-force .lbl small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.dt-force .cap{text-align:center;font-size:13px;color:var(--text);margin:14px 0 0}
.dt-methods{max-width:960px;margin:56px auto 0;text-align:left;border-top:1px solid var(--line)}
.dt-method{display:grid;grid-template-columns:76px minmax(0,1fr);gap:28px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.dt-method .ico{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.dt-method .ico svg{width:44px;height:44px;display:block}
.dt-method h3{font-size:20px;font-weight:500;color:var(--accent-dk);margin:6px 0 6px}
.dt-method .std{font-size:14px;color:var(--text-md);margin:0 0 12px;line-height:1.6}
.dt-method .std b{font-weight:500;color:var(--black)}
.dt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dt-chips span{display:inline-block;padding:5px 12px;border:1px solid rgba(70,130,180,.5);border-radius:999px;background:rgba(70,130,180,.08);font-size:12px;font-weight:500;color:var(--accent-dk);line-height:1.3}

/* Technical data */
.dt-famnote{font-size:14px;color:var(--text);margin:-12px 0 28px}
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.dt-spec{width:100%;border-collapse:collapse;font-size:13px;border-top:0}
.dt-spec th,.dt-spec td{text-align:left;padding:11px 16px;border:1px solid var(--line);vertical-align:middle;line-height:1.5;color:var(--text);font-weight:400}
.dt-spec thead th{background:var(--accent-dk);color:#fff;font-weight:500;border-color:rgba(255,255,255,.18);font-size:14px}
.dt-spec thead th a{color:rgba(255,255,255,.85)}
.dt-spec thead th a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dt-spec thead th.cur{background:var(--accent);color:#fff}
.dt-spec tbody th{color:var(--text-md);font-weight:500;width:26%;background:#fff}
.dt-spec tbody tr:nth-child(even) th,.dt-spec tbody tr:nth-child(even) td{background:#f7f9fa}
.dt-spec td.cur{background:rgba(70,130,180,.08);color:var(--black)}
.dt-spec tbody tr:nth-child(even) td.cur{background:rgba(70,130,180,.14)}
.dt-spec.family{min-width:720px;table-layout:fixed}
.dt-spec.family tbody th{width:22%}
.dt-spec.family td{word-wrap:break-word}

/* Downloads */
.dt-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.dt-dl a{display:flex;align-items:center;gap:18px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--text-md);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.dt-dl a:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08);border-color:var(--accent)}
.dt-dl .ico{flex:none;width:48px;height:48px;border-radius:4px;background:rgba(70,130,180,.1);display:grid;place-items:center;color:var(--accent)}
.dt-dl .ico svg{width:26px;height:26px}
.dt-dl b{display:block;font-size:15px;font-weight:500;color:var(--black);line-height:1.4}
.dt-dl small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}

/* FAQ accordion (static <details>, works without JS) */
.dt-faq-wrap{max-width:900px}
.dt-faq{border-top:1px solid var(--line)}
.dt-faq-item{border:1px solid var(--line);border-top:0;background:#fff;transition:border-color .2s}
.dt-faq-item[open]{border-left:3px solid var(--accent)}
.dt-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;cursor:pointer;list-style:none;font-size:16px;font-weight:500;line-height:1.45;color:var(--accent-dk);transition:color .2s}
.dt-faq-item summary::-webkit-details-marker{display:none}
.dt-faq-item summary:hover{color:var(--accent)}
.dt-faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dt-faq-item summary i{position:relative;flex:none;width:22px;height:22px;border:1px solid rgba(70,130,180,.5);border-radius:50%;background:rgba(70,130,180,.08)}
.dt-faq-item summary i::before,.dt-faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);transform:translate(-50%,-50%);transition:transform .25s}
.dt-faq-item summary i::before{width:10px;height:2px}
.dt-faq-item summary i::after{width:2px;height:10px}
.dt-faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.dt-faq-item .ans{padding:0 24px 22px 24px}
.dt-faq-item .ans p{margin:0;font-size:15px;line-height:1.7;color:var(--text-md)}
.dt-faq-item[open] .ans{animation:dt-faq-in .25s ease}
@keyframes dt-faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Related */
.dt-sec .section-head{margin-bottom:36px}
.dt-sec .section-head h2{margin:0}
.rec-grid .pcard{background:#fff;padding:0 0 18px;border:1px solid var(--line);border-radius:4px;margin:0}
.rec-grid .pcard:hover{box-shadow:0 14px 30px rgba(0,0,0,.08)}

/* Not found */
.notfound{padding:120px 0;text-align:center}
.notfound h2{margin-bottom:8px}
.notfound .btn{margin-top:20px}

@media (prefers-reduced-motion:reduce){
  .dt-dl a:hover{transform:none}
  .dt-faq-item[open] .ans{animation:none}
}
@media (max-width:1100px){
  .dt-hero h1{font-size:34px}
  .dt-intro{gap:44px}
}
@media (max-width:900px){
  .dt-hero{min-height:0;padding:36px 0 96px}
  .dt-hero .wrap{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0}
  .dt-hero .pic{order:-1}
  .dt-hero .pic img{max-height:380px}
  .dt-thumbs{padding-top:28px}
  .dt-intro{grid-template-columns:minmax(0,1fr)}
  .dt-intro figure{order:-1;min-height:0}
  .dt-band{padding:110px 0 120px;clip-path:polygon(0 0,50% 5%,100% 0,100% 95%,50% 100%,0 95%)}
  .dt-sec{padding:64px 0}
  .dt-sec h2{font-size:28px}
  .dt-method{grid-template-columns:56px minmax(0,1fr);gap:18px}
  .dt-method .ico{width:56px;height:56px}
  .dt-method .ico svg{width:32px;height:32px}
}
@media (max-width:768px){
  .dt-hero h1{font-size:28px}
  .dt-hero{clip-path:polygon(0 0,100% 0,100% 94%,50% 100%,0 94%)}
  .dt-nav .wrap{gap:14px;height:56px}
  .dt-nav ul{gap:22px}
  .dt-nav li a{height:56px;font-size:13px}
  .dt-nav .dt-btn{padding:0 14px;font-size:13px}
  .dt-band .box{padding:32px 26px}
  .dt-force .lbl b{font-size:17px}
  .dt-dl{grid-template-columns:1fr}
  .dt-faq-item summary{padding:16px 16px;font-size:15px}
  .dt-faq-item .ans{padding:0 16px 18px}
}
@media (max-width:480px){
  .dt-nav .dt-btn span{display:none}
  .dt-nav .dt-btn{width:40px;padding:0}
  .dt-thumbs button{width:60px;height:60px}
  .dt-thumbs button img{width:46px;height:46px}
}