/*
 * Semper Idem
 * Auteur: Kay-Webmedia
 *
 * Volgorde: fonts, variabelen, basis, onderdelen, secties, WooCommerce, responsive.
 */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ------------------------------------------------------------ variabelen */
:root{
  --si-zwart:#0D0D0D;
  --si-cream:#D8CAB0;
  --si-rood:#6D1F1F;
  --si-rood-licht:#A63B3B;
  --si-brons:#8A6D38;

  --si-cream-dim:rgba(216,202,176,.62);
  --si-cream-zwak:rgba(216,202,176,.34);
  --si-lijn:rgba(216,202,176,.22);
  --si-lijn-zwak:rgba(216,202,176,.10);
  --si-vlak:rgba(216,202,176,.05);

  /* de browser tekent selects, scrollbars en vinkjes hiermee donker in plaats
     van wit, en het vinkje krijgt de merkkleur */
  color-scheme:dark;
  accent-color:#A63B3B;

  --si-kop:'Cinzel',Georgia,'Times New Roman',serif;
  --si-tekst:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* WooCommerce werkt met eigen variabelen, die zetten we op de huisstijl.
     Scheelt losse regels en nieuwe onderdelen komen er vanzelf goed uit */
  --wc-form-color-background:rgba(216,202,176,.05);
  --wc-form-color-text:#D8CAB0;
  --wc-form-border-color:rgba(216,202,176,.22);
  --wc-form-border-width:1px;
  --wc-form-border-radius:0;
  --wc-card-border-radius:0;
  --wc-content-bg:#0D0D0D;
  --wc-primary:#6D1F1F;
  --wc-primary-text:#D8CAB0;
  --wc-secondary:rgba(216,202,176,.05);
  --wc-secondary-text:#D8CAB0;
  --wc-highlight:#A63B3B;
  --wc-highligh-text:#D8CAB0;
  --wc-subtext:rgba(216,202,176,.62);
  --wc-red:#A63B3B;
  --wc-green:#8A6D38;
  --wc-blue:#8A6D38;
  --wc-orange:#8A6D38;

  --si-breedte:1240px;
  --si-smal:760px;
  --si-soepel:cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------------------ basis */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--si-zwart);
  color:var(--si-cream);
  font-family:var(--si-tekst);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}

/* korrel over de hele site, geeft het papiergevoel uit de huisstijl */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.12;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:9;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--si-cream);text-decoration:none;transition:color .25s}
a:hover{color:#fff}
ul,ol{margin:0;padding:0}
li{list-style:none}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4{
  font-family:var(--si-kop);
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.15;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h1{font-size:clamp(28px,4.4vw,46px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(16px,2vw,20px);letter-spacing:.18em}

p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

::selection{background:var(--si-rood);color:var(--si-cream)}

:focus-visible{outline:2px solid var(--si-brons);outline-offset:3px}

.screen-reader-text,.si-verborgen{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.si-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--si-cream);
  color:var(--si-zwart);
  padding:12px 20px;
}
.si-skip:focus{left:12px;top:12px}

.si-breedte{width:100%;max-width:var(--si-breedte);margin:0 auto;padding:0 24px}
.si-breedte--smal{max-width:var(--si-smal)}

/* ------------------------------------------------------------- ornamenten */
.si-kader{
  position:absolute;
  inset:14px;
  border:1px solid var(--si-lijn);
  pointer-events:none;
  z-index:2;
}
.si-kader::before{content:'';position:absolute;inset:6px;border:1px solid var(--si-lijn-zwak)}
.si-kader span{
  position:absolute;
  width:9px;height:9px;
  border:1px solid rgba(138,109,56,.75);
  transform:rotate(45deg);
  background:var(--si-zwart);
}
.si-kader span:nth-child(1){top:-5px;left:-5px}
.si-kader span:nth-child(2){top:-5px;right:-5px}
.si-kader span:nth-child(3){bottom:-5px;left:-5px}
.si-kader span:nth-child(4){bottom:-5px;right:-5px}

.si-streep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(100%,320px);
  margin:18px auto 24px;
}
.si-streep i{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(216,202,176,0),rgba(216,202,176,.42),rgba(216,202,176,0));
}
.si-streep em{width:7px;height:7px;background:var(--si-rood);transform:rotate(45deg);flex:none}

.si-ruit{
  display:inline-block;
  width:5px;height:5px;
  background:var(--si-rood-licht);
  transform:rotate(45deg);
  margin:0 12px 0 6px;
  vertical-align:middle;
}

.si-eyebrow{
  font-family:var(--si-kop);
  font-size:11px;
  letter-spacing:.42em;
  color:var(--si-brons);
  text-transform:uppercase;
  margin:0 0 22px;
  padding-left:.42em;
}

