.compare-area {
    --vmc-padding-v:      30px;
    --vmc-padding-top:    var(--vmc-padding-v);
    --vmc-padding-bottom: var(--vmc-padding-v);
    --vmc-max-width:            1440px;
    --vmc-gap:                  20px;
    --vmc-contained-padding-h:  30px;
    --vmc-slider-indent-h: max(
        var(--vmc-contained-padding-h),
        calc((100vw - var(--vmc-max-width)) / 2 + var(--vmc-contained-padding-h))
    );
    --vmc-card-radius:    8px;
    --vmc-arrow-size:     28px;
    --vmc-transition:     0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background-color:    var(--compare-area-bg);
    margin-bottom:        0;
    padding-block-start:  var(--vmc-padding-top);
    padding-block-end:    var(--vmc-padding-bottom);
    transition:           background-color var(--vmc-transition);
}

.compare-area .heading-block,
.compare-area .heading-block-light,
.compare-area .heading-block-mobile-dark {
    background-color: var(--compare-area-bg);
}

.compare-area {
    --vc-card-bg:     oklch(100% 0 0);
    --vc-card-radius: 0.5rem;
    --vc-ink:         oklch(20% 0.01 250);
    --vc-muted:       oklch(50% 0.01 250);
    --vc-border:      oklch(0% 0 0 / 8%);
    --vc-focus:       oklch(58% 0.18 250 / 55%);
}

/* ==========================================================================
   Card content (title, price, image, summary table, key-features accordion).
   This is the "isf__content" equivalent — the part that actually differs
   between the two components. Everything below this block (.vmc, .vmc__*)
   mirrors contentSectionImageSliderFade.css's viewport/track/item/controls
   mechanics 1:1, under its own "vmc" namespace, so a vehicle card behaves
   exactly like an isf slide: same grid/slider thresholds, same breakpoints,
   same drag physics, same mobile item-width override pattern.
   ========================================================================== */

.compare-area .vehicle-compare-card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    block-size:       100%;
    background-color: var(--vc-card-bg);
    border-radius:    var(--vc-card-radius);
    padding-block:    1.25rem;
    padding-inline:   1.25rem;
    gap:              0.625rem;
    text-align:       center;
}

.compare-area .vehicle-compare-card__header {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.125rem;
}

.compare-area .vehicle-compare-card .vehicle-item-name {
    margin-block: 0;
    font-size:    1.375rem;
    font-weight:  700;
    color:        var(--vc-ink);
    line-height:  inherit;
}

.compare-area .vehicle-compare-card .vehicle-item-price {
    display:      block;
    margin-block: 0;
    font-size:    0.8125rem;
    font-weight:  400;
    color:        var(--vc-muted);
    line-height:  inherit;
}

.compare-area .vehicle-compare-card .vehicle-item-img {
    max-inline-size: 100%;
    height:          auto;
}

.compare-area .vehicle-compare-card__summary {
    inline-size: 100%;
    overflow-x:  auto;
    text-align:  start;
}

.compare-area .vehicle-compare-card__accordion {
    inline-size: 100%;
}

.compare-area .vehicle-compare-card .accordion-item {
    background-color: transparent;
    border:           none;
}

.compare-area .vehicle-compare-card .accordion-button {
    display:            flex;
    justify-content:    space-between;
    align-items:        center;
    inline-size:        100%;
    background-color:   transparent;
    color:              var(--vc-ink);
    font-size:          0.9375rem;
    font-weight:        600;
    padding-block:      0.75rem;
    padding-inline:     0;
    border:             none;
    border-block-start: 1px solid var(--vc-border);
    box-shadow:         none;
}

.compare-area .vehicle-compare-card .accordion-button:not(.collapsed) {
    background-color: transparent;
    color:            var(--vc-ink);
    box-shadow:       none;
}

.compare-area .vehicle-compare-card .accordion-button:focus-visible {
    outline:        2px solid var(--vc-focus);
    outline-offset: 2px;
    box-shadow:     none;
}

.compare-area .vehicle-compare-card .accordion-body {
    padding-inline: 0;
    padding-block:  0.5rem 0;
    text-align:     start;
}

.compare-area .vehicle-compare-card .accordion-body ul,
.compare-area .vehicle-compare-card .accordion-body ol {
    padding-inline-start: 1.25rem;
    margin-block:         0.5rem;
}

.compare-area .vehicle-compare-card__summary table,
.compare-area .vehicle-compare-card__summary tbody,
.compare-area .vehicle-compare-card__summary thead,
.compare-area .vehicle-compare-card__summary tfoot,
.compare-area .vehicle-compare-card__summary tr,
.compare-area .vehicle-compare-card__summary th,
.compare-area .vehicle-compare-card__summary td {
    border-style: hidden;
}

