/* 20260519110919 - v2 */
.gui,
.gui-block-linklist li a {
  color: #666666;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #0a8de9;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0a8de9;
  box-shadow: 0 0 2px #0a8de9;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0a8de9;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #666666;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #76c61b;
}

/* custom */
.cartbtn-banner{mix-blend-mode: multiply;}
.uspblock img {
  mix-blend-mode: multiply;
  width: 90px;
}
/* puts close button back */
.wsa-demobar {
	display: none!important;
}
h1,.h1 {
    font-size: 2rem
}

h2,.h2 {
    font-size: 1.5rem
}

h3,.h3 {
    font-size: 1.75rem
}
.currency{margin-right: 7px;}
.mobile-nav .moblogo{position: relative;left: -20px;}
.logo img{max-height:46px !important}
.stick{position: sticky;
    top: 130px; /* Ruimte vanaf de bovenkant van het scherm. Pas dit aan als je een vaste header hebt. */
    background-color: #fff; /* Essentieel: zorgt dat de tekst erachter onzichtbaar is bij het scrollen */
    z-index: 10; /* Zorgt dat de prijs over andere elementen (zoals radio buttons) heen valt */
    padding-bottom: 15px; /* Beetje ademruimte aan de onderkant */
    margin-bottom: 20px;
}
.stick:after{
  content: "";
    background: #ffffff;
    height: calc(100% + 40px);
    width: calc(100% + 30px);
    position: absolute;
    top: -40px;
    left: -15px;
    z-index: -1;}
@media (max-width: 600px) {
  .stick{top: 65px;}
  .stick h2,.stick .h2{font-size: 1rem;}
  .stick .h4{font-size: 1.25rem !important;}
  .custom-control.custom-radio .custom-control-label {padding:10px 13px!important}
}

.usp-holder .item i {font-weight: 600;}
#form_search input{height: 40px;}
header .first-section{height:70px}
/*.nav-item.active a.nav-link.text-primary {
    color: #FFF !important;
}*/
.nav-item:not(.sub).active a.nav-link.text-primary:after {
    content: "";
    height: 32px;
    display: block;
    background: rgb(0 0 0 / 30%);
    z-index: -1;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 34px;
    top: 3px;
}
.container.navbar{
background: #202632;
    box-shadow: 1200px 0px 0 0 #202632, -1200px 0px 0 0 #202632;
}
header .megamenu .subnav > .nav-item.sub > .subitem.text-primary {
    color: #f39b01 !important;
}
footer img{
  max-height: 36px;
  object-fit: contain;
}
.messages .error ~ .progress::before {
    background-color: #f87171;
}
img.preset {
  padding: 5px!important;
  display: inline-block!important;
  border-radius: 5px;
  background: #F9F9F9!important;
  border: 1px solid #eee!important;
}
img.preset:hover {
  border: 1px solid #b6c9d6!important;
  background: #d4e0e8!important;
}
.category .image-wrap a {
    border-radius: 0.5rem !important;
}
/*
.stocks.allowoutofstock .stocklevel{display:none}
.stocks.stocktrack:not(.allowoutofstock){text-transform: lowercase;}
*/
.contact-description{
    font-size: 16px;
    font-weight: 400 !important;
}
footer .newsletter h6.h5,
footer .newsletter p{
color:#F0F0F0!important
}

footer .newsletter:after {
    content: "";
    background: rgb(39 48 62);
    position: absolute;
    top: 0;
    right: -100%;
    bottom: 0;
    z-index: 0;
    left: -100%;
}
footer .copyright-payment:after{background:#f6f7f8!important;border-top:1px solid #ddd}
.copyright-payment{
    font-weight: 400 !important;
    font-size: 15px;
}

.product .price {
    color: #414141;
    font-weight: 900 !important;
}

/* PRODUCT OPTIONS  */ 
/* Container styling */
.product-configure-custom {
    font-family: sans-serif;
    color: #333;
}

/* Groep titels (bijv. Vorm:, Formaat:) */
.product-configure-custom-option > label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 20px;
}

/* De asteriks verbergen indien gewenst, of kleur geven */
.product-configure-custom-option > label em {
    color: #2c7e4b;
    font-style: normal;
}

