.ai-product-detail[class*="ai-style-"],
.db-product-detail[class*="ai-style-"],
.product-optimized-content[class*="ai-style-"] {
  --ai-accent: var(--site-theme-color, #0064c8);
  --ai-accent-rgb: var(--site-theme-rgb, 0, 100, 200);
  --ai-dark: var(--site-theme-darker, #123354);
  --ai-soft: rgba(var(--ai-accent-rgb), 0.07);
  --ai-line: rgba(var(--ai-accent-rgb), 0.20);
  color: #40566f;
}

.ai-product-detail[class*="ai-style-"] > section,
.db-product-detail[class*="ai-style-"] > section,
.product-optimized-content[class*="ai-style-"] > section {
  box-sizing: border-box;
  margin: 18px 0;
}

.ai-product-detail[class*="ai-style-"] h2,
.ai-product-detail[class*="ai-style-"] h3,
.db-product-detail[class*="ai-style-"] h2,
.db-product-detail[class*="ai-style-"] h3,
.product-optimized-content[class*="ai-style-"] h2,
.product-optimized-content[class*="ai-style-"] h3 {
  color: var(--ai-dark);
  letter-spacing: 0;
}

.ai-product-detail[class*="ai-style-"] table,
.db-product-detail[class*="ai-style-"] table,
.product-optimized-content[class*="ai-style-"] table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ai-product-detail[class*="ai-style-"] th,
.ai-product-detail[class*="ai-style-"] td,
.db-product-detail[class*="ai-style-"] th,
.db-product-detail[class*="ai-style-"] td,
.product-optimized-content[class*="ai-style-"] th,
.product-optimized-content[class*="ai-style-"] td {
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #d9e4ed;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ai-product-detail[class*="ai-style-"] .ai-cta,
.db-product-detail[class*="ai-style-"] .ai-cta,
.product-optimized-content[class*="ai-style-"] .ai-cta {
  padding: 20px;
  border-radius: 6px;
}

/* 1. Technical blueprint */
.ai-product-detail.ai-style-technical > section,
.db-product-detail.ai-style-technical > section,
.product-optimized-content.ai-style-technical > section {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ai-line);
}

.ai-product-detail.ai-style-technical > section:first-of-type,
.db-product-detail.ai-style-technical > section:first-of-type,
.product-optimized-content.ai-style-technical > section:first-of-type {
  padding: 20px;
  border: 1px solid var(--ai-line);
  border-left: 5px solid var(--ai-accent);
  background: linear-gradient(90deg, var(--ai-soft), #fff 82%);
}

.ai-product-detail.ai-style-technical h3,
.db-product-detail.ai-style-technical h3,
.product-optimized-content.ai-style-technical h3 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ai-line);
}

.ai-product-detail.ai-style-technical th,
.db-product-detail.ai-style-technical th,
.product-optimized-content.ai-style-technical th {
  background: var(--ai-dark);
  color: #fff;
}

/* 2. Production process */
.ai-product-detail.ai-style-process,
.db-product-detail.ai-style-process,
.product-optimized-content.ai-style-process {
  counter-reset: ai-process-step;
}

.ai-product-detail.ai-style-process > section:not(.ai-cta),
.db-product-detail.ai-style-process > section:not(.ai-cta),
.product-optimized-content.ai-style-process > section:not(.ai-cta) {
  position: relative;
  padding: 18px 18px 18px 58px;
  border: 1px solid #d9e4ed;
  border-radius: 6px;
  background: #fff;
  counter-increment: ai-process-step;
}

.ai-product-detail.ai-style-process > section:not(.ai-cta)::before,
.db-product-detail.ai-style-process > section:not(.ai-cta)::before,
.product-optimized-content.ai-style-process > section:not(.ai-cta)::before {
  position: absolute;
  top: 17px;
  left: 16px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--ai-accent);
  color: #fff;
  content: counter(ai-process-step);
  font-weight: 700;
}

.ai-product-detail.ai-style-process h2,
.ai-product-detail.ai-style-process h3,
.db-product-detail.ai-style-process h2,
.db-product-detail.ai-style-process h3,
.product-optimized-content.ai-style-process h2,
.product-optimized-content.ai-style-process h3 {
  margin-top: 0;
}