@media (min-width: 992px) {
    .compare-area .vehicle-compare-card__header {
        align-self:  stretch;
        align-items: flex-start;
        text-align:  start;
    }
}

@media (max-width: 991.98px) {
    .compare-area .vehicle-compare-card .vehicle-item-name {
        font-size: 1.0625rem;
    }

    .compare-area .vehicle-compare-card__summary,
    .compare-area .vehicle-compare-card__summary td,
    .compare-area .vehicle-compare-card__summary th {
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   vmc: vehicle model compare widget — mirrors contentSectionImageSliderFade's
   isf__viewport / isf__track / isf__item / isf__controls structure exactly.
   Three modes, chosen server-side from how many active models there are:
     vmc--single  1 model    - static, no controls, nothing to navigate
     vmc--grid    2-3 models - wraps into a row on desktop, no controls;
                               becomes a draggable slider on mobile only
     vmc--slider  4+ models  - always a draggable, scroll-snap slider
   ========================================================================== */

.compare-area .vmc__inner {
    max-width:      100%;
    margin-inline:  auto;
    padding-inline: 0;
    box-sizing:     border-box;
}

.compare-area .vmc__inner--contained {
    max-width:      var(--vmc-max-width);
    margin-inline:  auto;
    padding-inline: var(--vmc-contained-padding-h);
    box-sizing:     border-box;
}

.compare-area .vmc--single .vmc__viewport {
    overflow:      hidden;
    border-radius: var(--vmc-card-radius);
}

.compare-area .vmc--single .vmc__track {
    display: block;
    cursor:  default;
}

.compare-area .vmc--single .vmc__item     { display: block; inline-size: 100%; }
.compare-area .vmc--single .vmc__controls { display: none; }

.compare-area .vmc--grid .vmc__viewport {
    overflow: hidden;
}

.compare-area .vmc--grid .vmc__track {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--vmc-gap);
    overflow:  hidden;
    cursor:    default;
}

.compare-area .vmc--grid .vmc__controls { display: none; }

.compare-area .vmc--grid.vmc--cols-2 .vmc__item { flex: 0 0 calc(50% - var(--vmc-gap) / 2);        min-width: 0; }
.compare-area .vmc--grid.vmc--cols-3 .vmc__item { flex: 0 0 calc((100% - var(--vmc-gap) * 2) / 3);  min-width: 0; }

.compare-area .vmc--slider .vmc__viewport {
    overflow-x:    visible;
    overflow-y:    hidden;
    border-radius: 0;
}

.compare-area .vmc--slider .vmc__track {
    display:                    flex;
    flex-wrap:                  nowrap;
    gap:                        var(--vmc-gap);
    overflow-x:                 auto;
    scroll-behavior:            smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x:      contain;
    scrollbar-width:            none;
    -ms-overflow-style:         none;
    padding-block-end:          4px;
    cursor:                     grab;
    user-select:                none;
    touch-action:                pan-y;
    padding-inline-start:        var(--vmc-slider-indent-h);
    padding-inline-end:          var(--vmc-slider-indent-h);
    scroll-snap-type:            x mandatory;
    scroll-padding-inline-start: var(--vmc-slider-indent-h);
    scroll-padding-inline-end:   var(--vmc-slider-indent-h);
}
.compare-area .vmc--slider .vmc__track::-webkit-scrollbar { display: none; }
.compare-area .vmc--slider .vmc__track.is-dragging         { cursor: grabbing; scroll-behavior: auto; }

.compare-area .vmc--slider .vmc__item {
    scroll-snap-align: start;
    scroll-snap-stop:  always;
}

.compare-area .vmc--slider .vmc__controls {
    justify-content: center;
    gap:             12px;
}

.compare-area .vmc--slider.vmc--view-3 .vmc__item {
    flex:      0 0 calc((100% - var(--vmc-gap) * 2) / 3);
    min-width: 0;
}

.compare-area .vmc__controls {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    gap:                12px;
    margin-block-start: 2rem;
}

.compare-area .vmc__btn {
    display:                     inline-flex;
    align-items:                 center;
    justify-content:             center;
    inline-size:                 44px;
    block-size:                  44px;
    padding:                     0;
    background:                  none;
    border:                      none;
    border-radius:               50%;
    cursor:                      pointer;
    flex-shrink:                 0;
    -webkit-tap-highlight-color: transparent;
    transition:                  opacity var(--vmc-transition), transform 0.15s ease, background-color 0.2s ease;
}

.compare-area .vmc__btn:hover:not(:disabled) {
    background-color: var(--vc-border);
}

.compare-area .vmc__btn:active:not(:disabled) {
    transform: scale(0.9);
}

.compare-area .vmc__btn:disabled {
    opacity:        0.3;
    cursor:         default;
    pointer-events: none;
}

.compare-area .vmc__btn:focus-visible {
    outline:        2px solid var(--vc-focus);
    outline-offset: 3px;
}

.compare-area .vmc__arrow {
    display:        block;
    inline-size:    var(--vmc-arrow-size);
    block-size:     var(--vmc-arrow-size);
    pointer-events: none;
    flex-shrink:    0;
    transform:      scaleX(-1);
}

.compare-area .vmc__btn--next .vmc__arrow { transform: scaleX(1); }

@media (max-width: 1400px) {
    .compare-area {
        --vmc-max-width: 1140px;
    }
}

@media (max-width: 1024px) {
    .compare-area {
        --vmc-max-width:           1440px;
        --vmc-contained-padding-h: 40px;
    }
}

/* Desktop/tablet only (mirrors the 767px mobile boundary below, just
   inverted): with only 1 or 2 active models, a card stretched to fill
   half (or all) of the row reads far too large next to a real 3-up
   grid. Instead, size the card(s) exactly as a vmc--cols-3 card would
   and centre them in the row. Mobile is untouched - it keeps its own
   item-width override inside the 767px block below regardless of what
   happens here, since these two breakpoints never overlap. */
@media (min-width: 768px) {
    .compare-area .vmc--single .vmc__track {
        display:         flex;
        justify-content: center;
    }

    .compare-area .vmc--single .vmc__item {
        display:      block;
        inline-size:  auto;
        flex:         0 0 calc((100% - var(--vmc-gap) * 2) / 3);
        min-width:    0;
    }

    .compare-area .vmc--grid .vmc__track {
        justify-content: center;
    }

    .compare-area .vmc--grid.vmc--cols-2 .vmc__item {
        flex: 0 0 calc((100% - var(--vmc-gap) * 2) / 3);
    }
}

@media (max-width: 767px) {

    .compare-area {
        --vmc-contained-padding-h: 15px;
        --vmc-padding-v:           20px;
        --vmc-gap:                 15px;
    }

    .compare-area .vmc__inner,
    .compare-area .vmc__inner--contained { padding-inline: 0; }

    .compare-area .vmc__viewport { border-radius: 0; }

    .compare-area .vmc--grid .vmc__viewport {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .compare-area .vmc--grid .vmc__track {
        flex-wrap:                  nowrap;
        overflow-x:                 auto;
        overflow-y:                 hidden;
        scroll-behavior:            smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x:      contain;
        scrollbar-width:            none;
        -ms-overflow-style:         none;
        padding-block-end:          4px;
        cursor:                     grab;
        user-select:                none;
        touch-action:               pan-y;
        scroll-snap-type:           x mandatory;
    }
    .compare-area .vmc--grid .vmc__track::-webkit-scrollbar { display: none; }
    .compare-area .vmc--grid .vmc__track.is-dragging         { cursor: grabbing; scroll-behavior: auto; }

    .compare-area .vmc--grid .vmc__controls {
        display:         flex;
        justify-content: center;
        gap:             12px;
    }

    .compare-area .vmc--slider .vmc__track {
        padding-inline-start: 0;
        padding-inline-end:   0;
    }
    .compare-area .vmc--slider .vmc__controls {
        justify-content:      center;
        padding-inline-start: 0;
        gap:                  12px;
    }

    .compare-area .vmc--grid.vmc--cols-2 .vmc__item,
    .compare-area .vmc--grid.vmc--cols-3 .vmc__item,
    .compare-area .vmc--slider.vmc--view-3 .vmc__item {
        flex:              0 0 calc((100% - var(--vmc-gap) * 0.5) / 1.1);
        min-width:         0;
        scroll-snap-align: start;
        scroll-snap-stop:  always;
    }

    /* Matches contentSectionImageSliderFade.css's own mobile pattern: a
       generic, unscoped .vmc__track rule carries the final say on mobile
       inset via !important, since it has to win over both the per-mode
       rules above and the base desktop rule regardless of source order. */
    .compare-area .vmc__track {
        padding-inline-start:        var(--vmc-contained-padding-h) !important;
        padding-inline-end:          var(--vmc-contained-padding-h) !important;
        scroll-padding-inline-start: var(--vmc-contained-padding-h) !important;
        scroll-padding-inline-end:   var(--vmc-contained-padding-h) !important;
    }

    /* Single card: no siblings to slide/grid between, so let it run
       edge-to-edge on mobile instead of sitting in the shared inset. */
    .compare-area .vmc--single .vmc__track {
        padding-inline-start: 0 !important;
        padding-inline-end:   0 !important;
    }

    .compare-area .vmc--single .vmc__viewport { border-radius: 0; }

    .compare-area .vmc__controls { margin-block-start: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-area .vmc__track { scroll-behavior: auto; }
    .compare-area .vmc__btn   { transition: none; }
}