/* Flexbox container voor de items */
.product-configure-custom-option {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* Verberg de standaard radio buttons volledig */
.product-configure-custom-option-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Styling van de labels (de knoppen) */
.product-configure-custom-option-item label {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
    font-size: 14px;
    text-align: center;
    min-width: 80px;
}

/* Hover effect */
.product-configure-custom-option-item label:hover {
    border-color: #f39b01;
    background-color: #f9f9f9;
}

/* De "Checked" status: wanneer de radiobutton geselecteerd is */
.product-configure-custom-option-item input[type="radio"]:checked + label {
    border: 1px solid #f39b01;
    box-shadow: 0 0 0 1px #f39b01;
    color: #000;
}

/* Specifieke styling voor 'Oplage' (brede knoppen met prijs rechts) */
/* We kijken hier naar de derde groep (aria-label="Oplage") */
div[aria-label="Oplage"] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Twee kolommen zoals in foto */
    gap: 15px;
}

div[aria-label="Oplage"] .product-configure-custom-option-item label {
    display: flex;
    justify-content: space-between; /* Zet tekst links en prijs rechts */
    align-items: center;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Opruimen van Lightspeed's standaard clear divs */
.product-configure-clear {
    display: none;
}
.product-configure-custom-option > label {
    width: 100%;
    margin-bottom: -5px !important;
}
/* Zorg dat de titel van de optie altijd de volledige breedte pakt */
.product-configure-custom-option > label {
    grid-column: 1 / -1; /* Dit laat het label van kolom 1 tot de laatste kolom lopen */
    width: 100%;
    display: block;
    margin-bottom: 15px;
}

/* De grid instellingen voor de Oplage sectie */
div[aria-label="Oplage"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Maakt exact 2 gelijke kolommen */
    gap: 12px;
    align-items: start;
}

/* Zorg dat de items zelf (input + label) gewoon in hun grid-cel blijven */
div[aria-label="Oplage"] .product-configure-custom-option-item {
    display: block;
    width: 100%;
}
/* Container instellen als Flexbox (vergelijkbaar met .product-configure-custom-option) */
.form-group.mb-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Reset de standaard marge/padding van het framework voor deze items */
.custom-control.custom-radio {
    margin: 0;
    padding: 0;
    min-width: 72px; /* Zorgt voor een mooie minimale breedte */
  overflow:visible
}

.custom-control.custom-radio .text-black-50{}
/* Verberg de originele radio buttons volledig */
.custom-control.custom-radio input[type="radio"].custom-control-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Verberg de standaard framework radio-bolletjes (zowel pseudo-elementen als de .bg span) */
.custom-control.custom-radio .custom-control-label::before,
.custom-control.custom-radio .custom-control-label::after,
.custom-control.custom-radio .bg {
    display: none !important;
}

/* Styling van de labels (dit worden nu de knoppen) */
.custom-control.custom-radio .custom-control-label {
    display: flex;
    flex-direction: column; /* Zet tekst en prijs onder elkaar, of verander naar 'row' voor naast elkaar */
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
    font-size: 14px;
    text-align: center;
    width: 100%;
    height: 100%;
  min-height:65px;
    box-sizing: border-box;
}

/* Hover effect */
.custom-control.custom-radio .custom-control-label:hover {
    border-color: #f39b01;
    background-color: #f9f9f9;
}

/* De "Checked" status: wanneer de knop is geselecteerd */
.custom-control.custom-radio input[type="radio"]:checked + .custom-control-label {
    border: 1px solid #f39b01;
    box-shadow: 0 0 0 1px #f39b01;
    color: #000;
}

/* Optioneel: Mooiere opmaak voor de tekst in de knop */
.custom-control.custom-radio .custom-control-label strong {
    font-weight: bold;
    color: #333;
}

.custom-control.custom-radio .custom-control-label span {
    font-size: 12px;
    margin-top: 4px; /* Ruimte tussen titel en het (+0%) gedeelte */
}
.bedrukking .custom-control.custom-radio,
.materiaalsoort .custom-control.custom-radio,
.afwerking .custom-control.custom-radio,
.papierdikte .custom-control.custom-radio {
    width: 236px;
}
.oplage .custom-control.custom-radio{
width:112px
}
/* --- 1. WIZARD ACCORDION STYLING --- */

/* Start een automatische teller bij het formulier */
#product_configure_form {
    counter-reset: wizard-stap;

}

/* Verberg de opties in elke stap standaard */
.step .form-group {
    display: none; 
    padding-top: 15px; 
}

/* Toon de opties als de stap de class 'is-active' heeft */
.step.is-active .form-group {
    display: flex; 
    animation: openKlap 0.4s ease-out forwards;
}

