:root { 
    --achtergrondskleur: white;
    --pagina-breedte: 80rem;
    --menu-tekstkleur: #000000;
    ----product-winkel-link-tekstkleur: black;
    --kleur-scherpgestelde-link: #3daee9;
    font-family: sans-serif;
    font-size: 16px;
}

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

#hoofd-content {
    min-height: 25rem;
}

.sr-only {
    visibility:hidden;
}

.centreer-rij {
    margin-left: auto;
    margin-right: auto;
}

/* ##############
# Selectievakje #
############## */

.selectievakje-div {
    display: block;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.5rem;  
    cursor: pointer;
    line-height: 1.5rem;
}

/* Hide the browser's default checkbox */
.selectievakje-div input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    cursor: default;
}

/* Create a custom checkbox */
.selectievakje {
    position: absolute;
    top: 0;
    left: 0.2rem;
    height: 1.5rem;
    width: 1.5rem;
    background-color: rgb(228, 228, 228);
    border-radius: 0.4rem;
}

.selectievakje-div input:focus-visible ~ .selectievakje {
    border: 0.2rem solid #3daee9;
    top: -0.2rem;    
    left: 0rem;
}

/* On mouse-over, add a grey background color */
.selectievakje-div:hover input ~ .selectievakje {
    background-color: rgb(196, 196, 196);
}

/* When the checkbox is checked, add a blue background */
.selectievakje-div input:checked ~ .selectievakje {
    background-color: black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.selectievakje:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.selectievakje-div input:checked ~ .selectievakje:after {
    display: block;
}

/* Style the checkmark/indicator */
.selectievakje-div .selectievakje:after {
    left: 0.5rem;
    top: 0.2rem;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 0.25rem 0.25rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ##########
# Radioknop #
############# */

.radioknop-div {
    display: block;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    line-height: 1.5rem;
}

/* Hide the browser's default radio button */
.radioknop-div input {
    position: absolute;
    opacity: 0;
    cursor: default;
}

/* Create a custom radio button */
.radioknop {
    position: absolute;
    top: 0;
    left: 0.2rem;
    height: 1.5rem;
    width: 1.5rem;
    background-color: rgb(228, 228, 228);
    border-radius: 50%;
}

.radioknop-div input:focus-visible ~ .radioknop {
    border: 0.2rem solid #3daee9;
    top: -0.2rem;    
    left: 0rem;
}

/* On mouse-over, add a grey background color */
.radioknop-div:hover input ~ .radioknop {
    background-color: rgb(196, 196, 196);
}

/* When the radio button is checked, add a blue background */
.radioknop-div input:checked ~ .radioknop {
    background-color: black;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioknop:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioknop-div input:checked ~ .radioknop:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioknop-div .radioknop:after {
    top: 0.4rem;
    left: 0.4rem;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: white;
}

/* ##########
# Navigatie #
############# */

#navigatiebar {
    width: 100%;
}

#logorij {
    /* position: relative; */
    padding-top: 1rem;
    padding-bottom: 0.25rem;
    position: relative;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border-color: transparent;
    border-style: solid;
    max-width: var(--pagina-breedte);
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
}

.logo-nav-link {
    display: block;
    padding: 0;
    position: relative;
    z-index: 1;
    
  }

@media screen and (min-width: 64em) {

    .logo-nav-link { 
        position: relative;
        width: 20rem;
    } 

    #logorij {
        border-width: 0 1rem;
    }

    /* .hoofd-menu-drukknop {
        display: none;
    }

    #cat-menu-rij {
        width: 100%;
        background-color: black;
    }
    
    #cat-menu-selectie {
        max-width: var(--pagina-breedte);
        list-style: none;
        justify-content: space-between;
        display: flex;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: auto;
        white-space: nowrap;
    }
    
    #cat-menu-selectie li {
        padding: 14px;
        text-align: center;
        display: inline-block; 
    }
    
    #cat-menu-selectie li a {
        color: white;
        text-decoration: none;
    }
    
    #cat-menu-selectie li:hover {
        color: white;
        text-decoration: underline;
    }

    .verberg-bij-groot {
        display: none;
    } */
}

