/* AutoMart UI Exact Reference V3 — visual fidelity layer */
:root{--ref-green:#078f59;--ref-green-bright:#0cac69;--ref-ink:#101a15;--ref-muted:#69736e;--ref-line:#e5e9e7;--ref-soft:#f6f8f7;--ref-dark:#071812}
.container{width:min(1280px,calc(100% - 64px))}
.topbar{height:58px}.nav{gap:25px}.brand{font-size:18px}.brandmark{width:27px;height:27px;border-radius:6px}.desktop-nav{gap:24px;margin-left:14px}.desktop-nav a,.nav-actions{font-size:12px}.nav-circle{width:32px;height:32px;font-size:20px}.btn-sm{min-height:32px;padding:0 13px}
.home-hero{padding-bottom:18px}.hero-stage{min-height:500px;border-radius:0 0 13px 13px;padding:42px 44px 24px;background:linear-gradient(90deg,rgba(4,19,13,.97) 0%,rgba(4,21,14,.88) 36%,rgba(4,21,14,.40) 61%,rgba(4,21,14,.05) 82%),url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1800&q=86') center 58%/cover no-repeat}.hero-copy{width:min(720px,63%)}.hero-copy h1{font-size:54px;line-height:.95;letter-spacing:-2.5px;margin-bottom:9px}.hero-copy h1 span{color:#72e49f}.hero-copy h2{font-size:19px;margin-bottom:12px}.hero-copy>p{font-size:13px;max-width:560px}.search-panel{width:min(740px,100%);margin-top:18px;border-radius:9px;padding:0 13px 11px}.search-tabs{margin:0 -13px 9px}.search-tabs button{padding:13px 25px;font-size:12px}.hero-search{gap:8px}.hero-search label span{font-size:12px}.hero-search select{min-height:39px;font-size:12px}.hero-search-btn{min-width:98px;min-height:39px}.more-filters{font-size:12px;margin-top:8px}.hero-trust{margin-top:18px;gap:28px;font-size:12px}.hero-side-cta{right:18px;bottom:18px;min-width:190px;padding:13px 45px 13px 15px;border-radius:9px}.hero-side-cta small{font-size:14px}.hero-side-cta span{font-size:12px}.hero-side-cta b{width:28px;height:28px;font-size:19px}
.category-strip{padding:5px 0 18px}.category-row{gap:2px}.category-row a{padding:10px 3px}.category-icon{height:32px;width:52px;margin-bottom:5px}.category-icon svg{width:48px;height:30px;fill:#111b16;stroke:#111b16;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.category-icon svg .bolt{fill:#f4a51c;stroke:#f4a51c}.category-row b{font-size:12px}
.section{padding:30px 0}.section-head{margin-bottom:15px}.section-head h2{font-size:23px}.section-head>a{font-size:12px}.mini-tabs{margin-top:9px}.mini-tabs button{padding:6px 12px;font-size:12px}.vehicle-grid{gap:13px}.vehicle-card{border-radius:8px}.vehicle-image{height:198px}.badge{font-size:12px;padding:4px 7px}.heart{width:27px;height:27px;font-size:16px}.vehicle-body{padding:11px}.vehicle-body h3{font-size:12px;min-height:30px}.price{font-size:15px}.vehicle-facts{font-size:12px;gap:6px 8px;margin:9px 0}.vehicle-facts span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle-facts i{font-style:normal;margin-right:4px}.seller-line{font-size:12px;padding-top:8px}.verified-mini{width:13px;height:13px;font-size:12px}
.promo-section{padding-top:12px}.marketing-grid{grid-template-columns:1.4fr .95fr;gap:14px}.marketing-card{min-height:205px;border-radius:9px;padding:28px}.marketing-card h3{font-size:24px}.marketing-card p{font-size:12px}.marketing-benefits{font-size:12px;margin-top:14px}.sell-card{background-position:center 62%}.finance-card{padding-right:185px;position:relative}.finance-card:after{display:none}.finance-copy{z-index:3}.finance-person{position:absolute;right:24px;bottom:0;width:155px;height:185px}.person-head{position:absolute;width:55px;height:55px;border-radius:50%;background:#123c2c;top:20px;left:55px}.person-body{position:absolute;width:105px;height:120px;border-radius:58px 58px 16px 16px;background:#0c8d58;left:30px;top:68px;transform:rotate(-3deg)}.person-phone{position:absolute;width:28px;height:48px;border-radius:5px;background:#101a15;left:31px;top:108px;transform:rotate(13deg);box-shadow:0 0 0 3px #d8ebe2}
.popular-makes{padding-top:12px}.make-row{gap:4px}.make-row a{padding:5px 2px}.make-badge{width:48px;height:48px;border-color:#e0e6e2;background:#fff}.make-badge i{font-style:normal;font-size:12px;font-weight:900;color:#34423b;letter-spacing:-.5px}.make-row b{font-size:12px;margin-top:3px}.trust-panels{padding-top:3px}.trust-grid{gap:12px}.trust-card{height:105px;border-radius:8px;padding:16px}.trust-card span{font-size:13px}.trust-card b{font-size:12px}.trust-card small{font-size:12px}.footer{padding:38px 0 58px;margin-top:16px}.footer-grid{gap:24px}.footer h4{font-size:12px}.footer a,.footer p{font-size:12px}.footer-bottom{font-size:12px;margin-top:23px}
/* Search page fidelity */
.market-searchbar{padding:10px 0}.market-searchbar form{max-width:none}.market-searchbar input{height:38px;font-size:12px}.market-searchbar .btn{min-height:38px}.section.compact{padding:22px 0 42px}.market-title-row{margin-bottom:14px}.market-title-row h1{font-size:28px}.market-title-row p{font-size:12px}.view-tools select,.view-btn{height:34px;font-size:12px}.listing-layout{grid-template-columns:220px 1fr;gap:16px}.filters{padding:13px;top:72px}.listing-grid{grid-template-columns:repeat(3,1fr);gap:12px}.listing-grid .vehicle-image{height:150px}.listing-grid .vehicle-body h3{font-size:12px}.listing-grid .price{font-size:13px}
/* Vehicle detail fidelity */
.reference-detail-grid{grid-template-columns:1.48fr .86fr;gap:18px}.main-gallery{height:390px}.thumb-row{gap:7px}.thumb{height:64px}.vehicle-summary h1{font-size:25px}.price-line strong{font-size:22px}.summary-facts,.summary-meta,.summary-location{font-size:12px}.contact-row .btn{min-height:38px;font-size:12px}.seller-profile-card{padding:13px}.detail-content-grid{grid-template-columns:1fr 250px;gap:18px}.detail-tabs{font-size:12px}.detail-copy h2{font-size:17px}.detail-copy p{font-size:12px}.key-info{font-size:12px}.finance-box{font-size:12px}
@media(max-width:1180px){.container{width:calc(100% - 28px)}.hero-copy{width:70%}.vehicle-image{height:180px}.finance-card{padding-right:140px}.finance-person{right:8px;transform:scale(.86);transform-origin:bottom right}}
@media(max-width:820px){.topbar{height:55px}.desktop-nav{display:none}.hero-stage{min-height:500px;padding:32px 24px 20px}.hero-copy{width:78%}.hero-copy h1{font-size:46px}.vehicle-grid{grid-template-columns:repeat(2,1fr)}.category-row,.make-row{display:flex;overflow:auto;scrollbar-width:none}.category-row a{min-width:82px}.make-row a{min-width:85px}.marketing-grid{grid-template-columns:1fr 1fr}.finance-card{padding-right:120px}.listing-layout{grid-template-columns:190px 1fr}.listing-grid{grid-template-columns:repeat(2,1fr)}.reference-detail-grid{grid-template-columns:1fr}.detail-content-grid{grid-template-columns:1fr}}
@media(max-width:720px){body{padding-bottom:64px}.container{width:calc(100% - 18px)}.topbar{height:54px}.nav{gap:9px}.nav-actions .nav-circle:first-child{display:grid}.home-hero{padding-bottom:10px}.hero-stage{min-height:455px;border-radius:0;padding:112px 12px 15px;background:linear-gradient(180deg,rgba(5,20,14,.24) 0%,rgba(5,20,14,.52) 31%,rgba(5,20,14,.94) 63%,rgba(5,20,14,.98) 100%),url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=900&q=84') center/cover}.hero-copy{width:100%;align-self:flex-end}.hero-copy h1{font-size:36px;letter-spacing:-1.6px}.hero-copy h2{font-size:13px}.hero-copy>p{display:none}.search-panel{margin-top:12px;padding:0 9px 9px}.search-tabs{margin:0 -9px 8px}.search-tabs button{padding:10px 19px;font-size:12px}.hero-search{grid-template-columns:1fr}.hero-search select,.hero-search-btn{height:37px;min-height:37px}.hero-trust,.hero-side-cta{display:none}.category-strip{padding:4px 0 12px}.category-row a{min-width:69px;padding:7px 2px}.category-icon{width:42px;height:26px}.category-icon svg{width:40px;height:25px}.section{padding:23px 0}.section-head h2{font-size:20px}.featured-grid{display:flex;overflow:auto;gap:10px;scroll-snap-type:x proximity}.featured-grid .vehicle-card{min-width:235px;scroll-snap-align:start}.featured-grid .vehicle-image{height:145px}.marketing-grid{grid-template-columns:1fr}.marketing-card{min-height:175px;padding:20px}.finance-card{padding-right:130px}.finance-person{width:120px;height:160px;right:8px}.person-head{width:42px;height:42px;left:45px}.person-body{width:84px;height:102px;left:28px;top:58px}.person-phone{left:26px;top:98px}.make-row a{min-width:72px}.make-badge{width:42px;height:42px}.trust-grid{grid-template-columns:1fr}.trust-card{height:96px}.listing-layout{grid-template-columns:1fr}.filters{display:none}.filters.open{display:block}.listing-grid{grid-template-columns:1fr}.listing-grid .vehicle-image{height:190px}.main-gallery{height:270px}.mobile-bottom{height:58px}.mobile-bottom .sell-fab{width:44px;height:44px}.footer{padding-bottom:78px}}

/* AutoMart UI Exact Reference V4 — final fidelity pass */
:root{--ref-green:#0a985e;--ref-green-2:#087f50;--ref-dark:#071b13;--ref-line:#dfe7e2;--ref-muted:#67746d}
.container{width:min(1280px,calc(100% - 64px))}
.topbar{height:58px}
.nav{gap:22px}
.desktop-nav{gap:26px;margin-left:18px}
.desktop-nav a{font-size:12px}
.nav-actions{font-size:12px}

/* Hero: taller, premium SUV, stronger left-to-right readability like the approved reference. */
.home-hero{padding-bottom:16px}
.hero-stage{
  min-height:620px;
  border-radius:0 0 14px 14px;
  padding:64px 48px 26px;
  align-items:center;
  background-image:
    linear-gradient(90deg,rgba(3,18,12,.98) 0%,rgba(3,20,13,.92) 34%,rgba(3,20,13,.55) 57%,rgba(3,20,13,.12) 78%,rgba(3,20,13,.04) 100%),
    url('https://images.pexels.com/photos/19758141/pexels-photo-19758141/free-photo-of-black-toyota-land-cruiser-prado-on-road.jpeg?auto=compress&cs=tinysrgb&w=1800');
  background-size:cover;
  background-position:center 54%;
}
.hero-copy{width:min(760px,58%)}
.hero-copy h1{font-size:58px;line-height:.94;letter-spacing:-2.8px;margin-bottom:12px}
.hero-copy h1 span{color:#74e7a1}
.hero-copy h2{font-size:18px;margin-bottom:12px;color:#75e2a0}
.hero-copy>p{font-size:13px;max-width:570px;line-height:1.55}
.search-panel{width:min(760px,100%);margin-top:22px;border-radius:10px;padding:0 14px 12px;box-shadow:0 18px 42px rgba(0,0,0,.22)}
.search-tabs{margin:0 -14px 10px}
.search-tabs button{padding:13px 27px;font-size:12px}
.hero-search{gap:9px}
.hero-search label span{font-size:12px;text-transform:none}
.hero-search select{min-height:41px;font-size:12px;border-radius:6px}
.hero-search-btn{min-height:41px;min-width:102px;font-size:12px}
.more-filters{font-size:12px;margin-top:8px}
.hero-trust{gap:26px;font-size:12px;margin-top:19px}
.hero-trust span{position:relative;padding-left:0}
.hero-trust span:first-child,.hero-trust span:nth-child(2){color:#d8eee3}
.hero-side-cta{right:22px;bottom:22px;min-width:202px;padding:14px 46px 14px 15px;border-radius:9px;background:rgba(5,24,17,.72)}
.hero-side-cta small{font-size:14px}.hero-side-cta span{font-size:12px}.hero-side-cta b{width:28px;height:28px;font-size:19px}

/* Clean line category icons rather than filled silhouettes. */
.category-strip{padding:7px 0 21px}
.category-row a{padding:9px 3px}
.category-icon{width:54px;height:33px;margin-bottom:5px}
.category-icon svg{width:50px;height:31px;fill:none!important;stroke:#101a15!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.category-icon svg circle{fill:#fff;stroke:#101a15}
.category-icon svg .bolt{fill:#f0a318!important;stroke:#f0a318!important}
.category-row b{font-size:12px;font-weight:700}

/* Match the compact featured card density in the reference. */
.section{padding:31px 0}
.home-featured{padding-top:27px}
.section-head{margin-bottom:14px}
.section-head h2{font-size:24px;letter-spacing:-.4px}
.section-head>a{font-size:12px}
.mini-tabs{margin-top:8px}.mini-tabs button{font-size:12px;padding:6px 12px}
.featured-grid{gap:14px}
.vehicle-card{border-radius:9px;box-shadow:0 2px 9px rgba(8,26,18,.035)}
.vehicle-image{height:190px}
.vehicle-image img{object-position:center 53%}
.badge{font-size:12px;padding:4px 7px;border-radius:5px}
.heart{width:28px;height:28px;font-size:16px}
.vehicle-body{padding:11px 11px 10px}
.vehicle-body h3{font-size:12px;min-height:30px;margin-bottom:4px}
.price{font-size:15px}
.vehicle-facts{font-size:12px;gap:6px 10px;margin:9px 0}
.seller-line{font-size:12px;padding-top:8px}
.verified-mini{width:13px;height:13px;font-size:12px}

/* Reference-like promo cards. */
.promo-section{padding-top:12px;padding-bottom:25px}
.marketing-grid{grid-template-columns:1.42fr .94fr;gap:15px}
.marketing-card{min-height:210px;border-radius:10px;padding:28px}
.marketing-card h3{font-size:25px;line-height:1.03}
.marketing-card p{font-size:12px;max-width:310px}
.marketing-benefits{font-size:12px;gap:15px;margin-top:14px}
.sell-card{
  background-image:linear-gradient(90deg,rgba(4,18,13,.96),rgba(4,18,13,.48)),url('https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=1400&q=84');
  background-position:center 60%;
}
.finance-photo-card{background:#eaf1ee;color:#17201c;padding-right:46%;isolation:isolate}
.finance-photo-card:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#edf4f1 0%,#edf4f1 50%,rgba(237,244,241,.66) 67%,rgba(237,244,241,.12) 100%);z-index:1}
.finance-photo-card .finance-copy{position:relative;z-index:3}
.finance-photo{position:absolute;z-index:0;right:0;top:0;bottom:0;width:52%;background-image:url('https://images.pexels.com/photos/14904191/pexels-photo-14904191.jpeg?auto=compress&cs=tinysrgb&w=900');background-size:cover;background-position:center 36%}
.finance-photo-card .btn-white{box-shadow:0 4px 12px rgba(15,36,27,.05)}

/* Brand marks: inline vector emblems rather than text placeholders. */
.popular-makes{padding-top:11px}
.make-row{gap:5px}
.make-row a{padding:5px 2px}
.make-badge{width:54px;height:54px;border:0;background:#fff;border-radius:0;margin-bottom:3px}
.make-badge svg{width:48px;height:34px;fill:none;stroke:#26332d;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.make-badge svg .fillmark{fill:#26332d;stroke:none}
.make-badge svg .whitefill{fill:#fff;stroke:#26332d}
.make-row b{font-size:12px;color:#202923}
.make-toyota svg{stroke:#6e7772}.make-honda svg{stroke:#727a76}.make-mercedesbenz svg{stroke:#555f5a}.make-bmw svg{stroke:#4f5b55}.make-hyundai svg{stroke:#3d5b77}.make-kia svg{stroke:#7a1b24}.make-nissan svg{stroke:#555}.make-ford svg{stroke:#365b87}.make-chevrolet svg{stroke:#b88926}

/* Lower editorial panels use real photographic imagery. */
.trust-panels{padding-top:4px}
.trust-grid{gap:12px}
.trust-card{height:112px;border-radius:9px;padding:17px}
.trust-card:before{background:linear-gradient(90deg,rgba(4,18,13,.92),rgba(4,18,13,.24))}
.trust-card span{font-size:14px}.trust-card b{font-size:12px}.trust-card small{font-size:12px}
.trust-card.dealers{background-image:url('https://images.pexels.com/photos/5076489/pexels-photo-5076489.jpeg?auto=compress&cs=tinysrgb&w=1200');background-position:center 45%}
.trust-card.articles{background-image:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=82');background-position:center 58%}

.footer{padding:39px 0 56px;margin-top:14px}
.footer-grid{gap:24px}.footer h4{font-size:12px}.footer a,.footer p{font-size:12px}.footer-bottom{font-size:12px;margin-top:24px}

/* Tablet: keep the approved two-column card rhythm. */
@media(max-width:1180px){
  .container{width:calc(100% - 28px)}
  .hero-stage{min-height:565px;padding:50px 30px 24px;background-position:58% center}
  .hero-copy{width:65%}.hero-copy h1{font-size:50px}
  .vehicle-grid{grid-template-columns:repeat(2,1fr)}
  .featured-grid .vehicle-image{height:205px}
  .marketing-grid{grid-template-columns:1.25fr 1fr}
}

/* Mobile: preserve the exact reference interaction pattern and app-like bottom bar. */
@media(max-width:720px){
  .container{width:calc(100% - 18px)}
  .topbar{height:54px}
  .home-hero{padding-bottom:9px}
  .hero-stage{
    min-height:520px;
    border-radius:0;
    padding:128px 12px 15px;
    align-items:flex-end;
    background-image:linear-gradient(180deg,rgba(5,18,13,.08) 0%,rgba(5,18,13,.26) 25%,rgba(5,18,13,.82) 55%,rgba(5,18,13,.98) 80%),url('https://images.pexels.com/photos/19758141/pexels-photo-19758141/free-photo-of-black-toyota-land-cruiser-prado-on-road.jpeg?auto=compress&cs=tinysrgb&w=900');
    background-size:cover;
    background-position:center top;
  }
  .hero-copy{width:100%}.hero-copy h1{font-size:36px;line-height:.94}.hero-copy h2{font-size:13px}.hero-copy>p{display:none}
  .search-panel{margin-top:12px;border-radius:8px;padding:0 9px 9px}
  .search-tabs{margin:0 -9px 8px}.search-tabs button{padding:10px 18px;font-size:12px}
  .hero-search{grid-template-columns:1fr}.hero-search select,.hero-search-btn{min-height:38px;height:38px}.hero-search label span{display:none}
  .hero-trust,.hero-side-cta{display:none}
  .category-strip{padding:3px 0 11px}.category-row a{min-width:71px;padding:6px 2px}.category-icon{width:44px;height:27px}.category-icon svg{width:42px;height:26px}
  .section{padding:23px 0}.section-head h2{font-size:20px}
  .featured-grid{display:flex;overflow:auto;gap:10px;scroll-snap-type:x proximity}.featured-grid .vehicle-card{min-width:232px;scroll-snap-align:start}.featured-grid .vehicle-image{height:145px}
  .marketing-grid{grid-template-columns:1fr}.marketing-card{min-height:176px;padding:20px}.marketing-card h3{font-size:22px}
  .finance-photo-card{padding-right:47%}.finance-photo{width:53%;background-position:center 28%}
  .make-row{display:flex;overflow:auto}.make-row a{min-width:74px}.make-badge{width:46px;height:46px}.make-badge svg{width:42px;height:30px}
  .trust-grid{grid-template-columns:1fr}.trust-card{height:98px}
}