@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/poppins-800.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:800;font-display:swap;
  src:url("fonts/poppins-800italic.woff2") format("woff2")}
:root{
  --kop:"Poppins","Segoe UI",system-ui,sans-serif;
  --navy:#0067a5;
  --teal:#00a0e2;
  --teal-d:#0086c3;
  --deal:#ff6a00;
  --inkt:#0f2b3d;
  --grijs:#517086;
  --lijn:#cfe8f7;
  --vlak:#eef8fe;
  --wit:#ffffff;
  --radius:14px;
  --schaduw:0 6px 20px rgba(0,124,190,.14);
  --lucht:radial-gradient(circle 380px at 4% 118%,rgba(255,255,255,.10) 0 98%,transparent 100%),
    radial-gradient(circle 460px at 98% -28%,rgba(255,255,255,.12) 0 98%,transparent 100%),
    radial-gradient(circle 300px at 90% 118%,rgba(6,60,120,.10) 0 98%,transparent 100%),
    radial-gradient(circle 220px at 30% -14%,rgba(255,255,255,.08) 0 98%,transparent 100%),
    linear-gradient(120deg,#35bef2 0%,#1b9ce5 48%,#0d7ed1 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--inkt);background:var(--vlak);line-height:1.5;
}
a{color:inherit;text-decoration:none}
.kern{max-width:1180px;margin:0 auto;padding:0 20px}
svg{width:100%;height:100%;display:block}

/* Topbalk */
.topbalk{background:var(--navy);color:#cfe0ea;font-size:.82rem}
.topbalk-in{display:flex;gap:26px;justify-content:center;padding:8px 20px;flex-wrap:wrap}

/* Header */
.header{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:30}
.header-in{display:flex;align-items:center;gap:24px;padding:16px 20px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:38px;height:38px;color:var(--wit);background:var(--teal);border-radius:11px;padding:8px;box-shadow:var(--schaduw)}
.logo-tekst{font-family:var(--kop);font-size:1.5rem;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.logo-tekst strong{font-weight:800}
.logo-tekst strong{color:var(--teal);font-weight:800}
.zoek{flex:1;display:flex;max-width:620px;border:2px solid var(--teal);border-radius:12px;overflow:hidden}
.zoek input{flex:1;border:0;padding:12px 16px;font-size:.95rem;outline:none}
.zoek button{border:0;background:var(--teal);color:#fff;width:52px;cursor:pointer;padding:12px}
.zoek button svg{width:20px;height:20px;margin:0 auto}
.header-acties{display:flex;gap:18px;margin-left:auto}
.hactie{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.9rem;font-weight:600;position:relative}
.hactie svg{width:24px;height:24px}
.hactie .teller{position:absolute;top:-8px;left:16px;background:var(--deal);color:#fff;font-size:.7rem;font-style:normal;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* Categoriebalk */
.catbalk{background:var(--wit);border-bottom:1px solid var(--lijn)}
.catbalk-in{display:flex;gap:6px;overflow-x:auto;padding:6px 20px}
.catlink{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--grijs);white-space:nowrap}
.catlink svg{width:20px;height:20px;color:var(--teal)}
.catlink:hover{background:var(--vlak);color:var(--navy)}
.catlink.actief{background:var(--vlak);color:var(--navy)}
.leeg-resultaat{grid-column:1/-1;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:30px;text-align:center;color:var(--grijs)}
.leeg-resultaat a{color:var(--teal);font-weight:700}
.alles-knop{display:flex;justify-content:center;margin:26px 0 8px}
.korting.los{position:static;align-self:center}
.actietijd{display:block;min-height:1.1em;color:var(--deal);font-weight:700;font-size:.82rem}
.actietijd.afgelopen{color:var(--deal)}
.actiebalk{background:#fff3e8;border:1px solid #ffd2ad;color:#a54a00;border-radius:10px;
  padding:10px 14px;margin:12px 0 0;font-weight:600;font-size:.92rem}
.actiebalk.gepland{background:#eaf1fb;border-color:#cadbf3;color:#2d5aa0}
.actiebalk.afgelopen{color:#e05a00}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:center;
  background:var(--lucht);color:#fff;border-radius:var(--radius);
  padding:44px;margin:26px 0;overflow:hidden;position:relative}
.hero-tekst{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:22px;padding-left:6px}
.hero-sub{margin-left:26px}
.hero.zonder-beeld{grid-template-columns:1fr}
.hero-kop{display:inline-block;background:var(--deal);color:#fff;font-weight:600;font-size:.8rem;
  font-family:var(--kop);padding:5px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}
.hero h1{font-family:var(--kop);font-style:italic;font-weight:800;font-size:3.4rem;
  line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;margin:0;
  display:inline-block;background:#fff;color:#0b3f66;padding:22px 34px;
  border-radius:17px;transform:rotate(-4deg);
  box-shadow:0 16px 32px rgba(0,45,85,.28)}
.hero-sub{display:inline-block;background:var(--deal);color:#fff;font-family:var(--kop);
  font-weight:600;font-size:.95rem;padding:9px 18px;border-radius:10px;
  transform:rotate(-4deg)}
.knop-groot{font-size:1.08rem;padding:16px 30px;border-radius:14px}
.hero .knop-groot{background:var(--deal);color:#fff;margin-top:6px}
.hero .knop-groot:hover{background:#e05a00}
.hero p{color:#f0faff;max-width:440px;margin-bottom:22px}
.hero-beeld{position:relative;display:grid;place-items:center;color:rgba(255,255,255,.55);height:380px}
.hero-beeld svg{width:150px;height:150px}
.hero-badge{position:absolute;top:0;right:10px;background:var(--deal);color:#fff;font-weight:800;
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;box-shadow:var(--schaduw)}
a.hero-beeld{color:inherit}
.hero-foto{max-height:350px;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,45,85,.30))}
.hero-promo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#fff;
  color:var(--navy);font-weight:700;font-size:.88rem;padding:8px 16px;border-radius:20px;
  box-shadow:var(--schaduw);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.collage .hslide{position:absolute;inset:0}
.collage.wissel .hslide{opacity:0;pointer-events:none;transition:opacity 1s ease}
.collage.wissel .hslide.actief{opacity:1;pointer-events:auto}
.collage .bolletjes{position:absolute;left:0;right:0;bottom:-28px;display:flex;
  gap:8px;justify-content:center}
.collage .bolletje{width:10px;height:10px;border-radius:50%;border:0;padding:0;
  cursor:pointer;background:rgba(255,255,255,.55)}
.collage .bolletje.actief{background:#fff}
.collage .cfoto{position:absolute;display:block;
  filter:drop-shadow(0 14px 22px rgba(0,45,85,.30));transition:transform .15s}
.collage .cfoto:hover{transform:scale(1.04)}
.collage .cfoto img{width:100%;height:100%;object-fit:contain}
.collage .c1{width:88%;height:96%;right:7%;top:2%;z-index:3;transform:scale(1.68)}
.collage .c1:hover{transform:scale(1.72)}
.collage .c2{width:36%;height:52%;left:1%;top:2%;transform:rotate(-8deg);z-index:2}
.collage .c2:hover{transform:rotate(-8deg) scale(1.04)}
.collage .c3{width:32%;height:46%;left:7%;bottom:0;transform:rotate(6deg);z-index:1}
.collage .c3:hover{transform:rotate(6deg) scale(1.04)}
.collage .c4{width:27%;height:40%;right:0;bottom:1%;transform:rotate(10deg);z-index:2}
.collage .c4:hover{transform:rotate(10deg) scale(1.04)}
.profiteer{position:absolute;top:-6px;right:-4px;background:#141414;color:#fff;
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--kop);font-style:italic;font-weight:800;font-size:.98rem;
  line-height:1.1;text-align:center;text-transform:uppercase;transform:rotate(8deg);
  box-shadow:var(--schaduw);z-index:4}
.hero-bij{display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:.92rem;color:#fff}
.hero-bij img{height:78px;background:#fff;border-radius:14px;padding:8px 18px;
  box-shadow:0 10px 22px rgba(0,45,85,.24);transition:transform .15s}
.hero-bij a:hover img{transform:scale(1.05)}
.hero-merk{position:absolute;right:4%;top:-16px;background:#fff;border-radius:18px;
  padding:16px 26px;box-shadow:0 12px 26px rgba(0,45,85,.26);z-index:4;
  font-family:var(--kop);font-weight:800;font-size:1.8rem;color:var(--navy)}
.hero-merk img{height:84px;display:block}
.hero-prijs{position:absolute;bottom:-14px;right:-24px;background:#fff;color:var(--navy);
  font-family:var(--kop);text-align:center;padding:13px 28px 15px;border-radius:20px;
  box-shadow:0 16px 34px rgba(0,45,85,.32);transform:rotate(-4deg);z-index:4}
.hero-prijs .van-regel{display:block;font-size:1.05rem;font-weight:600;color:var(--grijs)}
.hero-prijs .van-regel s{text-decoration-color:var(--deal);text-decoration-thickness:3px}
.hero-prijs .voor-regel{display:block;font-style:italic;font-weight:800;
  color:var(--deal);font-size:1.3rem;line-height:1.15}
.hero-prijs .voor-regel strong{font-size:2.6rem;letter-spacing:-.01em}
.heroslider .bolletjes{position:absolute;left:0;right:0;bottom:-26px;display:flex;
  gap:8px;justify-content:center}
.heroslider .bolletje{background:rgba(255,255,255,.55)}
.heroslider .bolletje.actief{background:#fff}
.uitverkocht-band{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;z-index:2}
.uitverkocht-band span{background:rgba(255,106,0,.93);color:#fff;font-family:var(--kop);
  font-style:italic;font-weight:800;font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 26px;border-radius:12px;transform:rotate(-12deg);
  box-shadow:var(--schaduw)}
.uitverkocht-band.groot span{font-size:1.6rem;padding:12px 36px}
.collage .uitverkocht-band{z-index:5}
.fotovak,.veldform .regel{flex-direction:row;align-items:center;gap:8px;font-weight:400}

/* Knoppen */
.knop{display:inline-block;background:var(--teal);color:#fff;font-weight:700;padding:12px 22px;
  border-radius:11px;border:0;cursor:pointer;font-size:.95rem;transition:background .15s}
.knop:hover{background:var(--teal-d)}
.knop-licht{background:#fff;color:var(--navy)}
.knop-licht:hover{background:#eef3f6}
.knop-vol{width:100%}

/* USP-strip */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}
.usp{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:16px 18px}
.usp strong{display:block;color:var(--navy)}
.usp span{font-size:.85rem;color:var(--grijs)}

/* Sectiekop */
.sectiekop{display:flex;align-items:baseline;justify-content:space-between;margin:36px 0 18px}
.sectiekop h2{font-family:var(--kop);font-weight:800;font-size:1.6rem;color:var(--navy)}
.meer{color:var(--teal);font-weight:700;font-size:.9rem}

/* Productgrid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.kaart:hover{box-shadow:var(--schaduw);transform:translateY(-3px)}
.kaart-beeld{position:relative;background:linear-gradient(180deg,#d6f0fd,#f6fcff);height:210px;display:grid;place-items:center;overflow:hidden}
.kaart-icoon{width:88px;height:88px;color:var(--teal)}
.korting{position:absolute;top:12px;left:12px;background:var(--deal);color:#fff;font-weight:800;
  font-size:.8rem;padding:4px 9px;border-radius:8px}
.vlag{position:absolute;top:12px;right:12px;background:var(--navy);color:#fff;font-weight:700;
  font-size:.72rem;padding:4px 9px;border-radius:8px}
.kaart-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.kaart-body h3{font-size:.98rem;font-weight:600;color:var(--inkt);line-height:1.35;
  min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaart-body .knop{margin-top:auto}
.prijzen{display:flex;align-items:baseline;gap:10px;margin-top:auto}
.nu{font-size:1.35rem;font-weight:800;color:var(--navy)}
.van{font-size:.9rem;color:var(--grijs);text-decoration:line-through}

/* Banners */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0}
.banner{border-radius:var(--radius);padding:34px;color:#fff;min-height:180px;display:flex;align-items:center}
.banner h3{font-family:var(--kop);font-style:italic;font-weight:800;font-size:1.5rem;margin-bottom:6px}
.banner p{margin-bottom:16px;opacity:.9}
.banner-a{background:var(--lucht)}
.banner-b{background:radial-gradient(ellipse 150px 55px at 80% 20%,rgba(255,255,255,.8),transparent 70%),
  radial-gradient(ellipse 200px 70px at 15% 70%,rgba(255,255,255,.4),transparent 70%),
  linear-gradient(180deg,#5ec7f4,#0a97dd)}

/* Footer */
.footer{background:var(--navy);color:#c6d4e6;margin-top:50px}
.footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px;padding:44px 20px}
.footer-merk .logo-tekst{color:#fff}
.footer-merk p{margin-top:12px;font-size:.9rem;max-width:280px}
.footer-kol h4{color:#fff;font-size:1rem;margin-bottom:14px}
.footer-kol a{display:block;font-size:.9rem;padding:5px 0;color:#c6d4e6}
.footer-kol a:hover{color:#fff}
.footer-onder{border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;padding:16px 0}
.footer-onder .kern{color:#9fb3c4}

/* Navigatie in header */
.hoofdnav{display:flex;gap:22px;margin-left:8px}
.hoofdnav a{font-weight:600;color:var(--navy);font-size:.95rem}
.hoofdnav a:hover{color:var(--teal)}
.knop-klein{padding:9px 16px;font-size:.88rem;margin-left:auto}
.knop-licht-rand{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.knop-licht-rand:hover{background:#eafaf8}
.knop-rand-rood{background:#fff;color:var(--deal);border:2px solid var(--deal)}
.knop-rand-rood:hover{background:#fff2f0}

/* Kaart als link */
a.kaart{color:inherit}
.kaart-beeld .vlag{background:var(--navy)}

/* AH Voordeelshop-logo (verwijzing naar het verkoopkanaal) */
.ah-logo{height:52px;width:auto;display:inline-block;vertical-align:middle}
.ah-logo.klein{height:32px}
.koopregel{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--navy);flex-wrap:wrap}
.meer-logo{display:inline-flex;align-items:center;gap:8px}

/* Volg-blok op home */
.volgblok{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:28px 32px;margin:34px 0}
.volgblok h2{color:var(--navy);font-size:1.4rem}
.volgblok p{color:var(--grijs);margin-top:4px}

/* Kruimelpad + product */
.kruimel{color:var(--grijs);font-size:.88rem;margin:22px 0 10px}
.kruimel a{color:var(--teal);font-weight:600}
.product{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:30px;margin-bottom:40px}
.product-beeld{background:linear-gradient(180deg,#d6f0fd,#f6fcff);border-radius:var(--radius);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:340px;padding:20px}
.product-foto{max-width:100%;max-height:400px;object-fit:contain}
.merkstrook{font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grijs);font-size:.95rem}
.merklogo{max-height:44px;max-width:170px;object-fit:contain}
/* Per merk bijgesteld: brede woordmerken mogen groter ogen */
.merklogo.merk-ring,.merklogo.merk-tplink{max-height:76px;max-width:300px}
.bh-merklogo{max-height:40px;max-width:150px;object-fit:contain;background:#fff;
  border:1px solid var(--lijn);border-radius:8px;padding:4px 8px}
.fotoslider{position:relative;width:100%;height:400px}
.fotoslider .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 1.2s ease}
.fotoslider .slide.actief{opacity:1}
.bolletjes{position:absolute;left:0;right:0;bottom:2px;display:flex;gap:8px;justify-content:center}
.bolletje{width:10px;height:10px;border-radius:50%;border:0;background:#b8dff5;cursor:pointer;padding:0}
.bolletje.actief{background:var(--teal)}
.fotovak{align-items:center}
.kaart-icoon.groot{width:150px;height:150px;color:var(--teal)}
.product-info h1{font-family:var(--kop);font-weight:800;color:var(--navy);font-size:1.8rem;margin:10px 0}
.nu.groot{font-size:1.9rem}
.vlag.donker{display:inline-block;background:var(--navy);color:#fff;font-size:.72rem;
  font-weight:700;padding:4px 10px;border-radius:8px}
.product-oms{color:var(--grijs);margin:14px 0}
.koopvak{background:var(--vlak);border-radius:12px;padding:18px;margin:18px 0}
.koopvak p{margin-bottom:12px;font-size:.92rem}
.koopknop{background:var(--deal);color:#fff;margin:0 10px 8px 0}
.koopknop:hover{background:#e05a00;color:#fff}
.kenmerken{list-style:none;margin-top:10px}
.kenmerken li{padding:6px 0 6px 24px;position:relative;font-size:.92rem;color:var(--grijs)}
.kenmerken li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}

/* Smalle kolom (volg/bestelling) */
.kern.smal{max-width:720px}
.volgkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:32px;margin:26px 0}
.volgkaart h1{color:var(--navy);font-size:1.7rem}
.volgkaart>p{color:var(--grijs);margin:8px 0 20px}
.infopagina h1{font-family:var(--kop)}
.infopagina h2{font-family:var(--kop);color:var(--navy);font-size:1.1rem;margin:22px 0 6px}
.infopagina>p{margin:8px 0}
.infopagina a{color:var(--teal);font-weight:600}
.infopagina .kenmerken{margin:8px 0}

/* Formulieren */
.veldform{display:flex;flex-direction:column;gap:14px}
.veldform label{font-weight:600;color:var(--navy);font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.veldform input,.veldform select,.veldform textarea{
  border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;font-size:.95rem;
  font-family:inherit;outline:none;font-weight:400;color:var(--inkt)}
.veldform input:focus,.veldform select:focus,.veldform textarea:focus{border-color:var(--teal)}
.klein{font-size:.82rem;color:var(--grijs)}

/* Meldingen */
.melding{border-radius:10px;padding:12px 16px;margin:14px 0;font-size:.92rem}
.melding.ok{background:#e6f7f4;color:#0c6c60;border:1px solid #b9e8e0}
.melding.fout{background:#fdecea;color:#b23c30;border:1px solid #f5c6c0}
.melding.info{background:#eaf1fb;color:#2d5aa0;border:1px solid #cadbf3}

/* Statuspil */
.statuspil{display:inline-block;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap}
.s-nieuw{background:#eaf1fb;color:#2d5aa0}
.s-in_behandeling{background:#fff3e0;color:#a25c00}
.s-verzonden{background:#e7f0ff;color:#1f5bd0}
.s-geleverd{background:#e6f7f4;color:#0c6c60}
.s-geannuleerd{background:#f1f1f3;color:#6a6a72}
.s-annul{background:#fdecea;color:#b23c30;margin-left:6px}

/* Stappenbalk */
.orderkop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.orderkop h1{margin:2px 0}
.stappen{list-style:none;display:flex;justify-content:space-between;margin:24px 0;position:relative}
.stappen:before{content:"";position:absolute;top:9px;left:8%;right:8%;height:2px;background:var(--lijn);z-index:0}
.stappen li{position:relative;z-index:1;text-align:center;flex:1;font-size:.8rem;color:var(--grijs)}
.stappen .bol{display:block;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--lijn);margin:0 auto 8px}
.stappen li.gedaan{color:var(--navy);font-weight:600}
.stappen li.gedaan .bol{background:var(--teal);border-color:var(--teal)}

.tt-knop{display:inline-block;background:var(--navy);color:#fff;font-weight:600;padding:12px 18px;
  border-radius:11px;margin:6px 0 4px}
.tt-knop:hover{background:var(--teal-d)}
.subkop{color:var(--navy);margin:24px 0 10px;font-size:1.1rem}

/* Productregels met foto (klant) */
.regellijst{list-style:none}
.regellijst li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.regel-foto{flex:0 0 68px;width:68px;height:68px;border-radius:12px;overflow:hidden;
  background:var(--vlak);border:1px solid var(--lijn);display:grid;place-items:center}
.regel-foto img{width:100%;height:100%;object-fit:cover;display:block}
.regel-foto-leeg{width:34px;height:34px;color:#b7c3cf}
.regel-tekst{flex:1;display:flex;flex-direction:column;gap:3px}
.regel-tekst strong{color:var(--inkt);font-weight:600}
.regel-prijs{font-weight:800;color:var(--navy);white-space:nowrap}

/* Mini-foto (beheer) */
.mini-foto{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:9px;
  overflow:hidden;background:var(--vlak);border:1px solid var(--lijn)}
.mini-foto img{width:100%;height:100%;object-fit:cover}
.mini-foto-leeg{font-size:.8rem;font-weight:700;color:var(--grijs)}
.regeltabel{width:100%;border-collapse:collapse}
.regeltabel td{padding:9px 6px;border-bottom:1px solid var(--lijn);font-size:.92rem}
.regeltabel td.rechts{text-align:right;font-weight:600;white-space:nowrap}
.rechts{text-align:right}
.annuleer{margin:18px 0}
.tijdlijn{list-style:none}
.tijdlijn li{padding:8px 0;border-bottom:1px solid var(--lijn);font-size:.9rem}
.tl-moment{color:var(--grijs);font-size:.8rem;margin-right:8px}

/* ---------- Beheer ---------- */
body.beheer{background:var(--vlak)}
.bh-top{background:var(--lucht)}
.bh-top-in{max-width:1180px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.bh-top .logo-tekst{color:#fff}
.bh-top .logo-tekst strong{color:#fff}
.bh-top .logo-tekst em{color:#dff4ff;font-style:normal;font-weight:600;font-size:.85rem}
.logo-mark.klein{width:32px;height:32px;padding:6px}
.bh-nav{display:flex;gap:20px}
.bh-nav a{color:rgba(255,255,255,.85);font-weight:600;font-size:.9rem}
.bh-nav a:hover{color:#fff}
.bh-kern{max-width:1180px;margin:0 auto;padding:26px 20px}
.bh-kop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.bh-kop h1{font-family:var(--kop);font-weight:800;color:var(--navy);font-size:1.6rem}
.terug{color:var(--teal);font-weight:600;font-size:.85rem}

.tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.tegel{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:16px;text-align:center;font-size:.82rem;color:var(--grijs)}
.tegel span{display:block;font-family:var(--kop);font-size:1.6rem;font-weight:800;color:var(--navy)}
.tegel.attentie{border-color:var(--deal)}
.tegel.attentie span{color:var(--deal)}

.filterbalk{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filterbalk input{flex:1;min-width:200px;border:1px solid var(--lijn);border-radius:10px;padding:10px 14px}
.filterbalk select{border:1px solid var(--lijn);border-radius:10px;padding:10px 14px}

.bh-tabel{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:12px;overflow:hidden}
.bh-tabel th{text-align:left;padding:12px 14px;background:var(--vlak);font-size:.8rem;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em}
.bh-tabel td{padding:12px 14px;border-top:1px solid var(--lijn);font-size:.9rem;vertical-align:middle}
.bh-tabel .knoprij{flex-wrap:nowrap;justify-content:flex-end}
.knoprij .knop-klein,.filterbalk .knop-klein{margin-left:0}
.bh-tabel .prijs-cel{white-space:nowrap}
.bh-tabel .leeg{text-align:center;color:var(--grijs);padding:30px}

.bh-raster{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.bh-kaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:20px;margin-bottom:16px}
.bh-kaart h3{font-family:var(--kop);color:var(--navy);font-size:1rem;margin-bottom:10px}
.bh-kaart h3.mt{margin-top:20px}
.bh-zij .bh-kaart{margin-bottom:16px}
.attentievak{border-color:var(--deal)}
.knoprij{display:flex;gap:10px;flex-wrap:wrap}

/* Productbeheer */
.kaart-foto{width:100%;height:210px;object-fit:contain;padding:8px}
.bh-productfoto{width:52px;height:52px;object-fit:contain;border:1px solid var(--lijn);
  border-radius:8px;background:#fff;vertical-align:middle}
.kaart-icoon.mini{display:inline-grid;place-items:center;width:52px;height:52px;padding:10px;
  border:1px solid var(--lijn);border-radius:8px;background:var(--vlak)}
.fotorij{display:flex;align-items:center;gap:12px}
.fotorij .regel{flex-direction:row;align-items:center;gap:8px;font-weight:400}

/* Beheer-login */
.bh-login{min-height:100vh;display:grid;place-items:center;background:var(--lucht);padding:20px}
.bh-login-kaart{background:#fff;border-radius:16px;padding:34px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.bh-login-kaart .logo-mark{width:52px;height:52px;padding:12px;margin:0 auto 14px}
.bh-login-kaart h1{font-family:var(--kop);font-weight:800;color:var(--navy);font-size:1.4rem;margin-bottom:16px}
.bh-login-kaart .veldform{text-align:left}
.google-knop{display:flex;align-items:center;justify-content:center;gap:10px}
.google-knop svg{width:18px;height:18px;flex-shrink:0}

/* Responsief */
@media(max-width:900px){
  .hero{grid-template-columns:1.1fr 1fr;gap:14px;padding:24px 18px}
  .hero-beeld{height:250px}
  .hero-foto{max-height:200px}
  .hero-tekst{gap:12px}
  .collage .c1{transform:scale(1.38)}
  .collage .c1:hover{transform:scale(1.4)}
  .hero h1{font-size:1.55rem;padding:12px 16px}
  .hero-sub{font-size:.75rem;padding:7px 12px;margin-left:8px}
  .hero-bij{font-size:.78rem}
  .knop-groot{font-size:.95rem;padding:12px 18px}
  .hero-prijs{padding:6px 10px 8px;bottom:-4px;right:-6px}
  .hero-merk{padding:8px 12px;font-size:1rem}
  .hero-merk img{height:40px}
  .hero-prijs .van-regel{font-size:.68rem}
  .hero-prijs .voor-regel{font-size:.8rem}
  .hero-prijs .voor-regel strong{font-size:1.25rem}
  .hero-promo{font-size:.75rem;padding:6px 12px}
  .uitverkocht-band span{font-size:.78rem;padding:5px 14px;letter-spacing:.04em}
  .uitverkocht-band.groot span{font-size:.95rem;padding:7px 18px}
  .profiteer{width:74px;height:74px;font-size:.72rem;top:-4px}
  .hero-bij{font-size:.8rem;margin-top:14px}
  .hero-bij img{height:44px}
  .usps{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .banners{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr}
  .bh-raster{grid-template-columns:1fr}
  .tegels{grid-template-columns:repeat(3,1fr)}
  .volgblok{flex-direction:column;text-align:center}
}
@media(max-width:620px){
  .hero h1{font-size:1.2rem}
  .hero-beeld{height:210px}
  .hero-foto{max-height:165px}
  .header-in{flex-wrap:wrap;gap:12px}
  .hoofdnav{order:3;flex:1 1 100%;justify-content:center}
  .zoek{order:4;flex:1 1 100%;max-width:none}
  .grid{grid-template-columns:1fr 1fr}
  .logo-tekst{font-size:1.2rem}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .stappen li{font-size:.7rem}
}