/*
 * Intro/bottom text on /vehicle/** pages: full width, and the intro is collapsible ("Vis mere").
 * The full text is always present in the server-rendered HTML; it is only visually clamped, and only
 * when vehicle-intro.js has added .vf-intro--collapsible (text actually overflows heading + 3 lines;
 * the exact clamp height is set by the script). Without JS the whole text is shown.
 */
.vehicle-fitment-page .topic-block {
    max-width: none;
}

.vehicle-fitment-page .vf-intro-toggle {
    display: none;
}

.vehicle-fitment-page .vf-intro--collapsible .vf-intro-body {
    position: relative;
    overflow: hidden;
}

.vehicle-fitment-page .vf-intro--collapsible .vf-intro-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.vehicle-fitment-page .vf-intro--collapsible.is-open .vf-intro-body {
    overflow: visible;
}

.vehicle-fitment-page .vf-intro--collapsible.is-open .vf-intro-body::after {
    display: none;
}

.vehicle-fitment-page .vf-intro--collapsible .vf-intro-toggle {
    display: block;
    margin: 6px auto 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/*
 * "Show more products" link under the product grid. While the automatic scroll loader runs
 * (vehicle-products.js adds .vf-more--auto) the link is hidden but the element keeps a little height
 * so the IntersectionObserver still has something to watch.
 */
.vehicle-fitment-page .vf-more {
    margin: 12px 0 24px;
    text-align: center;
}

.vehicle-fitment-page .vf-more--auto {
    min-height: 1px;
}

.vehicle-fitment-page .vf-more--auto .vf-more-link {
    display: none;
}