@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
--ink:#07152f;
--ink2:#102a5b;
--ink3:#183b76;
--muted:#718096;
--gold:#f2b300;
--gold2:#ffc928;
--paper:#f4f7fb;
--paper2:#edf2f7;
--white:#fff;
--line:rgba(7,21,47,.1);
--line2:rgba(7,21,47,.16);
--shadow-xs:0 4px 14px rgba(7,21,47,.06);
--shadow-sm:0 10px 30px rgba(7,21,47,.08);
--shadow:0 18px 55px rgba(7,21,47,.13);
--shadow-lg:0 28px 80px rgba(7,21,47,.2);
--radius-sm:10px;
--radius:16px;
--radius-lg:24px;
--ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
scroll-behavior:smooth;
scroll-padding-top:90px;
}

body{
font-family:"Inter",sans-serif;
background:var(--paper);
color:var(--ink);
line-height:1.5;
font-size:14px;
overflow-x:hidden;
}

body.locked{overflow:hidden}

a{
color:inherit;
text-decoration:none;
}

button,input,select,textarea{
font:inherit;
}

button{
cursor:pointer;
border:0;
}

input,select,textarea{
font-size:16px!important;
}

img{
max-width:100%;
}

.wrap{
width:min(1200px,calc(100% - 40px));
margin:auto;
}

button,
a,
input,
select{
-webkit-tap-highlight-color:transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
outline:3px solid rgba(242,179,0,.35);
outline-offset:3px;
}

/* HEADER */
.header{
height:78px;
position:sticky;
top:0;
z-index:900;
background:rgba(255,255,255,.94);
border-bottom:1px solid var(--line);
backdrop-filter:blur(20px);
box-shadow:0 5px 25px rgba(7,21,47,.05);
}

.nav{
height:78px;
display:flex;
align-items:center;
gap:18px;
}

.brand{
display:flex;
align-items:center;
gap:9px;
font-weight:800;
line-height:.9;
flex-shrink:0;
transition:.25s var(--ease);
}

.brand:hover{
transform:translateY(-1px);
}

.brand img{
width:66px;
height:66px;
object-fit:contain;
}

.brand small,
.footer-logo small{
font-size:8px;
letter-spacing:.16em;
color:var(--muted);
}

.desktop-nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:14px;
margin-left:auto;
white-space:nowrap;
}

.desktop-nav a{
position:relative;
display:inline-flex;
align-items:center;
font-size:11px;
font-weight:700;
color:#536174;
white-space:nowrap;
transition:.2s;
}

.desktop-nav a:hover{
color:var(--ink);
transform:translateY(-1px);
}

.desktop-nav a:after{
content:"";
position:absolute;
left:4px;
right:4px;
bottom:-8px;
height:2px;
border-radius:999px;
background:var(--gold);
transform:scaleX(0);
transition:.2s var(--ease);
}

.desktop-nav a:hover:after{
transform:scaleX(1);
}

.desktop-nav a.active{color:var(--ink)}
.desktop-nav a.active:after{transform:scaleX(1)}
.mobile-menu a.active{color:var(--gold);font-weight:800}

.desktop-nav i{
color:var(--gold);
font-size:13px;
margin-right:5px;
}

.nav-actions{
display:flex;
gap:7px;
flex-shrink:0;
}

.whatsapp,
.nav-order,
.mpesa-nav{
height:42px;
padding:0 13px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
border-radius:12px;
font-size:10px;
font-weight:800;
white-space:nowrap;
transition:.22s var(--ease);
}

.whatsapp{
background:#fff;
border:1px solid var(--line);
box-shadow:var(--shadow-xs);
}

.whatsapp:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-sm);
border-color:rgba(31,164,99,.25);
}

.whatsapp i{
color:#1fa463;
font-size:14px;
}

.nav-order,
.mpesa-nav{
background:var(--gold);
color:var(--ink);
border:1px solid var(--gold);
box-shadow:0 8px 20px rgba(242,179,0,.2);
}

.nav-order:hover,
.mpesa-nav:hover{
background:var(--gold2);
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(242,179,0,.28);
}

.nav-order i,
.mpesa-nav i{
font-size:14px;
}

/* MENU BUTTON - FIXED */
.menu{
display:none;
width:44px;
height:44px;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
color:var(--ink);
box-shadow:var(--shadow-xs);
transition:.2s;
flex-shrink:0;
align-items:center;
justify-content:center;
position:relative;
}

.menu:hover{
transform:scale(1.04);
box-shadow:var(--shadow-sm);
}

.menu i{
font-size:18px;
}

/* MOBILE MENU - FIXED OVERLAY STYLE */
.mobile-menu{
display:none;
}