.ai-product-detail.ai-style-process th,
.db-product-detail.ai-style-process th,
.product-optimized-content.ai-style-process th {
  background: var(--ai-soft);
  color: var(--ai-dark);
}

/* 3. Feature cards */
.ai-product-detail.ai-style-feature-grid .ai-grid,
.db-product-detail.ai-style-feature-grid .ai-grid,
.product-optimized-content.ai-style-feature-grid .ai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-product-detail.ai-style-feature-grid > section,
.db-product-detail.ai-style-feature-grid > section,
.product-optimized-content.ai-style-feature-grid > section,
.ai-product-detail.ai-style-feature-grid .ai-card,
.db-product-detail.ai-style-feature-grid .ai-card,
.product-optimized-content.ai-style-feature-grid .ai-card {
  padding: 18px;
  border: 1px solid #d9e4ed;
  border-top: 4px solid var(--ai-accent);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 54, 83, 0.06);
}

.ai-product-detail.ai-style-feature-grid h3,
.db-product-detail.ai-style-feature-grid h3,
.product-optimized-content.ai-style-feature-grid h3 {
  margin-top: 0;
}

.ai-product-detail.ai-style-feature-grid th,
.db-product-detail.ai-style-feature-grid th,
.product-optimized-content.ai-style-feature-grid th {
  background: var(--ai-accent);
  color: #fff;
}

/* 4. Model comparison */
.ai-product-detail.ai-style-comparison > section,
.db-product-detail.ai-style-comparison > section,
.product-optimized-content.ai-style-comparison > section {
  padding: 0 0 16px;
  border-bottom: 1px solid #dfe7ee;
}

.ai-product-detail.ai-style-comparison h2,
.ai-product-detail.ai-style-comparison h3,
.db-product-detail.ai-style-comparison h2,
.db-product-detail.ai-style-comparison h3,
.product-optimized-content.ai-style-comparison h2,
.product-optimized-content.ai-style-comparison h3 {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-left: 4px solid var(--ai-accent);
  background: var(--ai-soft);
}

.ai-product-detail.ai-style-comparison table,
.db-product-detail.ai-style-comparison table,
.product-optimized-content.ai-style-comparison table {
  border: 1px solid var(--ai-line);
  box-shadow: 0 8px 22px rgba(24, 54, 83, 0.06);
}

.ai-product-detail.ai-style-comparison th,
.db-product-detail.ai-style-comparison th,
.product-optimized-content.ai-style-comparison th {
  background: var(--ai-dark);
  color: #fff;
}

.ai-product-detail.ai-style-comparison tr:nth-child(even) td,
.db-product-detail.ai-style-comparison tr:nth-child(even) td,
.product-optimized-content.ai-style-comparison tr:nth-child(even) td {
  background: var(--ai-soft);
}

/* 5. Application scenarios */
.ai-product-detail.ai-style-application > section,
.db-product-detail.ai-style-application > section,
.product-optimized-content.ai-style-application > section {
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.ai-product-detail.ai-style-application > section:nth-of-type(odd),
.db-product-detail.ai-style-application > section:nth-of-type(odd),
.product-optimized-content.ai-style-application > section:nth-of-type(odd) {
  border-color: var(--ai-line);
  background: var(--ai-soft);
}

.ai-product-detail.ai-style-application h2::after,
.ai-product-detail.ai-style-application h3::after,
.db-product-detail.ai-style-application h2::after,
.db-product-detail.ai-style-application h3::after,
.product-optimized-content.ai-style-application h2::after,
.product-optimized-content.ai-style-application h3::after {
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 8px;
  background: var(--ai-accent);
  content: "";
}

.ai-product-detail.ai-style-application th,
.db-product-detail.ai-style-application th,
.product-optimized-content.ai-style-application th {
  background: var(--ai-soft);
  color: var(--ai-dark);
}

/* 6. Project planning */
.ai-product-detail.ai-style-project > section,
.db-product-detail.ai-style-project > section,
.product-optimized-content.ai-style-project > section {
  position: relative;
  padding: 18px 20px;
  border: 1px dashed var(--ai-line);
  border-left: 5px solid var(--ai-accent);
  background: #fff;
}

.ai-product-detail.ai-style-project ul,
.db-product-detail.ai-style-project ul,
.product-optimized-content.ai-style-project ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  padding-left: 20px;
}

