/* ==================================================================
   TRX ELETTRICO — CATALOGUE & PRODUCT PAGES
   ------------------------------------------------------------------
   One coherent stylesheet. Written to replace four generations of
   appended "refinement pass" blocks that had accumulated eighty
   duplicated selectors fighting each other for specificity.

   Design contract
   ---------------
   Voice      industrial documentation: mono metadata, condensed black
              display headings, generous hairlines, no decoration that
              isn't doing work.
   Type       mono labels 9–10.5px / .16em tracking, uppercase.
              Card titles 12.5px display uppercase. Page h1 23–36px.
              Body copy 13–14.5px at 1.75–1.8 leading.
   Colour     black + bone + one hairline grey. Yellow marks state,
              red marks a reference or a hover. Nothing else is
              coloured.
   Geometry   8px cards, 6px controls, 4px chips. Photos always sit on
              a lit stage at a fixed 4:3 so portrait and landscape
              shots share one baseline.
   Elevation  flat at rest; a single soft shadow on hover only.

   Tokens come from header.php :root — --trx-black, --trx-ink,
   --trx-bone, --trx-paper, --trx-yellow, --trx-red, --trx-mute,
   --font-display, --font-body, --font-mono, --container, --gutter.
   ================================================================== */

:root{
  --cat-line:#e8e8e0;
  --cat-line-soft:#f1f1ea;
  --cat-faint:#fcfcfa;
  --cat-stage:radial-gradient(ellipse 66% 56% at 50% 45%,#fff 0%,#fcfcfa 58%,#f5f5f1 100%);
  --cat-lift:0 12px 28px rgba(0,0,0,.075);
  --cat-lift-lg:0 22px 48px rgba(0,0,0,.10);
  --cat-r-card:8px;
  --cat-r-ctl:6px;
  --cat-r-chip:4px;
}

/* Shared primitives ------------------------------------------------ */

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Every label rule below declares its own mono treatment — no shared
   primitive group, so there is exactly one rule per selector and no
   specificity layering to reason about. */

/* ==================================================================
   1. ARCHIVE HEADER
   A dark band that states where you are and how much is here.
   ================================================================== */

.cat-head{
  background:var(--trx-black);color:#fff;position:relative;overflow:hidden;
  padding:clamp(30px,3.6vw,54px) 0 clamp(24px,2.8vw,38px);
}
.cat-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
}
.cat-head::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--trx-yellow) 0 22%,var(--trx-red) 22% 34%,transparent 34%);
}
.cat-head > .container{position:relative}

.cat-head .eyebrow{
  color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.22em;margin-bottom:12px;
}
.cat-head .eyebrow::before{width:22px;background:var(--trx-yellow)}
.cat-head .eyebrow a:hover{color:var(--trx-yellow)}
.cat-head .sep{opacity:.3;margin:0 8px}

.cat-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cat-head h1{
  color:#fff;font-size:clamp(23px,2.6vw,36px);line-height:1.06;letter-spacing:-.015em;
  text-transform:uppercase;text-wrap:balance;
}
.cat-head h1 em{font-style:normal;color:var(--trx-yellow)}

.cat-count{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:baseline;gap:8px;
}
.cat-count .n{
  font-family:var(--font-display);font-size:26px;letter-spacing:-.01em;
  color:var(--trx-yellow);line-height:1;
}

.cat-head-lead{
  font-size:14px;line-height:1.75;color:rgba(255,255,255,.62);
  max-width:58ch;margin-top:14px;text-wrap:pretty;
}
.trx-cat-breadcrumb{margin-bottom:12px}

/* ==================================================================
   2. TOOLBAR — search, sort, mobile filter toggle
   ================================================================== */

.cat-topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--cat-line);
}
.cat-topbar > .container{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  min-height:58px;padding-top:10px;padding-bottom:10px;
}

