/*
 * Buyers Guide. The section chrome (title bar, open/closed state) comes from
 * the theme's .infodesc rules - this only styles what is inside.
 */

/*
 * The script hides things by setting the `hidden` attribute, which the browser
 * honours through a UA rule of [hidden] { display: none } - and that rule loses
 * to any explicit display value declared here. `.fitment-toggle-label` below is
 * display: inline-block, so "Show all N vehicles" stayed visible under a
 * filtered result no matter what the script did. Declared once, up front, so
 * adding a display value to anything in this file cannot resurrect the bug.
 */
.fitment-guide [hidden] {
    display: none !important;
}

.fitment-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

.fitment-filters select {
    min-width: 150px;
}

.fitment-clear {
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 14px;
}

/*
 * Not italic. It was, and italics reads as emphasis or a citation - neither of
 * which this is - while making a long string of fractions harder to scan.
 * A label and a left rule carry "this is an aside" without hurting legibility.
 */
.fitment-note {
    margin: 20px 0 0;
    padding: 12px 15px;
    background: #F5F5F5;
    border-left: 3px solid #C9C9C9;
}

.fitment-note-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

.fitment-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fitment-note-list li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.fitment-empty {
    margin: 15px 0;
    font-weight: 700;
}

.fitment-status {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: .75;
}

/* A dropdown with nothing left to offer, e.g. Engine on a vehicle-year that
   has no engine-qualified applications. */
.fitment-filters select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/*
 * Two filters per row on mobile. Stacked one-per-row, the four dropdowns pushed
 * the table nearly a full screen down the page. A grid pairs them without
 * touching the desktop row, which still fits all four side by side.
 */
@media (max-width: 767px) {
    .fitment-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: end;
    }

    /* The 150px floor is what forced the wrap; inside a grid cell the column
       already sets the width. */
    .fitment-filters select {
        min-width: 0;
        width: 100%;
    }

    /* Spans both columns so it never sits beside a dropdown as a stray
       half-width cell. */
    .fitment-clear {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.fitment-table {
    width: 100%;
}

/*
 * Row striping, in the same light blue as the Cross References table above it
 * (the theme's @table-cell-stripped__background-color - this file is plain CSS
 * and cannot read the variable).
 *
 * Keyed off a class rather than :nth-child(even) because the filter hides rows
 * with the `hidden` attribute and nth-child goes on counting them: a filtered
 * result striped itself at random - two shaded rows together, then three plain.
 * The template stamps the class for the unfiltered render, so it is correct
 * with JavaScript off, and the filter script restamps it over the rows that
 * are actually visible.
 */
.fitment-table > tbody > tr.fitment-row-alt > td {
    background: rgba(211, 231, 255, .25);
}

.fitment-table-wrap {
    position: relative;
}

/*
 * Capped by height, never by row count: every row stays in the markup so a
 * crawler reads all of them. The toggle is a sibling checkbox, so no
 * JavaScript is involved and the cap works even if the filter script fails.
 */
.fitment-table-wrap.is-capped {
    max-height: 40em;
    overflow: hidden;
}

.fitment-table-wrap.is-capped::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4em;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

.fitment-toggle:checked ~ .fitment-table-wrap.is-capped {
    max-height: none;
    overflow: visible;
}

.fitment-toggle:checked ~ .fitment-table-wrap.is-capped::after {
    display: none;
}

.fitment-toggle-label {
    display: inline-block;
    margin-top: 15px;
    cursor: pointer;
    text-decoration: underline;
}

.fitment-toggle-less {
    display: none;
}

.fitment-toggle:checked ~ .fitment-toggle-label .fitment-toggle-more {
    display: none;
}

.fitment-toggle:checked ~ .fitment-toggle-label .fitment-toggle-less {
    display: inline;
}

@media print {
    .fitment-filters,
    .fitment-toggle-label {
        display: none;
    }

    .fitment-table-wrap.is-capped {
        max-height: none;
        overflow: visible;
    }

    .fitment-table-wrap.is-capped::after {
        display: none;
    }
}