.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-table-scroll {
  position: relative;
}

.spec-table-scroll + .spec-table-scroll {
  margin-top: 40px;
}

.spec-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  border: none;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}

/* Hello Elementor's reset boxes every th/td in a grey border and stripes/
   hover-tints rows. Borders are cleared at low specificity so the lines
   below can re-add them; backgrounds need the reset's own selectors. */
.spec-table th,
.spec-table td {
  border: none;
}

.spec-table thead:first-child tr:first-child th {
  border-top: none;
}

.spec-table tbody tr:hover th,
.spec-table tbody tr:hover td,
.spec-table tbody tr:nth-child(odd) th,
.spec-table tbody tr:nth-child(odd) td {
  background: transparent;
}

.spec-table th,
.spec-table td {
  padding: 14px 28px;
  text-align: left;
  white-space: nowrap;
}

.spec-table thead th {
  color: var(--blue, #719bf2);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--blue, #719bf2);
}

.spec-table tbody th {
  color: var(--blue, #719bf2);
  font-weight: 600;
  white-space: normal;
}

.spec-table tbody td {
  color: #1f2430;
  font-weight: 400;
  border-bottom: 1px solid #d5d7da;
}

.spec-table tbody tr:last-child td {
  border-bottom: none;
}

.spec-table thead th:first-child,
.spec-table tbody th:first-child {
  border-right: 1px solid var(--blue, #719bf2);
}

/* Long text cells (e.g. accessory descriptions) wrap instead of
   stretching the table; everything else stays on one line. The table
   drops its max-content floor so those cells can actually wrap. */
.spec-table.spec-table--wrap {
  min-width: 0;
}

.spec-table td.is-long {
  white-space: normal;
  min-width: 320px;
}

/* Swipe hint: a hand over a double arrow, with a soft fade, at the right edge of a table
   that can scroll sideways (spec-table.js sets the classes on .spec-table-scroll). The
   hand slides sideways until the visitor starts to swipe; it disappears at the end.
   Deliberately no circle or outline: that looks like a button. */
.spec-table-hint {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  padding: 6px 6px 0 0;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: flex-start;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 45%);
  color: var(--blue, #719bf2);
  pointer-events: none;
}

.spec-table-scroll.can-scroll:not(.at-end) .spec-table-hint {
  display: flex;
}

.spec-table-scroll:not(.is-scrolled) .spec-table-hint__hand {
  animation: spec-table-swipe 1.8s ease-in-out infinite;
}

@keyframes spec-table-swipe {
  0%,
  100% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spec-table-scroll:not(.is-scrolled) .spec-table-hint__hand {
    animation: none;
  }
}

/* Phones: 14px text and tighter cells, so more of the table fits on screen. */
@media (max-width: 767px) {
  .spec-table {
    font-size: 14px;
  }

  .spec-table th,
  .spec-table td {
    padding: 10px 16px;
  }

  .spec-table thead th {
    font-size: 14px;
  }
}