/* Mobile Product Grid - 3 Products Per Row */
/* Featured Product Section Mobile Styles */

/* Override Bootstrap default mobile behavior for all screen sizes */
@media (max-width: 991px) {
    .feature-product-section .row .col-xl-3.col-lg-4.col-sm-6,
    .feature-product-section .row > [class*="col-"] {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

@media (max-width: 767px) {
    /* 3 products per row on mobile - Force override */
    .feature-product-section .row .col-xl-3.col-lg-4.col-sm-6,
    .feature-product-section .row > [class*="col-"] {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Adjust product card for smaller mobile view */
    .feature-product-section .product-card2 {
        margin-bottom: 8px !important;
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Product image container - show full image without cropping */
    .feature-product-section .product-card-img {
        position: relative;
        overflow: hidden;
        padding-bottom: 0;
        height: 50px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
    }
    
    .feature-product-section .product-card-img img {
        width: 100%;
        height: 80%;
        object-fit: contain;
        max-height: 50px;
        display: block;
    }
    
    /* Adjust product card content for mobile */
    .feature-product-section .product-card-content {
        padding: 5px 3px !important;
    }
    
    .feature-product-section .product-card-content h6 {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin-bottom: 3px !important;
        height: 24px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .feature-product-section .product-card-content span {
        font-size: 10px !important;
        display: block;
        margin-bottom: 2px;
    }
    
    .feature-product-section .product-card-content span del {
        font-size: 9px !important;
    }
    
    .feature-product-section .product-card-content p {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }
    
    /* Adjust batch/badge size */
    .feature-product-section .batch {
        top: 3px !important;
        left: 3px !important;
    }
    
    .feature-product-section .batch span {
        font-size: 8px !important;
        padding: 2px 5px !important;
        margin-bottom: 2px !important;
    }
    
    /* Adjust cart button area for mobile */
    .feature-product-section .cart-btn-area {
        padding: 3px !important;
    }
    
    .feature-product-section .add-cart-btn2 {
        font-size: 9px !important;
        padding: 5px 6px !important;
        white-space: nowrap;
    }
    
    .feature-product-section .add-cart-btn2 i {
        font-size: 9px !important;
    }
    
    /* Adjust view and favorite icons */
    .feature-product-section .view-and-favorite-area {
        top: 3px !important;
        right: 3px !important;
    }
    
    .feature-product-section .view-and-favorite-area ul li {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 3px !important;
    }
    
    .feature-product-section .view-and-favorite-area ul li a {
        width: 22px !important;
        height: 22px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .feature-product-section .view-and-favorite-area ul li svg {
        width: 10px !important;
        height: 10px !important;
    }
    
    /* Adjust product size variations */
    .feature-product-section .product-size {
        margin-top: 3px !important;
    }
    
    .feature-product-section .product-size li {
        font-size: 8px !important;
        padding: 2px 4px !important;
        margin-right: 2px !important;
        margin-bottom: 2px !important;
    }
    
    /* Reduce gap between products */
    .feature-product-section .row.g-4 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }
}

/* Extra small devices (phones in portrait, less than 576px) */
@media (max-width: 575px) {
    .feature-product-section .row .col-xl-3.col-lg-4.col-sm-6,
    .feature-product-section .row > [class*="col-"] {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    
    .feature-product-section .product-card-img {
        height: 50px !important;
    }
    
    .feature-product-section .product-card-img img {
        max-height: 50px;
    }
    
    .feature-product-section .product-card-content h6 {
        font-size: 9px !important;
        height: 22px;
    }
    
    .feature-product-section .product-card-content span {
        font-size: 9px !important;
    }
    
    .feature-product-section .product-card-content span del {
        font-size: 8px !important;
    }
}

/* Additional override for very small screens */
@media (max-width: 480px) {
    .feature-product-section .row .col-xl-3.col-lg-4.col-sm-6,
    .feature-product-section .row > [class*="col-"] {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    .feature-product-section .product-card-img {
        height: 90px !important;
    }
    
    .feature-product-section .product-card-img img {
        max-height: 90px;
    }
    
    .feature-product-section .product-card-content {
        padding: 4px 2px !important;
    }
    
    .feature-product-section .product-card-content h6 {
        font-size: 8px !important;
        height: 20px;
    }
    
    .feature-product-section .add-cart-btn2 {
        font-size: 8px !important;
        padding: 4px 5px !important;
    }
}