.cat-search{
  flex:1 1 260px;min-width:0;position:relative;display:flex;align-items:center;
}
.cat-search input{
  width:100%;height:40px;padding:0 14px 0 36px;
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);background:#fff;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--trx-ink);
  transition:border-color .2s,box-shadow .2s;
}
.cat-search input::placeholder{color:#b4b4ac;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.cat-search input:focus{outline:none;border-color:var(--trx-black);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.cat-search svg{
  position:absolute;left:12px;width:14px;height:14px;color:#b4b4ac;pointer-events:none;
}
.cat-search button{
  position:absolute;right:5px;height:30px;padding:0 12px;border:none;cursor:pointer;
  background:var(--trx-black);color:var(--trx-yellow);border-radius:4px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.cat-search button:hover{background:var(--trx-red);color:#fff}

.cat-mob-toggle{
  display:none;align-items:center;gap:9px;height:40px;padding:0 16px;cursor:pointer;
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);background:#fff;color:var(--trx-black);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.cat-mob-toggle:hover{border-color:var(--trx-black)}

/* ==================================================================
   3. LAYOUT
   ================================================================== */

.cat-layout{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(24px,3vw,44px);
  padding:clamp(22px,2.8vw,38px) 0 clamp(40px,5vw,72px);
  align-items:start;
}
.cat-main{min-width:0}

/* ==================================================================
   4. SIDEBAR — categories and facets, as a quiet index
   ================================================================== */

.cat-sidebar{
  position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;
  padding-right:6px;scrollbar-width:thin;
}
.cat-sidebar::-webkit-scrollbar{width:4px}
.cat-sidebar::-webkit-scrollbar-thumb{background:#dcdcd4;border-radius:2px}

.cs-head{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--trx-mute);
  padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--cat-line);
}

.cs-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column}
.cs-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 0;font-size:12.5px;line-height:1.35;color:#4a4a44;
  border-bottom:1px solid var(--cat-line-soft);transition:color .16s;
}
.cs-list a:hover{color:var(--trx-black)}
.cs-list a span{
  font-family:var(--font-mono);font-size:9.5px;color:#b4b4ac;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.cs-list a.is-active{
  color:var(--trx-black);font-weight:700;
  box-shadow:inset 2px 0 0 var(--trx-yellow);padding-left:9px;
}
.cs-list a.is-active span{color:var(--trx-red)}

.cs-sub{list-style:none;margin:0 0 4px;padding:0 0 4px 11px}
.cs-sub a{
  font-size:11.5px;padding:5px 0;color:#78786f;border-bottom:none;
}
.cs-sub a::before{content:"·";margin-right:7px;color:#c8c8c0}
.cs-sub a:hover{color:var(--trx-black)}
.cs-sub a.is-active{
  color:var(--trx-red);font-weight:700;box-shadow:none;padding-left:0;
}

.cat-facets{display:flex;flex-direction:column;gap:20px}
.facet{display:flex;flex-direction:column;gap:9px}
.facet-lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--trx-mute);
}
.facet-opts{display:flex;flex-wrap:wrap;gap:5px}
.facet-opts label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 9px;border:1px solid var(--cat-line);border-radius:var(--cat-r-chip);background:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:#5c5c55;
  transition:border-color .16s,background .16s,color .16s;
}
.facet-opts label:hover{border-color:#c4c4bc;color:var(--trx-black)}
.facet-opts input{
  appearance:none;width:11px;height:11px;margin:0;flex-shrink:0;
  border:1px solid #c4c4bc;border-radius:2px;background:#fff;transition:all .16s;
}
.facet-opts input:checked{background:var(--trx-black);border-color:var(--trx-black)}
.facet-opts label:has(input:checked){
  border-color:var(--trx-black);background:var(--trx-black);color:#fff;
}
.facet-opts label:has(input:checked) input{background:var(--trx-yellow);border-color:var(--trx-yellow)}

.facet-clear{
  align-self:flex-start;margin-top:2px;padding:0;border:none;background:none;cursor:pointer;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--trx-red);border-bottom:1px solid currentColor;
}
.facet-clear:hover{color:var(--trx-black)}

