.ai-product-spec {
  --ai-spec-accent: var(--site-theme-color, #0064c8);
  --ai-spec-dark: #173653;
  --ai-spec-soft: #edf5fb;
  --ai-spec-line: #d6e3ee;
  margin: 14px 0 20px;
  color: #334e68;
}

.ai-product-spec table,
table.db-spec {
  width: 100%;
  margin: 0;
  border: 1px solid var(--ai-spec-line, #d6e3ee);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 54, 83, 0.07);
  table-layout: fixed;
}

.ai-product-spec th,
.ai-product-spec td,
table.db-spec th,
table.db-spec td {
  box-sizing: border-box;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid var(--ai-spec-line, #d6e3ee);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ai-product-spec th,
table.db-spec th {
  width: 34%;
  border-right: 1px solid var(--ai-spec-line, #d6e3ee);
  background: var(--ai-spec-soft, #edf5fb);
  color: var(--ai-spec-dark, #173653);
  font-weight: 700;
}

.ai-product-spec td,
table.db-spec td {
  color: #415b73;
}

.ai-product-spec tr:nth-child(even) th,
.ai-product-spec tr:nth-child(even) td,
table.db-spec tr:nth-child(even) th,
table.db-spec tr:nth-child(even) td {
  background-color: #f8fbfd;
}

.ai-product-spec tr:hover th,
.ai-product-spec tr:hover td,
table.db-spec tr:hover th,
table.db-spec tr:hover td {
  background-color: #eef7ff;
}

.ai-product-spec tr:last-child th,
.ai-product-spec tr:last-child td,
table.db-spec tr:last-child th,
table.db-spec tr:last-child td {
  border-bottom: 0;
}

.ai-product-spec tr:first-child th,
table.db-spec tr:first-child th {
  box-shadow: inset 4px 0 0 var(--ai-spec-accent, #0064c8);
}

.ai-editor-canvas .ai-product-spec,
.ai-editor-canvas table.db-spec,
.ai-compare-after .ai-product-spec,
.ai-compare-after table.db-spec {
  max-width: 100%;
}

@media (max-width: 640px) {
  .ai-product-spec table,
  table.db-spec,
  .ai-product-spec tbody,
  table.db-spec tbody,
  .ai-product-spec tr,
  table.db-spec tr,
  .ai-product-spec th,
  .ai-product-spec td,
  table.db-spec th,
  table.db-spec td {
    display: block;
    width: 100%;
  }

  .ai-product-spec table,
  table.db-spec {
    border-radius: 5px;
    table-layout: auto;
  }

  .ai-product-spec tr,
  table.db-spec tr {
    border-bottom: 1px solid var(--ai-spec-line, #d6e3ee);
  }

  .ai-product-spec th,
  table.db-spec th {
    padding: 10px 12px 4px;
    border-right: 0;
    border-bottom: 0;
    background: #f1f7fb;
  }

  .ai-product-spec td,
  table.db-spec td {
    padding: 4px 12px 11px;
    border-bottom: 0;
  }

  .ai-product-spec tr:last-child,
  table.db-spec tr:last-child {
    border-bottom: 0;
  }
}