.si-badge{
  display:inline-block;
  font-family:var(--si-kop);
  font-weight:600;
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--si-rood-licht);
  border:1px solid rgba(166,59,59,.55);
  padding:10px 20px 10px calc(20px + .34em);
  margin:0 0 24px;
}

.si-scheiding{color:rgba(138,109,56,.7);margin:0 10px}

/* ----------------------------------------------------------------- knoppen */
.si-knop{
  display:inline-block;
  background:var(--si-cream);
  color:var(--si-zwart);
  border:1px solid var(--si-cream);
  font-family:var(--si-kop);
  font-weight:600;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:14px 28px 14px calc(28px + .2em);
  border-radius:0;
  transition:background .25s,color .25s,border-color .25s;
}
.si-knop:hover,.si-knop:focus-visible{
  background:var(--si-rood);
  border-color:var(--si-rood);
  color:var(--si-cream);
}
.si-knop--lijn{
  background:none;
  color:var(--si-cream);
  border-color:var(--si-lijn);
}
.si-knop--lijn:hover{background:var(--si-cream);color:var(--si-zwart);border-color:var(--si-cream)}
.si-knop--rood{background:var(--si-rood);border-color:var(--si-rood);color:var(--si-cream)}
.si-knop--rood:hover{background:var(--si-rood-licht);border-color:var(--si-rood-licht)}

/* ----------------------------------------------------------- formuliervelden */
input[type=text],input[type=email],input[type=search],input[type=tel],
input[type=url],input[type=password],input[type=number],textarea,select{
  width:100%;
  background:var(--si-vlak);
  border:1px solid var(--si-lijn);
  color:var(--si-cream);
  font-family:inherit;
  font-size:15px;
  font-weight:300;
  padding:13px 15px;
  border-radius:0;
  transition:border-color .25s,background .25s;
}
input::placeholder,textarea::placeholder{color:rgba(216,202,176,.35)}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(216,202,176,.6);
  background:rgba(216,202,176,.08);
}

input[type=email].si-mailveld,
.si-mailveld{
  background:var(--si-vlak)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6D38' stroke-width='1.4'><rect x='2.5' y='5' width='19' height='14' rx='1.5'/><path d='M3 6.5l9 6.5 9-6.5'/></svg>")
    no-repeat 15px 50% / 18px 18px;
  padding-left:44px;
}

.si-veldrij{display:flex;gap:10px;flex-wrap:wrap}
.si-veldrij .si-mailveld{flex:1 1 200px;min-width:0;width:auto}
.si-veldrij .si-knop{flex:0 0 auto}

.si-melding{
  margin:16px 0 0;
  font-size:14px;
  padding:11px 14px;
  border:1px solid var(--si-lijn);
}
.si-melding--ok{border-color:rgba(138,109,56,.6);color:var(--si-cream)}
.si-melding--fout{border-color:rgba(166,59,59,.6);color:#d59a9a}

/* ------------------------------------------------------------------ header */
.si-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(13,13,13,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--si-lijn-zwak);
}
.si-header__binnen{
  display:flex;
  align-items:center;
  gap:24px;
  max-width:var(--si-breedte);
  margin:0 auto;
  padding:14px 24px;
}
.si-header__merk{display:flex;align-items:center;gap:12px;flex:none}
.si-header__logo{width:44px;height:auto}
.si-header__naam{
  font-family:var(--si-kop);
  font-weight:700;
  font-size:14px;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
}

.si-nav{flex:1;display:flex;justify-content:center}
.si-nav__lijst{display:flex;gap:30px}
.si-nav__lijst a{
  font-family:var(--si-kop);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--si-cream-dim);
  padding:6px 0;
  position:relative;
}
.si-nav__lijst a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--si-rood-licht);
  transform:scaleX(0);
  transition:transform .3s var(--si-soepel);
}
.si-nav__lijst a:hover{color:var(--si-cream)}
.si-nav__lijst a:hover::after,
.si-nav__lijst .current-menu-item > a::after{transform:scaleX(1)}
.si-nav__lijst .current-menu-item > a{color:var(--si-cream)}

/* margin-left:auto houdt de knoppen rechts, ook op mobiel waar het
   hoofdmenu verborgen is en er dus geen tussenruimte meer is */
.si-header__acties{display:flex;align-items:center;gap:18px;flex:none;margin-left:auto}
.si-header__acties svg{width:20px;height:20px;display:block}
.si-zoek,.si-cart{color:var(--si-cream-dim);position:relative;display:block}
.si-zoek:hover,.si-cart:hover{color:var(--si-cream)}
.si-cart__aantal{
  position:absolute;
  top:-6px;right:-8px;
  min-width:16px;height:16px;
  background:var(--si-rood);
  color:var(--si-cream);
  font-size:10px;
  line-height:16px;
  text-align:center;
  border-radius:8px;
  padding:0 4px;
}

