.dr-affiliate-disclosure{
    border-radius: 4px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.4);
    border-left: 3px solid var(--primary-color);
    p{
        margin: 0;
    }
}

.wpd {
    &-tag {
        display: inline-block;
        background-color: #FB8C56;
        padding: 5.5px 14px;
        border-radius: 4px 20px 20px 0;
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1;
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 4px;
            height: 4px;
            background-color: #FB8C56;
        }

        &::before {
            height: 2px;
        }

        &::after {
            border-radius: 4px 0 0 4px;
            background-color: #C35824;
        }
    }

    &-equipment {
        position: relative;
        background-color: #ffffff;
        border: 1px solid rgba(#000000, .1);

        &-toolbar {
            display: flex;
            flex-direction: column-reverse;
            gap: 16px;
            margin: 0 0 24px;

            @media(min-width: 768px) {
                align-items: flex-start;
                flex-direction: row;
                gap: 10%;
                margin: 0 0 40px;
            }

            button {
                background: none;
                border: none;
                font-size: 16px;
                font-weight: 500;
                color: #505050;
                min-height: unset;
                white-space: nowrap;
                cursor: pointer;

                &.wpd-equipment-search-btn,
                &[class*="-view"] {
                    background: none !important;
                    border: none !important;
                    color: #505050 !important;
                }

                &:hover,
                &.is-active {
                    color: var(--primary-color) !important;
                }
            }
        }

        &-sort {
            font-size: 14px;

            label {
                font-size: 1em;
            }

            select {
                appearance: none;
                background: none;
                padding: 8px;
                border: none;
                height: unset;
                font-size: 1em;
                background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.7194 0.772965C9.54166 0.594067 9.30123 0.493652 9.05062 0.493652C8.80001 0.493652 8.55958 0.594067 8.38184 0.772965L4.97628 4.17322L1.61816 0.772965C1.44042 0.594067 1.19999 0.493652 0.94938 0.493652C0.698767 0.493652 0.458337 0.594067 0.280601 0.772965C0.191688 0.862259 0.121116 0.968494 0.0729554 1.08554C0.0247951 1.20259 0 1.32814 0 1.45494C0 1.58174 0.0247951 1.70728 0.0729554 1.82433C0.121116 1.94138 0.191688 2.04762 0.280601 2.13691L4.30276 6.20953C4.39095 6.29956 4.49587 6.37102 4.61147 6.41978C4.72706 6.46855 4.85105 6.49365 4.97628 6.49365C5.10151 6.49365 5.2255 6.46855 5.3411 6.41978C5.4567 6.37102 5.56162 6.29956 5.64981 6.20953L9.7194 2.13691C9.80831 2.04762 9.87888 1.94138 9.92704 1.82433C9.9752 1.70728 10 1.58174 10 1.45494C10 1.32814 9.9752 1.20259 9.92704 1.08554C9.87888 0.968494 9.80831 0.862259 9.7194 0.772965Z' fill='%23111111'/%3E%3C/svg%3E%0A");
                background-size: 10px 6px;
                background-repeat: no-repeat;
                background-position: right center;
                padding-right: 16px;
            }
        }

        &-search {
            position: relative;

            .wpd-equipment-search-input {
                border-radius: 4px;
                height: 36px;
                padding: 10px 16px;
                width: auto !important;
                border: 1px solid rgba(#000000, .1);
            }

            &-field {
                position: absolute;
                top: 100%;
                left: 0;
                transform: translate(-16px, 20px);
                transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
                visibility: hidden;
                opacity: 0;

                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid rgba(#000000, .1);
                    border-right: 2px solid rgba(#000000, .1);
                    border-radius: 4px;
                    position: absolute;
                    left: 20px;
                    bottom: 100%;
                    background-color: #ffffff;
                    transform: translateY(50%) rotate(-45deg);
                }

                @media(min-width: 768px) {
                    left: auto;
                    right: 0;
                    transform: translate(16px, 20px);

                    &::before {
                        left: auto;
                        right: 20px;
                    }
                }
            }

            &.is-search-open {
                .wpd-equipment-search-field {
                    visibility: visible;
                    opacity: 1;
                    transform: translate(-16px, 10px);

                    @media(min-width: 768px) {
                        transform: translate(16px, 10px);
                    }
                }
            }
        }

        .wpd-equipment {
            &-tags {
                position: absolute;
                left: 0;
                top: 16px;
                transform: translateX(-4px);
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            &-image-wrap {
                padding: 16px;
                img {
                    aspect-ratio: 24 / 19;
                    max-width: 100%;
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                }

                .image-placeholder {
                    height: 254px;
                    width: auto;
                    background-color: rgba($color: #000000, $alpha: 0.2)
                }
            }

            &-title,
            h3.wpd-equipment-title {
                font-size: 24px;
                line-height: 1.5;
                margin: 0 0 8px;
            }

            &-content {
                margin: 0 0 24px;
                font-size: 16px;
                line-height: 1.5;

                p {
                    margin-top: 0;
                }

                ul,
                ol {
                    margin: 0 0 16px 18px;

                    li {
                        margin: 0 0 12px;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }

                ol{
                    padding-left: 0;
                }

                ul {
                    list-style: none;
                    margin-left: 0;
                    padding: 0;

                    li {
                        position: relative;
                        padding-left: calc(1.12em + 8px);
                        line-height: 1.5;

                        &::before {
                            content: "" !important;
                            width: 1.12em;
                            height: 1.12em;
                            background-color: var(--primary-color);
                            mask: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1540_270)'%3E%3Cpath d='M18.3333 10.2122V10.9789C18.3323 12.7759 17.7504 14.5244 16.6744 15.9637C15.5984 17.403 14.086 18.4559 12.3628 18.9654C10.6395 19.475 8.79768 19.4138 7.11202 18.791C5.42636 18.1682 3.98717 17.0173 3.00909 15.5097C2.03101 14.0022 1.56645 12.2189 1.68469 10.4258C1.80293 8.63265 2.49763 6.92579 3.66519 5.55974C4.83275 4.1937 6.41061 3.24167 8.16345 2.84564C9.91629 2.44961 11.7502 2.6308 13.3916 3.36218M18.3333 4.31218L9.99996 12.6539L7.49996 10.1539' stroke='%232DB68D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1540_270'%3E%3Crect width='20' height='20' fill='white' transform='translate(0 0.978882)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
                            mask-repeat: no-repeat;
                            mask-size: 100% 100%;
                            mask-position: center;
                            position: absolute;
                            left: 0;
                            top: 0.1em;
                        }
                    }
                }

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

            &-btn {
                text-decoration: none !important;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.75;
                padding: 10px 16px;
                background-color: var(--primary-color);
                color: #ffffff !important;
                border-radius: 50px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                gap: 8px;

                &::after {
                    content: "";
                    display: inline-block;
                    width: 1.125em;
                    height: 1.125em;
                    background-color: currentColor;
                    mask: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1616 19.6812L9.43573 17.9745L15.4283 11.982H0.375V9.48906H15.4283L9.43573 3.5061L11.1616 1.78984L20.1072 10.7355L11.1616 19.6812Z' fill='black'/%3E%3C/svg%3E%0A");
                    mask-repeat: no-repeat;
                    mask-size: 100% 100%;
                    mask-position: center;
                    transition: all .3s;
                }

                &:hover {
                    background-color: var(--secondary-color);
                    color: #ffffff;

                    &::after {
                        transform: translate3d(4px, 0, 0);
                    }
                }

                @media(min-width: 768px) {
                    padding: 11px 32px;
                }
            }
        }
    }

    &-filters-button-group {
        flex: 1;
        display: flex;
        gap: 8px;
        overflow: auto;
        padding-bottom: 16px;
        max-width: 100%;
        position: relative;
        min-height: 52px;

        button {
            padding: 10px 16px;
            border-radius: 6px;
            position: relative;
            background: none !important;
            color: #505050 !important;
            border: none !important;
            transition: all .3s;
            transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

            &.hidden {
                visibility: hidden;
                opacity: 0;
            }

            &:hover,
            &.is-active {
                background-color: var(--primary-color) !important;
                color: #ffffff !important;

                &::after {
                    border-color: var(--primary-color);
                }
            }

            &.is-active {
                &::after {
                    content: "";
                    border: 8px solid transparent;
                    border-top-color: var(--primary-color);
                    position: absolute;
                    bottom: -16px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }

    &-actions-group {
        margin-left: auto;
        display: flex;
        align-items: center;
        min-height: 36px;

        button {
            padding: 0;

            svg {
                pointer-events: none;
                vertical-align: middle;
            }
        }

        >* {
            display: flex;
            align-items: center;
            gap: 8px;

            &:not(:first-child) {
                margin-left: 16px;
                padding-left: 16px;
                border-left: 1px solid rgba(#000, .3);
            }
        }
    }

    &-equipments {
        &[data-layout="grid"] {
            display: flex;
            flex-wrap: wrap;
            margin: -10px;

            .wpd-equipment-item-wrap {
                padding: 10px;
                width: 100%;
            }

            .wpd {
                &-equipment {
                    border-radius: 8px;

                    &-title {
                        font-size: 18px;
                        font-weight: 600;
                    }

                    &-image-wrap {
                        img {
                            border-radius: 8px 8px 0 0;
                            object-fit: contain;
                            aspect-ratio: 8 / 5;
                        }
                    }

                    &-details-wrap {
                        padding: 16px;
                        border-top: none;
                    }

                    &-btn {
                        display: flex;
                        border: 2px solid var(--primary-color);
                        background: none;
                        color: #212728 !important;

                        &::after {
                            color: var(--primary-color);
                        }

                        &:hover {
                            background-color: var(--primary-color);
                            color: #ffffff !important;

                            &::after {
                                color: #ffffff;
                            }
                        }
                    }

                    @media(min-width: 768px) {
                        &-title {
                            font-size: 24px;
                        }

                        &-content {
                            font-size: inherit;
                        }
                    }
                }
            }

            @media(min-width: 768px) {
                .wpd-equipment-item-wrap {
                    flex: 0 0 50%;
                    width: 50%;
                }

                @for $i from 1 through 2 {
                    &[data-items="#{$i}"] {
                        $width: calc(100% / #{$i});

                        .wpd-equipment-item-wrap {
                            flex: 0 0 $width;
                            width: $width;
                        }
                    }
                }
            }

            @media(min-width: 1025px) {
                .wpd-equipment-item-wrap {
                    flex: 0 0 33.333%;
                    width: 33.333%;
                }

                @for $i from 3 through 5 {
                    &[data-items="#{$i}"] {
                        $width: calc(100% / #{$i});

                        .wpd-equipment-item-wrap {
                            flex: 0 0 $width;
                            width: $width;
                        }
                    }
                }
            }

        }

        &[data-layout="list"] {
            // width: 100%;
            .wpd {
                &-equipment {
                    border-radius: 16px;
                    box-shadow: 0px 16px 24px -16px #00000029;

                    @media(min-width: 768px) {
                        display: flex;
                        gap: 16px;
                    }

                    &-item-wrap {
                        width: 100%;
                        margin: 0 0 40px;
                    }

                    &-tags {
                        left: 0;
                        top: 32px;
                    }

                    &-image-wrap {
                        img {
                            border-radius: 8px;
                        }
                    }

                    &-title {
                        font-size: 18px;
                        line-height: 1.3;
                        font-weight: 600;
                        margin: 0 0 16px;
                        padding: 0 0 16px;
                        position: relative;

                        &::after {
                            content: "";
                            width: 48px;
                            height: 2px;
                            background-color: var(--secondary-color);
                            position: absolute;
                            left: 0;
                            bottom: 0;
                        }
                    }

                    &-details-wrap {
                        width: 100%;
                        padding: 0 16px 21px;
                    }

                    @media(min-width: 768px) {

                        &-image-wrap {
                            flex: 0 0 42%;
                            width: 42%;
                            a{
                                display: block;
                            }
                        }

                        &-details-wrap{
                            padding: 21px 16px;
                            flex: 0 0 calc(58% - 16px);
                            width: calc(58% - 16px);
                        }

                        &-title {
                            font-size: 32px;
                            margin: 0 0 24px;
                            padding: 0 0 18px;
                        }

                    }
                }
            }
        }
    }
}