/* ==================================================================
   Product page v2 (Batch W7, Kashif 14 Oct 2026): the web edition of the datasheet.
   Uses the UI kit (kk-kit-www.css): square corners, one red, Inter. Loaded by product.php only.
   ================================================================== */
.pd{--navh:117px;--pd-ink:#1A1719;--pd-text:#3B3F45;--pd-grey:#656A6F;--pd-grey2:#969B9F;--pd-line:#E2E4E7;--pd-light:#F7F8F9;--pd-red:#E4181C}

/* ---------- head: name on the left, the datasheet card on the right ---------- */
.pd-head{padding-bottom:30px}
.pd-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.pd-group{text-decoration:none}
.pd-group:hover{color:var(--red-strong,#B30F13)}
.pd-head .k-h1 sup{font-size:.36em;font-weight:600;color:var(--pd-red);vertical-align:super;margin-left:2px}
.pd-head .k-lead{color:var(--pd-grey)}
.pd-specnote{margin:12px 0 0;font-size:14px;color:var(--pd-grey);max-width:62ch}

.pd-sheet{background:#fff;border:1px solid var(--pd-line);border-left:6px solid var(--pd-red);padding:20px 22px 18px}
.pd-sheet-k{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--pd-ink);letter-spacing:-.01em}
.pd-sheet dl{margin:0 0 16px}
.pd-sheet dl div{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--pd-line)}
.pd-sheet dt{font-size:13.5px;color:var(--pd-grey)}
.pd-sheet dd{margin:0;font-size:14.5px;color:var(--pd-ink);font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pd-dl{display:flex;width:100%}
.pd-sds{display:block;margin-top:12px;font-size:14px;color:var(--pd-ink);text-decoration:underline;text-decoration-color:var(--pd-grey2);text-underline-offset:3px}
.pd-sds:hover{color:var(--pd-red);text-decoration-color:var(--pd-red)}

/* key figures: the value first, then what it is */
.pd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:30px 0 0;border-top:1px solid var(--pd-line)}
.pd-facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:18px 24px 0 0}
.pd-facts div+div{padding-left:24px;border-left:1px solid var(--pd-line)}
.pd-facts dd{margin:0 0 6px;font-size:27px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--pd-ink);font-variant-numeric:tabular-nums}
.pd-facts dd small{display:block;margin-top:4px;font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--pd-grey)}
.pd-facts dt{font-size:14px;line-height:1.35;color:var(--pd-grey)}
.pd-facts dt small{display:block;font-size:12.5px;color:var(--pd-grey2)}

/* ---------- in-page navigation ---------- */
.pd-nav{position:sticky;top:var(--navh);z-index:30;background:#fff;border-bottom:1px solid var(--pd-line)}
.pd-nav .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pd-nav .container::-webkit-scrollbar{display:none}
.pd-nav a{flex:none;padding:15px 14px 13px;font-size:14.5px;font-weight:600;color:var(--pd-grey);text-decoration:none;border-bottom:2px solid transparent}
.pd-nav a:first-child{padding-left:0}
.pd-nav a:hover{color:var(--pd-ink)}
.pd-nav a.on{color:var(--pd-ink);border-bottom-color:var(--pd-red)}

/* ---------- body ---------- */
.pd-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;padding-top:44px;padding-bottom:80px}
.pd-main{min-width:0;max-width:800px}
.pd-sec{scroll-margin-top:calc(var(--navh) + 64px);padding-bottom:44px}
.pd-sec+.pd-sec{padding-top:36px;border-top:1px solid var(--pd-line)}
.pd-sec h2{margin:0 0 18px;font-size:25px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--pd-ink)}
.pd-txt h3,.pd-row h3{margin:0 0 10px;font-size:16.5px;line-height:1.35;font-weight:700;color:var(--pd-ink)}
.pd-txt h4{margin:18px 0 6px;font-size:15.5px;font-weight:700;color:var(--pd-ink)}
.pd-txt p{margin:0 0 12px;font-size:16px;line-height:1.65;color:var(--pd-text);max-width:72ch}
.pd-txt ul{list-style:none;margin:0 0 12px;padding:0}
.pd-txt li{position:relative;padding-left:20px;margin-bottom:8px;font-size:16px;line-height:1.55;color:var(--pd-text)}
.pd-txt li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--pd-red)}
.pd-lead p{margin:0 0 14px;font-size:18px;line-height:1.65;color:var(--pd-ink);max-width:68ch}
.pd-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-top:26px}
.pd-pair>.pd-txt{padding-top:16px;border-top:2px solid var(--pd-ink)}
.pd-sec>.pd-txt+.pd-txt,.pd-pair+.pd-txt{margin-top:26px}
.pd-small{margin:12px 0 0;font-size:14px;color:var(--pd-grey)}
.pd-small a{color:var(--pd-ink)}
.pd-cond{font-size:14px!important;color:var(--pd-grey)!important;margin:0 0 10px!important}