/* ------------------------------------------------------------- taalwissel */
.si-taal{display:inline-flex;align-items:center;gap:9px;flex:none}
.si-taal__knop{
  font-family:var(--si-tekst);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  color:var(--si-cream-zwak);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--si-soepel),border-color .25s var(--si-soepel);
}
.si-taal__knop:hover,.si-taal__knop:focus-visible{color:var(--si-cream)}
.si-taal__knop.is-actief{color:var(--si-cream);border-bottom-color:var(--si-rood-licht)}
.si-taal__ruit{
  width:4px;height:4px;flex:none;
  background:var(--si-cream-zwak);
  transform:rotate(45deg);
}
.si-taal--mobiel{display:flex;justify-content:center;margin-top:26px}
.si-taal--footer{margin-top:20px}
.si-taal--hoek{position:absolute;top:28px;right:30px;z-index:4}

/* de zwevende wissel van de vertaalplugin heeft de site niet nodig, we hebben
   er zelf een in de header staan */
.trp-floating-switcher{display:none!important}

.si-menuknop{
  display:none;
  background:none;
  border:0;
  width:26px;height:26px;
  position:relative;
  padding:0;
  color:var(--si-cream);
}
.si-menuknop__lijn,
.si-menuknop__lijn::before,
.si-menuknop__lijn::after{
  position:absolute;
  left:0;
  width:26px;height:1px;
  background:currentColor;
  transition:transform .3s var(--si-soepel),opacity .2s;
}
.si-menuknop__lijn{top:13px}
.si-menuknop__lijn::before{content:'';top:-7px}
.si-menuknop__lijn::after{content:'';top:7px}
.si-menuknop[aria-expanded=true] .si-menuknop__lijn{background:transparent}
.si-menuknop[aria-expanded=true] .si-menuknop__lijn::before{transform:translateY(7px) rotate(45deg)}
.si-menuknop[aria-expanded=true] .si-menuknop__lijn::after{transform:translateY(-7px) rotate(-45deg)}

.si-mobielmenu{border-top:1px solid var(--si-lijn-zwak);padding:18px 24px 26px}
.si-mobielmenu__lijst a{
  display:block;
  font-family:var(--si-kop);
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:12px 0;
  border-bottom:1px solid var(--si-lijn-zwak);
}

/* -------------------------------------------------------------------- hero */
.si-main{position:relative;z-index:3}
.si-main--home{padding-bottom:0}

.si-hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:70px 24px;
  overflow:hidden;
}
.si-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(138,109,56,.28) 0%, rgba(138,109,56,.09) 42%, rgba(13,13,13,0) 72%),
    radial-gradient(120% 90% at 50% 112%, rgba(109,31,31,.16) 0%, rgba(13,13,13,0) 60%);
  pointer-events:none;
}
.si-hero__binnen{position:relative;z-index:3;max-width:760px}
.si-hero__logo{
  width:min(38vw,172px);
  margin:0 auto 20px;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.75));
  animation:si-op .9s var(--si-soepel) both;
}
.si-hero__titel{
  font-size:clamp(29px,7.2vw,54px);
  letter-spacing:.15em;
  padding-left:.15em;
  margin:0 0 4px;
  animation:si-op .9s .08s var(--si-soepel) both;
}
.si-hero__tekst{
  font-size:clamp(15px,2.9vw,17px);
  color:var(--si-cream-dim);
  max-width:46ch;
  margin:0 auto 26px;
  animation:si-op .9s .22s var(--si-soepel) both;
}
.si-hero__acties{margin:0;animation:si-op .9s .3s var(--si-soepel) both}

@keyframes si-op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ----------------------------------------------------------------- secties */
.si-sectiekop{
  text-align:center;
  font-size:clamp(18px,2.6vw,26px);
  letter-spacing:.26em;
  padding-left:.26em;
  margin:0;
}
.si-paginakop{text-align:center;margin:0 0 34px}
.si-paginakop__titel{margin:0}
.si-paginakop .si-streep{margin-top:16px;margin-bottom:0}

.si-collectie,.si-instagram,.si-paginainhoud{padding:74px 0}
.si-collectie{border-top:1px solid var(--si-lijn-zwak)}

.si-collectie__meer,.si-instagram__link{text-align:center;margin:38px 0 0}

.si-tekst{font-size:16.5px;color:var(--si-cream-dim)}
.si-tekst h2,.si-tekst h3{color:var(--si-cream);margin-top:1.6em}
.si-tekst a{color:var(--si-cream);border-bottom:1px solid var(--si-lijn)}
.si-tekst a:hover{border-color:var(--si-cream)}
.si-tekst ul,.si-tekst ol{margin:0 0 1.2em 1.4em}
.si-tekst ul > li{list-style:disc;margin-bottom:.4em}
/* genummerde lijsten hebben in juridische tekst hun nummer nodig, daar wordt
   in de artikelen naar verwezen met lid 1, lid 2 en zo verder */
