/* porsche-plp.css */

/* PLP Grid spacing and card design */
.products-grid .product-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.products-grid .product-item {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure configuration classes are respected for layout */
.products-grid .product-item.col-des-2 {
    width: calc(16.666667% - 16.66px) !important;
    flex: 0 0 calc(16.666667% - 16.66px) !important;
}

.products-grid .product-item.col-des-3 {
    width: calc(25% - 15px) !important;
    flex: 0 0 calc(25% - 15px) !important;
}

.products-grid .product-item.col-des-4 {
    width: calc(33.333333% - 13.33px) !important;
    flex: 0 0 calc(33.333333% - 13.33px) !important;
}

.products-grid .product-item.col-des-6 {
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
}

.products-grid .product-item.col-des-12 {
    width: 100% !important;
    flex: 0 0 100% !important;
}

@media (min-width: 992px) {
    .products-grid .product-item.col-md-2 {
        width: calc(16.666667% - 16.66px) !important;
        flex: 0 0 calc(16.666667% - 16.66px) !important;
    }

    .products-grid .product-item.col-md-3 {
        width: calc(25% - 15px) !important;
        flex: 0 0 calc(25% - 15px) !important;
    }

    .products-grid .product-item.col-md-4 {
        width: calc(33.333333% - 13.33px) !important;
        flex: 0 0 calc(33.333333% - 13.33px) !important;
    }

    .products-grid .product-item.col-md-6 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .products-grid .product-item.col-md-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .products-grid .product-item.col-tb-3 {
        width: calc(25% - 15px) !important;
        flex: 0 0 calc(25% - 15px) !important;
    }

    .products-grid .product-item.col-tb-4 {
        width: calc(33.333333% - 13.33px) !important;
        flex: 0 0 calc(33.333333% - 13.33px) !important;
    }

    .products-grid .product-item.col-tb-6 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .products-grid .product-item.col-sm-4 {
        width: calc(33.333333% - 13.33px) !important;
        flex: 0 0 calc(33.333333% - 13.33px) !important;
    }

    .products-grid .product-item.col-sm-6 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .products-grid .product-item.col-sm-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 767px) {
    .products-grid .product-item.col-mb-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .products-grid .product-item.col-mb-6 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .products-grid .product-item.col-xs-6 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    .products-grid .product-item.col-xs-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* The card styling matching the reference image */
.products-grid .product-item-info {
    background-color: #f6f6f6 !important;
    border-radius: 6px !important;
    padding-bottom: 20px !important;
    transition: all 0.3s ease !important;
    border: 1px solid #eeeeee !important;
    /* Subtle border fallback */
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
    /* Forces all cards in a row to match height */
    overflow: hidden !important;
}

.products-grid .product-item-info:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

/* Disable the hover image swap and background overlays */
.products-grid .product-item-info .product-item-photo.has-hover-image .img-hover-show {
    display: none !important;
}

.products-grid .product-item-info .product-item-photo.has-hover-image:hover .img-thumbnail {
    visibility: visible !important;
    opacity: 1 !important;
}

.products-grid .product-item-info .product-item-photo::before,
.products-grid .product-item-info .product-item-photo::after {
    display: none !important;
    background: transparent !important;
}

/* Make image area transparent since the whole card is gray */
.products-grid .product-item-info .product-top {
    background: transparent !important;
    width: 100% !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* Reduce product image anchor padding-bottom (was 133.3333% from theme helper) */
.products-grid .product-item-info .product-item-photo {
    padding-bottom: 110% !important;
}

/* Ensure the image doesn't get cut off weirdly */
.products-grid .product-item-info .product-image-photo {
    mix-blend-mode: multiply !important;
}

/* Details area text centering */
.products-grid .product-item-info .product-item-details {
    text-align: center !important;
    padding: 0 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Product Name */
.products-grid .product-item-info .product-item-details .product-item-name {
    margin-bottom: 8px !important;
    margin-top: 10px !important;
}

.products-grid .product-item-info .product-item-details .product-item-name a {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/* Price */
.products-grid .product-item-info .product-item-details .price-box {
    margin: 0 !important;
}

.products-grid .product-item-info .product-item-details .price {
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Limited label in top-left */
.products-grid .product-item-info .product-label {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: #fff !important;
    color: #333 !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    text-transform: capitalize !important;
    border: 1px solid #eee !important;
    z-index: 10;
}