/*
 * Design › Preview: a small copy of the storefront table and its
 * templates (src/table/table.css, classic.css and Pro table.css), driven
 * by the same local tokens (`--_surface`, `--_text`, `--_line`…).
 */
.pcfw-dp {
  /* Defaults; DesignPreview sets the draft values inline. */
  --_surface: #fff;
  --_text: #14161b;
  --_line: #eef0f3;
  --_label: #3d4350;
  --_label-bg: var(--_surface);
  --_label-weight: 500;
  --_diff: #fff6d9;
  --_cart-bg: #2b59e0;
  --_cart-text: #fff;
  --_radius: 10px;
  --_tint: #e8ecf5;

  color: var(--_text);
  font-size: 13px;
  line-height: 1.45;
}

.pcfw-dp__scroll {
  overflow: hidden;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_surface);
}

.pcfw-dp table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pcfw-dp th,
.pcfw-dp td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--_line);
  font-weight: 400;
  text-align: start;
  vertical-align: top;
}

.pcfw-dp tbody tr:last-child > * {
  border-bottom: 0;
}

.pcfw-dp__corner,
.pcfw-dp__label {
  width: 84px;
}

.pcfw-dp .pcfw-dp__label {
  background: var(--_label-bg);
  color: var(--_label);
  font-weight: var(--_label-weight, 500);
}

.pcfw-dp tr.is-different > * {
  background: var(--_diff);
}

.pcfw-dp__image {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 6px;
  border-radius: max(0px, calc(var(--_radius) - 2px));
  background: var(--_tint);
}

.pcfw-dp__name {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.pcfw-dp__cart {
  display: inline-block;
  padding: 5px 10px;
  border-radius: max(0px, calc(var(--_radius) - 2px));
  background: var(--_cart-bg);
  color: var(--_cart-text);
  font-weight: 600;
  white-space: nowrap;
}

/* Classic: open table, bold labels, centred values. */
.pcfw-dp--classic {
  --_classic-line: color-mix(in srgb, var(--_text) 11%, var(--_surface));
}

.pcfw-dp--classic .pcfw-dp__scroll {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pcfw-dp--classic th,
.pcfw-dp--classic td {
  text-align: center;
  vertical-align: middle;
}

.pcfw-dp--classic thead > tr > * {
  border-bottom: 0;
  vertical-align: top;
}

.pcfw-dp--classic tbody tr > * {
  border-top: 1px solid var(--_classic-line);
  border-bottom: 0;
}

.pcfw-dp--classic tbody tr:last-child > * {
  border-bottom: 1px solid var(--_classic-line);
}

.pcfw-dp--classic .pcfw-dp__label {
  color: var(--_text);
  font-weight: 700;
  text-align: start;
}

.pcfw-dp--classic .pcfw-dp__image {
  border-radius: 0;
}

.pcfw-dp--classic .pcfw-dp__name {
  font-weight: 400;
}

.pcfw-dp--classic .pcfw-dp__cart {
  border-radius: max(0px, calc(var(--_radius) - 1px));
}

.pcfw-dp--classic tr.is-price > td {
  font-weight: 700;
}

/* Cards (Pro): each product a raised card on a soft background. */
.pcfw-dp--cards {
  --_card-ground: color-mix(in srgb, var(--_text) 4%, var(--_surface));
}

.pcfw-dp--cards .pcfw-dp__scroll {
  padding: 10px 4px;
  border: 0;
  border-radius: calc(var(--_radius) * 1.6);
  background: var(--_card-ground);
}

.pcfw-dp--cards table {
  border-spacing: 8px 0;
}

.pcfw-dp--cards th,
.pcfw-dp--cards td {
  border-bottom: 0;
  background: var(--_surface);
}

.pcfw-dp--cards .pcfw-dp__corner,
.pcfw-dp--cards .pcfw-dp__label,
.pcfw-dp--cards tr.is-different > .pcfw-dp__label {
  background: var(--_card-ground);
}

.pcfw-dp--cards .pcfw-dp__product,
.pcfw-dp--cards .pcfw-dp__cell {
  border-inline: 1px solid var(--_line);
}

.pcfw-dp--cards .pcfw-dp__product {
  border-top: 1px solid var(--_line);
  border-radius: var(--_radius) var(--_radius) 0 0;
}

.pcfw-dp--cards tbody tr + tr .pcfw-dp__cell {
  border-top: 1px solid color-mix(in srgb, var(--_line) 70%, transparent);
}

.pcfw-dp--cards tbody tr:last-child .pcfw-dp__cell {
  border-bottom: 1px solid var(--_line);
  border-radius: 0 0 var(--_radius) var(--_radius);
}

.pcfw-dp--cards tr.is-different > .pcfw-dp__cell {
  background: color-mix(in srgb, var(--_diff) 70%, var(--_surface));
}

/* Spec sheet (Pro): dense, striped, small-caps labels. */
.pcfw-dp--spec_sheet table {
  font-size: 0.93em;
  font-variant-numeric: tabular-nums;
}

.pcfw-dp--spec_sheet .pcfw-dp__scroll {
  border-radius: 4px;
}

.pcfw-dp--spec_sheet th,
.pcfw-dp--spec_sheet td {
  padding: 6px 10px;
}

.pcfw-dp--spec_sheet tbody tr:nth-child(even) > * {
  background: color-mix(in srgb, var(--_text) 3%, var(--_surface));
}

.pcfw-dp--spec_sheet .pcfw-dp__label {
  background: color-mix(in srgb, var(--_text) 6%, var(--_surface));
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pcfw-dp--spec_sheet tbody tr.is-different > * {
  background: var(--_diff);
}

.pcfw-dp--spec_sheet thead > tr > * {
  border-bottom: 2px solid var(--_text);
}

.pcfw-dp--spec_sheet .pcfw-dp__image {
  max-width: 72px;
  border-radius: 2px;
}

.pcfw-dp--spec_sheet .pcfw-dp__cart {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Dark (Pro): the same layout on dark surfaces (tokens from previewVars). */
.pcfw-dp--dark {
  padding: 12px;
  border-radius: calc(var(--_radius) * 1.6);
  background: var(--_surface);
  color-scheme: dark;
}

.pcfw-dp--dark .pcfw-dp__image {
  background: color-mix(in srgb, var(--_text) 8%, var(--_surface));
}