:root {
  --color1: #2F383D;
  --color2: #A52F2F;
  --color3: #000;
  --color4: #EFE8E2;
  --color5: #28A745;
  --fontColor1: #1E1812;
  --fontColor2: #6F6F6F;
  --borderColor1: #E9EAEB;
  --fontFamily1: "Roboto Flex", Helvetica, Arial, sans-serif;
  --fontFamily2: "Merriweather", Helvetica, Arial, sans-serif;
  --bodyFontSize: 15px;
  --h1Size: 40px;
  --h2Size: 30px;
  --h3Size: 20px;
  --h4Size: 16px;
  --h5Size: 20px;
  --maxWidth: 1480px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 8px;
  --borderRadius2: 99px;
  --leftFr: 1fr;
  --rightFr: 1fr;
}

html{
  overflow-x: hidden;
}

@view-transition {navigation: auto;}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor1); background: #FFF; font-size: var(--bodyFontSize); line-height: 1.85em;}
::selection {background: var(--color1); color: #FFF;}
  
textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: 5px; font-size: 16px; color: var(--fontColor1); padding: 10px 15px;}

input[type="checkbox"]::before {font-weight: bold; color: var(--color4);}
input[type="checkbox"]:checked::before {color: var(--color1);}

input[type="radio"]::before {font-weight: bold; color: var(--color4);}
input[type="radio"]:checked::before {color: var(--color1);}
  
.breadcrumbs {display: none; margin: 0 0 var(--space30) 0;}
.breadcrumbs ol li a {color: var(--color1) !important; background: var(--color4); border-radius: var(--borderRadius2); padding: 10px 20px; text-decoration: none !important;}
.breadcrumbs li.crumb:nth-child(5) {display: inline-block;}
.breadcrumbs li.crumb:nth-child(5) a::before {content: "\f137"; font-family: "Font Awesome 5 Pro"; color: var(--color1); margin-right: 5px; font-weight: bold; font-size: 15px}
.breadcrumbs li.crumb, .breadcrumbs li.crumbSpace {display: none;}
  
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); font-weight: 500; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0;}
  
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size);}
h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size: var(--h4Size); font-family: var(--fontFamily1); text-transform: uppercase; font-weight: normal; letter-spacing: 0.25em;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: normal; color: #999;}

h2 strong {font-weight: inherit; color: var(--color2);}

blockquote {padding: var(--space50) var(--space100); box-sizing: border-box; background: var(--color4); border-radius: var(--borderRadius1); aspect-ratio: 2 / 1; display: flex; flex-direction: column; color: var(--fontColor2); font-family: var(--fontFamily2); font-weight: lighter; font-size: var(--h3Size); line-height: 1.5em;}
blockquote::before {display: none;}
blockquote::after {content: "\201D"; font-family: var(--fontFamily2); position: absolute; bottom: 0; right: 45%; left: unset; border: 0; height: unset; width: unset; background: unset; font-size: 100px; font-weight: 100; opacity: .1; display: block; transform: scale(8); transform-origin: top;}
blockquote p {margin: auto;}

a[href^="tel:"], a[href^="mailto:"] {text-decoration: none;}
a[href^="tel:"]::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; margin-right: var(--space10); font-size: inherit; color: var(--color2);}
a[href^="mailto:"]::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; margin-right: var(--space10); font-size: inherit; color: var(--color2);}


a.logo {margin: auto 0; outline: 0; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;}
a.logo img {width: 170px; margin: 0;}

a.knop, .button, a.button, button {font-family: inherit; font-size: var(--bodyFontSize); padding: 10px 20px; border-radius: var(--borderRadius2); background: var(--color2); line-height: 1; font-weight: normal; text-decoration: none !important;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color3);}

a.knop::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; margin-left: var(--space10); font-size: inherit; background: #FFF; border-radius: 100%; color: var(--color2); width: 32px; height: 32px; line-height: 32px; display: inline-block; position: relative;}

a.knop.twee {padding: 18px 30px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8.5px);}
a.knop.twee:hover {background: rgba(255, 255, 255, 0.3);}

a.knop.twee::after {display: none;}