.si-tekst ol > li{list-style:decimal;margin-bottom:.6em}
.si-tekst ol > li::marker{color:var(--si-brons)}
.si-tekst ul > li::marker{color:var(--si-rood-licht)}
.si-tekst li > ul{margin:.6em 0 .2em 1.2em}
.si-tekst li > ul > li{list-style:disc}
.si-tekst hr,
.si-tekst .wp-block-separator{
  border:0;
  border-top:1px solid var(--si-lijn-zwak);
  margin:2.4em 0;
}
.si-tekst blockquote{
  border-left:2px solid var(--si-rood);
  margin:1.6em 0;
  padding-left:22px;
  font-style:italic;
}

.si-uitgelicht{margin:0 0 34px}

.si-kruimels{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-cream-zwak);
  margin:0 0 28px;
}
.si-kruimels a{color:var(--si-cream-zwak)}
.si-kruimels a:hover{color:var(--si-cream)}
.si-kruimels span{margin:0 8px;color:rgba(138,109,56,.6)}
.si-kruimels strong{color:var(--si-cream-dim);font-weight:400}

/* ---------------------------------------------------------------- berichten */
.si-berichten{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:34px;
}
.si-kaart__beeld{margin:0 0 16px;overflow:hidden}
.si-kaart__beeld img{transition:transform .6s var(--si-soepel);width:100%}
.si-kaart:hover .si-kaart__beeld img{transform:scale(1.04)}
.si-kaart__datum{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--si-brons);
  margin:0 0 8px;
}
.si-kaart__titel{font-size:16px;letter-spacing:.16em;margin:0 0 10px}
.si-kaart__excerpt{color:var(--si-cream-dim);font-size:15px;margin:0}

.si-leeg{text-align:center;color:var(--si-cream-dim);padding:60px 0}
.si-leeg__actie{margin:26px 0 0}

/* ---------------------------------------------------------------- instagram */
.si-instagram{border-top:1px solid var(--si-lijn-zwak)}
.si-instagram__raster{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.si-instagram__raster a{
  display:block;
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
}
.si-instagram__raster img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--si-soepel),opacity .3s;
  opacity:.82;
}
.si-instagram__raster a:hover img{transform:scale(1.06);opacity:1}
.si-instagram__video{
  position:absolute;
  top:10px;right:10px;
  width:0;height:0;
  border-left:9px solid var(--si-cream);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

/* ------------------------------------------------------------------ socials */
.si-socials{display:flex;gap:14px}
.si-socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--si-lijn);
  color:var(--si-cream-dim);
  transition:border-color .25s,color .25s,background .25s;
}
.si-socials a:hover{border-color:var(--si-cream);color:var(--si-cream)}
.si-socials svg{width:17px;height:17px}
.si-socials--mobiel{margin-top:22px}

/* ------------------------------------------------------------------ footer */
.si-footer{
  position:relative;
  z-index:3;
  border-top:1px solid var(--si-lijn-zwak);
  padding:64px 0 32px;
  margin-top:74px;
}
.si-footer__top{
  display:grid;
  grid-template-columns:1.5fr .9fr 1.1fr 1.5fr;
  gap:44px;
  align-items:start;
}
.si-footer__logo{width:66px;margin:0 0 14px}
.si-footer__naam{
  font-family:var(--si-kop);
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:0 0 10px;
}
.si-footer__slogan{
  font-size:13.5px;
  line-height:1.7;
  color:var(--si-cream-dim);
  max-width:26ch;
  margin:0 0 18px;
}
.si-footer__kop{
  font-family:var(--si-tekst);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--si-brons);
  margin:0 0 16px;
}
.si-footer__menu{list-style:none;margin:0;padding:0}
.si-footer__menu a{
  display:block;
  font-size:14px;
  color:var(--si-cream-dim);
  padding:5px 0;
  transition:color .25s var(--si-soepel);
}
.si-footer__menu a:hover,.si-footer__menu a:focus-visible{color:var(--si-cream)}
.si-footer__contact{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--si-cream-dim);
  margin:20px 0 0;
}
.si-footer__contact svg{width:17px;height:17px;flex:none;color:var(--si-brons)}
.si-footer__contact a{color:inherit}
.si-footer__contact a:hover{color:var(--si-cream)}

.si-footer__onder{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--si-cream-zwak);
}
.si-footer__onder a{color:inherit}
.si-footer__onder a:hover{color:var(--si-cream)}
.si-footer__onder p{margin:0}

/* het aanmeldformulier in de footer is compacter dan op de aankondiging */
.si-aanmelden--footer{margin:0;max-width:none}
.si-aanmelden--footer .si-aanmelden__uitleg{
  font-size:13.5px;
  line-height:1.7;
  color:var(--si-cream-dim);
  margin:0 0 14px;
  max-width:34ch;
}
.si-aanmelden--footer .si-veldrij{gap:10px}
.si-aanmelden--footer .si-mailveld{padding:11px 13px 11px 38px;font-size:13.5px}
.si-aanmelden--footer .si-knop{padding:11px 20px;font-size:11px}
.si-aanmelden--footer .si-melding{margin:12px 0 0;font-size:13px;text-align:left}

