/* ============================================================
   AUTOMART V43.3
   NATIVE MOBILE COMPARE
   ============================================================ */

.am-v433-mobile-compare {
    display:none;
}


@media screen and (max-width:767px) {

    .am-v433-mobile-compare {

        display:block;

        width:100%;

        margin:
            22px 0 26px;

        padding:
            18px 0 16px;

        border-top:
            1px solid #e5ece8;

        border-bottom:
            1px solid #e5ece8;

        overflow:hidden;

        box-sizing:border-box;
    }


    /* ========================================================
       HEADING
       ======================================================== */

    .am-v433-mobile-compare__head {

        display:flex;

        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        padding:
            0 3px 13px;
    }


    .am-v433-mobile-compare__eyebrow {

        display:flex;

        align-items:center;

        gap:7px;

        margin-bottom:4px;

        color:#0a8c57;

        font-size:10px;
        line-height:1;

        font-weight:800;

        letter-spacing:
            .14em;

        text-transform:uppercase;
    }


    .am-v433-mobile-compare__eyebrow::before {

        content:"";

        width:23px;
        height:2px;

        border-radius:999px;

        background:#0ca466;
    }


    .am-v433-mobile-compare__head h2 {

        margin:0;

        color:#101b2b;

        font-size:20px;
        line-height:1.16;

        font-weight:850;

        letter-spacing:-.025em;
    }


    .am-v433-mobile-compare__head p {

        margin:5px 0 0;

        color:#718095;

        font-size:11px;
        line-height:1.4;
    }


    .am-v433-mobile-compare__swipe {

        flex:0 0 auto;

        margin-top:18px;

        padding:
            7px 9px;

        border:
            1px solid #dce7e1;

        border-radius:999px;

        background:#fff;

        color:#607084;

        font-size:10px;
        line-height:1;

        font-weight:750;
    }


    /* ========================================================
       ONE-COLUMN HORIZONTAL RAIL
       ======================================================== */

    .am-v433-mobile-compare__rail {

        display:flex;

        flex-flow:
            row nowrap;

        align-items:stretch;

        gap:12px;

        width:100%;

        margin:0;

        padding:
            2px 0 5px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:none;

        touch-action:
            pan-x pan-y;
    }


    .am-v433-mobile-compare__rail::-webkit-scrollbar {

        display:none;

        width:0;
        height:0;
    }


    /* ========================================================
       ONE CARD VISIBLE AT A TIME
       ======================================================== */

    .am-v433-mobile-compare__card {

        position:relative;

        flex:
            0 0 100%;

        width:100%;
        min-width:100%;
        max-width:100%;

        margin:0;

        border:
            1px solid #dfe7e3;

        border-radius:16px;

        background:#fff;

        box-shadow:
            0 7px 20px
            rgba(16,32,24,.055);

        overflow:hidden;

        scroll-snap-align:start;
        scroll-snap-stop:always;

        box-sizing:border-box;
    }


    /* ========================================================
       IMAGE
       ======================================================== */

    .am-v433-mobile-compare__image {

        position:relative;

        width:100%;

        aspect-ratio:
            16 / 9;

        overflow:hidden;

        background:#eef2f0;
    }


    .am-v433-mobile-compare__image img {

        display:block;

        width:100%;
        height:100%;

        object-fit:cover;
    }


    .am-v433-mobile-compare__number {

        position:absolute;

        left:10px;
        bottom:9px;

        min-height:25px;

        display:flex;

        align-items:center;

        padding:
            0 9px;

        border-radius:999px;

        background:
            rgba(4,20,13,.80);

        color:#fff;

        font-size:10px;
        font-weight:800;
    }


    .am-v433-mobile-compare__current {

        position:absolute;

        left:10px;
        top:10px;

        min-height:28px;

        display:flex;

        align-items:center;

        padding:
            0 10px;

        border-radius:999px;

        background:#0ca466;

        color:#fff;

        font-size:10px;

        font-weight:800;
    }


    /* ========================================================
       CARD BODY
       ======================================================== */

    .am-v433-mobile-compare__body {

        padding:
            14px;
    }


    .am-v433-mobile-compare__title-row {

        display:flex;

        align-items:flex-start;
        justify-content:space-between;

        gap:10px;
    }


    .am-v433-mobile-compare__title-row > div {

        min-width:0;

        flex:1;
    }


    .am-v433-mobile-compare__title-row h3 {

        margin:0 0 6px;

        color:#111d2d;

        font-size:15px;
        line-height:1.25;

        font-weight:800;
    }


    .am-v433-mobile-compare__title-row strong {

        display:block;

        color:#078c51;

        font-size:20px;
        line-height:1;

        font-weight:850;
    }


    /* ========================================================
       SELECT
       ======================================================== */

    .am-v433-mobile-compare__select {

        flex:
            0 0 auto;

        display:flex;

        align-items:center;

        gap:5px;

        min-height:34px;

        padding:
            0 9px;

        border:
            1px solid #dbe6e1;

        border-radius:999px;

        background:#fff;

        color:#48586a;

        font-size:10px;

        font-weight:750;
    }


    .am-v433-mobile-compare__select input {

        width:15px;
        height:15px;

        margin:0;

        accent-color:#0ca466;
    }


    .am-v433-mobile-compare__condition {

        display:inline-flex;

        align-items:center;

        min-height:25px;

        margin-top:10px;

        padding:
            0 9px;

        border-radius:999px;

        background:#eaf7f1;

        color:#116d4b;

        font-size:10px;

        font-weight:750;
    }


    /* ========================================================
       QUICK FACTS
       ======================================================== */

    .am-v433-mobile-compare__facts {

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:8px;

        margin-top:12px;
    }


    .am-v433-mobile-compare__facts > div {

        min-width:0;

        padding:
            9px 10px;

        border:
            1px solid #e4ebe7;

        border-radius:11px;

        background:#fbfcfc;
    }


    .am-v433-mobile-compare__facts small {

        display:block;

        margin-bottom:3px;

        color:#7a8798;

        font-size:9px;

        line-height:1.1;
    }


    .am-v433-mobile-compare__facts b {

        display:block;

        color:#172334;

        font-size:11px;

        line-height:1.25;

        font-weight:750;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;
    }


    .am-v433-mobile-compare__details {

        width:100%;
        height:39px;

        display:flex;

        align-items:center;
        justify-content:center;

        gap:8px;

        margin-top:12px;

        border:
            1px solid #0a9158;

        border-radius:10px;

        color:#087646;

        text-decoration:none;

        font-size:11px;

        font-weight:800;
    }


    /* ========================================================
       DOTS
       ======================================================== */

    .am-v433-mobile-compare__dots {

        min-height:23px;

        display:flex;

        align-items:center;
        justify-content:center;

        gap:6px;

        padding-top:9px;
    }


    .am-v433-mobile-compare__dot {

        width:6px;
        height:6px;

        display:block;

        padding:0;

        border:0;

        border-radius:999px;

        background:#c8d4ce;

        transition:
            width .2s ease,
            background .2s ease;

        cursor:pointer;
    }


    .am-v433-mobile-compare__dot.is-active {

        width:20px;

        background:#0ca466;
    }


    /* ========================================================
       COMPARE ACTION
       ======================================================== */

    .am-v433-mobile-compare__action {

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:10px;

        margin-top:5px;

        padding:
            10px;

        border:
            1px solid #dce7e1;

        border-radius:13px;

        background:#f8fbf9;
    }


    .am-v433-mobile-compare__action > span {

        color:#617084;

        font-size:10px;

        line-height:1.25;
    }


    .am-v433-mobile-compare__action > span b {

        color:#087646;

        font-size:13px;

        font-weight:850;
    }


    .am-v433-mobile-compare__action > a {

        min-height:40px;

        display:flex;

        align-items:center;
        justify-content:center;

        gap:7px;

        padding:
            0 14px;

        border-radius:10px;

        background:#0ca466;

        color:#fff;

        text-decoration:none;

        font-size:11px;

        font-weight:850;
    }


    .am-v433-mobile-compare__action > a.is-disabled {

        background:#d5e3dc;

        color:#829188;

        pointer-events:none;
    }

}