/**
 * McLean Fitment Pages
 * @version 2.3.2
 *
 * Brand palette: gold #fcb316 / hover #d49a12 / dark #0a0a0a #1a1a1a #2a2a2a
 * text #e0e0e0 / muted #b0b0b0 / in-stock #27ae60
 *
 * Scoped under .mclean-fitment and !important where it must beat the devvly
 * child theme's entry-content link rule (specificity 0,5,2 + !important) and
 * the Elementor global button colour.
 */

.mclean-fitment {
    --mfit-gold: #fcb316;
    --mfit-gold-dark: #d49a12;
    --mfit-panel: #1a1a1a;
    --mfit-panel-2: #2a2a2a;
    --mfit-line: #3a3a3a;
    --mfit-text: #e0e0e0;
    --mfit-muted: #b0b0b0;
    --mfit-ok: #4ade80;   /* was #27ae60 = 4.62:1 on the tinted badge, no headroom */
    --mfit-warn: #e07b39;

    font-size: 17px;
    line-height: 1.6;
    max-width: 100%;
}

.mclean-fitment *,
.mclean-fitment *::before,
.mclean-fitment *::after {
    box-sizing: border-box;
}

/**
 * Baseline text colour for anything not explicitly styled below.
 *
 * Without this, bare <p> and <li> inherit the theme's default body colour
 * (#4b4f58 — a dark slate meant for a light background) and render at
 * 2.41:1 against the site's #0a0a0a body. Legible-looking in the editor,
 * near-invisible to a visitor.
 *
 * Kept at low specificity (0,1,1) on purpose so every muted/accent rule
 * further down still wins.
 */
.mclean-fitment,
.mclean-fitment p,
.mclean-fitment li,
.mclean-fitment ul,
.mclean-fitment ol,
.mclean-fitment strong,
.mclean-fitment em,
.mclean-fitment span {
    color: var(--mfit-text);
}

/* Answer-first block — first thing a reader or an answer engine takes */

.mclean-fitment .mfit-answer {
    background: var(--mfit-panel);
    border-left: 4px solid var(--mfit-gold);
    border-radius: 6px;
    padding: 18px 20px;
    margin: 0 0 28px;
}

.mclean-fitment .mfit-answer p {
    margin: 0;
    color: var(--mfit-text);
}

.mclean-fitment .mfit-answer strong {
    color: #fff;
}

.mclean-fitment .mfit-note {
    margin-top: 10px !important;
    color: var(--mfit-muted) !important;
    font-size: 0.95em;
}

.mclean-fitment h2 {
    color: #fff;
    font-size: 1.4rem;
    margin: 32px 0 12px;
}

.mclean-fitment h3 {
    color: var(--mfit-gold);
    font-size: 1.05rem;
    margin: 20px 0 6px;
}

.mclean-fitment .mfit-adapter {
    color: var(--mfit-muted);
    border-left: 2px solid var(--mfit-line);
    padding-left: 14px;
}

/* Mount list */

.mclean-fitment ul.mfit-mounts {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mclean-fitment li.mfit-mount {
    background: var(--mfit-panel);
    border: 1px solid var(--mfit-line);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 10px !important;
    list-style: none !important;
}

/**
 * Out-of-stock de-emphasis.
 *
 * This was `opacity: 0.62`, which dims every glyph in the card: the product
 * link fell to 4.45:1, the badge to 3.25:1 and the detail text to 3.89:1 —
 * all under the 4.5 minimum. Opacity cannot de-emphasise without also
 * degrading legibility, so the card recedes via a flatter background and
 * border while the text stays fully opaque.
 */
.mclean-fitment li.mfit-mount.is-out {
    background: #141414;
    border-color: #2e2e2e;
}

.mclean-fitment li.mfit-mount.is-out .mfit-mount-head a,
.mclean-fitment li.mfit-mount.is-out .mfit-price {
    color: var(--mfit-muted) !important;
}

.mclean-fitment .mfit-mount-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}

