/* Core ------------------------------------------ */
main#main-wrapper {
    padding-block: 1rem 2rem;
}

main > section {
    margin-bottom: clamp(48px, 8vw, 96px);

    &.home-teaser-wall {
        margin-top: -2rem;
        margin-bottom: clamp(16px, 3vw, 32px);
    }
}

button {
    white-space: nowrap;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1em;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    line-height: 1.25em;
    font-weight: 700;
}

h3, strong {
    font-weight: 500;
}

.productbox-title {
    font-weight: 500 !important;
    color: #000;
}

.productbox-price.price span {
    color: #000;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Utility --------------------------------------- */
.highlight--gold {
    color: #D9B86E;
}

.highlight--red {
    color: #9B0016;
}

/* Modal ----------------------------------------- */
#modal-content-first h2 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 1rem;
}

/* Header Nav ------------------------------------ */
#shop-nav {
    svg {
        width: 32px;
        height: 32px;
        fill: #9B0016;
    }

    .small.text-muted {
        color: #888 !important;
    }
}

/* Header ---------------------------------------- */
header .search-wrapper {
    border-bottom: 2px solid #9B0016;
}

header #search {
    margin-right: 0 !important;
}

header #search input {
    padding: 0 !important;
    
    &::placeholder {
        color: #888 !important;
        opacity: 1;
    }
}

/* Mega Menu ------------------------------------- */
header #mainNavigation {
    margin-right: 0;
}

.navbar-nav {
    > .nav-item {
        .nav-link {
            border-top: 4px solid #9B0016;
            border-bottom: 4px solid #9B0016;
        }

        /* &:nth-last-child(3) {
            margin-left: auto;
        } */
            
        /* &:last-child {
            .nav-link {
                background-color: #FFFFFF;
                color: #9B0016 !important;
                padding: .75rem 1rem;
            }
        } */

        > a {
            font-weight: 700;
            color: #D9B86E;
        }

        .dropdown-menu {
            .container {
                padding-inline: 1rem;
                max-width: 106rem;
            }
        }

        .subcategory-wrapper {
            width: 100%;
            padding: 0;
            
            .row {
                width: 100%;
                margin: 0;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                column-gap: 2rem;
        
                > .col {
                    margin: 0 0 1rem 0;
                    padding: 0;
                    width: 100%;
                    max-width: none;
                    border-bottom: 1px solid rgba(255,255,255,.3);

                    a {
                        margin-bottom: 0;
                        font-weight: 400;

                        span {
                            &:before {
                                display: inline-block;
                                content: ">";
                                margin-right: .5rem;
                                color: #D9B86E;
                            }
                        }
                    }
                }
            }
        }
    }
}

.categories-recursive-link[data-category-id="36"] + .dropdown-menu ul.nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Maintenance ----------------------------------- */
body.maintenance-main-wrapper {
    .maintenance-main-image {
        width: 320px;
        height: 320px;
        margin-bottom: 2rem;
    }

    #footer {
        padding: 2rem;
        
        h1, h2, h3, h4, h5, h6 {
            color: #FFFFFF !important;
        }
    }
}

/* Checkout -------------------------------------- */
body.is-checkout {
    .niu-checkout-header {
        > div:first-child {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            margin-bottom: 2rem;

            > div {
                flex: 1 1 100%;
                max-width: none;

                &:nth-child(2) {
                    justify-content: center !important;
                }
            }
        }

        p.h2 {
            font-size: clamp(1.5rem, 3.5vw, 3rem);
        }
    }

    #result-wrapper {
        margin-bottom: 2rem;
    }

    .container {
        max-width: 106rem;
    }

    #copyright {
        padding-block: 1rem;
        
        .small {
            font-size: 1rem !important;
        }
    }
}

/* Breadcrumb------------------------------------- */
.breadcrumb-wrapper {
    border-bottom: 1px dotted #D9B86E;
    margin-bottom: 3rem;
}

/* Content --------------------------------------- */
#result-wrapper .title {
    margin-top: 0;
}

#content {
    > .container {
        max-width: 106rem;
    }

    h2 {
        margin-top: 2rem;
        margin-bottom: .5rem;
        font-size: clamp(1.25rem, 2vw, 2rem);
    }

    p {
        margin-bottom: 2rem;
    }
}

.title {
    margin-block: 2rem;
}

.index-heading-wrapper,
.breadcrumb-container {
    max-width: 106rem !important;
}

.index-heading-wrapper {
    border-bottom: 2px solid #9B0016;
    padding-bottom: 1rem;
    margin-top: 4rem;
    margin-bottom: 2rem;

    h1 {
        color: #9B0016;
    }
}

/* Form ------------------------------------------ */
.niu-form-group select,
.niu-form-group input,
textarea.form-control {
    border-color: #666666;
}

/* Hero Teaser ----------------------------------- */
.home-teaser-wall {
    background-image: url('https://alpha-steam.com/media/image/storage/opc/Heroes/gold-background.jpg');
    background-size: cover;
    background-position: center bottom;
}

.home-teaser-wall .opc-Video-iframe-wrapper {
    max-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    aspect-ratio: 104/35;

    video {
        height: auto;
        position: relative;
        border: 4px solid #111111;
        box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.75);
    }
}