@media (max-width: 768px) {
  /* Header */
  .desktop-nav { display: none; }
  .menu { 
    display: flex !important; 
    margin-left: auto;
  }
  .nav-actions { display: none; }
  .header .nav { justify-content: space-between; }
  .brand img { width: 50px; height: 50px; }
  .brand span { font-size: 12px; }
  .brand small { font-size: 7px; }

  /* Mobile menu - FIXED: full width overlay */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 20px 24px;
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
    transform: translateY(-120%);
    transition: transform 0.35s var(--ease);
    z-index: 898;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    border-bottom: 3px solid var(--gold);
  }
  .mobile-menu.open { 
    transform: translateY(0); 
  }
  .mobile-menu a, .mobile-menu .mobile-mpesa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    transition: 0.2s;
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu a:hover, .mobile-menu a.active { color: var(--gold); }
  .mobile-menu .mobile-whatsapp {
    margin-top: 10px;
    background: #eaf7f0;
    border-radius: 12px;
    padding: 14px 16px;
    justify-content: center;
    color: #1fa463;
    font-weight: 800;
    border-bottom: none;
  }
  .mobile-menu .mobile-mpesa {
    border: none;
    background: var(--gold);
    border-radius: 12px;
    padding: 14px 16px;
    justify-content: center;
    color: var(--ink);
    font-weight: 800;
    margin-top: 10px;
    box-shadow: 0 8px 18px rgba(242,179,0,0.2);
  }

  /* Hero */
  .hero { min-height: auto; padding: 40px 0; }
  .hero-content { grid-template-columns: 1fr; gap: 30px; padding: 0; }
  .hero h1 { font-size: 2.8rem; line-height: 1.05; }
  .hero-intro { font-size: 13px; }
  .hero-actions { flex-wrap: wrap; }
  .btn { min-height: 44px; font-size: 10px; }
  .trust { gap: 8px; }
  .trust div { min-width: 70px; padding: 8px 10px; }
  .trust strong { font-size: 15px; }
  .trust span { font-size: 7px; }

  /* Vehicle Search */
  .vehicle-search { padding: 20px; }
  .search-top h3 { font-size: 18px; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .filter-grid label { font-size: 8px; }
  .filter-grid select { height: 40px; font-size: 13px; }

  /* Categories */
  .body-categories { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .body-category { height: 120px; }
  .body-category span { font-size: 12px; bottom: 22px; }
  .body-category small { font-size: 7px; bottom: 8px; }

  /* Collection layout - FIXED: cards side by side */
  .collection-layout { grid-template-columns: 1fr; gap: 0; }
  
  .collection-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 340px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
  }
  .collection-filter.open { transform: translateX(0); }
  .collection-filter .filter-head button { display: grid; }
  .collection-toolbar { display: flex; justify-content: space-between; align-items: center; }
  .collection-filter-btn { display: flex; align-items: center; gap: 6px; }
  
  /* FIXED: Cards side by side on tablet */
  .collection-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
  }
  .collection-image { height: 150px; }
  .collection-info { padding: 10px; }
  .collection-info h3 { font-size: 13px; }
  .collection-meta span { font-size: 7px; }
  .collection-price { font-size: 13px; }
  .collection-actions { margin-top: 8px; padding-top: 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2.2rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .vehicle-search { padding: 15px; }
  .filter-grid { grid-template-columns: 1fr; }
  .body-categories { grid-template-columns: 1fr 1fr; gap: 8px; }
  .body-category { height: 100px; }
  
  /* FIXED: Cards single column on mobile */
  .collection-grid { grid-template-columns: 1fr; }
  .collection-image { height: 180px; }
  .footer-grid { grid-template-columns: 1fr; }
  .mpesa-box { padding: 20px; }
  .mpesa-head h2 { font-size: 22px; }
  .mpesa-presets { grid-template-columns: 1fr 1fr; }
}

/* HERO */
.hero{
position:relative;
min-height:710px;
display:flex;
align-items:center;
overflow:hidden;
background:#07152f center/cover no-repeat;
transition:background-image .7s ease;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(7,21,47,.97),
rgba(7,21,47,.84) 48%,
rgba(7,21,47,.42)
);
}

.hero-pattern{
position:absolute;
inset:0;
opacity:.17;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:55px 55px;
}

.hero-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr .75fr;
gap:58px;
align-items:center;
padding:76px 0;
}

.hero-copy{
color:#fff;
}

.hero h1{
font-size:clamp(46px,6vw,78px);
line-height:.94;
letter-spacing:-.065em;
margin:20px 0;
}

.hero h1 strong,
.section-heading h2 strong{
color:var(--gold);
}

.hero-intro{
font-size:14px;
color:#e1e8f1;
max-width:620px;
}

.promise{
font-size:13px;
font-weight:800;
color:var(--gold);
margin:10px 0 26px;
}

.hero-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:30px;
}

