.container {
    max-width: 1280px;
    margin: 0 50px;
    padding: 0 0px;
}




/* Navbar Main */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: white;
    z-index: 999;
    border-bottom: 1px solid #eee;
}

/* Container */
.nav-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #8b000f;
    /* اللون الأحمر بنفس تصميمك */
}

.nav-logo img {
    height: 35px;
}

/* Menu Links */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-size: 15px;
    transition: 0.2s;
}

.nav-links a:hover {
    color: #8b000f;
}

/* Button */
.nav-btn {
    background: #8b000f;
    padding: 10px 22px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.nav-btn:hover {
    opacity: 0.9;
}




/* ========== HERO SECTION ========== */

.hero {
    width: 100%;
    padding: 50px;
    background: #F6F6F6;
    border-radius: 20px;
    margin-top: 35px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* LEFT SIDE ---------------------------- */

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-title {
    font-size: 40px;
    font-weight: 700;
    color: #6D0019;
    /* الأحمر الغامق */
    line-height: 1.3;
}

.hero-subtitle {
    font-size: 14px;
    color: #555;
    max-width: 400px;
}

.hero-note {
    font-size: 12px;
    color: #555;
    margin-top: 5px;
}

/* SEARCH BAR ---------------------------- */

.hero-search {
    background: white;
    display: grid;
    grid-template-columns: 50px 1fr 2px 120px 70px;
    align-items: center;

    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid #ddd;
}

.search-icon img {
    width: 18px;
    margin-right: 4px;
}

.search-input,
.zip-input {
    border: none;
    outline: none;
    font-size: 14px;
}

.vertical-divider {
    width: 2px;
    height: 25px;
    background: #ddd;
    margin: 0 auto;
}

.search-btn {
    background: #6D0019;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

/* RIGHT SIDE ---------------------------- */

.hero-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-text {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.hero-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}

.tag {
    background: #6D0019;
    padding: 5px 12px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
}

.hero-image {
    width: 80%;
    max-width: 380px;
}

.hero-arrows {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.arrow-btn {
    background: #6D0019;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

/* RESPONSIVE ---------------------------- */

@media(max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
    }
}





/* --- Base layout --- */
.services-section {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 2fr 1.1fr;
    gap: 20px;
    align-items: start;
    font-family: "Inter", system-ui, Arial, sans-serif;
}

/* --- LEFT SECTION --- */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
}

/* CARD = COLUMN LAYOUT — flex children share row width (fill gaps) */
.service-card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    background: #f2f2f2;
    border-radius: 20px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    border: none;
    min-height: 112px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.service-card:focus {
    outline: none;
}

.service-card:focus-visible {
    outline: 2px solid #8A0A1E;
    outline-offset: 3px;
}

/* ICONS (SVG) */
.service-card .icon {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    filter: none;
}

/* Title — inactive: dark, bold */
.service-card .title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

/* Active card — burgundy, white label, white icon */
.service-card.active {
    background: #8A0A1E;
    color: #fff;
    box-shadow: 0 4px 14px rgba(138, 10, 30, 0.35);
}

.service-card.active .title {
    color: #fff;
    font-weight: 700;
}

.service-card.active .icon {
    filter: brightness(0) saturate(100%) invert(1);
}

/* --- RIGHT SECTION: How it Works --- */
.how-works {
    background: #37383A;
    padding: 30px;
    border-radius: 20px;
    color: #fff;
}

.how-title {
    font-size: 24px;
    margin-bottom: 25px;
}

/* steps */
.steps {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* LAYOUT: left | dot | right */
.step {
    display: flex;
    align-items: center;
    gap: 20px;
}

.step .left {
    flex: 0 0 36%;
    text-align: right;
    /* يمين */
}

.step .right {
    flex: 1;
    text-align: left;
    /* يسار */
}

/* TITLE */
.step-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* DESCRIPTION */
.step-sub {
    margin: 0;
    font-size: 14px;
    color: #DADADA;
}

/* DOT CENTER BLOCK */
.dot-wrapper {
    flex: 0 0 50px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* DOT STYLE */
.dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #D2D2D2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SVG INSIDE DOT */
.dot-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.end {
    background-color: green;
}

/* --- Responsive --- */
@media (max-width: 1000px) {
    .services-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .services-grid .row {
        flex-direction: column;
    }

    .services-grid .service-card {
        flex: 1 1 auto;
        width: 100%;
    }
}

.steps {
    position: relative;
}

.steps::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 0;
    left: calc(40% + 28px);
    /* يضع الخط تحت منتصف الدوائر تمامًا */
    width: 2px;
    height: 200px;
    background: #5D5D5D;
    /* رمادي غامق حسب التصميم */
    z-index: 0;
}

/* //////////////////////////////////////// */


.vehicles-section {
    width: 100%;
    margin-top: 40px;
    padding: 40px 40px 0 40px;
    /* ← padding-top: 40px */
    font-family: "Inter", Arial, sans-serif;
}

/* --------- FILTER HEADER --------- */

.vehicle-filters {
    text-align: center;
    margin-bottom: 30px;
}

.vehicle-filters h4 {
    color: #8a8a8a;
    margin-bottom: 5px;
}

.vehicle-filters h2 {
    color: #8A0A1E;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.filters-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.filters-row select {
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    outline: none;
}

.code-btn {
    padding: 10px 14px;
    background: #8A0A1E;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.code-btn img {
    width: 22px;
    filter: invert(1);
}

/* --------- VEHICLES GRID --------- */

.vehicles-grid {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* --------- CARD --------- */

.vehicle-card {
    box-sizing: border-box;
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.vehicle-card,
a.vehicle-card:visited {
    text-decoration: none;
    color: inherit;
}

a.vehicle-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

a.vehicle-card .car-title {
    color: #222;
}

.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #8A0A1E;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
}

.vehicle-img {
    width: 100%;
    height: 128px;
    object-fit: contain;
    margin-bottom: 8px;
}

.car-title {
    font-size: 14px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.car-info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid #ececec;
}

.price {
    color: #8A0A1E;
    font-weight: 600;
}

/* --------- RESPONSIVE --------- */

@media (max-width: 768px) {
    .vehicles-section {
        padding: 0 20px;
    }

    .filters-row {
        flex-wrap: wrap;
    }
}




/*/////////////////////////////////////////////////////////// */
/* 
.garage-section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    text-align: center;
}

.garage-title {
    font-size: 28px;
    font-weight: 700;
    color: #800015; 
    margin-bottom: 10px;
}

.garage-subtitle {
    font-size: 14px;
    color: #6b6b6b;
    line-height: 1.4;
    margin-bottom: 35px;
}

.garage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.garage-grid img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 18px;
}
 */
.garage-section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.garage-title {
    font-size: 28px;
    font-weight: 700;
    color: #800015;
    margin-bottom: 10px;
}

.garage-subtitle {
    font-size: 14px;
    color: #6b6b6b;
    margin-bottom: 35px;
    line-height: 1.4;
}

.garage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.garage-item {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    position: relative;
    display: block;
    /* ← تحكم بشكل الإطار */
}

.garage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scoped to garage grid on home page only */
.garage-section .garage-grid .garage-item .garage-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    padding: 20px 15px 15px;
    border-radius: 0 0 18px 18px;
}

/* Scoped to garage grid on home page only */
.garage-section .garage-grid .garage-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
    word-wrap: break-word;
}

.garage-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.garage-link:hover {
    transform: translateY(-2px);
}

.garage-link:hover .garage-name {
    color: #ffffff;
}

/* ============================= */
/* 🔥 هنا التحكم الفردي بكل صورة */
/* ============================= */

/* الصورة 1 */
.item-1 {
    height: 200px;
}

/* الصورة 2 — الطويلة */
.item-2 {
    height: 200px;
}

/* الصورة 3 */
.item-3 {
    height: 200px;
}

/* الصورة 4 */
.item-4 {
    height: 200px;
}

/* الصورة 5 — القصيرة */
.item-5 {
    height: 200px;
}

/* الصورة 6 */
.item-6 {
    height: 200px;
}





/* ////////////////////////////////////////////////////////////////////// */

.spare-section {
    width: 100%;
    max-width: 1300px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.spare-title {
    font-size: 32px;
    font-weight: bold;
    color: #c5576f;
    margin-bottom: 12px;
}

.spare-desc {
    width: 80%;
    margin: 0 auto 30px auto;
    color: #6b6b6b;
    line-height: 1.6;
}

.filters button {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
}

.filters .active {
    background: #800015;
    color: white;
}

.divider {
    margin: 25px auto 35px;
    border: none;
    height: 1px;
    background: #eee;
}

.products-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.product-card {
    box-sizing: border-box;
    width: calc(25% - 9px);
    min-width: 140px;
    max-width: 220px;
    flex: 1 1 160px;
    text-align: left;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.product-card,
a.product-card:visited {
    text-decoration: none;
    color: inherit;
}

a.product-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

a.product-card .product-name {
    color: #222;
    margin-top: 8px;
}

.product-img {
    background: #e5b4bb;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    width: auto;
    height: 82%;
    object-fit: contain;
}

.product-name {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.3;
}

.product-brand {
    font-size: 12px;
    color: #777;
    margin: 3px 0 6px;
}

.price {
    color: #800015;
    font-weight: bold;
}

/* ///////////////////////////////////////////////// */
/* Trusted Section */
.trusted-section {
    padding: 60px 10%;
    text-align: center;
}

.trusted-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #222;
}

.trusted-logos {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.trusted-logos img {
    width: 110px;
    opacity: 0.85;
}

/* Tagline */
.trusted-right {
    margin-top: 20px;
}

.tagline-title {
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #b5252a;
    margin-bottom: 8px;
}

.tagline-text {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}


/* Clients Section */
.clients-section {
    padding: 60px 10%;
}

.clients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clients-text h2 {
    font-size: 30px;
    font-weight: 700;
    color: #8A0A1E;
}

.clients-text p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

.clients-buttons {
    display: flex;
    gap: 12px;
}

.btn-primary {
    background: #b5252a;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-secondary {
    background: #fff;
    color: #b5252a;
    border: 1px solid #b5252a;
    padding: 12px 25px;
    border-radius: 6px;
    cursor: pointer;
}

/* Testimonials */
.testimonials {
    display: flex;
    gap: 25px;
    margin-top: 40px;
}

/* Card styles - Only for home/listing pages, NOT detail pages */
.vehicles-section .card,
.spare-section .card,
.services-section .card {
    background: #37383A;
    color: #fff;
    padding: 25px;
    width: 32%;
    border-radius: 12px;
}

.stars {
    color: #ff2a2a;
    font-size: 22px;
    margin-bottom: 15px;
}

.star {
    cursor: pointer;
}

.card p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.card h4 {
    margin-bottom: 3px;
}

.card span {
    color: #bbb;
    font-size: 13px;
}





.garages-page {
    margin-top: 40px;
}

/* Top Filter */
.garage-top-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.garage-top-filter .filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.garage-top-filter select,
.garage-top-filter input {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    font-size: 14px;
}

.garage-top-filter input {
    width: 200px;
}

.primary-btn {
    background: #8A0A1E;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* Layout */
.garage-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 25px;
}


/* Sidebar Filters */

.garage-filters {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 4px solid #8A0A1E;
    /* مقطع على اليسار */
    width: 260px;
    /* أعرض شوي */
    margin-right: 30px;
    /* مسافة من شبكة الصور */
}

/* كل مجموعة فلتر */
.garage-filters .filter-group {
    display: flex;
    flex-direction: column;
    /* زر Reset فوق الخانة */
    gap: 8px;
}

/* زر Reset يظهر كنص أحمر عادي */
.garage-filters .filter-group a {
    font-size: 12px;
    color: #8A0A1E;
    /* أحمر */
    text-decoration: none;
    /* إزالة underline */
    cursor: pointer;
    /* يبقى قابل للنقر */
    align-self: flex-end;
    /* فوق وعلى اليمين */
    transition: color 0.2s;
}

/* تأثير عند المرور بالفأرة */
.garage-filters .filter-group a:hover {
    color: #b80f2b;
    /* أحمر أغمق عند hover */
}


/* تصغير حجم خط خانة Location */
.select-wrapper select {
    font-size: 13px;
    /* صغرنا الحجم شوي */
    padding: 12px 35px 12px 35px;
    /* حافظنا على مساحة الأيقونة والسهم */
    width: 100%;
    border-radius: 6px;
    border: none;
    background-color: #f0f0f0;
    color: #222;
    appearance: none;
}


/* نصوص و labels */
.garage-filters label,
.garage-filters span {
    font-size: 14px;
    font-weight: 600;
}

/* wrapper لكل select */
.select-wrapper {
    position: relative;
    width: 100%;
}



/* نقطة خضراء على يسار النص في بعض الخانات */
.select-wrapper .dot-icon {
    position: absolute;
    left: 10px;
    /* على يسار الخانة */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #7ed957;
    /* أخضر فاتح */
    border-radius: 50%;
    pointer-events: none;
    /* لتظل غير قابلة للنقر */
}




/* select لجميع الفلاتر */
.garage-filters select {
    width: 100%;
    padding: 12px 35px 12px 35px;
    /* مساحة للأيقونة والسهم */
    border-radius: 6px;
    border: none;
    background-color: #f0f0f0;
    /* رمادي فاتح */
    outline: none;
    font-size: 14px;
    color: #222;
    /* نص واضح */
    appearance: none;
    /* إزالة السهم الافتراضي */
}

/* أيقونة Location على اليسار داخل select */
.select-wrapper .location-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
    pointer-events: none;
}

/* السهم الرمادي على اليمين لكل select */
.select-wrapper .arrow-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
    pointer-events: none;
}

/* Responsive للشاشات الصغيرة */
@media(max-width: 1000px) {
    .garage-filters {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}




.garage-top-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ccc;
    /* الإطار */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* ظل خفيف من الأسفل */
    margin-bottom: 30px;
}

.garage-top-filter .filter-icon {
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
}

.garage-top-filter .filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.garage-top-filter select,
.garage-top-filter input,
.garage-top-filter .primary-btn {
    padding: 8px 12px;
    border: 1px solid #ccc;
    /* إطار داخلي لكل زر */
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
}

/* عند الضغط على أي زر أو input أو select */
.garage-top-filter select:focus,
.garage-top-filter input:focus,
.garage-top-filter .primary-btn:active {
    border-color: #8A0A1E;
    background-color: #8A0A1E;
    color: white;
}




.garage-top-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    /* يضيف مسافة بسيطة من الهيدر */
    max-width: 1200px;
    /* ثابت ليكون مرتب وسط الصفحة */
}




.garage-top-filter {
    max-width: 900px;
    /* خليه أقصر */
    margin: 0 auto 30px;
    /* توسيط + مسافة من تحت */
    padding: 15px 20px;
    /* توازن داخلي */
}





.search-wrapper {
    position: relative;
    display: inline-block;
}

.search-wrapper input {
    padding-left: 30px;
    /* مساحة للأيقونة داخل الخانة */
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    height: 35px;
    font-size: 14px;
}

.search-wrapper input:focus {
    border-color: #8A0A1E;
    /* عند التركيز يصبح الإطار أحمر */
    box-shadow: none;
    /* إزالة اللون الأزرق الافتراضي */
}

.search-wrapper .search-icon {
    position: absolute;
    left: 8px;
    /* داخل الخانة من الجهة اليسرى */
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
    /* لون رمادي */
    pointer-events: none;
    /* غير قابلة للنقر */
}





/* Listing grids: sidebar pages + related grids on detail pages (not home .garage-section) */
.garage-content .garage-grid,
.section-spacing .garage-grid {
    display: grid;
    /* auto-fit collapses empty tracks; auto-fill keeps them and stretches gaps */
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
    align-items: stretch;
}

@media (max-width: 600px) {
    .garage-content .garage-grid,
    .section-spacing .garage-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }
}

/* Uniform compact listing cards (entire card is often an <a>) */
.garage-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    /*height: 288px;*/
    min-height: 288px;
    max-height: 288px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.garage-card,
a.garage-card:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.garage-card:focus-visible {
    outline: 2px solid #8A0A1E;
    outline-offset: 2px;
}

.garage-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.garage-card .badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #8A0A1E;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(138, 10, 30, 0.35);
}