/* tables: set like the datasheet (a firm rule on top, hairlines between rows) */
.pd-tech+.pd-tech{margin-top:30px}
.pd-tw{overflow-x:auto;margin:0 0 14px;border-top:2px solid var(--pd-ink)}
.pd-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pd-t th,.pd-t td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--pd-line);font-size:15px;line-height:1.45}
.pd-t tbody th{width:46%;font-weight:500;color:var(--pd-text)}
.pd-t th small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--pd-grey)}
.pd-t td{font-weight:600;color:var(--pd-ink)}
.pd-t .pd-span{width:auto;padding-top:16px;font-weight:700;color:var(--pd-ink);background:none}
.pd-grid thead th{padding:10px 14px 10px 0;font-size:13.5px;font-weight:700;color:var(--pd-ink);background:var(--pd-light);border-bottom:1px solid var(--pd-line)}
.pd-grid thead th:first-child,.pd-grid tbody th:first-child{padding-left:10px}
.pd-grid tbody th{width:auto;min-width:150px}
.pd-grid td{white-space:normal}
.pd-nwrap{padding-right:0!important}
.pd-nlab{font-size:14px;font-weight:600;color:var(--pd-ink);margin:0 0 6px}
.pd-nest{width:100%;border-collapse:collapse;margin:0;table-layout:fixed}
.pd-t .pd-nest th{width:auto}
.pd-t .pd-nwrap .pd-nest th[scope=row]{width:46%}
.pd-nest th,.pd-nest td{padding:7px 12px 7px 0;font-size:14.5px;border-bottom:1px solid var(--pd-line);text-align:left;vertical-align:top}
.pd-nest tr:first-child>*{font-weight:700;color:var(--pd-ink);font-size:13.5px}
.pd-nest tr:last-child>*{border-bottom:0}
.pd-nest th[scope=row]{font-weight:500;color:var(--pd-text)}
.pd-tnote{font-size:14px!important;color:var(--pd-grey)!important}

/* how to use: one panel per step, the first open */
.pd-acc{border-top:1px solid var(--pd-line)}
.pd-acc:last-of-type{border-bottom:1px solid var(--pd-line)}
.pd-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:600;color:var(--pd-ink)}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary::after{content:"";flex:none;width:12px;height:12px;background:
  linear-gradient(var(--pd-ink),var(--pd-ink)) center/12px 2px no-repeat,
  linear-gradient(var(--pd-ink),var(--pd-ink)) center/2px 12px no-repeat}
.pd-acc[open] summary::after{background:linear-gradient(var(--pd-ink),var(--pd-ink)) center/12px 2px no-repeat}
.pd-acc summary:hover{color:var(--pd-red)}
.pd-acc summary:focus-visible{outline:2px solid var(--pd-red);outline-offset:2px}
.pd-acc>.pd-txt{padding:0 0 18px}
.pd-safety{border-top:0}
.pd-safety summary h2{margin:0}

.pd-note{background:var(--pd-light);border-left:4px solid var(--pd-grey2);padding:16px 20px 6px}
.pd-note+.pd-note{margin-top:14px}

.pd-rows{border-top:2px solid var(--pd-ink)}
.pd-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:18px 0 8px;border-bottom:1px solid var(--pd-line)}
.pd-row h3{margin-top:2px}

/* ---------- rail ---------- */
.pd-rail{display:grid;gap:18px}
.pd-card{border:1px solid var(--pd-line);background:#fff;padding:20px 22px}
.pd-card h2{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pd-red)}
.pd-links{list-style:none;margin:0;padding:0}
.pd-links a{display:block;padding:11px 0;border-top:1px solid var(--pd-line);text-decoration:none}
.pd-links li:first-child a{border-top:0;padding-top:4px}
.pd-links b{display:block;font-size:15px;font-weight:600;color:var(--pd-ink)}
.pd-links span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--pd-grey)}
.pd-links a:hover b{color:var(--pd-red)}
.pd-more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--pd-ink);text-decoration:underline;text-decoration-color:var(--pd-grey2);text-underline-offset:3px}
.pd-more:hover{color:var(--pd-red)}
.pd-ask p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--pd-grey)}
.pd-ask .btn{display:flex;width:100%}