.btn{
min-height:48px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:11px;
font-weight:800;
border-radius:14px;
transition:.25s var(--ease);
}

.btn.primary{
background:var(--gold);
color:var(--ink);
box-shadow:0 12px 30px rgba(242,179,0,.22);
}

.btn.primary:hover{
background:var(--gold2);
transform:translateY(-3px);
box-shadow:0 18px 35px rgba(242,179,0,.3);
}

.btn.glass{
color:#fff;
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.1);
backdrop-filter:blur(10px);
}

.btn.glass:hover{
background:rgba(255,255,255,.17);
transform:translateY(-3px);
}

.trust{
display:flex;
gap:9px;
flex-wrap:wrap;
}

.trust div{
min-width:105px;
padding:11px 13px;
border:1px solid rgba(255,255,255,.13);
border-radius:14px;
background:rgba(255,255,255,.07);
backdrop-filter:blur(8px);
transition:.2s;
}

.trust div:hover{
background:rgba(255,255,255,.12);
transform:translateY(-2px);
}

.trust strong{
display:block;
color:var(--gold);
font-size:19px;
line-height:1;
}

.trust span{
font-size:8px;
color:#d2d9e3;
}

/* HERO SEARCH */
.vehicle-search{
padding:25px;
border:1px solid rgba(255,255,255,.3);
border-radius:24px;
background:rgba(255,255,255,.97);
box-shadow:0 30px 90px rgba(0,0,0,.3);
}

.search-label{
font-size:9px;
letter-spacing:.16em;
font-weight:800;
color:var(--ink2);
}

.search-top h3{
font-size:22px;
margin:4px 0 17px;
}

.search-input{
height:50px;
display:flex;
align-items:center;
gap:10px;
padding:0 14px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
box-shadow:inset 0 1px 2px rgba(7,21,47,.02);
transition:.2s;
}

.search-input:focus-within{
border-color:rgba(242,179,0,.7);
box-shadow:0 0 0 4px rgba(242,179,0,.12);
}

.search-input i{
color:var(--gold);
}

.search-input input{
width:100%;
height:100%;
border:0;
outline:0;
background:transparent;
}

.popular{
display:flex;
gap:6px;
flex-wrap:wrap;
margin:13px 0 18px;
}

.popular span{
font-size:9px;
color:var(--muted);
font-weight:700;
align-self:center;
}

.popular a{
padding:6px 9px;
border-radius:999px;
background:#eef2f6;
font-size:9px;
font-weight:600;
transition:.2s;
}

.popular a:hover{
background:rgba(242,179,0,.16);
color:var(--ink);
transform:translateY(-1px);
}

.filter-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:9px;
}

.filter-grid label{
display:grid;
gap:5px;
font-size:9px;
font-weight:800;
color:#64748b;
}

.filter-grid select{
height:44px;
padding:0 11px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
color:var(--ink);
outline:0;
transition:.2s;
}

.filter-grid select:hover,
.filter-grid select:focus{
border-color:rgba(242,179,0,.6);
}

.search-btn{
width:100%;
height:48px;
border:0;
border-radius:14px;
background:var(--ink2);
color:#fff;
font-size:11px;
font-weight:800;
margin-top:12px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-shadow:0 10px 25px rgba(16,42,91,.18);
transition:.25s var(--ease);
}

.search-btn:hover{
background:var(--ink3);
transform:translateY(-2px);
box-shadow:0 15px 30px rgba(16,42,91,.25);
}

/* SECTIONS */
.section{
padding:12px 0;
}

.services{
background:#eaf0f7;
}

.featured{
background:linear-gradient(180deg,#f6f8fb,#e9eff6);
}

.section-heading{
text-align:center;
}

.section-heading h2{
font-size:clamp(31px,4vw,50px);
line-height:1;
letter-spacing:-.055em;
margin:10px 0;
}

.section-heading p{
color:var(--muted);
font-size:12px;
margin-bottom:2px;
}

/* SERVICES */
.services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:32px;
}

.service-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:19px;
min-height:190px;
display:flex;
flex-direction:column;
box-shadow:var(--shadow-xs);
transition:.25s var(--ease);
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow);
border-color:rgba(242,179,0,.35);
}

.service-icon,
.big-icon{
width:50px;
height:50px;
display:grid;
place-items:center;
background:rgba(242,179,0,.13);
color:var(--gold);
border-radius:16px;
font-size:19px;
}

.service-card h3{
margin:16px 0 6px;
font-size:16px;
}

.service-card p{
color:var(--muted);
font-size:11px;
line-height:1.65;
}

.card-link{
margin-top:auto;
color:var(--ink2);
font-size:10px;
font-weight:800;
transition:.2s;
}

.card-link:hover{
color:var(--gold);
}