/* Uitzondering voor Drukpositie: flex voor de blokjes naast elkaar */
.step.is-active .form-group.drukpositie {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

/* Maak de titels klikbaar en voeg de automatische nummering toe */
.step > label.d-block {
    cursor: pointer;
    padding: 12px 15px;
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 5px !important;
    transition: background-color 0.2s;
    font-weight: bold;
}

.step > label.d-block:hover {
    background-color: #e9ecef;
}

/* Dit plaatst automatisch "1. ", "2. ", etc. voor de titel */
.step > label.d-block::before {
    counter-increment: wizard-stap;
  opacity:.5;
    content: counter(wizard-stap) ". ";
}

/* Stijl voor de gekozen optie (nu een neutrale, subtiele grijze kleur in plaats van groen) */
.step-summary {
    color: #4CAF50; /* Bootstrap standaard grijs */
    font-weight: normal;
    margin-left: 5px;
  font-size:14px;
}

@keyframes openKlap {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 2. PLATTE LAYOUT STYLING (.normal-form) --- */

.normal-form {
    counter-reset: wizard-stap;
}

/* 1. Forceer dat alles ALTIJD zichtbaar is en zet JS-animaties uit */
.normal-form .step .form-group {
    display: block !important; 
    padding-top: 10px !important;
    margin-bottom: 25px !important; 
    opacity: 1 !important;
    transform: none !important;
    animation: none !important; /* Blokkeert de openKlap animatie */
}

/* 2. Deaktiveer de klik-actie en het hover-effect voor de JS wizard */
.normal-form .step > label.d-block {
    cursor: default !important;
    pointer-events: none !important;
    padding: 0px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 5px !important;
    margin-bottom: -5px !important;
    font-weight: bold !important;
    color: #212529 !important;
}

/* Zorg dat hij ook niet meer van kleur verandert als je eroverheen gaat */
.normal-form .step > label.d-block:hover {
    background-color: #f8f9fa !important; 
}

/* 3. De automatische "1. ", "2. " nummering voor de titel */
.normal-form .step > label.d-block::before {
    content: "";
}

/* 4. Mocht je de groene tekst gebruiken, behoud dan de stijl */
.normal-form .step-summary {
    color: #4CAF50 !important; 
    font-weight: normal !important;
    margin-left: 5px !important;
    font-size: 14px !important;
}
/* --- 2. JOUW DRUKPOSITIE OPMAAK --- */
.drukpositie .custom-radio {
    display: flex;
    align-items: center;
    width: 31.5%;
    position: relative; /* Nodig voor de absolute positionering van input en afbeelding */
}

.drukpositie .custom-control.custom-radio label {
    justify-content: flex-start;
    line-height: 1.2;
    padding: 100px 15px 10px 15px !important; /* Maakt ruimte vrij voor de afbeelding aan de bovenkant */
    width: 100%;
    text-align: center;
    border: 1px solid #ccc; /* Optioneel: subtiel randje om het blokje */
    border-radius: 5px;
    cursor: pointer;
}

.drukpositie .custom-control.custom-radio .bg {
    display: block !important;
    width: 72px;
    height: 72px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    box-shadow: none !important;
    border: 0 !important;
    /* Positioneer de afbeelding in de ruimte van de 100px padding van het label */
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* Onzichtbare input over het hele blok voor makkelijk klikken */
.drukpositie .custom-control-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Jouw afbeeldingskoppelingen */

#product_configure_custom_9191731_78075892 ~ .bg,
.drukpositie .custom-radio:nth-child(1) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494115839/borst-rug.png'); }
#product_configure_custom_9191731_78075893 ~ .bg,
.drukpositie .custom-radio:nth-child(2) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494115840/borst.png'); }
.drukpositie .custom-radio:nth-child(3) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494202113/borst-rechts.png'); }
#product_configure_custom_9191731_78075894 ~ .bg,
.drukpositie .custom-radio:nth-child(4) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494115837/borst-groot-rug-groot.png'); }
#product_configure_custom_9191731_78075895 ~ .bg,
.drukpositie .custom-radio:nth-child(5) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494115843/voorkant-groot.png'); }
#product_configure_custom_9191731_78075896 ~ .bg,
.drukpositie .custom-radio:nth-child(6) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494115841/rug-groot.png'); }

.drukpositie .custom-radio:nth-child(7) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494978905/mouw-links.png'); }
.drukpositie .custom-radio:nth-child(8) .bg{ background-image: url('https://cdn.webshopapp.com/shops/356882/files/494978906/mouw-rechts.png'); }

.whatsapp-wrapper {
    z-index: 99;
    width: 4em;
    height: 4em;
    transition: all .35s cubic-bezier(.68, -.55, .265, 1.55);
    position: fixed;
    inset: auto 10px 10px auto;
}
.whatsapp-wrapper:hover {
    transform: scale(1.2);
}
.whatsapp-bg {
    background-color: #25d366;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}
.whatsapp-img {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
font-size:36px
}