.ai-product-detail.ai-style-project th,
.db-product-detail.ai-style-project th,
.product-optimized-content.ai-style-project th {
  width: 34%;
  background: var(--ai-soft);
  color: var(--ai-dark);
}

/* 7. Maintenance guide */
.ai-product-detail.ai-style-maintenance > section,
.db-product-detail.ai-style-maintenance > section,
.product-optimized-content.ai-style-maintenance > section {
  padding: 18px 20px;
  border: 1px solid #dce6ee;
  border-radius: 5px;
  background: #fbfdff;
}

.ai-product-detail.ai-style-maintenance h2,
.ai-product-detail.ai-style-maintenance h3,
.db-product-detail.ai-style-maintenance h2,
.db-product-detail.ai-style-maintenance h3,
.product-optimized-content.ai-style-maintenance h2,
.product-optimized-content.ai-style-maintenance h3 {
  padding-left: 12px;
  border-left: 4px solid var(--ai-accent);
}

.ai-product-detail.ai-style-maintenance li,
.db-product-detail.ai-style-maintenance li,
.product-optimized-content.ai-style-maintenance li {
  margin: 7px 0;
}

.ai-product-detail.ai-style-maintenance details,
.db-product-detail.ai-style-maintenance details,
.product-optimized-content.ai-style-maintenance details {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--ai-line);
  border-radius: 4px;
  background: #fff;
}

.ai-product-detail.ai-style-maintenance th,
.db-product-detail.ai-style-maintenance th,
.product-optimized-content.ai-style-maintenance th {
  background: var(--ai-dark);
  color: #fff;
}

/* 8. Compact reference */
.ai-product-detail.ai-style-compact,
.db-product-detail.ai-style-compact,
.product-optimized-content.ai-style-compact {
  padding: 4px 0;
}

.ai-product-detail.ai-style-compact > section,
.db-product-detail.ai-style-compact > section,
.product-optimized-content.ai-style-compact > section {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #dfe7ee;
}

.ai-product-detail.ai-style-compact h2,
.ai-product-detail.ai-style-compact h3,
.db-product-detail.ai-style-compact h2,
.db-product-detail.ai-style-compact h3,
.product-optimized-content.ai-style-compact h2,
.product-optimized-content.ai-style-compact h3 {
  margin: 0 0 8px;
  color: var(--ai-accent);
}

.ai-product-detail.ai-style-compact th,
.db-product-detail.ai-style-compact th,
.product-optimized-content.ai-style-compact th {
  width: 34%;
  background: #f4f7fa;
  color: var(--ai-dark);
}

/* Shared CTA follows the active site theme in every profile. */
.ai-product-detail[class*="ai-style-"] .ai-cta,
.db-product-detail[class*="ai-style-"] .ai-cta,
.product-optimized-content[class*="ai-style-"] .ai-cta {
  border: 0;
  background: var(--ai-dark);
  color: #fff;
}

.ai-product-detail[class*="ai-style-"] .ai-cta p,
.db-product-detail[class*="ai-style-"] .ai-cta p,
.product-optimized-content[class*="ai-style-"] .ai-cta p {
  color: #eef5fb;
}

.ai-product-detail[class*="ai-style-"] .ai-cta h2,
.ai-product-detail[class*="ai-style-"] .ai-cta h3,
.ai-product-detail[class*="ai-style-"] .ai-cta a,
.db-product-detail[class*="ai-style-"] .ai-cta h2,
.db-product-detail[class*="ai-style-"] .ai-cta h3,
.db-product-detail[class*="ai-style-"] .ai-cta a,
.product-optimized-content[class*="ai-style-"] .ai-cta h2,
.product-optimized-content[class*="ai-style-"] .ai-cta h3,
.product-optimized-content[class*="ai-style-"] .ai-cta a {
  color: #fff;
}

/* Decision-support body tables remain visually distinct from Technical Specifications. */
.ai-product-detail[class*="ai-style-"] .ai-table-wrap,
.db-product-detail[class*="ai-style-"] .ai-table-wrap,
.product-optimized-content[class*="ai-style-"] .ai-table-wrap {
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: #fff;
}

.ai-product-detail .ai-table-wrap table,
.db-product-detail .ai-table-wrap table,
.product-optimized-content .ai-table-wrap table {
  margin: 0;
  border: 0;
}