/* CATEGORIES */
.category-section{
padding:20px 0;
background:#fff;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.category-heading{
text-align:center;
margin-bottom:23px;
}

.category-heading h2{
font-size:clamp(28px,4vw,42px);
line-height:1;
letter-spacing:-.05em;
}

.category-heading h2 strong{
color:var(--gold);
}

.body-categories{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
}

.body-category{
position:relative;
height:165px;
min-width:0;
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
background:#dde5ef;
color:#fff;
padding:0;
display:block;
cursor:pointer;
transition:.3s var(--ease);
box-shadow:var(--shadow-xs);
}

.body-category-image{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
}

.body-category-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .45s var(--ease);
}

.body-category-placeholder{
width:100%;
height:100%;
display:grid;
place-items:center;
background:linear-gradient(135deg,#dde5ef,#bfc9d7);
color:var(--gold);
font-size:30px;
}

.body-category:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(7,21,47,.03),
rgba(7,21,47,.25) 45%,
rgba(7,21,47,.94)
);
z-index:1;
}

.body-category span,
.body-category small{
position:absolute;
left:14px;
right:14px;
text-align:left;
z-index:2;
color:#fff;
}

.body-category span{
bottom:32px;
font-size:13px;
font-weight:800;
line-height:1.1;
text-shadow:0 2px 8px rgba(0,0,0,.4);
}

.body-category small{
bottom:14px;
font-size:8px;
color:#e8edf4;
}

.body-category:hover{
transform:translateY(-6px);
border-color:var(--gold);
box-shadow:0 20px 45px rgba(7,21,47,.2);
}

.body-category:hover .body-category-image img{
transform:scale(1.1);
}

.body-category.active{
border-color:var(--gold);
box-shadow:
0 0 0 3px rgba(242,179,0,.2),
0 20px 45px rgba(7,21,47,.18);
}

/* COLLECTION */
.collection-section{
padding-top:15px;
}

.collection-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}

.collection-filter-btn{
display:none;
height:44px;
padding:0 16px;
border:1px solid var(--line);
background:#fff;
border-radius:14px;
font-size:10px;
font-weight:800;
box-shadow:var(--shadow-xs);
transition:.2s;
}

.collection-filter-btn:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-sm);
}

/* CURRENCY */
.currency-toggle{
display:flex;
align-items:center;
padding:4px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
box-shadow:var(--shadow-xs);
overflow:hidden;
}

.currency-btn{
min-width:64px;
height:40px;
border:0;
border-radius:12px;
background:transparent;
color:var(--muted);
font-size:11px;
font-weight:800;
cursor:pointer;
transition:.25s var(--ease);
}

.currency-btn:hover:not(.active){
background:#f1f4f8;
color:var(--ink);
}

.currency-btn.active{
background:var(--ink2);
color:#fff;
box-shadow:0 6px 16px rgba(16,42,91,.22);
}

.collection-layout{
display:grid;
grid-template-columns:275px minmax(0,1fr);
gap:20px;
align-items:start;
}

/* FILTER PANEL */
.collection-filter{
background:#fff;
border:1px solid var(--line);
border-radius:22px;
padding:19px;
position:sticky;
top:96px;
max-height:calc(100vh - 115px);
overflow:auto;
box-shadow:var(--shadow-sm);
scrollbar-width:thin;
scrollbar-color:#aeb9c8 transparent;
}

.collection-filter::-webkit-scrollbar{
width:6px;
}

.collection-filter::-webkit-scrollbar-thumb{
background:#b6c1cf;
border-radius:999px;
}

.filter-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.filter-head span{
font-size:8px;
letter-spacing:.16em;
color:var(--ink2);
font-weight:800;
}

.filter-head h3{
font-size:18px;
margin-top:3px;
}

.filter-head button{
display:none;
border:1px solid var(--line);
background:#fff;
width:36px;
height:36px;
border-radius:12px;
transition:.2s;
}

.filter-head button:hover{
background:#f1f4f8;
}

.clear-filter{
width:100%;
height:38px;
margin:15px 0;
border:1px solid #dc354533;
background:#fff6f6;
color:#b4232f;
border-radius:12px;
font-size:9px;
font-weight:800;
transition:.2s;
}

.clear-filter:hover{
background:#ffe9e9;
transform:translateY(-1px);
}

.filter-group{
padding:16px 0;
border-top:1px solid var(--line);
}

.filter-group h4{
font-size:10px;
margin-bottom:11px;
display:flex;
align-items:center;
justify-content:space-between;
}

.range-values{
display:flex;
justify-content:space-between;
gap:8px;
color:var(--muted);
font-size:8px;
margin-bottom:9px;
}

.dual-range{
position:relative;
height:22px;
}

.dual-range input{
position:absolute;
left:0;
top:0;
width:100%;
height:22px;
pointer-events:none;
appearance:none;
background:transparent;
}