.mclean-fitment .mfit-mount-head a {
    color: var(--mfit-gold) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.mclean-fitment .mfit-mount-head a:hover,
.mclean-fitment .mfit-mount-head a:focus {
    color: var(--mfit-gold-dark) !important;
    text-decoration: underline !important;
}

.mclean-fitment .mfit-price {
    color: var(--mfit-text);
    font-weight: 600;
    margin-left: auto;
}

.mclean-fitment .mfit-badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.mclean-fitment .mfit-in {
    background: rgba(39, 174, 96, 0.18);
    color: var(--mfit-ok);
}

.mclean-fitment .mfit-out {
    background: rgba(176, 176, 176, 0.16);
    color: #c8c8c8;
}

/* One product row can cover several attachment types */

.mclean-fitment ul.mfit-fits {
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.mclean-fitment ul.mfit-fits li {
    color: var(--mfit-muted);
    font-size: 0.92rem;
    margin: 0 0 4px !important;
    padding-left: 14px;
    position: relative;
    list-style: none !important;
}

.mclean-fitment ul.mfit-fits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mfit-line);
}

.mclean-fitment ul.mfit-fits li strong {
    color: var(--mfit-text);
    font-weight: 600;
}

.mclean-fitment .mfit-allout {
    background: rgba(224, 123, 57, 0.12);
    border-left: 3px solid var(--mfit-warn);
    color: var(--mfit-text);
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 0.95rem;
}

.mclean-fitment .mfit-allout a {
    color: var(--mfit-gold) !important;
    text-decoration: underline !important;
}

/* Steps */

.mclean-fitment ol.mfit-steps {
    color: var(--mfit-text);
    padding-left: 22px;
}

.mclean-fitment ol.mfit-steps li {
    margin-bottom: 8px;
}

.mclean-fitment ol.mfit-steps strong {
    color: #fff;
}

/* Related — image + title cards */

.mclean-fitment ul.mfit-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mclean-fitment li.mfit-card {
    margin: 0 !important;
    list-style: none !important;
}

.mclean-fitment li.mfit-card > a {
    display: flex;
    flex-direction: column;
    background: var(--mfit-panel);
    border: 1px solid var(--mfit-line);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    text-decoration: none !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.mclean-fitment li.mfit-card > a:hover,
.mclean-fitment li.mfit-card > a:focus {
    border-color: var(--mfit-gold);
    transform: translateY(-2px);
}

.mclean-fitment .mfit-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* `contain`, not `cover`: firearm photos run ~4.4:1, so cover-cropping
       to a 16:10 tile throws away most of the gun. */
    object-fit: contain;
    background: #fff;
    padding: 6px;
}

/* Placeholder until real photography exists. Deliberately a neutral tile,
   not a stand-in image of some other firearm. */
.mclean-fitment .mfit-card-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a5a5a;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background:
        repeating-linear-gradient(135deg, #232323 0 10px, #1f1f1f 10px 20px);
}

.mclean-fitment .mfit-card-title {
    display: block;
    padding: 11px 13px;
    color: var(--mfit-gold) !important;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
}

/* CTA */

.mclean-fitment .mfit-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0;
}

.mclean-fitment a.mfit-btn {
    display: inline-block;
    padding: 14px 26px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center;
    flex: 1 1 220px;
}

.mclean-fitment a.mfit-btn-primary,
.mclean-fitment a.mfit-btn-primary:visited {
    background: var(--mfit-gold) !important;
    color: #0a0a0a !important;
}

.mclean-fitment a.mfit-btn-primary:hover,
.mclean-fitment a.mfit-btn-primary:focus {
    background: var(--mfit-gold-dark) !important;
    color: #0a0a0a !important;
}

.mclean-fitment a.mfit-btn-secondary,
.mclean-fitment a.mfit-btn-secondary:visited {
    background: transparent !important;
    color: var(--mfit-gold) !important;
    border: 1px solid var(--mfit-gold) !important;
}

.mclean-fitment a.mfit-btn-secondary:hover,
.mclean-fitment a.mfit-btn-secondary:focus {
    background: rgba(252, 179, 22, 0.12) !important;
    color: var(--mfit-gold) !important;
}

/* FAQ */

.mclean-fitment .mfit-faq p {
    color: var(--mfit-muted);
    margin: 0 0 14px;
}

