.product {
     display: grid;
     grid-gap: 24px;
     padding: 10px 0;
}.product li {
     background: #ffffff !important;
     border: 1px solid rgba(15, 23, 42, 0.08) !important;
     border-radius: 12px !important;
     padding: 24px 20px !important;
     text-align: center !important;
     transition: all 0.3s ease !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     list-style: none;
     box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03) !important;
}

.product li:hover {
     transform: translateY(-5px) !important;
     background: rgba(15, 23, 42, 0.01) !important;
     border-color: var(--primary) !important;
     box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08) !important;
}

.product li a {
     text-decoration: none;
     display: block;
     width: 100%;
}

.product li h4 {
     margin: 12px 0 6px 0;
     font-size: 18px;
     font-weight: 700;
     color: #1e293b;
     font-family: var(--font-headings);
     line-height: 1.4;
}

.product li .price {
     font-size: 15px;
     font-weight: bold;
     color: var(--accent);
     margin-top: 5px;
}

.product li .car-icon {
     width: 90px;
     height: 45px;
     margin: 0 auto 10px auto;
     display: block;
     color: rgba(15, 23, 42, 0.4);
     transition: all 0.3s ease;
}

.product li:hover .car-icon {
     color: var(--primary);
     filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.25));
     transform: scale(1.05);
}

/* ========================================================
   DARK BACKGROUND CONTEXTS (e.g. dark subpages)
   ======================================================== */
.inspection-page .product li {
     background: rgba(255, 255, 255, 0.03) !important;
     border: 1px solid rgba(255, 255, 255, 0.06) !important;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.inspection-page .product li:hover {
     background: rgba(255, 255, 255, 0.06) !important;
     border-color: rgba(212, 175, 55, 0.4) !important;
     box-shadow: 0 10px 25px rgba(212, 175, 55, 0.15) !important;
}

.inspection-page .product li h4 {
     color: #ffffff;
}

.inspection-page .product li .car-icon {
     color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 740px) {
     .product {
          grid-template-columns: 1fr 1fr;
          grid-gap: 15px;
     }
     
     .product li {
          padding: 16px 12px !important;
     }
     
     .product li h4 {
          font-size: 15px;
     }
     
     .product li .car-icon {
          width: 70px;
          height: 35px;
     }
}

@media (min-width: 741px) {
     .product {
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
}