/*
    Block: Product Summary
    Note: Selectors must start with .block-product-summary
*/

@layer blocks {
    .block-product-summary .block-head {
        margin-bottom: 5rem;
        gap: 2.5rem;
    }

    .block-product-summary .block-head + .listing--technique {
        margin-top: 10rem;
    }

    .block-product-summary .listing-types {
        list-style: none;
        padding: 0;
        margin: 0;
        gap: .5rem;
    }

    .block-product-summary .listing-type {
        text-decoration: none;
        background: none;
        padding: .875rem 1.125rem;
        border: 0;
        color: var(--c-light-grey);
        border-radius: 100vw;
    }

    .block-product-summary .listing-type.active {
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
        color: var(--c-dark-blue);
        background-color: rgb(from var(--c-blue) r g b / .05);
    }

    .block-product-summary .listing-type::before {
        display: none;
    }

    .block-product-summary .listing-data:is(.listing--product_line, .listing--measurement_type) {
        --cols: 3;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: 3.25rem 1.25rem;
    }

    .block-product-summary .listing-data:is(.listing--technique, .listing--measurement_type_lvl2) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 5rem;
    }

    .block-product-summary .sidebar {
        --transition-dur: 180ms;
        --transition-func: ease-in-out;
        -ms-flex-preferred-size: 26.1%;
            flex-basis: 26.1%;
        position: sticky;
        top: var(--header-height);
        padding: 2.5rem;
        background-color: #F4F5F7;
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-product-summary .sidebar__title {
        margin-block: 0 2.5rem;
        font-size: var(--fs-18-24);
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -.06em;
        color: var(--c-blue);
    }

    .block-product-summary .sidebar__links {
        gap: 1.875rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .block-product-summary .sidebar__link {
        position: relative;
        display: inline-block;
        text-decoration: none;
        text-wrap: nowrap;
        -webkit-transition: var(--transition-dur) var(--transition-func);
        transition: var(--transition-dur) var(--transition-func);
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }

    .block-product-summary .sidebar__link::before {
        -webkit-transition: opacity var(--transition-dur) var(--transition-func);
        transition: opacity var(--transition-dur) var(--transition-func);
    }

    .block-product-summary .sidebar__link:not(.active) {
        --x: calc(1em - .25rem);
        opacity: .5;
        -webkit-transform: translateX(calc(-1 * var(--x)));
            -ms-transform: translateX(calc(-1 * var(--x)));
                transform: translateX(calc(-1 * var(--x)));
        clip-path: polygon(var(--x) 0, 100% 0, 100% 100%, var(--x) 100%);
    }

    .block-product-summary .sidebar__link:not(.active)::before {
        opacity: 0;
    }

    .block-product-summary .sidebar__link:is(:hover, :focus) {
        opacity: 1;
    }

    .block-product-summary .terms-list {
        -ms-flex-preferred-size: 66%;
            flex-basis: 66%;
        gap: 6.25rem;
    }

    .block-product-summary .terms-list > :not(:last-child) {
        padding-bottom: 6.25rem;
        border-bottom: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-product-summary .term__name {
        margin: 0;
    }

    .block-product-summary .term__description {
        max-width: 40.9375rem;
        margin-block: 2.1875rem 0;
    }

    .block-product-summary .term__posts {
        --cols: 2;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: 3.25rem 1.25rem;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 3.125rem;
    }

    .block-product-summary .listing-card {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 2.5rem;
        height: auto !important;
    }

    .block-product-summary .listing-card .image-wrapper {
        aspect-ratio: .919;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        background-color: #E9EAEB;
    }

    .block-product-summary .listing-card .image-wrapper .card__image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .block-product-summary .listing-card .card__title {
        margin-block: 0;
    }

    .block-product-summary .listing-card .card__excerpt {
        margin-block: 1.5rem 0;
        padding-right: 2.5rem;
    }

    .block-product-summary .listing-card .card__link {
        margin-top: auto;
    }

    @media screen and (width > 920px) {
        .block-product-summary .listing-type {
            --transition-dur: 120ms;
            --transition-func: ease-in-out;
            -webkit-transition: color var(--transition-dur) var(--transition-func);
            transition: color var(--transition-dur) var(--transition-func);
        }

        .block-product-summary .listing-type:is(:hover, :focus) {
            color: var(--c-dark-blue);
        }

        .block-product-summary .listing-card {
            --transition-dur: 180ms;
            --transition-func: ease-in-out;
        }

        .block-product-summary .listing-card .image-wrapper {
            -webkit-transition: background-color var(--transition-dur) var(--transition-func);
            transition: background-color var(--transition-dur) var(--transition-func);
        }

        .block-product-summary .listing-card .image-wrapper .card__image {
            -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
        }

        .block-product-summary .listing-card:is(:hover, :focus-within) .image-wrapper {
            background-color: #00000005;
        }

        .block-product-summary .listing-card:is(:hover, :focus-within) .image-wrapper .card__image {
            -webkit-transform: scale(1.03);
                -ms-transform: scale(1.03);
                    transform: scale(1.03);
        }
    }

    @media screen and (width <= 620px) {
        .block-product-summary .block-head {
            margin-bottom: 3.25rem;
            gap: 2rem;
        }

        .block-product-summary .block-head + .listing--technique {
            margin-top: 5rem;
        }

        .block-product-summary .listing-data:is(.listing--product_line, .listing--measurement_type) {
            --cols: 2;
            row-gap: 2.5rem;
        }

        .block-product-summary .listing-data:is(.listing--technique, .listing--measurement_type_lvl2) {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                    align-items: stretch;
            gap: 3.25rem;
        }

        .block-product-summary .sidebar {
            -ms-flex-preferred-size: unset;
                flex-basis: unset;
            position: static;
            padding: 1.875rem;
        }

        .block-product-summary .sidebar__title {
            margin-bottom: 1.875rem;
        }

        .block-product-summary .sidebar__links {
            gap: 1.5rem;
        }

        .block-product-summary .term__description {
            margin-top: 1.5rem;
        }

        .block-product-summary .term__posts {
            margin-top: 2.5rem;
            row-gap: 2.5rem;
        }

        .block-product-summary .terms-list {
            gap: 3.25rem;
        }

        .block-product-summary .terms-list > :not(:last-child) {
            padding-bottom: 3.25rem;
        }
    }

    @media screen and (width <= 420px) {
        .block-product-summary .wrap {
            --page-padding: 1.5rem;
        }

        .block-product-summary .listing-data {
            padding-inline: .5625rem;
        }

        .block-product-summary .listing-types {
            margin-inline: calc(-1 * var(--offset));
            padding-inline: var(--offset);
            width: 100vw;
            overflow-x: auto;
            scrollbar-width: 0;
            gap: 0;
        }

        .block-product-summary .listing-types::-webkit-scrollbar {
            display: none;
        }

        .block-product-summary .listing-type {
            text-wrap: nowrap;
            padding: .75rem 1.125rem;
        }

        .block-product-summary .listing-data:is(.listing--product_line, .listing--measurement_type) {
            --cols: 1;
        }

        .block-product-summary .listing-card {
            gap: 1.875rem;
        }

        .block-product-summary .listing-card .image-wrapper {
            aspect-ratio: .944;
        }

        .block-product-summary .listing-card .card__excerpt {
            margin-top: 1.25rem;
            padding-right: 0;
        }

        .block-product-summary .term__posts {
            --cols: 1;
        }
    }
}