/* ============================================================ AUTOMART V43.4 MOBILE COMPARE POLISH - shorter card - next-card peek - compact comparison control - tighter facts - refined dots - preserve global mobile nav beneath the contact bar - sticky Compare Selected above contact bar ============================================================ */ @media screen and (max-width:767px) { /* ======================================================== VEHICLE DETAIL: It already has its own Call / WhatsApp / Chat bottom bar. Remove the global Home/Buy/Sell/Saved/Account bar here. ======================================================== */ /* * GLOBAL MOBILE BOTTOM NAV PRESERVED * * Vehicle detail keeps the global Home / Buy / Sell / Saved / Account * navigation. The Call / WhatsApp / Chat contact dock sits above it. */ /* ======================================================== SECTION SPACING ======================================================== */ .am-v433-mobile-compare { margin: 18px 0 22px !important; padding: 15px 0 13px !important; } /* ======================================================== HEADER ======================================================== */ .am-v433-mobile-compare__head { gap:8px !important; padding: 0 3px 11px !important; } .am-v433-mobile-compare__head h2 { font-size:19px !important; line-height:1.16 !important; } .am-v433-mobile-compare__head p { margin-top:4px !important; font-size:10.5px !important; } .am-v433-mobile-compare__swipe { margin-top:16px !important; min-height:29px !important; padding: 0 10px !important; display:flex !important; align-items:center !important; font-size:10px !important; } /* ======================================================== RAIL Give enough right-side space to reveal next card. ======================================================== */ .am-v433-mobile-compare__rail { gap:11px !important; padding: 2px 22px 3px 0 !important; scroll-padding-left:0 !important; } /* ======================================================== CARD — SHOW ~8% OF NEXT VEHICLE ======================================================== */ .am-v433-mobile-compare.am-v434-multiple .am-v433-mobile-compare__card { flex: 0 0 92% !important; width:92% !important; min-width:92% !important; max-width:92% !important; } .am-v433-mobile-compare:not(.am-v434-multiple) .am-v433-mobile-compare__card { flex: 0 0 100% !important; width:100% !important; min-width:100% !important; max-width:100% !important; } .am-v433-mobile-compare__card { border-radius:15px !important; box-shadow: 0 5px 16px rgba(16,32,24,.05) !important; } /* ======================================================== SHORTER IMAGE No more oversized image taking most of screen. ======================================================== */ .am-v433-mobile-compare__image { width:100% !important; height: clamp( 178px, 51vw, 212px ) !important; min-height:178px !important; max-height:212px !important; aspect-ratio:auto !important; } .am-v433-mobile-compare__image img { width:100% !important; height:100% !important; object-fit:cover !important; } .am-v433-mobile-compare__number { left:9px !important; bottom:8px !important; min-height:23px !important; padding: 0 8px !important; } .am-v433-mobile-compare__current { left:9px !important; top:9px !important; min-height:26px !important; padding: 0 9px !important; } /* ======================================================== BODY — REDUCE VERTICAL HEIGHT ======================================================== */ .am-v433-mobile-compare__body { padding: 12px !important; } .am-v433-mobile-compare__title-row { gap:8px !important; } .am-v433-mobile-compare__title-row h3 { margin: 0 0 5px !important; font-size:14px !important; line-height:1.23 !important; } .am-v433-mobile-compare__title-row strong { font-size:18px !important; line-height:1.05 !important; } /* ======================================================== COMPACT COMPARE CONTROL ======================================================== */ .am-v433-mobile-compare__select { min-height:30px !important; gap:4px !important; padding: 0 8px !important; font-size:9.5px !important; border-radius:999px !important; } .am-v433-mobile-compare__select input { width:13px !important; height:13px !important; flex: 0 0 13px !important; } .am-v433-mobile-compare__condition { min-height:23px !important; margin-top:8px !important; padding: 0 8px !important; font-size:9.5px !important; } /* ======================================================== FACTS ======================================================== */ .am-v433-mobile-compare__facts { gap:7px !important; margin-top:10px !important; } .am-v433-mobile-compare__facts > div { min-height:54px !important; padding: 8px 9px !important; border-radius:10px !important; } .am-v433-mobile-compare__facts small { margin-bottom:2px !important; font-size:9px !important; } .am-v433-mobile-compare__facts b { font-size:10.5px !important; line-height:1.2 !important; } .am-v433-mobile-compare__details { height:37px !important; margin-top:10px !important; font-size:10.5px !important; } /* ======================================================== DOTS — CLOSER TO CARD ======================================================== */ .am-v433-mobile-compare__dots { min-height:18px !important; gap:5px !important; padding-top:6px !important; } .am-v433-mobile-compare__dot { width:6px !important; height:6px !important; } .am-v433-mobile-compare__dot.is-active { width:21px !important; background:#07995b !important; } /* ======================================================== NORMAL SELECTED BAR ======================================================== */ .am-v433-mobile-compare__action { margin-top:3px !important; padding: 8px !important; } .am-v433-mobile-compare__action > a { min-height:38px !important; padding: 0 12px !important; } /* ======================================================== TWO+ SELECTED: FLOAT ABOVE THE CALL / WHATSAPP / CHAT BAR ======================================================== */ body.am-v434-vehicle-detail.am-v434-compare-ready .am-v433-mobile-compare__action { position:fixed !important; left:12px !important; right:12px !important; bottom: calc( var( --am-v434-contact-height, 68px ) + 10px + env(safe-area-inset-bottom) ) !important; z-index:1900 !important; width:auto !important; margin:0 !important; border: 1px solid rgba(209,227,218,.96) !important; border-radius:14px !important; background: rgba(255,255,255,.97) !important; box-shadow: 0 15px 42px rgba(6,30,19,.20) !important; backdrop-filter: blur(16px) saturate(1.12); -webkit-backdrop-filter: blur(16px) saturate(1.12); } body.am-v434-vehicle-detail.am-v434-compare-ready .am-v433-mobile-compare__action > a { background:#07995b !important; color:#fff !important; } /* ======================================================== CONTACT BAR STAYS ABOVE CONTENT / BELOW COMPARE ACTION ======================================================== */ body.am-v434-vehicle-detail .vehicle-detail-page .contact-row { z-index:1850 !important; } /* ======================================================== EXTRA PAGE CLEARANCE WHILE FLOATING COMPARE IS ACTIVE ======================================================== */ body.am-v434-vehicle-detail.am-v434-compare-ready { padding-bottom: calc( var( --am-v434-contact-height, 68px ) + 78px + env(safe-area-inset-bottom) ) !important; } /* ======================================================== NARROW PHONE ======================================================== */ @media (max-width:360px) { .am-v433-mobile-compare.am-v434-multiple .am-v433-mobile-compare__card { flex-basis: 94% !important; width:94% !important; min-width:94% !important; max-width:94% !important; } .am-v433-mobile-compare__image { height:180px !important; min-height:180px !important; max-height:180px !important; } } }