/* ------------------------------------------------------------- coming soon */
.si-comingsoon{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.si-comingsoon::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(138,109,56,.30) 0%, rgba(138,109,56,.10) 42%, rgba(13,13,13,0) 72%),
    radial-gradient(120% 90% at 50% 110%, rgba(109,31,31,.16) 0%, rgba(13,13,13,0) 60%);
  pointer-events:none;
  z-index:0;
}
.si-comingsoon .si-kader{position:fixed}
.si-comingsoon__binnen{
  position:relative;
  z-index:3;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:52px 26px 26px;
  width:100%;
  max-width:760px;
  margin:0 auto;
}
.si-comingsoon__logo{
  width:min(38vw,172px);
  margin:0 auto 20px;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.75));
  animation:si-op .9s var(--si-soepel) both;
}
.si-comingsoon__titel{
  font-family:var(--si-kop);
  font-weight:700;
  font-size:clamp(29px,7.2vw,54px);
  letter-spacing:.15em;
  padding-left:.15em;
  margin:0;
  animation:si-op .9s .08s var(--si-soepel) both;
}
.si-comingsoon .si-streep{
  margin:18px auto 24px;
  animation:si-op .9s .16s var(--si-soepel) both;
}
.si-comingsoon__tekst{
  font-size:clamp(15px,2.9vw,17px);
  color:var(--si-cream-dim);
  max-width:46ch;
  margin:0 auto 18px;
  animation:si-op .9s .22s var(--si-soepel) both;
}
.si-comingsoon__tekst + .si-comingsoon__tekst{margin-bottom:26px;animation-delay:.28s}
.si-comingsoon .si-badge{animation:si-op .9s .34s var(--si-soepel) both}

.si-aanmelden{
  width:100%;
  max-width:480px;
  animation:si-op .9s .42s var(--si-soepel) both;
}
.si-aanmelden__uitleg{font-size:13.5px;color:rgba(216,202,176,.5);margin:0 0 14px}
.si-aanmelden__klein{font-size:11.5px;color:rgba(216,202,176,.3);margin:12px 0 0}
.si-aanmelden__klein u{color:var(--si-rood-licht);text-decoration:none}

.si-comingsoon__voet{
  position:relative;
  z-index:3;
  flex:none;
  text-align:center;
  padding:16px 26px 22px;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-cream-zwak);
}
.si-comingsoon__voet a{color:inherit;border-bottom:1px solid var(--si-lijn-zwak);padding-bottom:1px}
.si-comingsoon__voet a:hover{color:var(--si-cream)}
.si-comingsoon__maker{
  display:block;
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.2em;
  color:rgba(216,202,176,.24);
}
.si-comingsoon__maker a{border:0}

/* -------------------------------------------------------------- woocommerce */
.si-main--shop{padding-top:44px}

/* WooCommerce zet een clearfix op de productlijst. In een grid worden dat
   twee lege cellen, waardoor het eerste product in kolom twee begint. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.si-producten::before,
.si-producten::after{display:none!important;content:none!important}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-cream-zwak);
  margin:0 0 30px;
}
.woocommerce .woocommerce-ordering select{
  width:auto;
  padding:9px 34px 9px 12px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-cream-dim);
  appearance:none;
  background:var(--si-vlak)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8CAB0' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 11px center / 13px 13px;
}
.woocommerce .woocommerce-ordering select option{background:var(--si-zwart);color:var(--si-cream)}

.woocommerce ul.products,.si-producten{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:38px 28px;
  margin:0;
}
.woocommerce ul.products li.product,.si-producten li{
  width:auto!important;
  margin:0!important;
  float:none!important;
  text-align:center;
}
.woocommerce ul.products li.product a img,
.si-producten li.product a img{
  margin:0 0 16px;
  transition:transform .6s var(--si-soepel);
  width:100%;
}
.woocommerce ul.products li.product:hover a img,
.si-producten li.product:hover a img{transform:scale(1.03)}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.si-producten li.product .woocommerce-loop-product__title{
  font-family:var(--si-kop);
  font-size:14px!important;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-cream);
  padding:0!important;
  margin:0 0 8px;
}
.woocommerce ul.products li.product .price,
.si-producten li.product .price{
  color:var(--si-brons)!important;
  font-size:14px!important;
  font-weight:400;
  display:block;
  margin:0 0 14px;
}
.woocommerce ul.products li.product .price del,
.si-producten li.product .price del{opacity:.5;margin-right:8px}
.woocommerce ul.products li.product .button,
.si-producten li.product .button{
  display:inline-block;
  padding:11px 22px;
  font-size:11px;
  background:none;
  color:var(--si-cream);
  border:1px solid var(--si-lijn);
}
.woocommerce ul.products li.product .button:hover,
.si-producten li.product .button:hover{
  background:var(--si-cream);
  color:var(--si-zwart);
  border-color:var(--si-cream);
}
.woocommerce ul.products li.product .added_to_cart,
.si-producten li.product .added_to_cart{
  display:block;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--si-brons);
}
.woocommerce ul.products li.product .price ins,
.si-producten li.product .price ins{text-decoration:none;color:var(--si-rood-licht)!important}

.woocommerce span.onsale{
  background:var(--si-rood);
  color:var(--si-cream);
  font-family:var(--si-kop);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:0;
  min-width:0;
  min-height:0;
  padding:6px 12px;
  line-height:1;
  top:12px;
  left:12px;
  margin:0;
}

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.si-producten a.button{
  background:var(--si-cream);
  color:var(--si-zwart);
  border:1px solid var(--si-cream);
  font-family:var(--si-kop);
  font-weight:600;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:0;
  transition:background .25s,color .25s,border-color .25s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,.woocommerce #respond input#submit:hover,
.si-producten a.button:hover{
  background:var(--si-rood);
  border-color:var(--si-rood);
  color:var(--si-cream);
}

/* zolang er nog geen maat gekozen is zet woocommerce .disabled op de knop en
   trekt daar zijn eigen paars overheen. die selector telt een klasse extra */
