/**
 * plg_j2commerce_app_fitment — site CSS (§9.1 / §9.6).
 *
 * Styles the `j2c-fitment-*` classes used by the product panel and the JS-built inline finder.
 * Deliberately framework-neutral (no bootstrap5/uikit selectors) — finder.js and garage.js are
 * shared between both template families, so their generated markup only carries these classes;
 * the PHP templates layer their own family-specific classes (card/alert/uk-alert/…) on top.
 */

.j2c-fitment-panel__rule {
    padding: 0.15rem 0;
}

.j2c-fitment-panel__more summary {
    cursor: pointer;
}

.j2c-fitment-finder__prompt {
    font-weight: 600;
}

.j2c-fitment-level {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.j2c-fitment-level__label {
    flex: 0 0 100%;
    font-weight: 500;
}

.j2c-fitment-level__control {
    flex: 1 1 auto;
    min-width: 10rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
}

.j2c-fitment-level__control:disabled {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: not-allowed;
}

.j2c-fitment-level__count {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.j2c-fitment-level__error {
    font-size: 0.8125rem;
    color: #b02a37;
    margin-right: 0.5rem;
}

.j2c-fitment-level__retry {
    font-size: 0.8125rem;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
    padding: 0.1rem 0.5rem;
    cursor: pointer;
}

.j2c-fitment-level__options,
.j2c-fitment-level__suggestions {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 12rem;
    overflow-y: auto;
}

.j2c-fitment-level__option {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.j2c-fitment-level__option:hover,
.j2c-fitment-level__option:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
}

.j2c-fitment-level__suggestions-heading {
    flex: 0 0 100%;
    font-size: 0.8125rem;
    opacity: 0.75;
    margin: 0;
}

.j2c-fitment-finder__status {
    min-height: 1.25rem;
}

.j2c-fitment-finder__verdict {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.j2c-fitment-finder__verdict--fits {
    color: #1e7e34;
}

.j2c-fitment-finder__verdict--miss {
    color: #b02a37;
}

.j2c-fitment-finder__label-input {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    min-width: 12rem;
}

.j2c-fitment-finder__save {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
}

.j2c-fitment-finder__save-status {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.j2c-fitment-noresults__heading {
    margin-bottom: 0.25rem;
}

/* ---- Results-page finder strip (tires) ----
   The reference strip's grid is 4 selects + button (1fr x4 + auto). The working
   finder adds the Vehicle Type level, so desktop needs one more column; below
   992px the template's own 2-col/1-col .ff-grid rules take over unchanged. */
@media (min-width: 992px) {
    .page-shop .shop-fitment-strip .ff-grid.ff-grid--results {
        grid-template-columns: repeat(5, 1fr) auto;
    }
}

/* Fitment finder selects — comfortably inset dropdown arrow (scoped, does not
   touch the template's global .form-select-c used elsewhere on the site).
   The extra `select.form-select-c` prefix raises specificity above the
   template's own `.form-select-c { padding: ... }` shorthand rule — both are
   otherwise equal-specificity class selectors, so source order (template.css
   loads after this file) would let the template's shorthand padding win and
   silently cancel this padding-right. */
select.form-select-c[data-j2c-fitment-select] {
    padding-right: 2.75rem;
}

/* Bare-visit landing panel (landing.php) */
.j2c-fitment-landing__icon {
    display: block;
    font-size: 3rem;
}