/* deurensale.nl - basisshop: skin_default met de huisstijlkleuren */

:root {
  --color1: #294695;
  --color2: #112F6B;
  --color3: #DD963D;
  --color4: #112F6B;

  --fontColor1: #303030;
  --fontColor2: #FFFFFF;
}

/* knoppen */
a.knop, .button, a.button, button {background-color: var(--color1); color: var(--fontColor2);}
a.knop:hover, .button:hover, a.button:hover, button:hover {background-color: var(--color4);}

/* een maat voor alle knoppen: 37px hoog, gelijk aan de invoervelden */
a.knop, .button, a.button, button.knop,
.artikel .bestellen .bestelknop a.wButBestel, .stap .totalen .stappenKnop a, .stap.twee .tekstNieuwAdres a,
#extraSchermWinkelmand .schermWinkelMandje .knoppen a, .shopTegel .artikel .opDeHoogteHoudenKnop {box-sizing: border-box; padding: 8px 16px; border: 0; border-radius: 3px; font-size: 14px; font-weight: 600; line-height: 21px; text-align: center; text-decoration: none; text-transform: none;}

.couponcodeHouder .couponcode a.wButControleer {padding: 8px 16px; line-height: 21px;}
/* het mandje-icoon op de bestelknop maakte de regel 1px hoger */
.artikel.detail .bestellen .bestelknop .wButBestel::before {line-height: 1;}

a.button.wButTerug, a.button.wButLijst, a.button.pdf {background-color: var(--color3);}
a.button.wButTerug:hover, a.button.wButLijst:hover, a.button.pdf:hover {background-color: var(--color2);}

.account .wachtwoordKwijtKnop {padding: 0; background: none; color: var(--fontColor1); text-decoration: underline;}
.account .wachtwoordKwijtKnop:hover {background: none; color: var(--color1);}

.stap .totalen .stappenKnop a, .stap.twee .tekstNieuwAdres a,
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa,
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen,
.shopTegel .artikel .opDeHoogteHoudenKnop, .cookieMelding .inhoud .sluiten, .blader_tabel1_s {background-color: var(--color1); color: var(--fontColor2);}
.stap .totalen .stappenKnop a:hover, .stap.twee .tekstNieuwAdres a:hover,
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa:hover,
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen:hover,
.shopTegel .artikel .opDeHoogteHoudenKnop:hover, .cookieMelding .inhoud .sluiten:hover {background-color: var(--color4);}