.dual-range input::-webkit-slider-runnable-track{
height:5px;
background:#dbe2eb;
border-radius:999px;
}

.dual-range input::-webkit-slider-thumb{
appearance:none;
pointer-events:auto;
width:17px;
height:17px;
border-radius:50%;
background:var(--gold);
border:3px solid #fff;
box-shadow:0 2px 8px rgba(7,21,47,.25);
margin-top:-6px;
cursor:pointer;
}

.dual-range input::-moz-range-track{
height:5px;
background:#dbe2eb;
border-radius:999px;
}

.dual-range input::-moz-range-thumb{
pointer-events:auto;
width:14px;
height:14px;
border:3px solid #fff;
border-radius:50%;
background:var(--gold);
box-shadow:0 2px 8px rgba(7,21,47,.25);
cursor:pointer;
}

.range-labels{
display:flex;
justify-content:space-between;
font-size:7px;
color:#929dae;
}

.check-list{
display:grid;
gap:4px;
}

.check-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px;
border-radius:10px;
color:var(--muted);
font-size:10px;
cursor:pointer;
transition:.18s;
}

.check-row:hover{
background:#f1f5f9;
color:var(--ink);
}

.check-row small{
color:#9aa6b6;
font-size:8px;
}

.check-row input{
accent-color:var(--ink2);
width:16px;
height:16px;
vertical-align:middle;
margin-right:5px;
}

.filter-none{
display:block;
padding:10px 8px;
color:#9aa6b6;
font-size:9px;
font-style:italic;
}

.condition-filter{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid rgba(15,23,42,.08)}
.filter-check{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(15,23,42,.08);border-radius:10px;background:#fff;cursor:pointer;font-size:.9rem;font-weight:500;color:#334155;transition:.2s}
.filter-check:hover{background:#f8fafc;border-color:#eab308;transform:translateX(2px)}
.filter-check input{width:16px;height:16px;margin:0;accent-color:#eab308;cursor:pointer}
.filter-check span{flex:1}
.filter-check:has(input:checked){background:#fffbeb;border-color:#eab308;color:#92400e}

.collection-filter select{
width:100%;
height:42px;
border:1px solid var(--line);
background:#f8fafc;
border-radius:12px;
padding:0 10px;
color:var(--ink);
outline:0;
transition:.2s;
}

.collection-filter select:hover,
.collection-filter select:focus{
border-color:rgba(242,179,0,.6);
background:#fff;
}

/* RESULTS */
.collection-results{
min-width:0;
}

.collection-results-head{
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:11px;
padding:0 2px;
}

.collection-results-head span{
font-size:10px;
color:var(--muted);
font-weight:700;
}

.collection-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.collection-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
cursor:pointer;
transition:.3s var(--ease);
position:relative;
box-shadow:var(--shadow-xs);
}

.collection-card:hover{
transform:translateY(-7px);
box-shadow:var(--shadow);
border-color:rgba(242,179,0,.3);
}

.collection-image{
height:195px;
background:#dde7f2;
position:relative;
overflow:hidden;
}

.collection-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s var(--ease);
}

.collection-card:hover .collection-image img{
transform:scale(1.06);
}

.collection-image .featured-badge,
.collection-image .status-badge{
position:absolute;
padding:6px 9px;
border-radius:999px;
font-size:7px;
font-weight:800;
backdrop-filter:blur(8px);
}

.collection-image .featured-badge{
top:10px;
right:10px;
background:var(--gold);
color:var(--ink);
}

.collection-image .status-badge{
left:10px;
top:10px;
background:rgba(255,255,255,.92);
color:var(--ink2);
text-transform:uppercase;
}

.collection-image .status-badge.reserved{
color:#b77900;
background:#fff7dc;
}

.collection-info{
padding:15px;
}

.collection-make{
font-size:9px;
color:var(--ink2);
font-weight:800;
margin-bottom:4px;
}

.collection-info h3{
font-size:15px;
line-height:1.25;
margin:0;
min-height:15px;
}

.collection-meta{
display:flex;
gap:5px;
flex-wrap:wrap;
margin:10px 0;
max-height:62px;
overflow:hidden;
}

.collection-meta span{
background:#f0f4f8;
color:#64748b;
padding:5px 7px;
border-radius:8px;
font-size:7px;
}

.collection-price{
display:flex;
align-items:baseline;
gap:7px;
color:var(--ink2);
font-size:15px;
font-weight:800;
word-break:break-word;
}

.collection-price small{
font-size:8px;
color:var(--muted);
font-weight:800;
}

.collection-actions{
display:flex;
align-items:center;
gap:7px;
margin-top:11px;
padding-top:10px;
border-top:1px solid var(--line);
}

.card-whatsapp{
width:36px;
height:34px;
display:grid;
place-items:center;
background:#eaf7f0;
color:#1fa463;
border-radius:11px;
font-size:16px;
transition:.2s;
}

.card-whatsapp:hover{
background:#d8f2e4;
transform:translateY(-2px);
}

.card-reserve{
height:34px;
flex:1;
display:flex;
align-items:center;
justify-content:center;
background:var(--gold);
color:var(--ink);
border-radius:11px;
font-size:8px;
font-weight:800;
transition:.2s;
}

.card-reserve:hover{
background:var(--gold2);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(242,179,0,.25);
}

.collection-card a{
position:relative;
z-index:4;
}

.collection-loading,
.collection-empty{
text-align:center;
padding:55px 15px;
color:var(--muted);
font-size:11px;
}

.collection-loading i{
color:var(--gold);
margin-right:6px;
}

.collection-empty{
display:none;
}

.collection-empty>i{
width:52px;
height:52px;
display:grid;
place-items:center;
background:#eef2f6;
color:var(--gold);
margin:0 auto 13px;
font-size:20px;
border-radius:18px;
}

.collection-empty h3{
color:var(--ink);
font-size:16px;
margin-bottom:5px;
}

.collection-empty p{
font-size:10px;
margin-bottom:15px;
}

.collection-card.hidden-limit{
display:none;
}

.collection-view-all{
display:flex;
justify-content:center;
margin-top:28px;
padding-bottom:10px;
}

.collection-view-all button{
height:46px;
padding:0 22px;
border-radius:14px;
background:#fff;
border:1px solid var(--line);
color:var(--ink);
font-size:10px;
font-weight:800;
box-shadow:var(--shadow-xs);
transition:.25s;
}

.collection-view-all button:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-sm);
border-color:rgba(242,179,0,.4);
}

