/* basis css start */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
:root{
  --brand: #198754;
  --brand-hover: #156f45;
  --bs-body-color: #4f4f4f;
  --bs-body-bg: #ffffff;
  --bs-body-font-size: 16px;
  --bs-body-font-family: 'Oswald', system-ui, -apple-system, sans-serif;
  --bs-border-color: #f4f4f4;
  --bs-border-radius: 0.375rem;
  --input-bg:#ffffff; --input-text:#2b2b2b; --input-border:#ced4da; --input-radius:0.5rem; --input-focus:#a3cfbb;
  --card-bg:#ffffff; --card-text:#2b2b2b; --card-font-size:16px; --card-border:#e6e6e6; --card-radius:0.5rem;
  --sidebar-bg:#f6f6f6; --sidebar-text:#2b2b2b; --sidebar-pad:15px; --sidebar-radius:0.625rem;
  --sidebar-font-size:16px; --sidebar-head-color:#2b2b2b; --sidebar-head-size:16px; --sidebar-link-color:#198754;
}
a{color:var(--brand);text-decoration:none;} a:hover{color:var(--brand-hover);}
.btn-primary{background:var(--brand);border-color:var(--brand);} .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);}
.form-control,.form-select{background:var(--input-bg);color:var(--input-text);border-color:var(--input-border);border-radius:var(--input-radius);}
.card{background:var(--card-bg);color:var(--card-text);border-color:var(--card-border);border-radius:var(--card-radius);}
/* basis css einde */

/* header css start */
.mega-header{background:#fff;}

  /* Sticky op desktop: de categoriebalk blijft bovenin staan bij scrollen.
     Uit te zetten met site_setting 'header_sticky' = 0. */
  /* Desktop, stand '1': alleen de categoriebalk blijft bovenin staan.
     De hele header is sticky, maar wordt zover omhoog geschoven dat de
     USP-balk en de logobalk wegscrollen (--above = hun hoogte, via JS gezet).
     Een sticky KIND zou met zijn ouder mee wegscrollen, vandaar deze aanpak. */
  @media (min-width: 992px){
    .mega-header.is-sticky{
      position:sticky;top:calc(-1 * var(--above, 0px));z-index:1035;background:#fff;
    }
    .mega-header.is-sticky .mega-bar{
      box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
    }
    /* Stand 'full': alles blijft staan, inclusief USP en logo. */
    .mega-header.is-sticky-full{position:sticky;top:0;z-index:1035;background:#fff;
      box-shadow:0 .25rem .75rem rgba(0,0,0,.08);}
  }

  /* Mobiel: USP-balk + hoofdbalk blijven samen bovenin staan. */
  @media (max-width: 991.98px){
    .mega-header.is-sticky, .mega-header.is-sticky-full{
      position:sticky;top:0;z-index:1035;background:#fff;
      box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
    }
  }
  /* Winkelwagen: aantal als rond bolletje rechtsboven op het icoon */
  .cart-btn{display:inline-flex;align-items:center;line-height:1;}
  .cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;
    padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;
    font-size:.7rem;font-weight:700;line-height:20px;text-align:center;
    box-shadow:0 0 0 2px #fff;}
  .cart-badge.is-empty{display:none;}

  /* Zoekbalk blijft WIT bij hover (geen grijze verspringing). */
  .mega-header .search-trigger{background:#fff;color:#6c757d;}
  .mega-header .search-trigger:hover,
  .mega-header .search-trigger:focus{
    background:#fff;border-color:#adb5bd;color:#6c757d;
    box-shadow:0 0 0 .15rem rgba(13,110,253,.10);}

  /* Logo: nooit breder dan het scherm, zodat de header op mobiel niet overloopt.
     Los mobiel logo via site_setting 'logo_mobile'; helemaal verbergen op mobiel
     via 'logo_hide_mobile' = 1 (dan verschijnt de shopnaam als tekst). */
  .mega-header .navbar-brand{min-width:0;overflow:hidden;}
  .mega-header .brand-img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;}
  .mega-header .brand-text{display:inline-block;max-width:60vw;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
  @media (max-width: 991.98px){
    .mega-header .brand-img{max-height:36px;max-width:150px;}
  }

  .usp-bar{background:var(--bs-primary,#0d6efd);color:#fff;font-size:.82rem;padding:.4rem 0;}
  .usp-bar i{font-size:.8rem;}

  /* Mobiel: één USP tegelijk, balk max 24px hoog */
  .usp-mobile{position:relative;height:24px;overflow:hidden;text-align:center;}
  .usp-mobile .usp-slide{position:absolute;left:0;right:0;top:0;line-height:24px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    opacity:0;transform:translateY(100%);transition:opacity .4s ease,transform .4s ease;}
  .usp-mobile .usp-slide.is-active{opacity:1;transform:translateY(0);}
  .usp-mobile .usp-slide.is-leaving{opacity:0;transform:translateY(-100%);}
  @media (max-width: 991.98px){ .usp-bar{padding:0;} }

  .mega-bar{background:#fff;}
  .mega-nav{list-style:none;display:flex;gap:.25rem;margin:0;padding:0;align-items:center;}
  .mega-item{position:static;}
  .mega-link{display:flex;align-items:center;gap:.35rem;padding:.75rem 1rem;
             color:inherit;text-decoration:none;white-space:nowrap;}
  .mega-item:hover > .mega-link{color:var(--bs-primary,#0d6efd);}

  /* Mega-panel over de volle breedte, onder de balk */
  .mega-panel{position:absolute;left:0;right:0;top:100%;z-index:1030;background:#fff;
              border-top:1px solid var(--bs-border-color,#e6e6e6);
              box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12);
              padding:1.5rem 0;display:none;}
  .mega-bar{position:relative;}
  .mega-item:hover > .mega-panel,
  .mega-item:focus-within > .mega-panel{display:block;}

  .mega-sub-title{display:block;font-weight:600;color:inherit;text-decoration:none;margin-bottom:.35rem;}
  .mega-sub-title:hover{color:var(--bs-primary,#0d6efd);}
  .mega-sub-list{list-style:none;padding:0;margin:0;}
  .mega-sub-list a{display:block;padding:.2rem 0;color:#555;text-decoration:none;font-size:.9rem;}
  .mega-sub-list a:hover{color:var(--bs-primary,#0d6efd);}
  .mega-footer{border-top:1px solid var(--bs-border-color,#e6e6e6);margin-top:1rem;padding-top:.75rem;}
  .mega-footer a{text-decoration:none;font-weight:600;}

/* header css einde */

/* header kleuren start */
/* header kleuren einde */

/* eigen css start */
/* eigen css einde */