.garage-card img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 0 6px 0;
    flex-shrink: 0;
}

.garage-card h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0 4px;
    color: #222;
    line-height: 1.3;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.garage-card > p {
    font-size: 12px;
    color: #555;
    margin: 2px 0 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.garage-card > p.price {
    font-size: 12px;
    font-weight: 700;
    color: #8A0A1E;
    margin-top: 2px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.garage-card button {
    margin-top: auto;
    width: 100%;
    background: #8A0A1E;
    color: #fff;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

/* Sidebar + tile grid: prevent 1fr column blowout / overlapping cards */
.media-tile-page .garage-content {
    min-width: 0;
}

/* Listing column must not stretch to sidebar height — otherwise grid rows share extra space (huge row gaps). */
.media-tile-page .garage-content > .garage-grid {
    align-self: start;
}

/* Media tile listings (Explore + listing pages + similar sections + home blocks) */
/* #sparePartsGrid: home spare; #sparePartsListingGrid: /SpareParts page; .similar-tiles-flex: detail similar rows */
.media-tile-page .media-tile-grid:not(#sparePartsGrid):not(#sparePartsListingGrid):not(.similar-tiles-flex),
.media-tile-page .garage-content .garage-grid.media-tile-grid,
section.section-spacing.media-tile-page .garage-grid.media-tile-grid:not(.similar-tiles-flex),
.garage-section.media-tile-page .garage-grid.media-tile-grid,
.vehicles-section.media-tile-page #vehiclesGrid.media-tile-grid {
    display: grid;
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
    align-content: start;
}

.media-tile-page .garage-content .garage-grid.media-tile-grid > *,
.media-tile-page .garage-grid.media-tile-grid:not(.similar-tiles-flex) > *,
.vehicles-section.media-tile-page #vehiclesGrid.media-tile-grid > * {
    min-width: 0;
}

.media-tile-page .garage-cards.media-tile-grid:not(.similar-tiles-flex),
.media-tile-page .rental-cards.media-tile-grid:not(.similar-tiles-flex) {
    display: grid;
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
    align-content: start;
}

.media-tile-page .garage-cards.media-tile-grid:not(.similar-tiles-flex) > *,
.media-tile-page .rental-cards.media-tile-grid:not(.similar-tiles-flex) > * {
    min-width: 0;
}

/* Detail pages: similar / same-market rows — 255px tiles, left-packed (see views: similar-tiles-flex) */
main.container section.section-spacing.media-tile-page:has(.similar-tiles-flex),
section.section-spacing.media-tile-page:has(.similar-tiles-flex) {
    text-align: left;
}

/* Explicit section chain beats legacy `.garage-cards { display:grid }` from styleguide on Recovery etc. */
section.section-spacing.media-tile-page .similar-tiles-flex,
main.container .media-tile-page .similar-tiles-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    align-self: stretch;
    text-align: left;
    box-sizing: border-box;
}

section.section-spacing.media-tile-page .similar-tiles-flex > a,
section.section-spacing.media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card,
main.container .media-tile-page .similar-tiles-flex > a,
main.container .media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card {
    flex: 0 0 255px;
    width: 255px;
    max-width: 255px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
}

@media (max-width: 360px) {
    section.section-spacing.media-tile-page .similar-tiles-flex > a,
    section.section-spacing.media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card,
    main.container .media-tile-page .similar-tiles-flex > a,
    main.container .media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* Home Index only: #sparePartsGrid — 255px tiles, left edge (section has text-align:center) */
.spare-section.media-tile-page #sparePartsGrid.media-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    box-sizing: border-box;
}

.spare-section.media-tile-page #sparePartsGrid.media-tile-grid > a,
.spare-section.media-tile-page #sparePartsGrid.media-tile-grid > a.garage-card.media-tile-card {
    flex: 0 0 255px;
    width: 255px;
    max-width: 255px;
    min-width: 0;
}

