/* Phase 2.0F.4C.2 - responsive shortlist, touch controls and comparison scrolling. */
.shortlist-page[data-shortlist-responsive="phase-2f4c2"] {
    min-width: 0;
    container-type: inline-size;
}

.shortlist-page[data-shortlist-responsive="phase-2f4c2"] *,
.shortlist-page[data-shortlist-responsive="phase-2f4c2"] *::before,
.shortlist-page[data-shortlist-responsive="phase-2f4c2"] *::after {
    box-sizing: border-box;
}

.shortlist-page [data-shortlist-card-layout="responsive"] {
    min-width: 0;
}

.shortlist-page button,
.shortlist-page .btn,
.shortlist-page input[type="range"] {
    touch-action: manipulation;
}

.shortlist-page .shortlist-remove-action,
.shortlist-page .shortlist-scroll-buttons button {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.shortlist-page .shortlist-scroll-buttons button:disabled,
.shortlist-page .shortlist-scroll-buttons button[aria-disabled="true"] {
    border-color: #dbe3ed;
    background: #f1f4f8;
    color: #98a5b5;
    cursor: default;
    opacity: .72;
}

.shortlist-page .shortlist-scroll-buttons button:disabled:hover,
.shortlist-page .shortlist-scroll-buttons button[aria-disabled="true"]:hover {
    border-color: #dbe3ed;
    background: #f1f4f8;
    color: #98a5b5;
}

.shortlist-page .shortlist-comparison {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-color: #9ab8dd #edf3fa;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.shortlist-page .shortlist-comparison::-webkit-scrollbar {
    height: .7rem;
}

.shortlist-page .shortlist-comparison::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #edf3fa;
}

.shortlist-page .shortlist-comparison::-webkit-scrollbar-thumb {
    border: 2px solid #edf3fa;
    border-radius: 999px;
    background: #9ab8dd;
}

.shortlist-page .shortlist-comparison[data-can-scroll-right="true"] {
    box-shadow: inset -1.7rem 0 1.7rem -1.85rem rgba(15, 31, 49, .55);
}

.shortlist-page .shortlist-comparison[data-can-scroll-left="true"] {
    box-shadow: inset 1.7rem 0 1.7rem -1.85rem rgba(15, 31, 49, .45);
}

.shortlist-page .shortlist-comparison[data-can-scroll-left="true"][data-can-scroll-right="true"] {
    box-shadow:
        inset 1.7rem 0 1.7rem -1.85rem rgba(15, 31, 49, .45),
        inset -1.7rem 0 1.7rem -1.85rem rgba(15, 31, 49, .55);
}

