.wd-tools-element {
    position: relative;
    --wd-header-el-color: #333;
    --wd-header-el-color-hover: rgba(51,51,51,.6);
    --wd-tools-icon-base-width: 20px
}

    .wd-tools-element > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        color: var(--wd-header-el-color);
        line-height: 1;
        padding-inline: 10px
    }

    .wd-tools-element .wd-tools-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0
    }

        .wd-tools-element .wd-tools-icon:before {
            font-size: var(--wd-tools-icon-base-width)
        }

    .wd-tools-element .wd-tools-text {
        margin-inline-start: 8px;
        text-transform: var(--wd-header-el-transform);
        white-space: nowrap;
        font-weight: var(--wd-header-el-font-weight);
        font-style: var(--wd-header-el-font-style);
        font-size: var(--wd-header-el-font-size);
        font-family: var(--wd-header-el-font)
    }

    .wd-tools-element .wd-tools-count {
        z-index: 1;
        width: var(--wd-count-size,15px);
        height: var(--wd-count-size,15px);
        border-radius: 50%;
        text-align: center;
        letter-spacing: 0;
        font-weight: 400;
        line-height: var(--wd-count-size,15px)
    }

    .wd-tools-element:hover > a {
        color: var(--wd-header-el-color-hover)
    }

    .wd-tools-element.wd-style-icon .wd-tools-text {
        display: none !important
    }

.whb-top-bar .wd-tools-element {
    --wd-count-size: 13px;
    --wd-tools-icon-base-width: 14px
}

    .whb-top-bar .wd-tools-element .wd-tools-text {
        font-weight: 400;
        font-size: 12px
    }

.whb-color-light .wd-tools-element {
    --wd-header-el-color: #fff;
    --wd-header-el-color-hover: rgba(255,255,255,.8)
}

.wd-custom-icon, picture.wd-custom-icon img {
    max-width: var(--wd-tools-icon-width,38px);
    width: var(--wd-tools-icon-width,revert-layer);
    transition: all .25s ease
}

.wd-tools-custom-icon .wd-tools-icon:before, .wd-tools-custom-icon .wd-tools-icon:after {
    display: none
}

.wd-tools-custom-icon:hover .wd-custom-icon {
    opacity: .6
}

.wd-tools-element:is(.wd-design-2,.wd-design-5).wd-style-icon.wd-with-count {
    margin-inline-end: 5px
}

.wd-tools-element:is(.wd-design-2,.wd-design-5).wd-style-text.wd-with-count .wd-tools-text {
    margin-inline-start: 14px
}

.wd-tools-element:is(.wd-design-2,.wd-design-5) .wd-tools-count {
    position: absolute;
    top: -5px;
    inset-inline-end: -9px;
    background-color: var(--wd-primary-color);
    color: #fff;
    font-size: 9px
}

.wd-tools-element.wd-design-1.wd-with-count .wd-tools-count {
    margin-inline-start: 8px
}

.wd-tools-element.wd-design-1 .wd-tools-count {
    width: auto;
    height: auto;
    text-transform: var(--wd-header-el-transform);
    font-weight: var(--wd-header-el-font-weight);
    font-style: var(--wd-header-el-font-style);
    font-size: var(--wd-header-el-font-size);
    font-family: var(--wd-header-el-font);
    line-height: inherit
}

.wd-tools-element.wd-design-1 .subtotal-divider {
    display: inline
}

.wd-tools-element.wd-design-4 {
    --wd-count-size: 19px
}

    .wd-tools-element.wd-design-4.wd-with-count .wd-tools-count {
        margin-inline-start: 6px
    }

    .wd-tools-element.wd-design-4 .wd-tools-count {
        display: inline-block;
        padding: 0 2px;
        background-color: var(--wd-primary-color);
        color: #fff;
        font-weight: 700;
        font-size: 10px
    }

.whb-top-bar .wd-tools-element.wd-design-4 {
    --wd-count-size: 16px
}

.wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) {
    --wd-count-size: 18px
}

    .wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) .wd-tools-inner {
        position: relative
    }

        .wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) .wd-tools-inner .wd-tools-icon {
            position: static
        }

    .wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) .wd-custom-icon {
        max-width: var(--wd-tools-icon-width,var(--wd-tools-icon-base-width))
    }

    .wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) .wd-tools-count {
        position: absolute;
        top: -3px;
        inset-inline-end: -7px;
        background-color: #fff;
        box-shadow: 0 0 4px rgb(0 0 0 / .17);
        color: var(--wd-primary-color);
        font-size: 11px
    }

.whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7,.wd-design-8) {
    --wd-count-size: 13px
}

.wd-tools-element:is(.wd-design-6,.wd-design-7) {
    --wd-tools-sp: 13px
}

    .wd-tools-element:is(.wd-design-6,.wd-design-7) :is(.wd-tools-inner,.wd-tools-icon) {
        height: 42px;
        border-radius: 42px
    }

    .wd-tools-element:is(.wd-design-6,.wd-design-7) .wd-tools-inner {
        display: flex;
        align-items: center;
        padding: 0 var(--wd-tools-sp)
    }

    .wd-tools-element:is(.wd-design-6,.wd-design-7):not(.wd-with-wrap) .wd-tools-icon {
        width: 42px
    }

.whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7) {
    --wd-tools-sp: 9px
}

    .whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7) :is(.wd-tools-inner,.wd-tools-icon) {
        height: 28px
    }

    .whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7):not(.wd-with-wrap) .wd-tools-icon {
        width: 28px
    }

    .whb-top-bar .wd-tools-element:is(.wd-design-6,.wd-design-7) .wd-tools-count {
        font-size: 9px
    }

.wd-tools-element.wd-design-6 > a > :is(.wd-tools-inner,.wd-tools-icon) {
    border: 1px solid rgb(0 0 0 / .105)
}

.whb-color-light .wd-tools-element.wd-design-6 > a > :is(.wd-tools-inner,.wd-tools-icon) {
    border-color: rgb(255 255 255 / .25)
}

.wd-tools-element.wd-design-7 > a > :is(.wd-tools-inner,.wd-tools-icon) {
    background-color: var(--wd-primary-color);
    color: #fff;
    transition: inherit
}

.wd-tools-element.wd-design-7:hover > a > :is(.wd-tools-inner,.wd-tools-icon) {
    color: rgb(255 255 255 / .8)
}