/* --- Mobile Fixes: Remove Sidebar & Ultra Compact Products --- */

@media (max-width: 992px) {

    /* Enable Filter Toggle & Sidebar on mobile */
    /* Rules moved to style.css for better control */

    /* Ensure shop layout takes full width */
    .shop-layout {
        display: block !important;
        width: 100% !important;
    }

    .shop-content {
        width: 100% !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {

    /* Tighter Container to fit screen */
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Force 2-Column Grid with minimal gap */
    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        /* Small gap */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ultra Compact Product Card */
    .product-card {
        padding: 6px !important;
        margin-bottom: 0 !important;
        border: 1px solid #f0f0f0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
        background: #fff;
        height: 100%;
        /* Ensure uniform height */
    }

    /* Smaller Image */
    .prod-img {
        height: 110px !important;
        /* Further reduced from 140px */
        padding: 0 !important;
        margin-bottom: 6px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .prod-img img {
        max-height: 100% !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Compact Details */
    .prod-details {
        padding: 0 !important;
        text-align: center;
    }

    .prod-details .author {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
        display: block;
        color: #888;
    }

    .prod-details h4 {
        font-size: 0.85rem !important;
        /* Smaller font */
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
        height: 2.4em !important;
        /* Limit to 2 lines */
        overflow: hidden;
        font-weight: 600;
    }

    .prod-details h4 a {
        color: #333;
    }

    .prod-details .category-name {
        display: none !important;
        /* Hide category name on mobile to save space */
    }

    .prod-details .price {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
        font-weight: 700;
        color: var(--primary-color, #006666);
    }

    .prod-details .price .old {
        font-size: 0.75rem !important;
        color: #999;
    }

    /* Compact Button */
    .add-cart {
        padding: 6px 0 !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        display: block !important;
        margin-top: 2px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        border-radius: 4px;
        background-color: var(--primary-color, #006666);
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Hide sale badge if it's too big */
    .badge.sale {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
        top: 5px !important;
        right: 5px !important;
    }

    /* Make pagination scrollable on mobile */
    .pagination {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 10px 0 !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        scrollbar-width: none;
        /* Firefox */
    }

    .pagination::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .pagination .page-link {
        flex: 0 0 auto !important;
        margin: 0 4px !important;
    }
}

/* Extra small devices adjustments */
@media (max-width: 400px) {
    .prod-img {
        height: 90px !important;
    }

    .product-grid {
        gap: 6px !important;
    }

    .prod-details h4 {
        font-size: 0.8rem !important;
    }
}