a.knop.wit {background: #FFF; color: var(--color1);}
a.knop.wit::after {background: var(--color1); color: #FFF;}

.button, a.button, button {padding: 15px 30px;}

.bovenkantHolder {position: sticky; top: 0; border: 0; border-bottom: 1px solid #22333b0d; transition: .3s all ease; background: unset;}
.bovenkantHolder::before {content: ""; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8.5px); position: absolute; left: 0; right: 0; top: 0; bottom: 0;}

.bovenkantHolder .bovenkant {min-height: 80px; max-width: 100%;}

.bovenkantHolder .bovenkant .art-menu.boven {margin: auto 0; position: static;}
.bovenkantHolder .bovenkant .art-menu.boven li {position: static;}
.bovenkantHolder .bovenkant .art-menu.boven li a .t {color: var(--fontColor1); font-size: 16px; position: relative; z-index: 12;}
.bovenkantHolder .bovenkant .art-menu.boven li.hoverMenuActief > a:hover::after {content: ""; position: absolute; left:-200px; right:-100px; height: 40px; padding: 0; box-sizing: border-box; top:calc(100% - 30px);}

.bovenkantHolder .bovenkant .shopitems {margin: auto 0; align-items: center;}

.bovenkantHolder .bovenkant .zoekenTrigger {margin: auto 0 auto auto; padding: 10px; box-sizing: border-box; cursor: pointer; position: relative;} 
.bovenkantHolder .bovenkant .zoekenTrigger::before {font-weight: normal; color: var(--fontColor1); font-size: 18px; content: "\f002"; font-family: "Font Awesome 5 Pro"; position: relative; top: 1px;}

.zoekenHolder {position: fixed; top: -100%; opacity: 0; transform: translateZ(0); transition: right .5s ease-in-out; z-index: 20; width: 100%; padding: var(--space15) var(--space20); box-sizing: border-box;}
.zoekenHolder.open {opacity: 1; pointer-events: all; top: 0;}

.zoekenHolder .zoeken {border-radius: var(--borderRadius2); background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(8.5px); box-sizing: border-box; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .07); max-width: 900px; margin:  0 auto;}
.zoekenHolder .zoeken .knop {padding: var(--space15) var(--space30); color: var(--fontColor1);}
.zoekenHolder .zoeken .veld {width: 100%;}
.zoekenHolder .zoeken .veld #zoekWoordID {padding: var(--space15) var(--space30); color: var(--fontColor1) !important;}
.zoekenHolder .zoeken .veld #zoekWoordID::placeholder {color: var(--fontColor2);}

.speedsearchResultBg, .speedsearchLoader {display: none;}
.speedSearch.categorie {order: 1;}
.speedSearch.artikelen  {width: 100%;}
#speedsearchResult {left: 0; right: 0; border-radius: var(--borderRadius1); max-width: 1520px; margin: 0 auto; padding: 0px;}
#speedsearchResult .houder  {display:block; max-height: 100%; border: 1px solid #ddd; border-radius: var(--borderRadius1); box-shadow: unset; font-size:inherit; width: 100%; box-sizing: border-box; padding: var(--space20);}
#speedsearchResult .houder .speedSearch ul {display: flex; flex-direction: column; gap: 5px;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .speedSearch ul li a {border: 0; font-size: var(--bodyFontSize); padding: 5px 10px; font-weight: 500; color: var(--fontColor1); border-radius: var(--borderRadius1); line-height: 1.35em;}
#speedsearchResult .houder .speedSearch ul li a:hover {background: #f2f2f2;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size: 12px; font-weight: normal;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .titel {display: none;}
#speedsearchResult .houder .speedSearch .resultaat {padding: 10px; color: var(--fontColor1); font-weight: 500; font-size: var(--h3Size); margin: 0 0 10px 0; text-transform: lowercase;}
#speedsearchResult .houder .speedSearch .resultaat .aantal {color: var(--fontColor1);}
#speedsearchResult .houder .speedSearch.categorie ul li a .thumbnail img {display: none;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .knopAllesOnder a {display: block; width: 100% !important; padding: 15px 30px; border-radius: var(--borderRadius2); font-weight: normal; transition: all 0.3s ease 0s; box-sizing: border-box; border: 0; line-height: 1; text-align: center; background: var(--color1); color: #FFF; font-size: var(--bodyFontSize);}
#speedsearchResult .houder .knopAllesOnder a:hover {background: var(--color1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: darken;}
#speedsearchResult .houder .speedSearch.artikelen .speedsearchPrijs {float: right; margin: 2px 5px 2px 10px;}

.winkelwagenHouder {display: block;}
.winkelwagenHouder .winkelknop {background: unset; padding: 10px; margin: 0;}
.winkelwagenHouder .winkelknop .icoon::before {font-weight: normal; font-size: 18px; content: "\f290";}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: unset; padding: 0; border-radius: 0; line-height: normal; top: -10px; right: -10px; color: var(--fontColor1); font-weight: normal; text-align: left;}