.cs-help{
  margin-top:26px;padding:15px;background:var(--cat-faint);
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);
}
.cs-help-t{
  font-family:var(--font-display);font-size:11.5px;text-transform:uppercase;letter-spacing:.01em;
  color:var(--trx-black);margin-bottom:7px;
}
.cs-help p{font-size:11.5px;line-height:1.7;color:#6c6c64;margin-bottom:11px}
.cs-help .btn{width:100%;justify-content:center;padding:11px 14px;font-size:10px}

/* ==================================================================
   5. PRODUCT GRID
   Every card is the same frame: fixed 4:3 lit stage, contain-fit, so
   portrait and landscape photographs align on one baseline.
   ================================================================== */

.prod-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:14px;align-items:stretch;
}

.pcard{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--cat-line);border-radius:var(--cat-r-card);
  overflow:hidden;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--cat-lift);border-color:#dcdcd4}

.pcard-img{
  position:relative;aspect-ratio:4/3;background:var(--cat-stage);
  border-bottom:1px solid var(--cat-line-soft);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pcard-img::after{
  content:"";position:absolute;left:50%;bottom:9%;width:46%;height:10px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.14) 0%,transparent 72%);
  pointer-events:none;
}
.pcard-img img{
  position:relative;z-index:1;width:100%;height:100%;padding:14px;
  object-fit:contain;object-position:center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.pcard:hover .pcard-img img{transform:scale(1.045)}
.pcard-img .ph,
.pd-frame .ph{
  font-family:var(--font-display);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:#d8d8cf;
}

.pcard-ip{
  position:absolute;top:8px;right:8px;z-index:2;
  background:var(--trx-black);color:var(--trx-yellow);
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  padding:4px 7px;border-radius:3px;
}

.pcard-body{
  display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;
  padding:13px 14px 12px;
}
.pcard-cat{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--trx-mute);
}
.pcard-name{
  font-family:var(--font-display);font-size:12.5px;line-height:1.28;letter-spacing:0;
  text-transform:uppercase;color:#0f0f0f;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.5em;
}
.pcard:hover .pcard-name{color:var(--trx-red)}
.pcard-ref{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--trx-red);font-weight:700;
}

.pcard-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.pcard-tags span{
  font-family:var(--font-mono);font-size:9px;padding:3px 6px;color:#5c5c55;
  background:var(--trx-bone);border:1px solid var(--cat-line);border-radius:var(--cat-r-chip);
}

.pcard-actions{
  display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--cat-line-soft);
}
.pcard-btn{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;border-radius:5px;background:var(--trx-black);color:var(--trx-yellow);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.pcard-btn:hover{background:var(--trx-red);color:#fff}
.pcard-qv{
  width:36px;min-height:36px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px solid #dcdcd4;border-radius:5px;background:#fff;color:#4a4a44;
  transition:border-color .2s,color .2s,background .2s;
}
.pcard-qv:hover{border-color:var(--trx-black);background:var(--trx-black);color:var(--trx-yellow)}
.pcard-qv svg{width:14px;height:14px}

/* Empty state + pagination ---------------------------------------- */

.trx-empty{
  padding:clamp(40px,6vw,80px) 24px;text-align:center;
  border:1px dashed #d8d8cf;border-radius:var(--cat-r-card);background:var(--cat-faint);
}
.trx-empty h2{font-size:clamp(16px,1.8vw,22px);text-transform:uppercase;margin-bottom:10px}
.trx-empty p{font-size:13.5px;line-height:1.75;color:#6c6c64;max-width:46ch;margin:0 auto 20px}

.trx-pagination{
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:clamp(28px,3.4vw,48px);
}
.trx-pagination .page-numbers{
  min-width:38px;height:38px;padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);background:#fff;
  font-family:var(--font-mono);font-size:11px;color:#4a4a44;
  transition:border-color .16s,background .16s,color .16s;
}
.trx-pagination .page-numbers:hover{border-color:var(--trx-black);color:var(--trx-black)}
.trx-pagination .page-numbers.current{
  background:var(--trx-black);border-color:var(--trx-black);color:var(--trx-yellow);font-weight:700;
}
.trx-pagination .dots{border:none;background:none}

/* ==================================================================
   6. QUICK VIEW
   ================================================================== */

.qv-overlay{
  position:fixed;inset:0;z-index:9998;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.7);backdrop-filter:blur(3px);
}
.qv-overlay.is-on{display:flex}
.qv-modal{
  width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;position:relative;
  background:#fff;border-radius:10px;box-shadow:var(--cat-lift-lg);
}
.qv-inner{padding:0}
.qv-inner .qv-img{aspect-ratio:4/3;background:var(--cat-stage);display:flex;align-items:center;justify-content:center}
.qv-inner .qv-img img{width:100%;height:100%;object-fit:contain;padding:24px}
.qv-inner .qv-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px}
.qv-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);background:#fff;color:var(--trx-black);
  transition:background .2s,color .2s;
}
.qv-close:hover{background:var(--trx-black);color:#fff}

/* ==================================================================
   7. SINGLE PRODUCT — head and hero
   ================================================================== */

.pd-head{padding:16px 0 0}
.pd-head nav{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--trx-mute);
}
.pd-head nav a:hover{color:var(--trx-red)}
.pd-head nav .sep{color:#d0d0c8}

.pd-layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3.2vw,48px);align-items:start;
  padding:clamp(20px,2.6vw,34px) 0 clamp(24px,3vw,40px);
}

