/* =========================
   LAYOUT WRAPPERS
========================= */
.Background-wrapper {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
    
}

.left {
    flex: 0 0 30%;
    background: inherit;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .left img {
        height: 300px;
        margin: 0 auto;
    }

.right {
    flex: 0 0 70%;
    display: flex;
    gap: 0;
}

.right-first {
    flex: 0 0 55%;
    background: inherit;
    padding: 10px;
}

    
.right-second {
    flex: 0 0 45%;
    background: inherit;
    padding: 10px;
}

.SBackground-wrapper {
    display: flex;
    width: 100%;
    height: 220px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border:2px solid #d71319
}

.Sleft {
    flex: 0 0 30%;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

    .Sleft img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.Sright {
    flex: 0 0 70%;
    display: flex;
    height: 100%;
}

.Sright-first {
    flex: 0 0 55%;
    padding: 0px;
    box-sizing: border-box;
}

.Sright-second {
    flex: 0 0 45%;
    padding: 0px;
    box-sizing: border-box;
}

.Sright h1 {
    margin: 0 0 8px 0;
}

.Sright p {
    margin: 0;
}



/* RESPONSIVE LAYOUT */
@media (max-width: 768px) {
    .Background-wrapper {
        flex-direction: column;
    }

    .left, .right {
        flex: 0 0 100%;
    }

    .right {
        flex-direction: column;
    }

    .right-top, .right-bottom {
        flex: 0 0 100%;
    }
}

/* RESPONSIVE LAYOUT */
@media (max-width: 768px) {
    .SBackground-wrapper {
        flex-direction: column;
    }

    .Sleft, .Sright {
        flex: 0 0 100%;
    }

    .Sright {
        flex-direction: column;
    }

    .rSight-top, .Sright-bottom {
        flex: 0 0 100%;
    }
}

/* =========================
   NAVIGATION STYLING
========================= */
.facts-nav-wrapper {
    overflow-x: auto;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    margin: 0;
    padding: 0;
}

.facts-nav-container {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 2px 0 0 55px;
    max-width: 1300px;
    
}

.facts-nav-item button {
    display: block;
    padding: 16px 20px;
    font-weight: 600;
    color: #333;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

    .facts-nav-item button:hover {
        border-bottom: 3px solid #d71319;
    }

    .facts-nav-item button.active {
        color: #d71319;
    }

/* Hide scrollbar on desktop */
.facts-nav-wrapper::-webkit-scrollbar {
    display: none;
}









/* =========================
   FACTS CONTENT
========================= */
.facts-content {
    position: relative;
    min-height: 150px; /* voorkomt content springen */
    margin: 0;
    padding: 2px 0 0 55px;
   
}

.facts-section {
    display: none;
    position: absolute;
    top: 0;
    left: 5px;
    width: 100%;
    opacity: 0;
    pointer-events: none; /* voorkomt interactie met verborgen secties */
    transition: opacity 0.4s ease;
}

    .facts-section.active {
        display: block;
        position: absolute;
        top: 0;
        opacity: 1;
        top: 0;
        pointer-events: auto;
    }

.facts-section-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 70px;
}

@media (max-width: 1100px) {
    .facts-nav-container,
    .facts-section-container {
        padding: 0 15px;
    }
}

/* =========================
   SIDE PANEL
========================= */
.side-panel {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 30%;
    background-color: #fff;
    color: #555;
    padding: 120px 15px;
    font-size: 0.9em;
    z-index: 1000;
    transition: left 0.5s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    overflow-y: auto;
}

    

    .side-panel.open {
        left: 0;
    }

.close-btn {
    position: absolute;
    top: 100px;
    right: 10px;
    background: none;
    border: none;
    font-size: 28px;
    color: #000;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
}

    .close-btn:hover {
        color: #ff0000;
    }

@media (max-width: 768px) {
    .side-panel {
        width: 100%;
    }
}




.container_center {
    max-width: 1300px;
    margin: 0 auto;
    padding: 12px 20px;
    text-align:center;
}


/* =========================
   PRODUCTEN SECTIE
========================= */





.products-section {
    margin: 10px auto;
    text-align: center;
    max-width: 1300px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

    
    

/* =========================
   PRODUCT GRID
========================= */
.product-grid, .trio-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    width: 100%;
    align-items: stretch;
    display: grid;
    gap: 0;
}

.product-grid{
    gap: 0;   
}

.trio-product-grid {
    gap: 20px;
}

.product-card {
    grid-template-rows: 25% 75%;
    background: white;
    padding: 0;
    
    width: 100%;
   
}

.trio-product-card {
    grid-template-rows: 25% 75%;
    background: white;
    padding: 0;   
    width: 100%;
}

.trio-product-card img {
    gap: 5px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
}


.trio-product-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 5px 0;
}

.product-card h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 5px 0;
}


    .product-card h3 {
        font-size: 3rem;
        font-weight: 800;
        margin: 5px 0;
    }

    .product-card p {
        font-size: 0.95rem;
    }

    .product-card .btn-primary {
        font-size: 0.95rem;
        padding: 8px 15px;
        cursor: pointer;
        border: none;
        background: #004080;
        color: white;
        border-radius: 4px;
    }

        .product-card .btn-primary:hover {
            background: #003366;
        }

    .product-card img {
        display: block;
        width: 100%;
        min-height: 450px;
        object-fit: cover;
        object-position: center;
    }


