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

/* region CUSTOM FONTS */

@font-face {
    font-family: 'Oswald';
    src: url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Bold.woff2') format('woff2'),
    url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('Oswald-ExtraLight.woff2') format('woff2'),
    url('Oswald-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Light.woff2') format('woff2'),
    url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Medium.woff2') format('woff2'),
    url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Regular.woff2') format('woff2'),
    url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-SemiBold.woff2') format('woff2'),
    url('/templates/NIUplusChildMilltek/themes/base/fonts/Oswald-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* endregion */

/* region RESETS */

.container {
    max-width: 1350px;
}

.breadcrumb-container {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* endregion RESETS */

/* region BASICS */

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

.dzm-box-shadow {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
}

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

hr + hr {
    display: none;
}

.dzm-ps-track-xs {
    padding: 15px 0 15px 0 !important;
}

/* endregion BASICS */

/* region HEADER */

header .search-wrapper .niu-input-group {
    background: #F7F7F8 !important;
    border: none;
}

header nav .nav-item .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
}

.topbar-wrapper {
    position: relative;
    z-index: 1020;
    flex-direction: row-reverse;
}

@media screen and (min-width: 1440px) {
    #search {
        max-width: 500px !important;
    }
}

.niu-sidebar-head-small {
    container-name: niu-sidebar-head-small;
}

@container niu-sidebar-head-small (max-width: 480px) {
    .h1 {
        font-size: 1rem !important;
    }
}

/* endregion HEADER */

/* region SHIPPING NOTICE */

.dzm-ctd-wrapper.dzm-notice-full {
    background-color: #e42313;
    color: white !important;
    border-radius: 3px;
    margin-top: 15px;
}

/* endregion SHIPPING NOTICE */

/* region VEHICLE SEARCH */

#ppx-autosuche-start {
    overflow: hidden;
}

#ppx-autosuche-start::after {
    content: '';
    display: block;
    position: absolute;
    height: 200px;
    width: 200px;
    background-image: url(/media/image/storage/opc/Icons/pipercross-icon-gray.svg);
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    top: -60px;
    right: -30px;
}

#s360-vehicle-search-filter-box-category-switch {
    display: none !important;
}

.footnote-vat a {
    color: #d10f33 !important;
}

.s360-vehicle-search-hsn-tsn-help-modal {
    width: 45px;
    border-radius: 3px !important;
}

.s360-vehicle-search-hsn-tsn-help-modal .modal-header .close {
    color: white;
}

.s360-vehicle-search-hsn-tsn-help-modal:hover {
    color: white;
}

#ppx-autosuche-start .s360-vehicle-search-hsn-tsn-help-wrapper button,
#ppx-autosuche-start .s360-vehicle-search-hsn-tsn-help-wrapper {
    width: 100%;
}

@media screen and (max-width: 465px) {
    .s360-vehicle-search-hsn-tsn-help-wrapper button {
        width: 100% !important;
    }

    .s360-vehicle-search-hsn-tsn-help-wrapper {
        width: 100%;
    }
}

/* endregion VEHICLE SEARCH */

/* region VEHICLE SEARCH PLUGIN (PPX) */

#ppx-autosuche-start #s360-vehicle-search-filter {
    flex-direction: column;
    gap: 8px;
}

#s360-vehicle-search-filter .col-xl-2,
#s360-vehicle-search-filter .col-xl-1 {
    width: 100% !important;
    max-width: 100% !important;
}

#s360-vehicle-search-filter .form-control {
    border-radius: 3px;
}

#s360-vehicle-search-filter-box-category-switch button[data-category="auto"] {
    border-radius: 3px 0 0 3px;
}

#s360-vehicle-search-filter-box-category-switch button[data-category="motorrad"] {
    border-radius: 0 3px 3px 0;
}

#s360-vehicle-search-filter .input-group {
    gap: 8px;
}

#ppx-autosuche-start #s360-vehicle-search-filter .input-group input {
    width: 100%;
}

#s360-vehicle-search-filter-box-category-switch .btn.active svg {
    fill: white;
}

#s360-vehicle-search-filter select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

.s360-vehicle-search-select-wrapper {
    position: relative;
}