/* EMPTY IMAGE */
.no-image{
width:100%;
height:100%;
display:grid;
place-items:center;
background:linear-gradient(135deg,#dce5ef,#bcc8d7);
color:var(--gold);
font-size:32px;
}

/* FOOTER */
footer{
background:#07152f;
color:#dce5f0;
padding:55px 30px 20px;
}

.footer-grid{
display:grid;
grid-template-columns:1.45fr 1fr 1fr 1.1fr;
gap:26px;
}

.footer-brand{
max-width:330px;
}

.footer-logo{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
line-height:.9;
margin-bottom:16px;
}

.footer-logo img{
width:70px;
height:70px;
object-fit:contain;
}

.footer-brand p{
font-size:11px;
color:#a4adba;
line-height:1.7;
margin-bottom:9px;
}

.footer-tagline{
color:var(--gold)!important;
font-weight:800;
}

.socials{
display:flex;
gap:9px;
margin-top:17px;
}

.socials a{
width:43px;
height:43px;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
display:grid;
place-items:center;
font-size:15px;
transition:.25s;
}

.socials a:hover{
background:var(--gold);
color:var(--ink);
border-color:var(--gold);
transform:translateY(-3px);
}

.footer-grid h4{
font-size:13px;
letter-spacing:.14em;
color:var(--gold);
margin-bottom:17px;
}

.footer-grid>div:not(.footer-brand){
display:flex;
flex-direction:column;
align-items:flex-start;
}

.footer-grid>div>a,
.footer-grid>div>span{
display:flex;
align-items:center;
gap:9px;
margin-bottom:11px;
color:#b8c1ce;
font-size:11px;
line-height:1.45;
transition:.2s;
}

.footer-grid>div>a:hover{
color:#fff;
transform:translateX(3px);
}

.footer-grid i{
width:16px;
color:var(--gold);
text-align:center;
font-size:13px;
}

.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:35px;
color:#9ca7b7;
font-size:11px;
}

.footer-bottom a{
color:var(--gold);
}

/* LOADER */
#loader{
position:fixed;
inset:0;
z-index:1500;
display:grid;
place-content:center;
text-align:center;
background:#07152f;
transition:.45s;
}

#loader.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loader-mark{
display:flex;
justify-content:center;
gap:6px;
}

.loader-mark span{
width:8px;
height:8px;
border-radius:50%;
background:var(--gold);
animation:load .7s infinite alternate;
}

.loader-mark span:nth-child(2){
animation-delay:.15s;
}

.loader-mark span:nth-child(3){
animation-delay:.3s;
}

.loader-mark+p{
margin-top:16px;
color:#cbd4e0;
font-size:9px;
letter-spacing:.2em;
font-weight:800;
}

@keyframes load{
to{
transform:translateY(-9px);
opacity:.4;
}
}

/* COOKIE */
.cookie-banner{
position:fixed;
left:18px;
bottom:18px;
z-index:1000;
width:min(420px,calc(100% - 36px));
padding:19px;
background:#fff;
border:1px solid var(--line);
border-radius:20px;
box-shadow:var(--shadow-lg);
display:none;
}

