/*  Variant 11
    100% - PDP - USPs in ATC area
*/

.usp_wrapper {
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    background-color: white;
    border-radius:4px;
    font-weight:bold;
}

.usp_wrapper p:not(:last-child) {
    margin-bottom: 10px;
}

.product-details-wrap {
    margin-bottom:2rem;
}




/*  Variant 13
    PDP -  Opstelling en kleur direct zichtbaar
*/

.product-setup.setup-two.popup {
    display:block !important;
    border-radius:0 0 8px 8px;
}

.product-wrapper .product-summary.setup-two, .product-wrapper .product-summary.setup-two.setup-found {
    padding-bottom:20px !important;
}

.product-steps.setup-two.setup-found, .product-wrapper .product-summary .customize-button {
    display:none !important;
}

.field {
    border-radius: 2px;
}

.product-wrapper .product-summary .prices-wrap {
    margin-top:2rem;
}

.product-wrapper .product-summary .prices-wrap .discount-icon {
    position: absolute;
    bottom: 0px;
    left: 160px;
    right: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: 50px;
    top: unset;
}

@media (max-width: 767px) {
    .product-wrapper .product-summary .prices-wrap .discount-icon {
        top: -15px !important;
        left: 20px !important;
    }
}

.product-details-wrap {
    background:#f4f4f4 !important;
    border:1px solid;
    border-radius:8px;
    padding:1rem;
}

.product-setup, .product-setup.popup  {
    padding:3rem;
}

/*  Fix 2026-07-31 — kleur-swatch viel over de knop "Leg in winkelwagen" (mobiel, design A)
    De blanket-padding hierboven overschrijft ook .product-setup.setup-one uit website.css
    (padding: 20px 120px 10px 20px, <=767px). Die 120px rechts is geen marge maar de ruimte
    waarin de absoluut gepositioneerde swatch .image.colour staat (right:25px, 70x70). Viel die
    ruimte weg, dan lag de swatch boven op de prijsregel en de bestelknop.
    We zetten de 120px niet terug (de knop wordt dan te smal op een telefoon) maar leggen de
    swatch in de rechterbovenhoek en houden alleen het tekstblok ernaast vrij. */
@media all and (max-width: 767px) {
    .product-wrapper .product-setup.setup-one .image.colour {
        top: 0;
        right: 0;
        left: auto;
        width: 64px;
        height: 64px;
    }
    .product-wrapper .product-setup.setup-one .product-setup-desc {
        padding-right: 24px;
        min-height: 64px;
    }
}

.product-wrapper .product-content .tab-content {
    border:none !important;
}

.product-wrapper .product-content .tab-content, .product-wrapper .product-summary {
    border:none;
}

.product-wrapper .product-summary {
    background:unset;
}

