/*
 * The product page's fit box (product fit; fit.php prints it with fit.js inline right after it, which writes the answer
 * before anything below is laid out). Should a paint ever fall between the box and that script, a stored car
 * (picker.php's head class ttf-has-car) keeps the question hidden in its place. picker.js marks the category bar's
 * counts for the car with the same class ttf-fit (picker.css): the box's own rule holds for the box alone
 * (:where() keeps its weight one class, so the tones below still win).
 */
.ttf-fit:where([data-ttf-fit]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid #DEE2E6;
    border-radius: 8px;
    background: #fff;
    color: var(--color-text-primary, #212529);
}
.ttf-fit--universal { background: #F1F3F5; }
.ttf-fit--nodata { background: #F8F9FA; }
.ttf-fit--nodata:empty { display: none; }
.ttf-has-car .ttf-fit--car:not(.ttf-fit--ready) > * { visibility: hidden; }

.ttf-fit p { margin: 0; }
.ttf-fit .ttf-fit__text { font-size: .9375rem; font-weight: 700; line-height: 1.3125rem; }
.ttf-fit .ttf-fit__sub { margin-top: .25rem; color: #495057; font-size: .875rem; line-height: 1.25rem; }
.ttf-fit__icon { display: inline-block; min-width: 1.25em; font-weight: 800; }
.ttf-fit__sub a { color: #D81D33; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ttf-fit__sub a:hover { color: #B8162B; }
.ttf-fit .ttf-fit__check {
    display: inline-block;
    margin-top: .5rem;
    padding: .375rem .875rem;
    border: 1.5px solid #D81D33;
    border-radius: 8px;
    color: #D81D33;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-decoration: none;
}
.ttf-fit .ttf-fit__check:hover { background: #D81D33; color: #fff; }
.ttf-fit a:focus-visible { outline: 2px solid #D81D33; outline-offset: 2px; }

.ttf-fit--yes { border-color: #BFE3CB; background: #EEF8F1; }
.ttf-fit--yes .ttf-fit__icon { color: #198754; }
.ttf-fit--check { border-color: #F1D08A; background: #FFF7E6; }
.ttf-fit--check .ttf-fit__icon { color: #A15C00; }
.ttf-fit--no { border-color: #F2B8C0; background: #FDEEF0; }
.ttf-fit--no .ttf-fit__icon { color: #D81D33; }