.cookie-banner.show{
display:block;
animation:cookieIn .35s var(--ease);
}

@keyframes cookieIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:none;
}
}

.cookie-banner strong{
font-size:14px;
}

.cookie-banner p{
font-size:10px;
color:var(--muted);
line-height:1.6;
margin:7px 0 13px;
}

.cookie-actions{
display:flex;
gap:8px;
}

.cookie-actions button{
height:40px;
padding:0 15px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
font-size:10px;
font-weight:800;
transition:.2s;
}

.cookie-actions button:hover{
transform:translateY(-2px);
}

.cookie-actions #cookieAccept{
background:var(--gold);
border-color:var(--gold);
color:var(--ink);
}

/* MOBILE MPESA */
.mobile-mpesa{
height:44px;
margin:5px 0;
border:0;
border-radius:13px;
background:var(--gold);
color:var(--ink);
font-size:13px;
font-weight:800;
text-align:left;
padding:0 12px;
box-shadow:0 8px 18px rgba(242,179,0,.2);
}

.mobile-mpesa i{
width:19px;
color:var(--ink);
font-size:14px;
}

/* MPESA MODAL */
.mpesa-modal{
position:fixed;
inset:0;
z-index:1300;
display:none;
align-items:center;
justify-content:center;
padding:16px;
}

.mpesa-modal.open{
display:flex;
}

.mpesa-modal-bg{
position:absolute;
inset:0;
background:rgba(7,21,47,.82);
backdrop-filter:blur(9px);
}

.mpesa-box{
position:relative;
z-index:2;
width:min(500px,100%);
max-height:94vh;
overflow:auto;
background:#fff;
border:1px solid var(--line);
border-radius:24px;
box-shadow:0 35px 100px rgba(0,0,0,.4);
padding:30px;
animation:modalIn .3s var(--ease);
}

@keyframes modalIn{
from{
opacity:0;
transform:translateY(18px) scale(.98);
}
to{
opacity:1;
transform:none;
}
}

.mpesa-close{
position:absolute;
right:15px;
top:15px;
width:38px;
height:38px;
border:0;
border-radius:13px;
background:var(--ink);
color:#fff;
transition:.2s;
}

.mpesa-close:hover{
transform:rotate(90deg);
background:var(--ink2);
}

.mpesa-head{
border-bottom:1px solid var(--line);
padding:0 48px 21px 0;
}

.mpesa-head>span{
font-size:9px;
font-weight:800;
letter-spacing:.16em;
color:var(--muted);
}

.mpesa-head h2{
font-size:26px;
line-height:1.1;
margin-top:8px;
}

.mpesa-head h2 strong{
color:var(--gold);
}

.mpesa-vehicle{
padding:17px;
border-radius:16px;
background:#f3f6f9;
border:1px solid var(--line);
margin:20px 0;
}

.mpesa-vehicle small{
display:block;
color:var(--muted);
font-size:8px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em;
}

.mpesa-vehicle strong{
display:block;
font-size:14px;
margin-top:6px;
}

.mpesa-box label{
display:flex;
flex-direction:column;
gap:7px;
font-size:9px;
font-weight:800;
color:var(--ink);
margin-bottom:13px;
}

.mpesa-amount{
height:50px;
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
overflow:hidden;
}

.mpesa-amount span{
padding:0 13px;
height:100%;
display:flex;
align-items:center;
color:var(--muted);
font-size:10px;
font-weight:800;
border-right:1px solid var(--line);
}

.mpesa-amount input{
width:100%;
height:100%;
border:0;
outline:0;
padding:0 13px;
font-weight:800;
color:var(--ink);
}

.mpesa-box label small{
font-size:8px;
color:var(--muted);
font-weight:500;
}

.mpesa-presets{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:5px 0 21px;
}

.mpesa-presets button{
height:40px;
border:1px solid var(--line);
background:#f5f7fa;
border-radius:12px;
font-size:9px;
font-weight:800;
color:var(--ink);
transition:.2s;
}

.mpesa-presets button:hover,
.mpesa-presets button.active{
background:var(--gold);
border-color:var(--gold);
transform:translateY(-2px);
}

.mpesa-steps{
display:grid;
gap:9px;
margin:0 0 21px;
}

.mpesa-steps div{
display:flex;
align-items:center;
gap:10px;
font-size:9px;
color:var(--muted);
line-height:1.45;
}

.mpesa-steps b{
width:27px;
height:27px;
flex:0 0 27px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--ink);
color:var(--gold);
font-size:10px;
}

.mpesa-phone{
height:50px;
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
overflow:hidden;
}

.mpesa-phone span{
height:100%;
display:flex;
align-items:center;
padding:0 11px;
border-right:1px solid var(--line);
font-size:10px;
font-weight:800;
white-space:nowrap;
}