.s360-vehicle-search-select-wrapper::after {
    content: '\F282';
    display: inline-block;
    font-size: 10px;
    position: absolute;
    font-family: 'bootstrap-icons';
    right: 20px;
    top: calc(50% - 7px);
    pointer-events: none;
}

#ppx-autosuche-start .dzm-hl-wrapper {
    padding: 0 40px;
}

#s360-vehicle-search-filter {
    padding: 0 40px;
}

/* endregion VEHICLE SEARCH PLUGIN (PPX) */

/* region SEARCH BAR (PPX) */

#ppx-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;
}

#ppx-searchbar-cat {
    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: -46px;
    z-index: 2;
}

.ppx-cat-title {
    text-transform: uppercase;
    font-weight: 900;
}

.ppx-cat-hero {
    position: relative;
}

.ppx-cat-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000063;
    pointer-events: none;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    #ppx-autosuche-start {
        margin-top: -130px !important;
    }

    #s360-vehicle-search-filter .col-4 {
        max-width: 100% !important;
    }

    #ppx-searchbar-cat {
        margin-top: -35px;
        padding: 25px 0;
    }
}

@media screen and (max-width: 1299px) {
    #s360-vehicle-search-filter .col-4 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #s360-vehicle-search-filter strong {
        margin-bottom: 15px;
        white-space: nowrap;
    }
}

/* endregion SEARCH BAR (PPX) */

/* region SPECIAL PRICE */

.niu-special-price .percent {
    background-color: #d10f33;
}

/* endregion SPECIAL PRICE */

/* region CONSENT BANNER */

#consent-banner-btn-all {
    background-color: #04d06c;
    color: #fff;
    border: none !important;
}

#consent-banner-btn-all:hover {
    background-color: #04B45F;
    color: #fff;
    border: none !important;
}

#consent-banner-btn-settings:hover {
    border-color: #222;
    background-color: #7c7c7c;
    color: #fff;
}

#consent-banner-btn-close:hover {
    border-color: #222;
    background-color: #7c7c7c;
    color: #fff;
}

#consent-settings-btn {
    display: none !important;
}

.ec-widget {
    width: 100% !important;
}

/* endregion CONSENT BANNER */

/* region ABE STYLES */

.stvzo-abe-icon {
    max-width: 32px;
}

.stvzo-abe-container {
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    border: 1px solid #f1efef;
}

.stvzo-abe-content,
.s360-restriction {
    font-size: 14px;
    font-weight: 300;
}

.stvzo-abe-style-1 {
    color: #02A067;
}

.stvzo-abe-container:has(.stvzo-abe-style-1) {
    background: rgba(2, 160, 103, 0.1);
}

.stvzo-abe-style-2 {
    color: #D10F33;
}

.stvzo-abe-container:has(.stvzo-abe-style-2),
.s360-restriction {
    background: rgba(209, 15, 51, 0.02);
}

.stvzo-abe-style-5 {
    color: #00309A;
}

.stvzo-abe-container:has(.stvzo-abe-style-5) {
    background: rgba(0, 48, 154, 0.06);
}

.stvzo-abe-style-3,
.stvzo-abe-style-4,
.stvzo-abe-style-6,
.stvzo-abe-style-7 {
    color: #0071B9;
}

.stvzo-abe-container:has(.stvzo-abe-style-3, .stvzo-abe-style-4),
.stvzo-abe-style-6,
.stvzo-abe-style-7 {
    background: rgba(0, 113, 185, 0.06);
}

#product-offer:has(.stvzo-abe-container) .product-info-inner {
    border-radius: 0 0 8px 8px !important;
    border-top: none;
}

.s360-restriction {
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    margin-bottom: .5rem;

    svg {
        max-width: 20px;
        margin-right: .5rem;
    }
}

/* endregion ABE STYLES */

/* region FOOTER */

#footer .productlist-filter-headline {
    font-size: 1rem;
}

.index-news-wrapper .blog-header {
    display: none;
}

/* endregion FOOTER */

/* region PDP */

.niu-card-style--border {
    border-color: #f1efef;
}

