/* ============================================================
   KIMANS REDESIGN — SINGLE PRODUCT
   ============================================================ */

/* TablePress specification tables → instrument-panel styling */
.kx-specs h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kx-n-500, #6E7A85);
  margin: 28px 0 10px;
}
.kx-specs h2:first-child { margin-top: 0; }
.kx-specs table.tablepress {
  /* Narrow 2/3-col tables fill the column; WIDE tables (many DN columns) must NOT
     be squeezed to 100% — they take their natural width and overflow the wrapper so
     it scrolls. The min-width:max-content on connected-cell tables (below) forces that. */
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 14px;
}
.kx-specs .tablepress td {
  padding: 13px 14px;
  border-bottom: 1px solid #ECEFF2;
  color: #0D0D0D;
  vertical-align: top;
  line-height: 1.5;
}
/* Spec tables sit on a WHITE section, so values stay near-black and the label
   column is darkened from #6E7A85 (~4.0:1) to #4D5862 (~5.5:1) to clear AA. */
.kx-specs .tablepress td.column-1 { color: #4D5862; width: 38%; font-weight: 700; }
.kx-specs .tablepress td.column-2 { color: #515C66; width: 8%; white-space: nowrap; }
/* Numeric columns: keep tabular figures so values line up — same font, just aligned. */
.kx-specs .tablepress td.column-2,
.kx-specs .tablepress td.column-3,
.kx-specs .tablepress td:last-child { font-variant-numeric: tabular-nums; }
/* Zebra striping (TablePress emits .even/.odd on row-striping tables) + hover,
   tuned for the white instrument-panel look. */
.kx-specs .tablepress .row-striping tr.odd td,
.kx-specs .tablepress tr:nth-child(even) td { background: #FAFBFC; }
.kx-specs .tablepress .row-hover tr:hover td { background: #FFF8E6; }
.kx-specs .tablepress caption { display: none; } /* hide the TablePress "Edit" link */

/* One consistent font (theme sans / Play) across every spec cell — no mixed
   monospace columns. */
.kx-specs table.tablepress,
.kx-specs .tablepress td,
.kx-specs .tablepress th {
  font-family: "Play", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Each table scrolls inside its OWN wrapper (added in PHP), so only a genuinely
   wide table scrolls horizontally — section headings and the narrow key/value
   tables never get dragged into a shared scroll. */
.kx-spec-tablewrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 8px;
}
.kx-spec-tablewrap > table.tablepress { margin: 0; }

/* ---- MATRIX tables (.is-matrix: >=4 columns OR merged cells, e.g. the DN
   "Flow Sensor Technical Data" grid + "Dimensions") ----
   They take their natural width so the grid overflows the wrapper and scrolls
   horizontally, keeping every value aligned to its column. The FIRST column is
   sticky so the row label stays visible while scrolling. NEVER flattened. */
.kx-spec-tablewrap.is-matrix > table.tablepress {
  width: auto;
  min-width: max-content;
}
.kx-spec-tablewrap.is-matrix table.tablepress td,
.kx-spec-tablewrap.is-matrix table.tablepress th {
  width: auto;
  white-space: nowrap;
}
/* Sticky first column — the row label is frozen while the DN columns scroll past. */
.kx-spec-tablewrap.is-matrix table.tablepress td.column-1,
.kx-spec-tablewrap.is-matrix table.tablepress th.column-1 {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 #ECEFF2;
}
/* Edge-fade affordance: a soft inner shadow on whichever side has more content
   off-screen. Toggled by .can-left / .can-right, set by a small scroll listener in
   single-product.php, so the hint shows ONLY while there is more to scroll to. */
.kx-spec-tablewrap.is-matrix.can-left::before,
.kx-spec-tablewrap.is-matrix.can-right::after {
  content: "";
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  width: 26px;
  align-self: stretch;
  pointer-events: none;
}
.kx-spec-tablewrap.is-matrix.can-left { box-shadow: inset 18px 0 14px -14px rgba(13,13,13,0.28); }
.kx-spec-tablewrap.is-matrix.can-right { box-shadow: inset -18px 0 14px -14px rgba(13,13,13,0.28); }
.kx-spec-tablewrap.is-matrix.can-left.can-right {
  box-shadow: inset 18px 0 14px -14px rgba(13,13,13,0.28), inset -18px 0 14px -14px rgba(13,13,13,0.28);
}
.kx-spec-tablewrap.is-matrix:focus-visible {
  outline: 2px solid var(--accent, #FEBB19);
  outline-offset: 2px;
}
.kx-specs .tablepress th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid #DDE2E8;
  color: #0D0D0D;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* ---- KEY/VALUE tables (.is-kv: <=3 columns; the unit column has been folded into
   the label in PHP, so every row is a clean label | value pair) ----
   The table takes its NATURAL width: the label column shrinks to its content with a
   fixed gutter and the value sits immediately beside it, left aligned — no empty
   middle column, no orphan unit dash. */
.kx-spec-tablewrap.is-kv table.tablepress {
  width: auto;
  max-width: 100%;
}
.kx-spec-tablewrap.is-kv table.tablepress td.column-1 {
  width: auto;
  white-space: normal;
  padding-right: 40px;
  color: #4D5862;
  font-weight: 700;
}
.kx-spec-tablewrap.is-kv table.tablepress td.column-2 {
  width: auto;
  white-space: normal;
  text-align: left;
  color: #0D0D0D;
  font-weight: 400;
}
/* Folded unit hint, e.g. the "(°C)" in "Ambient temperature (°C)". */
.kx-spec-unit { color: #6E7A85; font-weight: 600; }
/* Footnote rows ("*150 °C optional") span the full width and read quietly. */
.kx-spec-tablewrap.is-kv table.tablepress td.kx-spec-note {
  color: #6E7A85;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .kx-prod-hero { grid-template-columns: 1fr !important; gap: 8px !important; }
  .kx-prod-hero-info { padding: 10px 0 60px !important; }
  .kx-fig { display: none; }
  .kx-spec-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .kx-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kx-dl-grid { grid-template-columns: 1fr !important; }
  .kx-related-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .kx-feature-grid { grid-template-columns: 1fr !important; }
  .kx-prod-hero-info h1 { font-size: 38px !important; }
}

/* Stack ONLY key/value spec tables on phones (.is-kv) so the value sits UNDER its
   label instead of being squeezed. MATRIX tables (.is-matrix, e.g. the DN "Dimensions"
   grid) are NOT stacked — they keep a real <table> with horizontal scroll + sticky
   first column so column→value alignment is preserved (Mena). The unit is already
   folded into the label in PHP, so there is no empty unit cell to hide here. */
@media (max-width: 600px) {
  .kx-spec-tablewrap.is-kv table.tablepress,
  .kx-spec-tablewrap.is-kv table.tablepress tbody,
  .kx-spec-tablewrap.is-kv table.tablepress tr { display: block; width: 100%; }
  .kx-spec-tablewrap.is-kv table.tablepress td { display: block; width: auto !important; border-bottom: none; padding: 2px 0; }
  .kx-spec-tablewrap.is-kv table.tablepress tr {
    padding: 10px 0; border-bottom: 1px solid #ECEFF2;
  }
  .kx-spec-tablewrap.is-kv table.tablepress td.column-1 {
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6E7A85; font-weight: 700;
    padding-right: 0;
  }
  .kx-spec-tablewrap.is-kv table.tablepress td.column-2 {
    font-size: 14.5px; color: #0D0D0D; font-weight: 700;
  }
  /* Folded unit hint stays muted even on the uppercase label line. */
  .kx-spec-tablewrap.is-kv table.tablepress td.column-1 .kx-spec-unit { text-transform: none; }
  /* striping/hover off when stacked — backgrounds look odd on full-width blocks */
  .kx-spec-tablewrap.is-kv table.tablepress tr:nth-child(even) td,
  .kx-spec-tablewrap.is-kv table.tablepress tr.odd td { background: transparent; }
}

/* Downloads now precede the spec table in document order on every viewport
   (Overview → Downloads → Technical Data), so no flex reordering is needed. */

/* Keep the sticky quote CTA clear on small screens. */
@media (max-width: 560px) {
  .kx-rfq-sticky { right: 12px !important; bottom: 78px !important; padding: 0 18px !important; }
}

/* ---- SEO/layout restructure: H1 type keyword, lede, key-feature chips ---- */
/* The product TYPE keyword rides inside the H1 (strongest heading signal) but reads
   as a lighter Play-font subtitle on its own line — not the squared Pirulen display. */
.kx-prod-h1-type {
  display: block;
  margin-top: 10px;
  font-family: "Play", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 0.42em;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #515C66;
}
.kx-prod-chips { /* layout is inline; nothing extra needed at desktop */ }

/* ---- Overview block (moved hero prose, server-rendered, lower) ---- */
.kx-overview-prose > :first-child { margin-top: 0; }
.kx-overview-prose > :last-child { margin-bottom: 0; }
.kx-overview-prose p { margin: 0 0 16px; }
.kx-overview-prose a { color: var(--accent, #FEBB19); }
.kx-overview-prose ul, .kx-overview-prose ol { margin: 0 0 16px; padding-left: 20px; }
.kx-overview-prose li { margin: 0 0 8px; }
.kx-overview-prose h2, .kx-overview-prose h3 { color: #fff; }
@media (max-width: 980px) {
  .kx-overview-grid { grid-template-columns: 1fr !important; gap: 22px !important; padding: 48px 22px !important; }
}

/* ---- Spec accordion (native <details>; content is in the HTML, never JS-injected) ---- */
.kx-acc { border: 1px solid #ECEFF2; border-radius: 8px; background: #fff; overflow: hidden; }
.kx-acc__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #0D0D0D;
  background: #FAFBFC;
  border-bottom: 1px solid transparent;
}
.kx-acc__summary::-webkit-details-marker { display: none; }
.kx-acc__summary::marker { content: ""; }
.kx-acc__summary:focus-visible {
  outline: 2px solid var(--accent, #FEBB19);
  outline-offset: -2px;
}
.kx-acc[open] .kx-acc__summary { border-bottom-color: #ECEFF2; }
.kx-acc__chev { color: #6E7A85; transition: transform .2s ease; flex: none; }
.kx-acc[open] .kx-acc__chev { transform: rotate(180deg); }
.kx-acc__body { padding: 8px 20px 18px; }
@media (max-width: 600px) {
  .kx-acc__body { padding: 4px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-acc__chev { transition: none; }
}
/* Per-section spec accordions (Fix 2): the section heading rides inside <summary> as
   an <h3> (kept as a real heading for SEO/a11y) but reads as the summary label. */
.kx-acc__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1.2;
  color: inherit;
}
/* Gap between stacked spec sections so each collapsed bar is visually distinct. */
.kx-spec-acc + .kx-spec-acc { margin-top: 12px; }