/* Media — a lit stage, never a bare box */
.pd-media{position:sticky;top:80px;max-width:600px}
.pd-frame{
  position:relative;overflow:hidden;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  background:var(--cat-stage);
  border:1px solid var(--cat-line);border-radius:var(--cat-r-card);
}
.pd-frame::after{
  content:"";position:absolute;left:50%;bottom:10%;width:44%;height:12px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.16) 0%,transparent 72%);pointer-events:none;
}
.pd-frame img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  padding:clamp(18px,2.4vw,34px);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.10));
  cursor:zoom-in;
}
.pd-zoom{
  position:absolute;bottom:10px;right:10px;z-index:2;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);
  background:rgba(255,255,255,.92);color:var(--trx-black);
  transition:background .2s,color .2s,border-color .2s;
}
.pd-zoom:hover{background:var(--trx-black);border-color:var(--trx-black);color:var(--trx-yellow)}
.pd-media-note{
  margin-top:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  line-height:1.8;text-transform:uppercase;color:#a8a8a0;max-width:44ch;
}

/* Info column ----------------------------------------------------- */
.pd-info{min-width:0}
.pd-cat{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--trx-mute);margin-bottom:10px;
}
.pd-info h1{
  font-size:clamp(19px,2vw,29px);line-height:1.12;letter-spacing:-.01em;
  text-transform:uppercase;margin-bottom:12px;text-wrap:balance;
}
.pd-ref{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--trx-mute);margin-bottom:14px;
}
.pd-ref b{color:var(--trx-black);letter-spacing:.08em;font-size:11.5px}

.pd-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pd-badge{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  padding:4px 8px;border-radius:3px;border:1px solid #dcdcd4;color:#4a4a44;
}
.pd-badge.is-fill{
  background:var(--trx-black);border-color:var(--trx-black);color:var(--trx-yellow);font-weight:700;
}

.pd-avail{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#6a6a62;
}
.pd-avail .dot{width:7px;height:7px;border-radius:50%;background:#2a9e4a;flex-shrink:0}

.pd-desc{
  font-size:14px;line-height:1.8;color:#4c4c4c;max-width:62ch;text-wrap:pretty;
  margin:18px 0 20px;padding-top:18px;border-top:1px solid var(--cat-line);
}

/* Key specs — the six fields a specifier checks first */
.pd-keyspecs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin:0 0 20px;overflow:hidden;
  background:var(--cat-line);border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);
}
.pd-ks{background:#fff;padding:11px 13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.pd-ks dt{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#9a9a92;
}
.pd-ks dd{
  font-family:var(--font-mono);font-size:11px;line-height:1.5;font-weight:500;
  color:var(--trx-ink);overflow-wrap:anywhere;
}

