/* Totaal Server — thema (paars, strak, familie van LOTECH) */
:root{
  --accent:#673de6;          /* hoofdkleur */
  --accent-licht:#a996ff;    /* leesbaar accent op de donkere balk */
  --accent-donker:#5025d1;
  --band:#1c1340;           /* donkere balk bovenaan + footer */
  --donker:#241a4d;         /* footer / knoppen */
  --tekst:#2e2a3f;
  --muted:#6b6685;
  --lijn:#e6e3f2;
  --zacht:#f5f3ff;          /* lichte vlakken */
  --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Footer altijd onderaan: zonder dit stopt hij waar de inhoud stopt, en hangt hij
   bij een korte pagina halverwege het scherm. Zelfde aanpak als bij Snoepenzo. */
body{font-family:'Poppins',system-ui,sans-serif;color:var(--tekst);background:var(--bg);line-height:1.65;font-weight:300;
  min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
h1,h2,h3,h4{font-weight:600;line-height:1.2;margin:0 0 .5em}
a{color:inherit}
img{max-width:100%;display:block}

/* ── Aankondigingsbalk ── */
.topbalk{background:var(--band);color:#fff;text-align:center;padding:9px 18px;
  font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;position:relative;z-index:120}

/* ── Header ── */
.site-header{background:var(--band);color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:10px clamp(18px,4vw,54px);position:relative;z-index:110}
/* Logo = embleem (afbeelding) + naam als echte tekst, zo blijft de tekst altijd scherp */
.site-header .logo{display:flex;align-items:center;gap:15px;text-decoration:none;flex-shrink:0}
.logo-mark{height:56px;width:auto}
/* --merk-b = de breedte van het naamblok. Beide regels vullen exact deze breedte,
   dus ze zijn altijd even breed. Wil je het logo groter of kleiner? Alleen dit getal
   (en de hoogte van .logo-mark) aanpassen. */
.logo-woord{display:block;width:var(--merk-b,250px)}
.logo-naam{display:block;width:100%;height:auto;overflow:visible;margin-top:2px}
/* Streep tussen naam en slogan — nu uit; display:block zet hem terug aan */
.logo-lijn{display:none;height:2px;background:var(--accent);border-radius:1px;opacity:.85;margin:9px 0 0}
.logo-naam text{font-family:'Oswald',sans-serif;font-weight:700;font-size:40px;fill:#fff}
.logo-naam .punt-nl{fill:var(--accent-licht)}
/* Slogan loopt van onder de A tot onder de N van TOTAALSERVER.NL — dat is 86% van
   de naambreedte, gecentreerd. Uitgevuld tot precies die breedte via textLength. */
.logo-sub{display:block;width:var(--sub-b,86%);height:auto;margin:4px auto 0;overflow:visible}
.logo-sub text{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;fill:var(--accent-licht)}
/* Op de foto een schaduw, zodat het van de achtergrond loskomt */
.site-header.transparant .logo-mark{filter:drop-shadow(0 3px 12px rgba(0,0,0,.55))}
.site-header.transparant .logo-naam{filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.site-header.transparant .logo-sub{filter:drop-shadow(0 1px 7px rgba(0,0,0,.8))}
.site-header.transparant .logo-lijn{box-shadow:0 1px 6px rgba(0,0,0,.55)}

/* Op de home zweven balk + menu over de foto (buiten de flow, dus de hero begint bovenaan) */
.kop-over{position:absolute;left:0;right:0;top:0;z-index:110}
.kop-over .topbalk{background:rgba(40,20,110,.92)}
.site-header.transparant{background:transparent}

.site-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap}
.site-nav a{color:var(--accent-licht);text-decoration:none;font-size:15px;font-weight:400;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:.15s;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.site-nav a:hover{color:#fff}
.site-nav a.actief{color:#fff;border-bottom-color:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{display:block;width:26px;height:2px;background:#fff}

/* ── Hero (home, schermvullend) ── */
.hero-vol{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:#1c1340 center/cover no-repeat;color:#fff;text-align:center;
  padding:170px clamp(20px,5vw,60px) 100px}
.hero-vol::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.42))}
/* Donkere sluier bovenaan, zodat logo en menu op elke foto leesbaar blijven */
.hero-vol::before{content:"";position:absolute;left:0;right:0;top:0;height:260px;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.hero-vol-inner{position:relative;z-index:1;max-width:900px}
.hero-streep{display:block;width:300px;max-width:60%;height:3px;background:#fff;margin:0 auto 26px;border-radius:2px}

/* Plek van de tekst op de foto — in te stellen in het beheer, zodat je de tekst
   op een rustig stuk van de foto kunt zetten in plaats van midden op het drukke deel.
   flex-direction is column, dus align-items = links/rechts en justify-content = hoog/laag. */
.hero-vol.pos-links {align-items:flex-start;text-align:left; padding-left:clamp(24px,8vw,140px)}
.hero-vol.pos-rechts{align-items:flex-end;  text-align:right;padding-right:clamp(24px,8vw,140px)}
.hero-vol.pos-links  .hero-streep{margin-left:0;margin-right:auto}
.hero-vol.pos-rechts .hero-streep{margin-left:auto;margin-right:0}
.hero-vol.vpos-boven{justify-content:flex-start}
.hero-vol.vpos-onder{justify-content:flex-end}
/* Buiten het midden is de tekstkolom smaller, zo blijft de foto zichtbaar */
.hero-vol.pos-links .hero-vol-inner,
.hero-vol.pos-rechts .hero-vol-inner{max-width:min(620px,100%)}
.hero-vol h1{font-size:clamp(52px,10vw,120px);font-weight:300;letter-spacing:-1px;margin:0;
  text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hero-vol .hero-sub{font-size:clamp(16px,2vw,20px);font-weight:300;margin:clamp(26px,6vh,60px) 0 26px;
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-pijl{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:1;color:#fff;
  opacity:.8;animation:wip 2.2s ease-in-out infinite}
@keyframes wip{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ── Hero (overige pagina's) ── */
.hero{position:relative;min-height:42vh;display:flex;align-items:center;justify-content:center;
  background:#1c1340 center/cover no-repeat;color:#fff;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.6))}
.hero-inner{position:relative;z-index:1;max-width:1180px;padding:56px clamp(20px,5vw,60px)}
.hero h1{font-size:clamp(32px,5.5vw,56px);font-weight:600;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero .hero-sub{font-size:17px;font-weight:300;margin:14px 0 0}

/* Paginatitel zonder hero-foto */
.pagina-kop{font-size:clamp(30px,5vw,46px);font-weight:600;text-align:center;margin:52px auto 0;
  max-width:1180px;padding:0 24px}
.pagina-intro{text-align:center;color:var(--muted);max-width:640px;margin:10px auto 0;padding:0 24px}

/* ── Secties ── */
.sectie{max-width:1180px;margin:0 auto;padding:clamp(46px,7vw,78px) 24px}
.sectie.smal{max-width:860px}
.sectie-kop{font-size:clamp(24px,3vw,32px);font-weight:600;text-align:center;margin:0 0 38px}
.sectie-kop::after{content:"";display:block;width:52px;height:3px;background:var(--accent);
  margin:14px auto 0;border-radius:2px}
.blok-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.blok-2 img{border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.14);margin:0 auto}
.tekst p{margin:0 0 1em}
.lead{font-size:18px}

/* ── USP-blokken ── */
.usp-sectie{padding-top:clamp(40px,6vw,66px)}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.usp{background:var(--zacht);border:1px solid var(--lijn);border-radius:16px;padding:30px 26px;text-align:center}
.usp-ico{width:52px;height:52px;margin:0 auto 16px;color:var(--accent-donker)}
.usp-ico svg{width:100%;height:100%}
.usp h3{font-size:19px;margin:0 0 8px}
.usp p{margin:0;color:var(--muted);font-size:15px}

/* ── Productkaarten (home) ── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.prod-kaart{border:1px solid var(--lijn);border-radius:16px;overflow:hidden;background:#fff;
  transition:.18s;display:flex;flex-direction:column}
.prod-kaart:hover{box-shadow:0 14px 34px rgba(24,36,15,.10);transform:translateY(-3px)}
.prod-foto{aspect-ratio:4/3;background:var(--zacht) center/cover no-repeat;position:relative}
.prod-foto.leeg{display:flex;align-items:center;justify-content:center;color:#a49dbd;font-size:13px}
.uitverkocht-vlag{position:absolute;left:12px;top:12px;background:#fff;border:1px solid var(--lijn);
  color:#8a6a4b;font-size:12px;font-weight:500;padding:4px 11px;border-radius:20px}
.prod-body{padding:18px 20px 22px}
.prod-cat{display:inline-block;background:var(--zacht);border:1px solid var(--lijn);color:var(--muted);
  font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.prod-kaart h3{font-size:18px;margin:0 0 6px}
.prod-prijs{margin:0;font-weight:600;color:var(--accent-donker)}

/* ── Winkel ── */
.shop-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin:34px 0 30px;color:var(--muted);font-size:14px}
.cat-filter{display:flex;gap:9px;flex-wrap:wrap}
.cat-filter a{text-decoration:none;border:1px solid var(--lijn);border-radius:20px;padding:6px 15px;
  font-size:13.5px;color:var(--muted);transition:.15s}
.cat-filter a:hover{border-color:var(--accent);color:var(--tekst)}
.cat-filter a.actief{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.sorteer{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.shop-top select{padding:9px 12px;border:1px solid var(--lijn);border-radius:8px;font-family:inherit;background:#fff}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.p-card{text-align:center;border:1px solid var(--lijn);border-radius:16px;padding:16px;background:#fff;
  display:flex;flex-direction:column;transition:.18s}
.p-card:hover{box-shadow:0 14px 34px rgba(24,36,15,.10)}
.p-card .p-foto{aspect-ratio:1/1;background:var(--zacht) center/cover no-repeat;border-radius:12px}
.p-card .p-foto.leeg{display:flex;align-items:center;justify-content:center;color:#a49dbd;font-size:13px}
.p-card .prod-cat{margin:14px auto 0}
.p-card h3{font-size:18px;margin:10px 0 4px}
.p-card .p-oms{color:var(--muted);font-size:14px;margin:0 0 10px}
.p-card .prijs{font-weight:600;color:var(--accent-donker);margin:auto 0 14px;font-size:17px}
.p-card .uit-label{display:inline-block;background:var(--zacht);border:1px solid var(--lijn);color:#8a6a4b;
  font-size:13px;font-weight:500;padding:5px 14px;border-radius:20px;margin-bottom:12px}
.p-card.is-uit .prijs{color:var(--muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Knoppen ── */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--donker);color:#fff;border:0;
  padding:12px 26px;border-radius:28px;font-family:inherit;font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{background:#000}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-donker);color:#fff}
.btn.licht{background:#fff;color:var(--donker);border:1.5px solid var(--donker)}
.btn.licht:hover{background:var(--zacht)}
.btn.wit{background:#fff;color:var(--tekst);box-shadow:0 8px 26px rgba(0,0,0,.22)}
.btn.wit:hover{background:var(--accent);color:#fff}
.btn.groot{font-size:16px;padding:15px 38px}
.btn + .btn{margin-left:10px}

/* ── Formulieren ── */
.form-veld{margin-bottom:16px}
.form-veld label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.form-veld input,.form-veld textarea,.form-veld select{width:100%;padding:12px 14px;border:1px solid var(--lijn);
  border-radius:9px;font-family:inherit;font-size:15px;background:#fff}
.form-veld input:focus,.form-veld textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-veld textarea{min-height:130px;resize:vertical}
.form-rij{display:flex;gap:16px;flex-wrap:wrap}
.form-rij .form-veld{flex:1;min-width:150px}
.veld-hint{color:var(--muted);font-weight:300;font-size:13px}
.melding{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14px}
.melding.ok{background:#e7f6ec;color:#1b7a3d;border:1px solid #b6e0c4}
.melding.fout{background:#fdeaea;color:#b42318;border:1px solid #f5c2c0}

/* ── Winkelwagen ── */
.cart-tabel{width:100%;border-collapse:collapse}
.cart-tabel th,.cart-tabel td{padding:12px;border-bottom:1px solid var(--lijn);text-align:left}
.cart-tabel td.rechts,.cart-tabel th.rechts{text-align:right}
.gratis-pill{display:inline-block;background:#e7f6ec;color:#1b7a3d;border:1px solid #b6e0c4;
  font-size:12.5px;font-weight:600;padding:2px 11px;border-radius:20px}
.verzend-hint{color:var(--muted);font-size:13.5px;padding-top:0!important;border-bottom:0!important;text-align:right}

/* ── Bestelling / betalen ── */
.betaal-vooraf{background:var(--zacht);border:1px solid var(--lijn);border-radius:10px;
  padding:12px 16px;font-size:14px;color:var(--muted);margin:4px 0 18px}
.bestel-vak{background:var(--zacht);border:1px solid var(--lijn);border-radius:12px;padding:20px 22px;margin-top:26px}
.bestel-rij{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:15px}
.bestel-rij + .bestel-rij{border-top:1px solid var(--lijn)}
.bestel-regels{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--lijn);font-family:inherit;
  font-size:14px;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.betaal-blok{border:1px solid var(--lijn);border-radius:12px;padding:24px;margin-top:22px;text-align:center}
.betaal-blok h3{font-size:20px;margin:0 0 6px}
.betaal-blok p{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.qr-vak{width:230px;max-width:100%;margin:0 auto 18px;background:#fff;padding:10px;border:1px solid var(--lijn);border-radius:10px}
.betaal-gegevens{display:inline-block;text-align:left;font-size:14.5px}
.betaal-gegevens div{display:flex;gap:18px;padding:5px 0}
.betaal-gegevens span{color:var(--muted);min-width:110px}
.qr-hint{font-size:13px;color:var(--muted);margin:18px auto 0;max-width:420px}

/* ── Paginering ── */
.paging{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:44px}
.paging a,.paging span{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;text-decoration:none;color:var(--tekst);font-size:14px;transition:.15s}
.paging a:hover{background:var(--zacht)}
.paging .huidig{color:var(--accent-donker);font-weight:600}

/* ── Footer ── */
.site-footer{background:var(--donker);color:#c8c2de;margin-top:40px;flex-shrink:0}
.footer-inner{max-width:1180px;margin:0 auto;padding:16px 24px 0;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:16px}
.footer-merk{display:flex;align-items:center;gap:14px;text-decoration:none}
.footer-merk img{height:46px;width:auto}
.footer-merk .logo-woord{--merk-b:190px}
.merk-social{display:flex;gap:20px;margin-top:6px}
.merk-social a{color:#c8c2de;text-decoration:none;font-size:13px}
.merk-social a:hover{color:#fff}
.footer-col h4{color:var(--accent-licht);font-size:12px;font-weight:600;margin-bottom:3px;letter-spacing:.4px;text-transform:uppercase}
.footer-col a,.footer-col span{display:block;color:#c8c2de;text-decoration:none;font-size:12.5px;line-height:1.5;margin-bottom:0}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:right;max-width:1180px;margin:0 auto;
  padding:5px 24px;font-size:11.5px;color:#8b83a8}

/* ── Responsive ── */
@media (max-width:980px){
  .usp-grid,.prod-grid{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .site-header{flex-wrap:wrap}
  .site-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0 18px}
  body.nav-open .site-nav{display:flex}
  .kop-over{position:relative}
  .kop-over .topbalk{background:var(--band)}
  .site-header.transparant{background:var(--band)}
  .hero-vol{padding-top:60px}
  .site-nav a{text-shadow:none}
  .hero-vol{min-height:auto;padding:70px 22px 80px}
  .shop-grid{grid-template-columns:1fr 1fr}
  .blok-2{grid-template-columns:1fr;gap:24px}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:540px){
  .usp-grid,.prod-grid,.shop-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .sectie{padding:40px 20px}
  .logo-mark{height:46px}
  .logo-woord{--merk-b:200px}
  .btn + .btn{margin-left:0;margin-top:10px}
}

/* ── Hosting: knop in het menu (verving de winkelwagen) ── */
.nav-cta{background:var(--accent);color:#fff!important;font-weight:600;border-radius:9px;
  padding:9px 18px;text-decoration:none;text-shadow:none;border-bottom:0!important;transition:.15s;white-space:nowrap}
.nav-cta:hover{background:#7c55ea;color:#fff!important}
.footer-merk svg.logo-mark{height:40px;width:auto}