/*
* @author  Agence Dn'D <contact@dnd.fr>
* @license https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
* @link    https://www.dnd.fr/
*/

.template-collection,
.template-search {
    .page-header {
        padding-block-end: 0;

        > .container {
            padding-block-end: 30px;
        }
    }
    .pagetitle {
        margin: 0 !important;
        text-align: left;

        @media (min-width: 768px) {
            margin-block-end: 10px;
        }

        + .rte {
            text-align: left;
            color: var(--neutral-500);
            margin-block-start: 15px;
            @media (min-width: 768px) {
                max-width: none;
            }
        }
    }

    .pagination-row {
        background-color: var(--secondary-50);
    }

    .reinsurance-container {
        width: 100%;
        padding: var(--section-padding-mobile);
        border-top: var(--border-base);
        overflow-y: auto;
        @media (min-width: 768px) {
            justify-content: space-between;
        }

        .reinsurance-wrapper {
            display: flex;
            column-gap: 40px;
            @media (min-width: 768px) {
                max-width: var(--section-layout-max);
                margin: auto;
            }
        }

        .text-reinsurance {
            flex-grow: 1;
            flex-shrink: 0;
            margin-block-end: 0;
            font-size: var(--base-text-size-xs);
            text-transform: uppercase;
            text-align: center;
            font-weight: var(--font-weight-500);
            @media (max-width: 767.98px) {
                max-width: 190px;
                text-align: left;
            }
        }
    }

    .carousel {
        @media (min-width: 768px) {
            overflow-y: hidden;
        }
    }

    .gallery--mobile-carousel .slider__grid {
        @media (max-width: 767.98px) {
            display: flex;
        }
    }

    .related-collection-links--gallery {
        @media (max-width: 767.98px) {
            display: block;
            margin-block-end: 20px;
        }

        .slider__item {
            border: var(--border-base);
            background-color: var(--white);
            padding: 20px;
            scroll-snap-align: none;
            flex: none !important;
            width: auto;
            @media (min-width: 768px) {
                min-width: 325px;
            }

            .theme-img {
                height: 75px;
                width: 75px;
                margin: 0;
                @media (min-width: 768px) {
                    height: 125px;
                    width: 125px;
                }
            }

            .text-overlay {
                position: static;
            }
        }

        .gallery__image {
            width: 75px;
            @media (min-width: 768px) {
                width: 125px;
            }
        }

        .image-overlay__image-link {
            display: flex;
            align-items: center;
            column-gap: 15px;
            @media (min-width: 768px) {
                column-gap: 25px;
            }

            .text-overlay__title {
                text-transform: uppercase;
                font-size: var(--base-text-size-ml);
                color: var(--neutral-500);
            }

            .text-overlay__inner {
                padding: 0;
            }
        }

        .slider__grid {
            overflow-y: auto;
            padding: 0 20px 10px;
            @media (min-width: 768px) {
                padding: 0;
            }
        }
    }

    .page-header {
        @media (min-width: 768px) {
            padding-block-end: 0;
        }

        .container,
        + .container {
            @media (min-width: 768px) {
                max-width: none;
            }
        }
    }

    .utility-bar {
        border-top: var(--border-base);
        border-bottom: var(--border-base);
        background-color: var(--white);

        &:not(.utility-bar--sticky-mobile-copy) {
            margin-block-end: 30px;
            padding: 0 var(--section-padding-mobile);
            @media (min-width: 768px) {
                padding: 0 var(--section-padding-desktop);
                margin-block-end: 50px;
            }
        }

        .utility-bar__left {
            .utility-bar__item {
                font-size: var(--base-text-size-xs);
            }
        }

        .utility-bar__right {
            @media (min-width: 768px) {
                margin: 12px 0;

                .desktop-only {
                    display: flex;
                    align-items: center;
                }

                .sort-by-label {
                    margin-inline-end: 8px;
                }

                .icon {
                    margin-inline-end: 10px;

                    circle {
                        fill: var(--neutral-500);
                    }
                }

                .link-dropdown__button-text {
                    font-weight: var(--font-weight-400);
                }

                .link-dropdown__button {
                    padding-inline-end: 25px;
                }

                .link-dropdown__button-icon {
                    margin-inline-start: 10px;
                    margin-inline-end: 0;
                    margin-block-start: -8px;

                    svg {
                        width: 16px;
                        height: 16px;
                        margin-inline-end: 0;
                    }
                }

                .link-dropdown__link--active {
                    background: var(--primary-200);
                }
            }
        }

        .toggle-btn.utility-bar__item {
            margin: 7px 0;
            padding: 10px 20px;
            border: var(--border-base);
            @media (min-width: 768px) {
                margin: 12px 0;
            }

            span {
                font-weight: var(--font-weight-500);
            }
        }
    }

    .grid-container {
        padding: 0;
        background-color: var(--secondary-50);
    }

    .product-grid:not(.slider__grid) {
        padding: 0 var(--section-padding-mobile);
        column-gap: 3px;
        @media (min-width: 768px) {
            padding: 0 var(--section-padding-desktop) 0;
        }
    }
}