/* Actions */
.pd-cta-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pd-cta-main{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 24px;
  border-radius:var(--cat-r-ctl);background:var(--trx-black);color:var(--trx-yellow);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s,color .2s,transform .2s;
}
.pd-cta-main:hover{background:var(--trx-red);color:#fff;transform:translateY(-1px)}
.pd-cta-ghost{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border:1.5px solid #dcdcd4;border-radius:var(--cat-r-ctl);background:#fff;color:#3a3a3a;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .2s,color .2s;
}
.pd-cta-ghost:hover{border-color:var(--trx-black);color:var(--trx-black)}

/* ==================================================================
   8. IN-PAGE NAV + SECTION RHYTHM
   ================================================================== */

.pd-jump{
  position:sticky;top:70px;z-index:20;display:flex;gap:2px;overflow-x:auto;
  margin-top:clamp(18px,2.4vw,30px);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid var(--cat-line);border-bottom:1px solid var(--cat-line);
  scrollbar-width:none;
}
.pd-jump::-webkit-scrollbar{display:none}
.pd-jump a{
  flex-shrink:0;padding:13px 16px;color:#7a7a72;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.pd-jump a:hover{color:var(--trx-black);border-bottom-color:var(--trx-yellow)}

.pd-block{padding:clamp(24px,3vw,42px) 0;border-top:1px solid var(--cat-line)}
.pd-block h2{
  font-size:clamp(15px,1.5vw,20px);letter-spacing:-.005em;text-transform:uppercase;
  margin-bottom:10px;
}
.pd-block-lead{
  font-size:13px;line-height:1.75;color:#5c5c5c;max-width:64ch;margin-bottom:20px;text-wrap:pretty;
}

#datasheet-doc,#selection,#datasheet,#features,#applications{scroll-margin-top:120px}

/* Feature / application lists ------------------------------------- */
.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.pd-cols .pd-block{border-top:1px solid var(--cat-line)}
.pd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pd-list li{
  position:relative;padding-left:18px;font-size:13px;line-height:1.75;color:#4c4c4c;
  text-wrap:pretty;
}
.pd-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--trx-yellow);border:1px solid var(--trx-black);
}
.pd-list li strong{
  display:block;margin-bottom:3px;color:var(--trx-black);
  font-family:var(--font-display);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
}

/* ==================================================================
   9. DATA SHEET — full width, reads like the signed document
   ================================================================== */

.pd-sheet{
  max-width:920px;background:#fff;overflow:hidden;
  border:1px solid #e4e4dc;border-radius:var(--cat-r-ctl);box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.pd-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px 18px;border-bottom:2px solid var(--trx-yellow);background:#fff;
}
.pd-sheet-logo{height:26px;width:auto}
.pd-sheet-meta{text-align:right}
.pd-sheet-head .t{
  display:block;font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--trx-black);
}
.pd-sheet-head .d{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  color:#9a9a92;margin-top:4px;
}

.pd-sheet-ident{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:15px 18px 13px;border-bottom:1px solid var(--cat-line);
}
.pd-sheet-name{
  font-family:var(--font-display);font-size:14px;line-height:1.25;
  text-transform:uppercase;color:var(--trx-black);max-width:70%;
}
.pd-sheet-ref{text-align:right;flex-shrink:0}
.pd-sheet-ref span{
  display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#9a9a92;
}
.pd-sheet-ref strong{
  display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--trx-black);margin-top:3px;
}

