:root {
    --transition-s: var(--ec-duration-s);
    --transition-m: var(--ec-duration-m);
    --transition-l: var(--ec-duration-l);
    --__slider-btn-size: calc(50% - (50px * 7) / 2)
}

:where(:focus-visible) {
    outline: none;
}

@media screen and (min-width: 52.5rem) {

    input:where([type="text"], [type="url"], [type="email"], [type="tel"], [type="search"], [type="password"], .input-text):focus-visible,
    textarea:focus-visible,
    :has(.coupon-code:focus) .apply_coupon {
        /*outline: 1px solid var(--ec-white);*/
        border: 1px solid var(--ec-white);
        border-radius: var(--rounded-corners);
    }
}

input[type="number"]:focus-visible,
.qty,
.tm-qty:focus-visible {
    outline: 0
}

.menu-hamburger,
.search-inactive {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--ec-duration-s) ease-in-out, opacity var(--ec-duration-s);
    transform-origin: center
}

.burger-open .menu-cross,
.wpwp-search-button-active .menu-cross {
    transform: scale(1) translate(-3px, 2px);
    opacity: 1
}

.burger-open .menu-hamburger,
.wpwp-search-button-active .search-inactive {
    transform: scale(0);
    opacity: 0
}

.tooltip:before,
.tooltip:after {
    visibility: hidden;
    position: absolute;
    left: -25%;
    width: 19rem;
    padding: 1.25rem;
    font-weight: 400;
    font-size: var(--fs-m);
}

/* .tooltip:before {
    content: attr(data-title);
    transform: translate(-25%, -460%);
    border-radius: var(--top-rounded);
    background-image: var(--ec-btn-bg-gray);
    text-transform: uppercase;
    letter-spacing: .1em;
} */

.tooltip:after {
    content: attr(data-text);
    border-radius: var(--bottom-rounded);
    color: var(--ec-white);
    transform: translate(-50%, -115%);
    position: absolute;
    inset: 50% auto auto 50%;
}

.red-bgc,
.count {
    background: var(--ec-clr-accent)
}

input:-autofill:visited,
input:-webkit-autofill {
    box-shadow: inset 0 0 0 200px var(--ec-bg-secondary);
    transition: background-color 5000s ease-in-out, color 5000s ease-in-out
}