.content-block, .content-block.grey {
    margin:0 !important;
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.product-wrapper .product-summary .prices-wrap {
    min-height:unset;
}

@media (min-width:576px) {

    .setup-one .text-center {
        margin-top:4rem;
    }

    .product-wrapper .product-content {
        padding:4rem !important;
    }

    .product-setup.popup .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .product-setup .row .col-sm-6.col-md-12.col-lg-7 {
        -webkit-box-flex:3;
        -ms-flex:3;
        flex:3;

    }

    .product-setup .row .col-sm-6.col-md-12.col-lg-5 {
        -webkit-box-flex:2;
        -ms-flex:2;
        flex:2;
    }

}






/*  Variant 16
    100% - PDP  - Geen ouderwetse tabs maar huisstijl en modern
*/

.product-wrapper .product-content .nav-tabs>li>a {
    background:transparent !important;
    color:#2a70ad;
    margin-bottom:1rem !important;
    border-radius:4px !important;
    border:2px solid #2a70ad;
    margin-right:2rem;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    -webkit-transition:0.2s ease;
    -o-transition:0.2s ease;
    transition:0.2s ease;
    max-height: none;
    width:100%;
    padding-left: 13px;
    padding-right: 13px;
}

.product-wrapper .product-content .nav-tabs>li.active>a {
    color: #fff;
    background: #2a70ad !important;
    -webkit-box-shadow: 0 0 4px #2a70ad;
    border:2px solid #2a70ad !important;
    box-shadow: 0 0 4px #2a70ad;
    font-weight: 400;
}

.product-wrapper .product-content .nav-tabs>li>a .ico {
    width: 28px;
    height: 28px;
    top: 8px;
    left: 8px;
}

.product-wrapper .product-content .nav-tabs>li.active>a .ico {
    filter: invert(1);
}


.product-wrapper .product-content .nav-tabs>li>a:hover {
    opacity:0.8;
}

.tab-content form {
    padding:20px;
}

@media (min-width:768px) {


    .nav.nav-tabs {
        display: flex;
        justify-content: flex-start;
        text-align: center;
        flex-wrap: wrap;
    }

    .nav.nav-tabs::before {
        position: absolute;
    }

    .product-wrapper .product-content .nav-tabs {
        gap: 0 1rem;
    }

    .product-wrapper .product-content .nav-tabs>li {
        margin:0;
    }

    .product-wrapper .product-content .nav-tabs>li>a {
        margin: 0;
    }

}






/*  Variant 20
    100% - PDP - Laagste prijs garantie label vormgeving
*/

.price-slogan {
    display: inline-block;
    background-color: orange;
    color: white;
    border-radius: 3px;
    width:fit-content;
    font-weight: 500;
    /*padding: 0.5rem 1rem;*/
    padding: 6px 13px;
    line-height: 1.35em;
}

/*.footer-wrapper p {*/
/*    width: fit-content;*/
/*}*/

.product-wrapper .product-summary .prices-wrap {
    min-height:unset;
}

.product-wrapper .product-summary.setup-two,
.product-wrapper .product-summary.setup-two.setup-found {
    padding: 0 !important;
}

.product-wrapper .product-summary .prices  {
    align-items:center;
    flex-direction:column;
    display:flex;
    justify-content:space-around;
    position:relative;
    transform:none;
    left:0 !important;
    top:0 !important;
}

.discount-icon,
.product-wrapper .product-summary .customize-button.margin {
    display:none !important;
}

@media (max-width:767px) {

    .price-slogan {
        background-color: orange;
        padding: 0.5rem;
        color: white;
        border-radius: 2px;
    }

    .product-wrapper .product-steps.setup-two {
        position:relative !important;
        padding:2rem;
        left:unset;
        right:unset;
        bottom:unset;
        top:unset;
        background-color:white;
    }

    .product-wrapper .product-steps .btn {
        margin: 5px 0;
    }

    .product-details-wrap .content-block.relative {
        padding:15px 10px;
    }

    .product-wrapper .product-summary .prices {
        width:100%;
        margin-bottom:1rem;
    }

    .prices-wrap {
        margin-top:2rem;
    }

}









/*  Variant 31
    100% - FAQ op PDP
*/

.pane {
    padding: 2rem;
}

.pane h3 {
    margin-bottom: 15px;
}

.pane .faq-items-wrap {
    margin-top: 2rem;
}

.faq-items-wrap .faq-item {
    background: #ffffff;
    padding-bottom: 15px;
    border: 1px solid;
    border-radius: 4px;
    color: #333;
}

.faq-items-wrap .faq-item .title::after,
.faq-items-wrap .faq-item .title::before {
    background:#333;
}

.faq-items-wrap .faq-item .content a:not(.button) {
    display: inline-block;
}

.faq-items-wrap .faq-item .content a:not(.button),
.faq-items-wrap .faq-item .content a:not(.button):hover,
.faq-items-wrap .faq-item .content a:not(.button):focus {
    text-decoration: underline !important;
}














/*  Variant 00
    PDP
*/











/*  Variant 00
    PDP
*/