.hoofd-menu-drukknop {
    display: none;
}

#cat-menu-rij {
    width: 100%;
    background-color: #B9B8B5;
}

#cat-menu-selectie {
    max-width: var(--pagina-breedte);
    list-style: none;
    justify-content: space-between;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
}

#cat-menu-selectie li {
    padding: 14px;
    text-align: center;
    display: inline-block; 
}

#cat-menu-selectie li a {
    color: white;
    text-decoration: none;
}

#cat-menu-selectie li:hover {
    color: white;
    text-decoration: underline;
}

.verberg-bij-groot {
    display: none;
}

@media screen and (max-width: 64em)  {

    /*
   .verberg-mobiel-menu {
        display: none;
    }

    #mobiel-menu {
        top: 0;
        left: 0;
        position: fixed;
        height: 100%;
        width: 89%;
        z-index: 202;
        background-color: var(--achtergrondskleur);
    }

    @keyframes inglijder {
        from {
          margin-left: -100%;
        }
      
        to {
          margin-left: 0%;
        }
    }
    
    .navigatie-open #mobiel-menu {
        animation-duration: 0.5s;
        animation-name: inglijder;
    }

    @keyframes infader {
        from {
        background-color: transparent;
        }
      
        to {
            background-color: #000;
        }
    }

    .navigatie-open #mobiel-menu-achtergrond {
        top: 0;
        top: 0;
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: #000;
        z-index: 100;
        opacity: 0.75;
        animation-duration: 0.5s;
        animation-name: infader;
    }
    
    #cat-menu-rij {
        width: 100%;
        
    }

    #cat-menu-selectie {
        max-width: var(--pagina-breedte);
        list-style: none;
        overflow: auto;
        margin: 0;
        padding: 0;
    }

        
    #cat-menu-selectie li {
        text-align: left;
        padding: 0.75rem;
        
        background-color: black;
    }

    #cat-menu-selectie li:not(:first-child) {
        margin-top: 0.2rem; 
    }
    
    #cat-menu-selectie li a {
        color: white;
        text-decoration: none;
    }
    
    #cat-menu-selectie li:hover {
        color: white;
        text-decoration: underline;
    }

    #mobiel-menu-logo-rij {
        border-width: 0 1rem;
        border-color: transparent;
        border-style: solid;
        padding-top: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    } */
    
    .logo-nav-link  {
        width: 12rem;
    }

    #logorij {
        border-width: 0 1rem;
    }
}
/* 
@media screen and (max-width: 24.5em)  {
    .logo-nav-link {
        display: none;
    }

    .logo-klein-nav-link {
        display: flex;
        flex-flow: column wrap;
        align-items: flex-start;
    }
}

@media screen and (min-width: 24.51em)  {
    .logo-klein-nav-link {
        display: none;
    }

} */

.logo-klein-nav-link {
    display: none;
}


.logo-klein-nav-link img {
    height: 1.58rem;
    

}

.logo-klein-nav-link img:nth-child(2) {
    margin-top: 5px;
}

.logo-nav-link > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}



#klant-menu-knoppen {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.klant-menu-knop {
    position: relative;
    display: inline;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: .25rem;
}



.klant-menu-knop > a > img {
    box-sizing: inherit;
    height: 2rem;
    display: inline-block;
}

#winkelwagenmenu-hoeveelheid {
    position: absolute;
    right:-0.5rem;
    top: -0.5rem;
    margin: 0;
    display: inline-flex;
    color: white;
    font-weight: bold;
    background-color: black;
    border-radius: 100%;
    padding: 0rem 0.5rem;
}

#menu-logo {
    display: flex;
    /* flex: 0 0 auto; */
    align-items: center;
    /* width: 3rem;
    height: 3rem; */
}

.hoofd-menu-drukknop {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}

.hoofd-menu-drukknop > img {
    height: 1.5rem
}

#hoofd-content {
    width: 100%;
}

#hoofd-inhoud {
    max-width: var(--pagina-breedte);
    margin-left: auto;
    margin-right: auto;
}

#topstaaf-producten {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
}



/* #######
# Winkel #
########## */

