:root {
  --z-tpi-orange: #f58220;
  --z-tpi-orange-dark: #d9650f;
  --z-tpi-ink: #202124;
  --z-tpi-line: #74787c;
  --z-tpi-head: #d7d9db;
  --z-tpi-subhead: #eceeef;
  --z-tpi-row: #fff4ea;
  --z-tpi-col: #eef5fb;
  --z-tpi-cross: #ffd2b0;
  --z-tpi-empty: #f1f2f3;
  --z-tpi-selected: #ffd4b3;
}
.z-tpi-quick-links {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px;
}
.z-tpi-quick-links a {
  display: inline-block; padding: 8px 12px; border: 1px solid #d4d4d4;
  border-radius: 4px; background: #fff; color: #333; text-decoration: none;
}
.z-tpi-quick-links a:hover, .z-tpi-quick-links a:focus { border-color: var(--z-tpi-orange); color: #111; }
.z-tpi-configurator { border-top: 4px solid var(--z-tpi-orange); }
.z-tpi-form { margin-top: 18px; }
.z-tpi-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.z-tpi-form legend { border: 0; margin-bottom: 10px; font-size: 17px; font-weight: 700; }
.z-tpi-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.z-tpi-type-options label {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px;
  border: 1px solid #d6d6d6; border-radius: 5px; background: #fff; cursor: pointer;
}
.z-tpi-type-options label:hover, .z-tpi-type-options label:focus-within { border-color: var(--z-tpi-orange); }
.z-tpi-type-options input { margin-top: 4px; }
.z-tpi-type-options span { display: block; }
.z-tpi-type-options strong { display: block; margin-bottom: 3px; font-size: 16px; }
.z-tpi-type-options small { display: block; color: #555; line-height: 1.4; }
.z-tpi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.z-tpi-fields[hidden] { display: none !important; }
.z-tpi-fields[data-tpi-fields="solid"] { grid-template-columns: minmax(0, 520px); }
.z-tpi-field label { display: block; margin-bottom: 6px; font-weight: 700; }
.z-tpi-field input {
  width: 100%; height: 46px; padding: 9px 12px; border: 1px solid #aaa;
  border-radius: 4px; font-size: 16px; background: #fff;
}
.z-tpi-field input:focus { border-color: #0b57d0; outline: 2px solid rgba(11,87,208,.2); }
.z-tpi-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.z-tpi-result {
  margin-top: 20px; padding: 18px; border: 2px solid var(--z-tpi-orange);
  border-radius: 5px; background: #fff8f1;
}
.z-tpi-result--error { border-color: #9c2f24; background: #fff4f2; }
.z-tpi-result__label { margin: 0 0 4px; font-weight: 700; color: #555; }
.z-tpi-result__value { margin: 0 0 7px; color: #111; font-size: 28px; font-weight: 800; }
.z-tpi-result__explanation { margin: 0 0 14px; }
.z-tpi-table-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 12px 0 7px; color: #555; font-size: 14px;
}
.z-tpi-clear-selection { border: 0; background: transparent; color: #6e360a; text-decoration: underline; padding: 4px; }
.z-tpi-table-wrap { overflow: auto; border: 1px solid #6f7377; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.08); }
.z-tpi-table-wrap table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.z-tpi-table-wrap th, .z-tpi-table-wrap td {
  border-right: 1px solid var(--z-tpi-line); border-bottom: 0;
  padding: 6px 4px; text-align: center; vertical-align: middle;
}
/* Horizontal grid lines are native top borders on each row. This avoids the
   sticky-column repaint problem without pseudo-elements or duplicate lines. */
.z-tpi-table-wrap thead tr + tr > *,
.z-tpi-table-wrap tbody tr > * { border-top: 1px solid var(--z-tpi-line); }
.z-tpi-table-wrap tr > :last-child { border-right: 0; }
.z-tpi-structure-table { min-width: 1190px; }
.z-tpi-structure-table th, .z-tpi-structure-table td { font-size: 14px; line-height: 1.05; }
.z-tpi-structure-table thead th { position: sticky; z-index: 4; background: var(--z-tpi-head); font-weight: 800; }
.z-tpi-structure-table thead tr:first-child th { top: 0; height: 50px; font-size: 16px; }
.z-tpi-structure-table thead tr:nth-child(2) th { top: 50px; background: var(--z-tpi-subhead); }
.z-tpi-structure-table .z-tpi-wall-head, .z-tpi-structure-table .z-tpi-row-head {
  position: sticky; left: 0; z-index: 6; width: 145px; min-width: 145px; font-weight: 800;
}
.z-tpi-structure-table thead .z-tpi-wall-head { z-index: 8; }
.z-tpi-wall-label { display: inline-block; line-height: 1.05; }
.z-tpi-structure-table .z-tpi-row-head {
  background: #fff; background-clip: padding-box; font-size: 15px;
}
.z-tpi-structure-table td:not(.z-tpi-empty) { cursor: crosshair; font-variant-numeric: tabular-nums; }
.z-tpi-empty { background: var(--z-tpi-empty); color: transparent; }
.z-tpi-row-highlight { background: var(--z-tpi-row) !important; }
.z-tpi-col-highlight { background: var(--z-tpi-col) !important; }
.z-tpi-cross-highlight {
  background: var(--z-tpi-cross) !important; box-shadow: inset 0 0 0 3px var(--z-tpi-orange-dark); font-weight: 900;
}
.z-tpi-head-highlight { background: #bfc4c8 !important; box-shadow: inset 0 -3px 0 var(--z-tpi-orange-dark); }
.z-tpi-structure-table td:focus-visible, .z-tpi-solid-table tbody tr:focus-visible { outline: 3px solid #0b57d0; outline-offset: -4px; }
.z-tpi-solid-wrap { max-width: 780px; }
.z-tpi-solid-table { min-width: 620px; }
.z-tpi-solid-table th, .z-tpi-solid-table td { font-size: 16px; }
.z-tpi-solid-table thead th { background: var(--z-tpi-head); font-weight: 800; }
.z-tpi-solid-table thead tr:nth-child(2) th { background: var(--z-tpi-subhead); }
.z-tpi-solid-table tbody tr { cursor: pointer; }
.z-tpi-solid-table tbody tr:hover > *, .z-tpi-solid-table tbody tr:focus > * { background: #fff3e8; }
.z-tpi-solid-table tbody tr.z-tpi-selected > * { background: var(--z-tpi-selected); box-shadow: inset 0 2px 0 var(--z-tpi-orange-dark), inset 0 -2px 0 var(--z-tpi-orange-dark); }
.z-tpi-info-grid, .z-tpi-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.z-tpi-example-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.z-tpi-info-grid article, .z-tpi-example-grid article { border: 1px solid #ddd; border-radius: 4px; padding: 15px; background: #fff; }
.z-tpi-info-grid h3, .z-tpi-example-grid h3 { margin-top: 0; font-size: 18px; }
.z-tpi-info-grid p, .z-tpi-example-grid p { margin-bottom: 0; }
.z-tpi-practical-guidance {
  margin-top: 20px; padding: 20px 22px; border: 1px solid #e1a15c;
  border-left: 6px solid var(--z-tpi-orange); border-radius: 5px;
  background: #fff8f1; box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.z-tpi-practical-guidance h3 { margin: 0 0 10px; color: #2d2d2d; font-size: 21px; }
.z-tpi-practical-guidance p { margin: 0 0 12px; }
.z-tpi-practical-guidance ul { margin: 0 0 14px; padding-left: 22px; }
.z-tpi-practical-guidance li { margin-bottom: 7px; line-height: 1.55; }
.z-tpi-practical-guidance li:last-child { margin-bottom: 0; }
.z-tpi-practical-guidance a { font-weight: 700; text-decoration: underline; }
.z-tpi-practical-guidance__contact {
  margin-bottom: 0 !important; padding-top: 12px; border-top: 1px solid rgba(217,101,15,.35);
}
@media (max-width: 767px) {
  .z-tpi-type-options, .z-tpi-fields, .z-tpi-info-grid, .z-tpi-example-grid { grid-template-columns: 1fr; }
  .z-tpi-table-toolbar { display: block; }
  .z-tpi-clear-selection { margin-top: 4px; }
  .z-tpi-structure-table .z-tpi-wall-head, .z-tpi-structure-table .z-tpi-row-head { width: 112px; min-width: 112px; }
  .z-tpi-structure-table th, .z-tpi-structure-table td { padding: 5px 3px; }
  .z-tpi-result__value { font-size: 24px; }
}
@media print {
  .quick-topbar, .navbar-fixed-top, .z-product-aside, .z-actions, .z-tpi-quick-links, .z-tpi-configurator, .z-product-quote-strip, .mobile-sticky-cta, footer { display: none !important; }
  .z-product-content { width: 100% !important; }
  .z-tpi-table-wrap { overflow: visible; box-shadow: none; }
  .z-tpi-structure-table { min-width: 0; }
  .z-tpi-structure-table thead th, .z-tpi-structure-table .z-tpi-wall-head, .z-tpi-structure-table .z-tpi-row-head { position: static; }
  .z-tpi-structure-table th, .z-tpi-structure-table td { padding: 4px 2px; font-size: 8px; }
}