/* ==========================================================
   CARD FOUNDATION
========================================================== */

.card,
.product-card,
.brand-card,
.vehicle-card,
.category-card,
.metrics-card {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    overflow: hidden;

    height: 100%;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.card:hover,
.product-card:hover,
.brand-card:hover,
.vehicle-card:hover,
.category-card:hover,
.metrics-card:hover {

    transform: translateY(-6px);

    border-color: var(--color-primary);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10);

}


/* ==========================================================
   CARD IMAGES
========================================================== */

.card-image,
.product-image,
.brand-image,
.vehicle-image,
.category-image {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 140px;

    padding: 20px;

    background: #ffffff;

    border-bottom: 1px solid #eee;

}

.card-image img,
.product-image img,
.brand-image img,
.vehicle-image img,
.category-image img {

    max-width: 100%;

    max-height: 100px;

    object-fit: contain;

    transition: transform .35s ease;

}

.category-card:hover img,
.brand-card:hover img,
.vehicle-card:hover img,
.product-card:hover img {

    transform: scale(1.08);

}


/* ==========================================================
   CARD CONTENT
========================================================== */

.card-content,
.product-content,
.brand-content,
.vehicle-content,
.category-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 8px;

    padding: 20px;

    text-align: center;

}


/* ==========================================================
   CARD TITLES
========================================================== */

.card-title,
.product-title,
.brand-name,
.vehicle-name,
.category-name {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    color: var(--text-primary);

}


/* ==========================================================
   CARD META
========================================================== */

.card-meta,
.product-meta,
.brand-meta,
.vehicle-meta,
.category-meta {

    font-size: 14px;

    color: var(--text-secondary);

}


/* ==========================================================
   CATEGORY CARDS
========================================================== */

.category-content h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

}


/* ==========================================================
   BRAND & VEHICLE CARDS
========================================================== */

.brand-card,
.vehicle-card {

    padding: 0;

    text-align: center;

}

.brand-image,
.vehicle-image {

    height: 220px;

    padding: 32px;

}

.brand-image img,
.vehicle-image img {

    max-height: 90px;

}

.brand-content,
.vehicle-content {

    min-height: 90px;

}

.brand-content h3,
.vehicle-content h3 {

    margin: 0;

    font-size: 18px;

}

.brand-count,
.vehicle-count {

    margin-top: 8px;

    font-size: 14px;

    color: var(--text-secondary);

    transition: .25s ease;

}

.brand-card:hover .brand-count {

    color: var(--color-primary);

}

.brand-card:hover .count-number {

    font-weight: 700;

}


/* ==========================================================
   PRODUCT CARDS
========================================================== */

.product-card {

    display: flex;

    flex-direction: column;

    min-height: 360px;

}

.product-image {

    height: 140px;

    padding: 14px;

}

.product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.product-content {

    flex: 1;

    justify-content: flex-start;

    gap: 6px;

    padding: 14px;

}

.product-title {

    margin: 0;

    display: -webkit-box;

    min-height: 30px;

    overflow: hidden;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

.product-description {

    display: -webkit-box;

    min-height: 32px;

    overflow: hidden;

    font-size: 11px;

    line-height: 1.4;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

.product-id {

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--color-primary);

}

.product-brand {

    font-size: 12px;

    color: var(--color-text-light);

}

.product-part {

    font-size: 12px;

}

.product-category {

    font-size: 11px;

}

.product-actions {

    margin-top: auto;

}

.product-actions .btn {

    padding: 7px 12px;

    font-size: 12px;

}


/* ==========================================================
   VEHICLE CARDS
========================================================== */

.vehicle-image {

    height: 240px;

}


/* ==========================================================
   FEATURED CARD
========================================================== */

.featured-card {

    border-color: var(--color-primary);

}

.featured-card:hover {

    box-shadow:
        0 16px 30px rgba(220,38,38,.15);

}


/* ==========================================================
   ICON CARDS
========================================================== */

.why-card {

    padding: 32px;

    text-align: center;

}

.why-card h3 {

    margin-bottom: 10px;

}

.why-card p {

    color: var(--color-text-light);

}

.why-icon {

    display: block;

    width: 56px !important;

    height: 56px !important;

    margin: 0 auto 20px;

    object-fit: contain;

}


/* ==========================================================
   GRID LAYOUTS
========================================================== */

.why-grid,
.contact-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 24px;

}

.metrics-grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 40px;

    justify-content: center;

    text-align: center;

}


/* ==========================================================
   MAP
========================================================== */

.map-wrapper {

    overflow: hidden;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);

}

.map-wrapper iframe {

    display: block;

    width: 100%;

}


/* ==========================================================
   FORMS
========================================================== */

.request-part-form {

    padding: 40px;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

}


/* ==========================================================
   METRICS
========================================================== */

.metrics-card {

    padding: 48px 32px;

    text-align: center;

}