/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */

/* region Resets */
.topbar-wrapper {
    position: relative;
    z-index: 1020 !important;
    flex-direction: row-reverse;
}

.container {
    max-width: 1350px;
}

.z--1 {
    z-index: -1;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-high {
    z-index: 9999;
}

.z-higher {
    z-index: 99999;
}

hr + hr {
    display: none;
}

.dzm-ps-track {
    padding-top:0 !important;
    padding-bottom: 0 !important;
}
/* endregion */

/* region Fonts & Typo */
.h1, .h2, .h3, .h4, .h5, .h6 {
    text-transform: uppercase;
    font-weight: 700;
}
/* endregion */

/* region Header */

header {

    border-bottom: none !important;
    box-shadow: rgba(79, 52, 108, 0.09) 0px 10px 30px;

    #search {
        max-width: 600px !important;
    }

    .niu-input-group.niu-header-search {
        background: #ececf5 !important;
        border:none !important;
        border-radius: 8px !important;
    }

    .dzm-niu-nav-bottom-bar {
        background-color:rgb(247 247 252);
        font-size: 14px;
        display: none;
    }

    .niu-categories-color-wrap {
        border-top:1px solid rgb(247 247 252);
        border-bottom:1px solid rgb(247 247 252);

    }

    .niu-nav-color-wrap, .niu-categories-color-wrap {
        background: #f7f7fc !important;
    }
}

/* endregion */

/* region Navigation */

#mainNavigation .niu-header-nav > .nav-item .nav-link {
    text-transform: uppercase;
}
/* endregion */

/* region Produktseite */

.desc {
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
    }
}

/* endregion */

/* region Kategorieseite - Itembox Rainbow Border */
.productbox-inner::before {
    border: 1px solid #e9e1f3;
}

@media screen and (min-width: 991px) {
    @property --bg-angle {
        inherits: false;
        initial-value: 0deg;
        syntax: "<angle>";
    }

    @keyframes spin {
        to {
            --bg-angle: 360deg;
        }
    }

    .niu-itembox-option--is-card.productbox-inner, .niu-itembox-option--has-border.productbox-inner,
    .subcategories-image,
    #per-autosuche-start {
        --bg-angle: 0deg;
        background:
            linear-gradient(to bottom, #ffffff00, #ffffff00) padding-box,
            linear-gradient(to bottom, #ffffff00, #ffffff00) border-box;
        border: 3px solid transparent;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .niu-itembox-option--is-card.productbox-inner:hover, .niu-itembox-option--has-border.productbox-inner:hover,
    .subcategories-image:hover,
    #per-autosuche-start {
        border-width: 3px;
        transition: border-color .5s ease !important;
        background:
            linear-gradient(to bottom, #ffffff, #ffffff) padding-box,
            conic-gradient(
                from var(--bg-angle),
                #9B5DE5 0deg,
                #9B5DE5 72deg,
                #F15BB5 72deg,
                #F15BB5 144deg,
                #FEE440 144deg,
                #FEE440 216deg,
                #00BBF9 216deg,
                #00BBF9 288deg,
                #00F5D4 288deg,
                #00F5D4 360deg
            ) border-box;
        animation: spin 4s linear infinite;
        transition: all .2s ease !important;
    }

    #niu-product-splide-list .splide__slide:first-child:before {
        border-width: 3px;
        transition: border-color .5s ease !important;
        background:
            linear-gradient(to bottom, #f8f8f9, #f8f8f9) padding-box,
            conic-gradient(
                from var(--bg-angle),
                #9B5DE5 0deg,
                #9B5DE5 72deg,
                #F15BB5 72deg,
                #F15BB5 144deg,
                #FEE440 144deg,
                #FEE440 216deg,
                #00BBF9 216deg,
                #00BBF9 288deg,
                #00F5D4 288deg,
                #00F5D4 360deg
            ) border-box;
        animation: spin 4s linear infinite;
        transition: all .2s ease !important;
    }
}

.niu-cat-row div:first-child {
    border-top: 3px solid transparent !important;
}
/* endregion */

/* region Search Bar */

#per-search-bar {
    max-width: 1620px;
    border-radius: 50px;
    background: #FFF;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
    padding: 25px 45px;
    margin-top: 25px;
}

#s360-garage-widget .btn {
    padding: 0;
}
/* endregion */

/* region Header */

#niu-top-bar {
    position: relative;
}

#niu-top-bar::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100px;
    z-index: -1;
    background: linear-gradient(120deg, rgba(155,93,229,1) 16%, rgba(241,91,181,1) 16%, rgba(241,91,181,1) 32%, rgba(254,228,64,1) 32%, rgba(254,228,64,1) 48%, rgba(32,219,194,1) 48%, rgba(32,219,194,1) 64%, rgba(0,187,249,1) 64%, rgba(0,187,249,1) 82%, rgba(78,52,108,1) 82%);
}

/* endregion */

/* region Conversion Booster */

#dzm_conversion_booster_container {
    gap: 0 !important;
}
/* endregion */

.dzm-ps-item-wrapper > a {
    height: 100%;
}

/* region OPC Plugins */

.dzm-89-tabs {

    .nav-tabs {
        border-bottom: none;
    }

       .tab-navigation .nav-link::after {
           content: none;
       }

    .tab-navigation .nav-link {
        font-size: 14px;
        font-weight: 400;
        color: #4e346c;
        background-color: rgb(222, 213, 244);
        padding: 6px 12px;
        border-radius: 4px;
    }

    .tab-navigation .nav-item:not(:last-child) {
        margin-right:1rem;
    }

       .nav-tabs .nav-link.active  {
           color: #4e346c;
           background-color: rgb(155 93 229);
           border-color: #9b5de5;
           padding: 6px 12px;
           border-radius: 4px;
           color: white;
           font-size: 14px;
           font-weight: 400;
       }

   }

/* endregion */

/* region startseite v2 */

.dzm-category-card {
    padding: 1.5rem;

    img {
        mix-blend-mode: darken;
    }
}

/* endregion */