.home-teaser-wall .opc-video-pause {
    display: none;
}

.home-teaser-wall img {
    border: 4px solid #111111;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.75);
}

/* Produkt Slider -------------------------------- */
.produkt-slider-header {
    gap: 2rem;
    row-gap: 1rem;
    margin-bottom: 1rem;

    h1 {
        margin-bottom: 0;
    }

    p {
        margin-bottom: 0.25rem;
    }
    
    button {
        margin-bottom: 0.5rem;
    }

    > div:first-child {
        flex: 1;
    }
}

.produkt-slider .productbox-price {
    font-size: 24px;
    font-weight: 600 !important;
}

/* Category Headline ----------------------------- */
.category-headline {
    background-image: url('https://alpha-steam.com/media/image/storage/opc/Assets/gold-category-headlines.jpg');
    background-size: cover;
    padding: 32px;
    gap: 2rem;
    row-gap: 1rem;
    margin-bottom: 1rem;

    h2 {
        flex: 1;
        margin: 0;
    }

    button {
        border: 2px solid #FFFFFF;
    }
}

/* Brandarole ------------------------------------ */
.brandarole {
    h1 {
        color: #FFFFFF;
        font-size: clamp(1rem, 3vw, 2rem);
        text-align: center;
        margin-bottom: 2rem;
    }

    .container-fluid .opc-area .splide {
        height: 160px !important;
        padding-block: 0 !important;
    }
}

/* Hero Slider CTA ------------------------------- */
.hero-slider {
    .splide__slide {
        height: initial !important;
    }

    .dzm-opcis-content-container {
        aspect-ratio: 1 / 0.59;
    }

    .dzm-opcis-content-container .container-fluid {
        position: relative;
        z-index: 2;
    }
}


/* Newsletter CTA -------------------------------- */
.newsletter-cta {
    form, p {
        width: 100%;
    }

    form {
        margin: 0 auto;
        max-width: 800px;
    }

    a {
        text-decoration: underline;
    }

    a:hover {
        color: #D9B86E;
    }
    
    form {
        margin-block: 2rem;
    }
}

/* Bordered Features Boxes ----------------------- */
.bordered-features-box div:first-child {
    margin-left: 0 !important;
    margin-right: 16px !important;
}

.bordered-features-box p {
    margin-bottom: 0 !important;
}

/* Phoneticker ---------------------------------- */
.dzm-marquee-container {
    overflow: hidden;
    padding-block: clamp(32px, 6vw, 160px);
    margin-bottom: clamp(32px, 6vw, 72px);
}

.dzm-marquee-container .marquee--as {
    transform: scale(1.1) rotate(-6deg) !important;
    transform-origin: center;
    font-size: clamp(28px, 6vw, 72px) !important;
    min-height: auto !important;
    padding-inline: clamp(16px, 3vw, 40px);
}

.dzm-marquee-container .dzm-marquee-close {
    font-size: clamp(18px, 2vw, 28px);
    top: clamp(6px, 1vw, 16px) !important;
    right: clamp(6px, 1vw, 16px) !important;
}

/* Footer ---------------------------------------- */
.footer-header {
    padding-top: 64px !important;

    .row {
        row-gap: 3rem;
    }

    h2 {
        font-size: clamp(1.5rem, 2vw, 1.5rem);
        margin-bottom: 0;
    }

    .footer-logo {
        width: 144px !important;
        height: 144px !important;
    }

    .hotline-icon {
        margin-right: 1rem !important;
    }

    @media (max-width: 991px) {
        gap: 2rem;
    
        [data-area-id="col-0"] {
            order: 2;
        }
        
        [data-area-id="col-1"] {
            order: 1;
        }
        
        [data-area-id="col-2"] {
            order: 3;
            display: none;
        }
    }
}

#footer-boxes {
    row-gap: 2rem;
    
    .col {
        max-width: none;
        flex: 1;

        @media (max-width: 991px) {
            flex: 1 1 50%;
        }

        @media (max-width: 543px) {
            flex: 1 1 100%;
        }
    }

    .productlist-filter-headline {
        width: 100%;
        position: relative;
        z-index: 1;
        font-size: clamp(1.5rem, 2vw, 1.5rem);
        font-weight: 700;
        color: #D9B86E !important;

        &::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: -2px;
            right: 0;
            height: 12px;
            background-color: #474162;
        }
    }

    a.dropdown-toggle span, a.dropdown-toggle:after {
        font-size: clamp(1.5rem, 2vw, 1.5rem);
        font-weight: 700;
        color: #D9B86E !important;
    }

    hr.box-normal-hr {
        border-color: #474162;
    }
}

/* Sidebar --------------------------------------- */
#sidepanel_left {
    .box-filter-availability,
    .box-filter-manufacturer {
        .collapse {
            display: block !important;
        }
    }
    
    .snippets-filter-show-all {
        display: none;
    }
}

/* Top Bar --------------------------------------- */
#niu-top-bar {
    .dzm-niu-topbar-items.small,
    .dzm-niu-topbar-welcome-message.small {
        font-size: .9rem;
        font-weight: 500;
    }
}