﻿.discounted-products-section {
    padding: 5.3rem 0 4rem;
    margin: 2rem 0;
    background: url('/portals/0/images/discount-products-bg.jpg') no-repeat bottom center;
    background-size: cover;

    .content-holder {
        gap: 3.2rem;

        .side {
            width: 16.8rem;
            min-width: 16.8rem;
            max-width: 16.8rem;

            .title {
                font-size: 1.86rem;
                font-weight: 800;
                color: var(--Acolor);
            }

        }

        .list {
            width: calc(100% - 20.1rem);

            .slider_box {
                width: 100%;

                .swiper-slide {
                    >a {
                        padding: 1rem;
                        background: var(--White) url(/portals/0/svg/box-background.svg) no-repeat center center;
                        background-size: 90%;

                        .img-box {
                            width: 10rem;
                            max-width: 100%;
                            margin: auto;
                            aspect-ratio: 1/1;

                            margin-bottom: 0.5rem;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .title {
                            font-size: 0.9rem;
                            min-height: 3rem;
                            line-height: 1.8;
                            margin: 0 0 0.8rem;
                            text-align: center;
                        }

                        .price-box {
                            min-height: 3.2rem;

                            strong {
                                color: var(--Acolor);
                                font-size: 0.9rem;
                                font-weight: bold;

                                svg {
                                    width: 1.1rem;
                                    min-width: 1.1rem;
                                    height: 1.1rem;
                                }
                            }

                            strike {
                                color: var(--text-color-4);
                                font-size: 0.9rem;
                            }
                        }


                        .discount {
                            width: 2.3rem;
                            min-width: 2.5rem;
                            height: 1.86rem;
                            background-color: var(--accent-color);
                            border-radius: 1rem;
                            font-size: 0.8rem;
                            color: #fff;
                        }
                    }
                }
            }

            .controller-row {
                margin-top: 2.13rem;


                .controller {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.3rem;
                    z-index: 1;

                    .navigation {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 1.8rem;
                        height: 1.8rem;
                        border-radius: 50%;
                        filter: drop-shadow(0px 4px 8px rgba(96, 97, 112, 0.16)) drop-shadow(0px 0px 2px rgba(40, 41, 61, 0.04));
                        border: solid 1px #9E7702;
                        flex-shrink: 0;
                        z-index: 1;
                        cursor: pointer;

                        svg {
                            width: 1rem;
                            height: 1rem;
                            fill: none;
                            stroke: #9E7702;
                        }
                    }

                    .swiper-pagination {
                        position: relative;
                        flex-shrink: 0;
                        width: auto;
                        bottom: auto;
                        top: auto;
                        left: auto;

                        .swiper-pagination-bullet {
                            cursor: pointer;
                            width: 0.5rem;
                            height: 0.5rem;
                            background: #fff;
                            opacity: 1;


                            &.swiper-pagination-bullet-active {
                                background: #9E7702;
                            }
                        }
                    }

                }
            }
        }

        .more-link {
            font-size: 1rem;
            color: var(--Acolor);

            svg {
                width: 1.1rem;
                min-width: 1.1rem;
                height: 1.1rem;
                fill: var(--Acolor);
            }
        }

    }

    @media(max-width:990px) {
        .content-holder {
            gap: 1.2rem;

            .side {}

            .list {
                width: calc(100% - 18rem);
            }
        }
    }

    @media(max-width:760px) {
        padding: 2rem 0 1.5rem;

        .content-holder {
            .side {
                width: 100%;
                max-width: 100%;
                min-height: auto;

                .title {
                    font-size: 1rem;
                }

                img {
                    width: 6.5rem;
                }
            }

            .list {
                width: 100%;

                .slider_box {
                    .swiper-slide {

                        &:first-child {
                            margin-right: 1rem;
                        }

                        .title {
                            font-size: 0.8rem;
                        }
                    }
                }
            }

            .more-link {
                font-size: 0.8rem;
            }
        }
    }
}