input:-autofill,
input:-autofill:active,
input:-autofill:focus,
input:-autofill:focus-visible,
input:-autofill:focus-within,
input:-autofill:hover,
input:-autofill:target,
input:-autofill:visited input:autofill {
    box-shadow: inset 0 0 0 200px var(--ec-bg-secondary);
    transition: background-color 5000s ease-in-out, color 5000s ease-in-out
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:hover,
input:-webkit-autofill:target,
input:-webkit-autofill:visited {
    box-shadow: inset 0 0 0 200px var(--ec-bg-secondary);
    transition: background-color 5000s ease-in-out, color 5000s ease-in-out
}

.ep-fade {
    animation: flicker ease calc(var(--ec-duration-m) * 2)
}

/*.single-buy-now-btn {*/
/*    background: transparent;*/
/*    border: none;*/
/*}*/

/*.single-buy-now-btn:after,*/
/*.adding:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    border-radius: inherit;*/
/*    z-index: -1;*/
/*}*/

/*.single-buy-now-btn:after {*/
/*    background: var(--ec-btn-bg-crimson);*/
/*}*/

/*.adding::after {*/
/*    filter: blur(0.75rem);*/
/*    background: conic-gradient(from var(--rotate), #1abc9c, #275179, #8e44ad);*/
/*    animation: button-press var(--ec-duration-l) linear infinite;*/
/*}*/

@property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.adding {
    overflow: visible;
    isolation: isolate;
    background: var(--ec-navy);
    /*animation: button-press var(--ec-duration-l) linear infinite*/
}

/*@keyframes button-press {*/
/*    from {*/
/*        transform: scale(1);*/
/*        --rotate: 0deg;*/
/*    }*/

/*    to {*/
/*        transform: scale(0.95);*/
/*        --rotate: 1turn;*/
/*    }*/
/*}*/

/*@keyframes spin {*/
/*    from {*/
/*        transform: rotate(0)*/
/*    }*/

/*    to {*/
/*        transform: rotate(1turn)*/
/*    }*/
/*}*/

/*@keyframes slide-up {*/
/*    from {*/
/*        transform: translate(-50%, 100%)*/
/*    }*/

/*    to {*/
/*        transform: translate(-50%, -50%)*/
/*    }*/
/*}*/

/*@keyframes fade-in {*/
/*    from {*/
/*        opacity: 0*/
/*    }*/

/*    to {*/
/*        opacity: 1*/
/*    }*/
/*}*/

@keyframes flicker {
    0% {
        opacity: 1
    }

    50% {
        opacity: .75
    }

    100% {
        opacity: 1
    }
}

.outofstock {
    filter: grayscale(100%)
}

.hero-screen-slider .slick-prev {
    /*inset: auto auto -50px var(--__slider-btn-size);*/
    left: 24px !important;

    @media screen and (max-width: 976px) {
        left: 16px !important;
    }
}

.hero-screen-slider .slick-next {
    /*right: var(--__slider-btn-size); */
    left: auto !important;
    right: 24px !important;

    @media screen and (max-width: 976px) {
        right: 16px !important;
    }
}

.ec-eip-tooltip {
    opacity: 0;
    transition: opacity var(--ec-duration-xs);
}

ul .page-numbers {
    background: var(--ec-bg-gray-dark);
    border-radius: var(--rounded-corners);
    font-weight: bold;
    padding: 0.5rem;
}

.splide__pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0;
    padding: var(--fs-xs);
    filter: grayscale(1)
}

/* 
.splide__pagination__page:before {
    content: "";
    width: 1.5rem;
    height: 1.5rem
} */

.splide__pagination__page:is(.is-active) {
    filter: grayscale(0)
}

.splide__pagination__page:hover {
    filter: grayscale(0.5)
}

.wowhead-tooltip :is(table, tr, td, th, tfoot, thead, tbody) {
    height: revert;
    text-align: revert;
    vertical-align: revert;
    background-color: revert;
}

@media screen and (min-width: 1024px) {

    .topline-item:hover .menu-triangle {
        position: absolute;
        inset: auto .25rem var(--fs-xs) auto;
        border-inline: .5rem solid transparent;
        border-bottom: .5rem solid var(--ec-highlight-gray-dark)
    }

    .topline-main__tray:hover .menu-triangle {
        right: .55rem
    }

    .ec-eip-tooltip:is(.show) {
        display: block;
        font-size: var(--fs-s);
        text-align: left;
        text-transform: capitalize;
        background-color: var(--ec-white);
        border: 1px solid var(--ec-white);
        min-width: 19.25rem;
        max-width: 19.25rem;
        min-height: calc(4 * var(--ec-spacing-3x));
        opacity: 1;
        padding: 0.25rem 1.25rem;
        pointer-events: none;
        transform: translate(20%, -75%);
        z-index: 20;
        color: #10101a !important;
        border-radius: var(--rounded-corners);

        span,
        div,
        p {
            color: #10101a !important;

        }

        p,
        li,
        a {
            font-size: 16px;
            line-height: 100%;
        }

        span.event-discount-ribbon {
            color: #10101a !important;
        }

        i {
            color: #10101a !important;
            line-height: 1.5;
        }
    }
}

.btn-main-menu--is-open {
    background-color: var(--ec-bg-secondary);
    border-radius: var(--rounded-corners);
}