.mpesa-phone input{
width:100%;
height:100%;
border:0;
outline:0;
padding:0 11px;
}

.mpesa-submit{
width:100%;
height:50px;
border:0;
border-radius:14px;
background:var(--gold);
color:var(--ink);
font-size:11px;
font-weight:800;
box-shadow:0 10px 24px rgba(242,179,0,.22);
transition:.2s;
}

.mpesa-submit:hover:not(:disabled){
background:var(--gold2);
transform:translateY(-2px);
}

.mpesa-submit:disabled{
opacity:.55;
cursor:not-allowed;
}

.mpesa-status{
min-height:18px;
text-align:center;
font-size:9px;
font-weight:700;
color:var(--ink2);
margin:11px 0 0;
}

.mpesa-status.error{
color:#b4232f;
}

.mpesa-status.success{
color:#16834b;
}

.mpesa-secure{
margin-top:15px;
padding-top:15px;
border-top:1px solid var(--line);
font-size:8px;
color:var(--muted);
line-height:1.6;
text-align:center;
}

/* ====== IMPROVED MOBILE STYLES ====== */

/* General small screen adjustments */
@media (max-width: 768px) {
  /* Adjust header height if needed */
  .header { height: 68px; }
  .nav { height: 68px; gap: 12px; }
  .brand img { width: 48px; height: 48px; }
  .brand span { font-size: 11px; }
  .brand small { font-size: 6px; }

  /* Mobile menu overlay – full width, smooth */
  .mobile-menu {
    top: 68px;
    transform: translateY(-120%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 999;
  }
  .mobile-menu.open { transform: translateY(0); }

  /* Hero adjustments */
  .hero { min-height: auto; padding: 30px 0; }
  .hero-content { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .hero h1 { font-size: 2.6rem; }
  .hero-intro { font-size: 12px; }
  .hero-actions { gap: 8px; }
  .btn { min-height: 42px; padding: 0 15px; font-size: 10px; }
  .trust div { min-width: 80px; padding: 8px; }
  .trust strong { font-size: 16px; }
  .trust span { font-size: 7px; }

  /* Search box */
  .vehicle-search { padding: 18px; border-radius: 18px; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Categories – two columns */
  .body-categories { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .body-category { height: 130px; }

  /* Collection layout – filter as overlay */
  .collection-layout { grid-template-columns: 1fr; gap: 0; }
  .collection-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  .collection-filter.open { transform: translateX(0); }
  .collection-filter .filter-head button { display: grid; place-items: center; }
  .collection-toolbar { display: flex; justify-content: space-between; align-items: center; }
  .collection-filter-btn { display: flex; align-items: center; gap: 6px; }

  /* ====== CARD GRID: TWO COLUMNS ON ALL MOBILE ====== */
  .collection-grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
    gap: 10px;
  }
  .collection-card { border-radius: 14px; }
  .collection-image { height: 130px; } /* Reduced height for mobile */
  .collection-info { padding: 8px; }
  .collection-make { font-size: 7px; }
  .collection-info h3 { font-size: 12px; }
  .collection-meta { gap: 3px; margin: 6px 0; }
  .collection-meta span { font-size: 6px; padding: 3px 5px; border-radius: 6px; }
  .collection-price { font-size: 12px; gap: 4px; }
  .collection-price small { font-size: 7px; }
  .collection-actions { margin-top: 7px; padding-top: 7px; gap: 5px; }
  .card-whatsapp { width: 30px; height: 28px; font-size: 13px; border-radius: 8px; }
  .card-reserve { height: 28px; font-size: 7px; border-radius: 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { max-width: 100%; }
}

/* Extra small phones (<= 480px) */
@media (max-width: 480px) {
  .hero h1 { font-size: 2.2rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .filter-grid { grid-template-columns: 1fr; } /* Search filters stack */
  .body-category { height: 110px; }
  .body-category span { font-size: 11px; bottom: 20px; }
  .body-category small { font-size: 6px; bottom: 7px; }

  /* Keep 2-column cards but even smaller */
  .collection-grid { gap: 7px; }
  .collection-image { height: 110px; }
  .collection-info { padding: 6px; }
  .collection-info h3 { font-size: 11px; }
  .collection-meta span { font-size: 5px; }
  .collection-price { font-size: 11px; }
  .card-whatsapp { width: 26px; height: 24px; font-size: 11px; }
  .card-reserve { height: 24px; font-size: 6px; }

  .mpesa-box { padding: 18px; }
  .mpesa-head h2 { font-size: 20px; }
  .mpesa-presets { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Ensure filter overlay has a backdrop */
.collection-filter::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 21, 47, 0.5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.collection-filter.open::before {
  opacity: 1;
}