.winkeltitel, .winkelomschrijving, #kop-productpagina h1 {
    margin: 0.5rem 0 0;
    word-wrap: break-word;
}

.vette-winkelomschrijving {
    font-weight: 700;
}

/* .winkel-product-tekst {
    
} */

.winkel-klein-hartje {
    color: transparent;
    text-shadow: 0 0 0 black;
    font-size: 0.5rem;
    vertical-align:baseline;
    display: inline-block;
    transform: rotate(45deg);
}

.winkel-sorteerder select {
    border: 2px solid black;
    background-color: white;
    padding: 0.5rem;
    font-size: 0.95rem;
    border-radius: 1rem;
}


@media screen and (max-width: 50em) {
    #inhoud-winkel {
        border-width: 0 1rem;
        border-style: solid;
        border-color: transparent;
    }
}

#producten-winkel-raster {
    display: grid;
    margin: 1rem 0;
}

/* @media screen and (min-width: 30em) { */
@media screen and (min-width: 22em) {
    #producten-winkel-raster {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}


@media screen and (min-width: 50em) {
    #inhoud-winkel {
        display: flex;
        flex-wrap: nowrap;
    }


    #hoofddeel-winkel {
        border-width: 0 1rem;
        border-style: solid;
        border-color: transparent;
    }


    #detailstaaf-winkel {
        width: 15rem;
        min-width: 15rem;
        border-width: 0 1rem;
        border-color: transparent;
        border-style: solid;
        overflow: hidden;
    }

    #producten-winkel-raster {
        grid-template-columns: repeat(3, 1fr);
    }


}

@media screen and (min-width: 83em) {
    #producten-winkel-raster {
        grid-template-columns: repeat(4, 2fr);
    }
    
    .product-winkel-container {
        width: auto;
    }
}

#producten-winkel-raster {
    grid-gap: 15px;
}

.winkel-product-afbeelding-container {
    border: 0.25rem solid transparent;
}

.product-winkel-afbeelding {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}


.product-winkel-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}



.product-winkel-link {
    text-decoration: none;
    text-align: center;
    color: var(--product-winkel-link-tekstkleur);
}

.product-winkel-link:hover {
    text-decoration: underline;
    border: 1px solid rgb(158, 143, 143);
    margin: -1px;
    border-radius: 1rem;
    overflow: hidden;
}

.winkel-productkleuropties {
    list-style-type: none;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.winkel-kleuroptiediv {
    border-top: 0.25rem solid transparent;
    margin-top: auto;
}

.winkel-productkleuropties li {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 0.125rem #6b6a6a5e;
}

.paginatie {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.paginatie-knop  {
    min-width: 3rem;
    padding: .75rem 0rem;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: black;
    text-decoration: none;
    border: none;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 1rem;
    margin: 0;
    font-weight: bold;
}

p.paginatie-knop {
    color: rgb(114, 113, 113);
    border-color: rgb(114, 113, 113);
}

.paginatie-knop:hover  {
    background-color: black;
    
    color: white;
}

p.paginatie-knop:hover {
    color: rgb(114, 113, 113);
    border-color: rgb(114, 113, 113);
    background-color: white;
}

.roteer-half {
    transform: rotate(180deg);
    line-height: 1rem;
}


/* ########
# Product #
########### */
@media screen and (min-width: 41em) {
    #hoofdinhoud-productpagina {
        display: flex;
    }

    #hoofdinhoud-productpagina > div:not(:last-of-type) {
        width: 60%;
    }
    
    #hoofdinhoud-productpagina > div:last-child {
        width: 40%;
    }
}

.nut-productbak {
    border-color: transparent;
    border-style: solid;
    border-width: 0 1rem;
    margin-bottom: 1rem;

}

.plakkerig-productelement {
    top: 0;
    position: sticky;
}

.productkleurtitel {
    margin: .5rem 0;
    font-size: 1.25rem;
}

#geselecteerd-productskleur {
    font-weight: bold;
}

.kleur-vierkantenkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: .25rem;
}

.kleur-vierkantradio {
    box-sizing: inherit;
    content: '';
}


.kleur-vierkantradio input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
    display: block;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
}