/* Spare Parts listing (/SpareParts): compact tiles, left-packed (same as Index #sparePartsGrid) */
.media-tile-page .garage-content #sparePartsListingGrid.media-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    box-sizing: border-box;
}

.media-tile-page .garage-content #sparePartsListingGrid.media-tile-grid > a,
.media-tile-page .garage-content #sparePartsListingGrid.media-tile-grid > a.garage-card.media-tile-card {
    flex: 0 0 255px;
    width: 255px;
    max-width: 255px;
    min-width: 0;
}

@media (max-width: 600px) {
    .media-tile-page .media-tile-grid:not(#sparePartsGrid):not(#sparePartsListingGrid):not(.similar-tiles-flex),
    .media-tile-page .garage-content .garage-grid.media-tile-grid,
    section.section-spacing.media-tile-page .garage-grid.media-tile-grid:not(.similar-tiles-flex),
    .garage-section.media-tile-page .garage-grid.media-tile-grid,
    .vehicles-section.media-tile-page #vehiclesGrid.media-tile-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .spare-section.media-tile-page #sparePartsGrid.media-tile-grid > a,
    .spare-section.media-tile-page #sparePartsGrid.media-tile-grid > a.garage-card.media-tile-card {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        max-width: 255px;
    }

    .media-tile-page .garage-content #sparePartsListingGrid.media-tile-grid > a,
    .media-tile-page .garage-content #sparePartsListingGrid.media-tile-grid > a.garage-card.media-tile-card {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        max-width: 255px;
    }

    section.section-spacing.media-tile-page .similar-tiles-flex > a,
    section.section-spacing.media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card,
    main.container .media-tile-page .similar-tiles-flex > a,
    main.container .media-tile-page .similar-tiles-flex > a.garage-card.media-tile-card {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        max-width: 255px;
    }

    .media-tile-page .garage-cards.media-tile-grid:not(.similar-tiles-flex),
    .media-tile-page .rental-cards.media-tile-grid:not(.similar-tiles-flex) {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }
}

