/**
 * Product Listing Page Module
 */

/* ------- Animation ------- */
/* Product card fade-in (uses shared @keyframes fadeInMoveUp from legacy.css) */

#content .section.product_listing,
.section.product_listing {
    & .section-inner {
        & .product-cards-listing,
        & .browseCategoriesNew {
            & .row,
            & .product-cards {
                & .product-card {
                    & .product-card__outer-wrap.in-view {
                        animation: fadeInMoveUp 0.5s ease-out forwards;
                    }
                }
            }
        }
    }
}

/* ------- Product Listing — Main Styles ------- */

body:has(#navColumn) #content .section.product_listing .section-inner {
    max-width: 90vw;

    @media (min-width: 960px) {
        max-width: 1680px;
    }

    & .product-cards-listing.one_column {
        & .sortFilters .filters .sortCatSpan ul {
            @media (min-width: 960px) {
                background-color: #dcdde1;
            }
        }

        & .row .product-card .product-card__inner-wrap {
            background-color: #e6e6e4;
            background-image: linear-gradient(to bottom, #e6e6e4, #dcdde1);
            flex-direction: column;

            @media (min-width: 768px) {
                flex-direction: row;
            }
        }
    }
}

/* ------- Section Inner ------- */

#content .section.product_listing .section-inner,
.section.product_listing .section-inner {
    max-width: 1180px;
    margin: auto;
    & .after-content {
        margin-top: 60px;
    }

    & .text-center {
        max-width: 900px;
        margin: 0 auto 40px;

        & h1.section__heading,
        & h2.section__heading {
            line-height: 1em;
            color: var(--color-blue-dark);
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            clear: none;
            padding: 0px 0 0 0;
            letter-spacing: -0.015em;
            text-transform: uppercase;

            @media (min-width: 768px) {
                font-size: 32px;
            }

            @media (min-width: 960px) {
                font-size: 40px;
            }
        }

        & p {
            text-align: center;
        }

        & h2.section__heading span {
            color: #007994;
            font-style: italic;
        }

        & .section__body {
            font-size: clamp(1rem, 1.5vw, 1.25rem);
            font-weight: 500;
        }
    }

    /* ------- Product Cards & Browse Categories — Shared ------- */

    & .product-cards-listing,
    & .browseCategoriesNew {
        & .row {
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        & .product-card__cta-block {
            justify-content: space-between;
        }

        /* ------- Sort Filters & Category Wrapper ------- */

        & .sortFilters,
        & .catWrapper {
            margin-top: 0;
            display: block;

            & ul.filters,
            & .catInnerWrap {
                margin-bottom: 0;

                & span {
                    display: none;
                }

                & a.reset-button {
                    display: none;
                }

                & .sortCatSpan,
                & .catULwrap {
                    display: flex !important;
                    justify-content: center;
                    background-color: transparent;
                    padding: 0 0 0 0px;
                    margin: 0 -24px 0 -24px;

                    @media (min-width: 768px) {
                        margin: 0 0 0 0;
                    }

                    & ul {
                        background-color: transparent;
                        width: auto;
                        border-radius: 0;
                        align-items: flex-start;
                        display: flex;
                        flex-wrap: nowrap;
                        list-style: none;
                        margin: 1rem 0;
                        overflow-x: scroll;
                        padding: 0 0 0 1rem;
                        scroll-padding-left: 1rem;
                        scroll-snap-type: x mandatory;
                        scrollbar-width: none;
                        gap: 10px;

                        @media (min-width: 768px) {
                            padding: 4px;
                            border-radius: 22px;
                            background-color: #bebcb7;
                        }

                        &::-webkit-scrollbar {
                            display: none;
                        }

                        & li {
                            margin: 0;
                            scroll-snap-align: start;
                            scroll-snap-stop: always;
                            flex-shrink: 0;
                            white-space: nowrap;

                            & a {
                                font-size: 16px;
                                font-family: var(--font-body);
                                font-weight: 700;
                                display: inline-block;
                                margin: 0;
                                color: #212428;
                                background-color: #dcdde1;
                                border: 1px #b7b4ab solid;
                                border-radius: 20px;
                                margin-bottom: 8px;
                                padding: 4px 10px;

                                @media (min-width: 768px) {
                                    border: none;
                                    background-color: transparent;
                                    margin-bottom: 0;
                                }

                                &.active {
                                    background-color: #ffffff;
                                    color: #212428;
                                    border: 2px #212428 solid;

                                    @media (min-width: 768px) {
                                        border: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        /* ------- Product Card — Default (Six Column) ------- */

        & .row,
        & .product-cards {
            & .product-card {
                transition: none;
                padding: 0;
                max-width: 50%;
                margin-top: 20px;

                @media (min-width: 768px) {
                    max-width: 33.1%;
                }

                @media (min-width: 960px) {
                    max-width: 24.8%;
                    margin: 30px 0 0;
                    padding: 0;
                }

                @media (min-width: 1101px) {
                    max-width: 15.5%;
                    padding: 0;
                }

                & .product-card__outer-wrap {
                    padding: 0 15px;

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

                    & .product-card__inner-wrap {
                        & a:hover img {
                            opacity: 0.8;
                        }

                        & .product-card__image {
                            border-radius: 7px;
                            display: flex;
                            align-items: center;

                            & .product-card__image__inner {
                                height: auto;
                                width: 100%;
                                object-fit: contain;
                            }

                            &.imgFull.square,
                            & .imgFull.square {
                                aspect-ratio: 1/1;
                            }

                            &.imgFull.sixFive,
                            & .imgFull.sixFive {
                                aspect-ratio: 5/6;
                            }

                            &.imgFull.sevenFive,
                            & .imgFull.sevenFive {
                                aspect-ratio: 5/7;
                            }

                            &.imgFull.sixteenNine,
                            & .imgFull.sixteenNine {
                                aspect-ratio: 6/5;
                            }
                        }

                        & .product-card__image-wrap {
                            position: relative;
                        }

                        & .product-card__title {
                            position: relative;
                            background-color: transparent;
                            padding: 8px 0px 10px 0px;

                            & h3.columns__item-title {
                                margin: 0;
                                font-size: 16px;
                                line-height: 1.2em;
                                font-family: var(--font-body);
                                font-weight: 600;
                                width: 100%;
                                text-align: center;
                            }

                            & h4.columns__item-subhead,
                            & .content-text h3 {
                                margin: 0;
                                font-size: 14px;
                                width: 100%;
                                font-style: oblique;
                                text-align: center;
                            }

                            & p {
                                font-size: 14px;
                                margin: 0;
                                text-align: center;
                            }
                        }
                    }

                    & .product-card__text {
                        & .product-card__features {
                            font-size: 14px;
                            color: #212428;
                            padding: 0;
                        }

                        & .product-card__cta-block {
                            padding: 10px 0 20px 0;

                            & .button-text-link-sm {
                                margin-bottom: 0;
                            }
                        }

                        & .product-card__body {
                            height: auto;
                            border-radius: 7px 7px 0px 0px;
                        }
                    }
                }
            }
        }

        /* ------- Five Column Layout ------- */

        &.five_column {
            & .row,
            & .product-cards {
                & .product-card {
                    max-width: 50%;
                    margin-top: 20px;

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

                    @media (min-width: 960px) {
                        max-width: 33.1%;
                        margin: 30px 0 0;
                        padding: 0;
                    }

                    @media (min-width: 1101px) {
                        max-width: 20%;
                        padding: 0;
                    }
                }
            }
        }

        /* ------- One Column Layout ------- */

        &.one_column {
            & .row,
            & .product-cards {
                & .product-card {
                    max-width: 100%;
                    margin-top: 20px;

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

                    @media (min-width: 960px) {
                        max-width: 100%;
                        margin: 30px 0 0;
                        padding: 0;
                    }

                    @media (min-width: 1101px) {
                        max-width: 100%;
                        padding: 0;
                    }

                    & .product-card__outer-wrap .product-card__inner-wrap {
                        flex-direction: row;

                        & .product-card__image-wrap {
                            width: 100%;

                            @media (min-width: 768px) {
                                width: 25%;
                            }
                        }

                        & .product-card__text-wrap {
                            width: 100%;

                            @media (min-width: 768px) {
                                width: 75%;
                            }
                        }
                    }
                }
            }
        }

        /* ------- Four Column Layout ------- */

        &.four_column {
            & .row,
            & .product-cards {
                & .product-card {
                    max-width: 49.8%;
                    margin-top: 20px;

                    @media (min-width: 768px) {
                        max-width: 49.8%;
                    }

                    @media (min-width: 960px) {
                        max-width: 33.1%;
                        margin: 30px 0 0;
                        padding: 0;
                    }

                    @media (min-width: 1101px) {
                        max-width: 24.8%;
                        padding: 0;
                    }
                }
            }
        }

        /* ------- Two Column Layout ------- */

        &.two_column {
            & .row,
            & .product-cards {
                & .product-card {
                    max-width: 100%;

                    @media (min-width: 960px) {
                        max-width: 49.8%;
                        margin: 30px 0 0;
                    }

                    @media (min-width: 1101px) {
                        max-width: 49.8%;
                    }

                    & .product-card__outer-wrap {
                        & .inner-wrapper {
                            padding: 10px 20px 20px 20px;

                            & .product-card__title h4 {
                                font-size: 32px;

                                @media (min-width: 768px) {
                                    font-size: 40px;
                                }
                            }

                            & .product-card__details {
                                display: flex;
                                flex-direction: column;
                                flex-grow: 1;
                                justify-content: space-between;

                                & p {
                                    font-size: 16px;

                                    @media (min-width: 768px) {
                                        font-size: 20px;
                                    }
                                }

                                & .product-card__dimensions {
                                    width: 100%;
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: normal;
                                    justify-content: space-between;

                                    & .dimensions {
                                        display: flex;
                                        flex-direction: column;
                                        width: auto;
                                        padding: 0px 20px 0px 0px;
                                        margin: 0px 10px 0px 0px;

                                        @media (min-width: 768px) {
                                            margin: 20px 0px 0px 0px;
                                        }

                                        & p {
                                            font-family: var(--font-body);
                                            font-weight: 700;
                                            margin: 0 0 0 0;
                                            font-size: 16px;
                                        }

                                        & h5,
                                        &
                                            body.page-template-onecolumn-page-php
                                            #content
                                            .liftProducts
                                            .product-items.fullWidthH
                                            h2 {
                                            font-size: 18px;

                                            @media (min-width: 768px) {
                                                font-size: 32px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* ------- After Content ------- */

    & .afterContent {
        margin-top: 40px;

        & .afterText .afterInner .section__body {
            & p,
            & em {
                font-size: 16px;
                line-height: 28px;
            }
        }
    }
}

#content .section.product_listing-page.product_listing .section-inner {
    max-width: 1680px;
}
/* ------- Mobile Sort Filters Override ------- */

@media (max-width: 767px) {
    .section.product_listing
        .section-inner
        .product-cards-listing
        .sortFilters {
        margin-left: -20px;
        margin-right: -20px;

        & ul.filters {
            margin-left: 0;
            padding-left: 20px;
            overflow: hidden;

            & .sortCatSpan {
                margin: 0;
                overflow-x: auto;

                & ul {
                    flex-wrap: nowrap;
                    white-space: nowrap;
                    display: flex;
                    padding-left: 40px;
                    padding-right: 40px;

                    & li {
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}

/* ------- Product Listing Page — Card Layout ------- */

#content .section.product_listing-page .section-inner .product-cards-listing,
.section.product_listing-page .section-inner .product-cards-listing {
    & .row,
    & .product-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        & .product-card {
            display: flex;
            height: auto;
            max-width: 100%;

            @media (min-width: 960px) {
                max-width: 49.8%;
            }

            & .product-card__outer-wrap {
                flex: 1 1 auto;
                display: flex;

                & .product-card__inner-wrap {
                    flex: 1 1 auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    height: 100%;
                    min-height: 100%;
                    background-color: #fff;
                    border-radius: 7px;
                    padding: 20px 20px 20px 20px;

                    @media (min-width: 768px) {
                        flex-direction: row;
                    }

                    & .product-card__image-wrap {
                        width: 100%;
                        flex: 0 0 auto;

                        @media (min-width: 768px) {
                            width: 45%;
                        }

                        & .product-card__image {
                            border-radius: 0;
                            display: flex;
                            align-items: center;

                            & .product-card__image__inner {
                                height: auto;
                                width: 100%;
                                object-fit: contain;
                            }
                        }
                    }

                    & .product-card__text-wrap {
                        width: 100%;
                        flex: 1 1 auto;
                        display: flex;
                        flex-direction: column;
                        padding-left: 20px;

                        @media (min-width: 768px) {
                            width: 44%;
                        }

                        & .product-card__title {
                            padding: 0px 0px 0px 0px;

                            & h3.columns__item-title {
                                font-size: clamp(1.25rem, 3vw, 1.5rem);
                                line-height: 1.1em;
                                font-family: var(--font-body);
                                font-weight: 600;
                                text-align: left;
                                margin: 10px 0;
                            }

                            & h4.columns__item-subhead,
                            & .content-text h3 {
                                font-size: clamp(1.05rem, 3vw, 1.25rem);
                                font-family: var(--font-condensed);
                                color: #5f6a75;
                                font-weight: 600;
                                font-style: oblique;
                                text-align: left;
                                margin-bottom: 10px;
                            }

                            & .content-text {
                                & p {
                                    font-size: 14px;
                                    margin: 0 0 10px 0;
                                    text-align: left;
                                }

                                & ul {
                                    margin-top: 12px;

                                    & li {
                                        font-size: 14px;
                                        margin: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }

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

    /* ------- Product Listing Page — Four Column Override ------- */

    &.four_column {
        & .row,
        & .product-cards {
            &
                .product-card
                .product-card__outer-wrap
                .product-card__inner-wrap {
                flex-direction: column;

                & .product-card__image-wrap,
                & .product-card__text-wrap {
                    width: 100%;
                    padding: 0;
                }
            }
        }
    }
}

/* ------- Global Hidden State ------- */

.product-cards-listing .product-card.is-hidden {
    display: none !important;
}