/* JM Dogtools, maatwerk WooCommerce-thema. SaffrieDesign 2026.
   Basis: het goedgekeurde concept (jmdogtools-concept.vercel.app). */

:root {
  --bos: #10291f;
  --bos-2: #173a2b;
  --bos-lijn: rgba(245, 241, 234, .14);
  --merkgroen: #315a31;
  --oranje: #ed7b13;
  --oranje-knop: #d4600a;
  --oranje-knop-hover: #b9520a;
  --creme: #f4efe6;
  --creme-2: #ebe4d7;
  --papier: #ffffff;
  --inkt: #18211c;
  --tekst: #3d4741;
  --zacht: #5f6a63;
  --lijn: #ddd5c7;
  --rood: #a3300b;
  --groen-ok: #1d6b3a;
  --kop: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stift: 'Permanent Marker', cursive;
  --hand: 'Caveat Brush', cursive;
  --max: 1240px;
  --r: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--creme); color: var(--tekst); font: 400 16px/1.6 var(--body); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
main:focus { outline: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap--smal { max-width: 860px; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.sr-focus:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; z-index: 200; background: #fff; color: var(--inkt); padding: 10px 14px; border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
h1, h2, h3 { font-family: var(--kop); color: var(--inkt); text-transform: uppercase; line-height: 1.05; margin: 0; letter-spacing: .01em; font-weight: 700; }
.ico { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--oranje-knop); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- knoppen ---------- */
.btn, .button, button.button, input.button, .woocommerce a.button, .single_add_to_cart_button, #place_order, .checkout-button, .wc-forward {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; border: 0; border-radius: var(--r);
  background: var(--oranje-knop); color: #fff; font: 600 15px/1.1 var(--kop); letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 22px; text-decoration: none; transition: background .15s, transform .15s; cursor: pointer; text-align: center;
}
.btn:hover, .button:hover, .single_add_to_cart_button:hover, #place_order:hover, .checkout-button:hover { background: var(--oranje-knop-hover); color: #fff; }
.btn:active, .button:active { transform: translateY(1px); }
.btn .ico, .button .ico { font-size: 18px; transition: transform .15s; }
.btn:hover .pijl { transform: translateX(3px); }
.btn--rand { background: transparent; color: var(--oranje-knop); box-shadow: inset 0 0 0 2px var(--oranje-knop); }
.btn--rand:hover { background: var(--oranje-knop); color: #fff; }
.btn--klein { font-size: 13px; padding: 11px 16px; }
.btn--donker { background: var(--bos); }
.btn--donker:hover { background: var(--bos-2); }
.btn[disabled], .button[disabled], .button.disabled, .single_add_to_cart_button.disabled { background: #8f9892; cursor: not-allowed; opacity: 1; }
.button.loading { opacity: .7; pointer-events: none; }
.button.added::after { content: none; }
.added_to_cart { display: none !important; }
.link-pijl { display: inline-flex; align-items: center; gap: .4em; color: var(--oranje-knop); font-weight: 600; font-size: 14px; text-decoration: none; }
.link-pijl:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- formulieren ---------- */
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=date], input[type=url], textarea, select, .select2-container .select2-selection--single {
  width: 100%; min-height: 46px; border: 1px solid #cfc5b3; border-radius: var(--r); background: #fff; color: var(--inkt);
  font: 400 16px/1.4 var(--body); padding: 10px 12px;
}
textarea { min-height: 120px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--oranje); outline-offset: 0; border-color: transparent; }
label { font-weight: 600; font-size: 14px; color: var(--inkt); display: block; margin-bottom: 6px; }
.formulier p { margin: 0 0 16px; }
.formulier .klein { font-size: 13px; color: var(--zacht); }
.formulier .vink label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.formulier .vink input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--bos); flex: none; }
.velden-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.melding-blok { background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--merkgroen); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; }
.melding-blok--ok { border-left-color: var(--groen-ok); background: #f1f7f1; }
.melding-blok--fout { border-left-color: var(--rood); background: #fbf1ec; }

/* ---------- topbalk + kop ---------- */
.topbalk { background: var(--bos); color: #f5f1ea; font-size: 13px; border-bottom: 1px solid var(--bos-lijn); }
.topbalk .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.topbalk span, .topbalk a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.topbalk .ico { color: var(--oranje); font-size: 17px; }
.topbalk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbalk .wissel { border: 1px solid var(--bos-lijn); border-radius: 99px; padding: 4px 12px 4px 4px; gap: 8px; }
.topbalk .wissel .wissel-poot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--oranje); }
.topbalk .wissel .ico-poot { font-size: 13px; color: var(--bos); fill: currentColor; stroke: none; }
.topbalk .wissel .ico-extern { font-size: 13px; color: #f5f1ea; opacity: .7; }

.kop { background: var(--bos); position: sticky; top: 0; z-index: 40; }
.admin-bar .kop { top: 32px; }
.kop .wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; position: relative; }
.logo { display: block; }
.logo img { height: 92px; width: auto; }
.kop-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.kop-acties { display: flex; align-items: center; gap: 22px; }
.zoek { position: relative; display: flex; }
.kop .zoek input { width: 280px; min-height: 40px; height: 40px; border: 1px solid rgba(245, 241, 234, .55); background: transparent; color: #fff; padding: 0 40px 0 14px; font-size: 14px; }
.kop .zoek input::placeholder { color: rgba(245, 241, 234, .75); }
.kop .zoek input:focus { outline: 2px solid var(--oranje); outline-offset: 1px; }
.zoek button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: none; border: 0; color: inherit; display: grid; place-items: center; padding: 0; }
.kop .zoek button { color: #f5f1ea; }
.zoek button .ico { font-size: 18px; }
.zoek input::-webkit-search-cancel-button { -webkit-appearance: none; }
.zoek-tips { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; background: #fff; border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); padding: 6px; display: none; z-index: 60; }
.zoek-tips.open { display: block; }
.zoek-tips a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 4px; text-decoration: none; color: var(--inkt); font-size: 14px; line-height: 1.25; }
.zoek-tips a:hover, .zoek-tips a.actief { background: var(--creme); }
.zoek-tips img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; background: #fff; }
.zoek-tips img.wit { object-fit: contain; }
.zoek-tips small { color: var(--zacht); }
.zoek-tips { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.zoek-tips.laden { opacity: .85; }
.zoek-tips .zt-kop { padding: 8px 8px 4px; font: 700 12px/1.2 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.zoek-tips a.zt-categorie { grid-template-columns: 1fr auto; padding: 8px; }
.zoek-tips .zt-cat { font-weight: 600; }
.zoek-tips strong { white-space: nowrap; }
.zoek-tips strong small { font-weight: 400; }
.zoek-tips .zt-uit { color: var(--rood); }
.zoek-tips .alles { display: block; text-align: center; padding: 10px; font-weight: 600; color: var(--oranje-knop); border-top: 1px solid var(--lijn); margin-top: 4px; border-radius: 0 0 4px 4px; }
.zoek-tips .leeg { padding: 12px; font-size: 14px; color: var(--zacht); line-height: 1.45; }
.zoek-tips .leeg strong { color: var(--inkt); }
.zoek-tips .zt-populair { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.zoek-tips a.zt-chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 99px; font-size: 13px; font-weight: 600; }
.icoknop { position: relative; background: none; border: 0; color: #f5f1ea; padding: 4px; display: grid; place-items: center; text-decoration: none; }
.icoknop .ico { font-size: 24px; }
.icoknop:hover { color: var(--oranje); }
.teller { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--oranje); color: var(--bos); font: 700 11px/18px var(--body); text-align: center; padding: 0 4px; }
.teller[data-n="0"] { display: none; }
.hoofdmenu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.hoofdmenu li { position: relative; }
.hoofdmenu a { font: 600 14px/1 var(--kop); letter-spacing: .1em; text-transform: uppercase; color: #f5f1ea; text-decoration: none; padding: 6px 0 8px; display: block; border-bottom: 2px solid transparent; }
.hoofdmenu a:hover { color: var(--oranje); }
.hoofdmenu .current-menu-item > a, .hoofdmenu a[aria-current] { color: var(--oranje); border-bottom-color: var(--oranje); }
.hoofdmenu .sub-menu { display: none; position: absolute; top: 100%; left: -16px; background: var(--bos); padding: 8px 16px; min-width: 200px; flex-direction: column; gap: 0; z-index: 50; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.hoofdmenu li:hover > .sub-menu, .hoofdmenu li:focus-within > .sub-menu { display: flex; }
.hoofdmenu .sub-menu a { padding: 10px 0; }
.hoofdmenu-kop, .hoofdmenu-extra { display: none; }
.menuknop { display: none; }

.kop--rustig .wrap { grid-template-columns: auto 1fr auto; }
.kop--rustig .logo img { height: 64px; }
.kop--rustig .veilig { margin: 0; justify-self: center; display: inline-flex; gap: 8px; align-items: center; color: #f5f1ea; font: 600 15px var(--kop); letter-spacing: .08em; text-transform: uppercase; }
.kop--rustig .veilig .ico { color: var(--oranje); font-size: 20px; }
.kop--rustig .terug { color: #f5f1ea; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.kop--rustig .terug:hover { color: var(--oranje); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--bos) var(--hero) center / cover no-repeat; color: #f5f1ea; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 26, 19, .92) 0%, rgba(10, 26, 19, .78) 34%, rgba(10, 26, 19, .15) 66%, rgba(10, 26, 19, 0) 100%); }
.hero .wrap { position: relative; width: 100%; padding-top: 70px; padding-bottom: 70px; }
.eyebrow { font: 600 16px/1 var(--kop); letter-spacing: .32em; color: var(--oranje); text-transform: uppercase; margin: 0 0 22px; }
.hero h1, .hero h2 { color: #fff; font-size: clamp(44px, 5.4vw, 74px); font-weight: 700; letter-spacing: .02em; max-width: 720px; }
.stift { display: block; font-family: var(--stift); font-weight: 400; color: var(--oranje); font-size: .92em; letter-spacing: 0; text-transform: uppercase; margin-top: 10px; transform: rotate(-2deg); transform-origin: left; }
.hero p { max-width: 470px; font-size: 18px; line-height: 1.55; margin: 24px 0 32px; color: #f2eee6; }
.hero p + p { margin-top: -16px; }

/* ---------- usp-strook ---------- */
.usps { background: var(--creme-2); border-bottom: 1px solid var(--lijn); }
.usps ul { list-style: none; margin: 0 auto; padding: 0 24px; max-width: var(--max); display: grid; grid-template-columns: repeat(4, 1fr); }
.usps li { display: flex; align-items: center; gap: 16px; padding: 22px 26px; font-size: 15px; line-height: 1.35; color: var(--inkt); }
.usps li + li { border-left: 1px solid var(--lijn); }
.usps .ico { font-size: 38px; color: var(--bos); }

/* ---------- secties ---------- */
.sectie { padding: 64px 0; }
.sectie + .sectie--producten, .sectie--producten + .sectie { padding-top: 0; }
.sectie-kop { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 26px; flex-wrap: wrap; }
.sectie-kop h2 { font-size: 40px; }
.sectie-kop p { margin: 0 0 4px; font-size: 15px; color: var(--tekst); }
.sectie-kop .rechts { margin-left: auto; margin-bottom: 4px; }
.notitie { font-family: var(--hand); color: var(--oranje-knop); font-size: 24px; line-height: 1.05; transform: rotate(-6deg); display: inline-flex; align-items: flex-end; gap: 6px; margin: 0 0 0 50px !important; position: relative; top: -6px; }
.notitie svg { width: 40px; height: 34px; color: var(--oranje-knop); position: relative; top: 14px; }

.tegels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tegels--4 { grid-template-columns: repeat(4, 1fr); }
.tegels--5 { grid-template-columns: repeat(5, 1fr); }
.tegels--3 { grid-template-columns: repeat(3, 1fr); }
.tegel { position: relative; display: block; aspect-ratio: 8 / 9; border-radius: var(--r); overflow: hidden; background: var(--bos); text-decoration: none; }
.tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tegel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 19, 0) 45%, rgba(10, 26, 19, .88) 100%); }
.tegel span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font: 700 22px/1 var(--kop); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.tegel span .ico { font-size: 22px; transition: transform .2s; }
.tegel:hover img { transform: scale(1.05); }
.tegel:hover span .ico { transform: translateX(4px); }

/* productkaarten */
.raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaart { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--r); padding: 14px 14px 16px; display: flex; flex-direction: column; position: relative; transition: box-shadow .2s, border-color .2s; min-width: 0; }
.kaart:hover { border-color: #cdbfa8; box-shadow: 0 10px 26px rgba(16, 41, 31, .1); }
.kaart .beeld { display: block; aspect-ratio: 1; margin: -4px -4px 14px; overflow: hidden; border-radius: 2px; background: #fff; }
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kaart .beeld--wit img, .beeld--wit img { object-fit: contain; padding: 7%; }
.kaart:hover .beeld img { transform: scale(1.04); }
.kaart h3 { font: 600 15px/1.2 var(--kop); letter-spacing: .04em; color: var(--inkt); margin: 0 0 2px; min-height: 2.4em; }
.kaart h3 a { text-decoration: none; }
.kaart h3 a::after { content: ''; position: absolute; inset: 0 0 64px 0; }
.kaart .sub { font: 500 13px/1.25 var(--kop); letter-spacing: .05em; text-transform: uppercase; color: var(--zacht); min-height: 1.25em; }
.kaart .prijs { margin: 10px 0 12px; }
.prijs { font: 600 22px/1 var(--kop); color: var(--inkt); letter-spacing: .01em; }
.prijs sup { font-size: .6em; vertical-align: .55em; margin-left: 1px; }
.prijs small { font: 500 14px var(--body); color: var(--zacht); text-transform: none; }
.prijs del { font: 500 15px var(--kop); color: var(--zacht); margin-left: 8px; }
.prijs del .woocommerce-Price-currencySymbol { margin-right: 2px; }
.kaart .btn, .kaart .button { margin-top: auto; justify-content: center; font-size: 13px; padding: 12px 10px; position: relative; z-index: 1; }
.kaart .btn .ico { font-size: 16px; }
.label { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--oranje); color: var(--bos); font: 700 12px/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 2px; }
.label--op { background: var(--inkt); color: #fff; }
.kaart.uit .beeld img { opacity: .55; }

/* waarom */
.waarom { display: grid; grid-template-columns: 34% 1fr; background: var(--bos); color: #e9e4da; }
.waarom > img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.waarom-binnen { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; padding: 54px 56px; }
.waarom h2 { color: #fff; font-size: 34px; margin-bottom: 18px; }
.waarom p { margin: 0 0 24px; font-size: 16px; line-height: 1.65; max-width: 470px; }
.waarom blockquote { margin: 0 0 0 40px; padding: 18px 0 18px 48px; border-left: 1px solid var(--bos-lijn); }
.waarom blockquote p { font-family: var(--hand); color: var(--oranje); font-size: 40px; line-height: 1.05; margin: 0 0 16px; transform: rotate(-3deg); }
.waarom cite { font-style: normal; font-size: 15px; color: #f5f1ea; }

/* praktijk */
.praktijk { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr) 1.1fr; gap: 14px; align-items: stretch; }
.praktijk--zonder-social { grid-template-columns: 1.15fr repeat(4, 1fr); }
.praktijk-tekst h2 { font-size: 26px; margin-bottom: 12px; }
.praktijk-tekst p { font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.praktijk > img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.social { background: var(--bos); color: #fff; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; gap: 10px; }
.social strong { font: 600 19px/1.15 var(--kop); letter-spacing: .03em; }
.social .iconen { display: flex; gap: 14px; }
.social .iconen a { color: #fff; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bos-lijn); }
.social .iconen a:hover { background: var(--oranje); color: var(--bos); border-color: var(--oranje); }
.social .iconen .ico { font-size: 20px; }

/* tekst, tekst met foto, banner, vragen */
.tekstsectie--wit { background: #fff; }
.tekstsectie--groen { background: var(--bos); color: #e9e4da; }
.tekstsectie--groen h2, .tekstsectie--groen .tekst h3 { color: #fff; }
.tekstsectie--groen .tekst a { color: var(--oranje); }
.tekstsectie h2 { font-size: 36px; margin-bottom: 16px; }
.tekstbeeld { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.tekstbeeld--links .tekstbeeld-foto { order: -1; }
.tekstbeeld h2 { font-size: 36px; margin-bottom: 16px; }
.tekstbeeld-foto img { width: 100%; border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; }
.tekstbeeld .btn { margin-top: 10px; }
.banner { display: grid; grid-template-columns: 1fr; align-items: center; border-radius: var(--r); overflow: hidden; }
.banner--foto { grid-template-columns: 1.2fr 1fr; }
.banner > img { width: 100%; height: 100%; min-height: 260px; max-height: 380px; object-fit: cover; }
.banner-tekst { padding: 40px 44px; }
.banner--oranje { background: var(--oranje); color: var(--bos); }
.banner--oranje h2 { color: var(--bos); }
.banner--groen { background: var(--bos); color: #e9e4da; }
.banner--groen h2 { color: #fff; }
.banner h2 { font-size: 40px; margin-bottom: 10px; }
.banner p { margin: 0 0 18px; font-size: 17px; max-width: 560px; }
.banner-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.code { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed currentColor; background: rgba(255,255,255,.18); color: inherit; border-radius: var(--r); padding: 10px 14px; font: 600 14px var(--kop); letter-spacing: .08em; text-transform: uppercase; }
.code b { font-size: 20px; letter-spacing: .12em; }
.code.gekopieerd span::after { content: ' \2713'; }
.vragen h2 { font-size: 36px; margin-bottom: 18px; }
.vragen details { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); margin-bottom: 10px; }
.vragen summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--inkt); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary .ico { color: var(--oranje-knop); transition: transform .2s; font-size: 20px; }
.vragen details[open] summary .ico { transform: rotate(45deg); }
.vragen .tekst { padding: 0 18px 16px; }

/* merkbrug */
.brug { background: var(--creme-2); border-top: 1px solid var(--lijn); }
.brug .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding-top: 34px; padding-bottom: 34px; }
.brug-logo { display: block; background: var(--bos); border-radius: var(--r); padding: 16px 20px; }
.brug-logo img { height: 46px; width: auto; }
.brug h2 { font-size: 26px; margin-bottom: 6px; }
.brug p { margin: 0; font-size: 15px; max-width: 640px; }
.brug-diensten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.brug-diensten a { font: 600 13px/1 var(--kop); letter-spacing: .06em; text-transform: uppercase; color: var(--bos); text-decoration: none; border: 1px solid #c9bea9; border-radius: 99px; padding: 7px 12px; }
.brug-diensten a:hover { border-color: var(--bos); background: #fff; }

/* tip van jacco */
.tip { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; background: var(--bos); color: #e9e4da; border-radius: var(--r); padding: 20px 22px; }
.tip img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--oranje); }
.tip strong { display: block; font-family: var(--hand); color: var(--oranje); font-size: 26px; font-weight: 400; line-height: 1; margin-bottom: 6px; }
.tip p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.tip a { color: #fff; font-weight: 600; font-size: 14px; text-underline-offset: 3px; display: inline-flex; gap: 6px; align-items: center; }
.tip a:hover { color: var(--oranje); }

/* footer */
.voet { background: var(--bos); color: #d9d3c7; font-size: 14px; }
.voet-boven { display: grid; grid-template-columns: auto 1fr 300px; gap: 40px; align-items: center; padding-top: 30px; padding-bottom: 30px; }
.voet-boven--zonder-nieuwsbrief { grid-template-columns: auto 1fr; }
.voet-boven .logo img { height: 74px; }
.voet nav ul, .voet ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet nav a { color: #f5f1ea; text-decoration: none; font-size: 13.5px; }
.voet nav a:hover { color: var(--oranje); }
.nieuwsbrief p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.nieuwsbrief .fout { color: #ffb38a; }
.nieuwsbrief form { display: flex; }
.nieuwsbrief input { flex: 1; min-height: 38px; height: 38px; border: 0; border-radius: var(--r) 0 0 var(--r); padding: 0 12px; font-size: 14px; background: #f5f1ea; color: var(--inkt); min-width: 0; }
.nieuwsbrief button { width: 42px; border: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--oranje-knop); color: #fff; display: grid; place-items: center; }
.nieuwsbrief button:hover { background: var(--oranje-knop-hover); }
.voet-onder { border-top: 1px solid var(--bos-lijn); }
.voet-onder .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.voet-onder ul.menu { gap: 0; }
.voet-onder li + li::before { content: '|'; margin: 0 14px; color: #6f8178; }
.voet-onder a { color: #d9d3c7; text-decoration: none; font-size: 12.5px; }
.voet-onder a:hover { color: #fff; }
.voet-onder .iconen { display: flex; gap: 14px; }
.voet-onder .iconen a { color: #f5f1ea; }
.voet-onder .iconen .ico { font-size: 18px; }
.credit { text-align: center; font-size: 12px; padding: 0 16px 16px; margin: 0; color: #a3b1a9; }
.credit a { color: #c7d0ca; }

/* ---------- categoriepagina ---------- */
.kruimel { font-size: 13px; color: var(--zacht); padding: 18px 0 0; }
.kruimel a { color: var(--zacht); text-decoration: none; }
.kruimel a:hover { color: var(--inkt); text-decoration: underline; }
.kruimel span { margin: 0 6px; }
.kruimel b { font-weight: 600; color: var(--inkt); }
.cat-kop { background: var(--bos); color: #e9e4da; position: relative; overflow: hidden; }
.cat-kop .wrap { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: center; padding-top: 38px; padding-bottom: 38px; position: relative; }
.cat-kop h1 { color: #fff; font-size: 54px; }
.cat-kop p { margin: 12px 0 0; max-width: 560px; font-size: 16px; }
.cat-kop img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r); }
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; padding: 30px 0 70px; }
.filters h2 { font-size: 18px; letter-spacing: .08em; margin: 0 0 12px; }
.filters section { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--lijn); }
.filters ul { list-style: none; margin: 0; padding: 0; }
.filters li a { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; text-decoration: none; color: var(--tekst); }
.filters li a:hover { color: var(--oranje-knop); }
.filters li a[aria-current] { color: var(--inkt); font-weight: 700; }
.filters small { color: var(--zacht); font-weight: 400; }
.filters label { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; font-weight: 400; color: var(--tekst); margin: 0; }
.filters input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--bos); margin: 0; }
.filters label small { margin-left: auto; }
.balk { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.balk .aantal { margin: 0; font-size: 15px; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { width: auto; min-height: 40px; padding: 0 34px 0 12px; font-size: 15px; }
.filterknop { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--lijn); border-radius: 99px; padding: 6px 12px; font-size: 14px; text-decoration: none; color: var(--inkt); }
.chip:hover { border-color: var(--bos); }
.chip .ico { font-size: 14px; color: var(--zacht); }
.geen { padding: 40px; text-align: center; background: #fff; border: 1px dashed var(--lijn); border-radius: var(--r); }
.geen p { margin: 0 0 10px; }
.shop .tip { margin-top: 34px; }
.onder-tekst { margin-top: 34px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 26px 28px; }
.woocommerce-pagination { margin-top: 26px; }
.woocommerce-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; text-decoration: none; color: var(--inkt); font-weight: 600; }
.woocommerce-pagination .current { background: var(--bos); color: #fff; border-color: var(--bos); }
.woocommerce-pagination a:hover { border-color: var(--bos); }

/* ---------- productpagina ---------- */
.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; padding: 26px 0 60px; }
.galerij { min-width: 0; }
.galerij .hoofdbeeld { position: relative; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.galerij .hoofdbeeld img { width: 100%; height: 100%; object-fit: cover; }
.galerij .hoofdbeeld.beeld--wit img { object-fit: contain; padding: 4%; }
.duimen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.duimen button { width: 78px; height: 78px; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; overflow: hidden; }
.duimen button[aria-current] { border: 2px solid var(--oranje); }
.duimen img { width: 100%; height: 100%; object-fit: cover; }
.info { min-width: 0; }
.info h1 { font-size: 46px; }
.info .sub { font: 500 18px var(--kop); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); margin-top: 6px; }
.info .prijs { font-size: 38px; margin: 22px 0 6px; display: block; }
.info .prijs del { font-size: 20px; }
.btwregel { font-size: 13px; color: var(--zacht); margin: 0 0 18px; }
.voorraad { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--groen-ok); }
.voorraad::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.voorraad.nee { color: var(--rood); }
.voorraad.weinig, .voorraad.later { color: #8a5300; }
.sterren { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; text-decoration: none; color: var(--zacht); font-size: 13px; }
.sterren-balk { display: inline-block; width: 90px; height: 18px; background: linear-gradient(90deg, var(--oranje) var(--score), #d6cdbd var(--score)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cg%3E%3Cpath d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(18 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(36 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(54 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(72 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cg%3E%3Cpath d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(18 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(36 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(54 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3Cpath transform='translate(72 0)' d='M9 1l2.3 5 5.4.6-4 3.7 1.1 5.3L9 13l-4.8 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.koop { margin: 20px 0 22px; }
.koop form.cart { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.koop form.cart .single_add_to_cart_button { flex: 1; font-size: 16px; min-width: 200px; }
.koop .variations_form { display: block; }
.koop table.variations { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.koop table.variations th, .koop table.variations td { display: block; text-align: left; padding: 0 0 8px; }
.koop table.variations select { max-width: 360px; }
.koop .reset_variations { font-size: 13px; color: var(--zacht); margin-top: 6px; display: inline-block; }
.koop .woocommerce-variation-add-to-cart { display: flex; gap: 12px; flex-wrap: wrap; }
.koop .woocommerce-variation-price { margin-bottom: 10px; font: 600 22px var(--kop); }
.koop .stock { font-size: 14px; font-weight: 600; color: var(--groen-ok); }
.koop .stock.out-of-stock { color: var(--rood); }
.quantity { display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; align-items: stretch; }
.quantity .stap { width: 42px; border: 0; background: none; color: var(--inkt); display: grid; place-items: center; padding: 0; }
.quantity .stap .ico { font-size: 18px; }
.quantity .stap:hover { color: var(--oranje-knop); }
.quantity input.qty { width: 48px; min-height: 48px; border: 0; text-align: center; font: 600 16px var(--body); padding: 0; -moz-appearance: textfield; appearance: textfield; }
.quantity input.qty:focus { outline-offset: -2px; }
.quantity input::-webkit-inner-spin-button, .quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity:has(input[type=hidden]) { display: none; }
.pluspunten { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 10px; font-size: 15px; }
.pluspunten li { display: flex; gap: 10px; align-items: center; }
.pluspunten .ico { color: var(--merkgroen); font-size: 20px; }
.afhalen { display: flex; gap: 10px; align-items: flex-start; background: #fff4e8; border: 1px solid #f3cfa7; border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin: 14px 0 18px; color: var(--inkt); }
.afhalen .ico { color: var(--oranje-knop); font-size: 20px; margin-top: 1px; }
.koppelingen:empty { display: none; }
.omschrijving { border-top: 1px solid var(--lijn); padding: 34px 0 60px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; }
.omschrijving--breed { grid-template-columns: 1fr; max-width: 860px; }
.omschrijving h2 { font-size: 28px; margin-bottom: 14px; }
.ook .raster { gap: 12px; }
.spec-kop { font-size: 22px; margin: 30px 0 10px; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); }
.specs th, .specs td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.specs th { width: 40%; font-weight: 600; color: var(--inkt); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.tekst { font-size: 16px; line-height: 1.7; }
.tekst > :first-child { margin-top: 0; }
.tekst h2, .tekst h3, .tekst h4 { font-size: 20px; margin: 26px 0 8px; text-transform: none; font-family: var(--body); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.tekst table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 14px 0; }
.tekst td, .tekst th { border-bottom: 1px solid var(--lijn); padding: 8px 6px; text-align: left; }
.tekst ul, .tekst ol { padding-left: 22px; }
.tekst a { color: var(--oranje-knop); text-underline-offset: 3px; }
.tekst img { height: auto; border-radius: var(--r); }
.tekst iframe { max-width: 100%; }
[data-leesmeer].dicht { max-height: 340px; overflow: hidden; position: relative; }
[data-leesmeer].dicht::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(244,239,230,0), var(--creme)); }
.leesmeer-knop { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--oranje-knop); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.beoordelingen { border-top: 1px solid var(--lijn); padding: 34px 0 60px; max-width: 860px; }
.beoordelingen h2 { font-size: 28px; margin-bottom: 16px; }
.beoordelingen ol.commentlist { list-style: none; padding: 0; margin: 0 0 24px; }
.beoordelingen .comment_container { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px; }
.beoordelingen .avatar { display: none; }
.beoordelingen .star-rating { position: relative; display: inline-block; width: 5.4em; height: 1.2em; font-size: 14px; overflow: hidden; color: var(--oranje); }
.beoordelingen .star-rating::before { content: '\2606\2606\2606\2606\2606'; position: absolute; letter-spacing: .1em; }
.beoordelingen .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; padding-top: 1.5em; }
.beoordelingen .star-rating span::before { content: '\2605\2605\2605\2605\2605'; position: absolute; top: 0; left: 0; letter-spacing: .1em; }
.beoordelingen p.stars a { color: var(--oranje); text-decoration: none; margin-right: 4px; }
.beoordelingen .meta { font-size: 13px; color: var(--zacht); }
.beoordelingen #respond { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px; }
.beoordelingen .comment-reply-title { font: 700 20px var(--kop); text-transform: uppercase; color: var(--inkt); }

/* ---------- winkelmand-lade ---------- */
.lade-scherm { position: fixed; inset: 0; background: rgba(8, 20, 15, .55); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 80; }
.lade { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--creme); z-index: 90; transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; visibility: hidden; }
.lade-open .lade-scherm, .menu-open .lade-scherm { opacity: 1; pointer-events: auto; }
.lade-open .lade { transform: none; visibility: visible; }
.lade > header { background: var(--bos); color: #fff; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; }
.lade > header h2 { color: #fff; font-size: 24px; }
.lade > header button { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 4px; display: grid; }
.lade-inhoud { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.drempel { padding: 14px 20px; background: var(--creme-2); font-size: 14px; }
.drempel .meter { height: 6px; background: #d5ccbb; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.drempel .meter i { display: block; height: 100%; background: var(--merkgroen); border-radius: 3px; transition: width .3s; }
.lade-items { flex: 1; overflow: auto; padding: 8px 20px; }
.lade-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); align-items: center; }
.lade-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; background: #fff; }
.lade-item h3 { font: 600 15px/1.2 var(--kop); letter-spacing: .03em; margin: 0; }
.lade-item h3 a { text-decoration: none; }
.lade-item small { display: block; color: var(--zacht); font-size: 13px; }
.lade-item .afhaal-label { color: #8a5300; }
.lade-item .mini { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.lade-item .mini button { width: 28px; height: 28px; border: 1px solid var(--lijn); background: #fff; border-radius: 3px; line-height: 1; display: grid; place-items: center; padding: 0; color: var(--inkt); }
.lade-item .mini button:disabled { opacity: .4; cursor: not-allowed; }
.lade-item .mini span { min-width: 22px; text-align: center; font-weight: 600; font-size: 14px; }
.lade-item .mini .weg { width: auto; border: 0; background: none; color: var(--zacht); font-size: 12px; text-decoration: underline; margin-left: 8px; }
.lade-item strong { font-size: 15px; white-space: nowrap; }
.lade-leeg { text-align: center; padding: 50px 20px; }
.lade-inhoud > footer { padding: 18px 20px 22px; border-top: 1px solid var(--lijn); background: #fff; }
.lade .som { display: flex; justify-content: space-between; font-weight: 600; font-size: 17px; margin-bottom: 4px; color: var(--inkt); }
.lade .som--korting { font-size: 15px; color: var(--groen-ok); }
.lade-inhoud > footer small { display: block; color: var(--zacht); margin-bottom: 14px; }
.lade-inhoud > footer .btn { width: 100%; }
.lade-naar-mand { margin-top: 12px; justify-content: center; width: 100%; font-weight: 500; }
.lade.bezig .lade-inhoud { opacity: .55; pointer-events: none; }

.melding { visibility: hidden; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--inkt); color: #fff; padding: 14px 18px; border-radius: 6px; font-size: 15px; z-index: 100; max-width: min(520px, calc(100% - 32px)); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.melding.toon { visibility: visible; transform: translate(-50%, 0); }

/* ---------- pagina's ---------- */
.pagina-kop { background: var(--bos); color: #e9e4da; padding: 44px 0 40px; }
.pagina-kop h1 { color: #fff; font-size: 52px; }
.pagina-kop .intro { margin: 12px 0 0; font-size: 17px; max-width: 640px; }
.pagina-tekst { padding: 40px 24px 80px; }
.pagina-tekst h2 { font-family: var(--kop); text-transform: uppercase; font-size: 28px; margin: 36px 0 10px; letter-spacing: .01em; }
.niet-gevonden { padding: 70px 0 90px; }
.niet-gevonden h1 { font-size: clamp(38px, 5vw, 60px); }
.niet-gevonden .stift { font-size: .7em; }
.niet-gevonden p { font-size: 17px; margin: 22px 0; }
.niet-gevonden .zoek { max-width: 480px; margin-bottom: 22px; }
.niet-gevonden .zoek input { padding-right: 44px; }
.berichtenlijst { padding-left: 18px; }

/* ---------- WooCommerce: meldingen ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner {
  list-style: none; background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--merkgroen); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; color: var(--inkt); font-size: 15px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.woocommerce-error { border-left-color: var(--rood); background: #fbf1ec; display: block; }
.woocommerce-error li { margin: 2px 0; }
.woocommerce-info { border-left-color: var(--oranje); }
.woocommerce-message .button, .woocommerce-info .button { padding: 10px 14px; font-size: 13px; order: 2; }
.woocommerce-store-notice, p.demo_store { position: relative; background: var(--oranje); color: var(--bos); text-align: center; padding: 10px; margin: 0; font-weight: 600; }

/* ---------- winkelmand, afrekenen, account ---------- */
.winkelpagina { padding: 30px 24px 80px; }
.winkelpagina-titel { font-size: 46px; margin: 10px 0 24px; }
.woocommerce-cart .winkelpagina > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
.woocommerce-cart .winkelpagina > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .winkelpagina > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .winkelpagina > .woocommerce > .cart-empty,
.woocommerce-cart .winkelpagina > .woocommerce > .return-to-shop { grid-column: 1 / -1; }
.woocommerce-cart-form .drempel { border-radius: var(--r); margin-bottom: 16px; }
.woocommerce-cart-form .afhalen { margin-top: 0; }
table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); font-size: 15px; }
table.shop_table th, table.shop_table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
table.shop_table thead th { font: 600 13px var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
table.cart .product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; }
table.cart .product-name a { font-weight: 600; text-decoration: none; color: var(--inkt); }
table.cart .product-name a:hover { color: var(--oranje-knop); }
.naam-sub { display: block; font-weight: 400; color: var(--zacht); font-size: 13px; }
table.cart a.remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--zacht); text-decoration: none; font-size: 22px; line-height: 1; }
table.cart a.remove:hover { background: #fbf1ec; color: var(--rood); }
table.cart td.actions { background: var(--creme); }
table.cart .coupon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
table.cart .coupon input { width: 200px; min-height: 44px; }
table.cart .coupon .button { padding: 12px 16px; font-size: 13px; background: var(--bos); }
table.cart button[name=update_cart] { float: right; padding: 12px 16px; font-size: 13px; background: transparent; color: var(--zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
table.cart button[name=update_cart]:disabled { display: none; }
.verder { margin-top: 16px; }
.cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 22px; position: sticky; top: 140px; }
.cart_totals h2 { font-size: 24px; margin-bottom: 12px; }
.cart_totals table.shop_table { border: 0; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 10px 0; }
.cart_totals .order-total { font-size: 18px; }
.cart_totals .order-total th, .cart_totals .order-total td { font-weight: 700; color: var(--inkt); }
.cart_totals .wc-proceed-to-checkout .checkout-button { width: 100%; font-size: 16px; padding: 17px 20px; margin-top: 10px; }
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-shipping-methods li { margin: 0 0 6px; }
.woocommerce-shipping-methods label { display: inline; font-weight: 400; }
.woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13px; color: var(--zacht); }
.shipping-calculator-form { margin-top: 10px; }
/* verzending in de totalen: kop boven de keuzes, keuzes als nette lijst */
.cart_totals table.shop_table, .cart_totals table.shop_table tbody { display: block; width: 100%; }
.cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--lijn); }
.cart_totals table.shop_table tr:last-child { border-bottom: 0; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { border: 0; }
.cart_totals table.shop_table tr.woocommerce-shipping-totals { display: block; }
.cart_totals table.shop_table tr.woocommerce-shipping-totals th, .cart_totals table.shop_table tr.woocommerce-shipping-totals td { display: block; width: 100%; text-align: left; }
.cart_totals tr.woocommerce-shipping-totals th { padding-bottom: 4px; }
.cart_totals tr.woocommerce-shipping-totals td { padding-top: 0; }
.cart_totals .cart-subtotal th, .cart_totals .order-total th { text-align: left; }
.cart_totals .cart-subtotal td, .cart_totals .order-total td { text-align: right; }
.cart_totals .order-total td small { display: block; font-weight: 400; font-size: 12px; color: var(--zacht); }
#shipping_method { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
#shipping_method li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--creme); font-size: 14px; color: var(--inkt); }
#shipping_method li input { margin: 0; accent-color: var(--bos); width: 16px; height: 16px; flex: none; }
#shipping_method li label { margin: 0; font-weight: 500; font-size: 14px; display: inline; }
.shipping-calculator-button { color: var(--oranje-knop); font-weight: 600; }
.shipping-calculator-form p { margin: 0 0 10px; }
.cart-empty, .wc-empty-cart-message { font-size: 18px; }
.return-to-shop .button { margin-top: 10px; }
.includes_tax, .tax_label { font-size: 13px; color: var(--zacht); font-weight: 400; }

/* afrekenen */
.rustig .winkelpagina { padding-top: 34px; }
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 40px; align-items: start; }
form.checkout > .woocommerce-NoticeGroup, form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
form.checkout #customer_details { grid-column: 1; grid-row: 2 / span 3; }
form.checkout #order_review_heading { grid-column: 2; grid-row: 2; font-size: 24px; margin: 0; padding: 22px 22px 0; background: #fff; border: 1px solid var(--lijn); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
form.checkout #order_review { grid-column: 2; grid-row: 3; background: #fff; border: 1px solid var(--lijn); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 10px 22px 22px; position: sticky; top: 120px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 24px; margin: 0 0 14px; }
#ship-to-different-address { font: 600 16px var(--body); text-transform: none; margin-top: 18px; }
#ship-to-different-address label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce form .form-row-wide, .woocommerce form .form-row:not(.form-row-first):not(.form-row-last) { clear: both; }
.woocommerce-billing-fields__field-wrapper::after, .woocommerce-shipping-fields__field-wrapper::after, .woocommerce-address-fields__field-wrapper::after { content: ''; display: table; clear: both; }
.woocommerce form .form-row label { font-size: 14px; }
.woocommerce form .form-row .required { color: var(--rood); text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { font-weight: 400; color: var(--zacht); }
.woocommerce form .form-row.woocommerce-invalid input { border-color: var(--rood); }
.woocommerce-input-wrapper { display: block; }
.woocommerce-checkout-review-order-table { border: 0 !important; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0 !important; }
.woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 18px; font-weight: 700; color: var(--inkt); }
.afhalen-rij td { padding: 6px 0 !important; }
#payment { margin-top: 14px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; }
#payment ul.payment_methods > li { border: 1px solid var(--lijn); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
#payment ul.payment_methods > li label { display: inline; font-size: 15px; }
#payment ul.payment_methods > li img { display: inline-block; max-height: 24px; width: auto; vertical-align: middle; margin-left: 6px; }
#payment .payment_box { font-size: 14px; color: var(--zacht); padding: 8px 0 0; }
#payment .payment_box p { margin: 0; }
.woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--zacht); margin-bottom: 14px; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--oranje-knop); }
.woocommerce-form__label-for-checkbox { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500; }
.woocommerce-form__label-for-checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--bos); flex: none; }
#place_order { width: 100%; font-size: 17px; padding: 18px; }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { display: block; }
form.checkout_coupon, form.woocommerce-form-login { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px; margin-bottom: 18px; }
form.checkout_coupon p { margin: 0 0 10px; }
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { height: 46px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

/* bedankt + account */
.woocommerce-order { max-width: 900px; }
.woocommerce-thankyou-order-received { font: 700 28px var(--kop); text-transform: uppercase; color: var(--inkt); }
.woocommerce-order-overview { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.woocommerce-order-overview li { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 12px 14px; font-size: 13px; color: var(--zacht); }
.woocommerce-order-overview li strong { display: block; font-size: 16px; color: var(--inkt); }
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 28px; }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: 24px; margin-bottom: 12px; }
.woocommerce-customer-details address { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px; font-style: normal; }
.woocommerce-account .winkelpagina > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
.woocommerce-account:not(.logged-in) .winkelpagina > .woocommerce { display: block; max-width: 980px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; text-decoration: none; color: var(--inkt); border-bottom: 1px solid var(--lijn); }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--bos); color: #fff; }
.woocommerce-MyAccount-content > p:first-child { font-size: 17px; }
.woocommerce-orders-table .button, .woocommerce-MyAccount-content .button { padding: 9px 12px; font-size: 12px; margin: 2px; }
.u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.u-columns .col-1, .u-columns .col-2 { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 24px; }
.u-columns h2 { font-size: 26px; margin-bottom: 14px; }
.woocommerce-form-login .button, .woocommerce-form-register .button { margin-top: 8px; }
.woocommerce-LostPassword { font-size: 14px; }
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-Address { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.woocommerce-Address-title h2 { font-size: 22px; }
.woocommerce-Address address { font-style: normal; }
.woocommerce-password-strength { font-size: 13px; margin-top: 6px; }

/* ---------- mobiel ---------- */
@media (max-width: 1180px) {
  .hoofdmenu ul { gap: 18px; }
  .tegels, .tegels--5, .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .praktijk { grid-template-columns: repeat(4, 1fr); }
  .praktijk-tekst { grid-column: 1 / -1; }
  .social { grid-column: span 4; flex-direction: row; justify-content: space-between; text-align: left; }
  .waarom-binnen { grid-template-columns: 1fr; padding: 44px 40px; }
  .waarom blockquote { margin: 26px 0 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--bos-lijn); }
  .raster--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce-cart .winkelpagina > .woocommerce { grid-template-columns: minmax(0, 1fr) 330px; }
  form.checkout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 980px) {
  html { scroll-padding-top: 90px; }
  .topbalk .tb-2, .topbalk .tb-3 { display: none; }
  .kop .wrap { grid-template-columns: auto auto 1fr; gap: 14px; padding-top: 8px; padding-bottom: 8px; }
  .logo img { height: 58px; }
  .kop-rechts { flex-direction: row; align-items: center; justify-content: flex-end; }
  .kop .zoek input { width: 200px; }
  .menuknop { display: grid; background: none; border: 0; color: #fff; padding: 6px; }
  .menuknop .ico { font-size: 28px; }
  .hoofdmenu { position: fixed; top: 0; left: 0; bottom: 0; width: min(330px, 86%); background: var(--bos); z-index: 95; transform: translateX(-100%); transition: transform .3s; padding: 0 24px 24px; overflow: auto; visibility: hidden; }
  .menu-open .hoofdmenu { transform: none; visibility: visible; }
  .hoofdmenu-kop { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; color: var(--oranje); font: 600 14px var(--kop); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--bos-lijn); }
  .menu-sluit { background: none; border: 0; color: #fff; font-size: 28px; display: grid; padding: 4px; }
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu a { font-size: 20px; padding: 14px 0; border-bottom: 1px solid var(--bos-lijn); }
  .hoofdmenu .current-menu-item > a, .hoofdmenu a[aria-current] { border-bottom-color: var(--bos-lijn); }
  .hoofdmenu .sub-menu { display: flex; position: static; box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
  .hoofdmenu .sub-menu a { font-size: 17px; }
  .hoofdmenu-extra { display: block; margin-top: 22px; }
  .hoofdmenu-extra a { color: #f5f1ea; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
  .usps ul { grid-template-columns: repeat(2, 1fr); }
  .usps li:nth-child(3) { border-left: 0; }
  .usps li:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .waarom { grid-template-columns: 1fr; }
  .waarom > img { height: 300px; min-height: 0; }
  .brug .wrap { grid-template-columns: 1fr; gap: 18px; }
  .brug-logo { justify-self: start; }
  .voet-boven, .voet-boven--zonder-nieuwsbrief { grid-template-columns: 1fr; gap: 24px; }
  .cat-kop .wrap { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 30px; }
  .cat-kop img { display: none; }
  .cat-kop h1 { font-size: 44px; }
  .shop { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .filters { display: none; }
  .filters.open { display: block; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px; margin-bottom: 20px; }
  .filterknop { display: inline-flex; }
  .product-detail, .omschrijving { grid-template-columns: 1fr; gap: 28px; }
  .tekstbeeld { grid-template-columns: 1fr; gap: 28px; }
  .tekstbeeld--links .tekstbeeld-foto { order: 0; }
  .banner--foto { grid-template-columns: 1fr; }
  .banner > img { min-height: 200px; max-height: 260px; order: -1; }
  .woocommerce-cart .winkelpagina > .woocommerce { grid-template-columns: 1fr; }
  .cart-collaterals .cart_totals { position: static; }
  form.checkout { grid-template-columns: 1fr; }
  form.checkout #customer_details, form.checkout #order_review_heading, form.checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
  form.checkout #order_review_heading { margin-top: 24px; }
  .woocommerce-account .winkelpagina > .woocommerce { grid-template-columns: 1fr; }
  .kop--rustig .veilig { display: none; }
  .kop--rustig .wrap { grid-template-columns: auto 1fr; }
  .kop--rustig .terug { justify-self: end; }
}
@media (min-width: 981px) { .menu-sluit { display: none; } }
@media (max-width: 782px) { .admin-bar .kop { top: 46px; } }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .topbalk .wrap { justify-content: center; }
  .topbalk .tb-1 { display: none; }
  .kop .zoek { display: none; }
  .kop-acties { gap: 10px; }
  .logo img { height: 52px; }
  .hero { min-height: 560px; background-image: var(--hero-mobiel); align-items: flex-end; }
  .hero::before { background: linear-gradient(180deg, rgba(10, 26, 19, .1) 0%, rgba(10, 26, 19, .55) 40%, rgba(10, 26, 19, .94) 75%); }
  .hero .wrap { padding-top: 200px; padding-bottom: 40px; }
  .hero p { font-size: 16px; }
  .usps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .usps li { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 10px; font-size: 13px; line-height: 1.3; border-left: 0 !important; border-top: 0 !important; }
  .usps li:nth-child(even) { border-left: 1px solid var(--lijn) !important; }
  .usps li:nth-child(n+3) { border-top: 1px solid var(--lijn) !important; }
  .usps .ico { font-size: 26px; }
  .sectie { padding: 44px 0; }
  .sectie-kop h2 { font-size: 32px; }
  .sectie-kop .rechts { margin-left: 0; }
  .notitie { margin: 0 !important; font-size: 21px; }
  .tegels, .tegels--3, .tegels--4, .tegels--5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tegel span { font-size: 19px; left: 12px; bottom: 10px; }
  .raster, .raster--4, .raster--3, .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kaart { padding: 10px 10px 12px; }
  .kaart h3 { font-size: 14px; }
  .kaart .btn, .kaart .button { font-size: 13px; letter-spacing: .05em; padding: 0 8px; min-height: 44px; gap: .45em; white-space: nowrap; overflow: hidden; }
  .prijs { font-size: 20px; }
  .praktijk { grid-template-columns: repeat(2, 1fr); }
  .social { grid-column: span 2; flex-direction: column; text-align: center; }
  .waarom-binnen { padding: 34px 18px; }
  .waarom blockquote p { font-size: 32px; }
  .voet-onder .wrap { justify-content: center; text-align: center; }
  .voet-onder ul.menu { justify-content: center; row-gap: 6px; }
  .cat-kop h1 { font-size: 38px; }
  .info h1 { font-size: 34px; }
  .info .prijs { font-size: 32px; }
  .koop form.cart .single_add_to_cart_button { min-width: 0; }
  .tip { grid-template-columns: 56px 1fr; padding: 16px; }
  .tip img { width: 56px; height: 56px; }
  .zoek-tips { width: auto; left: 0; right: 0; }
  .velden-2 { grid-template-columns: 1fr; }
  .banner-tekst { padding: 28px 22px; }
  .banner h2, .tekstsectie h2, .tekstbeeld h2, .vragen h2 { font-size: 30px; }
  .pagina-kop h1, .winkelpagina-titel { font-size: 36px; }
  .winkelpagina { padding-left: 16px; padding-right: 16px; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
  table.shop_table_responsive thead { display: none; }
  table.shop_table_responsive tr { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 12px; padding: 14px 12px; border-bottom: 1px solid var(--lijn); position: relative; }
  table.shop_table_responsive td { border: 0; padding: 0; }
  table.cart .product-remove { position: absolute; right: 6px; top: 8px; }
  table.cart .product-thumbnail { grid-row: 1 / span 3; }
  table.cart .product-thumbnail img { width: 64px; height: 64px; }
  table.cart .product-name { grid-column: 2 / 4; padding-right: 30px; }
  table.cart .product-price { display: none; }
  table.cart .product-quantity { grid-column: 2; }
  table.cart .product-subtotal { grid-column: 3; align-self: center; font-weight: 600; }
  table.cart tr:last-child { display: block; }
  table.cart td.actions { display: block; padding: 12px; }
  table.cart button[name=update_cart] { float: none; margin-top: 10px; }
  table.cart .coupon input { flex: 1; width: auto; }
  table.shop_table_responsive.woocommerce-orders-table tr { display: block; padding: 12px 14px; }
  table.shop_table_responsive.woocommerce-orders-table td, table.shop_table_responsive.woocommerce-orders-table th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .woocommerce-orders-table td::before, .woocommerce-orders-table th::before { content: attr(data-title); font-weight: 600; color: var(--inkt); text-align: left; }
  table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { flex-wrap: wrap; justify-content: flex-end; }
  .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { margin-right: auto; }
  .u-columns.col2-set, .woocommerce-Addresses { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* mobiel zoeken */
.zoekknop { display: none; }
@media (max-width: 640px) {
  .zoekknop { display: grid; }
  .zoek-open .kop .zoek { display: flex; position: absolute; left: 0; right: 0; top: 100%; background: var(--bos); padding: 10px 16px 14px; border-top: 1px solid var(--bos-lijn); }
  .zoek-open .kop .zoek input { width: 100%; }
  .zoek-open .kop .zoek button { right: 20px; top: 32px; }
  .zoek-open .zoek-tips { left: 16px; right: 16px; width: auto; top: calc(100% - 6px); }
}

/* print */
@media print {
  .topbalk, .kop, .brug, .voet, .lade, .lade-scherm, .filters, .menuknop { display: none !important; }
  body { background: #fff; }
}

/* beoordeling geven: sterren en knop */
.beoordelingen p.stars { margin: 4px 0 14px; }
.beoordelingen p.stars span { display: inline-flex; gap: 2px; }
.beoordelingen p.stars a { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; text-indent: 200%; white-space: nowrap; margin: 0; }
.beoordelingen p.stars a::before { content: '\2606'; position: absolute; left: 0; top: 0; width: 100%; text-indent: 0; font-size: 28px; line-height: 30px; color: var(--oranje); }
.beoordelingen p.stars:hover a::before, .beoordelingen p.stars.selected a::before { content: '\2605'; }
.beoordelingen p.stars:hover a:hover ~ a::before, .beoordelingen p.stars.selected a.active ~ a::before { content: '\2606'; }
.beoordelingen p.stars.selected:hover a::before { content: '\2605'; }
.beoordelingen p.stars.selected:hover a:hover ~ a::before { content: '\2606'; }
.beoordelingen #respond input[type=submit] { display: inline-flex; border: 0; border-radius: var(--r); background: var(--oranje-knop); color: #fff; font: 600 15px/1.1 var(--kop); letter-spacing: .08em; text-transform: uppercase; padding: 15px 22px; cursor: pointer; }
.beoordelingen #respond input[type=submit]:hover { background: var(--oranje-knop-hover); }
.beoordelingen .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.beoordelingen .comment-form-cookies-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bos); flex: none; }
.beoordelingen .comment-form-cookies-consent label { font-weight: 400; }
.beoordelingen #respond p { margin: 0 0 14px; }

/* ---------- diensten (Over-pagina) ---------- */
.dienst-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.dienst-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 140px; }
.dienst-kaart:target { outline: 3px solid var(--oranje); outline-offset: 2px; }
.dienst-kaart h3 { font-size: 24px; }
.dienst-kaart p { margin: 0; flex: 1; }
.dienst-kaart .btn { align-self: flex-start; margin-top: 6px; }
.dienst-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--oranje); color: var(--bos); display: grid; place-items: center; }
.dienst-ico .ico { font-size: 22px; fill: currentColor; stroke: none; }
.diensten { scroll-margin-top: 130px; }
@media (max-width: 960px) { .dienst-kaarten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dienst-kaarten { grid-template-columns: 1fr; } }

/* ---------- tekst voor Google (inklapbaar) ---------- */
.seo-tekst { margin: 40px 0 10px; padding-top: 28px; border-top: 1px solid var(--lijn); color: var(--tekst); }
.seo-tekst h2 { font-size: 26px; margin: 0 0 12px; }
.seo-meer summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--oranje-knop); font-weight: 600; margin: 4px 0 12px; }
.seo-meer summary::-webkit-details-marker { display: none; }
.seo-meer summary .ico { transition: transform .2s; }
.seo-meer[open] summary .ico { transform: rotate(45deg); }
.seo-meer .open, .seo-meer[open] .dicht { display: none; }
.seo-meer[open] .open { display: inline; }
.sectie--seo .seo-tekst { margin-top: 0; border-top: 0; }

/* ---------- cookiebanner van Complianz in de huisstijl ----------
   Alleen selectors van Complianz: zonder die plugin doet dit niets.
   Accepteren, Weigeren en Voorkeuren zijn even groot en even goed leesbaar. */
.cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--creme);
  --cmplz_banner_border_color: var(--lijn);
  --cmplz_text_color: var(--inkt);
  --cmplz_hyperlink_color: var(--merkgroen);
  --cmplz_banner_border_radius: 8px;
  --cmplz_button_border_radius: var(--r);
  --cmplz_button_accept_background_color: var(--oranje-knop);
  --cmplz_button_accept_border_color: var(--oranje-knop);
  --cmplz_button_accept_text_color: #fff;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--bos);
  --cmplz_button_deny_text_color: var(--bos);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--bos);
  --cmplz_button_settings_text_color: var(--bos);
  --cmplz_slider_active_color: var(--merkgroen);
  --cmplz_category_header_always_active_color: var(--groen-ok);
}
.cmplz-cookiebanner.cmplz-cookiebanner { background: var(--creme) !important; color: var(--inkt) !important; border: 1px solid var(--lijn) !important; border-radius: 8px !important; box-shadow: 0 18px 50px rgba(16, 41, 31, .28) !important; font-family: var(--body) !important; }
.cmplz-cookiebanner .cmplz-title { font: 700 22px/1.1 var(--kop) !important; text-transform: uppercase; letter-spacing: .02em; color: var(--inkt) !important; }
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { font: 400 15px/1.55 var(--body) !important; color: var(--tekst) !important; }
.cmplz-cookiebanner .cmplz-close { color: var(--inkt) !important; }
.cmplz-cookiebanner .cmplz-buttons { gap: 10px !important; }
.cmplz-cookiebanner .cmplz-btn { flex: 1 1 0 !important; min-height: 46px !important; height: auto !important; padding: 12px 14px !important; border-width: 2px !important; border-style: solid !important; border-radius: var(--r) !important; font: 700 15px/1.1 var(--kop) !important; letter-spacing: .08em !important; text-transform: uppercase !important; white-space: normal !important; cursor: pointer; transition: background .15s, color .15s; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--oranje-knop) !important; border-color: var(--oranje-knop) !important; color: #fff !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: var(--oranje-knop-hover) !important; border-color: var(--oranje-knop-hover) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: #fff !important; border-color: var(--bos) !important; color: var(--bos) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { background: var(--bos) !important; color: #fff !important; }
.cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 3px solid var(--oranje) !important; outline-offset: 2px !important; }
.cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner .cmplz-link { color: var(--merkgroen) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.cmplz-cookiebanner .cmplz-categories .cmplz-category { background: #fff !important; border-radius: var(--r) !important; }
.cmplz-cookiebanner .cmplz-category-title { color: var(--inkt) !important; font-weight: 700 !important; }
.cmplz-manage-consent.cmplz-manage-consent { background: var(--bos) !important; color: #f5f1ea !important; border: 0 !important; border-radius: var(--r) var(--r) 0 0 !important; font: 600 13px/1 var(--body) !important; padding: 10px 14px !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, .15) !important; }
.cmplz-manage-consent.cmplz-manage-consent:hover { background: var(--bos-2) !important; }
@media (max-width: 600px) {
  .cmplz-cookiebanner.cmplz-cookiebanner { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 16px) !important; overflow-y: auto !important; }
  .cmplz-cookiebanner .cmplz-buttons { flex-direction: column !important; }
  .cmplz-cookiebanner .cmplz-btn { width: 100% !important; flex: none !important; }
}

/* ---------- Mijn account: bestelstatus zonder gele markering ---------- */
.woocommerce-MyAccount-content mark, .woocommerce-order-details mark, .woocommerce mark { background: none; color: var(--inkt); font-weight: 700; padding: 0; }
.woocommerce-orders-table .button, .woocommerce-table--order-details .button, .order-actions-button { margin: 2px 6px 2px 0; }
.woocommerce-orders-table .button.invoice, .woocommerce-orders-table .button[class*="invoice"], .woocommerce-table--order-details .button[class*="invoice"], a.button.wpo_wcpdf, .wpo_wcpdf-invoice-button { background: var(--bos); color: #fff; }

/* korte knoptekst op smalle telefoons ("In mand") */
.knop-kort { display: none; }
@media (max-width: 440px) {
  .kaart .knop-lang { display: none; }
  .kaart .knop-kort { display: inline; }
}

/* ---------- telefoon: tikdoelen >= 44px, geen iOS-zoom, niets tegen de rand (0.2.1) ---------- */
html, body { hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }
@media (max-width: 980px) {
  .icoknop, .menuknop, .zoekknop { min-width: 44px; min-height: 44px; }
  .kop-acties { gap: 2px; }
  .zoek input, .kop .zoek input, .zoek-open .kop .zoek input { min-height: 44px; height: 44px; font-size: 16px; }
  .zoek button { width: 44px; height: 44px; right: 0; }
  .zoek-open .kop .zoek button { right: 16px; top: 34px; }
  .zoek-tips a { min-height: 44px; }
  .zoek-tips a.zt-chip { min-height: 44px; display: inline-flex; align-items: center; }
  input, select, textarea, .woocommerce-ordering select, select.orderby, #review_form input, #review_form textarea, #review_form #submit { font-size: 16px; }
  select.orderby { min-height: 44px; }
  .stift { margin-left: 3px; }
  .notitie { margin-left: 4px !important; }
}
@media (max-width: 980px) {
  .btn, .button, button.button, a.button, input.button, .btn--klein, .woocommerce-Button { min-height: 44px; }
  .btn--klein { padding-top: 0; padding-bottom: 0; }
  .filterknop { min-height: 44px; }
  .filters a { display: flex; align-items: center; min-height: 44px; }
  .chip { min-height: 44px; }
  .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .leesmeer-knop { min-height: 44px; padding: 0 2px; }
  .seo-meer summary, .vragen summary { min-height: 44px; }
  .menu-sluit { min-width: 44px; min-height: 44px; place-items: center; }
  .show-password-input { min-width: 44px; min-height: 44px; }
  .voet nav ul, .voet ul.menu { gap: 0 18px; }
  .voet nav a, .voet-onder a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .voet-onder li + li::before { margin: 0 10px; }
  .voet-onder .iconen a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
}
/* lade: grote tikdoelen en ruimte voor de thuisbalk (iPhone) */
.lade > header { padding-top: max(18px, env(safe-area-inset-top)); }
.lade > header button { min-width: 44px; min-height: 44px; place-items: center; }
.lade-item .mini { gap: 6px; }
.lade-item .mini button { width: 44px; height: 44px; }
.lade-item .mini .weg { min-height: 44px; padding: 0 6px; margin-left: 2px; }
.lade-inhoud > footer { padding-bottom: max(22px, calc(14px + env(safe-area-inset-bottom))); }
.cmplz-cookiebanner.cmplz-cookiebanner { margin-bottom: env(safe-area-inset-bottom); }

/* ---------- vaste kop (0.2.1): schermbreed, vast bovenaan, compact op de telefoon ---------- */
html { background: var(--bos); }
body { background: var(--creme); }
.kop { left: 0; right: 0; width: 100%; border-radius: 0; margin: 0; box-shadow: none; transition: transform .25s ease, box-shadow .2s; }
.kop.kop-weg { transform: translateY(-100%); }
.kop.kop-vast { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) { .kop { transition: none; } }
@media (max-width: 980px) {
  .kop { top: 0; padding-top: env(safe-area-inset-top); }
  .kop .wrap { padding-top: 6px; padding-bottom: 6px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); min-height: 58px; }
  .kop .logo img { height: 46px; }
  .menuknop { margin-left: -10px; }
  .kop-acties { margin-right: -10px; }
}
@media (max-width: 600px) { .admin-bar .kop { top: 0; } }
/* De sticky kop is een eigen stapellaag (z 40): het mobiele menu en de zoekbalk zitten daarin.
   Zolang die open zijn moet de kop boven het donkere scherm (z 80) liggen, anders vangt dat elke tik. */
.menu-open .kop, .zoek-open .kop { z-index: 85; transform: none; }
/* Ingelogd ligt de WP-adminbalk (46px op mobiel) over de bovenkant van het menu en de lade. */
@media (max-width: 782px) { .admin-bar .hoofdmenu, .admin-bar .lade { top: 46px; } }

/* ---------- footer (0.2.1): nette binnenmarge, geen strepen aan het begin van een regel ---------- */
.voet-onder li + li::before { content: none; }
.voet-onder ul.menu { gap: 0 24px; }
.voet .wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
@media (max-width: 980px) {
  .voet .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .voet-boven, .voet-boven--zonder-nieuwsbrief { justify-items: center; text-align: center; padding-top: 36px; padding-bottom: 20px; gap: 16px; }
  .voet-boven .logo { display: block; }
  .voet-boven .logo img { height: 64px; }
  .voet nav ul { justify-content: center; }
  .voet-onder .wrap { flex-direction: column; gap: 4px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .voet-onder ul.menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; max-width: 420px; }
  .voet-onder ul.menu li { text-align: center; }
  .voet-onder ul.menu a { justify-content: center; width: 100%; }
}

/* =====================================================================
   LAGEN (z-index), van onder naar boven. Houd je hieraan bij nieuwe lagen.
     0-2     pagina: kaarten, labels, tegels
     40      .kop (sticky). Let op: eigen stapelcontext, dus alles binnen de
             kop (zoek-tips 60, submenu 50, mobiel menu 95) telt als 40,
             behalve als de kop zelf omhoog gaat:
     80      .lade-scherm (donker scherm onder menu en lade)
     85      .kop als het menu of zoeken open is (boven het donkere scherm,
             zodat menu en zoekpaneel bovenop liggen en aan te tikken zijn)
     90      .lade (winkelmand)
     100     .melding (korte melding onderin)
     200     .sr-focus (naar de inhoud-link bij focus)
     99999   cookiebanner van Complianz (eigen waarde van de plugin)
     99999   WordPress-adminbalk (top 32/46px; menu, lade en kop schuiven eronder)
   De kop-weg-transform staat nooit aan als het menu, zoeken of de lade open
   is (anders zou het vaste menu met de kop mee schuiven).
   ===================================================================== */
/* Pagina scrolt niet mee onder een open menu of lade (ook iOS). */
html:has(body.menu-open), html:has(body.lade-open), body.menu-open, body.lade-open { overflow: hidden; }
.hoofdmenu, .lade-items { overscroll-behavior: contain; }
.lade-open .kop { transform: none; }
/* Submenu op een aanraakscherm: geopend met een tik. */
.hoofdmenu li.sub-open > .sub-menu { display: flex; }

/* Adminbalk (ingelogd): menu en lade beginnen eronder, ook op de computer. */
.admin-bar .lade, .admin-bar .hoofdmenu { top: 32px; }
@media (max-width: 980px) { .admin-bar .hoofdmenu { top: 32px; } }
@media (max-width: 782px) { .admin-bar .lade, .admin-bar .hoofdmenu { top: 46px; } }

/* ---------- tikvlakken afrekenen en cookiebanner (0.2.6): hele optie klikbaar, minimaal 44px ---------- */
#shipping_method li { padding: 0; }
#shipping_method li label { display: flex; align-items: center; flex: 1; min-height: 44px; padding: 6px 12px 6px 0; margin: 0; cursor: pointer; }
#shipping_method li input { margin-left: 12px !important; }
#payment ul.payment_methods > li { padding: 0; position: relative; }
#payment ul.payment_methods > li > input { position: absolute; left: 14px; top: 22px; transform: translateY(-50%); margin: 0; }
#payment ul.payment_methods > li > label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px 8px 40px; margin: 0; cursor: pointer; }
#payment ul.payment_methods > li .payment_box { margin: 0 14px 12px; }
.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
label.woocommerce-form__label-for-checkbox { display: flex !important; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner .cmplz-link { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 6px; }
/* Links die Complianz zelf verbergt (bijv. Impressum zonder pagina) moeten verborgen blijven. */
.cmplz-cookiebanner .cmplz-link.cmplz-hidden, .cmplz-cookiebanner .cmplz-links .cmplz-hidden { display: none !important; }
@media (max-width: 980px) { .filterform label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; cursor: pointer; } }

/* ---------- kop op telefoon en tablet (< 981px, 0.2.6): logo in het midden ----------
   Raster van vijf kolommen: menu + zoeken | logo | account + winkelwagen.
   Beide kanten even breed, dus het logo staat altijd optisch in het midden.
   Alle vier de knoppen 44x44 met een icoon van 24px; de teller van de
   winkelwagen hangt absoluut en verschuift niets. */
@media (max-width: 980px) {
  .topbalk .wrap { justify-content: center; }
  .kop:not(.kop--rustig) .wrap { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px; column-gap: 6px; align-items: center; min-height: 70px; padding-top: 6px; padding-bottom: 6px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .kop-rechts, .kop-acties { display: contents; }
  .menuknop, .kop .zoekknop, .kop .icoknop { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; display: grid !important; place-items: center; grid-row: 1; }
  .menuknop .ico, .kop .icoknop .ico { font-size: 24px; }
  .menuknop { grid-column: 1; }
  .kop .zoekknop { grid-column: 2; }
  .kop:not(.kop--rustig) .logo { grid-column: 3; grid-row: 1; justify-self: center; display: block; line-height: 0; }
  .kop:not(.kop--rustig) .logo img { height: 58px; width: auto; transition: transform .25s ease; transform-origin: center; }
  .kop.kop-vast:not(.kop--rustig) .logo img { transform: scale(.88); }
  .kop .icoknop:not(.zoekknop):not([data-lade]) { grid-column: 4; }
  .kop .icoknop[data-lade] { grid-column: 5; }
  .kop .teller { top: 4px; right: 2px; }
  .kop .zoek { display: none; }
  .zoek-open .kop .zoek { display: flex; position: absolute; left: 0; right: 0; top: 100%; background: var(--bos); padding: 10px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--bos-lijn); }
  .zoek-open .kop .zoek input { width: 100%; }
  .zoek-open .kop .zoek button { right: max(16px, env(safe-area-inset-right)); top: 10px; }
  .zoek-open .zoek-tips { left: 16px; right: 16px; width: auto; top: calc(100% - 6px); }
}
@media (prefers-reduced-motion: reduce) { .kop .logo img { transition: none; } }
/* Adminbalk die over twee regels loopt (veel knoppen): kop, menu en lade schuiven mee (--ab zet theme.js). */
@media (min-width: 783px) {
  .admin-bar .kop { top: var(--ab, 32px); }
  .admin-bar .lade, .admin-bar .hoofdmenu { top: var(--ab, 32px); }
}
/* Kop weg met een adminbalk erboven: helemaal uit beeld, ook achter een overlopende adminbalk. */
.admin-bar .kop.kop-weg { transform: translateY(calc(-100% - var(--ab, 0px))); }