*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{background:#f3f4f6;color:#111}
a{text-decoration:none;color:inherit}
header{background:#000;padding:10px 5%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo img{height:110px;display:block}
.menu{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.menu a{color:white;font-weight:700;text-transform:uppercase;font-size:15px}
.menu a:hover{color:#e30613}
.add-btn,.red-btn{background:#e30613!important;color:white!important;padding:14px 22px;border-radius:4px;font-weight:800;border:none;cursor:pointer;display:inline-block}

.hero{height:420px;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1600&q=80');background-size:cover;background-position:center;display:flex;align-items:center;padding:0 5%;color:white}
.hero h1{font-size:54px;margin-bottom:18px;line-height:1.1}
.hero p{font-size:22px;color:#ddd;max-width:760px;line-height:1.5}

.main{display:grid;grid-template-columns:320px 1fr;gap:35px;padding:45px 5%}
.sidebar,.card,.form-box{background:white;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.sidebar-title{background:#e30613;color:white;padding:25px;font-size:26px;font-weight:900}
.filters{padding:25px}

select,input,textarea{width:100%;padding:14px;margin-bottom:14px;border:1px solid #ddd;background:#f1f3f6;font-size:16px;border-radius:4px}
textarea{min-height:140px;resize:vertical}

.range-title{display:flex;justify-content:space-between;margin:10px 0;font-weight:700}
.range{accent-color:#e30613}

.search-btn,.clear-btn,.submit-btn{
width:100%;
padding:16px;
border-radius:4px;
font-weight:900;
font-size:16px;
cursor:pointer;
margin-top:10px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

.search-btn,.submit-btn{
background:#e30613;
color:white;
border:none;
}

.clear-btn{
background:white;
color:#e30613;
border:2px solid #e30613;
}

.content-title{font-size:38px;margin-bottom:26px;font-weight:900}
.cars{display:flex;flex-direction:column;gap:28px}
.car-card{display:grid;grid-template-columns:320px 1fr 175px;background:white;box-shadow:0 10px 25px rgba(0,0,0,.08);overflow:hidden}
.car-image{height:240px;background-size:cover;background-position:center;background-color:#ddd}
.car-info{padding:26px}
.car-info h3{font-size:28px;margin-bottom:16px}

.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}
.meta small{display:block;color:#777;margin-bottom:5px}

.locked{background:#fff3f3;padding:15px;border:1px solid #ffc8c8;border-radius:5px}
.unlock{display:inline-block;margin-top:10px;background:#e30613;color:white;padding:12px 18px;border-radius:4px;font-weight:800}
.price{background:#e30613;color:white;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}

.form-box{max-width:900px;margin:45px auto;padding:30px;border-radius:8px}
.form-box h1{color:#e30613;margin-bottom:20px;font-size:42px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.full{grid-column:1/3}

.table{width:100%;border-collapse:collapse;background:white}
.table th,.table td{padding:14px;border-bottom:1px solid #ddd;text-align:left}

.notice{background:#fff3f3;border:1px solid #ffc8c8;padding:15px;margin-bottom:18px;border-radius:6px}
.action-link{color:#e30613;font-weight:bold}

footer{background:#000;color:#aaa;text-align:center;padding:40px 5%;margin-top:40px}

@media(max-width:1100px){
.main{grid-template-columns:1fr}
.car-card{grid-template-columns:1fr}
.price{padding:24px}
.grid{grid-template-columns:1fr}
.full{grid-column:1}
}

@media(max-width:700px){
.hero h1{font-size:34px}
.meta{grid-template-columns:1fr 1fr}
header{justify-content:center;gap:20px}
.logo img{height:85px}
}

.view-btn{display:inline-flex;align-items:center;justify-content:center;background:#e30613;color:white;padding:13px 20px;border-radius:4px;font-weight:900;margin-top:12px}
.listing-page{display:grid;grid-template-columns:1fr 330px;gap:35px;padding:45px 5%}
.listing-main,.contact-box{background:white;box-shadow:0 10px 25px rgba(0,0,0,.08);padding:28px;border-radius:8px}
.listing-main h1{font-size:42px;margin-bottom:24px}
.gallery{margin-bottom:25px}.main-photo{height:520px;background-size:cover;background-position:center;border-radius:8px;background-color:#ddd}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}.thumb{height:90px;background-size:cover;background-position:center;border-radius:6px;cursor:pointer;border:3px solid transparent}.thumb:hover{border-color:#e30613}
.listing-details{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.listing-details div{background:#f3f4f6;padding:15px;border-radius:6px}.listing-details small{display:block;color:#777;margin-bottom:6px}
.description-box{background:#f9fafb;padding:22px;border-radius:8px;line-height:1.7}.description-box h2{margin-bottom:12px}
.contact-box{height:max-content;position:sticky;top:20px}.price-big{background:#e30613;color:white;padding:22px;border-radius:6px;font-size:34px;font-weight:900;text-align:center;margin-bottom:18px}
@media(max-width:1000px){.listing-page{grid-template-columns:1fr}.main-photo{height:340px}.thumbs{grid-template-columns:repeat(3,1fr)}.listing-details{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.listing-main h1{font-size:30px}.main-photo{height:260px}.listing-details{grid-template-columns:1fr}}

.main-photo-wrapper{
    width:100%;
    max-width:900px;
    height:560px;
    margin:0 auto 18px auto;
    background:#f3f4f6;
    border-radius:10px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.main-photo-img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:10px;
    display:block;
}

.thumbs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:15px;
}

.thumb-img{
    width:130px;
    height:85px;
    object-fit:contain;
    border-radius:6px;
    cursor:pointer;
    border:3px solid transparent;
}

.thumb-img:hover{
    border-color:#e30613;
}

.listing-page{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 330px;
    gap:35px;
    padding:45px 5%;
}

.listing-main{
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    padding:28px;
    border-radius:8px;
    overflow:visible;
}

.main-photo-wrapper{
    width:100%;
    max-width:850px;
    height:520px;
    margin:0 auto 18px auto;
    background:#f3f4f6;
    border-radius:10px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.main-photo-img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:10px;
    display:block;
}

.gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.65);
    color:#fff;
    border:none;
    width:46px;
    height:46px;
    border-radius:50%;
    cursor:pointer;
    font-size:26px;
    z-index:10;
}

.gallery-arrow.left{
    left:15px;
}

.gallery-arrow.right{
    right:15px;
}

.thumbs{
    max-width:850px;
    margin:15px auto 0 auto;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
}

.thumb-img{
    width:130px;
    height:85px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
    border:3px solid transparent;
    background:#f3f4f6;
}

.thumb-img:hover{
    border-color:#e30613;
}

@media(max-width:1000px){
    .listing-page{
        grid-template-columns:1fr;
    }

    .main-photo-wrapper{
        height:380px;
        max-width:100%;
    }
}

@media(max-width:600px){
    .main-photo-wrapper{
        height:280px;
    }

    .thumb-img{
        width:95px;
        height:65px;
    }
}

.main-photo-wrapper{
    width:100% !important;
    max-width:850px !important;
    height:auto !important;
    min-height:420px !important;
    margin:0 auto 18px auto !important;
    background:#f3f4f6 !important;
    border-radius:10px !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
}

.main-photo-img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    display:block !important;
    border-radius:10px !important;
}

.thumb-img{
    width:130px !important;
    height:85px !important;
    object-fit:contain !important;
    background:#f3f4f6 !important;
    padding:4px !important;
}

.badge-top{
    background:#e30613;
    color:#fff;
    padding:6px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:700;
    margin-right:8px;
    display:inline-block;
}

.badge-vip{
    background:#FFD700;
    color:#111;
    padding:6px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:700;
    margin-right:8px;
    display:inline-block;
}

.vip-btn{
    background:#FFD700;
    color:#111;
    padding:8px 12px;
    border-radius:4px;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
    margin-right:5px;
}

.top-btn{
    background:#e30613;
    color:white;
    padding:8px 12px;
    border-radius:4px;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
}