/* Products Page - Wide Cards on Mobile - AGGRESSIVE FIX */

@media (max-width: 768px) {
    /* Kill grid layout completely on products page */
    .product__items,
    .product__items.slider,
    .product__items.list,
    div[class*="product__items"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
    }
    
    /* Override slick slider */
    .product__items .slick-track {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        transform: none !important;
        align-items: center !important;
    }
    
    .product__items .slick-slide {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        float: none !important;
        margin: 0 !important;
    }
    
    /* Every single product card - FULL WIDTH */
    .product__items .item,
    .product__items.slider .item,
    .product__items.list .item,
    .cursor-product-card,
    div[class*="product__items"] .item,
    div[class*="product__items"] > div,
    .slick-slide .item,
    .slick-slide > div {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        min-width: calc(100vw - 32px) !important;
        margin: 0 auto !important;
        flex: none !important;
        flex-shrink: 0 !important;
        float: none !important;
    }
    
    /* Ensure container doesn't restrict */
    .product .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
    
    /* Hide slider arrows on mobile */
    .slick-arrow,
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .product__items .item,
    .product__items.slider .item,
    .product__items.list .item,
    .cursor-product-card {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: calc(100vw - 24px) !important;
    }
}