/* YELLOW WRAPPER FOR COMMISSION DETAILS */
.commission-details-wrapper {
  background-color: var(--shw);       /* soft yellow background */
  padding: 1.5rem;                 /* space between yellow border and white box */
  border-radius: var(--quaver);    /* same roundness as table */
  margin-bottom: 2rem;             /* space below wrapper */
}

.commission-details-wrapper h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;                     /* dark text for readability */
}

/* WHITE INNER TABLE */
.commission-type-display-container {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "size medium"
    "subject subject"
    "price price";
  background-color: #fff;          /* white background for the table */
  border-radius: var(--quaver);
  max-width: 400px;
  padding: 1rem;                   /* inner padding */
}

/* KEEP YOUR ORIGINAL STYLES */
.commission-type-display-size,
.commission-type-display-medium,
.commission-type-display-subject,
.commission-type-display-price {
  padding-top: var(--crotchet);
  padding-bottom: var(--crotchet);
  font-size: 1.125rem;
  font-weight: 300;
  position: relative;
}

.commission-type-display-size {
  grid-area: size;
}

.commission-type-display-medium {
  grid-area: medium;
}

.commission-type-display-subject {
  grid-area: subject;
}

.commission-type-display-price {
  grid-area: price;
  font-family: var(--font-serif);
  line-height: 2;
}

/* LABEL ABOVE VALUE — MINIMAL CHANGE */
.commission-type-display-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
}