@media (max-width: 600px) {
    .mclean-fitment {
        font-size: 16px;
    }

    .mclean-fitment h2 {
        font-size: 1.22rem;
    }

    /* Stacked, the buttons' flex-basis would apply to height and give each
       CTA a 220px-tall dead zone. */
    .mclean-fitment .mfit-cta {
        flex-direction: column;
    }

    .mclean-fitment a.mfit-btn {
        flex: 0 0 auto;
    }

    .mclean-fitment .mfit-price {
        margin-left: 0;
        width: 100%;
    }

    /**
     * Touch targets.
     *
     * The mount links render 26px tall and the related-model links 20px —
     * both well under the 44px minimum, which is awkward to hit on a phone.
     * Most of this traffic is mobile, so pad them out to 44px. Padding only,
     * so the visual layout barely shifts.
     */
    .mclean-fitment .mfit-mount-head a {
        display: inline-block;
        padding: 9px 0;
    }

    /* Two cards per row on a phone; the whole card is the tap target so
       no extra padding is needed to clear 44px. */
    .mclean-fitment ul.mfit-related {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mclean-fitment .mfit-card-title {
        padding: 9px 10px;
        font-size: 0.88rem;
    }
}

/* ---------------------------------------------------------- Diagram + imagery */

/* Mount thumbnails — McLean catalogue photography */

.mclean-fitment li.mfit-mount {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: start;
}

/* Cards without an image keep the text in the same column position. */
.mclean-fitment li.mfit-mount:not(:has(.mfit-mount-img)) {
    grid-template-columns: 1fr;
}

.mclean-fitment .mfit-mount-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--mfit-panel-2);
    border: 1px solid var(--mfit-line);
    grid-row: span 2;
}

@media (max-width: 600px) {
    .mclean-fitment li.mfit-mount {
        grid-template-columns: 52px 1fr;
        gap: 12px;
    }

    .mclean-fitment .mfit-mount-img {
        width: 52px;
        height: 52px;
    }

}

/* "No extra hardware needed" note — the DRS has its own front hook */
.mclean-fitment .mfit-direct {
    background: rgba(74, 222, 128, 0.10);
    border-left: 3px solid var(--mfit-ok);
    color: var(--mfit-text);
    padding: 12px 14px;
    border-radius: 4px;
    margin: 0 0 14px;
}

.mclean-fitment .mfit-direct strong {
    color: #fff;
}

/* Image attribution — required by CC BY / CC BY-SA */
.mclean-fitment .mfit-credits {
    color: var(--mfit-muted);
    font-size: 0.78rem;
    /* Generous line-height so the inline attribution links clear the 24px
       AA minimum. They are exempt as inline-in-sentence targets, but 15px
       was needlessly fiddly on a phone. */
    line-height: 2.1;
    margin: 10px 0 0;
}

.mclean-fitment .mfit-credits a {
    color: var(--mfit-muted) !important;
    text-decoration: underline !important;
    display: inline-block;
    padding: 5px 0;
}

/* "Does it fit your shotgun?" block, injected into high-authority pages
   so the fitment set is not orphaned. */
.mclean-fitment.mfit-finder {
    background: var(--mfit-panel);
    border: 1px solid var(--mfit-line);
    border-radius: 8px;
    padding: 22px 24px;
    margin: 34px 0;
}

.mclean-fitment.mfit-finder h2 {
    margin-top: 0;
}

.mclean-fitment ul.mfit-finder-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px 20px;
    list-style: none !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

.mclean-fitment ul.mfit-finder-list li {
    margin: 0 !important;
    list-style: none !important;
}

.mclean-fitment ul.mfit-finder-list a,
.mclean-fitment .mfit-finder-all a {
    color: var(--mfit-gold) !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 9px 0;
}

.mclean-fitment ul.mfit-finder-list a:hover,
.mclean-fitment .mfit-finder-all a:hover {
    text-decoration: underline !important;
}

.mclean-fitment .mfit-finder-all {
    margin: 14px 0 0;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Product cards (v2.2.0)                                             */
/*                                                                    */
/* Rendered live from WooCommerce wherever the copy names a product,  */
/* so price and stock cannot drift from the product page. Colours use */
/* the same tokens the a11y audit was run against — the out-of-stock  */
/* state is a flatter panel, never `opacity`, which degrades every    */
/* glyph inside it (see README, defect 2).                            */
/* ------------------------------------------------------------------ */

.mclean-fitment .mfit-pc {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--mfit-panel);
    border: 1px solid var(--mfit-line);
    border-radius: 10px;
    padding: 18px;
    margin: 22px 0;
}