.kleur-vierkantradio label {
    width: 3rem;
    height: 3rem;
    display: block;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0 0 0 0.125rem #6b6a6a5e;
    position: relative;
    content: '';
}

.product-element-verstopt {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
    border: 0;
    margin: -1px;
}

.kleur-vierkantradio input:focus-visible + label::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    width: calc(100% + 0.25rem);
    height: calc(100% + 0.25rem);
    border: 2px solid var(--kleur-scherpgestelde-link);
    border-radius: 0.5rem;
}

.kleur-vierkantradio input:checked + label::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    width: calc(100% + 0.25rem);
    height: calc(100% + 0.25rem);
    border: 2px solid black;
    border-radius: 0.5rem;
}

.product-optiefoto {
    display: flex;
    justify-content: center;
    border: 1px solid black;
    border-radius: 0 0 0.25rem 0.25rem;
    border-top-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.product-optiefoto img {
    max-width: 100%;
    max-height: 30rem;
    box-sizing: border-box;

}

.product-optieselectie {
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

.aanpassingswaarde, .aanpassingsvak, .groottewaarde {
    width: 100%;
    padding: .375rem .75rem;
    background-color:white;
    border-radius: 0.25rem;
    font-size: 1rem;
    border: 1px solid black;
    box-sizing: border-box;
}

.aanpassingswaarde[type=checkbox] {
    width: auto;
    /* padding: 0; */
}

input.aanpassingswaarde, input.aanpassingsvak {
    font-size: 1.5rem;
}

.product-form-groep, .product-vakfoutmelding, .kleur-vierkantenkeuze {
    margin-bottom: 1rem;
}

.product-onzichtbaarheid {
    display: none;
}

.product-vakfoutmelding {
    padding: 1rem 1rem;
    color: red;
    border: 2px solid red;
    border-radius: 0.25rem;
    background-color: #fdcec0;
}

.product-drukknop {
    display: block;
    width: 100%;
    border-radius: 1rem;
    border-color: black;
    border-style: solid;
    background-color: white;
    padding: 0.5rem 0;
    font-size: 1.5rem;
}

.product-drukknop:hover {
    background-color: black;    
    color: white;
    cursor: pointer;
}

/* ----------------
- Productgallerij -
------------------- */

/* Copyright (c) 2022 Frederic R. (https://codepen.io/fredericrous/pen/xxVXJYX) */

.product-gallerij-doos {
    /* position: relative; */
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

#vorige-knop-productgallerij, #volgende-knop-productgallerij {
    position: absolute;
    top: 50%;
    display: block;
    width: 4rem;
    height: 4rem;
    background-color: transparent;
    border: 0px solid transparent;
    cursor: pointer;
}

#vorige-knop-productgallerij img, #volgende-knop-productgallerij img {
    width: 100%;
    height: 100%;
    
}

#volgende-knop-productgallerij {
    right: 0;
    overflow: hidden;
}

.productgallerij::-webkit-scrollbar {
    display: none;
  }

.productgallerij {
    padding-left: 1rem;
    padding-right:1rem;
	display: grid;
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: scroll;
	height: 100%;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-y: hidden;
    /* overflow-x: hidden; */
}
/* 
.actieve-productgallerij {
	scroll-snap-type: unset;
} */

.productgallerij li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 3px;
    display: flex;
}

.productgallerij li img {
    max-height: 40rem;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    pointer-events: none
}

@media screen and (max-width: 41em) {
    .productgallerij li img {
        max-height: 30rem;
    }
}

.gallerij-knoppen {
    position: absolute;
}

/* ############
# Winkelwagen #
############### */

.winkelwagen-raster {
    display: grid;
    gap: 1rem;
    border-color: transparent;
    border-style: solid;
    border-width: 0 1rem;
    margin-bottom: 1rem;
}

