/* ============================================================ AUTOMART VEHICLE DETAIL DESKTOP V43.0 COMPARE SIMILAR CARS ============================================================ */ /* ========================================================= DESKTOP ONLY ========================================================= */ @media (min-width:1024px) { /* --------------------------------------------------------- RETIRE OLD BOTTOM SIMILAR SECTION ON DESKTOP ONLY Mobile keeps its existing horizontal Similar Vehicles rail. --------------------------------------------------------- */ body.site-page .am-similar-v26:not(.am-v430-source-keep) { display:none !important; } /* --------------------------------------------------------- MAIN MODULE --------------------------------------------------------- */ body.site-page .am-v430-compare { width:100%; max-width:1280px; margin: 30px auto 34px; padding: 0; font-family: inherit; } body.site-page .am-v430-shell { display:grid; grid-template-columns: minmax(0,1fr) 310px; gap: 20px; align-items:start; width:100%; } /* --------------------------------------------------------- MAIN CONTENT --------------------------------------------------------- */ body.site-page .am-v430-main { min-width:0; } body.site-page .am-v430-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin: 0 0 18px; } body.site-page .am-v430-eyebrow { display:flex; align-items:center; gap:11px; margin-bottom: 6px; color: #087c49; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; } body.site-page .am-v430-eyebrow::before { content:""; width: 38px; height: 2px; border-radius: 999px; background: #079a59; } body.site-page .am-v430-title { margin: 0; color: #101b2d; font-size: 26px; line-height: 1.1; font-weight: 850; letter-spacing: -.025em; } body.site-page .am-v430-subtitle { margin: 7px 0 0; color: #718096; font-size: 13px; line-height: 1.5; } body.site-page .am-v430-all { flex: 0 0 auto; height: 42px; display:inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 0 15px; border: 1px solid #b9dec9; border-radius: 11px; background: #fff; color: #087b49; font-size: 12px; font-weight: 800; cursor:pointer; box-shadow: 0 5px 16px rgba(9,111,66,.055); } /* --------------------------------------------------------- VEHICLE RAIL --------------------------------------------------------- */ body.site-page .am-v430-rail { display:flex; gap: 14px; width: 100%; max-width: 100%; padding: 2px 2px 16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b3b8bd transparent; } body.site-page .am-v430-rail::-webkit-scrollbar { height: 8px; } body.site-page .am-v430-rail::-webkit-scrollbar-thumb { border-radius: 999px; background: #b3b8bd; } body.site-page .am-v430-rail::-webkit-scrollbar-track { background: transparent; } /* --------------------------------------------------------- COMPARE CARD --------------------------------------------------------- */ body.site-page .am-v430-card { position:relative; flex: 0 0 244px; width: 244px; min-width: 244px; overflow:hidden; scroll-snap-align:start; border: 1px solid #dfe5e2; border-radius: 16px; background: #fff; box-shadow: 0 5px 15px rgba(14,36,24,.055); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } body.site-page .am-v430-card:hover { transform: translateY(-2px); border-color: #c9ded3; box-shadow: 0 10px 24px rgba(14,36,24,.08); } body.site-page .am-v430-card.is-selected { border-color: #08975a; box-shadow: 0 0 0 1px #08975a, 0 10px 25px rgba(7,145,84,.09); } /* --------------------------------------------------------- SELECT / HEART --------------------------------------------------------- */ body.site-page .am-v430-select { position:absolute; top: 12px; left: 12px; z-index: 4; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; padding: 0; border: 2px solid #aeb8b3; border-radius: 50%; background: rgba(255,255,255,.95); color: transparent; font-size: 18px; font-weight: 900; cursor:pointer; box-shadow: 0 3px 12px rgba(13,31,21,.09); } body.site-page .am-v430-card.is-selected .am-v430-select { border-color: #07975a; background: #07975a; color: #fff; } body.site-page .am-v430-card.is-current .am-v430-select { pointer-events:none; } body.site-page .am-v430-heart { position:absolute; top: 12px; right: 12px; z-index: 4; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border: 1px solid #e0e6e3; border-radius: 50%; background: rgba(255,255,255,.95); color: #203128; font-size: 17px; } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ body.site-page .am-v430-photo { display:block; width: calc(100% - 22px); height: 155px; margin: 11px 11px 0; overflow:hidden; border-radius: 12px; background: #eef2f0; } body.site-page .am-v430-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* --------------------------------------------------------- CARD BODY --------------------------------------------------------- */ body.site-page .am-v430-card-body { padding: 13px; } body.site-page .am-v430-name { min-height: 38px; margin: 0; color: #111c2d; font-size: 14px; line-height: 1.3; font-weight: 800; } body.site-page .am-v430-price { display:block; margin: 9px 0 0; color: #078c52; font-size: 18px; line-height: 1; font-weight: 850; } /* --------------------------------------------------------- BADGES --------------------------------------------------------- */ body.site-page .am-v430-badges { min-height: 27px; display:flex; align-items:center; flex-wrap:wrap; gap: 5px; margin: 10px 0 0; } body.site-page .am-v430-badge { min-height: 23px; display:inline-flex; align-items:center; justify-content:center; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 750; } body.site-page .am-v430-badge.featured { background: #fff0f5; color: #bd2860; } body.site-page .am-v430-badge.verified { background: #eaf8ef; color: #13844f; } /* --------------------------------------------------------- CURRENT / DETAILS BUTTON --------------------------------------------------------- */ body.site-page .am-v430-detail { width:100%; height: 36px; display:flex; align-items:center; justify-content:center; margin: 10px 0 0; border: 0; border-radius: 8px; background: #eef5fb; color: #0c57aa; font-size: 12px; line-height: 1; font-weight: 750; text-decoration:none; } body.site-page .am-v430-card.is-current .am-v430-detail { background: #e8f1ff; color: #1457ae; } /* --------------------------------------------------------- SPEC TABLE --------------------------------------------------------- */ body.site-page .am-v430-specs { margin: 12px 0 0; border-top: 1px solid #edf0ee; } body.site-page .am-v430-spec { min-height: 38px; display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: 8px; border-bottom: 1px solid #edf0ee; color: #738095; font-size: 12px; line-height: 1.25; } body.site-page .am-v430-spec strong { min-width: 0; overflow:hidden; color: #1a2637; font-size: 12px; font-weight: 750; text-align:right; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= FILTER SIDEBAR ========================================================= */ body.site-page .am-v430-filter { position:sticky; top: calc( var(--am-header-height,72px) + var(--am-global-search-height,62px) + 16px ); overflow:hidden; border: 1px dashed #2772bd; border-radius: 17px; background: #fff; box-shadow: 0 7px 20px rgba(15,39,26,.055); } body.site-page .am-v430-filter-inner { padding: 18px; } body.site-page .am-v430-filter h3 { margin: 0; color: #111b2b; font-size: 17px; line-height: 1.2; font-weight: 850; } body.site-page .am-v430-filter-intro { margin: 8px 0 16px; color: #68758a; font-size: 12px; line-height: 1.5; } /* --------------------------------------------------------- FILTER GROUP --------------------------------------------------------- */ body.site-page .am-v430-field { margin: 0 0 13px; } body.site-page .am-v430-label-row { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; } body.site-page .am-v430-label-row label { color: #121d2c; font-size: 12px; font-weight: 800; } body.site-page .am-v430-reset { padding: 0; border: 0; background: transparent; color: #768196; font-size: 12px; cursor:pointer; } body.site-page .am-v430-range { display:grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); align-items:center; gap: 6px; } body.site-page .am-v430-range > span { color: #8a96a5; text-align:center; } body.site-page .am-v430-input, body.site-page .am-v430-select-field { width:100%; height: 39px; min-width: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; outline: 0; background: #f5f6f8; color: #263346; font:inherit; font-size: 12px; } body.site-page .am-v430-input:focus, body.site-page .am-v430-select-field:focus { border-color: #9fc9b5; background: #fff; } /* --------------------------------------------------------- FILTER BUTTON --------------------------------------------------------- */ body.site-page .am-v430-show { width: 100%; height: 42px; display:flex; align-items:center; justify-content:center; gap: 8px; margin-top: 17px; border: 0; border-radius: 8px; background: #0b5aa9; color: #fff; font-size: 12px; font-weight: 800; cursor:pointer; box-shadow: 0 5px 13px rgba(11,90,169,.15); } /* ========================================================= EMPTY FILTER STATE ========================================================= */ body.site-page .am-v430-empty { width: 100%; min-height: 260px; display:none; align-items:center; justify-content:center; padding: 30px; border: 1px dashed #d4ddd8; border-radius: 14px; background: #fafcfb; color: #748195; font-size: 13px; text-align:center; } body.site-page .am-v430-empty.is-visible { display:flex; } /* ========================================================= SELECTION TRAY ========================================================= */ body.site-page .am-v430-tray { position: sticky; bottom: 16px; z-index: 90; width: 100%; min-height: 76px; display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center; gap: 15px; margin: 16px 0 0; padding: 10px 14px; border: 1px solid #cfe6da; border-radius: 14px; background: rgba(250,255,252,.96); box-shadow: 0 8px 28px rgba(13,55,33,.10); backdrop-filter: blur(14px); } body.site-page .am-v430-tray-images { display:flex; align-items:center; } body.site-page .am-v430-tray-images img { width: 58px; height: 48px; object-fit: cover; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(13,37,24,.10); } body.site-page .am-v430-tray-images img + img { margin-left: -10px; } body.site-page .am-v430-tray-copy { min-width: 0; } body.site-page .am-v430-tray-copy strong { display:block; color: #0f6e43; font-size: 13px; line-height: 1.2; } body.site-page .am-v430-tray-copy small { display:block; margin-top: 4px; color: #718094; font-size: 12px; } body.site-page .am-v430-compare-button { height: 46px; min-width: 210px; display:flex; align-items:center; justify-content:center; gap: 9px; padding: 0 18px; border: 0; border-radius: 10px; background: #079559; color: #fff; font-size: 13px; font-weight: 800; text-decoration:none; box-shadow: 0 7px 18px rgba(7,149,89,.17); } body.site-page .am-v430-compare-button.is-disabled { opacity: .48; pointer-events:none; } /* ========================================================= DESKTOP RESPONSIVE ========================================================= */ @media (max-width:1180px) { body.site-page .am-v430-shell { grid-template-columns: minmax(0,1fr) 285px; } body.site-page .am-v430-card { flex-basis: 225px; width: 225px; min-width: 225px; } } } /* ========================================================= DO NOT SHOW DESKTOP COMPARE MODULE ON MOBILE/TABLET Existing V42 Similar Vehicles remains authoritative. ========================================================= */ @media (max-width:1023px) { .am-v430-compare { display:none !important; } }