.mclean-fitment .mfit-pc.is-out {
    background: var(--mfit-panel-2);
    border-color: #454545;
}

.mclean-fitment .mfit-pc-media {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.mclean-fitment .mfit-pc-img {
    width: 132px;
    height: auto;
    border-radius: 8px;
    background: #fff;
}

.mclean-fitment .mfit-pc.is-compact .mfit-pc-img {
    width: 84px;
}

.mclean-fitment .mfit-pc-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mclean-fitment .mfit-pc-eyebrow {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--mfit-muted);
    margin-bottom: 4px;
}

.mclean-fitment a.mfit-pc-title,
.mclean-fitment a.mfit-pc-title:visited {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mfit-text) !important;
    text-decoration: none !important;
}

.mclean-fitment a.mfit-pc-title:hover,
.mclean-fitment a.mfit-pc-title:focus {
    color: var(--mfit-gold) !important;
    text-decoration: underline !important;
}

.mclean-fitment .mfit-pc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0 0 !important;
    font-size: 0.9rem;
}

.mclean-fitment .mfit-pc-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mclean-fitment .mfit-stars {
    color: var(--mfit-gold);
    letter-spacing: 0.06em;
}

.mclean-fitment .mfit-pc-count {
    color: var(--mfit-muted);
    font-size: 0.84rem;
}

/* Woo wraps the price in <span class="woocommerce-Price-amount">, and the
   variable DRS renders "From $x" — both inherit this. */
.mclean-fitment .mfit-pc-price,
.mclean-fitment .mfit-pc-price .woocommerce-Price-amount {
    color: var(--mfit-text);
    font-weight: 700;
}

.mclean-fitment .mfit-pc-price del {
    color: var(--mfit-muted);
    font-weight: 400;
    margin-right: 4px;
}

.mclean-fitment .mfit-pc-why {
    color: var(--mfit-muted) !important;
    margin: 8px 0 0 !important;
    font-size: 0.92rem;
    line-height: 1.5;
}

.mclean-fitment a.mfit-pc-btn {
    margin-top: 14px;
}

/* Two compact cards sit side by side on desktop, stack on mobile. */
.mclean-fitment .mfit-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 18px;
}

/* ------------------------------------------------------------------ */
/* Figures: model photo + illustrative category photo                 */
/* ------------------------------------------------------------------ */

.mclean-fitment figure.mfit-hero,
.mclean-fitment figure.mfit-ctx {
    margin: 22px 0;
}

.mclean-fitment figure.mfit-hero img,
.mclean-fitment figure.mfit-ctx img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--mfit-line);
    display: block;
}

.mclean-fitment figure.mfit-hero figcaption,
.mclean-fitment figure.mfit-ctx figcaption {
    color: var(--mfit-muted) !important;
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 8px;
}

