/* ot-pricetable — neutral, accessible base styling. Override per project. */
.ot-pricetable {
    width: 100%;
    border-collapse: collapse;
}

.ot-pricetable__caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding: 0 0 .5rem;
}

.ot-pricetable th,
.ot-pricetable td {
    padding: .375rem .5rem;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

/* Row hover on the data rows. */
.ot-pricetable tbody tr:hover {
    background-color: rgba(0, 0, 0, .04);
}

.ot-pricetable thead th {
    text-align: left;
    border-bottom: 2px solid #999;
}

/* Price column headers align with their right-aligned values. */
.ot-pricetable thead th.ot-pricetable__num {
    text-align: right;
}

.ot-pricetable__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The item name is the single emphasis in the designation column. */
.ot-pricetable th[scope="rowgroup"] {
    text-align: left;
    font-weight: 700;
    padding-top: .75rem;
}

.ot-pricetable__group-head th {
    border-bottom: none;
}

/* Tier / variant rows within a group: normal weight + indented, so they read
   as sub-entries of the item name above them. */
.ot-pricetable__group th[scope="row"] {
    font-weight: 400;
    padding-left: 1.75rem;
}

.ot-pricetable__base,
.ot-pricetable__desc,
.ot-pricetable__unit {
    font-weight: 400;
    color: #555; /* check contrast >= 4.5:1 against the project background */
}

/* Reference price and description are secondary: own line, smaller. */
.ot-pricetable__base,
.ot-pricetable__desc {
    display: block;
    font-size: .85em;
}

.ot-pricetable__vat-hint {
    font-style: italic;
    color: #444;
}

.ot-pricetable__intro {
    margin-bottom: 1rem;
}

.ot-pricetable tfoot td {
    border-bottom: none;
    padding-top: .75rem;
    font-size: .9em;
    color: #444;
}