.pd-sheet-table-wrap{overflow-x:auto}
.pd-sheet-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px}
.pd-sheet-table thead tr{background:var(--trx-black)}
.pd-sheet-table thead th{
  padding:10px 16px;text-align:left;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:#fff;
}
.pd-sheet-table thead th:first-child{border-left:3px solid var(--trx-red)}
.pd-sheet-table tbody th{
  padding:10px 16px;text-align:left;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  font-size:10px;color:#6c6c64;white-space:nowrap;border-left:3px solid var(--trx-red);
}
.pd-sheet-table tbody td{
  padding:10px 16px;color:var(--trx-ink);font-weight:700;line-height:1.6;overflow-wrap:anywhere;
  border-left:1px solid #ecece6;
}
.pd-sheet-table tbody tr{border-top:1px solid #ecece6}
.pd-sheet-table tbody tr.is-odd{background:#faf9f5}

.pd-sheet-foot{padding:15px 18px 17px;border-top:1px solid var(--cat-line);background:var(--cat-faint)}
.pd-sheet-legal{font-size:9px;line-height:1.7;color:#8a8a82;margin-bottom:13px}
.pd-sheet-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pd-sheet-btn{
  min-height:36px;padding:0 16px;cursor:pointer;
  border:1px solid var(--trx-black);border-radius:var(--cat-r-ctl);
  background:var(--trx-black);color:var(--trx-yellow);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.pd-sheet-btn:hover{background:var(--trx-red);border-color:var(--trx-red);color:#fff}
.pd-sheet-link{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6c6c64;border-bottom:1px solid var(--cat-line);padding-bottom:2px;
}
.pd-sheet-link:hover{color:var(--trx-black);border-color:var(--trx-black)}

/* The sheet section: the document is the content, so the wrapper only
   removes the block's own lead spacing above it. */
.pd-block-sheet .pd-sheet{margin:0}

/* ELC-U datasheet block (inc/datasheet.php styles itself inline) --- */
.trx-ds table{font-variant-numeric:tabular-nums}

/* ==================================================================
   10. SELECTION MATRIX
   ================================================================== */

.pd-matrix-wrap{
  overflow-x:auto;border:1px solid var(--cat-line);border-radius:var(--cat-r-ctl);background:#fff;
}
.pd-matrix{
  width:100%;border-collapse:collapse;min-width:640px;
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;
}
.pd-matrix th,.pd-matrix td{padding:9px 12px;text-align:left;white-space:nowrap}
.pd-matrix thead th{
  position:sticky;top:0;z-index:2;background:var(--trx-black);color:#fff;
  font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.pd-matrix tbody tr{border-top:1px solid var(--cat-line)}
.pd-matrix tbody tr:nth-child(even){background:var(--cat-faint)}
.pd-matrix tbody th{
  font-family:var(--font-display);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--trx-black);
}
.pd-matrix tbody th em{
  display:block;font-style:normal;margin-top:3px;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;color:var(--trx-red);
}
.pd-matrix tbody td{color:#4c4c4c}
.pd-matrix tr.is-current{background:#fffbe6}
.pd-matrix tr.is-current td{color:var(--trx-ink)}
.pd-matrix .muted{color:#c8c8c0}
.pd-matrix td.go{text-align:right}
.pd-matrix td.go a{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--trx-black);
  border-bottom:1px solid var(--cat-line);padding-bottom:1px;
}
.pd-matrix td.go a:hover{color:var(--trx-red);border-color:var(--trx-red)}
.pd-volt-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#6b6b63;margin:0 0 14px}
.pd-volt-chip{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:2px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}
.pd-volt-chip.pd-volt-y{background:#f4c430}
.pd-volt-chip.pd-volt-b{background:#2b5fd9;border-color:#2b5fd9}
.pd-volt-chip.pd-volt-r{background:#d92b2b;border-color:#d92b2b}
.pd-volt-chip.pd-volt-k{background:#1a1a1a;border-color:#1a1a1a}
.pd-volt-chip.pd-volt-g{background:#2ba84a;border-color:#2ba84a}
.pd-volt-cell .pd-volt-chip{margin-left:10px}
.pd-volt-cell .pd-volt-chip:first-child{margin-left:0}
.pd-grid-table thead th .pd-volt-chip{margin-right:6px}
.pd-drawing{border-top:1px solid var(--cat-line);padding:20px 24px 24px;background:#fff}
.pd-drawing h3{font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.pd-drawing-note{font-size:12px;color:#77776f;margin:0 0 14px}
.pd-drawing img{max-width:100%;height:auto;border:1px solid var(--cat-line);background:#f7f7f2}

/* ==================================================================
   11. RELATED + STICKY QUOTE BAR + LIGHTBOX
   ================================================================== */

.pd-related{padding:clamp(32px,4vw,56px) 0;background:var(--trx-bone);border-top:1px solid var(--cat-line)}
.pd-related h2{font-size:clamp(16px,1.7vw,23px);text-transform:uppercase;margin-bottom:20px}

.pd-bar{
  position:sticky;bottom:0;z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid var(--cat-line);
}
.pd-bar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:10px 0;
}
.pd-bar-id{min-width:0}
.pd-bar-id strong{
  display:block;font-family:var(--font-display);font-size:11.5px;line-height:1.25;
  text-transform:uppercase;color:var(--trx-black);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch;
}
.pd-bar-id span{
  display:block;margin-top:3px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--trx-mute);
}
.pd-bar-acts{display:flex;align-items:center;gap:14px;flex-shrink:0}
.pd-bar .btn{padding:11px 20px;font-size:10.5px}
.pd-bar-ghost{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6c6c64;border-bottom:1px solid var(--cat-line);padding-bottom:2px;
}
.pd-bar-ghost:hover{color:var(--trx-black);border-color:var(--trx-black)}

.pd-lightbox{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:32px;
  background:rgba(10,10,10,.9);
}
.pd-lightbox.is-on{display:flex}
.pd-lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.pd-lightbox-close{
  position:absolute;top:18px;right:18px;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);border-radius:var(--cat-r-ctl);
  background:transparent;color:#fff;transition:background .2s,color .2s,border-color .2s;
}
.pd-lightbox-close:hover{background:#fff;border-color:#fff;color:var(--trx-black)}

/* ==================================================================
   12. RESPONSIVE
   ================================================================== */

@media (max-width:1100px){
  .cat-layout{grid-template-columns:200px minmax(0,1fr)}
}

@media (max-width:1000px){
  .pd-layout{grid-template-columns:1fr}
  .pd-media{position:static;max-width:none}
  .pd-cols{grid-template-columns:1fr;gap:0}
  .pd-keyspecs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:880px){
  .cat-layout{grid-template-columns:1fr}
  .cat-mob-toggle{display:inline-flex}
  .cat-sidebar{
    position:fixed;inset:0 auto 0 0;z-index:200;width:min(320px,86vw);max-height:none;
    padding:22px 20px 32px;background:#fff;border-right:1px solid var(--cat-line);
    box-shadow:var(--cat-lift-lg);overflow-y:auto;
    transform:translateX(-102%);transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .cat-sidebar.is-open{transform:none}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
}

@media (max-width:560px){
  .cat-head-row{gap:16px}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pcard-body{padding:11px 11px 10px}
  .pcard-name{font-size:11.5px;min-height:3.4em}
  .pcard-actions{flex-direction:column}
  .pcard-qv{width:100%}
  .pd-sheet-name{max-width:100%}
  .pd-sheet-ident{flex-direction:column;gap:10px}
  .pd-sheet-ref{text-align:left}
  .pd-cta-row{flex-direction:column;align-items:stretch}
  .pd-cta-main,.pd-cta-ghost{justify-content:center}
  .pd-bar-inner{gap:10px}
  .pd-bar-acts{width:100%}
  .pd-bar .btn{flex:1;justify-content:center}
}

/* ==================================================================
   13. PRINT — the data sheet is the document
   ================================================================== */

@media print{
  .cat-topbar,.cat-sidebar,.pd-jump,.pd-bar,.pd-related,.pd-zoom,
  .pd-cta-row,.pd-sheet-actions,.qv-overlay,.pd-lightbox{display:none!important}
  .pd-layout{grid-template-columns:1fr 1fr;gap:24px;padding:0}
  .pd-media{position:static}
  .pd-sheet{box-shadow:none;border-color:#000;max-width:none}
  .pd-block{break-inside:avoid}
  a[href]::after{content:""}
}