@if(routeIsProductRelated())
    @push('header-css')
        <style>
            .component-list .widget-container:not(.no-padding) {
                background-color: inherit;
                border: inherit;
                padding: 0;
            }

            .component-list .widget-container:not(.no-padding) .widget-product:hover {
                box-shadow: 0 1px 8px 0px hsl(0deg 1% 12% / 26%);
            }
        </style>
    @endpush
@endif


<div class="p-0">
    <div class="component-list component-small-list d-flex flex-wrap">
        <article class="component-item widget-width p-0">
            <div class="widget-container sm:py-16">
                <div class="widget-gw-widget">
                    <div class="styles-module_sliderBase__swkx1 product-slider">
                        <div class="d-flex flex-wrap" data-widget="carousel-container">
                            @foreach($products as $product)
                                @include('web.themes.trendyol.components.products.collection.grid-product-item', [
                                    'product' => $product
                                ])
                            @endforeach
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</div>