.ai-product-detail .ai-table-wrap th,
.ai-product-detail .ai-table-wrap td,
.db-product-detail .ai-table-wrap th,
.db-product-detail .ai-table-wrap td,
.product-optimized-content .ai-table-wrap th,
.product-optimized-content .ai-table-wrap td {
  word-break: normal;
  overflow-wrap: break-word;
}

.ai-product-detail .ai-table-wrap th,
.ai-product-detail .ai-table-wrap td,
.db-product-detail .ai-table-wrap th,
.db-product-detail .ai-table-wrap td,
.product-optimized-content .ai-table-wrap th,
.product-optimized-content .ai-table-wrap td {
  border-width: 0 0 1px 1px;
}

.ai-product-detail .ai-table-wrap tr:last-child > *,
.db-product-detail .ai-table-wrap tr:last-child > *,
.product-optimized-content .ai-table-wrap tr:last-child > * {
  border-bottom: 0;
}

.ai-product-detail .ai-table-wrap tr > *:first-child,
.db-product-detail .ai-table-wrap tr > *:first-child,
.product-optimized-content .ai-table-wrap tr > *:first-child {
  border-left: 0;
}

.ai-table-selection th,
.ai-table-integration th,
.ai-table-quality th {
  background: var(--ai-dark) !important;
  color: #fff !important;
}

.ai-table-selection td:first-child,
.ai-table-project td:first-child {
  width: 38%;
  background: var(--ai-soft);
  color: var(--ai-dark);
  font-weight: 700;
}

.ai-table-compatibility {
  border-top: 4px solid var(--ai-accent) !important;
}

.ai-table-compatibility tr:nth-child(even) td,
.ai-table-maintenance tr:nth-child(even) td {
  background: #f6f9fb;
}

.ai-table-integration td:first-child {
  position: relative;
  width: 38%;
  padding-left: 28px !important;
  color: var(--ai-dark);
  font-weight: 700;
}

.ai-table-integration td:first-child::before {
  position: absolute;
  top: 17px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ai-accent);
  content: "";
}

.ai-table-quality {
  box-shadow: inset 4px 0 0 var(--ai-accent);
}

.ai-table-maintenance td:first-child {
  width: 38%;
  color: var(--ai-dark);
  font-weight: 700;
}

.ai-table-project {
  border-style: dashed !important;
}

@media (max-width: 700px) {
  .ai-product-detail[class*="ai-style-"] > section,
  .db-product-detail[class*="ai-style-"] > section,
  .product-optimized-content[class*="ai-style-"] > section {
    margin: 12px 0;
  }

  .ai-product-detail.ai-style-feature-grid .ai-grid,
  .db-product-detail.ai-style-feature-grid .ai-grid,
  .product-optimized-content.ai-style-feature-grid .ai-grid,
  .ai-product-detail.ai-style-project ul,
  .db-product-detail.ai-style-project ul,
  .product-optimized-content.ai-style-project ul {
    grid-template-columns: 1fr;
  }

  .ai-product-detail.ai-style-process > section:not(.ai-cta),
  .db-product-detail.ai-style-process > section:not(.ai-cta),
  .product-optimized-content.ai-style-process > section:not(.ai-cta) {
    padding: 54px 14px 15px;
  }

  .ai-product-detail.ai-style-process > section:not(.ai-cta)::before,
  .db-product-detail.ai-style-process > section:not(.ai-cta)::before,
  .product-optimized-content.ai-style-process > section:not(.ai-cta)::before {
    top: 14px;
    left: 14px;
  }

  .ai-product-detail[class*="ai-style-"] .ai-table-wrap,
  .db-product-detail[class*="ai-style-"] .ai-table-wrap,
  .product-optimized-content[class*="ai-style-"] .ai-table-wrap {
    overflow-x: auto;
  }

  .ai-product-detail[class*="ai-style-"] table,
  .db-product-detail[class*="ai-style-"] table,
  .product-optimized-content[class*="ai-style-"] table {
    table-layout: auto;
  }

  .ai-product-detail .ai-table-wrap td:first-child,
  .db-product-detail .ai-table-wrap td:first-child,
  .product-optimized-content .ai-table-wrap td:first-child {
    width: 42%;
  }
}