.filter-container {
    .filters {
        padding: 0;
        background-color: var(--white);
        @media (max-width: 999.98px) {
            right: initial;
            left: 100%;
        }

        @media (min-width: 1000px) {
            border: var(--border-base);
        }

        .filters__heading {
            display: flex;
            align-items: center;
            padding: 10px var(--section-padding-mobile);
            border-bottom: var(--border-base);
            @media (min-width: 1000px) {
                display: none;
            }
        }

        @media (max-width: 999.98px) {
            width: 100%;
        }
    }

    .cc-price-range__input-container {
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .cc-price-range__bar-active {
        background-color: var(--primary);
    }

    .cc-price-range__control::after {
        border: var(--border-base);
    }

    &.filter-container--show-filters-desktop {
        .filters {
            @media (min-width: 1000px) {
                margin-inline: var(--section-padding-desktop) -20px;
                padding: 25px;
            }
        }
    }

    .filter-group__applied-item {
        padding: 3px 7px 5px 3px;
        background: var(--primary-200);
        border-radius: 0;
    }

    .filter-group__applied-item__text {
        padding: 0 8px;
    }

    .filter-group__applied-item__icon svg {
        width: 8px;
        height: 8px;
    }

    &.filter-container--show-filters-mobile {
        .filters {
            @media (max-width: 999.98px) {
                transform: translate(-100%);
            }
        }
    }

    .filters__inner {
        @media (min-width: 1000px) {
            padding-inline-end: 0 !important;
        }
    }

    .filters__close {
        margin: 0;
    }

    .filter-group {
        padding-block-end: 10px;
        margin-block-end: 20px;
        border-bottom: var(--border-base);

        &:last-of-type {
            border-bottom: none;
        }
    }

    .filter-group__heading {
        align-items: center;
    }

    .filter-group__heading__text {
        margin-block-start: 0;
        font-family: var(--heading-font-family);
        font-size: var(--base-text-size-ml);
        text-transform: uppercase;
        font-weight: var(--font-weight-400);
    }

    .filter-group__heading__indicator {
        height: 16px;
        margin-inline-end: 10px;
        @media (min-width: 1000px) {
            margin-inline-end: 0;
        }

        .icon {
            width: 16px;
            height: 16px;
            stroke-width: 2;
        }
    }

    .filter-group__item {
        .filter-group__item__text {
            &::before {
                border-radius: 0;
            }
        }
    }

    .filter-group__item__text,
    .filter-group__item__count {
        color: var(--neutral-500);
    }
}

#CollectionFilterForm {
    padding: 0 var(--section-padding-mobile);
    @media (min-width: 1000px) {
        padding: 0;
    }
}