/*
 * Spec list (Tts\Ui\SpecList\SpecList): a product's facts as a <dl>, one row
 * each, label and value side by side and a hairline between rows.
 * Decision 23.
 */

.spec-list {
    margin: 0;
}

/* Every row carries a rule above and below, each overlapping its neighbour's,
   so the list opens and closes wherever it is broken - a list in two columns
   (the product page's wide band) closes both of them, which a rule on the last
   row (always the second column's) could not. A row is never split across a
   column break. */
.spec-list__row {
    break-inside: avoid;
    display: grid;
    grid-template-columns: minmax(7rem, 2fr) 3fr;
    gap: var(--shop-space-4);
    margin-block-end: -1px;
    padding-block: var(--shop-space-3);
    border-block: 1px solid var(--shop-divider);
}

.spec-list dt,
.spec-list dd {
    margin: 0;
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
}

.spec-list dt {
    color: var(--shop-text-soft);
    font-weight: var(--shop-weight-semibold);
}

.spec-list dd {
    color: var(--shop-ink);
    overflow-wrap: anywhere;
}

/* The colour's swatches (MiniColorBlockComponent), before its names. */
.spec-list__swatches {
    display: inline-flex;
    gap: 3px;
    margin-inline-end: var(--shop-space-1);
    vertical-align: -2px;
}

.spec-list__swatches > * {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--shop-border);
    border-radius: 3px;
}