.winkelwagenHouder .winkelwagen {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: #FFF; transform: translateZ(0); transition: right .5s ease-in-out; width: 500px; max-width: 100vw;}
.winkelwagenHouder.openGeklapt .winkelwagen {top: 0; right: 0;}
.winkelwagenHouder .winkelwagen #winkelmandje  {display: flex; flex-direction: column; height: 100vh;}

.winkelwagenHouder .winkelwagen #winkelmandje .artikelKenmerken {display: none;}

.winkelwagenHouder .winkelwagen .inhoud.artikelen > .titel {display: flex; align-items: center; margin: 0 0 var(--space30) 0;}
.winkelwagenHouder .winkelwagen .inhoud.artikelen > .titel .close {color: var(--color1); background: unset; padding: 0; margin-left: auto; font-size: 19px;}
.winkelwagenHouder .winkelwagen .inhoud.artikelen > .titel .h3 {margin: 0;}

.winkelwagenHouder .winkelwagen .inhoud.artikelen .winkelmandjeLeeg {border: 0; text-align: center; opacity: .3;}

.winkelwagenHouder .winkelwagen .inhoud {padding: var(--space40); box-sizing: border-box;}
.winkelwagenHouder .winkelwagen .inhoud.totaal {margin: auto 0 0; background: #FFF; border-top: 1px solid var(--borderColor1); padding: var(--space20) var(--space40); gap: var(--space40);}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {color: var(--fontColor1); font-weight: 600; font-size: 18px;}

.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen {width: 100%;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {margin: 0; box-sizing: border-box; background: var(--color2);}

.winkelwagenHouder .winkelwagen .inhoud.artikelen .h3 {font-size: var(--h3Size); margin: 0 0 10px 0; line-height: 1.35em;}

.kassaArtikelen .artikel td {border: 0;}
.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: normal; color: var(--fontColor1);}
.kassaArtikelen .artikel .afbeeldingHouder {background: #F7F7F7; border-radius: var(--borderRadius1);}
.kassaArtikelen .artikel .afbeeldingHouder img {mix-blend-mode: darken;}
.kassaArtikelen .artikel .regelTotaal {padding-left: var(--space20);}
.kassaArtikelen .artikel .regelTotaal .prijzen .prijs {font-weight: normal;}
.kassaArtikelen .artikel .aantallen {padding-left: var(--space20);}
.kassaArtikelen .artikel .aantallen input {width: 50px; padding: var(--space10); text-align: center;}

/* Later als de classnamen gefixt is aanpassen naar:
.kassaArtikelen .artikel .artikelKenmerken .kenmerkArt.kenmerkArt.bestelArtikel .kenmerk .titel */
.kassaArtikelen .artikel .artikelKenmerken .kenmerkArt .kenmerk .titel {color: #FF0000;}

.account {display: flex;}
.account li {border: 0;}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; font-size: 18px; font-weight: normal; color: var(--fontColor1);}
.account .welkom,
.account .inloggenKnop .titel, 
.account .mijnAccountKnop .titel, 
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje, 
.account .favorietenKnop .favAantal {display: none;}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}

.account .houder {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: #FFF; transform: translateZ(0); transition: right .5s ease-in-out; width: 100% !important; max-width: 500px; padding: var(--space40); box-sizing: border-box;}
.account .openGeklapt .houder {top: 0; right: 0;}

.account .inloggen .inlogKnop {display: block;}
.account .inloggen .inlogKnop a {display: block; box-sizing: border-box; pointer-events: all !important;}
.account .inloggen .inlogKnop .wachtwoordKwijt {margin: var(--space10) 0 0 0;}
.account .inloggen .inlogKnop .wachtwoordKwijt a {color: #777; text-decoration: none; text-align: center;}

.account .houder .houder1 {padding: 0;}
.account .houder .houder1 .mijnWelkomstPagina {display: none;}

.account .houder .houder1 > .titel {display: flex ; align-items: center; margin: 0 0 var(--space30) 0;}
.account .houder .houder1 > .titel h3 {margin: 0;}
.account .houder .houder1 > .titel .close {color: var(--color1); background: unset; padding: 0; margin-left: auto; font-size: 19px;}

.account .houder .houder2 {border: 0; background: unset; padding: var(--space20) 0;}
.account .houder .houder2 .uitloggen a {font-family: inherit; font-size: var(--bodyFontSize); padding: 15px 30px; border-radius: var(--borderRadius2); background: var(--color2); line-height: 1; font-weight: normal; text-decoration: none !important; cursor: pointer; border: 0; color: #fff; display: block; box-sizing: border-box; text-align: center;}
.account .houder .houder2 .uitloggen a[href^="javascript:naarverkopersaccount"] {margin: 0 0 10px 0; background: var(--color1);}

.account .mijnAccount .houder .houder1 div > a {border-bottom: 1px solid var(--borderColor1); padding: 10px 0; box-sizing: border-box; font-size: var(--bodyFontSize); text-decoration: none; position: relative; display: flex ; cursor: pointer;}
.account .mijnAccount .houder .houder1 div > a::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; font-size: 13px; font-weight: normal; margin-left: auto; color: var(--fontColor1);}

.account .mijnAccount .houder .houder1 .favorieten a .titel {display: block;}

.account .houder .accountKop {font-size: var(--h3Size); font-family: var(--fontFamily1); font-weight: 500; color: var(--color1); line-height: 1.35em;}

.menu-toggle {line-height: 0; cursor: pointer; user-select: none; -webkit-user-select: none; gap: var(--space15); transition: .3s all ease; display: flex; align-items: center; justify-content: center; position: relative; margin: auto var(--space30) auto 0; top: 50%; z-index: 5; transform: translateY(-50%); z-index: 14;}
.menu-toggle .icoon {width: 20px; height: 18px; position: relative; transition: .5s ease-in-out;}

.menu-toggle .icoon span {display: block; position: absolute; height: 2px; width: 100%; background: var(--color3); transition: .25s ease-in-out; left: 0;}
.menu-toggle .icoon span:nth-child(1) {top: 3px;}
.menu-toggle .icoon span:nth-child(2) {top: 11px;}

.menu-toggle.open .icoon span:nth-child(1) {transform: rotate(45deg); top: 8px;}
.menu-toggle.open .icoon span:nth-child(2) {transform: rotate(-45deg); top: 8px;}

.menu-toggle .text > span {display: block; color: var(--fontColor1); transition: all .25s ease-in-out; font-size: 16px; font-weight: normal;}
.menu-toggle .text > span.menu-sluiten {opacity: 0; visibility: hidden; transform: translate(15px, 0);}
.menu-toggle.open .text > span.menu-sluiten {opacity: 1; visibility: visible; transform: translate(0, 0);}
.menu-toggle.open .text > span.menu-open {opacity: 0; visibility: hidden; transform: translate(-15px, 0);}

.menu-holder {position: fixed; top: 0; width: 100vw; max-width: 480px; height: 100vh; z-index: 13; background: #FFF; left: -100%; opacity: 0; visibility: hidden; transition: .5s all ease; border-right: 1px solid var(--borderColor1);}
.menu-holder.open {left: 0; opacity: 1; visibility: visible; transition: all .5s cubic-bezier(0.87, 0, 0.13, 1); transition-delay: 0s;}

.menu-holder .content {padding: 80px 0; box-sizing: border-box; height: 100%; display: flex; flex-direction: column;}

.menu-holder .art-nav {padding: var(--space20) var(--space30); box-sizing: border-box; display: block; margin: 0;}

.menu-holder .art-nav.overige {margin-top: auto;}

.menu-holder .art-nav .art-menu li {display: block; position: relative; overflow: hidden;}
.menu-holder .art-nav .art-menu li.separatorHouder {display: none;}
.menu-holder .art-nav .art-menu li a .t {padding: 12px 0; font-size: 24px; color: var(--fontColor2);}

.menu-holder .art-nav a {display: block; text-decoration: none !important;}
.menu-holder .art-nav .seperator {display: none;}

.menu-holder .art-nav .art-menu li > ul {position: fixed; background: #FFF; right: 0; left: 481px; top: 0; bottom: 0; height: 100vh; border: 0; box-shadow: unset; padding: var(--space100) var(--space30); box-sizing: border-box; max-width: 550px; transition: .2s all ease;}
.menu-holder .art-nav .art-menu li > ul li a {padding: 12px 0; font-size: 24px; color: var(--fontColor2); border: 0; width: 100%; white-space: unset; overflow: unset;}
.menu-holder .art-nav .art-menu li > ul li a:hover {background: unset; color: var(--color1);}
.menu-holder .art-nav .art-menu li > ul li a::before {display: none;}

.menu-holder .art-nav .art-menu li > ul  ul {display: none;}

.art-Sheet {max-width: var(--maxWidth); padding: var(--space50) var(--space30);}

.art-Sheet .art-sidebar1 {padding-right: var(--space40);}
.art-Sheet .art-sidebar1:empty {display: none;}
.art-Sheet .art-sidebar1 .art-Block {border-radius: var(--borderRadius1); background: var(--color4); padding: var(--space20) !important; box-sizing: border-box;}
.art-Sheet .art-sidebar1 .art-Block > .h2 {font-size: var(--h3Size);}

.art-Sheet .art-sidebar1 .art-Block .CMSMenuLink1li, .art-Sheet .art-sidebar1 .art-Block .CMSMenuLink1liSel {font-size: var(--bodyFontSize); color: var(--fontColor2); border-bottom: 1px solid #ccc; display: block; margin: 0; padding: 12px 0; box-sizing: border-box; display: flex;}
.art-Sheet .art-sidebar1 .art-Block .CMSMenuLink1li::after, .art-Sheet .art-sidebar1 .art-Block .CMSMenuLink1liSel::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor1); font-size: 13px; font-weight: normal; margin: auto 0 auto auto;}

.art-Sheet .art-sidebar1 .art-Block .CMSMenuLink1liSel {font-weight: 600; color: var(--color1) !important;}

.art-Sheet .art-sidebar1 .art-Block .CMSMenu2ul {padding: var(--space10) 0 !important; display: flex; flex-direction: column; gap: var(--space5);}
.art-Sheet .art-sidebar1 .art-Block .CMSMenuLink2li, .art-Sheet .art-sidebar1 .art-Block .CMSMenuLink2liSel {font-size: 14px; color: var(--fontColor2); display: block; margin: 0; box-sizing: border-box; text-decoration: none !important;}

.art-Sheet .art-sidebar1 .art-Block .CMSMenuLink2liSel {font-weight: 600; color: var(--color1) !important;}

.fullsize-mode .art-Sheet:has(.shopHolder) {max-width: 100%;}

section .inhoud, .vak .inhoud {max-width: var(--maxWidth); padding: var(--space50) var(--space30);}

.inhoud.max700 {max-width: 700px;}
.inhoud.max900 {max-width: 900px;}
.inhoud.max1000 {max-width: 1000px;}

.vak .inhoud + .inhoud {padding-top: 0;}

.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr);}

div[class*="grid"] {gap: var(--space20);}

div[class*="grid"].left-2fr {--leftFr: 2fr;}
div[class*="grid"].right-2fr {--rightFr: 2fr;}
div[class*="grid"].left-3fr {--leftFr: 3fr;}
div[class*="grid"].right-3fr {--rightFr: 3fr;}
div[class*="grid"].left-4fr {--leftFr: 4fr;}
div[class*="grid"].right-4fr {--rightFr: 4fr;}

div[class*="grid"].gap-50 {gap: var(--space50);}
div[class*="grid"].gap-80 {gap: var(--space80);}
div[class*="grid"].gap-100 {gap: var(--space100);}

div[class*="grid"].center {align-items: center;}

div[class*="grid"] > .blok {background: var(--color4); padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius1); display: flex; flex-direction: column;}

div[class*="grid"] > .blok > a.knop {margin: auto auto 0 0;}

.art-sidebar1 .filters {border: 0; display: flex; flex-direction: column; gap: var(--space10)}
.art-sidebar1 .filters .kenmerkgroep {padding: 0; border: 0; margin: 0 0 var(--space20) 0;}
.art-sidebar1 .filters .kenmerkgroep:last-child {margin: 0;}
.art-sidebar1 .filters .kenmerkgroep a {padding: 0 0 var(--space15) 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 0; border-radius: 0; border-bottom: 1px solid var(--borderColor1);}
.art-sidebar1 .filters .kenmerkgroep a.titel {margin: 0; font-size: var(--bodyFontSize); position: relative; font-weight: 500; color: var(--fontColor1);}
.art-sidebar1 .filters .kenmerkgroep a.titel::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: normal; position: absolute; right: 5px; font-size: var(--bodyFontSize); transition: .3s all ease; box-sizing: border-box;}
.art-sidebar1 .filters .kenmerkgroep a.titel.gesloten::after {transform: rotate(180deg);}
.art-sidebar1 .filters .kenmerkgroep .kenmerken {z-index: 1; overflow: hidden; position: relative; margin-top: 0; height: auto; padding: var(--space15) 0 0 0; opacity: 1; transition: .3s all ease; margin: 0; border-radius: 0;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken.gesloten {max-height: 140px;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken.open {max-height: 100%;}
.art-sidebar1 .filters .kenmerkgroep.gesloten .kenmerken {height: 0; opacity: 0; padding: 0;}
.art-sidebar1 .filters .kenmerkgroep .tonen {transition: all .3s ease; font-weight: 500; cursor: pointer; color: var(--fontColor1); font-size: 14px; align-items: center; display: inline-block; margin: var(--space5) 0 0 0;}
.art-sidebar1 .filters .kenmerkgroep .tonen.gesloten {display: none;}

.art-sidebar1 .filters .actieveKenmerken {border: 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: var(--space20); box-shadow: unset; border-radius: 0; padding: 0; order:-1;}
.art-sidebar1 .filters .actieveKenmerken:before {content: "Gekozen filters"; color:var(--fontColor1); font-size: var(--bodyFontSize); font-weight: 500; padding: 0 0 var(--space15) 0; margin: 0; display: block;}
.art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {border-radius: var(--borderRadius1); background-color:var(--color4); color: var(--fontColor1);}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .omschrijving {color: var(--fontColor2); margin-right: var(--space10); font-weight: normal; font-size: 14px;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .kenmerkAfbeelding {width: 16px; border-radius: 100%; position: relative; top: -1px; height: 16px !important; margin: auto 10px auto 0;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: #FFF;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .aantal {float: unset; color: #BCBBBB; font-size: 11px; margin: var(--space5) 0 0 auto; }
.art-sidebar1 .filters .kenmerkgroep .kenmerken label {display: flex;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label.nietBeschikbaar {display: none;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label input {top: 6px !important; position: relative;}

.shopSortOptie {position: fixed; border: 0; border-radius: var(--borderRadius2); bottom: var(--space30); z-index: 2; left: 0; right: 0; margin: 0 auto; min-width: 800px; max-width: 800px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(8.5px); padding: var(--space10) var(--space20); box-sizing: border-box; box-shadow: 0 0 5px 0 rgba(0,0,0,.07);}

.shopSortOptie > .presentatieWijze {border-color: var(--borderColor1); border-radius: var(--borderRadius1); overflow: hidden;}

.shopSortOptie > .sorteerLijst {display: flex; align-items: center; background: #FFF; border-radius: var(--borderRadius1); border: 1px solid var(--borderColor1); padding: 0 0 0 10px; box-sizing: border-box;}
.shopSortOptie > .sorteerLijst select {width: 0; text-indent: 100px; padding-left: 0; border: 0; background-color: unset;}

.shopSortOptie > .blader_holder {margin: auto;}
.shopSortOptie > .blader_holder + .pdfKnop {margin-left: 0;}

.blader_holder {padding: 0; border: 0;}
.blader_tabel1_n, .blader_tabel1_s {border-color: var(--borderColor1);}
.blader_tabel1_n:hover {background: var(--color4); border-color: var(--color4);}
.blader_tabel1_n a {color: var(--fontColor2);}
.blader_tabel1_n:hover a {color: var(--fontColor1);}
.blader_tabel1_s {background: var(--color1); border-color: var(--color1);}

.shopSortOptie > .pdfKnop {margin: auto 0 auto auto;}
.shopSortOptie > .pdfKnop a.button {padding: 10px; background: var(--color1);}
.shopSortOptie > .pdfKnop a.button::before {content: "\f02f"; font-family: "Font Awesome 5 Pro";}

.shopSortOptie > .mode-toggle {background-color: #FFF; width: 77px; height: 35px; box-sizing: border-box; border-radius: 50px; position: relative; padding: 5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: auto 0  auto var(--space15);}
.shopSortOptie > .mode-toggle i {font-size: 15px; flex: 1; text-align: center;}
.shopSortOptie > .mode-toggle .ball {background-color: #FFF; width: 22px; height: 22px; position: absolute; left: 10px; top: 6px; border-radius: 50%; transition: transform 0.2s linear; box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);}
.shopSortOptie > .mode-toggle.fullsize {background: #2ecc71;}
.shopSortOptie > .mode-toggle.fullsize i {color: #FFF;}
.shopSortOptie > .mode-toggle.fullsize .ball {transform: translateX(35px);}

.artikel .artikelnr {text-transform: uppercase; font-size: 12px; color: var(--fontColor2);}
.artikel .artikelnr > .titel {display: none;}

.artikel .relatieBtwPrijs, .inclBtwPrijs {display: none;}

.artikel .displayprijs {display: block;}

.artikel .aantalMinPlus, .artikel .aantalVolgorde {border-color: var(--borderColor1); border-radius: var(--borderRadius2); overflow: hidden;}
.artikel .aantalMinPlus input, .artikel .aantalVolgorde input {border-color: var(--borderColor1);}

.artikel .voorraad {font-size: 13px; color: var(--fontColor2);}
.artikel .voorraad .status .toelichting::before {content: "\f48b" !important; color: inherit; font-family: "Font Awesome 5 Pro"; margin-right: 5px !important;}

.artikel .labels .label.duurzaam {background: unset; border-radius: 0;}
.artikel .labels .label.duurzaam img {max-width: 40px;}

.shopCategorieHolder {gap: var(--space20); grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.shopCategorieHolder .categorie {border: 0; background: #F7F7F7; border-radius: var(--borderRadius1); overflow: hidden; padding: var(--space20);}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}
.shopCategorieHolder .categorie .afbeeldingHouder img {mix-blend-mode: darken;}
.shopCategorieHolder .categorie .titel {padding: 0;}
.shopCategorieHolder .categorie .titel h2 {font-size: 18px; font-weight: 500; color: var(--fontColor1);}

.shopLijst {display: flex; flex-direction: column; gap: var(--space10); margin: 0;}
.shopLijst .artikel {border-color: var(--borderColor1); border-radius: var(--borderRadius1); margin-bottom: 0;}
.shopLijst .artikel:hover {box-shadow: unset;}

.shopLijst .artikel .prijzen {width: unset; margin: 0;}
.shopLijst .artikel .prijzen .prijs {font-size: 15px; font-weight: 600;}

.shopLijst .artikel .omschrijving h2.titel {font-size: 13px;}

.shopLijst .artikel .bestellen {margin-left: auto;}
.shopLijst .artikel .bestellen .bestelknop input {margin-right: 0; border-radius: var(--borderRadius2) 0 0 var(--borderRadius2); width: 55px !important;}

.shopLijst .artikel .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color2); padding: 10px 15px; border-radius: 0 var(--borderRadius2) var(--borderRadius2) 0;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel span {display: none;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel::after {font-family: "Font Awesome 5 Pro";   font-weight: normal; font-size: 18px; content: "\f290"; color: #FFF; }

.shopTegel {gap: var(--space20); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));}
.shopTegel .artikel .inner {border: 0; border-radius: var(--borderRadius1); background: #F7F7F7; padding: var(--space20); box-sizing: border-box;}
.shopTegel .artikel .inner:hover {box-shadow: unset;}

.shopTegel .artikel .inner .afbeeldingHouder img {mix-blend-mode: darken;}

.shopTegel .artikel .inner .rechtsboven .favorieten {margin: var(--space20) var(--space20) 0;}
.shopTegel .artikel .inner .rechtsboven .favorieten a {padding: 0; background: unset; border-radius: 0; color: inherit; font-size: 17px;}
.shopTegel .artikel .inner .rechtsboven .favorieten a i {font-weight: normal;}
.shopTegel .artikel .inner .rechtsboven .favorieten.aan a i {color: var(--color2); font-weight: bold;}


.shopTegel .artikel .inner .omschrijving .merk {color: var(--fontColor2); font-size: 12px;}
.shopTegel .artikel .inner .omschrijving h2.titel a {font-size: 18px; font-weight: 500; color: var(--fontColor1);}

.shopTegel .artikel .inner .bestellen  .prijzen .prijs {font-weight: 600; font-size: 18px; color: var(--fontColor1);}

.shopTegel .artikel .inner .bestellen {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space15); align-items: center; z-index: 1;}
.shopTegel .artikel .inner .bestellen .bestelknop {margin-left: auto;}
.shopTegel .artikel .inner .bestellen .bestelknop input {width: 55px; border-radius: var(--borderRadius2) 0 0 var(--borderRadius2); border-right: 0;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color2); border-radius: 0 var(--borderRadius2) var(--borderRadius2) 0; width: unset; padding: 15px 20px;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel::before {font-weight: normal; color: #FFF; font-size: 18px; content: "\f290"; font-family: "Font Awesome 5 Pro";}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel span {display: none;}

.shopTegel .artikel .inner .voorraad {margin: var(--space10) 0 0 0;}

.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 3fr 2fr; gap: var(--space30); margin: 0; grid-template-areas: "a b" "c b";}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;}

.artikel.detail .detailinkollommen .links {grid-area: a;}

.artikel.detail .detailinkollommen .links .afbeelding .labels {bottom: 0; top: unset; right: 0; left: unset;}
.artikel.detail .detailinkollommen .links .afbeelding .labels .label.duurzaam img {max-width: 60px;}

.artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery {}

.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height: calc(100vh - 350px); padding-bottom: 0; max-height: 450px;}
.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button {opacity: 1; background: #f2f2f2; width: 40px; height: 40px; padding: 0; border-radius: var(--borderRadius1);}
.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button:disabled {opacity: .3;}
.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button .flickity-button-icon {position: relative; left: unset; top: unset; width: 45%; height: 45%; color: var(--fontColor1);}

.artikel.detail .detailinkollommen .rechts {grid-area: b; position: sticky; top: 131px; margin-bottom: auto; display: flex; flex-direction: column; gap: var(--space30);}

.artikel.detail .detailinkollommen .rechts .blok:first-child {display: flex ; flex-direction: column; gap: var(--space20);}
.artikel.detail .detailinkollommen .rechts .blok {background: var(--color4); padding: var(--space40); box-sizing: border-box; border-radius: var(--borderRadius1);}
.artikel.detail .detailinkollommen .rechts .blok .merk {color: var(--fontColor2); font-size: 15px;}
.artikel.detail .detailinkollommen .rechts .blok h1 {font-size: 30px;}

.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color2); display: block; width: 100%; box-sizing: border-box;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel::before {display: none;}

.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer .UPScatPlaatje {line-height: 0; display: none;}
.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer .UPSacc_trigger {height: unset !important; visibility: unset !important; box-shadow: unset; background: #FFF; border: 1px solid var(--borderColor1); border-radius: var(--borderRadius1); padding: var(--space10) var(--space20); box-sizing: border-box; font-weight: 500;}
.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer .UPSacc_trigger a {display: flex; gap: var(--space5);}
.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer .UPSacc_trigger a::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: normal; font-size: var(--bodyFontSize); transition: .3s all ease; box-sizing: border-box; margin-left: auto;}
.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer .UPSacc_trigger.active a::after {transform: rotate(180deg);}

.artikel.detail .detailinkollommen .rechts .blok.upselling .UPScontainer > div:last-child {display: none;}

.artikel.detail .detailinkollommen .rechts .blok #mArt_titel {font-family: var(--fontFamily1); font-weight: 500; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0; font-size: var(--h3Size);}
.artikel.detail .detailinkollommen .rechts .blok #mArt_holder {display: grid; gap: var(--space10); grid-template-columns: repeat(auto-fill, minmax(min(80px, 100%), 1fr)); }
.artikel.detail .detailinkollommen .rechts .blok #mArt_holder .dochterArtikel {line-height: 0; border-radius: var(--borderRadius1); overflow: hidden;}
.artikel.detail .detailinkollommen .rechts .blok #mArt_holder .dochterArtikel img {width: 100% !important; height: auto !important;}
.artikel.detail .detailinkollommen .rechts .blok #mArt_holder .dochterArtikel .tooltip .titel {padding: 0; margin: 0; background-color: unset; border-radius: 0;}
.artikel.detail .detailinkollommen .rechts .blok #mArt_holder .dochterArtikel .tooltip .omschrijving {display: none;}

.artikel.detail .detailinkollommen .tabs {grid-area: c; display: flex; flex-direction: column; gap: var(--space30) 0;}
.artikel.detail .detailinkollommen .tabs .vak .inhoud {padding: 0; max-width: 100%;}

.artikel.detail .detailinkollommen .tabs .vak .inhoud .shopDetailModernKenmerken {margin: 0;}

.kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 1fr 1fr; color: var(--fontColor1); border: 0;}
.kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: normal; color: var(--fontColor2);}
.kenmerkArt:nth-child(even), .EANholder {background: #f2f2f2;}
.kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje {display: none;}

.kenmerkArt.bestelArtikel .kenmerken .kenmerk .titel {color: #FF0000;}

.hoverMenu {left: 0; right: 0; width: 100%; padding: 0; max-width: 100%; overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; top: 100%; display: grid; grid-template-columns: 1fr 1fr; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); transition: all .5s cubic-bezier(0.87, 0, 0.13, 1); will-change: transform, opacity; }
.hoverMenu::after {content: ""; position: absolute; top: -100%; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FFF; z-index: -1;}
.hoverMenu.open {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11;}

.hoverMenu > div:first-child {padding: var(--space30); box-sizing: border-box;}

.hoverMenu .kolommen {width: 100%; padding: 0; box-sizing: border-box; display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr;}
.hoverMenu .kolommen .kolom {padding: 0; width: 100%;}
.hoverMenu .kolommen .kolom > ul {opacity: 1; visibility: visible; position: relative; box-shadow: unset; border: 0; transition: unset; background: unset;}
.hoverMenu .kolommen .kolom > ul::before {display: none;}

.hoverMenu .kolommen .kolom > ul li a {color: var(--fontColor2); position: relative; font-size: 14px; line-height: 1; border: 0; padding: 5px 0; transition: unset; width: unset;}
.hoverMenu .kolommen .kolom > ul li a:hover, .hoverMenu .kolommen .kolom > ul li a.active {background: unset; color: var(--color1); text-decoration: none;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}

.hoverMenu .kolommen .kolom .titel a {font-size: var(--h3Size); font-weight: 500; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0;}

.hoverMenu .kolommen .kolom .afbeelding {display: none;}

.hoverMenu .categorie {padding: 0; position: relative;}
.hoverMenu .categorie .aankeiler {line-height: 0;}
.hoverMenu .categorie .aankeiler img {width: 100% !important; height: 100% !important; object-fit: cover; top: 0; bottom: 0; position: absolute; object-position: center;}
.hoverMenu .categorie::before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgb(0 0 0 / 30%); transition: all .3s ease; z-index: 1;}
.hoverMenu .categorie .content {position: absolute; bottom: 0; left: 0; color: #FFF; padding: var(--space30); box-sizing: border-box; line-height: 1.85em; z-index: 2;}
.hoverMenu .categorie .content h2 {color: #FFF;}
.hoverMenu .categorie .content h5 {margin-bottom: 0; color: #FFF;}

.hoverMenu .kop {font-size: var(--h2Size); font-weight: 500; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0; display: none;}

.pageFooterHolder {background: var(--color1);}
.pageFooterHolder .pageFooter {max-width: var(--maxWidth); padding: var(--space100) var(--space30) var(--space30) var(--space30); color: #D5D7D8;}

.pageFooterHolder .pageFooter hr {background: #444C50;}

.pageFooterHolder .pageFooter .h2 {font-size: 18px;}

.pageFooterHolder .pageFooter a {color: #FFF; text-decoration: none;}
.pageFooterHolder .pageFooter a:hover {opacity: .5;}
.pageFooterHolder .pageFooter ul {list-style: none; margin: 0; padding: 0;}
.pageFooterHolder .pageFooter .sitemap3ul, .pageFooterHolder .pageFooter .STPMenuLink1li {display: none;}

.pageFooterHolder .pageFooter a[href^="tel:"]::before,
.pageFooterHolder .pageFooter a[href^="mailto:"]::before {color: #FFF;}

.pageFooterHolder .pageFooter .grid-2x > div:last-child {margin-left: auto;}
.pageFooterHolder .pageFooter .grid-2x > div:last-child a.knop {color: var(--color1);}

.pageFooterKnoppenHolder {background: var(--color1);}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--maxWidth); padding: 0 var(--space30) var(--space30) var(--space30); flex-direction: column;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {margin: auto;}
.pageFooterKnoppenHolder .pageFooterKnoppen a.cmLink {margin: auto; color:#fff; opacity: .3; font-size:90%; text-decoration: none; display: block}

.overlayBg {z-index: 1; opacity: 0; position: fixed; left: 0; top: 0; right: 0; background-color: #22333b4d; backdrop-filter: blur(30px); transition: opacity 0.3s ease 0s;}
.overlayBg.actief {opacity: 1; bottom: 0;}

.inloggenBg, .mijnAccountBg, .verlanglijstBg, .winkelwagenHouderBg, .speedsearchResultBg {background-color: #22333b4d; backdrop-filter: blur(30px);}

#alertBox, #confirmAlert, .alertBox, .confirmAlert {background-color: #22333b4d; backdrop-filter: blur(30px); background-image: unset; outline: 0;}

.meldingHouder .melding {border-radius: var(--borderRadius1); padding: var(--space40); box-sizing: border-box; box-shadow: unset; min-width: unset; width: calc(100% - var(--space20) * 2); max-width: 450px; margin: var(--space20);}
.meldingHouder .melding .knoppen a.knop {padding: 15px 30px;}
.meldingHouder .melding .knoppen a.knop::after {display: none;}

.zoekenOrders {display: block; border: 1px solid var(--borderColor1); border-radius: var(--borderRadius1); overflow: hidden; box-sizing: border-box;}
.zoekenOrders .veld {display: flex;}
.zoekenOrders .veld input {width: 100%; font-size: var(--bodyFontSize); padding: var(--space15); box-sizing: border-box; font-style: normal;}
.zoekenOrders .veld .knop {margin: auto 0; color: inherit;}

.kenmerkMobielHouder.slide .toonFiltersKnop {border-radius: var(--borderRadius2); background: var(--color1); font-size: var(--bodyFontSize); padding: 10px 20px;}

.kenmerkMobielHouder.slide .filters .filterknop a {position: absolute; border-radius: var(--borderRadius2); background: var(--color2); font-size: var(--bodyFontSize); padding: 10px 20px;}

.kenmerkMobielHouder.slide .filters .filterBovenkant {background: #FFF; align-items: center; padding: 12px 15px; color: var(--fontColor1); border-bottom: 1px solid var(--borderColor1);}
.kenmerkMobielHouder.slide .filters .filterBovenkant .filtersSluiten {font-size: 19px;}
.kenmerkMobielHouder.slide .filters .filterBovenkant .filtersSluiten i {font-weight: lighter;}

.kenmerkMobielHouder.slide .filters .filterBovenkant .terugFilteren {display: inline-block; cursor: pointer; text-decoration: none; background: var(--color4); border: 1px solid var(--borderColor1); padding: 10px 0; border-radius: 3px; color: var(--fontColor2); opacity: 0; width: 0; transition: .3s all ease; margin: auto 0;}
.kenmerkMobielHouder.slide .filters.volgende .filterBovenkant .terugFilteren {padding: 10px 13px; margin-right: 10px;}

.kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen {flex: 1;}
.kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen a {text-decoration: none; background: var(--color4); border: 1px solid var(--borderColor1); padding: 7px 13px; border-radius: 3px; margin: 0; color: var(--fontColor2);}

.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep {border: 0; border-bottom: 1px solid  var(--borderColor1);}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel {font-size: 16px; font-weight: normal; text-transform: none; margin: 0; padding: 15px; line-height: 1; }
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel .groepActieveKenmerken {padding-top: 10px;}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel .groepActieveKenmerken:empty {display: none;}

.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerken {padding: 10px 20px;}
.kenmerkMobielHouder.slide .filters .kenmerkgroep .kenmerken .kenmerk {padding: 0; margin: 0;}

.kenmerkMobielHouder.slide .filters .kenmerkgroep a.filterGroepHerstel {position: absolute; top: 17px; right: 50px; text-decoration: none; background: var(--color4); border: 1px solid var(--borderColor1); padding: 5px; color: inherit; border-radius: 3px; line-height: 1;}

.resCategorieen {display: block;}
.resCategorieen ul li a {border-color: var(--borderColor1); border-radius: var(--borderRadius1);}
.resCategorieen ul li.actief a {font-weight: 500; background: var(--color4);}

table.formulier_tabel2 tr {display: flex; gap: var(--space5);}
.formulier_textarea {margin: 5px 0;}
a.knopVersturen.button.pill.wButVerstuur {float: right; margin: var(--space20) 0 0 0; background: var(--color2);}

.garantie-merken {border: 0; border-spacing: 0; width: 100%;}
.garantie-merken td {border: 0; border-bottom: 1px solid var(--borderColor1); padding: 5px 10px; vertical-align:top; }
.garantie-merken tr {transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease;}
.garantie-merken tr:hover {background-color: var(--borderColor1); color: var(--fontColor1);}
.garantie-merken tr:first-child {font-weight: 500; color: var(--fontColor1); border-bottom: 1px solid var(--borderColor1)!important; white-space: nowrap;}
.garantie-merken tr:first-child:hover {background: transparent;}
.garantie-merken td:first-child {font-weight: 500; white-space: nowrap;}

.relatieOpties {border: 0; background: unset; padding: 0; border-radius: 0;}
.relatieZoek {display: flex !important; border: 1px solid var(--borderColor1) !important; border-radius: var(--borderRadius1) !important; overflow: hidden; box-sizing: border-box; margin: 0 0 15px !important; padding: 0 !important;}
.relatieZoek input {border: 0; border-radius: 0; width: 100%; font-size: var(--bodyFontSize); padding: var(--space15); box-sizing: border-box;}
.relatieZoek .wissen {display: none;}
.relatieZoek .icoon {border: 0; margin: 0; background: unset; margin: auto 0;}
.relatieZoek .icoon:hover {background: unset;}

.verkopersModuleLijst .inloggen a.button {background: var(--color4); color: var(--fontColor1); padding: 10px 15px; font-size: 13px; box-sizing: border-box;}
.verkopersModuleLijst .bedrijfsnaam {font-weight: normal;}
.verkopersModuleLijst tr td {padding: 5px; border-color: var(--borderColor1);}
.verkopersModuleLijst tr:hover td {background: #f7f7f7;}

.snelbestellenHolder {background: #f7f7f7; border-radius: var(--borderRadius1); margin-bottom: var(--space50);}
.snelbestellenHolder .invoer > .snelbestellenKnop a {background: var(--color2);} 

.kassainkollommen > .rechts .blok {background: #f7f7f7; border-radius: var(--borderRadius1);}

.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen .stappenKnop a {background: var(--color2); font-weight: normal; margin-top: var(--space10); padding: 15px 10px;}
.stap .totalen .stappenKnop a::after {display: none;}
.stap .totalen .gewicht {display: none;}

.stap.twee .links, .stap.drie .links {flex-direction: column; gap: var(--space30); margin: 0;}
.stap.twee .links > div, .stap.drie .links > div {width: 100%; margin: 0; background: #f7f7f7; border-radius: var(--borderRadius1);}
.stap .blokholder {background: unset; border-radius: 0; margin: 0;}

.blokholder.accountWijzigen .titel {display: none;}
.blokholder.accountWijzigen .content {padding: 0;}

.doecoOrder .header {border-spacing: 0px; border: 1px solid var(--borderColor1); margin-bottom: var(--space10); width:100%; border-radius: var(--borderRadius1);}
.doecoOrder .header td {padding: var(--space10); background: #f2f2f2; border-right: 1px solid var(--borderColor1);}
.doecoOrder .header td:last-of-type {border: 0;}
.doecoOrder .header td .titel {font-size: 11px; text-transform: uppercase; line-height: 1.25em;}
.doecoOrder .header td .omschrijving {font-size: 16px; font-weight: bold; color: var(--fontColor1); line-height: 1.25em;}

.doecoOrder .adres {border: 1px solid var(--borderColor1); border-radius: var(--borderRadius1); background: #f2f2f2; padding: 10px 15px; width: calc(50% - 5px); box-sizing: border-box; display: inline-table;}
.doecoOrder .adres.factuur {float: right;}
.doecoOrder .adres .titel {color: var(--fontColor2);}
.doecoOrder .adres .omschrijving {color: var(--fontColor1);}

.doecoOrder .order .totalen td {text-transform: uppercase; background: #f2f2f2; font-weight: bold;}

@media screen and (max-width: 900px) {
  :root {
    --h1Size: 35px;
    --h2Size: 25px;
    --h3Size: 18px;
    --h5Size: 18px;
    --space5: 5px;
    --space10: 10px;
    --space15: 10px;
    --space20: 10px;
    --space25: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space80: 30px;
    --space100: 30px;
  } 
  
  a.logo img {width: 100px;}

  .bovenkantHolder .bovenkant {min-height: unset;}
  .bovenkantHolder .bovenkant .art-menu.boven {display: none;}

  .vak {padding: 0;}

  #speedsearchResult {left: 0; right: 0;}

  .shopSortOptie {flex-wrap: wrap; min-width: 100%; gap: var(--space10); border-radius: var(--borderRadius1);}
  .shopSortOptie > .pdfKnop {display: none;}  
  .shopSortOptie > * {width: unset; margin: 0 !important;}
  .shopSortOptie > .blader_holder {flex: 1 1 100%; order: 1;}
  .shopSortOptie > .mode-toggle {display: none;}

  .shopCategorieHolder {grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));}
  
  .artikel.detail .detailinkollommen {grid-template-columns: 1fr; grid-template-areas: "a" "b" "c";}
  .artikel.detail .detailinkollommen .rechts {position: relative; top: unset;}

  .pageFooterHolder .pageFooter .grid-2x > div:last-child {margin-left: 0; margin-right: auto;}

  img.rechts-20, img.rechts-30, img.rechts-40, img.rechts-50, img.rechts-60, img.rechts-70, img.rechts-80 {float: unset; margin: 15px auto; display: block;}

}