/*
============================================================
AUTOMART VEHICLE DETAIL V38.5 FIXED
KEY INFORMATION 4/3 COLUMN GRID
RAW / NEUTRAL DETAIL ICONS

TYPOGRAPHY:
Uses existing AutoMart global typography.
No local font family or font scale.
============================================================
*/


/* =========================================================
   KEY INFORMATION
   LARGE DESKTOP = 4 COLUMNS
   ========================================================= */

.vehicle-detail-page .key-info {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


/* Individual specification card */

.vehicle-detail-page .key-info > div {
    display: grid !important;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 8px !important;

    min-width: 0 !important;
    min-height: 62px !important;

    padding: 10px 12px !important;

    border: 1px solid #e4e9ed !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


/* =========================================================
   RAW ICON TREATMENT

   Existing icon artwork is retained.
   Green tile/background treatment is removed.
   Green SVG tint is neutralised.
   ========================================================= */

.vehicle-detail-page .key-info > div::before {
    content: "" !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background-color: transparent !important;

    background-image:
        var(
            --v211-icon,
            var(--i, none)
        ) !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    box-shadow:
        none !important;

    /*
     * Existing SVG data is green.
     * Neutralise it instead of applying another brand colour.
     */
    filter:
        grayscale(1)
        saturate(0)
        brightness(.52) !important;

    opacity: .96 !important;
}


/* Labels/value positioning stays compact */

.vehicle-detail-page .key-info > div > span {
    min-width: 0 !important;
}

.vehicle-detail-page .key-info > div > b {
    min-width: 0 !important;

    text-align:
        right !important;

    white-space:
        normal !important;
}


/* =========================================================
   LAPTOP / MEDIUM DESKTOP = 3 COLUMNS
   ========================================================= */

@media (max-width: 1240px) {

    .vehicle-detail-page .key-info {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   TABLET = 2 COLUMNS
   ========================================================= */

@media (max-width: 900px) {

    .vehicle-detail-page .key-info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE = 1 COLUMN
   ========================================================= */

@media (max-width: 620px) {

    .vehicle-detail-page .key-info {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   FEATURES
   KEEP 3-COLUMN STRUCTURE
   REMOVE GREEN ICON TILE/TINT
   ========================================================= */

.vehicle-detail-page .feature-list {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
}


.vehicle-detail-page .feature-list > span {
    min-width: 0 !important;

    background:
        #ffffff !important;

    border:
        1px solid #e4e9ed !important;

    box-shadow:
        none !important;
}


/*
 * Feature icons are also CSS-generated.
 * Remove the pale-green tile and brand tint.
 */

.vehicle-detail-page .feature-list > span::before {
    background-color:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    filter:
        grayscale(1)
        saturate(0)
        brightness(.52) !important;
}


/* Some older V20/V21 implementations use an inner icon element */

.vehicle-detail-page .feature-list .vd21-svg,
.vehicle-detail-page .feature-list svg,
.vehicle-detail-page .key-info .vd21-svg,
.vehicle-detail-page .key-info svg {
    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    filter:
        grayscale(1)
        saturate(0)
        brightness(.52) !important;
}


/* Feature responsive structure */

@media (max-width: 900px) {

    .vehicle-detail-page .feature-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 560px) {

    .vehicle-detail-page .feature-list {
        grid-template-columns:
            1fr !important;
    }

}