/* Mobile Slider Styles */

@media (max-width: 768px) {
    /* Category Slider */
    .category-slider {
        margin-bottom: 20px;
    }

    .category-slider .container {
        padding: 0 !important;
    }

    .slider-wrapper {
        gap: 0;
    }

    /* Hide slider buttons on mobile */
    .slider-btn {
        display: none;
    }

    /* Adjust slider container */
    .slider-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Slider track - 4 items visible */
    .slider-track {
        display: flex;
        gap: 10px;
        padding: 15px 12px;
        width: max-content;
    }

    .slider-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc((100vw - 24px - 30px) / 4);
        min-width: calc((100vw - 24px - 30px) / 4);
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 10px;
        border-radius: 8px;
        background: white;
        text-decoration: none;
        color: #333;
        transition: background 0.3s;
        flex-shrink: 0;
    }

    .slider-item:hover {
        background: #f5f5f5;
    }

    .slider-item img {
        max-width: 70%;
        max-height: 60%;
        object-fit: contain;
        margin-bottom: 6px;
    }

    .slider-item span {
        font-size: 10px;
        text-align: center;
        line-height: 1.2;
        font-weight: 500;
    }

    /* Promo banners grid - 4 items visible */
    .promo-banners-grid {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 15px 12px;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .promo-banner {
        flex: 0 0 calc((100vw - 24px - 30px) / 4);
        min-width: calc((100vw - 24px - 30px) / 4);
        height: 70px;
        border-radius: 12px;
        overflow: hidden;
    }

    .promo-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Mobile image sources */
    .promo-banner:nth-child(1) img {
        content: url('../../img/aldinaldinmobile.webp');
    }

    .promo-banner:nth-child(2) img {
        content: url('../../img/aldinaldinekstramobile.webp');
    }

    .promo-banner:nth-child(3) img {
        content: url('../../img/haftaninçoksatanlarimobile.webp');
    }

    .promo-banner:nth-child(4) img {
        content: url('../../img/sadecea101mobile.webp');
    }

    /* Product Sliders */
    .products-slider-wrapper {
        position: relative;
    }

    /* Hide slider buttons on mobile */
    .products-slider-btn {
        display: none;
    }

    .products-slider-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Products track - scrollable */
    .products-track {
        display: flex;
        gap: 12px;
        padding: 15px 12px;
        width: max-content;
    }

    /* Product card - wider on mobile */
    .product-card {
        flex: 0 0 calc((100vw - 24px) / 2.8) !important;
        min-width: calc((100vw - 24px) / 2.8) !important;
    }
}

@media (max-width: 480px) {
    /* Adjust for smaller screens */
    .slider-track {
        gap: 8px;
        padding: 12px 10px;
    }

    .slider-item {
        width: calc((100vw - 20px - 24px) / 4);
        min-width: calc((100vw - 20px - 24px) / 4);
        padding: 8px;
    }

    .slider-item img {
        max-width: 75%;
        max-height: 65%;
    }

    .slider-item span {
        font-size: 9px;
    }

    /* Promo banners on smaller screens */
    .promo-banners-grid {
        gap: 8px;
        padding: 12px 10px;
    }

    .promo-banner {
        flex: 0 0 calc((100vw - 20px - 24px) / 4);
        min-width: calc((100vw - 20px - 24px) / 4);
        height: 70px;
    }

    /* Products on extra small screens */
    .products-track {
        gap: 10px;
        padding: 12px 10px;
    }

    .product-card {
        flex: 0 0 calc((100vw - 20px - 20px) / 3);
        min-width: calc((100vw - 20px - 20px) / 3);
    }
}