/* =====================================================================
   Price grids — live tables (by weight, by currency, by purity/carat).
   Built by prices.js. Tokens only.
   ===================================================================== */

.price-grids {
  padding-block: 28px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* weight + currency on row 1, purity row 2 */
  gap: 28px 24px;
  align-items: start;
}
/* let the data tables shrink and scroll inside their cell instead of pushing
   the grid wider than the page frame */
.price-grids__block { min-width: 0; }
/* Purity (gold only) spans the full width below the two wide tables, laid out
   as three carat/price pairs per row — fills the space instead of leaving an
   empty quadrant. (Hidden on silver/platinum, so this is a no-op there.) */
.price-grids__block--carat { grid-column: 1 / -1; }

.price-grids__title {
  margin: 0 0 12px;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--gray-8);
}

.price-grids__scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-10);
}
.price-grids__scroll:focus-visible { outline: 2px solid var(--og-blue); outline-offset: 2px; }

.price-grids__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.price-grids__table th,
.price-grids__table td {
  padding: 9px 8px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
/* a touch more breathing room on the row label + last (1D%) cell */
.price-grids__cell--row { padding-left: 14px; }
.price-grids__table th:last-child,
.price-grids__table td:last-child { padding-right: 14px; }
.price-grids__table thead th {
  background: var(--pale-blue);
  color: var(--gray-7);
  font-weight: var(--fw-semibold);
  font-size: 12px;
}
.price-grids__table thead th:first-child,
.price-grids__cell--row { text-align: left; }
.price-grids__cell--row { font-weight: var(--fw-semibold); color: var(--gray-8); }
.price-grids__row:last-child th,
.price-grids__row:last-child td { border-bottom: 0; }
.price-grids__pct--up { color: var(--green); }
.price-grids__pct--down { color: var(--red); }

@media (max-width: 1023.98px) {
  /* Collapse to single column; reduce cell padding + font at tablet width */
  .price-grids { grid-template-columns: 1fr; }
  .price-grids__table { font-size: 12px; }
  .price-grids__table th,
  .price-grids__table td { padding: 7px 6px; }
  .price-grids__cell--row { padding-left: 10px; }
  .price-grids__table th:last-child,
  .price-grids__table td:last-child { padding-right: 10px; }
  .price-grids__title { font-size: var(--fs-18); }
}

/* ---- Phone (≤599): revert tablet font/padding reductions — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .price-grids__table { font-size: 13px; }
  .price-grids__table th,
  .price-grids__table td { padding: 9px 8px; }
  .price-grids__cell--row { padding-left: 14px; }
  .price-grids__table th:last-child,
  .price-grids__table td:last-child { padding-right: 14px; }
  .price-grids__title { font-size: var(--fs-20); }
}