/* Apply only to Mobile Portrait (up to 767px) */
@media (max-width: 767px) {
    /* Convert the parent container into a horizontally scrollable row */
    .kat-product-related-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth touch scrolling */
        scrollbar-width: none !important; /* Hide scrollbar for Firefox */
        gap: 16px !important; /* 16px gap between items */
    }

    /* Hide scrollbar for Chrome, Safari, and Edge */
    .kat-product-related-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* Target the direct child containers (product cards) */
    .kat-product-related-grid > * {
        /* Set width to ~60% to show ~1.6 cards at a time */
        flex: 0 0 60% !important;
        width: 60% !important;
        max-width: 60% !important;
        min-width: 60% !important;
    }

    /* Keep product images proportional to the new card width and maintain object-fit */
    .kat-product-related-grid > * img {
        width: 100% !important;
        height: 240px !important; /* Set appropriate mobile height */
        object-fit: cover !important;
    }
}