.bundle-build-cost-breakdown {
    margin: 1rem 0;
    margin-bottom: 30px;
    border-radius: 4px;
}

.bundle-build-cost-table {
    width: 100%;
    border-collapse: collapse;
}

.bundle-build-cost-table th,
.bundle-build-cost-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    font-size: 14px;
}

.bundle-build-cost-table td {
    text-align: right;
    white-space: nowrap;
}

.bundle-build-cost-table tr + tr th,
.bundle-build-cost-table tr + tr td {
    border-top: 1px solid #e0e0e0;
}

.bundle-build-cost-total th,
.bundle-build-cost-total td {
    font-weight: 700;
    font-size: 16px;
}

.bundle-build-cost-minimum {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

/* ── Price spans inside the breakdown table ──────────────────────────────
 * The theme's price-including-tax / price-excluding-tax spans are normally
 * laid out inline inside the price box. Inside our <td> we want them
 * stacked (inc. on top, exc. below) with the exc. line smaller and muted,
 * matching the visual hierarchy of the native price box.
 */
.bundle-build-cost-table td .price-including-tax,
.bundle-build-cost-table td .price-excluding-tax {
    display: block;
    white-space: nowrap;
}

.bundle-build-cost-table td .price-excluding-tax {
    font-size: 0.82em;
    color: #666;
}

.bundle-build-cost-table td .price-excluding-tax::before {
    content: attr(data-label) ': ';
    font-size: 1em;
}

/* When only one price type is shown the ::before pseudo-element
   for the inc-tax span is not needed (no label above it). */
.bundle-build-cost-table td .price-including-tax:only-child::before {
    content: none;
}