.woocommerce a.button.disabled,.woocommerce button.button.disabled,
.woocommerce input.button.disabled,.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,.woocommerce input.button.alt.disabled,
.woocommerce a.button:disabled,.woocommerce button.button:disabled,
.woocommerce input.button:disabled,.woocommerce a.button.alt:disabled,
.woocommerce button.button.alt:disabled,.woocommerce input.button.alt:disabled,
.woocommerce a.button:disabled[disabled],.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled[disabled],.woocommerce a.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]{
  background:transparent;
  color:var(--si-cream-zwak);
  border:1px solid var(--si-lijn);
  opacity:1;
  cursor:not-allowed;
}
.woocommerce a.button.disabled:hover,.woocommerce button.button.disabled:hover,
.woocommerce a.button.alt.disabled:hover,.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button:disabled:hover,.woocommerce button.button.alt:disabled:hover{
  background:transparent;
  color:var(--si-cream-zwak);
  border-color:var(--si-lijn);
}

.woocommerce div.product .product_title{
  font-size:clamp(22px,3vw,30px);
  letter-spacing:.14em;
  margin:0 0 12px;
}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--si-cream)!important;
  font-family:var(--si-kop);
  font-size:22px!important;
  margin:0 0 22px;
}
.woocommerce div.product form.cart{margin:26px 0}
/* de galerij en de samenvatting zweven naast elkaar. zonder clear schuift de
   kop van de gerelateerde producten in de rechterkolom */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells{clear:both;padding-top:20px}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .up-sells > h2{
  font-size:clamp(18px,2.4vw,26px);
  letter-spacing:.14em;
  text-align:center;
  margin:40px 0 26px;
}
.woocommerce div.product .product_meta{
  font-size:13.5px;
  color:var(--si-cream-dim);
  border-top:1px solid var(--si-lijn-zwak);
  padding-top:16px;
  margin-top:22px;
}
.woocommerce div.product .product_meta a{color:var(--si-cream)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 22px;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--si-lijn-zwak)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  margin:0 24px 0 0;
  padding:0 0 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--si-kop);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--si-cream-zwak);
  padding:0;
}
/* woocommerce geeft de actieve tab een witte achtergrond met twee schaduwhoekjes.
   die regels staan op li.active en wegen zwaarder dan de regel op li hierboven */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:none;
  border:0;
  border-bottom:1px solid var(--si-rood-licht);
  box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after{
  display:none;
  box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--si-cream)}

.si-usps{
  margin:24px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--si-lijn-zwak);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 20px;
}
.si-usps li{
  font-size:13px;
  color:var(--si-cream-dim);
  padding-left:20px;
  position:relative;
}
.si-usps li::before{
  content:'';
  position:absolute;
  left:0;top:.62em;
  width:6px;height:6px;
  background:var(--si-rood);
  transform:rotate(45deg);
}

.woocommerce .quantity .qty{width:74px;text-align:center}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--si-vlak);
  border-top:2px solid var(--si-brons);
  color:var(--si-cream);
  border-radius:0;
}
.woocommerce-error{border-top-color:var(--si-rood-licht)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--si-brons)}

