/* Mobile Shop Page Fixes */

/* Desktop - Ensure Bootstrap grid works properly */
@media (min-width: 992px) {
    /* Fix for products grid - ensure Bootstrap row-cols works */
    .products.columns-4.row,
    .products.columns-3.row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .products.columns-4.row .product.col,
    .products.columns-3.row .product.col {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    /* Ensure row-cols classes work - Desktop grid */
    .products.row-cols-xl-4 > .product.col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    
    .products.row-cols-lg-4 > .product.col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    
    .products.row-cols-lg-3 > .product.col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
    
    .products.row-cols-md-3 > .product.col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
    
    .products.row-cols-2 > .product.col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    /* Reset any grid display that might interfere */
    .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Mobile - Hide sidebar, show content full width */
@media (max-width: 991.98px) {
    /* Force sidebar to be hidden on mobile */
    .shop-products-wrapper .col-lg-3.col-md-4,
    .shop-products-wrapper .sidebar-shop {
        display: none !important;
    }
    
    /* Main content takes full width on mobile */
    .shop-products-wrapper .col-lg-9.col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 15px;
    }
    
    /* Products grid - 2 columns on mobile (for both columns-3 and columns-4) */
    .shop-products-wrapper .products.columns-3,
    .shop-products-wrapper .products.columns-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        margin: 0;
        padding: 0;
    }
    
    .shop-products-wrapper .products.columns-3 .product,
    .shop-products-wrapper .products.columns-4 .product {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Product card mobile styling */
    .products .product-outer {
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    
    .products .product-inner {
        padding: 10px;
    }
    
    .products .product-thumbnail {
        margin-bottom: 10px;
    }
    
    .products .product-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
    
    .products .woocommerce-loop-category__title,
    .products .woocommerce-loop-product__title {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 8px;
        min-height: 36px;
    }
    
    .products .price {
        font-size: 16px;
        font-weight: 600;
        color: #3a9aed;
    }
    
    /* Imalat specific */
    .imalat-categories .product-category {
        width: 100% !important;
    }
    
    .imalat-categories .category-info {
        padding: 15px 10px;
    }
    
    /* Breadcrumb mobile */
    .woocommerce-breadcrumb {
        font-size: 14px;
        padding: 10px 0;
        margin-bottom: 15px;
    }
    
    /* Page header mobile */
    .page-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .page-header .page-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .woocommerce-result-count {
        font-size: 14px;
        color: #666;
    }
    
    /* Disable owl carousel on mobile, use grid instead */
    .shop-products-wrapper .owl-carousel {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .shop-products-wrapper .owl-carousel .owl-stage-outer,
    .shop-products-wrapper .owl-carousel .owl-stage,
    .shop-products-wrapper .owl-carousel .owl-item {
        display: contents;
    }
    
    .shop-products-wrapper .owl-carousel .owl-nav,
    .shop-products-wrapper .owl-carousel .owl-dots {
        display: none !important;
    }
}

/* Tablet - 1 column for sidebar, 2 columns for products */
@media (min-width: 768px) and (max-width: 991.98px) {
    .shop-products-wrapper .products.columns-3,
    .shop-products-wrapper .products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small mobile - 1 column for products */
@media (max-width: 575.98px) {
    .shop-products-wrapper .products.columns-3,
    .shop-products-wrapper .products.columns-4 {
        grid-template-columns: 1fr !important;
    }
    
    .page-header .page-title {
        font-size: 20px;
    }
}

/* Mobile cart and wishlist buttons */
@media (max-width: 991.98px) {
    .products .add-to-cart-wrap,
    .products .add_to_cart_button,
    .products .button {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /* REMOVED: This was forcing hover-area to always be visible */
    /* Hover-area should be hidden by default and only show on hover */
    /* 
    .products .hover-area {
        position: static;
        opacity: 1;
        visibility: visible;
        margin-top: 10px;
    }
    */
    
    .products .hover-area .action-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    
    .products .hover-area .action-buttons a {
        font-size: 18px;
        padding: 8px;
    }
}

/* Shop control bar mobile */
@media (max-width: 991.98px) {
    .shop-control-bar {
        padding: 15px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .shop-control-bar .shop-view-switcher {
        display: none !important;
    }
    
    .shop-control-bar .woocommerce-ordering {
        width: 100%;
    }
    
    .shop-control-bar .woocommerce-ordering select {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile category description */
@media (max-width: 991.98px) {
    .term-description {
        font-size: 14px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 8px;
        margin-bottom: 20px;
    }
}

/* Mobile pagination */
@media (max-width: 991.98px) {
    .woocommerce-pagination {
        margin: 30px 0;
    }
    
    .woocommerce-pagination .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .woocommerce-pagination .page-item {
        margin: 2px;
    }
    
    .woocommerce-pagination .page-link {
        padding: 8px 12px;
        font-size: 14px;
    }
}