/* Comparison table: scoped layout and wrapping; sizes inherit homepage tokens. */

:root {
  --black: #000000;
  --soft-bg: #f7f6f3;
  --border: #000000;
  --green: #0f9d58;
  --red: #d93025;
}

/* ===== Fluid Engine shrink fix ===== */
#collection-69960d2573b0ec2d13697b83 .fe-block,
#collection-69960d2573b0ec2d13697b83 .sqs-block-code,
#collection-69960d2573b0ec2d13697b83 .sqs-block-content {
  min-width: 0 !important;
}

.comparison-wrapper {
  width: 100%;
  padding: 40px 16px;
  font-family: "EB Garamond", serif;
  box-sizing: border-box;
}

.comparison-wrapper * {
  box-sizing: border-box;
}

.comparison-scroll {
  width: 100%;
  overflow-x: visible;
}

/* ===== DESKTOP TABLE ===== */

.comparison-table {
  --home-text-size: .9rem;
  font-size: .9rem;
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 3px solid var(--black);
  table-layout: fixed;
}

/* Header row */

.comparison-table thead {
  background: #ffffff;
  color: var(--black);
}

.comparison-table thead th {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 24px 18px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 3px solid var(--black);
}

/* Cells */

.comparison-table td {
  padding: 24px 18px;
  border-bottom: 3px solid var(--black);
  text-align: center;
}

.comparison-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--black);
  word-break: break-word;
}

/* remove MEC highlight */

.comparison-table tbody td:nth-child(2) {
  background: transparent;
}

/* Keep the desktop table proportional within its 840px container. */
@media (min-width: 769px) {
  .comparison-wrapper { padding: 24px 0; container-type: inline-size; }
  .comparison-table { border-width: 2px; }
  .comparison-table thead th { width: 15%; --home-text-size: .7rem; font-size: .7rem; }
  .comparison-table thead th:first-child { width: 25%; }
  .comparison-table thead th {
    padding: 16px 4px;
    letter-spacing: 0;
    border-bottom-width: 2px;
    overflow-wrap: anywhere; word-break: normal;
  }
  .comparison-table td {
    padding: 16px 10px;
    line-height: 1.25;
    border-bottom-width: 2px;
  }
  .comparison-table td:first-child { word-break: normal; overflow-wrap: anywhere; }
  .comparison-table .icon { width: 22px; height: 22px; }
}

/* ===== ICON STYLING ===== */

.icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

.icon svg {
  width: 100%;
  height: 100%;
}

/* Keep one table at every width, overriding the imported card layout. */
#page .comparison-wrapper { padding-inline: 0; }
#page .comparison-table { display: table !important; border-width: 2px; }
#page .comparison-table thead { display: table-header-group !important; }
#page .comparison-table tbody { display: table-row-group !important; width: auto !important; }
#page .comparison-table tr {
  display: table-row !important;
  width: auto !important;
  margin: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
#page .comparison-table th,
#page .comparison-table td { display: table-cell !important; }
#page .comparison-table thead th {
  width: 15%;
  --home-text-size: .7rem;
  font-size: .7rem;
  padding: 16px 4px;
  letter-spacing: 0;
  border-bottom-width: 2px;
  white-space: nowrap;
  overflow-wrap: normal;
}
#page .comparison-table thead th:first-child { width: 25%; }
#page .comparison-table td {
  width: auto !important;
  padding: 16px 10px;
  text-align: center;
  border-bottom: 2px solid var(--black);
}
#page .comparison-table td:first-child {
  background: transparent;
  color: var(--black);
  font-weight: 500;
  text-align: left;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
}
#page .comparison-table td::before { content: none; }
#page .comparison-table .icon { width: 22px; height: 22px; }
