/*
* @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 {
    h1 {
        font-size: var(--title-size-h2-desktop);
    }

    .related-collection-links--gallery {
        margin-top: 0;
        background-color: var(--true-gray-400);

        h2 {
            color: var(--primary);
            font-size: var(--base-text-size-large);
        }

        .text-overlay__inner {
            padding: 8px;
        }
    }

    .header-without-image {
        margin-block-end: 30px;
        @media (min-width: 768px) {
            margin-block-end: 50px;
        }

        .related-collection-links {
            display: flex;
            justify-content: center;
            column-gap: 35px;
            flex-wrap: wrap;
        }

        .btn {
            &.btn--transparent {
                position: relative;
                flex:initial;
                color: var(--primary);
                backdrop-filter: initial;
                -webkit-backdrop-filter: initial;
                padding: 0 0 2px;
                border-bottom: 1px solid var(--secondary);
                letter-spacing: initial;

                &::before {
                    content: '';
                    opacity: 1;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 1px;
                    background-color: var(--primary);
                    transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
                }

                &:hover {
                    background-color: transparent;

                    &::before {
                        opacity: 0;
                        width: 0;
                    }
                }
            }
        }
    }

    .search-collection-page-header {
        margin-block-start: -30px;
        @media (min-width: 768px) {
            margin-block-start: -50px;
        }

        .search-page-button__container {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            margin-block-end: 30px;

            @media (min-width: 768px) {
                max-width: 770px;
                margin-inline: auto;
                flex-direction: row;
                justify-content: center;
                column-gap: 20px;
            }

            .btn {
                @media (min-width: 768px) {
                    width: 50%;
                }
            }
        }
    }

    .gallery--with-margins,
    .gallery--with-margins .gallery__item {
        margin: 0;
    }

    .gallery--mobile-carousel {
        .slider__grid {
            column-gap: 0;
            padding: 0;
        }

        .slider__item {
            img {
                border-right: 4x solid var(--secondary);
                border-left: 4px solid var(--secondary);
            }

            &:first-of-type {
                img {
                    border-left: none;
                }
            }

            &:last-of-type {
                img {
                    border-right: none;
                }
            }
        }
    }

    .gallery--grid-desktop-1,
    .gallery--grid-mobile-1 {
        img {
            border-right: none;
            border-left: none;
        }
    }

    .utility-bar {
        margin-top: 10px;
        margin-bottom: 40px;
    }

    .gallery--grid-mobile-1 {
        &.gallery--with-margins .gallery__item {
            flex-basis: calc(50% - var(--gallery-gutter));
        }
    }

    .text-overlay,
    .header-without-image {
        .btn {
            &.hidden {
                display: flex !important;
            }

            &.related-collection-links__expander {
                display: none !important;
            }
        }
    }

    .layout-switchers {
        align-items: center;
    }

    .layout-switch.layout-switch--one-column,
    .layout-switch.layout-switch--one-column svg {
        width: 16px;
        height: 16px;
    }

    .search-collection-page-header {
        + .header-without-image {
            display: none;
        }
    }

    .search-collection-page-content {
        @media (min-width: 1000px) {
            position: relative;
        }

        .utility-bar {
            .utility-bar__item {
                white-space: nowrap;
            }

            @media (max-width: 767.98px) {
                margin-top: 0;
                margin-bottom: 20px;
            }

            @media (min-width: 1000px) {
                position: absolute;
                top: -20px;
                right: 50%;
                display: flex;
                justify-content: flex-end;
            }

            .utility-bar__right {
                @media (min-width: 1000px) {
                    display: flex;
                    flex: initial;
                }

                .utility-bar__item {
                    @media (min-width: 1000px) {
                        margin-inline-start: 20px;
                    }
                }

                .link-dropdown__button {
                    @media (min-width: 1000px) {
                        width: auto !important;
                    }
                }
            }

            .utility-bar__left {
                @media (min-width: 1000px) {
                    display: none;
                }
            }
        }

        .filter-container {
            .filters {
                padding: 40px 0 20px;

                @media (min-width: 1000px) {
                    padding: 70px 0 20px;
                }
            }

            .filter-group__heading__indicator {
                margin-block-start: 3px;
            }

            .filter-group__heading__text {
                font-size: var(--base-text-size);

                &.head-title {
                    margin-top: 0;
                    color: var(--true-gray-450);
                }

                &:not(.head-title) {
                    font-size: var(--base-text-size-small);
                    font-family: var(--heading-font-family);
                    margin-inline-end: 16px;
                    margin-top: 0;
                }
            }

            .filter-group {
                position: relative;
                min-width: 0;
                margin-bottom: 8px;
                border-bottom: 0;

                .filter-group__items {
                    display: block;

                    &.toggle-target--hidden {
                        display: none;
                    }
                }

                &.is-hidden {
                    display: none;
                }
            }

            .filter-group__clear-link {
                margin-top: 0;
            }

            .filter-group__clear-row {
                margin-block: 0;
                margin-inline-start: 20px;
            }

            .filter-group--applied {
                display: flex;
                align-items: center;
                padding-inline-start: 0;
                margin-block-start: 20px;
                @media (max-width: 767.98px) {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .filter-group__heading__text {
                    margin-inline-end: 30px;
                }

                .filter-group__items {
                    display: flex;
                    align-items: center;
                    @media (max-width: 767.98px) {
                        flex-wrap: wrap;
                        gap: 10px;
                        margin-block-start: 10px;
                    }

                    .filter-group__applied-item {
                        margin-bottom: 0;
                        @media (max-width: 767.98px) {
                            margin: 0;
                        }

                        .filter-group__applied-item__text {
                            line-height: 2;
                        }

                        &.not-visible {
                            display: none;
                        }
                    }

                    .filter-group__clear-row {
                        @media (max-width: 767.98px) {
                            margin: 0;
                        }
                    }
                }

                > .filter-group__heading {
                    align-items: center;
                    padding-block: 0;

                    &.not-visible {
                        display: none;
                    }
                }
            }
        }

        .filter-group__heading__indicator svg {
            vertical-align: initial;
        }

        .filter-group__heading__text {
            &.desktop {
                display: none;
                @media (min-width: 1000px) {
                    display: block;
                }
            }
        }

        .filter-group__heading:not(.toggle-target-toggler--is-hidden) .filter-group__heading__indicator {
            transform: none;
        }

        .filter-container--side {
            flex-direction: column;

            .filters {
                width: 100%;

                .filters__inner {
                    display: flex;
                    flex-direction: column;
                    padding: 0;
                    @media (max-width: 767.98px) {
                        margin-block-end: 30px;
                    }
                }
            }

            #CollectionFilterForm {
                display: flex;
                justify-content: center;
                order: -1;
                column-gap: 16px;
                @media (max-width: 767.98px) {
                    flex-direction: column;
                    align-items: center;

                    .filter-group {
                        min-width: 300px;
                    }
                }

                .filter-group__heading {
                    padding: 9px 22px 4px;
                    border: var(--border-base);
                }

                    .filter-group__items {
                        position: absolute;
                        width: 100%;
                        right: 0;
                        top: 40px;
                        left: 0;

                        .toggle-target-container {
                            position: absolute;
                            top: 0;
                            left: 0;
                            max-height: 170px;
                            overflow-x: auto;
                            width: 100%;
                            padding: 5px 0;
                            visibility: visible;
                            opacity: 1;
                            z-index: 2;
                            white-space: nowrap;
                            transition: opacity 0.3s ease-in-out;
                            border: var(--border-base);
                            background-color: var(--secondary);
                            pointer-events: auto;

                            .filter-group--swatch & {
                                /* cancel the -7px grid-alignment margin from the base swatch layout, unused in this column layout */
                                margin-left: 0;
                            }
                        }

                        &.toggle-target--hidden {
                            .toggle-target-container {
                                visibility: hidden;
                                opacity: 0;
                            }
                        }
                    }

                .toggle-target-container {
                    display: flex;
                    flex-direction: column;
                    padding-block-end: 0;

                    .filter-group--layout-three-column & {
                        flex-direction: row;
                        flex-wrap: wrap;
                        gap: 12px;
                        padding-inline: 20px;
                    }

                    .filter-group__item {
                        width: auto;
                        padding: 5px 20px;
                        min-width: 0;
                        transition: background-color 0.3s ease-in-out;

                        .filter-group--layout-three-column & {
                            width: calc(33.33% - 8px);
                            padding: 0;

                            .filter-group__checkbox:checked + .filter-group__item__text {
                                box-shadow: none;
                            }
                        }

                        &:hover {
                            background-color: var(--true-gray-200);
                        }

                        .filter-group--swatch &:hover {
                            background-color: transparent;

                            .filter-group__item__text {
                                display: none;
                            }
                        }

                        .filter-group__item__text {
                            white-space: normal;

                            &::before,
                            svg {
                                visibility: hidden;
                                opacity: 0;
                            }

                            .filter-group--layout-three-column & {
                                padding-block: 5px;
                                min-height: 0;
                            }
                        }
                    }
                }

                .filter-group__heading__text {
                    &.head-title {
                        margin-inline-end: 5px;
                    }
                }
            }

            .toggle-target-container {
                .filter-group__item {
                    margin-block-end: 0;
                    border: none;
                    padding-inline-start: 0;
                }
            }
        }

        .toggle-btn[data-toggle-filters],
        .filter-shade,
        .layout-switchers {
            display: none;
        }

        .filter-container {
            .filters {
                position: static;
                transform: none;
                width: 100%;
                height: auto;
                overflow: visible;
                visibility: visible;
                opacity: 1;
                @media (max-width: 767.98px) {
                    padding: 0;
                }

                form {
                    @media (max-width: 767.98px) {
                        padding: 0;
                    }
                }
            }

            .filters__heading {
                display: none;
            }

            .filters__inner {
                padding: 0;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .template-collection,
    .template-search {
        .gallery--mobile-carousel.gallery--with-margins {
            .slider__grid {
                grid-auto-columns: calc(100% - 53px * 3);
            }
        }
    }
}

@media (min-width: 767.98px) {
    .template-collection,
    .template-search {
        h1 {
            margin-top: 60px;
            font-size: var(--base-text-size-xx-large);
        }

        .gallery--grid-desktop-1,
        .gallery--grid-desktop-2,
        .gallery--grid-desktop-3 {
            &.gallery--with-margins .gallery__item {
                flex-basis: calc(25% - var(--gallery-gutter));
            }
        }

        .gallery--grid-desktop-4 {
            &.gallery--with-margins .gallery__item {
                flex-basis: 25%;
            }
        }
    }
}

@media (min-width: 1300px) {
    .template-collection,
    .template-search {
        .related-collection-links--gallery {
            .text-overlay__inner {
                padding: 20px;
            }

            h2 {
                font-size: var(--base-text-size-x-large);
            }
        }
    }
}

.origin-watch-label.is-hidden {
    display: none;
}