.media-tile-page a.garage-card.media-tile-card {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    height: 255px;
/*    min-height: 0;*/
    max-height: none;
    text-align: left;
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    background: #0f172a;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.media-tile-page a.garage-card.media-tile-card:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    transform: translateY(-3px);
}

.media-tile-page .media-tile-card__visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.media-tile-page .media-tile-card__visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: fill;
}

.similar a {
    max-width: 255px;
}

.media-tile-page .media-tile-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.45) 38%, rgba(15, 23, 42, 0) 62% );
    pointer-events: none;
    z-index: 1;
}

.media-tile-page .media-tile-card__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #b91c1c, #8A0A1E);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    line-height: 1;
}

.media-tile-page .media-tile-card__badge.badge {
    top: 10px;
    right: 10px;
    left: auto;
    max-width: calc(100% - 20px);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.media-tile-page .media-tile-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 10px 11px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.media-tile-page .media-tile-card__caption h4 {
    margin: 0;
    min-height: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.28;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.media-tile-page .media-tile-card__caption p {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(248, 250, 252, 0.88);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Detail pages: “similar” grids use .garage-cards from styleguide */
.section-spacing .garage-cards:not(.similar-tiles-flex) {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
}

@media (max-width: 600px) {
    .section-spacing .garage-cards:not(.similar-tiles-flex) {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }
}

/* Rent/Vehicle detail pages: similar row uses .rental-cards (rentDetails.css loads later; this selector wins) */
.section-spacing .rental-cards:not(.similar-tiles-flex) {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
}

@media (max-width: 600px) {
    .section-spacing .rental-cards:not(.similar-tiles-flex) {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }

    .garage-card {
        height: 262px;
        min-height: 262px;
        max-height: 262px;
    }

    .garage-card img {
        height: 102px;
    }
}

/* Responsive */
@media(max-width: 1000px) {
    .garage-content {
        grid-template-columns: 1fr;
    }

    .garage-top-filter {
        flex-direction: column;
        gap: 10px;
    }

    .garage-top-filter input {
        width: 100%;
    }
}

/* /////////////////////////////////////////// */

/* Footer */
.footer {
    padding: 60px 10%;
    background: #fff;
    color: #8e8eac;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column a {
    font-size: 15px;
    color: #8e8eac;
    cursor: pointer;
    transition: 0.2s;
}

.footer-column a:hover {
    color: #b5252a;
}

.footer-social a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #8e8eac;
    margin-bottom: 12px;
}

.footer-social .icon {
    width: 20px;
    opacity: 0.8;
}

.footer-line {
    border: none;
    height: 1px;
    background: #b5252a;
    margin-bottom: 25px;
    opacity: 0.5;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    width: 120px;
    opacity: 0.9;
}

.footer-bottom p {
    font-size: 14px;
    color: #999;
}