/* ============================================================ AUTOMART V43.6 DESKTOP VEHICLE DETAIL HERO RECONSTRUCTION DESKTOP ONLY. STRUCTURE: TITLE -------------------------------- CONDITION GALLERY ------------------------------ SELLER GALLERY ------------------------------ CONTACT FACTS -------------------------------- PRICE POSTED ------------------------------- VIEWS Then normal detail content. ============================================================ */ /* New desktop-only elements stay hidden everywhere by default. */ .am-v436-desktop-title-row, .am-v436-desktop-meta { display:none; } /* ============================================================ DESKTOP ============================================================ */ @media screen and (min-width:1024px) { /* ======================================================== TITLE ABOVE GALLERY ======================================================== */ .vehicle-detail-page .am-v436-desktop-title-row { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; width:100% !important; margin: 4px 0 15px !important; padding: 0 2px !important; box-sizing:border-box !important; } .vehicle-detail-page .am-v436-desktop-title-copy { min-width:0 !important; flex:1 1 auto !important; } .vehicle-detail-page .am-v436-desktop-kicker { margin-bottom:4px !important; color:#718095 !important; font-size:12px !important; line-height:1.2 !important; font-weight:650 !important; } .vehicle-detail-page .am-v436-desktop-title { color:#111c2c !important; font-size:28px !important; line-height:1.12 !important; font-weight:850 !important; letter-spacing:-.025em !important; white-space:normal !important; } /* ======================================================== CONDITION / BRAND NEW — FAR RIGHT OF TITLE ======================================================== */ .vehicle-detail-page .am-v436-desktop-title-right { flex: 0 0 auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; } .vehicle-detail-page .am-v436-desktop-condition { min-height:34px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding: 0 14px !important; border-radius:999px !important; border: 1px solid #d5ece1 !important; background:#eaf7f1 !important; color:#0a714a !important; font-size:12px !important; line-height:1 !important; font-weight:800 !important; white-space:nowrap !important; } /* ======================================================== MAIN HERO: Gallery left / Seller + contacts right ======================================================== */ .vehicle-detail-page .reference-detail-grid { display:grid !important; grid-template-columns: minmax(0,1fr) 330px !important; gap:22px !important; align-items:start !important; width:100% !important; min-height:0 !important; margin: 0 !important; padding: 0 !important; } .vehicle-detail-page .gallery-column { width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; margin:0 !important; align-self:start !important; } /* ======================================================== OLD RIGHT SUMMARY CARD: CANCEL THE OLD INFORMATION BLOCK. Keep ONLY: - seller/dealer card - Call / WhatsApp / Chat ======================================================== */ .vehicle-detail-page .vehicle-summary { display:flex !important; flex-direction:column !important; gap:12px !important; align-self:start !important; width:330px !important; min-width:330px !important; max-width:330px !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } /* * Cancel old information within the right summary. */ .vehicle-detail-page .vehicle-summary > .am-v426-summary-top, .vehicle-detail-page .vehicle-summary > .title-actions, .vehicle-detail-page .vehicle-summary > .am-v426-summary-description, .vehicle-detail-page .vehicle-summary > .am-v426-quick-facts, .vehicle-detail-page .vehicle-summary > .summary-location, .vehicle-detail-page .vehicle-summary > .summary-meta { display:none !important; } /* ======================================================== SELLER / AGENT CARD FIRST ITEM — LEVEL WITH TOP OF GALLERY ======================================================== */ .vehicle-detail-page .vehicle-summary > .seller-profile-card { order:1 !important; display:grid !important; width:100% !important; min-width:0 !important; margin:0 !important; padding: 17px !important; border: 1px solid #dfe9e4 !important; border-radius:17px !important; background:#fff !important; box-shadow: 0 8px 24px rgba(17,45,34,.055) !important; box-sizing:border-box !important; } /* ======================================================== CONTACT BUTTONS BELOW AGENT CARD ======================================================== */ .vehicle-detail-page .vehicle-summary > .contact-row { order:2 !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important; transform:none !important; } .vehicle-detail-page .vehicle-summary > .contact-row > :first-child { grid-column: 1 / -1 !important; } .vehicle-detail-page .vehicle-summary > .contact-row > .btn { width:100% !important; min-width:0 !important; height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; box-sizing:border-box !important; } /* ======================================================== BELOW GALLERY: LEFT = YEAR / MILEAGE / ENGINE / ETC. RIGHT = PRICE + VIEW COUNT ======================================================== */ .vehicle-detail-page .am-v436-desktop-meta { display:grid !important; grid-template-columns: minmax(0,1fr) 330px !important; gap:22px !important; width:100% !important; margin: 15px 0 22px !important; padding: 16px 0 17px !important; border-top: 1px solid #e6ece9 !important; border-bottom: 1px solid #e6ece9 !important; box-sizing:border-box !important; } /* ======================================================== LEFT FACTS ======================================================== */ .vehicle-detail-page .am-v436-desktop-spec-side { display:flex !important; flex-direction:column !important; justify-content:space-between !important; min-width:0 !important; } .vehicle-detail-page .am-v436-desktop-spec-grid { display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 10px 12px !important; } .vehicle-detail-page .am-v436-desktop-spec-grid > div { min-width:0 !important; padding: 10px 12px !important; border: 1px solid #e4ebe7 !important; border-radius:11px !important; background:#fbfcfc !important; } .vehicle-detail-page .am-v436-desktop-spec-grid small { display:block !important; margin-bottom:3px !important; color:#7b8898 !important; font-size:11px !important; line-height:1.15 !important; } .vehicle-detail-page .am-v436-desktop-spec-grid strong { display:block !important; color:#172334 !important; font-size:13px !important; line-height:1.25 !important; font-weight:800 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* ======================================================== POSTED — LEFT ======================================================== */ .vehicle-detail-page .am-v436-desktop-posted { display:flex !important; align-items:center !important; gap:7px !important; margin-top:13px !important; color:#718095 !important; font-size:12px !important; line-height:1.2 !important; font-weight:600 !important; } .vehicle-detail-page .am-v436-clock { color:#08794a !important; font-size:15px !important; } /* ======================================================== PRICE — RIGHT ======================================================== */ .vehicle-detail-page .am-v436-desktop-price-side { display:flex !important; flex-direction:column !important; align-items:flex-end !important; justify-content:flex-start !important; width:330px !important; min-width:330px !important; padding: 5px 2px 0 !important; box-sizing:border-box !important; } .vehicle-detail-page .am-v436-desktop-price-label { margin-bottom:5px !important; color:#718095 !important; font-size:11px !important; font-weight:650 !important; } .vehicle-detail-page .am-v436-desktop-price-row { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:9px !important; width:100% !important; } .vehicle-detail-page .am-v436-desktop-price-row strong { color:#078e51 !important; font-size:28px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:-.025em !important; white-space:nowrap !important; } .vehicle-detail-page .am-v436-desktop-price-row span { min-height:27px !important; display:inline-flex !important; align-items:center !important; padding: 0 9px !important; border-radius:999px !important; background:#eaf7f1 !important; color:#11724e !important; font-size:10px !important; font-weight:750 !important; white-space:nowrap !important; } /* ======================================================== VIEWS — RIGHT, IMMEDIATELY UNDER PRICE ======================================================== */ .vehicle-detail-page .am-v436-desktop-view-row { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; width:100% !important; margin-top:12px !important; color:#718095 !important; font-size:12px !important; font-weight:600 !important; } .vehicle-detail-page .am-v436-desktop-view-row > :first-child { color:#08794a !important; } /* ======================================================== REMOVE OLD BLANK GAP BEFORE DESCRIPTION ======================================================== */ .vehicle-detail-page .detail-content-grid { margin-top:0 !important; padding-top:0 !important; align-items:start !important; } .vehicle-detail-page .detail-tabs { margin-top:0 !important; } } /* ============================================================ MOBILE + SMALL TABLET Keep existing approved layout completely untouched. ============================================================ */ @media screen and (max-width:1023px) { .am-v436-desktop-title-row, .am-v436-desktop-meta { display:none !important; } }