.mt-sidebar-trigger {
    border: 1px solid #f1efef;
    padding: .75rem 1.25rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.desc {
    h2 {
        font-size: 1.35rem;
        margin-bottom: .5rem;
    }
}

.product-title.h2 {
    font-size: 1.25rem;
}

.shortdesc {
    ul {
        padding-left: 1rem;
        margin-bottom: 0;
    }
}

.product-info-inner p {
    margin-bottom: .25rem;
}

/* endregion PDP */

/* region PLP */

.niu-itembox-option--has-border.productbox-inner {
    border: 1px solid #f1efef;
}

.vehicle-search-v2 {

    #s360-vehicle-search-filter {
        padding: 0 24px;
        background: #fefefe;
    }

    .dzm-hl-wrapper {
        padding: 0 24px !important;
    }
}

/* endregion PLP */

/* region STARTSEITE V2 */





    .h1, .h2, .h3, .h4, .h5, .h6,
    h1, h2, h3, h4, h5, h6,
    .d1, .d2, .d3, .d4, .d5, .d6,
    .navbar-nav .nav-item, .productlist-filter-headline, a.categories-recursive-link {
        font-family: "Oswald", sans-serif !important;
        text-transform: uppercase;
        font-optical-sizing: auto;
        font-weight: 800;
        font-style: normal;
        font-variation-settings:
                "wdth" 100;
    }

    .slider-no-padding .splide {
        padding: 0 !important;
    }

    .dzm-niu-nav-bottom-bar {
        display: none;
    }

    .mt-dark-gradient {
        position: relative;
        z-index: 1;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: -1;
            background: linear-gradient(180deg, rgb(0 0 0 / 42%) 0%, rgb(0 0 0 / 80%) 100%);
        }
    }

    .mt-metallic-bg,
    #niu-top-bar,
    .dzm-btn-full-primary {
        background: linear-gradient(45deg, #ff7272 5%, #ff4343 10%, #E12828 30%, #F54545 50%, #E12828 70%, #f12f2f 80%, #d23232 95%);
    }

    header nav .nav-item .nav-link {
        font-size: .9rem;
    }

    .niu-categories-color-wrap {
        border-top: 1px solid #f6f6f6;
        border-bottom: 1px solid #f6f6f6;
    }

    .custom-category-banner {
        background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(0deg, #ffffff 0%, #ececec 100%);
        box-sizing: border-box;
        padding: 4px;
        border-radius: 4px;
    }

    #fahrzeugsuche-horizontal {
        z-index: 1;
        position: relative;

        box-shadow: 0 4px 30px rgb(0 0 0 / 12%);
        transition: box-shadow .3s ease, transform .3s ease;

        @media screen and (min-width: 991px) {
            margin: 0 2rem;
        }

        &:hover {
            box-shadow: 0 2px 15px rgb(0 0 0 / 10%) !important;
            transform: translateY(-2px);
            transition: box-shadow .3s ease, transform .3s ease;
        }

        &:before {
            content: 'Fahrzeugsuche';
            font-size: .75rem;
            font-weight: 600;
            color: #fff;
            position: absolute;
            top: -25px;
            padding: 0 1.25rem;
            left: 2rem;
            width: max-content;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            background: var(--primary);
            border-radius: 3px 3px 0 0;
        }

        .form-control {
            height: 2rem;
            padding: 0 .75rem;
            font-size: 0.85rem;
        }

        .input-group {
            align-items: center;
        }

        .s360-vehicle-search-hsn-tsn-help-modal {
            height: 2rem;
            width: unset;
            padding: 0 0.25rem;
        }

        #s360-vehicle-search-filter {
            padding: 1rem 2.25rem;
            color: #212121;

            .btn {
                border-color: #d8d8d8 !important;
                color: #757575 !important;
            }
        }
    }

    .gradient-bottom-dark .dzm-itb-overlay:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        background: linear-gradient(1deg, #0000004d, transparent);
        pointer-events: none;
    }

    .dzm-categories-slider-wrapper {

        .splide__arrow {
            height: unset !important;
            aspect-ratio: 1 !important;
            background: var(--primary) !important;
            color: white !important;
            border-radius: 50% !important;

            svg {
                fill: white !important;
            }

            &.splide__arrow--next {
                right: -1rem !important;
            }

            &.splide__arrow--prev {
                left: -1rem !important;
            }
        }

        .dzm-category-card-text-wrapper {
            margin-top: 1rem;

            & > * {
                text-align: center;
            }
        }
    }

header {
    @media screen and (max-width:991px) {
        #s360-garage-widget {
            display:none
        }
    }

}


/* endregion STARTSEITE V2 */