@media screen and (min-width: 42em) {
    .winkelwagen-raster {
        grid-template-columns: repeat(4, 1fr);
    }

    .winkelwagen-raster-kop, .winkelwagen-raster-leegte {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .winkelwagen-raster-producten {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .winkelwagen-raster-bedrag {
        grid-column-start: 3;
        grid-column-end: 5;
    }
}

@media screen and (min-width: 50em) {
    .winkelwagen-raster {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

    }

    .winkelwagen-raster-kop, .winkelwagen-raster-leegte {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .winkelwagen-raster-producten {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

.winkelwagen-raster-kop h1 {
    margin: 0.5rem 0 0;
}

.winkelwagen-product:not(:last-child) {
    margin-bottom: 2rem;
}

.winkelwagen-productafbeelding {
    max-width: 150px;
}

.knop-vrndr-hoeveelheid {
    width: 2rem;
    border-color: transparent;
    background-color: transparent;
}

.knop-vrndr-hoeveelheid:hover {
    cursor: pointer;
}

.knop-vrndr-hoeveelheid img {
    max-width: 100%;
    max-height: 100%;
}

.winkelwagen-product-hoeveelheid {
    display: flex;
}

.winkelwagen-productrij-gemengd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.winkelwagen-producttotaal, .kassa-producttotaal {
    font-weight: bold;
}

.kassa-product-aantal {
    margin: 0.25rem 0;
}

.winkelwagen-kleverig-bedrag {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}

.winkelwagen-bedrag-geraamte {
    display: flex;
    justify-content: space-between;
}

.winkelwagen-bedrag-geraamte dd {
    padding: 0;
    margin: 0;
}

.winkelwagen-bedrag-geraamte dd, .winkelwagen-bedrag-geraamte dt, .winkelwagen-producttitel p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.winkelwagen-producttitel, .kassa-producttitel {
    font-weight: bold;
}


.winkelwagen-bedrag-totaal dt, .winkelwagen-bedrag-totaal dd {
    font-weight: bold;
}

.winkelwagen-bedrag-totaal, .winkelwagen-product {
    border-top: 1px solid rgb(196, 196, 196);
}

.winkelwagen-kassa-knop {
    width: 100%;
    text-align: center;
    border-radius: 1rem;
    border: 2px solid black;
    box-sizing: border-box;
}

.winkelwagen-kassa-knop:hover {
    border: 2px solid transparent;
    border-radius: 1rem;
}

.winkelwagen-kassa-knop a {
    display: inline-block;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    text-decoration: none;
    color: black;
    box-sizing: border-box;
}

.winkelwagen-kassa-knop a:hover {
    display: inline-block;
    background-color: black;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    text-decoration: none;
    color: white;
    
    border-radius: 1rem;
}

.winkelwagen-kassa-knop a:focus-visible {
    border: 2px solid black;
    border-radius: 1rem;
}

.winkelwagen-onvertoonder {
    display: none;
}

.winkelwagen-inpakker-div {
    margin-bottom: 1rem;
}

/* ######
# Kassa #
######### */

.kassa-inhoud {
    display: flex;
    gap: 1rem;
    border-style: solid;
    border-width: 0 1rem;
    border-color: transparent
}

@media screen and (max-width: 32em) {

    .kassa-inhoud {
        flex-wrap: wrap;
    }

    .kassa-inhoud .kassa-gegevens {
        width: 100%;
    }

    .kassa-inhoud .kassa-overzicht {
        width: 100%
    }
}

@media screen and (min-width: 32em) {

    .kassa-inhoud .kassa-gegevens {
        width: 50%;
    }

    .kassa-inhoud .kassa-overzicht {
        width: 50%
    }
}

@media screen and (min-width: 42em) {

    .kassa-inhoud .kassa-gegevens {
        width: 60%;
    }

    .kassa-inhoud .kassa-overzicht {
        width: 40%
    }
}

@media screen and (min-width: 63em) {

    .kassa-inhoud .kassa-gegevens {
        width: 70%;
    }

    .kassa-inhoud .kassa-overzicht {
        width: 30%
    }
}

.kassa-titel {
    border-color: transparent;
    border-style: solid;
    border-width: 0 1rem;
}

.kassa-titel h1 {
    margin: 0;
}

.kassa-form-titel {
    border-bottom: 1px solid rgb(196, 196, 196);
}

.kassa-form-titel h2 {
    margin: 0;
    font-weight: 500;
    font-size: 1.5rem;
}

.kassa-form-categorie {
    margin-top: 0.5rem;
}

@media screen and (min-width: 48em) {
    .kassa-form-evenknie {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
    
    .kassa-form-drie-evenknie {
        width: 100%;
        display: flex;
        gap: 1rem;
    }    
}

@media screen and (max-width: 63em) {
    .kassa-form-evenknie.kassa-form-drie-evenknie
    {
        flex-direction: column;
        gap: 0;
    }
}

.kassa-form-veld {
    width: 100%;
    margin-bottom: 0.5rem;
}

.kassa-form-veld label {
    display: block;
    /* padding-left: .75rem; */
}

.kassa-form-veld input, .kassa-form-veld textarea, .kassa-form-veld select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    border: 1px solid black;
    border-radius: 0.25rem;
    padding: .375rem .75rem;
}

.kassa-form-veld textarea {
    resize: vertical;
    min-height: 2.5rem;
    height: 5.5rem;
    max-height: 10rem;
}

.kassa-form-veld select {
    background-color: white;
}


.kassa-product {
    border-bottom: 1px solid rgb(196, 196, 196);
    padding-bottom: 0.5rem;
}

.kassa-productafbeelding {
    max-height: 150px;
    max-width: 300px;
}

.kassa-productrij-gemengd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kassa-bedrag-geraamte {
    display: flex;
    justify-content: space-between;
}

.kassa-bedrag-geraamte dd {
    padding: 0;
    margin: 0;
}

.kassa-bedrag-geraamte dd, .kassa-bedrag-geraamte dt, .kassa-producttitel p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.kassa-kleverig-overzicht {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.kassa-factuur-selectievakje {
    margin-top: 1rem;
}

.kassa-radioknoppen-groep {
    margin-bottom: 1.5rem;
}

.kassa-onvertoonder {
    display: none;
}

.kassa-waarde-fout {
    color: red;
    border: 2px solid red;
    border-radius: 0.25rem;
    background-color: #fdcec0;
}

/* #######
# Footer #
########## */

footer {
    background-color: black;
    color: white;
}

.footer-afzetter {
    max-width: var(--pagina-breedte);
    margin-left: auto;
    margin-right: auto;

}

.footer-container {
    max-width: var(--pagina-breedte);
    display: grid;
    justify-content: space-evenly;
    border-style: solid;
    border-color: transparent;
    border-width: 0 1rem;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 33rem) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
}

@media screen and (min-width: 50rem) {
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footerhart {
    color: transparent;
    text-shadow: 0 0 0 white;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: inline-block;
}

footer h4 {
    font-size: 1.2rem;
    margin: 0.5rem 0 0;
}

footer p, .footer-nagivatie-lijst {
    margin: 0.5rem 0;
}

footer a {
    color: white;
}

.betalingslogo {
    height: 4rem;
}

.footer-nagivatie-lijst {
    list-style: none;
    padding-left: 0
}

.footer-nagivatie-lijst a {
    display: inline-block;
    width: 100%;
    padding-bottom: 0.5rem;
    /* text-align: center; */
}

.sociaal-icoon {
    width: 2.5rem;
    text-decoration-style: none;
}

.sociaal-icoon-link {
    text-decoration: none;
}

.footer-socials-logo-div {
    width: 7.5rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}

/* ############
# Bevestiging #
############### */

.bevestigingscontainer, .voorwaardencontainer {
    border-color: transparent;
    border-style: solid;
    border-width: 0 1rem;
}

.bevestigingscontainer h2, .voorwaardencontainer h2 { 
    margin-top: 0;
    margin-bottom: 1rem;
}

.bevestigingscontainer h5, .voorwaardencontainer h5 { 
    margin: 1rem 0;
}

/* ########
# Korting #
########### */

.winkelkortingsprijs {
    font-size: 1.5rem;
}


.kortingsprijsvol {
    font-size: 2.5rem;
    font-weight: bold
}

.productdoorstreepje, .winkeldoorstreepje {
    position: relative;
    display: inline-block;
    
}
.productdoorstreepje {
    font-size: 1.2rem;
}

.productdoorstreepje::before, .winkeldoorstreepje::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background:black;
}