.woocommerce table.shop_table,.woocommerce table.shop_table td,
.woocommerce table.shop_table th,.woocommerce-cart table.cart td.actions{
  border-color:var(--si-lijn-zwak);
  border-radius:0;
}
.woocommerce table.shop_table th{
  font-family:var(--si-kop);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--si-brons);
}
.woocommerce-checkout #payment{background:var(--si-vlak);border-radius:0}
.woocommerce-checkout #payment div.payment_box{background:rgba(216,202,176,.07)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:rgba(216,202,176,.07)}

.woocommerce .woocommerce-breadcrumb{display:none}

/* ---------------------------------------------- formulieren van WooCommerce */
/* WooCommerce zet zijn eigen opmaak op de velden met meer gewicht dan de
   basisregels hierboven. Zonder dit blok staan er witte vakken met zwarte
   tekst midden in een donkere site. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row textarea.input-text,
.woocommerce-page form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce form.checkout_coupon input.input-text,
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text,
.woocommerce .quantity input.qty{
  width:100%;
  background:var(--si-vlak);
  border:1px solid var(--si-lijn);
  border-radius:0;
  box-shadow:none;
  color:var(--si-cream);
  font-family:var(--si-tekst);
  font-size:15px;
  font-weight:300;
  line-height:1.4;
  padding:13px 15px;
  transition:border-color .25s,background .25s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce .quantity input.qty:focus{
  outline:none;
  border-color:rgba(216,202,176,.6);
  background:rgba(216,202,176,.08);
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--si-cream-dim);
  margin:0 0 7px;
  display:block;
}
.woocommerce form .form-row .required{color:var(--si-rood-licht);text-decoration:none;border:0}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:rgba(166,59,59,.8)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:rgba(138,109,56,.6)}
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text{min-height:110px;resize:vertical}
.woocommerce .quantity input.qty{width:74px;text-align:center;padding:12px 6px}

/* de landen en provincie keuze van WooCommerce draait op select2 */
.select2-container--default .select2-selection--single{
  height:auto;
  padding:12px 15px;
  background:#131313;
  border:1px solid var(--si-lijn);
  border-radius:0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--si-cream);
  line-height:1.4;
  padding:0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top:50%;
  right:10px;
  transform:translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-top-color:var(--si-brons)}
.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b{border-bottom-color:var(--si-brons)}
.select2-dropdown{
  background:#131313;
  border:1px solid var(--si-lijn);
  border-radius:0;
  color:var(--si-cream);
}
.select2-container--default .select2-results__option{background:transparent;color:var(--si-cream-dim)}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected=true]{
  background:var(--si-rood);
  color:var(--si-cream);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--si-vlak);
  border:1px solid var(--si-lijn);
  color:var(--si-cream);
  border-radius:0;
}

/* winkelwagen */
.woocommerce table.cart td.actions{padding:18px 14px;background:transparent}
.woocommerce table.cart td.actions .coupon{
  float:none;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  margin:0 0 14px;
}
.woocommerce table.cart td.actions .coupon .input-text{width:auto;flex:1 1 200px;min-width:0}
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions > button.button,
.woocommerce table.cart td.actions > .button{
  flex:0 0 auto;
  float:none;
  background:none;
  color:var(--si-cream);
  border:1px solid var(--si-lijn);
  padding:13px 22px;
  font-size:11px;
}
.woocommerce table.cart td.actions .coupon .button:hover,
.woocommerce table.cart td.actions > button.button:hover{
  background:var(--si-rood);
  border-color:var(--si-rood);
}
.woocommerce table.cart td.actions > button.button:disabled,
.woocommerce table.cart td.actions > button.button[disabled]{
  opacity:.35;
  cursor:default;
  background:none;
  border-color:var(--si-lijn-zwak);
  color:var(--si-cream-zwak);
}
.woocommerce table.cart img{width:60px;height:auto}
.woocommerce a.remove{
  color:var(--si-rood-licht)!important;
  font-size:20px;
  line-height:1;
  border-radius:0;
}
.woocommerce a.remove:hover{background:var(--si-rood);color:var(--si-cream)!important}

.woocommerce .cart-collaterals{display:flex;justify-content:flex-end;width:100%}
.woocommerce .cart-collaterals .cart_totals{float:none;width:100%;max-width:440px}
.woocommerce .cart-collaterals .cart_totals > h2{
  font-size:clamp(17px,2.2vw,22px);
  letter-spacing:.14em;
  margin:0 0 16px;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td{padding:13px 15px;vertical-align:middle;border-color:var(--si-lijn-zwak)}
.woocommerce .cart_totals .wc-proceed-to-checkout{padding:20px 0 0}
.woocommerce .cart_totals .wc-proceed-to-checkout a.button{display:block;text-align:center}

/* afrekenen */
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;
  margin:0;
  padding:0 0 18px;
  border-bottom:1px solid var(--si-lijn-zwak);
}
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;margin:0 0 8px}
.woocommerce-checkout #payment div.form-row{padding:20px 0 0}
.woocommerce-checkout #payment div.payment_box{
  background:var(--si-vlak);
  color:var(--si-cream-dim);
  border-radius:0;
  font-size:14px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:14px;color:var(--si-cream-dim)}
