/**
 * Slider Layout Styles for Product Display
 * 
 * This file contains styles specific to the slider layout.
 * The main wcps-styles.scss is loaded as default for all layouts.
 * 
 * @package Product_Display
 */

// Slider layout specific styles will be added here
// Currently empty - styles will be moved from wcps-styles.scss as needed
// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;


/* Slick Slider - Slider  wcps-layout-slider */

/* -------------- Shared Base Styles for Slider Layouts -------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Common styles for sliders 1 & 2
    &.wcps-layout-slider,
    &.wcps-layout-slider-2 {
        margin: var(--wcps-container-margin, 30px 0);
        position: relative;
        width: var(--wcps-grid-width, 100%);
        max-width: 100%;

        .wcps-products-container {
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);
        }


        // ── Responsive ────────────────────────────────────────────────────────
        @media (max-width: 992px) {
            .wcps-slider-container .slick-arrow {
                height: 44px;
                width: 44px;
                margin-top: -22px;

                &.slick-prev {
                    left: -22px;
                }

                &.slick-next {
                    right: -22px;
                }
            }
        }

        @media (max-width: 768px) {
            padding: 22px 16px 50px;
            border-radius: 16px;

            .wcps-slider-container {
                .slick-arrow {
                    height: 40px;
                    width: 40px;
                    margin-top: -20px;

                    &.slick-prev {
                        left: -20px;
                    }

                    &.slick-next {
                        right: -20px;
                    }

                    &:before {
                        font-size: 18px !important;
                    }
                }

                .slick-dots {
                    bottom: -38px;
                }
            }

            .wcps-product {
                border-radius: 14px;

                .wcps-product-image {
                    border-radius: 14px 14px 0 0;

                    img {
                        height: 200px;
                        border-radius: 14px 14px 0 0;
                    }
                }

                .wcps-product-content {
                    padding: 14px 13px;

                    .wcps-product-title {
                        font-size: 15px;
                    }

                    .wcps-product-price {
                        font-size: 16px;
                    }
                }
            }
        }

        @media (max-width: 576px) {
            margin: 20px 0;
            padding: 16px 12px 46px;
            border-radius: 12px;

            .wcps-slider-container {
                .slick-arrow {
                    height: 36px;
                    width: 36px;
                    margin-top: -18px;

                    &.slick-prev {
                        left: -18px;
                    }

                    &.slick-next {
                        right: -18px;
                    }

                    &:before {
                        font-size: 16px !important;
                    }
                }

                .slick-dots {
                    bottom: -34px;

                    li button {
                        height: 8px;
                        width: 8px;
                    }

                    li.slick-active button {
                        width: 22px;
                    }
                }
            }

            .wcps-product {
                border-radius: 12px;

                .wcps-product-image {
                    border-radius: 12px 12px 0 0;

                    img {
                        height: 175px;
                        border-radius: 12px 12px 0 0;
                    }

                    .wcps-product-actions {
                        gap: 4px;
                        padding: 10px 12px;

                        a {
                            width: 36px;
                            height: 36px;

                            .wcps-btn-icon i {
                                font-size: 13px;
                            }
                        }
                    }
                }

                .wcps-product-content {
                    padding: 12px;

                    .wcps-product-title {
                        font-size: 14px;
                    }

                    .wcps-product-price {
                        font-size: 15px;
                    }

                    .wcps-product-description {
                        -webkit-line-clamp: 1;
                    }
                }
            }
        }

        @media (max-width: 480px) {
            .wcps-slider-container .slick-arrow {
                height: 32px;
                width: 32px;
                margin-top: -16px;

                &.slick-prev {
                    left: -14px;
                }

                &.slick-next {
                    right: -14px;
                }
            }

            .wcps-product .wcps-product-image img {
                height: 155px;
            }
        }
    }
}

// ─────────────────────────────────────────────────────────────────────────────
// Accessibility: respect reduced motion
// ─────────────────────────────────────────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {

    .wcps-layout-slider-4,
    .wcps-layout-slider-5,
    .wcps-layout-slider-6 {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}