/* ============================================================ AUTOMART V42.4 MOBILE SEARCH FINAL POLISH ------------------------------------------------------------ /vehicles mobile only - Search input full row - Make + Model = 2 columns - Year + More Filters = 2 columns - Search = full row - Selector sheet temporarily replaces floating search card - Sticky AutoMart header remains visible ============================================================ */ @media screen and (max-width:767px) { /* ======================================================== FLOATING SEARCH FORM GRID ======================================================== */ 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; grid-template-rows: auto 48px 48px 50px !important; gap:9px !important; width:100% !important; height:auto !important; align-items:stretch !important; } /* Search field */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-search-main-v18 { grid-column:1 / -1 !important; grid-row:1 !important; width:100% !important; margin:0 !important; } /* Make */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-make { grid-column:1 !important; grid-row:2 !important; } /* Model */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-model { grid-column:2 !important; grid-row:2 !important; } /* Year */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-year { grid-column:1 !important; grid-row:3 !important; } /* Location stays inside More Filters */ html.am-v421-vehicles .am-global-search-v18 .am-v424-location { display:none !important; } /* More Filters */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-v18 { grid-column:2 !important; grid-row:3 !important; width:100% !important; margin:0 !important; } /* Search button */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-submit-v18 { grid-column:1 / -1 !important; grid-row:4 !important; width:100% !important; margin:0 !important; } /* ======================================================== MAKE / MODEL / YEAR CONTROL PARITY ======================================================== */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-make, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-model, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-year { display:grid !important; grid-template-columns: 18px minmax(0,1fr) !important; align-items:center !important; gap:7px !important; position:relative !important; width:100% !important; height:48px !important; min-width:0 !important; min-height:48px !important; max-width:none !important; max-height:48px !important; margin:0 !important; padding: 0 10px !important; border: 1px solid #e0e8e4 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 3px 10px rgba(16,24,40,.035) !important; overflow:hidden !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-filter-icon-v18 { display:grid !important; place-items:center !important; width:17px !important; height:17px !important; min-width:17px !important; min-height:17px !important; max-width:17px !important; max-height:17px !important; margin:0 !important; padding:0 !important; visibility:visible !important; opacity:1 !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-filter-icon-v18 svg { width:16px !important; height:16px !important; max-width:16px !important; max-height:16px !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-make label, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-model label, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-year label { display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-make select, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-model select, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-year select { display:block !important; width:100% !important; height:46px !important; min-width:0 !important; margin:0 !important; padding: 0 20px 0 0 !important; border:0 !important; outline:0 !important; background:transparent !important; color:#172334 !important; font-size:13px !important; line-height:1 !important; font-weight:750 !important; visibility:visible !important; opacity:1 !important; cursor:pointer !important; } /* ======================================================== MORE FILTERS — SAME SIZE AS YEAR ======================================================== */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-v18 { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; height:48px !important; min-height:48px !important; max-height:48px !important; padding: 0 9px !important; border: 1px solid #e0e8e4 !important; border-radius: 14px !important; background:#fff !important; color:#172334 !important; font-size:12px !important; line-height:1 !important; font-weight:750 !important; text-decoration:none !important; box-shadow: 0 3px 10px rgba(16,24,40,.035) !important; white-space:nowrap !important; overflow:hidden !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-icon-v18 { display:grid !important; place-items:center !important; width:17px !important; height:17px !important; flex:0 0 17px !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-icon-v18 svg { width:16px !important; height:16px !important; } /* ======================================================== FLOATING CARD TRANSITION ======================================================== */ html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { transition: opacity .18s ease, transform .22s ease, visibility .18s ease !important; } /* * When Make/Model/Year selector opens: * hide the floating search card. * Root remains open so it comes back automatically * as soon as the selector closes. */ html.am-v421-vehicles body.am-v424-sheet-active .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { visibility:hidden !important; opacity:0 !important; transform: translate3d(0,-8px,0) scale(.985) !important; pointer-events:none !important; } /* ======================================================== SELECTOR SHEET — TRUE TOP LAYER ======================================================== */ html.am-v421-vehicles .am-v42-select-sheet { position:fixed !important; left:8px !important; right:8px !important; bottom: max( 8px, env(safe-area-inset-bottom) ) !important; top:auto !important; z-index:2800 !important; width:auto !important; max-width:none !important; max-height: calc( 100dvh - var(--am-v421-header-height,72px) - 20px ) !important; border: 1px solid #dde7e2 !important; border-radius: 24px 24px 18px 18px !important; background:#fff !important; box-shadow: 0 30px 90px rgba(7,26,18,.32) !important; overflow:hidden !important; } html.am-v421-vehicles body.am-v42-select-open .am-v42-select-sheet { visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform: translate3d(0,0,0) scale(1) !important; } /* sheet handle */ html.am-v421-vehicles .am-v42-sheet-handle { width:42px !important; height:4px !important; margin: 9px auto 2px !important; border-radius:999px !important; background:#d4ddd8 !important; } /* sheet title area */ html.am-v421-vehicles .am-v42-sheet-head { min-height:54px !important; padding: 10px 14px 11px !important; border-bottom: 1px solid #edf1ef !important; } html.am-v421-vehicles .am-v42-sheet-head strong { font-size:15px !important; line-height:1.2 !important; font-weight:800 !important; color:#111d2d !important; } html.am-v421-vehicles .am-v42-sheet-close { width:35px !important; height:35px !important; min-width:35px !important; border-radius:50% !important; } /* selector search field */ html.am-v421-vehicles .am-v42-sheet-search { padding: 9px 12px 5px !important; } html.am-v421-vehicles .am-v42-sheet-search input { height:44px !important; border-radius:12px !important; font-size:14px !important; } /* options */ html.am-v421-vehicles .am-v42-sheet-options { padding: 6px 12px calc( 16px + env(safe-area-inset-bottom) ) !important; } html.am-v421-vehicles .am-v42-option { min-height:47px !important; padding: 8px 3px !important; font-size:13px !important; } html.am-v421-vehicles .am-v42-option-mark { width:21px !important; height:21px !important; min-width:21px !important; flex:0 0 21px !important; } /* ======================================================== BACKDROP LAYER Header stays above it, selector stays above everything. ======================================================== */ html.am-v421-vehicles .am-v42-backdrop { z-index:2100 !important; } html.am-v421-vehicles .am-mobile-v40__header { z-index:2600 !important; } /* Selector must be above header/backdrop where needed */ html.am-v421-vehicles .am-v42-select-sheet { z-index:2900 !important; } /* ======================================================== MORE FILTERS BOTTOM SHEET ======================================================== */ html.am-v421-vehicles body.am-v42-filter-open .premium-filter-v14-1 { z-index:2900 !important; left:8px !important; right:8px !important; bottom: max( 8px, env(safe-area-inset-bottom) ) !important; max-height: calc( 100dvh - var(--am-v421-header-height,72px) - 18px ) !important; border-radius: 24px 24px 18px 18px !important; box-shadow: 0 30px 90px rgba(7,26,18,.32) !important; } /* ======================================================== VERY SMALL PHONES ======================================================== */ @media (max-width:360px) { html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-search-form-v18 { gap:7px !important; } html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-make, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-model, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-v424-year, html.am-v421-vehicles .am-global-search-v18.am-v42-open .am-global-more-v18 { padding-left:8px !important; padding-right:8px !important; } } }