.shortlist-page .shortlist-grid-car,
.shortlist-page .shortlist-grid-value {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.shortlist-page .shortlist-grid-label {
    position: sticky;
    left: 0;
    z-index: 3;
    isolation: isolate;
    border-right-color: #c9d7e8;
    box-shadow: 7px 0 14px -14px rgba(15, 31, 49, .8);
}

.shortlist-page .shortlist-grid-label.shortlist-grid-sticky {
    z-index: 6;
}

.shortlist-page .shortlist-grid-car.shortlist-grid-sticky {
    z-index: 5;
}

@media (min-width: 621px) and (max-width: 980px) {
    .shortlist-page .shortlist-car-card {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, .85fr);
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "top top"
            "head head"
            "badges badges"
            "summary progress"
            "actions actions";
        column-gap: 1rem;
    }

    .shortlist-page .shortlist-card-topline { grid-area: top; }
    .shortlist-page .shortlist-car-card-head { grid-area: head; }
    .shortlist-page .shortlist-card-badges { grid-area: badges; }
    .shortlist-page .shortlist-card-summary { grid-area: summary; align-self: stretch; }
    .shortlist-page .shortlist-card-progress { grid-area: progress; align-self: stretch; }
    .shortlist-page .shortlist-card-actions { grid-area: actions; }

    .shortlist-page .shortlist-highlight-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shortlist-page .shortlist-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .shortlist-page {
        width: 100%;
        max-width: 100%;
        overflow: clip;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    .shortlist-page .shortlist-hero {
        gap: 1.25rem;
        padding: 1.1rem;
    }

    .shortlist-page .shortlist-hero h1 {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-hero p {
        font-size: .91rem;
        line-height: 1.55;
    }

    .shortlist-page .shortlist-hero-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .shortlist-page .shortlist-hero-actions .btn {
        min-height: 3rem;
    }

    .shortlist-page .shortlist-overview {
        padding: .8rem;
    }

    .shortlist-page .shortlist-section-heading {
        align-items: center;
        margin-bottom: .8rem;
    }

    .shortlist-page .shortlist-section-count {
        min-width: 2.65rem;
        min-height: 2.65rem;
        border-radius: .78rem;
    }

    .shortlist-page .shortlist-car-card {
        gap: .8rem;
        padding: .9rem;
        border-radius: 1rem;
        box-shadow: 0 7px 20px rgba(15, 31, 49, .065);
    }

    .shortlist-page .shortlist-card-topline {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .45rem;
    }

    .shortlist-page .shortlist-card-position {
        width: 2.25rem;
        height: 2.25rem;
    }

    .shortlist-page .shortlist-card-date {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shortlist-page .shortlist-preferred-banner {
        grid-column: 1 / -1;
        grid-row: 2;
        width: max-content;
        max-width: 100%;
    }

    .shortlist-page .shortlist-remove-action {
        width: 2.75rem;
        height: 2.75rem;
        border-color: #e2e8f0;
        background: #f8fafc;
    }

    .shortlist-page .shortlist-car-card-head {
        gap: .8rem;
    }

    .shortlist-page .shortlist-car-identity h2,
    .shortlist-page .shortlist-car-identity p {
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-card-scores {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shortlist-page .shortlist-score,
    .shortlist-page .shortlist-fit {
        min-height: 5rem;
    }

    .shortlist-page .shortlist-card-badges {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: .15rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .shortlist-page .shortlist-card-badges::-webkit-scrollbar {
        display: none;
    }

    .shortlist-page .shortlist-card-badges > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .shortlist-page .shortlist-card-summary {
        gap: .45rem;
    }

    .shortlist-page .shortlist-card-summary > div {
        min-width: 0;
        padding: .7rem;
    }

    .shortlist-page .shortlist-card-summary dd {
        font-size: clamp(.83rem, 4vw, 1rem);
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-card-progress {
        padding: .72rem;
    }

    .shortlist-page .shortlist-card-progress progress {
        height: .62rem;
    }

    .shortlist-page .shortlist-card-actions .btn {
        min-height: 3rem;
        white-space: normal;
    }

    .shortlist-page .shortlist-highlight-summary {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        padding: .8rem;
        scroll-padding-inline: .8rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .shortlist-page .shortlist-highlight-summary::-webkit-scrollbar {
        display: none;
    }

    .shortlist-page .shortlist-highlight-summary article {
        flex: 0 0 min(82vw, 18rem);
        min-height: 7.5rem;
        scroll-snap-align: start;
    }

    .shortlist-page .shortlist-highlight-summary strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-priorities-head,
    .shortlist-page .shortlist-metric-controls {
        align-items: stretch;
    }

    .shortlist-page .shortlist-priorities-head .btn {
        width: 100%;
        min-height: 3rem;
    }

    .shortlist-page .shortlist-priority-grid {
        grid-template-columns: 1fr;
    }

    .shortlist-page .shortlist-priority-grid label {
        min-width: 0;
        padding: .85rem;
    }

    .shortlist-page .shortlist-priority-grid input[type="range"] {
        width: 100%;
        min-height: 2.75rem;
    }

    .shortlist-page .shortlist-difference-chips {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: .2rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .shortlist-page .shortlist-difference-chips::-webkit-scrollbar {
        display: none;
    }

    .shortlist-page .shortlist-difference-chips span {
        flex: 0 0 auto;
        max-width: min(82vw, 22rem);
        min-height: 2.25rem;
        white-space: normal;
        scroll-snap-align: start;
    }

    .shortlist-page .shortlist-metric-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
        padding: .15rem 0 .35rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .shortlist-page .shortlist-metric-tabs::-webkit-scrollbar {
        display: none;
    }

    .shortlist-page .shortlist-metric-tabs button {
        flex: 0 0 auto;
        min-height: 2.75rem;
        scroll-snap-align: start;
    }

    .shortlist-page .shortlist-comparison-shell {
        width: 100%;
        min-width: 0;
        padding: .65rem;
        overflow: hidden;
    }

    .shortlist-page .shortlist-scroll-toolbar {
        align-items: center;
        margin-bottom: .55rem;
        padding: .65rem;
    }

    .shortlist-page .shortlist-scroll-toolbar > div:first-child {
        min-width: 0;
    }

    .shortlist-page .shortlist-scroll-toolbar strong {
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-scroll-buttons button {
        width: 2.75rem;
        height: 2.75rem;
    }

    .shortlist-page .shortlist-comparison {
        --shortlist-metric-column: 8.5rem;
        --shortlist-car-column: 12.5rem;
        width: 100%;
        border: 1px solid #dce6f1;
        border-radius: .8rem;
        scroll-padding-left: var(--shortlist-metric-column);
    }

    .shortlist-page .shortlist-grid > div {
        min-height: 4.35rem;
        padding: .68rem !important;
    }

    .shortlist-page .shortlist-grid-label {
        max-width: var(--shortlist-metric-column);
        background: #f8fbff;
    }

    .shortlist-page .shortlist-grid-label strong,
    .shortlist-page .shortlist-grid-value strong,
    .shortlist-page .shortlist-grid-car strong {
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .shortlist-page .shortlist-grid-value a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
    }

    .shortlist-page .shortlist-health-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .shortlist-page .shortlist-hero-actions,
    .shortlist-page .shortlist-card-actions {
        grid-template-columns: 1fr;
    }

    .shortlist-page .shortlist-car-card-head {
        grid-template-columns: 1fr !important;
    }

    .shortlist-page .shortlist-card-summary {
        grid-template-columns: 1fr;
    }

    .shortlist-page .shortlist-highlight-summary article {
        flex-basis: 86vw;
    }

    .shortlist-page .shortlist-comparison {
        --shortlist-metric-column: 7.8rem;
        --shortlist-car-column: 11.6rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .shortlist-page .shortlist-car-card:hover {
        transform: none;
    }

    .shortlist-page .shortlist-scroll-buttons button,
    .shortlist-page .shortlist-remove-action,
    .shortlist-page .shortlist-metric-tabs button,
    .shortlist-page .shortlist-card-actions .btn {
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shortlist-page .shortlist-comparison {
        scroll-behavior: auto;
    }
}

/* Phase 2.0F.4C.2.1 - prevent intrinsic-width card overflow on narrow mobile viewports. */
@media (max-width: 760px) {
    .shortlist-page .shortlist-overview,
    .shortlist-page .shortlist-cards,
    .shortlist-page [data-shortlist-card-layout="responsive"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shortlist-page .shortlist-overview {
        overflow: hidden;
    }

    .shortlist-page .shortlist-cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .shortlist-page [data-shortlist-card-layout="responsive"] {
        justify-self: stretch;
    }

    .shortlist-page [data-shortlist-card-layout="responsive"] > *,
    .shortlist-page .shortlist-card-topline > *,
    .shortlist-page .shortlist-car-card-head > *,
    .shortlist-page .shortlist-card-summary > *,
    .shortlist-page .shortlist-card-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .shortlist-page .shortlist-card-topline,
    .shortlist-page .shortlist-car-card-head,
    .shortlist-page .shortlist-card-scores,
    .shortlist-page .shortlist-card-badges,
    .shortlist-page .shortlist-card-summary,
    .shortlist-page .shortlist-card-progress,
    .shortlist-page .shortlist-card-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shortlist-page .shortlist-score,
    .shortlist-page .shortlist-fit {
        min-width: 0 !important;
    }

    .shortlist-page .shortlist-decision-status,
    .shortlist-page .shortlist-preferred-banner,
    .shortlist-page .shortlist-card-summary dd,
    .shortlist-page .shortlist-card-actions .btn {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .shortlist-page .shortlist-decision-status {
        white-space: normal;
    }

    .shortlist-page .shortlist-card-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* Phase 2.0F.4C.2.2 - visually contain mobile cards without treating deliberate badge scrolling as card overflow. */
@media (max-width: 760px) {
    .shortlist-page [data-shortlist-card-layout="responsive"] {
        contain: inline-size;
        overflow: clip;
    }

    .shortlist-page .shortlist-card-topline,
    .shortlist-page .shortlist-car-card-head,
    .shortlist-page .shortlist-card-summary,
    .shortlist-page .shortlist-card-progress,
    .shortlist-page .shortlist-card-actions {
        overflow: clip;
    }

    .shortlist-page .shortlist-preferred-banner,
    .shortlist-page .shortlist-score > span {
        width: auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .shortlist-page .shortlist-card-badges {
        contain: inline-size;
        overscroll-behavior-inline: contain;
    }

    .shortlist-page .shortlist-card-badges > * {
        max-width: min(82vw, 100%);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .shortlist-page .shortlist-money-metric,
    .shortlist-page .shortlist-money-metric dt,
    .shortlist-page .shortlist-money-metric dd {
        min-width: 0;
        max-width: 100%;
    }
}

/* Phase 2.0F.4C.2.4 - force the mobile grid card itself to use border-box sizing.
   The previous 100% width could be resolved as content width in the live layout,
   which added the card's horizontal padding outside its grid track. */
@media (max-width: 760px) {
    .shortlist-page .shortlist-overview,
    .shortlist-page .shortlist-cards {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .shortlist-page .shortlist-cards {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .shortlist-page .shortlist-cards > .shortlist-car-card,
    .shortlist-page .shortlist-cards > [data-shortlist-card-layout="responsive"] {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }
}