@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#PortalPagina { width: 100%; position: relative; z-index: 0; font-family: "Poppins", sans-serif; background: #f8f9fa; padding: 30px;
    :focus-visible { outline: 3px solid #0066CC !important; outline-offset: 3px; }
    img { width: 100%; }
    h1 { font-size: 50px; line-height: 50px; text-transform: uppercase; } 
    h2 { font-size: 25px; line-height: 40px; }
    p { font-size: 16px; line-height: 24px; margin: 0; }
    section { padding: 25px 0; }
    .details-title { display: flex; flex-direction: column; }
    .section-label { text-transform: uppercase; letter-spacing: 1.5px; color: #6b6b6b; margin: 15px 0; display: flex; align-items: center; justify-content: center; gap: 16px; }
    .section-label::before, .section-label::after { content: ""; height: 1px; flex: 1; max-width: 48px; background: #ccc; }
    .highlight-carousel-container .btn { background:var(--nl-bg-color)!important; color: white; border-radius: 5px; margin: 0 -10px; }

    .hero { background:var(--nl-hero-bg-color); margin: 0 0 80px; padding: 60px 30px 30px; color: white; border-radius: 30px; 
        .hero-features strong { font-size: 20px; font-weight: 600; }
        .hero-image.hero-desktop { width: 50%; margin: -100px -50px -220px; }
    }
    #Inleiding { padding: 50px 100px; }

    #PortalMenu { background: linear-gradient(0deg, transparent, #c9c9c9); margin: -30px -30px 0;
        .navbar-collapse { justify-content: center; }
        .navbar-collapse .navbar-nav .nav-item { border-right: 3px solid #d60021; padding: 0 10px; }
        .navbar-collapse .navbar-nav .nav-item:last-child { border: none; }
        .navbar-collapse .navbar-nav .nav-item a:hover { font-weight: bold; color: #e45c5a !important; }
        .navbar-collapse .navbar-nav .nav-item .nav-link.active { color: #ad0109; font-weight: 700; }
        .dropdown-item { padding: 8px 20px; }
        .dropdown-item:active { background: #f2f2f2; color: black; }
        .container-fluid { flex-flow: row-reverse; align-items: start; }
        .navbar-toggler { background: white; }
    }

    #Serie {
        .nav.nav-tabs { justify-content: center; border: none; margin: 30px 0; }
        .nav-item { padding: 5px; }
        .nav-item a { position: relative; display: block; height: 50em; background: white; border: 3px solid #ebebeb; padding: 20px 10px; box-shadow: 0 0 14px #d9d9d9; border-radius: 20px;
            .lineup-card-undertitle { font-size: 14px !important; line-height: 20px !important; color: var(--nl-serie-border-color); height: 40px; font-weight: 600; padding: 0 11px; }
            .lineup-card-spec { padding: 10px;
                div { display: flex; justify-content: center; gap: 10px; }
                img { width: 10% !important; }
                span { margin: 10px 0; font-size: 10px; }
                p { font-size: 14px !important; }
            }
            .btn { position: absolute; bottom: 20px; display: block; place-self: center; }
        }
        .lineup-card:hover { border: 3px solid var(--nl-serie-border-color); }
        .nav-item:after { display: none; position: relative; content:""; width: 70px; height: 70px; background:var(--nl-bg-color); margin: -71px 2px; clip-path: polygon(0 0, 0 100%, 100% 100%); border-radius: 0 20px; }
        .nav-item:hover:after { display: block !important; }
        .ProdctLink { display: inline-block; padding: 10px 30px; background:var(--nl-bg-color); color: white; border-radius: 5px; margin-top: 20px; }
    }

    #QA {
        .accordion-item { border: none; }
        .accordion-header { background: white; margin: 5px 0; border: 2px solid #efefef; border-radius: 5px; }
        .accordion-collapse { background:var(--nl-antwoord-bg-color); position: absolute; z-index: 99; width: 42.3%; border: 2px solid #efefef;  border-radius: 10px; padding: 10px; }
        .accordion-collapse p { font-size: 12px !important; line-height: 20px !important;  margin: 0; }
        .VraagItem { width: 48%; background: white; padding: 30px; margin: 10px; }
        .VraagItem h2 { font-size: 20px; line-height: 30px; }
        .accordion-item:has(.show) .accordion-header button { color: #323232; font-weight: 700; background:var(--nl-vraag-bg-color); margin-bottom: -6px; }
    }

    #Tabel {
        .SeoEnkelvlak { background: #e9f3f6; }
        table { display: flex; justify-content: center; }
        tr th, tr td { padding: 7px; border-bottom: 2px solid #dbdbdb; border-right: 2px solid #dbdbdb; }
        tr th:first-child { height: 60px; align-content: center; color: var(--nl-serie-border-color); }
        tr th:nth-child(even), tr td:nth-child(even) { background: #ebebeb; }

        thead tr { display: flex; flex-flow: column !important; }
        tbody { display: flex; }
        tbody tr { display: flex; flex-direction: column; text-align: center;}
        tbody tr th { width: 120px; }
    }

    #Toppers { background: linear-gradient(to right, #d7d7d7, #dcdcdc); padding: 20px 10px; border-radius: 20px;
        h2 span { display: block; text-align: center; margin: -20px 0 0; font-size: 18px; color: grey; }
        .productCard a { background: white; border: 2px solid #e3e3e3; border-radius: 10px; display: block; padding: 10px; position: relative; }
        .productCard .productTitle { font-size: 12px; overflow: hidden; height: 30px; margin-top: 10px; }
        .productCard img { width: 80% !important; margin: 0 auto; display: block; }
        .productCard #bulletList { font-size: 12px; }
        .productCard a ul { font-size: 10px; height: 120px; overflow: hidden; padding: 0; margin: 0; }
        .productCard li { list-style: none; padding-left: 10px; text-indent: -10px; }
        .productCard li:before { content: "> "; font-weight: 600; font-size: 13px; color:var(--nl-bg-color); }
        .ratingsfalse { display: none; }
        .ratingstrue { display: flex; width: 40%; margin: 0 -7px 3px; }
        .productInfo { display: flex; gap: 10px; align-items: flex-end; justify-content: right; }
        .productPrices { width: 60%; text-align: right; }
        .productPrice { font-size: 23px !important; font-weight: 600; color: #9f0707; margin: 0; }
        .historyPrice { height: 30px; margin: 0; text-decoration-line: line-through; font-size: 16px; }

        .section-label { color: var(--nl-toppers-tekst-color); }
        .section-label::before, .section-label::after { background: var(--nl-toppers-bg-color); }
        .highlight-carousel-container { margin-top: 30px; }
        .highlight-carousel-container .btn { background: var(--nl-toppers-bg-color) !important; }
    }

    #Accessoires {
        .row a { width: 20%; padding: 10px;
            .SmallProductBox { text-align: center; background: white; border: 3px solid #ebebeb; padding: 20px;  box-shadow: 0 0 14px #d9d9d9; border-radius: 20px; }
            .SmallProductBox img { height: 130px !important; object-fit: contain; padding: 15px; }
        }
        .row a:hover div { border: 3px solid var(--nl-serie-border-color) !important; }
        .row a:hover:after { display: block !important; }
        .row a:after { display: none; position: relative; content: ""; width: 70px; height: 70px; background: var(--nl-bg-color); margin: -71px 2px; clip-path: polygon(0 0, 0 100%, 100% 100%); border-radius: 0 20px; }
    }
    #Partners {
        .row { justify-content: center;
            img { width: 13%; }
        }
    }
}

@media screen and (max-width: 667px) { /* Mobile */
    #PortalPagina { padding: 0;
        h1 { font-size: 25px; line-height: 30px; }
        p { font-size: 14px; line-height: 23px;}
        #PortalMenu { margin: 0 -15px; 
            .navbar-collapse .navbar-nav .nav-item { border-bottom: 3px solid #c5c5c5; border-right: none !important; }
            .dropdown-menu { background: none; padding: 0; border: none; }
        }
        .hero { flex-direction: column-reverse; padding: 20px 10px; margin: 100px 0 0; }
        .hero-image.hero-desktop { width: 90% !important;margin: -150px 0 0 !important;transform: none; }
        
        #Inleiding {padding: 10px; }
        .section-label { line-height: 26px; text-align: center; }
        .lineup-card-image { width: 60%; margin: 0 auto; }
        #Serie {
            .nav.nav-tabs { display: flex; flex-flow: row; justify-content: start !important; overflow: scroll; }
            .nav-item { padding: 5px; text-wrap: unset; min-width: 80%; margin: 0 0 20px; }
            .nav-item a { height: 43em; }
        }
        #QA { 
            .VraagItem {  width: 90%; padding: 10px; margin: 5px 20px; } 
            .accordion-collapse { width: 90% !important; }
        }
        #Tabel { display: none; }
        #Accessoires {
            .row { padding: 20px; }
            .row a { width: 50%; padding: 5px; }
            .SmallProductBox { padding: 10px; }
            .row a p { font-size: 12px; }
        }
        #Partners {
            .row {
                img { width: 40%; }
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
    #PortalPagina { padding: 10px;
        h1 { font-size: 40px; line-height: 40px; }
        p { font-size: 13px; line-height: 20px; }
        #PortalMenu { margin: -10px; 
            .navbar-collapse .navbar-nav .nav-item { border-bottom: 3px solid #c5c5c5; border-right: none !important; }
            .dropdown-menu { background: none; padding: 0; border: none; }
        }
        .hero { flex-direction: column-reverse; padding: 20px 10px; margin: 100px 0 0; }
            .hero-image.hero-desktop { width: 60% !important; margin: -140px 0 -40px !important; transform: none; }
        #Inleiding { padding: 10px; }
        .lineup-card-image { width: 70%; margin: 0 auto; }
        #Serie { 
            .nav-item { padding: 10px 10px 20px; width: 41%; }
            .nav.nav-tabs { display: inline-flex; flex-flow: nowrap; justify-content: start !important; overflow: scroll; }
            .nav-item a { height: 43em; 
                .lineup-card-spec {
                    p { font-size: 11px !important; line-height: 20px; }
                }
            }
        }
        #QA {
            .VraagItem { width: 47%; padding: 10px; }
        }
        #Tabel { display: none; }
        #Toppers {
            .productCard .productTitle { height: 50px; }
            .productCard a ul { height: 120px; }
            .productPrices { width: 100%; }
            .historyPrice { height: 22px; }
        }
        #Accessoires {
            .row a { width: 33.33%; padding: 5px; }
        }
    }
}