/* header */
.bovenkantHolder {border-top: 0; border-bottom: 0;}
.bovenkantHolder .bovenkant {align-items: center; gap: var(--space30); padding-top: var(--space15); padding-bottom: var(--space15);}
.bovenkantHolder .bovenkant .zoekenHolder {flex: 1; max-width: 600px; margin: 0 auto;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken {width: 100%; background-color: #f2f2ef; border: 0; border-radius: 3px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld {flex: 1;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID {width: 100%; box-sizing: border-box; padding: 13px 15px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {padding: 10px 15px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop::before {font-size: 20px;}

/* zoekresultaten */
#speedsearchResult .houder {box-sizing: border-box; max-height: 70vh; padding: var(--space20); overflow: auto; border: 0; font-size: 14px;}
#speedsearchResult .houder .speedSearch ~ .speedSearch {margin-top: var(--space20);}
#speedsearchResult .houder .speedSearch .resultaat {margin: 0 0 var(--space10); padding: 0; color: var(--color1); font-weight: bold;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .speedSearch.categorie ul {display: flex; flex-wrap: wrap; gap: var(--space10);}
#speedsearchResult .houder .speedSearch.categorie ul li a {padding: 5px 15px; border: 0; border-radius: 50px; background-color: #f2f2ef;}
#speedsearchResult .houder .speedSearch.categorie ul li a:hover {background-color: var(--color1); color: var(--fontColor2);}
#speedsearchResult .houder .speedSearch.artikelen ul {display: flex; flex-direction: column; gap: var(--space5);}
#speedsearchResult .houder .speedSearch.artikelen ul li a {padding: var(--space10); border-color: #eee; border-radius: 3px; transition: background-color .2s ease;}
#speedsearchResult .houder .speedSearch.artikelen ul li a:hover {background-color: #f2f2ef;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {float: right; margin: 0 0 0 var(--space10);}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: multiply;}
#speedsearchResult .houder .speedSearch.artikelen ul li .omschrijving {font-size: 15px;}
#speedsearchResult .houder .knopAllesOnder a {margin-top: var(--space10); padding: 8px 16px; border-radius: 3px; background-color: var(--color1); color: var(--fontColor2); font-size: 14px; font-weight: 600; line-height: 21px;}
#speedsearchResult .houder .knopAllesOnder a:hover {background-color: var(--color4);}
@media screen and (min-width: 901px) {
  .bovenkantHolder .bovenkant .zoekenHolder #speedsearchResult {left: 0; right: 0;}
  .bovenkantHolder .bovenkant .zoekenHolder #speedsearchResult .houder {width: 100%;}
}

/* account, favorieten en mandje als iconen */
.bovenkantHolder .shopitems {align-items: center; gap: var(--space10);}
.bovenkantHolder .shopitems .account {margin: 0; gap: var(--space10); align-items: center;}
.bovenkantHolder .shopitems .account > div {position: relative;}
.bovenkantHolder .shopitems .account li {padding: 0; border: 0;}
.bovenkantHolder .shopitems .account .welkom {display: none;}
.bovenkantHolder .shopitems .account .inloggenKnop, .bovenkantHolder .shopitems .account .mijnAccountKnop, .bovenkantHolder .shopitems .account .favorietenKnop {position: relative; display: block; padding: 7px; background: none; color: var(--fontColor1); text-decoration: none; line-height: 1;}
.bovenkantHolder .shopitems .account .inloggenKnop::before, .bovenkantHolder .shopitems .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 22px;}
.bovenkantHolder .shopitems .account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 22px;}
.bovenkantHolder .shopitems .account .inloggenKnop:hover, .bovenkantHolder .shopitems .account .mijnAccountKnop:hover, .bovenkantHolder .shopitems .account .favorietenKnop:hover, .bovenkantHolder .shopitems .account .openGeklapt .inloggenKnop {background: none; color: var(--color1); text-decoration: none;}
.bovenkantHolder .shopitems .account .mijnAccountKnop {color: var(--color1); cursor: pointer;}
.bovenkantHolder .shopitems .account .titel {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.bovenkantHolder .shopitems .account .favAantal {position: absolute; top: -4px; right: -6px; min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background-color: var(--color3); color: var(--fontColor2); font-size: 11px; font-weight: bold; line-height: 18px; text-align: center;}
.bovenkantHolder .shopitems .account .favorieten.leeg .favAantal {display: none;}
.account .houder {color: var(--fontColor1);}
.account .houder .content {padding: var(--space20);}

.winkelwagenHouder .winkelknop {background: none; margin-left: 0;}
.winkelwagenHouder .winkelknop:hover {color: var(--color1);}
.winkelwagenHouder .winkelknop .aantal {background-color: var(--color3); color: var(--fontColor2);}

.art-menu li a.active .t, .resMenublokinhoud .resMenuItem.active > a {color: var(--color1);}

/* categoriebalk met het paginamenu rechts */
.bovenkantHolder .winkelmenuHolder {display: flex; align-items: center; gap: var(--space30); padding: 0 max(30px, calc((100% - 1520px) / 2)); background-color: var(--color1);}
.bovenkantHolder .winkelmenuHolder .winkelmenu {display: flex; flex-wrap: wrap; gap: 0 var(--space30); max-width: none; margin: 0; padding: 0; text-align: left;}
.bovenkantHolder .winkelmenuHolder .art-nav {margin-left: auto;}
.bovenkantHolder .winkelmenuHolder .art-nav .art-menu {display: flex; gap: 0 var(--space30);}
.bovenkantHolder .winkelmenuHolder .separatorHouder {display: none;}
.bovenkantHolder .winkelmenuHolder .art-menu > li > a .t {padding: var(--space15) 0; color: var(--fontColor2); font-weight: 600;}
.bovenkantHolder .winkelmenuHolder .art-menu > li > a:hover .t, .bovenkantHolder .winkelmenuHolder .art-menu > li > a.active .t {color: var(--fontColor2); opacity: .7;}
.winkelmenu.art-menu li .t.hoverMenuActief::after {color: inherit;}

/* USP-band onder de header */
.extrabovenkantHolder {background-color: #f2f2ef; color: var(--fontColor1);}
.extrabovenkantHolder .extrabovenkant .slogan {flex: 1; padding: var(--space10) 0;}
.uspBar {display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space5) var(--space30);}
.uspBar .usp i {margin-right: var(--space10); color: var(--color1);}
.uspBar .usp strong {margin-right: var(--space5);}

/* webshop */
.artikel .prijzen .prijs {color: var(--color1);}
.artikel .bestellen .bestelknop a.wButBestel, .shopArtikel .wButBestel {background-color: var(--color1);}
.artikel .bestellen .bestelknop a.wButBestel:hover, .shopArtikel .wButBestel:hover {background-color: var(--color4);}
.artikel .restvoorraadMelding span, .artikel .aantalInMandjeMelding span {background-color: var(--color3); color: var(--fontColor2);}

/* EAN-barcode is een pdf-instelling; skin_default zet hem ook op het scherm */
@media screen {
  .print1Barcode {display: none;}
}

.catMenuLink0liSel {color: var(--color3) !important;}
.tabsV2 .titels > div.actief {border-top-color: var(--color1);}
/* veel tabbladen naast een zijkolom liepen buiten beeld */
.tabsV2 .titels {flex-wrap: wrap;}

ul.stappenBalk li.stap.bezig .nummer, ul.stappenBalk li.stap.klaar .nummer {background-color: var(--color1);}
ul.stappenBalk li.stap.klaar::before, ul.stappenBalk li.stap.klaar::after {border-color: var(--color1);}
.stappenbalk .bezig::before, .stappenbalk .klaar a::before {background-color: var(--color1);}
.stappenbalk .klaar::after {border-color: var(--color1);}

input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {color: var(--color1);}
.typeKlant input[type="radio"]:checked + label, .geslacht input[type="radio"]:checked + label, .stap.drie .regel.actief {border-color: var(--color1);}
.typeKlant input[type="radio"]:checked + label::before, .geslacht input[type="radio"]:checked + label::before {color: var(--color1);}

/* carrousel: 4 per rij (3 per rij van skin_default tot 1250px); passen alle artikelen op een rij, dan een vaste rij, anders loopt wrapAround vast */
@media screen and (min-width: 1251px) {
  .productCarousel .artikel {width: calc(25% - 15px);}
  .productCarousel:not(:has(.artikel:nth-child(5))) .flickity-viewport {height: auto !important;}
  .productCarousel:not(:has(.artikel:nth-child(5))) .flickity-slider {position: relative; height: auto; transform: none !important;}
  .productCarousel:not(:has(.artikel:nth-child(5))) .artikel {position: relative !important; left: auto !important; transform: none !important;}
  .productCarousel:not(:has(.artikel:nth-child(5))) .flickity-button {display: none;}
}
@media screen and (min-width: 901px) and (max-width: 1250px) {
  .productCarousel:not(:has(.artikel:nth-child(4))) .flickity-viewport {height: auto !important;}
  .productCarousel:not(:has(.artikel:nth-child(4))) .flickity-slider {position: relative; height: auto; transform: none !important;}
  .productCarousel:not(:has(.artikel:nth-child(4))) .artikel {position: relative !important; left: auto !important; transform: none !important;}
  .productCarousel:not(:has(.artikel:nth-child(4))) .flickity-button {display: none;}
}
/* tegels op een lijn met de kop erboven; skin_default houdt 30px vrij voor de pijlen, die staan nu bij hover over de tegels, zoals bij zijn galerijen.
   De tussenruimte staat alleen rechts: Flickity lijnt de rand van de tegel uit, een marge links schoof de rij 7,5px op */
.productCarousel {margin: 0 -15px 0 0;}
.productCarousel .artikel {margin: 0 15px 0 0;}
.productCarousel:not(:last-child) {margin-bottom: var(--space30);}
.productCarousel .flickity-button {opacity: 0; border: 1px solid #ddd; background-color: var(--fontColor2); color: var(--fontColor1); transition: opacity .3s ease, background-color .2s ease, color .2s ease;}
.productCarousel .flickity-button.previous {left: var(--space15);}
.productCarousel .flickity-button.next {right: var(--space30);}
.productCarousel:hover .flickity-button, .productCarousel .flickity-button:focus-visible {opacity: 1;}
.productCarousel .flickity-button:hover {border-color: var(--color1); background-color: var(--color1); color: var(--fontColor2);}
@media (hover: none) {
  .productCarousel .flickity-button {opacity: 1;}
}
@media screen and (max-width: 680px) {
  .productCarousel {margin: 0;}
}

/* inhoud */
/* afbeeldingenslider: volle breedte, de inline maten uit de editor overschreven */
.liquid-slider-wrapper {margin-bottom: var(--space30);}
.liquid-slider .panel p {margin: 0;}
/* [[SLIDER]] staat in een <p>; de browser laat daar lege alinea's van over */
.art-content article > p:empty:first-child, .liquid-slider-wrapper + p:empty {display: none;}
.liquid-slider .panel img {display: block; width: 100% !important; height: auto !important;}
/* bouwblokken in de contentkolom: art-Sheet geeft de rand al, dus geen tweede padding; een .vak is hier niet full-bleed (zijkolommen) */
.art-content .vak {padding: 0;}
.art-content .vak .inhoud {padding: 0;}
.art-content .vak + .vak {margin-top: var(--space50);}
/* leesbreedte links uitgelijnd zoals de rest van de shop; skin_default centreert hem */
.art-content .vak .inhoud:is(.max700, .max800, .max900) {margin-left: 0;}
/* FCK5kol van skin_default telt op tot 110%: de laatste kolom werd te smal */
@media screen and (min-width: 901px) {
  .FCK5kolTd {width: 17%;}
  .FCK5kolTdS {width: 3.75%;}
}

/* footer */
.pageFooterHolder {background-color: var(--color1); color: var(--fontColor2);}
/* hover alleen opacity: skin_default zet de links op 80% wit en bij hover op 100%, samen met .7 bleef er bijna niets van over */
.pageFooterHolder a, .pageFooterKnoppen a {color: inherit; text-decoration: none; transition: opacity .2s ease;}
.pageFooterHolder a:hover, .pageFooterKnoppen a:hover {color: inherit; text-decoration: none; opacity: .7;}
.pageFooterKnoppenHolder {background-color: var(--color2);}
.pageFooterKnoppen .aLandingMenu {display: block; width: auto; height: auto; margin: 0 0 0 auto; background: none; opacity: 1;}
.pageFooterKnoppen .aLandingMenu .LandingMenu {display: flex; flex-wrap: wrap; gap: 0 var(--space20); position: static; width: auto; padding: 0; background: none; box-shadow: none; line-height: inherit;}
.pageFooterKnoppen .aLandingMenu .LandingMenu li a {padding: 0; font-size: inherit; color: inherit;}
/* een lang landingsmenu drukte de linkjes en de copyright op twee regels */
@media screen and (min-width: 901px) {
  .pageFooterKnoppenHolder .pageFooterKnoppen {column-gap: var(--space30);}
  .pageFooterKnoppen .extramenu, .pageFooterKnoppen .copyright {flex-shrink: 0;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin-top: 0; margin-bottom: 0;}
}

/* responsive */
@media screen and (max-width: 1350px) {
  .bovenkantHolder .winkelmenuHolder, .bovenkantHolder .winkelmenuHolder .winkelmenu, .bovenkantHolder .winkelmenuHolder .art-nav .art-menu {gap: 0 var(--space20);}
  .bovenkantHolder .winkelmenuHolder .art-menu > li > a .t {font-size: 14px;}
}

@media screen and (max-width: 1250px) {
  .uspBar .usp {display: grid; grid-template-columns: auto 1fr; align-items: center; font-size: 14px; line-height: 1.3;}
  .uspBar .usp i {grid-row: span 2; font-size: 20px;}
  .uspBar .usp strong {margin-right: 0;}
}

@media screen and (max-width: 1200px) {
  .bovenkantHolder .winkelmenuHolder .art-nav {display: none;}
}

@media screen and (max-width: 1000px) {
  .bovenkantHolder .winkelmenuHolder .winkelmenu {gap: 0 var(--space15);}
  .bovenkantHolder .winkelmenuHolder .art-menu > li > a .t {font-size: 13px;}
}

@media screen and (max-width: 900px) {
  .bovenkantHolder .bovenkant {gap: var(--space10);}
  .bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID {padding: 10px;}
  .bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {padding: 8px 10px;}
  .bovenkantHolder .winkelmenuHolder {padding: 0 15px;}
  .bovenkantHolder .winkelmenuHolder .winkelmenu {flex: 1; min-width: 0; flex-wrap: nowrap; gap: 0 var(--space20); overflow-x: auto; white-space: nowrap;}
  .bovenkantHolder .winkelmenuHolder .art-menu > li > a .t {font-size: 15px;}
  .bovenkantHolder .bovenkant .zoekenHolder #speedsearchResult {position: fixed; top: 65px; left: 15px; right: 15px;}
  .bovenkantHolder .bovenkant .zoekenHolder #speedsearchResult .houder {width: 100%;}
}

/* site */

/* oranje accent (--color3): donkere tekst, wit haalt maar contrast 2,5 */
a.button.wButTerug, a.button.wButLijst, a.button.pdf, .bovenkantHolder .shopitems .account .favAantal, .winkelwagenHouder .winkelknop .aantal, .artikel .restvoorraadMelding span, .artikel .aantalInMandjeMelding span {color: var(--fontColor1);}
a.button.wButTerug:hover, a.button.wButLijst:hover, a.button.pdf:hover {color: var(--fontColor2);}
/* actieve subcategorie in blauw zoals op de oude site; oranje tekst op wit is te licht */
.catMenuLink0liSel {color: var(--color1) !important;}

/* kop home (tekstblok 1559): fotoslider, elke foto op zijn eigen verhouding en niet vergroot (320px) */
.homeKop {width: calc(100% - 2 * var(--space30)); max-width: 1520px; margin: var(--space30) auto 0;}
.homeKop:not(.flickity-enabled) {display: flex; overflow: hidden;}
.homeKop .homeKopFoto {flex: none; height: 320px; aspect-ratio: 214 / 320; margin-right: var(--space20); overflow: hidden; border-radius: 3px;}
.homeKop .homeKopFoto img {display: block; width: 100%; height: 100%; object-fit: cover;}
/* de rotatorfoto's zijn collages van 766px: links de voordeur, na een witte streep een interieur */
.homeKop .homeKopFoto.deur {aspect-ratio: 213 / 320;}
.homeKop .homeKopFoto.deur img {object-position: left;}
.homeKop .homeKopFoto.interieur {aspect-ratio: 532 / 320;}
.homeKop .homeKopFoto.interieur img {object-position: right;}
.homeKop .flickity-button {background-color: var(--fontColor2); color: var(--fontColor1); transition: opacity .3s ease, background-color .2s ease, color .2s ease;}
/* pijlen bij hover, zoals skin_default dat bij zijn galerijen doet */
.homeKop:hover .flickity-button {opacity: 1;}
.homeKop .flickity-button:hover {background-color: var(--color1); color: var(--fontColor2);}
@media screen and (max-width: 900px) {
  .homeKop {width: calc(100% - 2 * var(--space15)); margin-top: var(--space15);}
  .homeKop .homeKopFoto {height: 240px;}
}
@media screen and (max-width: 600px) {
  .homeKop .homeKopFoto {height: 200px; margin-right: var(--space10);}
}

/* het aanbiedingslabel is een hoeklint-afbeelding: in de hoek, zonder het grijze labelvlak */
.artikel .labels .label:has(> img) {margin: 0; padding: 0; background: none;}

/* artikelvoorbeelden op de landingspagina's (waren tabellen in de tekst): tegels zoals in de carrousel */
.grid-4x.voorbeelden {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space15);}
.grid-4x.voorbeelden > div {padding: var(--space15); border: 1px solid #ddd; text-align: center;}
.grid-4x.voorbeelden img {display: block; width: auto; height: 250px !important; margin: 0 auto var(--space15);}
.grid-4x.voorbeelden h3, .grid-4x.voorbeelden h3 a {margin-bottom: var(--space5); font-size: 14px; line-height: 1.35; text-decoration: none;}
.grid-4x.voorbeelden h3 a:hover {color: var(--color1);}
.grid-4x.voorbeelden p {margin: 0; line-height: 1.6;}
.grid-4x.voorbeelden strong {color: var(--color1); font-size: 17px; white-space: nowrap;}
.voorbeelden + p {margin-top: var(--space30);}
@media screen and (max-width: 680px) {
  .grid-4x.voorbeelden {grid-template-columns: repeat(2, 1fr);}
  .grid-4x.voorbeelden > div {padding: var(--space10);}
  .grid-4x.voorbeelden img {height: 180px !important;}
}