/* ---------- smaller screens ---------- */
@media(max-width:1100px){
  .pd-body{grid-template-columns:minmax(0,1fr) 280px;gap:40px}
}
@media(max-width:900px){
  .pd{--navh:73px}
  .pd-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .pd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-facts div:nth-child(3){padding-left:0;border-left:0}
  .pd-body{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:32px}
  .pd-pair{grid-template-columns:minmax(0,1fr);gap:24px}
  .pd-row{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media(max-width:560px){
  .pd-facts dd{font-size:22px}
  .pd-facts div{padding-right:12px}
  .pd-facts div+div{padding-left:14px}
  .pd-facts div:nth-child(3){padding-left:0}
  .pd-sec h2{font-size:22px}
  .pd-lead p{font-size:17px}
  .pd-t tbody th{width:44%}
  .pd-t th,.pd-t td{font-size:14.5px;padding-right:10px}
}
@media print{
  .pd-nav,.pd-rail,.k-acts,.pd-specnote{display:none}
  .pd-body{display:block}
  .pd-acc>.pd-txt{display:block}
}

/* ---------- system page (Batch W7) ---------- */
.pd-intro{margin:-6px 0 18px;font-size:15.5px;color:var(--pd-grey)}
.sy-fig{margin:0 0 22px;padding:14px 16px 10px;background:#fff;border:1px solid var(--pd-line)}
.sy-fig svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.sy-fig figcaption{margin-top:6px;font-size:13px;color:var(--pd-grey)}
.sy-t thead th{padding:10px 14px 10px 0;font-size:13.5px;font-weight:700;color:var(--pd-ink);background:none;border-bottom:1px solid var(--pd-line)}
.sy-t .sy-n{width:44px;padding-left:2px}
.pd-t.sy-t tbody th{width:38%;font-weight:600;color:var(--pd-ink)}
.sy-t tbody th a{color:var(--pd-ink);text-decoration:underline;text-decoration-color:var(--pd-grey2);text-underline-offset:3px}
.sy-t tbody th a:hover{color:var(--pd-red);text-decoration-color:var(--pd-red)}
.sy-t td{font-weight:500}
.sy-t th small{font-weight:400}
.sy-t .sy-note{margin-top:4px;color:var(--pd-grey);font-size:13.5px;line-height:1.45}
.sy-b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pd-red);color:#fff;font-size:12px;font-weight:700}
.sy-opt .sy-b{background:#fff;color:var(--pd-red);box-shadow:inset 0 0 0 1.5px var(--pd-red)}
.sy-tag{display:inline-block;margin-left:8px;padding:1px 7px;font-size:12px;font-weight:600;color:var(--pd-grey);border:1px solid var(--pd-line);vertical-align:1px}
.sy-sub th,.sy-sub td{background:var(--pd-light);font-weight:500!important;color:var(--pd-text)!important}
.sy-3d{margin-top:22px}
.sy-3d .sys3d{display:block;padding-bottom:18px}
/* 3D view: items that are not continuous layers (Batch W8) - copper earthing tape as a grid of strips, divider strips as fins */
.sy-3d .copper .f-top{box-shadow:none}
.sy-3d .copper .f-front,.sy-3d .copper .f-back{background:repeating-linear-gradient(90deg,var(--colS) 0 9px,transparent 9px 46px)}
.sy-3d .copper .f-left,.sy-3d .copper .f-right{background:repeating-linear-gradient(0deg,var(--colS2) 0 9px,transparent 9px 46px)}
.sy-3d .copper .f-bot,.sy-3d .strip .f-bot{background:transparent}
.sy-3d .strip .f-top{box-shadow:none;background-color:transparent;background-image:repeating-linear-gradient(0deg,var(--colS) 0 4px,transparent 4px 70px),repeating-linear-gradient(90deg,var(--colS) 0 4px,transparent 4px 70px)}
.sy-3d .strip .f-top::after{display:none}
.sy-3d .strip .f-front,.sy-3d .strip .f-back{background:repeating-linear-gradient(90deg,var(--colS) 0 4px,transparent 4px 70px)}
.sy-3d .strip .f-left,.sy-3d .strip .f-right{background:repeating-linear-gradient(0deg,var(--colS2) 0 4px,transparent 4px 70px)}
.sy-apps{margin-top:24px}
@media(max-width:560px){
  .sy-t thead{display:none}
  .sy-t tr{display:grid;grid-template-columns:34px minmax(0,1fr);padding:10px 0;border-bottom:1px solid var(--pd-line)}
  .sy-t th,.sy-t td{border:0;padding:2px 0}
  .pd-t.sy-t tbody th{width:auto;grid-column:2}
  .sy-t td{grid-column:2}
  .sy-t td.sy-n{grid-column:1;grid-row:1 / span 3}
  .sy-sub{background:var(--pd-light)}
}