.mclean-fitment .mfit-fig-credit a,
.mclean-fitment .mfit-fig-credit a:visited {
    color: var(--mfit-muted) !important;
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    .mclean-fitment .mfit-pc {
        flex-direction: column;
        gap: 14px;
    }

    .mclean-fitment .mfit-pc-img,
    .mclean-fitment .mfit-pc.is-compact .mfit-pc-img {
        width: 100%;
        max-width: 220px;
    }

    /* 44px minimum tap target — same rule the audit enforced elsewhere. */
    .mclean-fitment a.mfit-pc-title {
        padding: 6px 0;
    }

    .mclean-fitment a.mfit-pc-btn {
        display: block;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Archive: /sling-fitment/ (v2.3.0)                                  */
/*                                                                    */
/* Astra's stock loop renders a date and a "Read more" for pages that */
/* have neither a meaningful date nor prose to tease, in cards of     */
/* unequal height. Ours replaces it; the stock loop is hidden rather  */
/* than unhooked so a theme update cannot leave the page empty.       */
/* ------------------------------------------------------------------ */

body.mfit-archive .site-main article.ast-article-post,
body.mfit-archive .site-main .ast-pagination,
body.mfit-archive .site-main .ast-row > .ast-article-post {
    display: none !important;
}

body.mfit-archive .ast-archive-description,
body.mfit-archive .page-title,
body.mfit-archive header.page-header {
    display: none !important;
}

.mclean-fitment.mfit-archive-head {
    margin: 0 0 44px;
}

.mclean-fitment .mfit-ah-title {
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
}

.mclean-fitment .mfit-ah-sub {
    color: var(--mfit-muted) !important;
    max-width: 62ch;
    margin: 0 0 26px !important;
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Search + chips */

.mclean-fitment .mfit-tools {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 28px;
}

.mclean-fitment .mfit-search-wrap {
    display: block;
    max-width: 520px;
}

/* Astra styles `input[type=search]` with a white background and its own
   border radius, and wins on specificity — the field rendered as a white bar
   on a black page. Same fight the rest of this file has with the theme, so
   the same answer: high-specificity selector + !important. */
.mclean-fitment .mfit-tools input[type="search"].mfit-search {
    width: 100%;
    background: var(--mfit-panel) !important;
    border: 1px solid var(--mfit-line) !important;
    border-radius: 10px !important;
    color: var(--mfit-text) !important;
    font-size: 1rem !important;
    padding: 13px 16px 13px 44px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Magnifier, inlined as a data URI so it cannot be stripped or 404 */
.mclean-fitment .mfit-search-wrap {
    position: relative;
}

.mclean-fitment .mfit-search-wrap::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b0b0b0" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>') no-repeat center / contain;
}

.mclean-fitment .mfit-tools input[type="search"].mfit-search::placeholder {
    color: #9a9a9a !important;   /* 4.6:1 on #1a1a1a */
    opacity: 1;
}

.mclean-fitment .mfit-tools input[type="search"].mfit-search:focus {
    outline: 2px solid var(--mfit-gold) !important;
    outline-offset: 2px;
    border-color: var(--mfit-gold) !important;
}

/* Safari's native clear button is a dark blob on a dark field. */
.mclean-fitment .mfit-tools input[type="search"].mfit-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23b0b0b0" stroke-width="2.5" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg>') no-repeat center / contain;
}

.mclean-fitment .mfit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mclean-fitment button.mfit-chip {
    background: var(--mfit-panel);
    border: 1px solid var(--mfit-line);
    color: var(--mfit-text);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    min-height: 40px;
}

.mclean-fitment button.mfit-chip span {
    color: var(--mfit-muted);
    font-weight: 400;
    margin-left: 4px;
}

.mclean-fitment button.mfit-chip:hover {
    border-color: var(--mfit-gold);
}

.mclean-fitment button.mfit-chip.is-on {
    background: var(--mfit-gold);
    border-color: var(--mfit-gold);
    color: #0a0a0a;
}

.mclean-fitment button.mfit-chip.is-on span {
    color: rgba(10, 10, 10, 0.7);
}

/* Cards */

.mclean-fitment ul.mfit-ac-grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.mclean-fitment .mfit-ac-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mclean-fitment .mfit-ac-item[hidden] {
    display: none !important;
}

.mclean-fitment a.mfit-ac,
.mclean-fitment a.mfit-ac:visited {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #111;
    border: 1px solid rgba(252, 179, 22, 0.3);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--mfit-text) !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mclean-fitment a.mfit-ac:hover,
.mclean-fitment a.mfit-ac:focus-visible {
    border-color: var(--mfit-gold);
    transform: translateY(-2px);
}

.mclean-fitment .mfit-ac-media {
    display: block;
    background: #16181c;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.mclean-fitment .mfit-ac-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mclean-fitment .mfit-ac-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: #5a5a5a;
}

.mclean-fitment .mfit-ac-body {
    display: block;
    padding: 16px 18px 18px;
}

.mclean-fitment .mfit-ac-cat {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--mfit-gold);
    margin-bottom: 6px;
}

.mclean-fitment .mfit-ac-title {
    display: block;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 10px;
}

.mclean-fitment .mfit-ac-points {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--mfit-muted);
}

.mclean-fitment .mfit-ac-points strong {
    color: #cfcfcf;
    font-weight: 600;
}

.mclean-fitment .mfit-noresults {
    color: var(--mfit-muted) !important;
    margin-top: 22px !important;
}

@media (max-width: 600px) {
    .mclean-fitment ul.mfit-ac-grid {
        grid-template-columns: 1fr;
    }

    .mclean-fitment button.mfit-chip {
        min-height: 44px;
    }
}