.product-card-img, .product-card-content {
    gap: 5px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
}

.product-card-content h2 {
    font-size: 30px;
    font-weight: 800;
}

.product-card-content h3 {
    font-size: 20px;
    font-weight: 800;
}
   
    .product-card-img h2 {
        font-size: 30px;
        font-weight: 800;
    }

    .product-card-img p {
        font-size: 18px;
        font-weight: 700;
        
    }

    .product-card-img img {
        display: block;
        width: 100%;
        min-height: 450px;
        object-fit: cover;
        object-position: center;
    }


    .product-card-content .btn-link {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 15px 0;
        padding: 0;
        cursor: pointer;
        border: none;
        background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
        color: white;
        text-decoration: none;
        padding: 8px 0;
    }

        .product-card-img .btn-link:hover {
            background: linear-gradient(110deg, #111111 0%, #b40000 80%, #f2c400 100%);
        }

.postcode-card {
    background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
    color: white;
    padding: 50px!important;
}

    .postcode-card h3 {
        font-size: 1.2rem;
        margin: 10px 0;
        color: white;
    }

    .postcode-card p {
        margin-top: 20px;
        color: white;
    }

    .postcode-card .btn-postcode {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 15px 0;
        padding: 0;
        cursor: pointer;
        border: none;
        background: none;
        color: white;
        text-decoration: none;
    }

        .postcode-card .btn-postcode:hover {
            text-decoration-line: underline;
            text-decoration-color: #fff;
            text-decoration-thickness: 3px;
            text-underline-offset: 4px;
        }


.gradient-card {
    background: linear-gradient(20deg, #f0f0f0 0%, #000);
    color: white;
}

    .gradient-card h3 {
        font-size: 3rem;
        font-weight: 800;
        margin: 5px 0;
        color: #fff;
    }

    .gradient-card p {
        font-size: 0.95rem;
        color: #fff;
    }

    .gradient-card .btn-gradient {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 15px 0;
        padding: 0;
        cursor: pointer;
        border: none;
        background: none;
        color: white;
        text-decoration: none;
    }

        .gradient-card .btn-gradient:hover {
            text-decoration-line: underline;
            text-decoration-color: #fff;
            text-decoration-thickness: 3px;
            text-underline-offset: 4px;
        }



   


.product-card,
.product-card-img,
.postcode-card,
.gradient-card {
    width: 100%;
    min-height: 450px;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
}



.product-card-text {
    margin-top: auto;
    padding: 10px;
}



    

    


/* =========================
   SINGLE PRODUCT GRID
========================= */
.one-product-grid {
    max-width: 1300px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}

.one-product-card-blanc {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    background: white;
    padding: 0;
    border-radius: 0px;
    min-width: 0;
}

    .one-product-card-blanc h3 {
        font-size: 30px;
        font-weight: 800;
    }

.one-product-card {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 20px;
    align-items: start;
    background: white;
    padding: 0;
    border-radius: 0px;
}

.search-card {
    display: grid;
    grid-template-columns: 10% 90%;
    gap: 5px;
    align-items: start;
    background: white;
    padding: 0;
    border-radius: 0px;
    border: 1px solid #f0f0f0;
    margin-top: 10px;
    padding-right:10px;
}

    .search-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .search-card:nth-child(odd) {
        background-color: #fff;
    }

    .search-card:nth-child(even) {
        background-color: #f0f0f0;
    }

    .search-card a {
        color: #d71319;
    }

        .search-card a:hover {
            border-bottom: 2px solid #8c8c8c;
            padding-bottom:3px;
        }


    .product-info {
        text-align: left;
    }

.product-info-center {
    text-align:center;
}

.product-info-left {
    text-align: left;
    min-width: 0;
}

.one-product-card img {
    width: 100%;
    height: auto;
   object-fit: cover;
}

.two-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.two-product-card {
    width: 100%;
    min-height: 450px;
    min-width: 0;
    padding: 10px 10px;
    border-radius: 0;
    box-sizing: border-box;
}

    .two-product-card .btn-send {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 15px 0;
        padding: 0;
        cursor: pointer;
        border: none;
        background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
        color: white;
        text-decoration: none;
        padding:8px 0;
    }

        .two-product-card .btn-send:hover {
            background: linear-gradient(110deg, #111111 0%, #b40000 80%, #f2c400 100%);
            
        }



.two-product-card-a {
    width: 100%;
    min-height: 450px;
    padding: 10px 10px;
    border-radius: 0;
    box-sizing: border-box;
}

    .two-product-card-a .btn-send-a {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 5px 0;
        padding: 10px;
        text-align:left;
        cursor: pointer;
        border: none;
        background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
        color: white;
        text-decoration: none;
        
    }

        .two-product-card-a .btn-send-a:hover {
            background: linear-gradient(110deg, #111111 0%, #b40000 80%, #f2c400 100%);
        }


    .two-product-card-a .btn-send-b {
        display: inline-block;
        width: 50%;
        font-size: 1.2rem;
        margin: 5px 0;
        padding: 10px;
        cursor: pointer;
        border: none;
        text-align: left;
        background: linear-gradient(90deg, #000 0%, #8c8c8c);
        color: white;
        text-decoration: none;
    }

        .two-product-card-a .btn-send-b:hover {
            background: linear-gradient(90deg, #000 80%, #8c8c8c);
        }


    .two-product-card-a p {
        font-family: 'Inter', sans-serif;
        font-size: 1em;
        line-height: 0.5em;
        letter-spacing: 0.5px;
        color: #6b6b6b;
        font-weight: 400
    }




.image-container {
    width: 100%;
    min-height: 450px;
    padding: 10px 10px;
    border-radius: 0;
    display: flex;
    justify-content: center; /* horizontaal */
    align-items: center; /* verticaal */
   
}

    .image-container img {
        max-width: 50%;
        max-height: 50%;
        object-fit: contain;
    }



.image-containerXL {
    width: 100%;
    min-height: 450px;
    border-radius: 0;
    display: flex;
    justify-content: center; /* horizontaal */
    align-items: center; /* verticaal */
}

    .image-containerXL img {
        display: block;
        max-width: 100%;
        height: auto;
    }


.product-benefits {
    list-style: none;
    margin: 15px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .product-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 18px;
        font-weight: 700;
    }


        .product-benefits li svg,
        .product-benefits li svg-icon {
            flex: 0 0 auto;
        }

        .product-benefits li svg-icon {
            margin-top: 3px;
            flex-shrink: 0;
        }

        .product-benefits li span {
            display: block;
        }




/* =========================
   RESPONSIVE GRID
========================= */
@media (max-width: 1100px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .products-section {
        padding: 0 15px;
    }

    .one-product-card {
        grid-template-columns: 1fr;
    }

        .one-product-card img {
            border-radius: 0 15px 0 0;
        }

    .two-product-grid {
        grid-template-columns: 1fr;
    }

    .product-card,
    .postcode-card,
    .gradient-card {
        min-height: 100px;
        
    }

    .two-product-card-a {
        
        min-height: 150px;
        width:90%;
        
    }
        .two-product-card-a .btn-send-a {
            width: 80%;
        }

        .two-product-card-a .btn-send-b {
            width:80%;
        }

    .two-product-card .btn-send {
        width: 70%;
    }


    .product-card-content .btn-link {
       
        width: 70%;
       
    }


        }

/* =========================
   SUBPRODUCT GRID
========================= */
.sub_product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0px;
    width: 100%;
    align-items: stretch;
}

.sub_product-card {
    width: 100%;
    min-height: 150px;
    padding: 0px;
    border-radius: 0;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    background-color: var(--bg-color, #ffffff);
}
    .sub_product-card a {
        cursor: help;
    }



   

.sub_product-card:hover {
    background-color: #dfdfdf;
}



    .sub_product-card img {
        width: 50%;
        margin: 10px auto;
        display: block;
    }

    .sub_product-card h3 {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 2px 0;
    }

    .sub_product-card p {
        font-size: 0.95rem;
    }

    .sub_product-card .btn-primary {
        font-size: 0.95rem;
        padding: 8px 15px;
        cursor: pointer;
        border: none;
        background: #004080;
        color: white;
        border-radius: 4px;
         cursor: pointer;
    }

        .sub_product-card .btn-primary:hover {
            background: #003366;
        }






.pasSchaakbordToe {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--bg-color, #ffffff);
    padding:0 5px 30px 5px;
    max-width:400px;
}

    .pasSchaakbordToe img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.schaak-wit {
    background-color: #ffffff;
}

.schaak-grijs {
    background-color: #f0f0f0;
}

   
    
    /* =========================
   ACCESSOIRES SECTIE
========================= */


    .accessoires-section {
        margin: 0 auto;
        text-align: left;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .accessoires-section p {
            font-size: 1rem;
            margin-bottom: 30px;
            padding: 0 20px 0 0;
        }





    .accessoires-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
        gap:0px;
        min-height:0;
        width: 100%;
        margin-top: 0px;
    }




    .accessoires-card {
        grid-template-rows: 25% 25% 50%;
        padding-left: 0px;
        width: 100%;
        max-width: 400px;
    }

    .accessoires-card-width {
        padding-left: 0px;
        width: 100%;
        max-width: 1300px;
    }

   

    .accessoires-card-Two {
        grid-template-rows: 25% 25% 50%;
        padding-left: 10px;
        width: 100%;
        max-width: 600px;
    }



    .accessoires-card-center-top {
        align-content: center;
        text-align: center;
        padding: 0px;
        width: 100%;
        max-width: 400px;
    }

        .accessoires-card-center-top h2 {
            font-size: 1.5rem;
            line-height: 1.6;
            margin: 20px auto;
            padding-bottom: 30px;
            color: #555;
        }


.accessoires-card-postcode {
    background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
    color: white;
    align-content: center;
    text-align: center;
    padding: 10px;
    max-width: 400px;
   
}



    .accessoires-card-postcode h3 {
        font-size: 1.2rem;
        margin: 10px 0;
        color: white;
        margin-top:20px;
            }

    .accessoires-card-postcode p {
        margin-top: 20px;
        color: white;
    }

.accessoires-card-postcode .btn-postcode {
   display: inline-block;
    width: 50%;
    font-size: 1.2rem;
    margin: 15px 0;
    padding: 0;
    cursor: pointer;
    border: none;
    background: none;
    color: white;
    text-decoration: none;
}

.accessoires-card-postcode .btn-postcode:hover {
    text-decoration-line: underline;
    text-decoration-color: #fff;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}


.accessoires-card-gradient {
    background: linear-gradient(20deg, #f0f0f0 0%, #000);
    color: white;
    padding: 10px;
    align-content:flex-start;
    text-align: center;
    max-width: 400px;
    box-sizing: border-box;
}



    .accessoires-card-gradient h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 20px 0 15px 0;
        color: #fff;
    }

    .accessoires-card-gradient ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .accessoires-card-gradient ul li {
            font-size: 0.95rem;
            color: #fff;
            margin: 0 0 5px 0;
        }

            .accessoires-card-gradient ul li p {
                font-size: 0.95rem;
                color: #fff;
                margin: 0;
            }

    .accessoires-card-gradient .icon-text-inline-short {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

        .accessoires-card-gradient .icon-text-inline-short svg-icon {
            width: 24px;
            min-width: 24px;
            height: 24px;
            flex: 0 0 24px;
        }

        .accessoires-card-gradient .icon-text-inline-short p {
            margin: 0;
            padding: 0;
            flex: 1;
            min-width: 0;
            text-align: left;
        }

.product-card,
.product-card-img,
.postcode-card,
.gradient-card {
    width: 100%;
    min-height: 450px;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
}


    .btn-primary {
        font-size: 0.95rem;
        padding: 8px 15px;
        margin: 15px auto;
        cursor: pointer;
        border: none;
        background: #d71319;
        color: white;
        width: 70%;
        border-radius: 4px;
    }

        .btn-primary:hover {
            color: #555;
        }

    .accessoires-card-center {
        padding: 50px 10px 0 10px;
        width: 100%;
        max-width: 400px;
        text-align: center;
    }

        .accessoires-card-center h2 {
            font-size: 1.7rem;
            font-weight: 600;
            color: #fff;
        }

        .accessoires-card-center p {
            font-size: 1.5rem;
            font-weight: 600;
            color: #fff;
        }


        .accessoires-card-center .btn-link {
            display: inline-block;
            width: 70%;
            font-size: 1.2rem;
            margin: 15px 0;
            padding: 0;
            cursor: pointer;
            border: none;
            background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
            color: white;
            text-decoration: none;
            padding: 8px 0;
        }

            .accessoires-card-center .btn-link:hover {
                background: linear-gradient(110deg, #111111 0%, #b40000 80%, #f2c400 100%);
            }


.accessoires-card-center-top .btn-link {
    display: inline-block;
    width: 70%;
    font-size: 1.2rem;
    margin: 15px 0;
    padding: 0;
    cursor: pointer;
    border: none;
    background: linear-gradient(110deg, #111111 0%, #b40000 55%, #f2c400 100%);
    color: white;
    text-decoration: none;
    padding: 8px 0;
}

.accessoires-card-center-top .btn-link:hover {
    background: linear-gradient(110deg, #111111 0%, #b40000 80%, #f2c400 100%);
}






.accessoires-card-hoover {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s ease 0.1s;
}

        .accessoires-card-hoover img {
            width: 50%;
        }

    .accessoires-card-hoover.schaakbord-grijs {
        background-color: #f1f1f1;
    }

        .accessoires-card-hoover:hover {
            background-color: #dfdfdf !important;
            
        }


.accessoires-card-hoover3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s ease 0.1s;
}


.accessoires-card-hoover3 img {
    width: 50%;
}


    .accessoires-card-hoover3:hover {
        background-color: #dfdfdf !important;
    }






.accessoires-grid.accessoires-grid-hoover {
    grid-template-columns: repeat(4, 1fr);
}

    .accessoires-card img {
        margin-bottom: 10px;
        object-fit: cover;
    }

    .accessoires-card h3 {
        font-size: 1.2rem;
        margin: 10px 0;
    }

    .accessoires-card p {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }



    @media (max-width: 990px) {

        .accessoires-grid {
            grid-template-columns: 1fr;
            gap:20px;
        }

        .accessoires-card {
            max-width: 100%;
        }

        .accessoires-card-Two {
            max-width: 100%;
        }

        .accessoires-card-center {
            max-width: 100%;
        }

        .accessoires-card-center-top {
            max-width: 100%;
        }
        .accessoires-card-postcode {
            max-width: 100%;
        }
        .accessoires-card-gradient {
            max-width: 100%;
        }

        .pasSchaakbordToe {
            max-width: 100%;
        }

        .accessoires-card-hoover3 {
            max-width: 100%;
        }

        .accessoires-card:nth-child(4n+1),
        .accessoires-card:nth-child(4n+4) {
            background-color: #fff;
        }

        .accessoires-card:nth-child(4n+2),
        .accessoires-card:nth-child(4n+3) {
            background-color: #f0f0f0;
        }
        .accessoires-grid.accessoires-grid-hoover {
            grid-template-columns: repeat(2, 1fr);
        }

    }

@media (max-width: 600px) {
    .accessoires-grid.accessoires-grid-hoover {
        grid-template-columns: 1fr;
    }
}


    


    .open-panel:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }


    .lease-calculator {
        background: #f0f0f0;
        border-radius: 10px;
        padding: 25px;
        max-width: 800px;
        font-family: Arial;
    }

        .lease-calculator h2 {
            margin-bottom: 20px;
        }

    .lease-options {
        display: flex;
        gap: 20px;
        margin-bottom: 25px;
    }

    .lease-field {
        flex: 1;
    }

        .lease-field label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .lease-field select {
            width: 100%;
            padding: 10px;
            border-radius: 6px;
            border: 1px solid #6b6b6b;
            font-size: 15px;
        }

            .lease-field select:focus {
                outline: none;
                border-color: #6b6b6b;
            }

    .lease-results {
        display: flex;
        gap: 20px;
    }

    .lease-result {
        flex: 1;
        background: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
    }

    .lease-price span {
        display: block;
        color: #6b6b6b;
    }

    .lease-price strong {
        font-size: 36px;
        color: #d71319;
    }

    @media (max-width: 768px) {
        .lease-options,
        .lease-results {
            flex-direction: column;
            gap: 15px;
        }
    }

    .filter-bar {
        display: flex;
        gap: 40px;
        background: #f5f5f5;
        border-radius: 10px;
    }

    .filter-group h4 {
        margin-bottom: 10px;
    }

    .filter-group label {
        display: block;
        margin-bottom: 5px;
        cursor: pointer;
    }
.faq-section {
    max-width: 1000px;
    margin: 50px auto;
}

    .faq-section h2 {
        margin-bottom: 25px;
    }




.faq-item summary {
    position: relative;
    padding: 15px 45px 5px 20px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
    color: #8c8c8c;

}

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    /* pijltje */
    .faq-item summary::after {
        content: '';
        position: absolute;
        left: 3px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.25s ease, border-color 0.25s ease;
    }

/* open */
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(-135deg);
    border-color: #d71319;
}

.faq-item[open] summary {
    color: #d71319;
}

.faq-answer {
    position: relative;
    padding: 20px 45px 20px 20px;
    max-width: 800px;
    background-color: #f0f0f0;
    margin:20px 0 0 30px;
}

    /* puntje van tekstballon */
    .faq-answer::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 25px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #f0f0f0;
    }

    .faq-answer p {
        margin: 0;
        line-height: 1.6;
    }

.faq-section,
.faq-list,
.faq-item,
.faq-item summary,
.faq-answer {
    text-align: left;
}

.faq-question {
    text-decoration: none;
}

.faq-item summary:hover .faq-question {
    border-bottom: 3px solid #d71319;
    padding-bottom:3px;
}