/* ============================================================ AUTOMART V42.1 VEHICLES MOBILE SEARCH AUTHORITY ------------------------------------------------------------ Visible mobile header authority: .am-mobile-v40__header Floating functional search authority: .am-global-search-v18 + V42 Desktop/tablet untouched. ============================================================ */ @media (max-width:767px) { /* -------------------------------------------------------- PAGE CLEARANCE Old V41.4 reserved ~164px for permanent search rows. V42.1 only reserves the compact logo/action row. -------------------------------------------------------- */ html.am-v421-vehicles body.site-page:not(.admin-page) { padding-top: calc( var(--am-v421-header-height,72px) + 8px ) !important; } /* -------------------------------------------------------- KEEP V40 MOBILE LOGO/ACTION HEADER -------------------------------------------------------- */ html.am-v421-vehicles .am-mobile-v40__header { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; z-index:2000 !important; } /* -------------------------------------------------------- OLD PERMANENT QUICK FILTER ROW This is no longer part of the sticky header. -------------------------------------------------------- */ html.am-v421-vehicles .am-mobile-v40__filters, html.am-v421-vehicles .am-v421-hide-legacy-search { display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; max-width:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; } /* -------------------------------------------------------- GLOBAL V18 SEARCH: COMPLETELY ABSENT FROM LAYOUT WHILE CLOSED -------------------------------------------------------- */ html.am-v421-vehicles body.site-page .am-global-search-v18:not(.am-v42-open) { display:none !important; position:fixed !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* -------------------------------------------------------- OPEN V42 PANEL -------------------------------------------------------- */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open { display:block !important; position:fixed !important; left:12px !important; right:12px !important; top: calc( var(--am-v421-header-height,72px) + 8px ) !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-height: calc( 100dvh - var(--am-v421-header-height,72px) - 24px ) !important; margin:0 !important; padding:0 !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; z-index:1900 !important; } html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; max-width:none !important; pointer-events:auto !important; transform:none !important; } /* -------------------------------------------------------- OPEN PANEL REFERENCE LAYOUT -------------------------------------------------------- */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-search-form-v18 { display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap:10px !important; width:100% !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-search-main-v18 { grid-column:1 / -1 !important; display:flex !important; width:100% !important; min-height:52px !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-filter-v18 { display:flex !important; width:100% !important; min-width:0 !important; min-height:47px !important; } /* * Location remains inside More Filters on mobile. */ html.am-v421-vehicles .am-global-search-v18 .am-v42-location-filter { display:none !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-v18 { display:flex !important; width:100% !important; min-width:0 !important; min-height:47px !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-submit-v18 { grid-column:1 / -1 !important; display:flex !important; width:100% !important; min-height:50px !important; } /* -------------------------------------------------------- OLD V18 INTERNAL MOBILE FILTER TOGGLE REMAINS DEAD -------------------------------------------------------- */ html.am-v421-vehicles .am-global-mobile-toggle-v18 { display:none !important; } /* -------------------------------------------------------- RESULTS SHOULD BEGIN DIRECTLY BELOW COMPACT HEADER -------------------------------------------------------- */ html.am-v421-vehicles body.site-page main { margin-top:0 !important; padding-top:0 !important; } html.am-v421-vehicles body.site-page .premium-listing-v14-1 { padding-top:8px !important; } html.am-v421-vehicles body.site-page .market-title-row { margin-top:0 !important; padding-top:0 !important; margin-bottom:10px !important; } /* -------------------------------------------------------- CURRENT V41.9 CARD IS FROZEN No card-body redesign here. -------------------------------------------------------- */ } /* AUTOMART V42.3 FLOATING SEARCH VISIBILITY START */ @media screen and (max-width:767px) { /* * V40 retired the old V18 mobile search with a broad * [class*="global-search-v18"] selector. * * That means the root may open correctly while its * shell/form/main/icon remain width:0 / height:0 / * opacity:0. * * V42.3 restores those exact nodes ONLY while the * /vehicles floating search is open. */ /* ======================================================== KEEP THE MOBILE LOGO BAR ABOVE THE EFFECT ======================================================== */ html.am-v421-vehicles body.site-page .am-mobile-v40__header { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:2300 !important; min-height:0 !important; height:auto !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:auto !important; } /* * Dim/blur the results, but do not cover the logo bar. */ html.am-v421-vehicles body.site-page .am-v42-backdrop { top: var( --am-v421-header-height, 72px ) !important; z-index:1900 !important; } /* ======================================================== ROOT ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open { display:block !important; position:fixed !important; top: calc( var( --am-v421-header-height, 72px ) + 8px ) !important; left:12px !important; right:12px !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height: calc( 100dvh - var( --am-v421-header-height, 72px ) - 24px ) !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; z-index:2200 !important; } /* ======================================================== SHELL This is the element V40 was still leaving at max-height:0. ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { display:block !important; position:relative !important; width:100% !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:12px !important; border: 1px solid rgba(216,227,221,.98) !important; border-radius:22px !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 24px 60px rgba(8,30,20,.22), 0 4px 14px rgba(8,30,20,.08) !important; backdrop-filter: blur(22px) saturate(1.15) !important; -webkit-backdrop-filter: blur(22px) saturate(1.15) !important; pointer-events:auto !important; } /* ======================================================== FORM ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-form-v18 { display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap:10px !important; position:relative !important; width:100% !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* ======================================================== SEARCH INPUT WRAPPER ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-main-v18 { grid-column: 1 / -1 !important; display:grid !important; grid-template-columns: 22px minmax(0,1fr) !important; align-items:center !important; gap:9px !important; position:relative !important; width:100% !important; height:54px !important; min-width:0 !important; min-height:54px !important; max-width:none !important; max-height:54px !important; margin:0 !important; padding: 0 14px !important; border: 1px solid #dfe7e3 !important; border-radius: 15px !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(16,24,40,.045) !important; pointer-events:auto !important; } /* ======================================================== SEARCH ICON ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-icon-v18 { display:grid !important; place-items:center !important; position:static !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; color:#1d2939 !important; pointer-events:none !important; } html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-icon-v18 svg { display:block !important; width:20px !important; height:20px !important; max-width:20px !important; max-height:20px !important; visibility:visible !important; opacity:1 !important; } /* ======================================================== INPUT ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-search-main-v18 input { display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; background:transparent !important; color:#101828 !important; font-size:16px !important; pointer-events:auto !important; } /* ======================================================== MAKE / MODEL / YEAR ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-filter-v18 { display:flex !important; align-items:center !important; width:100% !important; height:48px !important; min-width:0 !important; min-height:48px !important; max-width:none !important; max-height:none !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:auto !important; } /* * Location belongs in More Filters on mobile. */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-v42-location-filter { display:none !important; } /* ======================================================== MORE FILTERS ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-more-v18 { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:48px !important; min-width:0 !important; min-height:48px !important; max-width:none !important; max-height:none !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:auto !important; } /* ======================================================== SEARCH BUTTON ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18.am-v42-open .am-global-submit-v18 { grid-column: 1 / -1 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:50px !important; min-width:0 !important; min-height:50px !important; max-width:none !important; max-height:none !important; margin:2px 0 0 !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:auto !important; } /* ======================================================== OLD INTERNAL FILTER TOGGLE REMAINS OFF ======================================================== */ html.am-v421-vehicles body.site-page .am-global-search-v18 .am-global-mobile-toggle-v18 { display:none !important; } } /* AUTOMART V42.3 FLOATING SEARCH VISIBILITY END */