/* The specification table — a light grey panel inside the dark page.
 *
 * Measured on aeke.com's `/products/buy-aeke-b1` at 1440:
 *
 *   section   1076 tall = `padding: 60px 0` around a 956 panel
 *   panel     956 = #f5f5f5 with its own `padding: 60px 0` around 796 of content
 *   title     42px/600/50px, #333333, `margin: 0 0 50px`, centred
 *   list      1000 wide, centred; each row 58 tall = 15 + 27 + 15 + a 0.8px hairline
 *   label     #666666 at 400      value  #333333 at 500, right-aligned
 *
 * The 120px of space above and below the panel is deliberate and is why the outer wrapper has
 * padding of its own on top of the panel's: the light rectangle is 956, not 1076.
 */

.product-specs {
  padding: 60px 0;
}

.product-specs__panel {
  padding: 60px 0;
  background: var(--surface-specs-panel);
}

.product-specs__title {
  margin: 0 0 50px;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  font-weight: var(--font-body-bold-weight);
  text-align: center;
  color: var(--color-specs-title);
}

/* Measured: the list is centred at 1000px inside a 1325px container, and the rows are a column. */
.product-specs__items {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto 40px;
}

.product-specs__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 15px 0;
  /* The theme's own hairline: 0.8px, and it is on every row including the last. */
  border-bottom: 0.8px solid var(--color-specs-rule);
}

.product-specs__name {
  color: var(--color-specs-name);
}

.product-specs__value {
  margin: 0;
  font-weight: 500;
  text-align: right;
  color: var(--color-specs-value);
}

/* Upstream hides the table below 768px and its replacement block is empty, so the section is a
   heading with nothing under it on a phone. Ours keeps the rows: long values wrap, and the label
   stays on the left of its own row rather than the two columns squeezing each other. */
@media (max-width: 47.99em) {
  .product-specs__item {
    align-items: flex-start;
  }

  .product-specs__title {
    margin-bottom: 30px;
  }
}