.woocommerce-checkout #order_review_heading{
  font-size:clamp(17px,2.2vw,22px);
  letter-spacing:.14em;
  margin:36px 0 16px;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{padding:13px 15px;border-color:var(--si-lijn-zwak)}
.woocommerce-checkout .woocommerce-privacy-policy-text p{font-size:13.5px;color:var(--si-cream-zwak)}

/* ------------------------------------------------------------- paginering */
.si-main .pagination,.woocommerce nav.woocommerce-pagination{margin:50px 0 0;text-align:center}
.woocommerce nav.woocommerce-pagination ul,.si-main .nav-links{
  border:0;
  display:inline-flex;
  gap:8px;
}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.si-main .nav-links .page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;height:38px;
  border:1px solid var(--si-lijn-zwak);
  color:var(--si-cream-dim);
  font-size:13px;
  padding:0 10px;
  background:none;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.si-main .nav-links .page-numbers.current{
  background:var(--si-cream);
  color:var(--si-zwart);
  border-color:var(--si-cream);
}

/* ------------------------------------------------------------------ reacties */
.si-reacties{margin:60px 0 0;padding:40px 0 0;border-top:1px solid var(--si-lijn-zwak)}
.si-reacties__lijst{margin:0 0 40px}
.si-reacties__lijst li{margin:0 0 26px}
.si-reacties .comment-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--si-brons);margin:0 0 8px}
.si-reacties .comment-content{color:var(--si-cream-dim)}
.si-reacties .children{margin-left:26px;padding-left:20px;border-left:1px solid var(--si-lijn-zwak)}
.si-reacties label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--si-brons);margin:0 0 6px}
.si-reacties p{margin-bottom:18px}

/* ------------------------------------------------------------------ 404 */
.si-main--404{text-align:center;padding:90px 0}
.si-404__logo{width:110px;margin:0 auto 26px;opacity:.7}

/* ----------------------------------------------------------- responsive */
@media (max-width:1024px){
  .si-footer__top{grid-template-columns:1fr 1fr;gap:38px}
  .si-instagram__raster{grid-template-columns:repeat(3,1fr)}
  .woocommerce ul.products,.si-producten{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .si-nav{display:none}
  .si-menuknop{display:block}
  .si-header__naam{font-size:12px}
  .si-header__acties .si-taal{display:none}
}

@media (max-width:560px){
  .si-kader{inset:9px}
  .si-taal--hoek{top:18px;right:20px}
  .si-comingsoon__binnen{padding:44px 20px 22px}
  .si-veldrij{flex-direction:column}
  .si-veldrij .si-mailveld,.si-veldrij .si-knop{width:100%;flex:1 1 auto}
  .si-footer__top{grid-template-columns:1fr;gap:32px}
  .si-footer__slogan,.si-aanmelden--footer .si-aanmelden__uitleg{max-width:none}
  .si-footer__onder{flex-direction:column;text-align:center}
  .si-instagram__raster{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products,.si-producten{grid-template-columns:1fr;gap:30px}
  .si-usps{grid-template-columns:1fr}
  .si-collectie,.si-instagram,.si-paginainhoud{padding:50px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ------------------------------------------------------------- aanvinken */
/* woocommerce zet een kaal vierkant vinkje neer op het afrekenen en bij het
   afwijkende verzendadres. dat valt wit uit tegen de donkere achtergrond */
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"],
.si-tekst input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  margin:0 8px 0 0;
  vertical-align:-3px;
  background:var(--si-vlak);
  border:1px solid var(--si-lijn);
  border-radius:0;
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.woocommerce input[type="checkbox"]:hover,
.woocommerce-page input[type="checkbox"]:hover{border-color:var(--si-cream)}
.woocommerce input[type="checkbox"]:checked,
.woocommerce-page input[type="checkbox"]:checked,
.si-tekst input[type="checkbox"]:checked{
  background:var(--si-rood);
  border-color:var(--si-rood-licht);
}
.woocommerce input[type="checkbox"]:checked::after,
.woocommerce-page input[type="checkbox"]:checked::after,
.si-tekst input[type="checkbox"]:checked::after{
  content:'';
  position:absolute;
  left:4px;
  top:0;
  width:5px;
  height:10px;
  border:solid var(--si-cream);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.woocommerce input[type="checkbox"]:focus-visible,
.woocommerce-page input[type="checkbox"]:focus-visible{
  outline:2px solid var(--si-rood-licht);
  outline-offset:2px;
}
.woocommerce form .form-row label.checkbox,
.woocommerce-page form .form-row label.checkbox,
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-page .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:flex-start;
  gap:2px;
  cursor:pointer;
}