@media (hover: hover) {

    .tooltip:hover:after {
        --b: 1em;
        --h: 0.5em;
        --p: 50%;
        --r: 1.2em;
        --c: var(--ec-white);
        background: var(--c);
        border-image: conic-gradient(var(--c) 0 0) fill 0/ var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/ 0 0 var(--h) 0;
        border-radius: var(--rounded-corners);
        clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%,
                min(100%, var(--p) + var(--b)/2) 100%,
                var(--p) calc(100% + var(--h)),
                max(0%, var(--p) - var(--b)/2) 100%);
        color: #10101a;
        display: block;
        padding: 1em;
        visibility: visible;
        z-index: 20;
    }

    input[type="text"]:hover {
        cursor: text
    }

    .tootlip:hover,
    .help:hover {
        cursor: help
    }

    button:hover,
    select:hover,
    label:hover,
    .pointer:hover,
    .nice-select:hover,
    .list:hover,
    .btn:hover,
    .ec-btn:hover,
    .button:hover,
    .noUi-handle:hover,
    .noui-handle:hover,
    .dragging:hover,
    .accordion-block:hover,
    .wpcf7-submit:hover,
    .input-radio:hover,
    input:is([type="button"], [type="checkbox"]):hover,
    .cart_item .name:hover {
        cursor: pointer
    }

    .usn,
    .btn,
    .ec-btn,
    .button,
    .wc_payment_method,
    .day-control,
    .nice-select .current,
    .e-buy {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    :disabled:hover,
    [disabled].noUi-target:hover,
    [disabled].noUi-handle:hover,
    [disabled] .noUi-handle:hover,
    .ec-events-disabled-block-view:hover {
        cursor: not-allowed
    }

    .wpwp-category-tab-active,
    .dropdown-item:hover,
    .wpwp-category-tab:hover,
    .ec-login-link-button:hover,
    .wpwp-character-edit-button:hover,
    .wpwp-character-remove-button:hover,
    .woocommerce-my-account__nav-menu-link:hover,
    .nice-select .option:hover {
        background-color: var(--ec-highlight-gray-dark);
        border-radius: var(--rounded-corners);
        transition: background-color calc(var(--ec-duration-s) / 2)
    }

    .main-menu__item:hover:after,
    :is(.section-product-list-product__link, .section-product-list-header):hover,
    .main-menu__item:hover .main-menu-sidebar-link {
        --__txt-clr: var(--ec-clr-accent);
    }

    .is-selected,
    .dropdown__item:hover {
        background-color: var(--ec-white);
        color: var(--ec-bg-primary);
        border-radius: 4px;
    }

    .ec-btn:disabled {
        opacity: .5;
    }

    .tm-epo-field-label:hover :after {
        opacity: 1;
    }

    :where(.tm-epo-field-label:not(.tc-active)):hover .tc-epo-style-wrapper .square {
        background-color: var(--ec-clr-accent-tertiary);
        border-color: var(--ec-clr-accent-tertiary);
        opacity: 0.5;
    }

    ::-webkit-scrollbar-thumb:hover,
    .nav-menu::-webkit-scrollbar-thumb:hover,
    .mini-cart-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--ec-highlight-gray)
    }

    .page-numbers .page-numbers:hover,
    .section_popup .tm-section-link:hover {
        background: var(--ec-green)
    }

    .btn:hover,
    .ec-btn:hover,
    .button:hover,
    .wpcf7-submit:hover,
    .wpfda-submit:hover {
        color: var(--ec-white);
        background: var(--ec-clr-accent-hover);
    }

    .apply_coupon:hover {
        background: var(--ec-yellow)
    }

    .product-rightbar-info__btn:hover {
        color: var(--ec-clr-accent-hover);

        & path {
            fill: var(--ec-clr-accent-hover);
        }
    }

    .country-selector.weglot-dropdown:hover .ec-multilingual:after {
        transform: rotatex(180deg)
    }

    .slide-button:before {
        content: "";
        width: 50px;
        height: 155px;
        position: absolute;
        top: -3rem;
        left: -6rem;
        transform: rotate(35deg);
        background-color: var(--ec-white);
        filter: blur(4px) drop-shadow(2px 4px 6px var(--ec-white))
    }

    .slide-button:hover:before {
        animation: slide-left var(--ec-duration-m) cubic-bezier(0.18, 0.89, 0.32, 1.28) 1
    }

    @keyframes slide-left {
        0% {
            opacity: 0;
            left: -5rem
        }

        100% {
            opacity: .3;
            left: 120%
        }
    }

    .slide-button:hover::after {
        right: .25rem
    }

    .footer-payment-method__img:hover {
        filter: grayscale(0)
    }

    .ec-social-icon:hover {
        border: 1px solid var(--ec-yellow)
    }

    .ec-social-icon:hover .ec-social-icon__img {
        filter: brightness(1)
    }

    .product-rightbar .single_add_to_cart_button:hover {
        border: 1px solid var(--ec-navy);
    }

    .slick-prev:hover:before,
    .slick-next:hover:before {
        border-color: #0e1b28;
        transition: border-color var(--transition-s)
    }

    .single-buy-now-btn:hover,
    .ec-btn:not(.slide-button, :disabled):hover,
    .radio-tab-ul>li:not(.tc-active):hover,
    .radio-tab3-ul>li:not(.tc-active):hover,
    .ec-eip-input-block-radio-item:has(input:not(:checked)):hover,
    .ec-eip-input-block-radio-item:not(.ec-eip-input-container .ec-eip-input-block-radio-item-active):hover {
        filter: brightness(0.9)
    }

    .ec-es-control-date-button:hover,
    .ec-es-control-faction-button:hover {
        border-bottom: 3px solid #ec230180
    }

    .ec-es-control-faction-button.active:hover,
    .ec-es-control-date-button.active:hover {
        border-bottom: 3px solid var(--ec-red-ruby)
    }

    .ec-es-event:hover {
        background-color: var(--ec-bg-gray-dark)
    }

    .ec-es-event:hover .ec-es-event-button {
        opacity: 1
    }

    .to-top-btn:hover,
    .subscribe-btn:hover {
        scale: 1.2
    }

    .ec-eip-input-block-checkbox-item .ec-eip-input:hover:after {
        opacity: .5
    }

    .ec-eip-filter-toggle-label:hover:before,
    .ec-eip-filter-toggle-label:has(input:checked):before,
    .ec-es-event:hover .ec-es-event-button {
        opacity: 1
    }

    .ec-es-event:hover .ec-es-event-button {
        transition: opacity var(--ec-duration-xs) linear
    }

    .ec-es-control-date-button:hover,
    .ec-es-control-region-button:hover {
        border-bottom: var(--ec-dropdown-br) solid var(--ec-red-burgundy)
    }

    .ec-es-control-date-button.active:hover,
    .ec-es-control-region-button.active:hover {
        border-bottom: var(--ec-dropdown-br) solid var(--ec-clr-accent)
    }

    .ec-es-event:hover {
        box-shadow: 0 0 5px var(--ec-highlight-gray);
        transform: scale(1.015);
        filter: brightness(1.1);
        transition-property: transform, filter;
        transition-duration: var(--ec-duration-s);
        transition-timing-function: ease-in-out
    }
}

.ec-green,
.tooltip,
.cpf-data-on-cart::before,
.woocommerce-password-strength.strong,
.wpwp-html-sitemap-content ul .html-sitemap__list-item::marker {
    color: var(--ec-green)
}

.ec-yellow,
.wpwp-category-tab-active,
.woocommerce-info:before,
.woocommerce-password-strength.good,
.nav-tabs__item.active,
.nav-tabs__item.active a,
.wpwp-html-sitemap-content>ul>.html-sitemap__list-item::marker,
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
    color: var(--ec-yellow);
}

.ec-red,
.menu-icon,
.product-leftbar li::marker,
.html-sitemap__list-item::marker,
.product-features ::marker,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad,
.registration-switch:hover,
.qty-minus:hover,
.cart-open .topline-icon {
    color: var(--ec-clr-accent);
}

.bg-txt {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}